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' ? ( - + ) : ( => { + 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} />