From 13c0e7ba533f4d6a8053637d391ab57eff8d12bb Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 5 Feb 2024 21:47:22 +0100
Subject: [PATCH] feat: add pre-alpha labels on AI modals

---
 .../(withmenu)/course/[courseuuid]/course.tsx | 36 ++++++++++---------
 .../Objects/Activities/AI/AIActivityAsk.tsx   | 10 +++---
 .../Objects/Editor/AI/AIEditorToolkit.tsx     |  2 +-
 apps/web/components/Objects/Editor/Editor.tsx |  2 +-
 apps/web/components/Objects/UserAvatar.tsx    |  3 +-
 5 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
index 17f9df7b..5f4f5569 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -26,7 +26,7 @@ const CourseClient = (props: any) => {
 
   function getLearningTags() {
     // create array of learnings from a string object (comma separated)
-    let learnings = course.learnings.split(",");
+    let learnings = course?.learnings ? course?.learnings.split(",") : [];
     setLearnings(learnings);
 
   }
@@ -91,21 +91,25 @@ const CourseClient = (props: any) => {
                 <p className="py-5 px-5">{course.description}</p>
               </div>
 
-              <h2 className="py-3 text-2xl font-bold">What you will learn</h2>
-              <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
-                {learnings.map((learning: any) => {
-                  return (
-                    <div key={learning}
-                      className="flex space-x-2 items-center font-semibold text-gray-500">
-                      <div className="px-2 py-2 rounded-full">
-                        <Check className="text-gray-400" size={15} />
-                      </div>
-                      <p>{learning}</p>
-                    </div>
-                  );
-                }
-                )}
-              </div>
+              {learnings.length > 0 && learnings[0] !== "null" &&
+                <div>
+                  <h2 className="py-3 text-2xl font-bold">What you will learn</h2>
+                  <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
+                    {learnings.map((learning: any) => {
+                      return (
+                        <div key={learning}
+                          className="flex space-x-2 items-center font-semibold text-gray-500">
+                          <div className="px-2 py-2 rounded-full">
+                            <Check className="text-gray-400" size={15} />
+                          </div>
+                          <p>{learning}</p>
+                        </div>
+                      );
+                    }
+                    )}
+                  </div>
+                </div>
+              }
 
               <h2 className="py-3 text-2xl font-bold">Course Lessons</h2>
               <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
diff --git a/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx b/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
index 82299393..c4ab2440 100644
--- a/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
+++ b/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
@@ -173,7 +173,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                                 </div>
                                 <div className='bg-white/5 text-white/40 py-0.5 px-3 flex space-x-1 rounded-full items-center'>
                                     <FlaskConical size={14} />
-                                    <span className='text-xs font-semibold '>Experimental</span>
+                                    <span className='text-xs font-semibold antialiased '>Experimental</span>
                                 </div>
 
                             </div>
@@ -205,7 +205,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                             }
                             <div className='flex space-x-2 items-center'>
                                 <div className=''>
-                                    <UserAvatar rounded='rounded-xl' border='border-2' width={35} />
+                                    <UserAvatar rounded='rounded-lg' border='border-2' width={35} />
                                 </div>
                                 <div className='w-full'>
                                     <input onKeyDown={handleKeyDown} onChange={handleChange} disabled={aiChatBotState.isWaitingForResponse} value={aiChatBotState.chatInputValue} placeholder='Ask AI About this Lecture' type="text" className={inputClass} name="" id="" />
@@ -237,9 +237,9 @@ function AIMessage(props: AIMessageProps) {
         <div className='flex space-x-2 w-full antialiased font-medium'>
             <div className=''>
                 {props.message.sender == 'ai' ? (
-                    <UserAvatar rounded='rounded-xl' border='border-2' predefined_avatar='ai' width={35} />
+                    <UserAvatar rounded='rounded-lg' border='border-2' predefined_avatar='ai' width={35} />
                 ) : (
-                    <UserAvatar rounded='rounded-xl' border='border-2' width={35} />
+                    <UserAvatar rounded='rounded-lg' border='border-2' width={35} />
                 )}
             </div>
             <div className='w-full'>
@@ -283,7 +283,7 @@ const AIMessagePlaceHolder = (props: { activity_uuid: string, sendMessage: any }
                     <p className='pt-3 text-2xl font-semibold text-white/70 flex justify-center space-x-2 items-center'>
                         <span className='items-center'>Hello</span>
                         <span className='capitalize flex space-x-2 items-center'> 
-                        <UserAvatar rounded='rounded-xl' border='border-2' width={35} />
+                        <UserAvatar rounded='rounded-lg' border='border-2' width={35} />
                             <span>{session.user.username},</span>
                         </span>
                         <span>how can we help today ?</span>
diff --git a/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx b/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
index 7ff15559..d2babbd0 100644
--- a/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
+++ b/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
@@ -57,7 +57,7 @@ function AIEditorToolkit(props: AIEditorToolkitProps) {
                                     <div className='pr-1'>
                                         <div className='flex w-full space-x-2 font-bold text-white/80 items-center'>
                                             <Image className='outline outline-1 outline-neutral-200/20 rounded-lg' width={24} src={learnhouseAI_icon} alt="" />
-                                            <div >AI Editor</div>
+                                            <div className='flex items-center'>AI Editor <span className='text-[10px] px-2 py-1 rounded-3xl ml-3 bg-white/10 uppercase'>PRE-ALPHA</span></div>
                                             <MoreVertical className='text-white/50' size={12} />
                                         </div>
                                     </div>
diff --git a/apps/web/components/Objects/Editor/Editor.tsx b/apps/web/components/Objects/Editor/Editor.tsx
index 4e369682..29a9566d 100644
--- a/apps/web/components/Objects/Editor/Editor.tsx
+++ b/apps/web/components/Objects/Editor/Editor.tsx
@@ -164,7 +164,7 @@ function Editor(props: Editor) {
                   <Link href="/">
                     <EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
                   </Link>
-                  <Link target="_blank" href={`/course/${course_uuid}/edit`}>
+                  <Link target="_blank" href={`/course/${course_uuid}`}>
                     <EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
                   </Link>
                   <EditorInfoDocName>
diff --git a/apps/web/components/Objects/UserAvatar.tsx b/apps/web/components/Objects/UserAvatar.tsx
index 837dd05b..8c6484ae 100644
--- a/apps/web/components/Objects/UserAvatar.tsx
+++ b/apps/web/components/Objects/UserAvatar.tsx
@@ -14,6 +14,7 @@ type UserAvatarProps = {
     use_with_session?: boolean
     rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded'
     border?: 'border-2' | 'border-4' | 'border-8'
+    borderColor? : string
     predefined_avatar?: 'ai'
 }
 
@@ -56,7 +57,7 @@ function UserAvatar(props: UserAvatarProps) {
             width={props.width ? props.width : 50}
             height={props.width ? props.width : 50}
             src={useAvatar()}
-            className={`${props.avatar_url && session.user.avatar_image ? '' : 'bg-gray-700'}  ${props.border ? 'border ' + props.border : ''} border-white shadow-xl aspect-square w-[${props.width ? props.width : 50}px] h-[${props.width ? props.width : 50}px] ${props.rounded ? props.rounded : 'rounded-xl'}`}
+            className={`${props.avatar_url && session.user.avatar_image ? '' : 'bg-gray-700'}  ${props.border ? 'border ' + props.border : ''} ${props.borderColor ?  props.borderColor : 'border-white'} shadow-xl aspect-square w-[${props.width ? props.width : 50}px] h-[${props.width ? props.width : 50}px] ${props.rounded ? props.rounded : 'rounded-xl'}`}
         />
     )
 }