feat: init in-course AI features

This commit is contained in:
swve 2024-01-04 23:12:27 +01:00
parent 582e322155
commit a05b298c91
10 changed files with 471 additions and 146 deletions

View file

@ -14,6 +14,7 @@ import { getCourseThumbnailMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext";
import { CourseProvider } from "@components/Contexts/CourseContext";
import AIActivityAsk from "@components/AI/AIActivityAsk";
import AIChatBotProvider from "@components/Contexts/AI/AIChatBotContext";
interface ActivityClientProps {
activityid: string;
@ -50,48 +51,50 @@ function ActivityClient(props: ActivityClientProps) {
return (
<>
<CourseProvider courseuuid={course?.course_uuid}>
<GeneralWrapperStyled>
<div className="space-y-4 pt-4">
<div className="flex space-x-6">
<div className="flex">
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}>
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" />
</Link>
</div>
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Course </p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1>
</div>
</div>
<ActivityIndicators course_uuid={courseuuid} current_activity={activityid} orgslug={orgslug} course={course} />
<div className="flex justify-between items-center">
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterNameByActivityId(course, activity.id)}</p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
</div>
<div className="flex space-x-1 items-center">
<AuthenticatedClientElement checkMethod="authentication">
<AIActivityAsk activity={activity} />
<MoreVertical size={17} className="text-gray-300 " />
<MarkStatus activity={activity} activityid={activityid} course={course} orgslug={orgslug} />
</AuthenticatedClientElement>
</div>
</div>
{activity ? (
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
<div>
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
{/* todo : use apis & streams instead of this */}
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
<AIChatBotProvider>
<GeneralWrapperStyled>
<div className="space-y-4 pt-4">
<div className="flex space-x-6">
<div className="flex">
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}>
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" />
</Link>
</div>
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Course </p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1>
</div>
</div>
) : (<div></div>)}
{<div style={{ height: "100px" }}></div>}
</div>
</GeneralWrapperStyled>
<ActivityIndicators course_uuid={courseuuid} current_activity={activityid} orgslug={orgslug} course={course} />
<div className="flex justify-between items-center">
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterNameByActivityId(course, activity.id)}</p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
</div>
<div className="flex space-x-1 items-center">
<AuthenticatedClientElement checkMethod="authentication">
<AIActivityAsk activity={activity} />
<MoreVertical size={17} className="text-gray-300 " />
<MarkStatus activity={activity} activityid={activityid} course={course} orgslug={orgslug} />
</AuthenticatedClientElement>
</div>
</div>
{activity ? (
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
<div>
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
{/* todo : use apis & streams instead of this */}
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
</div>
</div>
) : (<div></div>)}
{<div style={{ height: "100px" }}></div>}
</div>
</GeneralWrapperStyled>
</AIChatBotProvider>
</CourseProvider>
</>
);