chore: adapt UI to server-side Unleash AI chat ownership

Unleash · Oct 16, 2024 · cc6ac56 · cc6ac56
1 parent 3f8d4c3
commit cc6ac56
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 25 deletions.
diff --git a/frontend/src/component/ai/AIChat.tsx b/frontend/src/component/ai/AIChat.tsx
@@ -15,6 +15,11 @@ import { AIChatMessage } from './AIChatMessage';
 import { AIChatHeader } from './AIChatHeader';
 import { Resizable } from 'component/common/Resizable/Resizable';
 
+const AI_LOADING_MESSAGE = {
+    role: 'assistant',
+    content: '_Unleash AI is typing..._',
+} as const;
+
 const StyledAIIconContainer = styled('div')(({ theme }) => ({
     position: 'fixed',
     bottom: 20,
@@ -71,13 +76,6 @@ const StyledChatContent = styled('div')(({ theme }) => ({
     overflowX: 'hidden',
 }));
 
-const initialMessages: ChatMessage[] = [
-    {
-        role: 'system',
-        content: `You are an assistant that helps users interact with Unleash. You should ask the user in case you're missing any required information.`,
-    },
-];
-
 export const AIChat = () => {
     const unleashAIEnabled = useUiFlag('unleashAI');
     const {
@@ -86,9 +84,9 @@ export const AIChat = () => {
     const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState(false);
     const { setToastApiError } = useToast();
-    const { chat } = useAIApi();
+    const { chat, newChat } = useAIApi();
 
-    const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
+    const [messages, setMessages] = useState<ChatMessage[]>([]);
 
     const chatEndRef = useRef<HTMLDivElement | null>(null);
 
@@ -106,18 +104,18 @@ export const AIChat = () => {
         scrollToEnd();
     }, [open]);
 
-    const onSend = async (message: string) => {
-        if (!message.trim() || loading) return;
+    const onSend = async (content: string) => {
+        if (!content.trim() || loading) return;
 
         try {
             setLoading(true);
             const tempMessages: ChatMessage[] = [
                 ...messages,
-                { role: 'user', content: message },
-                { role: 'assistant', content: '_Unleash AI is typing..._' },
+                { role: 'user', content },
+                AI_LOADING_MESSAGE,
             ];
             setMessages(tempMessages);
-            const newMessages = await chat(tempMessages.slice(0, -1));
+            const { messages: newMessages } = await chat(content);
             mutate(() => true);
             setMessages(newMessages);
             setLoading(false);
@@ -126,6 +124,11 @@ export const AIChat = () => {
         }
     };
 
+    const onNewChat = () => {
+        setMessages([]);
+        newChat();
+    };
+
     if (!unleashAIEnabled || !unleashAIAvailable) {
         return null;
     }
@@ -151,7 +154,7 @@ export const AIChat = () => {
             >
                 <StyledChat>
                     <AIChatHeader
-                        onNew={() => setMessages(initialMessages)}
+                        onNew={onNewChat}
                         onClose={() => setOpen(false)}
                     />
                     <StyledChatContent>

diff --git a/frontend/src/hooks/api/actions/useAIApi/useAIApi.ts b/frontend/src/hooks/api/actions/useAIApi/useAIApi.ts
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import useAPI from '../useApi/useApi';
 
 const ENDPOINT = 'api/admin/ai';
@@ -7,29 +8,47 @@ export type ChatMessage = {
     content: string;
 };
 
+type Chat = {
+    id: string;
+    userId: number;
+    createdAt: string;
+    messages: ChatMessage[];
+};
+
 export const useAIApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
         propagateErrors: true,
     });
 
-    const chat = async (messages: ChatMessage[]): Promise<ChatMessage[]> => {
+    const [chatId, setChatId] = useState<string>();
+
+    const chat = async (message: string): Promise<Chat> => {
         const requestId = 'chat';
 
-        const req = createRequest(`${ENDPOINT}/chat`, {
-            method: 'POST',
-            body: JSON.stringify({
-                messages,
-            }),
-            requestId,
-        });
+        const req = createRequest(
+            `${ENDPOINT}/chat${chatId ? `/${chatId}` : ''}`,
+            {
+                method: 'POST',
+                body: JSON.stringify({
+                    message,
+                }),
+                requestId,
+            },
+        );
 
         const response = await makeRequest(req.caller, req.id);
-        const { messages: newMessages } = await response.json();
-        return newMessages;
+        const chat: Chat = await response.json();
+        setChatId(chat.id);
+        return chat;
+    };
+
+    const newChat = () => {
+        setChatId(undefined);
     };
 
     return {
         chat,
+        newChat,
         errors,
         loading,
     };