Merge branch 'master' into select_ai_model

Author: Bogdan Tsechoev

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/Messages/Message/CodeBlock.tsx

@@ -6,6 +6,7 @@ import languages from 'react-syntax-highlighter/dist/esm/languages/prism/support
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
+import CodeIcon from '@material-ui/icons/Code';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -38,18 +39,27 @@ const useStyles = makeStyles((theme) => ({
     width: '0.813rem',
   },
   summary: {
+    color: 'rgb(166, 38, 164)',
     textDecoration: 'underline',
     textDecorationStyle: 'dotted',
     cursor: 'pointer',
     backgroundColor: 'transparent',
     boxShadow: 'none',
     display: 'inline-flex',
-    minHeight: '32px!important',
+    minHeight: '2rem!important',
     padding: 0,
     '&:hover': {
       textDecoration: 'none'
     }
   },
+  summaryText: {
+    display: 'inline-flex',
+    alignItems: 'center'
+  },
+  summaryTextIcon: {
+    marginRight: 8,
+    fontSize: '1rem'
+  },
   details: {
     padding: 0,
     backgroundColor: 'transparent'
@@ -117,7 +127,12 @@ export const CodeBlock = memo(({ value, language }: CodeBlockProps) => {
     return (
       <Accordion expanded={expanded} onChange={handleToggle} className={classes.accordion}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />} className={classes.summary}>
-          <Typography>{expanded ? 'Hide' : 'Show'} code block ({codeLines.length} LOC)</Typography>
+          <Typography
+            className={classes.summaryText}
+          >
+            <CodeIcon className={classes.summaryTextIcon} />
+            {expanded ? 'Hide' : 'Show'} code block ({codeLines.length} LOC)
+          </Typography>
         </AccordionSummary>
         <AccordionDetails className={classes.details}>
           <div className={classes.container}>

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

@@ -50,30 +50,37 @@ type UseAiBotReturnType = {
   changeChatVisibility: (threadId: string, isPublic: boolean) => void;
   isChangeVisibilityLoading: boolean;
   unsubscribe: (threadId: string) => void;
+  chatsList: UseBotChatsListHook['chatsList'];
+  chatsListLoading: UseBotChatsListHook['loading'];
+  getChatsList: UseBotChatsListHook['getChatsList']
   model: UseLLMModelsList['model'],
   setModel: UseLLMModelsList['setModel']
   llmModels: UseLLMModelsList['llmModels']
 }
 
 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();
   const { llmModels, model, setModel } = useLLMModelsList();
   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 [isChangeVisibilityLoading, setIsChangeVisibilityLoading] = useState<boolean>(false)
 
-  
   const token = localStorage.getAuthToken()
 
   const onWebSocketError = (error: WebSocketEventMap['error']) => {
@@ -105,6 +112,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')
@@ -150,7 +160,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.',
@@ -181,7 +190,6 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
     } else if (threadId) {
       subscribe(threadId)
     }
-
     return () => {
       isCancelled = true;
     };
@@ -309,6 +317,9 @@ export const useAiBot = (args: UseAiBotArgs): UseAiBotReturnType => {
     clearChat,
     messages,
     unsubscribe,
+    chatsList,
+    chatsListLoading,
+    getChatsList,
     model,
     setModel,
     llmModels
@@ -319,7 +330,7 @@ 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

@@ -106,11 +106,14 @@ export const BotPage = (props: BotPageProps) => {
     unsubscribe,
     model,
     setModel,
-    llmModels
+    llmModels,
+    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'));