From 5cc96b2dd0287f06e4d28173742d7f9e88ee28eb Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Fri, 13 Jun 2025 00:59:18 +0100 Subject: [PATCH] Chat history improvements --- .../FrameRenderer/RoadmapFloatingChat.tsx | 42 +++++++++++-------- .../RoadmapAIChat/RoadmapAIChatHeader.tsx | 33 ++++++++------- .../RoadmapAIChatHistory.tsx | 37 +++++++--------- 3 files changed, 57 insertions(+), 55 deletions(-) diff --git a/src/components/FrameRenderer/RoadmapFloatingChat.tsx b/src/components/FrameRenderer/RoadmapFloatingChat.tsx index da3ba0d6c..001ee8eb8 100644 --- a/src/components/FrameRenderer/RoadmapFloatingChat.tsx +++ b/src/components/FrameRenderer/RoadmapFloatingChat.tsx @@ -6,6 +6,7 @@ import { MessageCirclePlus, PauseCircleIcon, PersonStanding, + Plus, SendIcon, SquareArrowOutUpRight, Trash2, @@ -18,24 +19,23 @@ import { useKeydown } from '../../hooks/use-keydown'; import { roadmapAIChatRenderer, useRoadmapAIChat, - type RoadmapAIChatHistoryType, } from '../../hooks/use-roadmap-ai-chat'; import { cn } from '../../lib/classname'; import { lockBodyScroll } from '../../lib/dom'; +import { isLoggedIn } from '../../lib/jwt'; +import { showLoginPopup } from '../../lib/popup'; import { slugify } from '../../lib/slugger'; import { getAiCourseLimitOptions } from '../../queries/ai-course'; import { billingDetailsOptions } from '../../queries/billing'; +import { chatHistoryOptions } from '../../queries/chat-history'; import { roadmapJSONOptions } from '../../queries/roadmap'; import { roadmapQuestionsOptions } from '../../queries/roadmap-questions'; import { queryClient } from '../../stores/query-client'; import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; import { RoadmapAIChatCard } from '../RoadmapAIChat/RoadmapAIChatCard'; +import { RoadmapAIChatHistory } from '../RoadmapAIChatHistory/RoadmapAIChatHistory'; import { CLOSE_TOPIC_DETAIL_EVENT } from '../TopicDetail/TopicDetail'; import { UpdatePersonaModal } from '../UserPersona/UpdatePersonaModal'; -import { isLoggedIn } from '../../lib/jwt'; -import { showLoginPopup } from '../../lib/popup'; -import { chatHistoryOptions } from '../../queries/chat-history'; -import { RoadmapAIChatHistory } from '../RoadmapAIChatHistory/RoadmapAIChatHistory'; type ChatHeaderButtonProps = { onClick?: () => void; @@ -381,21 +381,22 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
} - className="text-sm" + className="pointer-events-none text-sm" > - AI Tutor + {chatHistory?.title || 'AI Tutor'}
- } - className="hidden rounded-md py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300 sm:flex" - > - Open in new tab - + {isPaidUser && activeChatHistoryId && ( + { + setActiveChatHistoryId(undefined); + }} + icon={} + className="justify-center rounded-md bg-gray-200 px-2 py-1 text-xs text-black hover:bg-gray-300" + /> + )} { setIsChatHistoryLoading(true); setActiveChatHistoryId(chatHistoryId); + setShowScrollToBottom(false); }} onDelete={(chatHistoryId) => { if (activeChatHistoryId === chatHistoryId) { setActiveChatHistoryId(undefined); } }} - onNewChat={() => { - setActiveChatHistoryId(undefined); - }} onUpgrade={() => { setShowUpgradeModal(true); }} /> + } + className="hidden justify-center rounded-md bg-gray-200 px-1 py-1 text-gray-500 hover:bg-gray-300 sm:flex" + /> + setIsOpen(false)} icon={} diff --git a/src/components/RoadmapAIChat/RoadmapAIChatHeader.tsx b/src/components/RoadmapAIChat/RoadmapAIChatHeader.tsx index d6203c517..2ee9fcbfd 100644 --- a/src/components/RoadmapAIChat/RoadmapAIChatHeader.tsx +++ b/src/components/RoadmapAIChat/RoadmapAIChatHeader.tsx @@ -3,7 +3,7 @@ import { getAiCourseLimitOptions } from '../../queries/ai-course'; import { queryClient } from '../../stores/query-client'; import { billingDetailsOptions } from '../../queries/billing'; import { isLoggedIn } from '../../lib/jwt'; -import { BookIcon, BotIcon, GiftIcon, XIcon } from 'lucide-react'; +import { BookIcon, BotIcon, GiftIcon, PlusIcon, XIcon } from 'lucide-react'; import type { RoadmapAIChatTab } from './RoadmapAIChat'; import { useState } from 'react'; import { getPercentage } from '../../lib/number'; @@ -158,15 +158,18 @@ export function RoadmapAIChatHeader(props: RoadmapAIChatHeaderProps) { {!isDataLoading && isLoggedIn() && (
+ {isPaidUser && ( + + )} + {!isPaidUser && ( <> - - )} - +
)}
diff --git a/src/components/RoadmapAIChatHistory/RoadmapAIChatHistory.tsx b/src/components/RoadmapAIChatHistory/RoadmapAIChatHistory.tsx index ce06d2bcc..aec8c9932 100644 --- a/src/components/RoadmapAIChatHistory/RoadmapAIChatHistory.tsx +++ b/src/components/RoadmapAIChatHistory/RoadmapAIChatHistory.tsx @@ -1,4 +1,4 @@ -import { HistoryIcon, Loader2Icon, PlusIcon } from 'lucide-react'; +import { HistoryIcon, Loader2Icon } from 'lucide-react'; import { Popover, PopoverContent, PopoverTrigger } from '../Popover'; import { useEffect, useMemo, useState } from 'react'; import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; @@ -15,9 +15,9 @@ import { showLoginPopup } from '../../lib/popup'; type RoadmapAIChatHistoryProps = { roadmapId: string; activeChatHistoryId?: string; + activeChatHistoryTitle?: string; onChatHistoryClick: (id: string) => void; onDelete?: (id: string) => void; - onNewChat?: () => void; onUpgrade?: () => void; }; @@ -25,9 +25,9 @@ export function RoadmapAIChatHistory(props: RoadmapAIChatHistoryProps) { const { roadmapId, activeChatHistoryId, + activeChatHistoryTitle, onChatHistoryClick, onDelete, - onNewChat, onUpgrade, } = props; @@ -50,11 +50,19 @@ export function RoadmapAIChatHistory(props: RoadmapAIChatHistoryProps) { roadmapId, query, }), - enabled: !!roadmapId && isLoggedIn() && isOpen, + enabled: !!roadmapId && isLoggedIn() && isOpen && isPaidUser, }, queryClient, ); + // no initial spinner if not paid user + // because we won't fetch the data + useEffect(() => { + if (!isPaidUser) { + setIsLoading(false); + } + }, [isPaidUser]); + useEffect(() => { if (!chatHistory || isBillingDetailsLoading) { return; @@ -83,18 +91,18 @@ export function RoadmapAIChatHistory(props: RoadmapAIChatHistoryProps) { setIsOpen(open); }} > - + - Chat History + {activeChatHistoryTitle || 'Chat History'} {isLoading && (
- +
)} @@ -167,19 +175,6 @@ export function RoadmapAIChatHistory(props: RoadmapAIChatHistoryProps) { )} - -
- -
)}