From b524af2b708e1fceb839aaf4976f3fdaae475f2c Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 12 May 2025 11:42:05 +0200
Subject: [PATCH] ui: removing hardcode...

---
 frontend/app/components/Kai/KaiChat.tsx       | 60 ++++++++++++-------
 frontend/app/components/Kai/KaiService.ts     | 12 ++--
 frontend/app/components/Kai/KaiStore.ts       | 10 ++--
 frontend/app/components/Kai/SocketManager.ts  |  9 +--
 .../app/components/Kai/components/ChatLog.tsx |  6 +-
 5 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/frontend/app/components/Kai/KaiChat.tsx b/frontend/app/components/Kai/KaiChat.tsx
index 93fa98c28..54267a16b 100644
--- a/frontend/app/components/Kai/KaiChat.tsx
+++ b/frontend/app/components/Kai/KaiChat.tsx
@@ -10,7 +10,7 @@ import { kaiService } from 'App/services';
 import { toast } from 'react-toastify';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { useHistory, useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom';
 
 function KaiChat() {
   const { userStore, projectsStore } = useStore();
@@ -29,11 +29,14 @@ function KaiChat() {
 
   const openChats = () => {
     showModal(
-      <ChatsModal onSelect={(threadId: string, title: string) => {
-        setTitle(title);
-        setThreadId(threadId)
-        hideModal();
-      }} />,
+      <ChatsModal
+        projectId={activeSiteId}
+        onSelect={(threadId: string, title: string) => {
+          setTitle(title);
+          setThreadId(threadId);
+          hideModal();
+        }}
+      />,
       { right: true, width: 300 },
     );
   };
@@ -43,7 +46,7 @@ function KaiChat() {
       setThreadId(threadIdFromUrl);
       setSection('chat');
     }
-  }, [threadIdFromUrl])
+  }, [threadIdFromUrl]);
 
   React.useEffect(() => {
     if (threadId) {
@@ -58,31 +61,35 @@ function KaiChat() {
   if (!userId || !activeSiteId) return null;
 
   const canGoBack = section !== 'intro';
-  const goBack = canGoBack ? () => {
-    if (section === 'chat') {
-      setThreadId(null);
-      setSection('intro')
-    }
-  } : undefined;
+  const goBack = canGoBack
+    ? () => {
+        if (section === 'chat') {
+          setThreadId(null);
+          setSection('intro');
+        }
+      }
+    : undefined;
 
   const onCreate = async (firstMsg?: string) => {
-    //const settings = { projectId: projectId ?? 2325, userId: userId ?? 65 };
-    const settings = { projectId: '2325', userId: '0' };
     if (firstMsg) {
       setInitialMsg(firstMsg);
     }
-    const newThread = await kaiService.createKaiChat(settings.projectId, settings.userId)
+    const newThread = await kaiService.createKaiChat(activeSiteId);
     if (newThread) {
       setThreadId(newThread.toString());
       setSection('chat');
     } else {
       toast.error("Something wen't wrong. Please try again later.");
     }
-  }
+  };
   return (
     <div className="w-full mx-auto" style={{ maxWidth: PANEL_SIZES.maxWidth }}>
       <div className={'w-full rounded-lg overflow-hidden border shadow'}>
-        <ChatHeader chatTitle={chatTitle} openChats={openChats} goBack={goBack} />
+        <ChatHeader
+          chatTitle={chatTitle}
+          openChats={openChats}
+          goBack={goBack}
+        />
         <div
           className={
             'w-full bg-active-blue flex flex-col items-center justify-center py-4 relative'
@@ -112,16 +119,20 @@ function KaiChat() {
   );
 }
 
-function ChatsModal({ onSelect }: { onSelect: (threadId: string, title: string) => void }) {
-  const userId = '0';
-  const projectId = '2325';
+function ChatsModal({
+  onSelect,
+  projectId,
+}: {
+  onSelect: (threadId: string, title: string) => void;
+  projectId: string;
+}) {
   const {
     data = [],
     isPending,
     refetch,
   } = useQuery({
     queryKey: ['kai', 'chats'],
-    queryFn: () => kaiService.getKaiChats(userId, projectId),
+    queryFn: () => kaiService.getKaiChats(projectId),
     staleTime: 1000 * 60,
   });
 
@@ -144,7 +155,10 @@ function ChatsModal({ onSelect }: { onSelect: (threadId: string, title: string)
       ) : (
         <div className="flex flex-col overflow-y-auto -mx-4 px-4">
           {data.map((chat) => (
-            <div key={chat.thread_id} className="flex items-center relative group min-h-8">
+            <div
+              key={chat.thread_id}
+              className="flex items-center relative group min-h-8"
+            >
               <div
                 style={{ width: 270 - 28 - 4 }}
                 className="rounded-l pl-2 h-full w-full hover:bg-active-blue flex items-center"
diff --git a/frontend/app/components/Kai/KaiService.ts b/frontend/app/components/Kai/KaiService.ts
index 6e63c6334..8b1abfe4b 100644
--- a/frontend/app/components/Kai/KaiService.ts
+++ b/frontend/app/components/Kai/KaiService.ts
@@ -1,7 +1,7 @@
 import AiService from "@/services/AiService";
 
 export default class KaiService extends AiService {
-  getKaiChats = async (userId: string, projectId: string): Promise<{ title: string, threadId: string }[]> => {
+  getKaiChats = async (projectId: string): Promise<{ title: string, threadId: string }[]> => {
     // const r = await this.client.get('/kai/PROJECT_ID/chats');
     const jwt = this.client.getJwt()
     const r = await fetch(`http://localhost:8700/kai/${projectId}/chats`, {
@@ -18,7 +18,7 @@ export default class KaiService extends AiService {
     return data;
   }
 
-  deleteKaiChat = async (projectId: string, userId: string, threadId: string): Promise<boolean> => {
+  deleteKaiChat = async (projectId: string, threadId: string): Promise<boolean> => {
     const jwt = this.client.getJwt()
     const r = await fetch(`http://localhost:8700/kai/${projectId}/chats/${threadId}`, {
       method: 'DELETE',
@@ -34,7 +34,7 @@ export default class KaiService extends AiService {
     return true;
   }
 
-  getKaiChat = async (projectId: string, userId: string, threadId: string): Promise<{ role: string, content: string, message_id: any, duration?: number }[]> => {
+  getKaiChat = async (projectId: string, threadId: string): Promise<{ role: string, content: string, message_id: any, duration?: number }[]> => {
     const jwt = this.client.getJwt()
     const r = await fetch(`http://localhost:8700/kai/${projectId}/chats/${threadId}`, {
       method: 'GET',
@@ -51,7 +51,7 @@ export default class KaiService extends AiService {
     return data;
   }
 
-  createKaiChat = async (projectId: string, userId: string): Promise<number> => {
+  createKaiChat = async (projectId: string): Promise<number> => {
     const jwt = this.client.getJwt()
     const r = await fetch(`http://localhost:8700/kai/${projectId}/chat/new`, {
       method: 'GET',
@@ -68,7 +68,7 @@ export default class KaiService extends AiService {
     return data;
   }
 
-  feedback = async (positive: boolean | null, messageId: string, projectId: string, userId: string) => {
+  feedback = async (positive: boolean | null, messageId: string, projectId: string) => {
     const jwt = this.client.getJwt()
     const r = await fetch(`http://localhost:8700/kai/${projectId}/messages/feedback`, {
       method: 'POST',
@@ -90,7 +90,7 @@ export default class KaiService extends AiService {
     return await r.json()
   }
 
-  cancelGeneration = async (projectId: string, threadId: string, userId: string) => {
+  cancelGeneration = async (projectId: string, threadId: string) => {
     const jwt = this.client.getJwt()
     const r = await fetch(`http://localhost:8700/kai/${projectId}/cancel/${threadId}`, {
       method: 'POST',
diff --git a/frontend/app/components/Kai/KaiStore.ts b/frontend/app/components/Kai/KaiStore.ts
index a3a1583c6..9e9f79add 100644
--- a/frontend/app/components/Kai/KaiStore.ts
+++ b/frontend/app/components/Kai/KaiStore.ts
@@ -87,10 +87,10 @@ class KaiStore {
     })
   }
 
-  getChat = async (projectId: string, userId: string, threadId: string) => {
+  getChat = async (projectId: string, threadId: string) => {
     this.setLoadingChat(true);
     try {
-      const res = await aiService.getKaiChat(projectId, userId, threadId);
+      const res = await aiService.getKaiChat(projectId, threadId);
       if (res && res.length) {
         this.setMessages(
           res.map((m) => {
@@ -113,11 +113,12 @@ class KaiStore {
   };
 
   createChatManager = (
-    settings: { projectId: string; userId: string; threadId: string },
+    settings: { projectId: string; threadId: string },
     setTitle: (title: string) => void,
     initialMsg: string | null,
   ) => {
-    this.chatManager = new ChatManager(settings);
+    const token = kaiService.client.getJwt()
+    this.chatManager = new ChatManager({ ...settings, token });
     this.chatManager.setOnMsgHook({
       msgCallback: (msg) => {
         if ('state' in msg) {
@@ -195,7 +196,6 @@ class KaiStore {
         feedback === 'like',
         messageId,
         settings.projectId,
-        settings.userId,
       )
       .then(() => {
         toast.success('Feedback saved.');
diff --git a/frontend/app/components/Kai/SocketManager.ts b/frontend/app/components/Kai/SocketManager.ts
index fd4c409e1..97c859e1b 100644
--- a/frontend/app/components/Kai/SocketManager.ts
+++ b/frontend/app/components/Kai/SocketManager.ts
@@ -4,9 +4,9 @@ export class ChatManager {
   socket: ReturnType<typeof io>;
   threadId: string | null = null;
 
-  constructor({ projectId, userId, threadId }: { projectId: string; userId: string; threadId: string }) {
+  constructor({ projectId, threadId, token }: { projectId: string; threadId: string, token: string }) {
     this.threadId = threadId;
-    console.log('Kai socket', projectId, userId, threadId, window.env.KAI_TESTING);
+    console.log('Kai socket', projectId, threadId, token);
     const socket = io(`localhost:8700/kai/chat`, {
       transports: ['websocket'],
       autoConnect: true,
@@ -17,11 +17,12 @@ export class ChatManager {
       withCredentials: true,
       multiplex: true,
       query: {
-        user_id: userId,
-        token: window.env.KAI_TESTING,
         project_id: projectId,
         thread_id: threadId,
       },
+      auth: {
+        token: `Bearer ${token}`,
+      }
     });
     socket.on('connect', () => {
       console.log('Connected to server');
diff --git a/frontend/app/components/Kai/components/ChatLog.tsx b/frontend/app/components/Kai/components/ChatLog.tsx
index 8876af12b..fa981f027 100644
--- a/frontend/app/components/Kai/components/ChatLog.tsx
+++ b/frontend/app/components/Kai/components/ChatLog.tsx
@@ -28,10 +28,9 @@ function ChatLog({
   const processingStage = kaiStore.processingStage;
 
   React.useEffect(() => {
-    //const settings = { projectId: projectId ?? 2325, userId: userId ?? 65 };
-    const settings = { projectId: '2325', userId: '0', threadId, };
+    const settings = { projectId, threadId };
     if (threadId && !initialMsg) {
-      void kaiStore.getChat(settings.projectId, settings.userId, threadId)
+      void kaiStore.getChat(settings.projectId, threadId)
     }
     if (threadId) {
       kaiStore.createChatManager(settings, onTitleChange, initialMsg)
@@ -54,7 +53,6 @@ function ChatLog({
   }, [messages.length, processingStage]);
 
   const lastHumanMsgInd: null | number = kaiStore.lastHumanMessage.index;
-  console.log('messages', messages)
   return (
     <Loader loading={loading} className={'w-full h-full'}>
       <div