AI guide changes

src/components/GenerateGuide/AIGuide.tsx

@@ -31,7 +31,11 @@ export function AIGuide(props: AIGuideProps) {
 
   // only fetch the guide if the guideSlug is provided
   // otherwise we are still generating the guide
-  const { data: aiGuide } = useQuery(getAiGuideOptions(guideSlug), queryClient);
+  const { data: aiGuide, isLoading: isLoadingBySlug } = useQuery(
+    getAiGuideOptions(guideSlug),
+    queryClient,
+  );
+
   const { data: aiGuideSuggestions, isLoading: isAiGuideSuggestionsLoading } =
     useQuery(
       {
@@ -88,9 +92,10 @@ export function AIGuide(props: AIGuideProps) {
     });
   };
 
+  console.log(isLoadingBySlug);
   return (
     <AITutorLayout
-      wrapperClassName="flex-row p-0 lg:p-0 overflow-hidden"
+      wrapperClassName="flex-row p-0 lg:p-0 overflow-hidden bg-white"
       containerClassName="h-[calc(100vh-49px)] overflow-hidden"
     >
       {showUpgradeModal && (
@@ -102,7 +107,7 @@ export function AIGuide(props: AIGuideProps) {
           <AIGuideContent
             html={regeneratedHtml || aiGuide?.html || ''}
             onRegenerate={handleRegenerate}
-            isRegenerating={isRegenerating}
+            isLoading={isLoadingBySlug || isRegenerating}
           />
         )}
         {!guideSlug && <GenerateAIGuide onGuideSlugChange={setGuideSlug} />}

src/components/GenerateGuide/AIGuideChat.tsx

@@ -3,12 +3,10 @@ import { useChat, type ChatMessage } from '../../hooks/use-chat';
 import { RoadmapAIChatCard } from '../RoadmapAIChat/RoadmapAIChatCard';
 import {
   ArrowDownIcon,
-  BotIcon,
-  Loader2Icon,
-  LockIcon,
+  BotIcon, LockIcon,
   PauseCircleIcon,
   SendIcon,
-  Trash2Icon,
+  Trash2Icon
 } from 'lucide-react';
 import { ChatHeaderButton } from '../FrameRenderer/RoadmapFloatingChat';
 import { isLoggedIn } from '../../lib/jwt';
@@ -19,6 +17,7 @@ import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { useQuery } from '@tanstack/react-query';
 import { queryClient } from '../../stores/query-client';
 import { billingDetailsOptions } from '../../queries/billing';
+import { LoadingChip } from '../LoadingChip';
 
 type AIGuideChatProps = {
   guideSlug?: string;
@@ -155,7 +154,7 @@ export function AIGuideChat(props: AIGuideChatProps) {
 
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center">
-          <Loader2Icon className="h-4 w-4 animate-spin" />
+          <LoadingChip message="Loading..." />
         </div>
       )}
 

src/components/GenerateGuide/AIGuideContent.tsx

@@ -6,17 +6,17 @@ import { LoadingChip } from '../LoadingChip';
 type AIGuideContentProps = {
   html: string;
   onRegenerate?: (prompt?: string) => void;
-  isRegenerating?: boolean;
+  isLoading?: boolean;
 };
 
 export function AIGuideContent(props: AIGuideContentProps) {
-  const { html, onRegenerate, isRegenerating } = props;
+  const { html, onRegenerate, isLoading } = props;
 
   return (
     <div
       className={cn(
         'relative mx-auto w-full max-w-4xl',
-        isRegenerating && 'min-h-full',
+        isLoading && 'min-h-full',
       )}
     >
       <div
@@ -24,13 +24,13 @@ export function AIGuideContent(props: AIGuideContentProps) {
         dangerouslySetInnerHTML={{ __html: html }}
       />
 
-      {isRegenerating && !html && (
+      {isLoading && !html && (
         <div className="absolute inset-0 flex items-center justify-center">
-          <LoadingChip message="Regenerating..." />
+          <LoadingChip message="Please wait..." />
         </div>
       )}
 
-      {onRegenerate && !isRegenerating && (
+      {onRegenerate && !isLoading && (
         <div className="absolute top-4 right-4">
           <AIGuideRegenerate onRegenerate={onRegenerate} />
         </div>

src/components/LoadingChip.tsx

@@ -8,7 +8,7 @@ export function LoadingChip(props: LoadingChipProps) {
   const { message = 'Please wait...' } = props;
 
   return (
-    <div className="flex items-center gap-2 rounded-lg border bg-white py-2 pr-4 pl-3 text-sm">
+    <div className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-3 text-sm">
       <Loader2Icon className="size-4 animate-spin text-gray-400" />
       <span>{message}</span>
     </div>