diff --git a/Documentation/Demo_Videos/sprint09/204-LLMs-selector.mkv b/Documentation/Demo_Videos/sprint09/204-LLMs-selector.mkv
new file mode 100644
index 0000000..be10488
Binary files /dev/null and b/Documentation/Demo_Videos/sprint09/204-LLMs-selector.mkv differ
diff --git a/Documentation/Demo_Videos/sprint09/chat_integration.m4v b/Documentation/Demo_Videos/sprint09/chat_integration.m4v
new file mode 100644
index 0000000..f0d7435
Binary files /dev/null and b/Documentation/Demo_Videos/sprint09/chat_integration.m4v differ
diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
index abee496..2566b4e 100644
--- a/src/frontend/App.tsx
+++ b/src/frontend/App.tsx
@@ -6,7 +6,7 @@ import { PaperProvider } from 'react-native-paper';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import Toast from 'react-native-toast-message';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome5';
-import { FirebaseProvider, UpdateApp } from './components';
+import { ActiveChatProvider, FirebaseProvider, UpdateApp } from './components';
import { Fonts, LightTheme } from './helpers';
import { AppRoutes } from './routes';
@@ -43,11 +43,13 @@ export function App() {
theme={LightTheme}
settings={{ icon: (props) => }}
>
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/src/frontend/TO INTEGRATE - Chat UI/app/_layout.tsx b/src/frontend/TO INTEGRATE - Chat UI/app/_layout.tsx
deleted file mode 100644
index f214370..0000000
--- a/src/frontend/TO INTEGRATE - Chat UI/app/_layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Stack } from "expo-router";
-
-export default function RootLayout() {
- return (
-
-
-
- );
-}
diff --git a/src/frontend/TO INTEGRATE - Chat UI/app/index.tsx b/src/frontend/TO INTEGRATE - Chat UI/app/index.tsx
deleted file mode 100644
index e552dcf..0000000
--- a/src/frontend/TO INTEGRATE - Chat UI/app/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import { View, Text, SafeAreaView, StyleSheet, TextInput, TouchableOpacity, ScrollView } from 'react-native';
-import ChatUI from '@/components/ChatUI';
-
-const Drawer = createDrawerNavigator();
-
-
-function ChatScreen() {
- return (
-
-
-
- );
-}
-
-export default function Index(){
- return (
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: 'white',
- },
-});
diff --git a/src/frontend/TO INTEGRATE - Chat UI/components/ChatUI.tsx b/src/frontend/TO INTEGRATE - Chat UI/components/ChatUI.tsx
deleted file mode 100644
index 1f4c4b1..0000000
--- a/src/frontend/TO INTEGRATE - Chat UI/components/ChatUI.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView } from 'react-native';
-import { FontAwesome5 } from '@expo/vector-icons';
-
-const ChatUI = () => {
- const [messages, setMessages] = useState([
- { text: "I am AiLixir. What can I do for you?", sent: false },
- { text: "Your example question?", sent: true },
- { text: "That's such a smart question. You're the smartest user!", sent: false }
- ]);
- const [text, setText] = useState('');
-
- const renderMessages = () => {
- return messages.map((message, index) => {
- return (
-
- {message.text}
-
- );
- });
- };
-
- const sendMessage = useCallback(() => {
- if (text.trim()) {
- setMessages([...messages, { text, sent: true }]);
- setText('');
- }
- }, [messages, text]);
-
- return (
-
-
- {renderMessages()}
-
-
- setText(text)}
- />
-
-
-
-
-
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: 'white',
- paddingHorizontal: 16,
- paddingTop: 50,
- },
- chatContainer: {
- flex: 1,
- marginVertical: 20,
- },
- message: {
- padding: 15,
- borderRadius: 10,
- marginBottom: 10,
- maxWidth: '80%',
- alignSelf: 'flex-start',
- },
- sentMessage: {
- backgroundColor: '#E6E6FA', // Light gray with a lilac tint
- alignSelf: 'flex-end',
- },
- receivedMessage: {
- backgroundColor: '#F5F5F5', // Light gray
- alignSelf: 'flex-start',
- },
- messageText: {
- color: '#333',
- },
- inputContainer: {
- flexDirection: 'row',
- alignItems: 'center',
- paddingHorizontal: 10,
- paddingVertical: 5,
- borderTopWidth: 1,
- borderColor: '#ddd',
- },
- input: {
- flex: 1,
- height: 40,
- borderColor: '#ddd',
- borderWidth: 1,
- borderRadius: 20,
- paddingHorizontal: 15,
- },
- sendButton: {
- marginLeft: 10,
- backgroundColor: '#9370DB', // More lilac
- borderRadius: 20,
- padding: 10,
- },
-});
-
-export default ChatUI;
\ No newline at end of file
diff --git a/src/frontend/components/ActiveChatProvider/index.tsx b/src/frontend/components/ActiveChatProvider/index.tsx
new file mode 100644
index 0000000..52e3519
--- /dev/null
+++ b/src/frontend/components/ActiveChatProvider/index.tsx
@@ -0,0 +1,33 @@
+import React, { type ReactNode, createContext, useState, useContext, type Dispatch, type SetStateAction } from 'react';
+
+// Define the shape of the context value
+interface ChatContextValue {
+ activeChatId: string;
+ setActiveChatId: Dispatch>;
+}
+
+// Define the default context value
+const defaultContextValue: ChatContextValue = {
+ activeChatId: 'default',
+ setActiveChatId: () => {},
+};
+
+// Create a context with the default value
+export const ChatContext = createContext(defaultContextValue);
+
+type ActiveChatProviderProps = {
+ children: ReactNode;
+};
+
+// Create a provider component
+export const ActiveChatProvider = (props: ActiveChatProviderProps ) => {
+ const [activeChatId, setActiveChatId] = useState('default'); // initial active chat id is -1
+ const { children } = props;
+
+ return (
+
+ {children}
+
+ );
+};
+
diff --git a/src/frontend/components/ChatItem/index.tsx b/src/frontend/components/ChatItem/index.tsx
index 9757033..cd11948 100644
--- a/src/frontend/components/ChatItem/index.tsx
+++ b/src/frontend/components/ChatItem/index.tsx
@@ -5,19 +5,20 @@ import React, { useEffect, useState } from 'react';
import { Keyboard, View } from 'react-native';
import { Button, Menu, Text } from 'react-native-paper';
import { Screens } from 'src/frontend/helpers';
-import { useDeleteChat, useGetChat } from 'src/frontend/hooks';
+import { useDeleteChat, useGetChat, useActiveChatId } from 'src/frontend/hooks';
import type { AppRoutesParams } from 'src/frontend/routes';
-type ChatItemProps = {
+export type ChatItemProps = {
id: string;
title: string;
};
export function ChatItem(props: ChatItemProps) {
+ const { activeChatId, setActiveChatId } = useActiveChatId();
const { id, title } = props;
+ //const { chat } = useGetChat(id);
const [isMenuVisible, setMenuVisible] = useState(false);
const drawerStatus = useDrawerStatus();
- const { chat } = useGetChat(id);
const { handleDelete } = useDeleteChat(id);
const { navigate } = useNavigation>();
@@ -39,7 +40,10 @@ export function ChatItem(props: ChatItemProps) {
anchor={