feat: add pre-alpha labels on AI modals

This commit is contained in:
swve 2024-02-05 21:47:22 +01:00
parent 5ed05ade09
commit 13c0e7ba53
5 changed files with 29 additions and 24 deletions

View file

@ -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,6 +91,8 @@ const CourseClient = (props: any) => {
<p className="py-5 px-5">{course.description}</p>
</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) => {
@ -106,6 +108,8 @@ const CourseClient = (props: any) => {
}
)}
</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">

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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'}`}
/>
)
}