=> {
+ 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..2cca2d444 100644
--- a/frontend/app/components/Kai/components/Ideas.tsx
+++ b/frontend/app/components/Kai/components/Ideas.tsx
@@ -1,16 +1,43 @@
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 ideas = React.useMemo(() => {
+ const defaultPromptIdeas = [
+ 'Top user journeys',
+ 'Where do users drop off',
+ 'Failed network requests today',
+ ];
+ const result = suggestedPromptIdeas;
+ const targetSize = 3;
+ while (result.length < targetSize && defaultPromptIdeas.length) {
+ result.push(defaultPromptIdeas.pop())
+ }
+ return result;
+ }, [suggestedPromptIdeas.length]);
return (
<>
Ideas:
-
-
-
+ {
+ isPending ?
+ ({t('Generating ideas')}...
) :
+ ({ideas.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} />