From 22a6e526069ffab5f3bad55db6fe2a1b0b8863de Mon Sep 17 00:00:00 2001
From: Jonathan Griffin <jonathangriffin@Jonathans-MacBook-Air.local>
Date: Mon, 26 May 2025 16:49:18 +0200
Subject: [PATCH] update display logic

---
 frontend/app/components/Kai/KaiChat.tsx       |  2 +-
 frontend/app/components/Kai/KaiService.ts     | 11 +++++++
 .../app/components/Kai/components/Ideas.tsx   | 32 ++++++++++++++++---
 .../Kai/components/IntroSection.tsx           |  4 +--
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Kai/KaiChat.tsx b/frontend/app/components/Kai/KaiChat.tsx
index 35fb8f257..d3952cffa 100644
--- a/frontend/app/components/Kai/KaiChat.tsx
+++ b/frontend/app/components/Kai/KaiChat.tsx
@@ -119,7 +119,7 @@ function KaiChat() {
           }}
         >
           {section === 'intro' ? (
-            <IntroSection onAsk={onCreate} />
+              <IntroSection onAsk={onCreate} projectId={activeSiteId} />
           ) : (
             <ChatLog
               threadId={threadId}
diff --git a/frontend/app/components/Kai/KaiService.ts b/frontend/app/components/Kai/KaiService.ts
index 447ce1779..1843af9cd 100644
--- a/frontend/app/components/Kai/KaiService.ts
+++ b/frontend/app/components/Kai/KaiService.ts
@@ -123,4 +123,15 @@ export default class KaiService extends AiService {
     const data = await r.json();
     return data;
   };
+
+  getPromptSuggestions = async (
+    projectId: string,
+  ): Promise<string[]> => {
+    const r = await this.client.get(`/kai/${projectId}/prompt-suggestions`);
+    if (!r.ok) {
+      throw new Error('Failed to fetch prompt suggestions');
+    }
+    const data = await r.json();
+    return data;
+  };
 }
diff --git a/frontend/app/components/Kai/components/Ideas.tsx b/frontend/app/components/Kai/components/Ideas.tsx
index 1cd2f86e2..72abae341 100644
--- a/frontend/app/components/Kai/components/Ideas.tsx
+++ b/frontend/app/components/Kai/components/Ideas.tsx
@@ -1,16 +1,40 @@
 import React from 'react';
 import { Lightbulb, MoveRight } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { kaiService } from 'App/services';
+import { useTranslation } from 'react-i18next';
 
-function Ideas({ onClick }: { onClick: (query: string) => void }) {
+function Ideas({ onClick, projectId }: { onClick: (query: string) => void, projectId: string }) {
+  const { t } = useTranslation();
+    const {
+        data: suggestedPromptIdeas = [],
+        isPending,
+    } = useQuery({
+        queryKey: ['kai', 'prompt-suggestions', projectId],
+        queryFn: () => kaiService.getPromptSuggestions(projectId),
+        staleTime: 1000 * 60,
+    });
+    const defaultPromptIdeas = [
+        'Top user journeys',
+        'Where do users drop off',
+        'Failed network requests today',
+    ];
+    const maxPromptIdeas = defaultPromptIdeas.length;
+    const promptIdeas = [
+        ...suggestedPromptIdeas,
+        ...defaultPromptIdeas,
+    ].slice(0, maxPromptIdeas);
   return (
     <>
       <div className={'flex items-center gap-2 mb-1 text-gray-dark'}>
         <Lightbulb size={16} />
         <b>Ideas:</b>
       </div>
-      <IdeaItem onClick={onClick} title={'Top user journeys'} />
-      <IdeaItem onClick={onClick} title={'Where do users drop off'} />
-      <IdeaItem onClick={onClick} title={'Failed network requests today'} />
+      {
+          isPending ?
+              (<div className="animate-pulse text-disabled-text">{t('Generating ideas')}...</div>) :
+              (<div>{promptIdeas.map(title => (<IdeaItem key={title} onClick={onClick} title={title} />))}</div>)
+      }
     </>
   );
 }
diff --git a/frontend/app/components/Kai/components/IntroSection.tsx b/frontend/app/components/Kai/components/IntroSection.tsx
index 71a69b99c..c6356e9ba 100644
--- a/frontend/app/components/Kai/components/IntroSection.tsx
+++ b/frontend/app/components/Kai/components/IntroSection.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ChatInput from './ChatInput';
 import Ideas from './Ideas';
 
-function IntroSection({ onAsk }: { onAsk: (query: string) => void }) {
+function IntroSection({ onAsk, projectId }: { onAsk: (query: string) => void, projectId: string }) {
   const isLoading = false;
   return (
     <>
@@ -14,7 +14,7 @@ function IntroSection({ onAsk }: { onAsk: (query: string) => void }) {
         {/*<GradientBorderInput placeholder={'Ask anything about your product and users...'} onButtonClick={() => null} />*/}
         <ChatInput isLoading={isLoading} onSubmit={onAsk} />
         <div className={'absolute top-full flex flex-col gap-2 mt-4'}>
-          <Ideas onClick={(query) => onAsk(query)} />
+          <Ideas onClick={(query) => onAsk(query)} projectId={projectId} />
         </div>
       </div>
       <div className={'text-disabled-text absolute bottom-4'}>