From 2236b0558ae767140b71d355d9c75beb82f1bdb6 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 27 May 2025 17:45:15 +0200
Subject: [PATCH] ui: some changes for suggestions in thread

---
 frontend/app/components/Kai/KaiService.ts     |  4 +++-
 .../app/components/Kai/components/ChatLog.tsx | 15 ++++++++++++---
 .../app/components/Kai/components/Ideas.tsx   | 19 ++++++++-----------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Kai/KaiService.ts b/frontend/app/components/Kai/KaiService.ts
index 851b02c54..22cade0f8 100644
--- a/frontend/app/components/Kai/KaiService.ts
+++ b/frontend/app/components/Kai/KaiService.ts
@@ -129,7 +129,9 @@ export default class KaiService extends AiService {
     projectId: string,
     threadId?: string | null,
   ): Promise<string[]> => {
-      const endpoint = (threadId) ? `/kai/${projectId}/chats/${threadId}/prompt-suggestions` : `/kai/${projectId}/prompt-suggestions`;
+    const endpoint = threadId
+      ? `/kai/${projectId}/chats/${threadId}/prompt-suggestions`
+      : `/kai/${projectId}/prompt-suggestions`;
     const r = await this.client.get(endpoint);
     if (!r.ok) {
       throw new Error('Failed to fetch prompt suggestions');
diff --git a/frontend/app/components/Kai/components/ChatLog.tsx b/frontend/app/components/Kai/components/ChatLog.tsx
index 313c961e6..d06e9df4b 100644
--- a/frontend/app/components/Kai/components/ChatLog.tsx
+++ b/frontend/app/components/Kai/components/ChatLog.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ChatInput from './ChatInput';
 import ChatMsg, { ChatNotice } from './ChatMsg';
-import Ideas from "./Ideas";
+import Ideas from './Ideas';
 import { Loader } from 'UI';
 import { kaiStore } from '../KaiStore';
 import { observer } from 'mobx-react-lite';
@@ -51,7 +51,10 @@ function ChatLog({
     });
   }, [messages.length, processingStage]);
 
-  const lastHumanMsgInd: null | number = kaiStore.lastHumanMessage.index;
+  const lastKaiMessageInd: null | number = kaiStore.lastKaiMessage.index;
+  const lastHumanMsgInd: number | null = kaiStore.lastHumanMessage.index;
+  const showIdeas =
+    !processingStage && lastKaiMessageInd === messages.length - 1;
   return (
     <Loader loading={loading} className={'w-full h-full'}>
       <div
@@ -82,7 +85,13 @@ function ChatLog({
               duration={processingStage.duration}
             />
           ) : null}
-      {(!processingStage && lastHumanMsgInd && messages.length == lastHumanMsgInd + 2) ? <Ideas onClick={(query) => onSubmit(query)} projectId={projectId} threadId={threadId}/> : null}
+          {showIdeas ? (
+            <Ideas
+              onClick={(query) => onSubmit(query)}
+              projectId={projectId}
+              threadId={threadId}
+            />
+          ) : null}
         </div>
         <div className={'sticky bottom-0 pt-6 w-2/3 z-50'}>
           <ChatInput onCancel={onCancel} onSubmit={onSubmit} />
diff --git a/frontend/app/components/Kai/components/Ideas.tsx b/frontend/app/components/Kai/components/Ideas.tsx
index c0e9e438d..bade87acb 100644
--- a/frontend/app/components/Kai/components/Ideas.tsx
+++ b/frontend/app/components/Kai/components/Ideas.tsx
@@ -10,17 +10,14 @@ function Ideas({
   threadId = null,
 }: {
   onClick: (query: string) => void;
-  projectId: string,
+  projectId: string;
   threadId?: string | null;
 }) {
   const { t } = useTranslation();
-  const {
-      data: suggestedPromptIdeas = [],
-      isPending,
-  } = useQuery({
-      queryKey: ['kai', projectId, 'chats', threadId, 'prompt-suggestions'],
-      queryFn: () => kaiService.getPromptSuggestions(projectId, threadId),
-      staleTime: 1000 * 60,
+  const { data: suggestedPromptIdeas = [], isPending } = useQuery({
+    queryKey: ['kai', projectId, 'chats', threadId, 'prompt-suggestions'],
+    queryFn: () => kaiService.getPromptSuggestions(projectId, threadId),
+    staleTime: 1000 * 60,
   });
   const ideas = React.useMemo(() => {
     const defaultPromptIdeas = [
@@ -36,7 +33,7 @@ function Ideas({
     return result;
   }, [suggestedPromptIdeas.length]);
   return (
-    <>
+    <div>
       <div className={'flex items-center gap-2 mb-1 text-gray-dark'}>
         <b>Suggested Ideas:</b>
       </div>
@@ -45,13 +42,13 @@ function Ideas({
           {t('Generating ideas')}...
         </div>
       ) : (
-        <div className="flex gap-4 flex-wrap">
+        <div className="flex gap-2 flex-wrap">
           {ideas.map((title) => (
             <IdeaItem key={title} onClick={onClick} title={title} />
           ))}
         </div>
       )}
-    </>
+    </div>
   );
 }