diff --git a/src/components/AIRoadmap/AIRoadmapRegenerate.tsx b/src/components/AIRoadmap/AIRoadmapRegenerate.tsx new file mode 100644 index 000000000..ac5d198ff --- /dev/null +++ b/src/components/AIRoadmap/AIRoadmapRegenerate.tsx @@ -0,0 +1,158 @@ +import { PenSquare, RefreshCcw, SettingsIcon } from 'lucide-react'; +import { useRef, useState } from 'react'; +import { useOutsideClick } from '../../hooks/use-outside-click'; +import { cn } from '../../lib/classname'; +import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; +import { ModifyCoursePrompt } from '../GenerateCourse/ModifyCoursePrompt'; +import type { QuestionAnswerChatMessage } from '../ContentGenerator/QuestionAnswerChat'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { queryClient } from '../../stores/query-client'; +import { httpPost } from '../../lib/query-http'; +import { aiRoadmapOptions } from '../../queries/ai-roadmap'; +import { UpdatePreferences } from '../GenerateGuide/UpdatePreferences'; + +type AIRoadmapRegenerateProps = { + onRegenerate: (prompt?: string) => void; + roadmapSlug: string; +}; + +export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) { + const { onRegenerate, roadmapSlug } = props; + + const [isDropdownVisible, setIsDropdownVisible] = useState(false); + const [showUpgradeModal, setShowUpgradeModal] = useState(false); + const [showPromptModal, setShowPromptModal] = useState(false); + const [showUpdatePreferencesModal, setShowUpdatePreferencesModal] = + useState(false); + + const ref = useRef(null); + + useOutsideClick(ref, () => setIsDropdownVisible(false)); + + const { data: aiRoadmap } = useQuery( + aiRoadmapOptions(roadmapSlug), + queryClient, + ); + const { mutate: updatePreferences, isPending: isUpdating } = useMutation( + { + mutationFn: (questionAndAnswers: QuestionAnswerChatMessage[]) => { + return httpPost(`/v1-update-ai-roadmap-preferences/${roadmapSlug}`, { + questionAndAnswers, + }); + }, + onSuccess: (_, vars) => { + queryClient.setQueryData( + aiRoadmapOptions(roadmapSlug).queryKey, + (old) => { + if (!old) { + return old; + } + + return { + ...old, + questionAndAnswers: vars, + }; + }, + ); + + setShowUpdatePreferencesModal(false); + setIsDropdownVisible(false); + onRegenerate(); + }, + }, + queryClient, + ); + + return ( + <> + {showUpgradeModal && ( + { + setShowUpgradeModal(false); + }} + /> + )} + + {showPromptModal && ( + setShowPromptModal(false)} + onSubmit={(prompt) => { + setShowPromptModal(false); + onRegenerate(prompt); + }} + /> + )} + + {showUpdatePreferencesModal && ( + setShowUpdatePreferencesModal(false)} + questionAndAnswers={aiRoadmap?.questionAndAnswers} + term={aiRoadmap?.term || ''} + format="roadmap" + onUpdatePreferences={(questionAndAnswers) => { + updatePreferences(questionAndAnswers); + }} + isUpdating={isUpdating} + /> + )} + +
+ + {isDropdownVisible && ( +
+ + + +
+ )} +
+ + ); +} diff --git a/src/components/GenerateGuide/UpdatePreferences.tsx b/src/components/GenerateGuide/UpdatePreferences.tsx index 8869edcd7..c3f485a46 100644 --- a/src/components/GenerateGuide/UpdatePreferences.tsx +++ b/src/components/GenerateGuide/UpdatePreferences.tsx @@ -55,7 +55,7 @@ export function UpdatePreferences(props: UpdatePreferencesProps) {

Update Preferences

- Update the preferences for the AI to generate a guide. + Update the preferences for the AI to generate a {format}.

diff --git a/src/queries/ai-roadmap.ts b/src/queries/ai-roadmap.ts index 7ecac3f6b..ce4f7725c 100644 --- a/src/queries/ai-roadmap.ts +++ b/src/queries/ai-roadmap.ts @@ -14,6 +14,9 @@ export interface AIRoadmapDocument { viewCount: number; lastVisitedAt: Date; keyType?: 'system' | 'user'; + + questionAndAnswers?: QuestionAnswerChatMessage[]; + createdAt: Date; updatedAt: Date; }