Merge branch 'bot_ui_improvements' into 'master'

BotUI: UI/UX improvements

See merge request postgres-ai/database-lab!878

Author: NikolayS

ui/packages/platform/src/pages/Bot/Command/Command.tsx

@@ -168,6 +168,7 @@ export const Command = React.memo((props: Props) => {
   useEffect(() => {
     if (!inputRef.current) return
     if (window.innerWidth > theme.breakpoints.values.md) inputRef.current.focus()
+    setValue('')
   }, [threadId]);
 
 

ui/packages/platform/src/pages/Bot/hooks.ts

@@ -14,6 +14,7 @@ import {getChats} from "api/bot/getChats";
 import {useAlertSnackbar} from "@postgres.ai/shared/components/AlertSnackbar/useAlertSnackbar";
 import {localStorage} from "../../helpers/localStorage";
 import { makeChatPublic } from "../../api/bot/makeChatPublic";
+import { usePrev } from "../../hooks/usePrev";
 
 
 const WS_URL = process.env.REACT_APP_WS_URL || '';
@@ -41,26 +42,34 @@ type UseAiBotReturnType = {
   wsReadyState: ReadyState;
   changeChatVisibility: (threadId: string, isPublic: boolean) => void;
   isChangeVisibilityLoading: boolean;
-  unsubscribe: (threadId: string) => void
+  unsubscribe: (threadId: string) => void;
+  chatsList: UseBotChatsListHook['chatsList'];
+  chatsListLoading: UseBotChatsListHook['loading'];
+  getChatsList: UseBotChatsListHook['getChatsList']
 }
 
 type UseAiBotArgs = {
   threadId?: string;
-  prevThreadId?: string;
-  onChatLoadingError?: () => void;
+  orgId?: number
 }
 
 export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
-  const { threadId, onChatLoadingError } = args;
+  const { threadId, orgId } = args;
   const { showMessage, closeSnackbar } = useAlertSnackbar();
   let location = useLocation<{skipReloading?: boolean}>();
 
+  const {
+    chatsList,
+    loading: chatsListLoading,
+    getChatsList,
+  } = useBotChatsList(orgId);
+
   const [messages, setMessages] = useState<BotMessage[] | null>(null);
   const [isLoading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<ErrorType | null>(null);
   const [wsLoading, setWsLoading] = useState<boolean>(false);
   const [isChangeVisibilityLoading, setIsChangeVisibilityLoading] = useState<boolean>(false)
-  
+
   const token = localStorage.getAuthToken()
 
   const onWebSocketError = (error: WebSocketEventMap['error']) => {
@@ -92,6 +101,9 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
               });
             }
           }
+        } else if (threadId !== messageData.thread_id) {
+          const threadInList = chatsList?.find((item) => item.thread_id === messageData.thread_id)
+          if (!threadInList) getChatsList()
         }
       } else {
         showMessage('An error occurred. Please try again')
@@ -137,7 +149,6 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
         if (response && response.length > 0) {
           setMessages(response);
         } else {
-          if (onChatLoadingError) onChatLoadingError();
           setError({
             code: 404,
             message: 'Specified chat not found or you have no access.',
@@ -168,7 +179,6 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
     } else if (threadId) {
       subscribe(threadId)
     }
-
     return () => {
       isCancelled = true;
     };
@@ -294,15 +304,18 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
     sendMessage,
     clearChat,
     messages,
-    unsubscribe
+    unsubscribe,
+    chatsList,
+    chatsListLoading,
+    getChatsList
   }
 }
 
 type UseBotChatsListHook = {
   chatsList: BotMessage[] | null;
   error: Response | null;
   loading: boolean;
-  getChatsList: () => void
+  getChatsList: () => void;
 };
 
 export const useBotChatsList = (orgId?: number): UseBotChatsListHook => {

ui/packages/platform/src/pages/Bot/index.tsx

@@ -103,11 +103,14 @@ export const BotPage = (props: BotPageProps) => {
     wsReadyState,
     isChangeVisibilityLoading,
     changeChatVisibility,
-    unsubscribe
+    unsubscribe,
+    chatsListLoading,
+    getChatsList,
+    chatsList
   } = useAiBot({
     threadId: match.params.threadId,
+    orgId: orgData.id
   });
-  const {chatsList, loading: chatsListLoading, getChatsList} = useBotChatsList(orgData.id);
 
   const matches = useMediaQuery(theme.breakpoints.down('sm'));