rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add pre-alpha labels on AI modals

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
View file

@ -26,7 +26,7 @@ const CourseClient = (props: any) => {
function getLearningTags() { function getLearningTags() {
// create array of learnings from a string object (comma separated) // create array of learnings from a string object (comma separated)
let learnings = course.learnings.split(","); let learnings = course?.learnings ? course?.learnings.split(",") : [];
setLearnings(learnings); setLearnings(learnings);
} }
@ -91,21 +91,25 @@ const CourseClient = (props: any) => {
<p className="py-5 px-5">{course.description}</p> <p className="py-5 px-5">{course.description}</p>
</div> </div>
<h2 className="py-3 text-2xl font-bold">What you will learn</h2> {learnings.length > 0 && learnings[0] !== "null" &&
<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"> <div>
{learnings.map((learning: any) => { <h2 className="py-3 text-2xl font-bold">What you will learn</h2>
return ( <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">
<div key={learning} {learnings.map((learning: any) => {
className="flex space-x-2 items-center font-semibold text-gray-500"> return (
<div className="px-2 py-2 rounded-full"> <div key={learning}
<Check className="text-gray-400" size={15} /> className="flex space-x-2 items-center font-semibold text-gray-500">
</div> <div className="px-2 py-2 rounded-full">
<p>{learning}</p> <Check className="text-gray-400" size={15} />
</div> </div>
); <p>{learning}</p>
} </div>
)} );
</div> }
)}
</div>
</div>
}
<h2 className="py-3 text-2xl font-bold">Course Lessons</h2> <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"> <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">

10
apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
View file

@ -173,7 +173,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
</div> </div>
<div className='bg-white/5 text-white/40 py-0.5 px-3 flex space-x-1 rounded-full items-center'> <div className='bg-white/5 text-white/40 py-0.5 px-3 flex space-x-1 rounded-full items-center'>
<FlaskConical size={14} /> <FlaskConical size={14} />
<span className='text-xs font-semibold '>Experimental</span> <span className='text-xs font-semibold antialiased '>Experimental</span>
</div> </div>
</div> </div>
@ -205,7 +205,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
} }
<div className='flex space-x-2 items-center'> <div className='flex space-x-2 items-center'>
<div className=''> <div className=''>
<UserAvatar rounded='rounded-xl' border='border-2' width={35} /> <UserAvatar rounded='rounded-lg' border='border-2' width={35} />
</div> </div>
<div className='w-full'> <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="" /> <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='flex space-x-2 w-full antialiased font-medium'>
<div className=''> <div className=''>
{props.message.sender == 'ai' ? ( {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>
<div className='w-full'> <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'> <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='items-center'>Hello</span>
<span className='capitalize flex space-x-2 items-center'> <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>{session.user.username},</span>
</span> </span>
<span>how can we help today ?</span> <span>how can we help today ?</span>

2
apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
View file

@ -57,7 +57,7 @@ function AIEditorToolkit(props: AIEditorToolkitProps) {
<div className='pr-1'> <div className='pr-1'>
<div className='flex w-full space-x-2 font-bold text-white/80 items-center'> <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="" /> <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} /> <MoreVertical className='text-white/50' size={12} />
</div> </div>
</div> </div>

2
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -164,7 +164,7 @@ function Editor(props: Editor) {
<Link href="/"> <Link href="/">
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" /> <EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
</Link> </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> <EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
</Link> </Link>
<EditorInfoDocName> <EditorInfoDocName>

3
apps/web/components/Objects/UserAvatar.tsx
View file

@ -14,6 +14,7 @@ type UserAvatarProps = {
use_with_session?: boolean use_with_session?: boolean
rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded' rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded'
border?: 'border-2' | 'border-4' | 'border-8' border?: 'border-2' | 'border-4' | 'border-8'
borderColor? : string
predefined_avatar?: 'ai' predefined_avatar?: 'ai'
} }
@ -56,7 +57,7 @@ function UserAvatar(props: UserAvatarProps) {
width={props.width ? props.width : 50} width={props.width ? props.width : 50}
height={props.width ? props.width : 50} height={props.width ? props.width : 50}
src={useAvatar()} 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'}`}
/> />
) )
} }