update display logic

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}

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;
+  };
 }

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>)
+      }
     </>
   );
 }

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'}>