From 0622cf4b6daabb43a2ef3ea753b2b6cdd2dfb503 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 1 Apr 2025 12:07:41 +0100
Subject: [PATCH] Update UI for course chat

---
 .../GenerateCourse/AICourseLesson.tsx         |  1 +
 .../GenerateCourse/AICourseLessonChat.tsx     | 26 ++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/GenerateCourse/AICourseLesson.tsx b/src/components/GenerateCourse/AICourseLesson.tsx
index 170d7e16b..12cab027a 100644
--- a/src/components/GenerateCourse/AICourseLesson.tsx
+++ b/src/components/GenerateCourse/AICourseLesson.tsx
@@ -482,6 +482,7 @@ export function AICourseLesson(props: AICourseLessonProps) {
               courseAIChatHistory={courseAIChatHistory}
               setCourseAIChatHistory={setCourseAIChatHistory}
               isDisabled={isGenerating || isLoading || isTogglingDone}
+              isGeneratingLesson={isGenerating || isLoading}
               defaultQuestions={defaultQuestions}
               onClose={() => setIsAIChatsOpen(false)}
               isAIChatsOpen={isAIChatsOpen}
diff --git a/src/components/GenerateCourse/AICourseLessonChat.tsx b/src/components/GenerateCourse/AICourseLessonChat.tsx
index a8650c374..108f64c1c 100644
--- a/src/components/GenerateCourse/AICourseLessonChat.tsx
+++ b/src/components/GenerateCourse/AICourseLessonChat.tsx
@@ -5,9 +5,10 @@ import {
   Hammer,
   HelpCircle,
   LockIcon,
-  Send, User2,
+  Send,
+  User2,
   X,
-  XIcon
+  XIcon,
 } from 'lucide-react';
 import {
   Fragment,
@@ -32,6 +33,7 @@ import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { billingDetailsOptions } from '../../queries/billing';
 import { ResizablePanel } from './Resizeable';
+import { Spinner } from '../ReactIcons/Spinner';
 
 export type AllowedAIChatRole = 'user' | 'assistant';
 export type AIChatHistoryType = {
@@ -47,6 +49,7 @@ type AICourseLessonChatProps = {
   lessonTitle: string;
   onUpgradeClick: () => void;
   isDisabled?: boolean;
+  isGeneratingLesson?: boolean;
 
   defaultQuestions?: string[];
 
@@ -75,6 +78,8 @@ export function AICourseLessonChat(props: AICourseLessonChatProps) {
 
     isAIChatsOpen,
     setIsAIChatsOpen,
+
+    isGeneratingLesson,
   } = props;
 
   const toast = useToast();
@@ -245,7 +250,20 @@ export function AICourseLessonChat(props: AICourseLessonChatProps) {
           ref={scrollareaRef}
         >
           <div className="absolute inset-0 flex flex-col">
-            <div className="flex grow flex-col justify-end">
+            <div className="relative flex grow flex-col justify-end">
+              {isGeneratingLesson && (
+                <div className="absolute inset-0 flex items-center justify-center gap-1.5 bg-gray-100">
+                  <div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-3 py-1.5">
+                    <Spinner
+                      className="size-4 text-gray-400"
+                      outerFill="transparent"
+                    />
+                    <p className="text-sm text-gray-500">
+                      Generating lesson...
+                    </p>
+                  </div>
+                </div>
+              )}
               <div className="flex flex-col justify-end gap-2 px-3 py-2">
                 {courseAIChatHistory.map((chat, index) => {
                   return (
@@ -259,7 +277,7 @@ export function AICourseLessonChat(props: AICourseLessonChatProps) {
                       {chat.isDefault && defaultQuestions?.length > 1 && (
                         <div className="mb-1 mt-0.5">
                           <p className="mb-2 text-xs font-normal text-gray-500">
-                            Here are some questions that you might have about this lesson.
+                            Some questions you might have about this lesson.
                           </p>
                           <div className="flex flex-col justify-end gap-1">
                             {defaultQuestions.map((question, index) => (