feat(chat): integrating chatbot with new API

ui/src/App.tsx

@@ -34,7 +34,7 @@ function App() {
       element: <UsersTablePage />
     },
     {
-      path: '/admin/chat-histories',
+      path: '/admin/histories',
       element: <ChatHistoriesTablePage />
     },
 

ui/src/atoms/index.ts

@@ -12,8 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Client from '@services/Api';
-import { ChatHistory, DataRow, User } from '@shared/types';
+import { ChatHistory, User } from '@shared/types';
 import { atom } from 'jotai';
 import { atomWithStorage } from "jotai/utils";
 
@@ -23,26 +22,13 @@ export const adminAtom = atomWithStorage('admin', localStorage.getItem('admin')
 export const modalAtom = atom<boolean>(false);
 export const asyncAtom = atom<boolean>(false);
 export const messagesAtom = atom<ChatHistory[]>([]);
-export const conversationsAtom = atom<ChatHistory[]>([]);
-export const userAtom = atomWithStorage<User | null>('user', localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') as string) : null);
+export const userWithTokenAtom = atomWithStorage<User | null>('user', localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') as string) : null);
+export const publicUserAtom = atom<User>({});
 export const usernameAtom = atom<string>('');
-export const selectedUserAtom = atom<User>({ username: '', admin: false, token: '' });
-export const comparisonUserAtom = atom<User>({ username: '', admin: false, token: '' });
+export const isTypingAtom = atom<boolean>(false);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const selectedRowAtom = atom<any>({});
 
 
-export const usersAtom = atom<DataRow<User>[]>([]);
-export const createUserAtom = atom(
-  null,
-  async (get, set, newUser: User) => {
-    try {
-      const createdUser = await Client.createUser(newUser);
-      set(usersAtom, (prev) => [...prev, createdUser]);
 
-    } catch (error) {
-      console.error(error);
-    }
-  }
-);

ui/src/atoms/sessions.ts

@@ -0,0 +1,47 @@
+// Copyright 2024 Iguazio
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Client from '@services/Api';
+import { Session } from '@shared/types/session';
+import { atom } from 'jotai';
+
+export const sessionsAtom = atom<Session[]>([]);
+
+export const sessionsLoadingAtom = atom<boolean>(false);
+
+export const sessionsErrorAtom = atom<string | null>(null);
+
+
+export const sessionsWithFetchAtom = atom(
+  (get) => get(sessionsAtom),
+  async (_get, set, username) => {
+    set(sessionsLoadingAtom, true);
+    set(sessionsErrorAtom, null);
+    try {
+      const sessions = await Client.getSessions(username as string);
+      const sortedSessions = sessions.data.sort((a: Session, b: Session) => {
+        const dateA = new Date(a.created as string);
+        const dateB = new Date(b.created as string);
+        return dateA.getTime() - dateB.getTime();
+      });
+      set(sessionsAtom, sortedSessions);
+    } catch (error) {
+      set(sessionsErrorAtom, 'Failed to fetch sessions');
+    } finally {
+      set(sessionsLoadingAtom, false);
+    }
+  }
+);
+
+export const selectedSessionAtom = atom<Session>({ name: '', description: '', labels: {} });

ui/src/atoms/apiAtoms.ts → ui/src/atoms/users.ts

@@ -17,18 +17,9 @@ import { User } from '@shared/types';
 import { atom } from 'jotai';
 
 export const usersAtom = atom<User[]>([]);
-
 export const usersLoadingAtom = atom<boolean>(false);
-
 export const usersErrorAtom = atom<string | null>(null);
 
-export const fetchUsersAtom = atom(
-  async (get) => {
-    get(usersLoadingAtom);
-    const users = await Client.getUsers();
-    return users.data;
-  }
-);
 
 export const usersWithFetchAtom = atom(
   (get) => get(usersAtom),
@@ -45,3 +36,23 @@ export const usersWithFetchAtom = atom(
     }
   }
 );
+
+export const publicUserAtom = atom<User>({});
+export const userLoadingAtom = atom<boolean>(false);
+export const userErrorAtom = atom<string | null>(null);
+
+export const userWithFetchAtom = atom(
+  (get) => get(publicUserAtom),
+  async (_get, set, username: string) => {
+    set(userLoadingAtom, true);
+    set(userErrorAtom, null);
+    try {
+      const user = await Client.getUser(username);
+      set(publicUserAtom, user.data);
+    } catch (error) {
+      set(userErrorAtom, 'Failed to fetch user');
+    } finally {
+      set(userLoadingAtom, false);
+    }
+  }
+);

ui/src/components/feature/Chat.tsx

@@ -17,54 +17,53 @@ import Bubble from '@components/shared/Bubble'
 import Message from '@components/shared/Message'
 import Client from '@services/Api'
 import { ChatHistory } from '@shared/types'
-import { messagesAtom, sessionIdAtom } from 'atoms'
+import { messagesAtom, sessionIdAtom, usernameAtom } from 'atoms'
 import { useAtom } from 'jotai'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 const Chat = () => {
   const [messages, setMessages] = useAtom<ChatHistory[]>(messagesAtom)
-  const [sessionId, setSessionId] = useAtom(sessionIdAtom)
+  const [sessionId] = useAtom(sessionIdAtom)
+  const [username] = useAtom(usernameAtom)
 
   useEffect(() => {
     async function fetchData() {
-      console.log('getting session:', sessionId)
-      if (!sessionId) {
-        setMessages([])
-        return
-      }
-      const chatSession = await Client.getSession(sessionId)
-      console.log('session resp:', chatSession)
-      if (chatSession) {
-        setMessages(chatSession.history)
-      } else {
-        setMessages([])
-      }
+      await Client.getSession(username, sessionId)
     }
     fetchData()
-  }, [sessionId, setMessages])
+  }, [sessionId, setMessages, username])
+
+  const lastMessageRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (lastMessageRef.current) {
+      lastMessageRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    }
+  }, [messages, setMessages])
 
   return (
     <Flex
-      marginX={{ sm: '5%', lg: '25%' }}
+      paddingX={{ xl: '25%', md: '10%' }}
       paddingBottom={4}
       flexDir={'column'}
       justifyContent={'space-between'}
       flexGrow={1}
       height="calc(100vh - 92px)"
     >
       <Flex justifyContent="flex-start" flexGrow={1} flexDirection="column" paddingBottom="92px" overflowY="scroll">
-        {messages?.map((chatHistory, index) => (
+        {messages?.map((message, index) => (
           <Bubble
             key={index}
-            content={chatHistory.content}
-            bot={chatHistory.role}
-            sources={chatHistory.sources}
-            html={chatHistory.html as string}
+            content={message.content}
+            bot={message.role}
+            sources={message.sources}
+            html={message.html as string}
           />
         ))}
+        <Box height={'2px'} ref={lastMessageRef} />
       </Flex>
       <Box>
-        <Message setter={setMessages} />
+        <Message />
       </Box>
     </Flex>
   )

ui/src/components/feature/ChatHistoryTable.tsx

@@ -78,7 +78,7 @@ const ChatHistoryTable = () => {
           },
           {
             page: 'Chat Histories',
-            url: '/chat-histories'
+            url: '/histories'
           }
         ]}
       />
@@ -90,6 +90,8 @@ const ChatHistoryTable = () => {
         columns={columns as TableColumn<Partial<ChatHistory>>[]}
         contextActions={contextActions}
         onSelectedRowChange={e => setSelectedRows(e.selectedRows)}
+        toggleClearRows={false}
+        onOpenDrawer={() => {}}
       />
     </Flex>
   )

ui/src/components/feature/ChatMessage.tsx

@@ -12,15 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { isTypingAtom } from '@atoms/index'
+import { useAtom } from 'jotai'
 import React from 'react'
+import Markdown from 'react-markdown'
 import TypingText from './TypingText'
 
 interface ChatMessageProps {
   message: string
 }
 
 const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
-  return <TypingText text={message} />
+  const [isTyping] = useAtom(isTypingAtom)
+
+  if (isTyping) {
+    return <TypingText text={message} />
+  }
+  return <Markdown>{message}</Markdown>
 }
 
 export default ChatMessage