diff --git a/src/components/ContentGenerator/QuestionAnswerChat.tsx b/src/components/ContentGenerator/QuestionAnswerChat.tsx index 699658127..c4825d957 100644 --- a/src/components/ContentGenerator/QuestionAnswerChat.tsx +++ b/src/components/ContentGenerator/QuestionAnswerChat.tsx @@ -6,14 +6,15 @@ import { } from '../../queries/user-ai-session'; import type { AllowedFormat } from './ContentGenerator'; import { - Loader2Icon, RefreshCcwIcon, - RotateCwIcon, - SendIcon + Loader2Icon, + RefreshCcwIcon, + SendIcon, Trash2 } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { cn } from '../../lib/classname'; import { flushSync } from 'react-dom'; import { CheckIcon } from '../ReactIcons/CheckIcon'; +import { Tooltip } from '../Tooltip'; export type QuestionAnswerChatMessage = | { role: 'user'; answer: string } @@ -127,6 +128,30 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) { setStatus('answering'); }; + const handleEditMessage = (messageIndex: number) => { + // Remove the assistant question and user answer pair + // Since user messages are at odd indices, we want to remove both + // the assistant message (at messageIndex - 1) and the user message (at messageIndex) + const assistantMessageIndex = messageIndex - 1; + const newMessages = questionAnswerChatMessages.slice( + 0, + assistantMessageIndex, + ); + setQuestionAnswerChatMessages(newMessages); + + // Calculate which question should be active + // Since we removed both assistant and user messages, the question index + // is simply assistantMessageIndex / 2 + const questionIndex = Math.floor(assistantMessageIndex / 2); + setActiveMessageIndex(questionIndex); + setStatus('answering'); + + setMessage(''); + setTimeout(() => { + inputRef.current?.focus(); + }, 0); + }; + useEffect(() => { scrollToBottom(); }, [defaultQuestions, type]); @@ -152,7 +177,7 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) {
-

Preferences saved

+

Preferences saved

You can now start generating {format}

@@ -170,18 +195,6 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) { {!isLoadingAiQuestionSuggestions && status === 'answering' && ( <> - {canReset && type === 'create' && ( -
- -
- )} -
handleEditMessage(index) + : undefined + } /> ))} @@ -219,15 +237,15 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) { {!activeMessage && type === 'update' && (
)} @@ -281,10 +299,12 @@ type QuestionAnswerChatMessageProps = { answer?: string; possibleAnswers?: string[]; onAnswerSelect?: (answer: string) => void; + onEdit?: () => void; }; function QuestionAnswerChatMessage(props: QuestionAnswerChatMessageProps) { - const { role, question, answer, possibleAnswers, onAnswerSelect } = props; + const { role, question, answer, possibleAnswers, onAnswerSelect, onEdit } = + props; const hasAnswers = possibleAnswers && possibleAnswers.length > 0; @@ -319,7 +339,25 @@ function QuestionAnswerChatMessage(props: QuestionAnswerChatMessageProps) { )}
)} - {role === 'user' &&
{answer}
} + {role === 'user' && ( +
+
{answer}
+ {onEdit && ( +
+ + + Reanswer after this point + +
+ )} +
+ )}
); } diff --git a/src/components/GenerateCourse/RegenerateOutline.tsx b/src/components/GenerateCourse/RegenerateOutline.tsx index e92b7deec..dbbfcc4aa 100644 --- a/src/components/GenerateCourse/RegenerateOutline.tsx +++ b/src/components/GenerateCourse/RegenerateOutline.tsx @@ -1,16 +1,15 @@ -import { PenSquare, RefreshCcw, SettingsIcon } from 'lucide-react'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { PenSquare, RefreshCcw, Settings2Icon } 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 './ModifyCoursePrompt'; -import { queryClient } from '../../stores/query-client'; -import { getAiCourseOptions } from '../../queries/ai-course'; -import { useMutation, useQuery } from '@tanstack/react-query'; import { httpPost } from '../../lib/query-http'; +import { getAiCourseOptions } from '../../queries/ai-course'; +import { queryClient } from '../../stores/query-client'; +import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; import type { QuestionAnswerChatMessage } from '../ContentGenerator/QuestionAnswerChat'; -import { getAiGuideOptions } from '../../queries/ai-guide'; import { UpdatePreferences } from '../GenerateGuide/UpdatePreferences'; +import { ModifyCoursePrompt } from './ModifyCoursePrompt'; type RegenerateOutlineProps = { onRegenerateOutline: (prompt?: string) => void; @@ -121,12 +120,12 @@ export function RegenerateOutline(props: RegenerateOutlineProps) { }} className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100" > - - Update Preferences + Preferences )}