=> {
+ 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 (
<>
Ideas:
-
-
-
+ {
+ isPending ?
+ ({t('Generating ideas')}...
) :
+ ({promptIdeas.map(title => ())}
)
+ }
>
);
}
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 }) {
{/* null} />*/}
- onAsk(query)} />
+ onAsk(query)} projectId={projectId} />