feat: avatar edition & new avatar component

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

@@ -13,6 +13,7 @@ import { ArrowRight, Check, File, Sparkles, Star, Video } from "lucide-react";
 import Avvvatars from "avvvatars-react";
 import { getUser } from "@services/users/users";
 import { useOrg } from "@components/Contexts/OrgContext";
+import UserAvatar from "@components/Objects/UserAvatar";
 
 const CourseClient = (props: any) => {
   const [user, setUser] = useState<any>({});
@@ -192,9 +193,7 @@ const CourseClient = (props: any) => {
             <div className="course_metadata_right space-y-3 w-72 antialiased flex flex-col ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
               {user &&
                 <div className="flex flex-col mx-auto space-y-3 px-2 py-2 items-center">
-                  <div className="">
-                    <Avvvatars radius={20} border borderSize={5} borderColor="white" size={80} shadow value={course.authors[0].user_uuid} style='shape' />
-                  </div>
+                  <UserAvatar border="border-8" avatar_url={course.authors[0].avatar_url} width={100} />
                   <div className="-space-y-2 ">
                     <div className="text-[12px] text-neutral-400 font-semibold">Author</div>
                     <div className="text-xl font-bold text-neutral-800">

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -4,12 +4,12 @@ import { useSession } from '@components/Contexts/SessionContext';
 import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
 import LearnHouseDashboardLogo from '@public/dashLogo.png';
 import { logout } from '@services/auth/auth';
-import Avvvatars from 'avvvatars-react';
 import { ArrowLeft, Book, BookCopy, Home, LogOut, School, Settings } from 'lucide-react'
 import Image from 'next/image';
 import Link from 'next/link'
 import { useRouter } from 'next/navigation';
 import React, { use, useEffect } from 'react'
+import UserAvatar from '../../Objects/UserAvatar';
 
 function LeftMenu() {
     const org = useOrg() as any;
@@ -72,9 +72,9 @@ function LeftMenu() {
                 <div className='flex flex-col mx-auto pb-7 space-y-2'>
 
                     <div className="flex items-center flex-col space-y-2">
-                        <ToolTip content={session.user.username} slateBlack sideOffset={8} side='right'  >
-                            <div className="mx-auto shadow-lg">
-                                <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" />
+                        <ToolTip content={'@'+session.user.username} slateBlack sideOffset={8} side='right'  >
+                            <div className='mx-auto'>
+                                <UserAvatar border='border-4' width={35} />
                                 </div>
                         </ToolTip>
                         <div className='flex items-center flex-col space-y-1'>

apps/web/components/Dashboard/User/UserEditGeneral/UserEditGeneral.tsx

@@ -2,10 +2,32 @@ import { updateProfile } from '@services/settings/profile';
 import React, { useEffect } from 'react'
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import { useSession } from '@components/Contexts/SessionContext';
+import { ArrowBigUpDash, Check, FileWarning, Info, UploadCloud } from 'lucide-react';
+import UserAvatar from '@components/Objects/UserAvatar';
+import { updateUserAvatar } from '@services/users/users';
 
 function UserEditGeneral() {
   const session = useSession() as any;
+  const [localAvatar, setLocalAvatar] = React.useState(null) as any;
+  const [isLoading, setIsLoading] = React.useState(false) as any;
+  const [error, setError] = React.useState() as any;
+  const [success, setSuccess] = React.useState('') as any;
 
+  const handleFileChange = async (event: any) => {
+    const file = event.target.files[0];
+    setLocalAvatar(file);
+    setIsLoading(true);
+    const res = await updateUserAvatar(session.user.user_uuid, file)
+    // wait for 1 second to show loading animation
+    await new Promise(r => setTimeout(r, 1500));
+    if (res.success === false) {
+        setError(res.HTTPmessage);
+    } else {
+        setIsLoading(false);
+        setError('');
+        setSuccess('Avatar Updated');
+    }
+  };
 
   useEffect(() => {
   }
@@ -32,7 +54,10 @@ function UserEditGeneral() {
           }}
         >
           {({ isSubmitting }) => (
+            <div className='flex space-x-8'>
+              
               <Form className="max-w-md">
+                
                 <label className="block mb-2 font-bold" htmlFor="email">
                   Email
                 </label>
@@ -89,6 +114,62 @@ function UserEditGeneral() {
                   Submit
                 </button>
               </Form>
+              <div className='flex flex-col grow justify-center align-middle space-y-3'>
+                <label className="flex mx-auto mb-2 font-bold " >
+                  Avatar
+                </label>
+                {error && (
+                            <div className="flex justify-center mx-auto bg-red-200 rounded-md text-red-950 space-x-1 px-4 items-center p-2 transition-all shadow-sm">
+                              <FileWarning size={16} className='mr-2' />
+                                <div className="text-sm font-semibold first-letter:uppercase">{error}</div>
+                            </div>
+                        )}
+                        {success && (
+                            <div className="flex justify-center mx-auto bg-green-200 rounded-md text-green-950 space-x-1 px-4 items-center p-2 transition-all shadow-sm">
+                              <Check size={16} className='mr-2' />
+                                <div className="text-sm font-semibold first-letter:uppercase">{success}</div>
+                            </div>
+                        )}
+                <div className="flex flex-col space-y-3">
+                  
+                  <div className='w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20'>
+                    
+                    <div className='flex flex-col justify-center items-center mt-10'>
+                    
+                      {localAvatar ? (
+                        <UserAvatar border='border-8' width={100}  avatar_url={URL.createObjectURL(localAvatar)} />
+
+                      ) : (
+                        <UserAvatar border='border-8' width={100}  />
+                      )}
+                    </div>
+                    {isLoading ? (<div className='flex justify-center items-center'>
+                        <input type="file" id="fileInput" style={{ display: 'none' }} onChange={handleFileChange} />
+                        <div
+                            className='font-bold  animate-pulse antialiased items-center bg-green-200 text-gray text-sm rounded-md px-4 py-2 mt-4 flex'
+                        >
+                            <ArrowBigUpDash size={16} className='mr-2' />
+                            <span>Uploading</span>
+                        </div>
+                    </div>) : (
+                    <div className='flex justify-center items-center'>
+                      <input type="file" id="fileInput" style={{ display: 'none' }} onChange={handleFileChange} />
+                      <button
+                        className='font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex'
+                        onClick={() => document.getElementById('fileInput')?.click()}
+                      >
+                        <UploadCloud size={16} className='mr-2' />
+                        <span>Change Thumbnail</span>
+                      </button>
+                    </div> )}
+                  </div>
+                  <div className='flex text-xs space-x-2 items-center text-gray-500 justify-center'>
+                    <Info size={13} /><p>Recommended size 100x100</p>
+                  </div>
+                </div>
+              </div>
+
+            </div>
 
           )}
         </Formik>

apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx

@@ -1,6 +1,6 @@
 import { useSession } from '@components/Contexts/SessionContext'
 import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai';
-import { AlertTriangle, BadgeInfo, NotebookTabs } from 'lucide-react';
+import { AlertTriangle, BadgeInfo, NotebookTabs, User } from 'lucide-react';
 import Avvvatars from 'avvvatars-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FlaskConical, Keyboard, MessageCircle, MessageSquareIcon, Sparkle, Sparkles, X } from 'lucide-react'
@@ -13,6 +13,7 @@ import { AIChatBotStateTypes, useAIChatBot, useAIChatBotDispatch } from '@compon
 import FeedbackModal from '@components/Objects/Modals/Feedback/Feedback';
 import Modal from '@components/StyledElements/Modal/Modal';
 import useGetAIFeatures from '../../../AI/Hooks/useGetAIFeatures';
+import UserAvatar from '@components/Objects/UserAvatar';
 
 
 type AIActivityAskProps = {
@@ -204,7 +205,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                             }
                             <div className='flex space-x-2 items-center'>
                                 <div className=''>
-                                    <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" />
+                                    <UserAvatar rounded='rounded-xl' 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="" />
@@ -235,7 +236,11 @@ function AIMessage(props: AIMessageProps) {
     return (
         <div className='flex space-x-2 w-full antialiased font-medium'>
             <div className=''>
-                <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={props.message.type == 'ai' ? 'ai' : session.user.user_uuid} style="shape" />
+                {props.message.sender == 'ai' ? (
+                    <UserAvatar rounded='rounded-xl' border='border-2' predefined_avatar='ai' width={35} />
+                ) : (
+                    <UserAvatar rounded='rounded-xl' border='border-2' width={35} />
+                )}
             </div>
             <div className='w-full'>
                 <p className='w-full rounded-lg outline-none px-2 py-1 text-white text-md placeholder:text-white/30' id="">
@@ -277,7 +282,8 @@ const AIMessagePlaceHolder = (props: { activity_uuid: string, sendMessage: any }
                     <Image width={100} className='mx-auto' src={learnhouseAI_logo_black} alt="" />
                     <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'> <Avvvatars radius={3} border borderColor='white' borderSize={3} size={25} value={session.user.user_uuid} style="shape" />
+                        <span className='capitalize flex space-x-2 items-center'> 
+                        <UserAvatar rounded='rounded-xl' border='border-2' width={35} />
                             <span>{session.user.username},</span>
                         </span>
                         <span>how can we help today ?</span>

apps/web/components/Objects/Editor/Editor.tsx

@@ -42,6 +42,7 @@ import { CourseProvider } from "@components/Contexts/CourseContext";
 import { useSession } from "@components/Contexts/SessionContext";
 import AIEditorToolkit from "./AI/AIEditorToolkit";
 import useGetAIFeatures from "@components/AI/Hooks/useGetAIFeatures";
+import UserAvatar from "../UserAvatar";
 
 
 interface Editor {
@@ -207,7 +208,7 @@ function Editor(props: Editor) {
 
                 <EditorUserProfileWrapper>
                   {!session.isAuthenticated && <span>Loading</span>}
-                  {session.isAuthenticated && <Avvvatars value={session.user.user_uuid} style="shape" />}
+                  {session.isAuthenticated && <UserAvatar width={40} border="border-4" rounded="rounded-full"/>}
                 </EditorUserProfileWrapper>
 
               </EditorUsersSection>

apps/web/components/Objects/Menu/ProfileArea.tsx

@@ -9,6 +9,7 @@ import { usePathname } from "next/navigation";
 import { useRouter } from "next/router";
 import path from "path";
 import { Settings } from "lucide-react";
+import UserAvatar from "@components/Objects/UserAvatar";
 
 export interface Auth {
   access_token: string;
@@ -91,7 +92,7 @@ function ProfileArea() {
         <AccountArea>
           <div>{auth.userInfo.user_object.username}</div>
           <div>
-            <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
+          <UserAvatar width={40} />
           </div>
           <Link href={"/dash"}><Settings /></Link>
         </AccountArea>

apps/web/components/Objects/UserAvatar.tsx

@@ -0,0 +1,63 @@
+import { useSession } from '@components/Contexts/SessionContext';
+import emptyAvatar from '@public/empty_avatar.png';
+import aiAvatar from '@public/ai_avatar.png';
+import Image from 'next/image';
+import React, { use, useEffect } from 'react'
+import { getUriWithOrg } from '@services/config/config';
+import { useOrg } from '@components/Contexts/OrgContext';
+import { useParams } from 'next/navigation';
+import { getUserAvatarMediaDirectory } from '@services/media/media';
+
+type UserAvatarProps = {
+    width?: number
+    avatar_url?: string
+    use_with_session?: boolean
+    rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded'
+    border?: 'border-2' | 'border-4' | 'border-8'
+    predefined_avatar?: 'ai'
+}
+
+function UserAvatar(props: UserAvatarProps) {
+    const session = useSession() as any;
+    const params = useParams() as any;
+    
+    const predefinedAvatar = props.predefined_avatar === 'ai' ? getUriWithOrg(params.orgslug,'/ai_avatar.png') : null;
+    const emptyAvatar = getUriWithOrg(params.orgslug,'/empty_avatar.png') as any;
+    const uploadedAvatar = getUserAvatarMediaDirectory(session.user.user_uuid,session.user.avatar_image) as any;
+
+    const useAvatar = () => {
+        if (props.predefined_avatar) {
+            return predefinedAvatar
+        } else {
+            if (props.avatar_url) {
+                return props.avatar_url
+            }
+            else {
+                if (session.user.avatar_image) {
+                    return uploadedAvatar
+                }
+                else {
+                    return emptyAvatar
+                }
+            }
+        }
+    }
+
+
+    useEffect(() => {
+        console.log('params', params)
+    }
+        , [session])
+
+    return (
+        <img
+            alt='User Avatar'
+            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'}`}
+        />
+    )
+}
+
+export default UserAvatar

apps/web/components/Security/HeaderProfileBox.tsx

@@ -6,6 +6,7 @@ import Avvvatars from "avvvatars-react";
 import { GearIcon } from "@radix-ui/react-icons";
 import { Settings } from "lucide-react";
 import { useSession } from "@components/Contexts/SessionContext";
+import UserAvatar from "@components/Objects/UserAvatar";
 
 export const HeaderProfileBox = () => {
   const session = useSession() as any;
@@ -33,9 +34,7 @@ export const HeaderProfileBox = () => {
           <div className="flex items-center space-x-2">
             <div className="text-xs">{session.user.username} </div>
             <div className="py-4">
-              <div className="shadow-sm rounded-xl">
-                <Avvvatars radius={3} size={30} value={session.user.user_uuid} style="shape" />
-              </div>
+              <UserAvatar border="border-4" rounded='rounded-lg' width={30} />
             </div>
             <Link className="text-gray-600" href={"/dash"}><Settings size={14} /></Link>
           </div>
@@ -51,7 +50,6 @@ const AccountArea = styled.div`
   
   img {
     width: 29px;
-    border-radius: 19px;
   }
 `;
 

apps/web/services/media/media.ts

@@ -9,38 +9,43 @@ function getMediaUrl() {
   }
 }
 
-export function getCourseThumbnailMediaDirectory(orgId: string, courseId: string, fileId: string) {
-  let uri = `${getMediaUrl()}content/${orgId}/courses/${courseId}/thumbnails/${fileId}`;
+export function getCourseThumbnailMediaDirectory(orgUUID: string, courseId: string, fileId: string) {
+  let uri = `${getMediaUrl()}content/orgs/${orgUUID}/courses/${courseId}/thumbnails/${fileId}`;
   return uri;
 }
 
-export function getActivityBlockMediaDirectory(orgId: string, courseId: string, activityId: string, blockId: any, fileId: any, type: string) {
+export function getUserAvatarMediaDirectory(userUUID: string, fileId: string) {
+  let uri = `${getMediaUrl()}content/users/${userUUID}/avatars/${fileId}`;
+  return uri;
+}
+
+export function getActivityBlockMediaDirectory(orgUUID: string, courseId: string, activityId: string, blockId: any, fileId: any, type: string) {
   if (type == "pdfBlock") {
-    let uri = `${getMediaUrl()}content/${orgId}/courses/${courseId}/activities/${activityId}/dynamic/blocks/pdfBlock/${blockId}/${fileId}`;
+    let uri = `${getMediaUrl()}content/${orgUUID}/courses/${courseId}/activities/${activityId}/dynamic/blocks/pdfBlock/${blockId}/${fileId}`;
     return uri;
   }
   if (type == "videoBlock") {
-    let uri = `${getMediaUrl()}content/${orgId}/courses/${courseId}/activities/${activityId}/dynamic/blocks/videoBlock/${blockId}/${fileId}`;
+    let uri = `${getMediaUrl()}content/${orgUUID}/courses/${courseId}/activities/${activityId}/dynamic/blocks/videoBlock/${blockId}/${fileId}`;
     return uri;
   }
   if (type == "imageBlock") {
-    let uri = `${getMediaUrl()}content/${orgId}/courses/${courseId}/activities/${activityId}/dynamic/blocks/imageBlock/${blockId}/${fileId}`;
+    let uri = `${getMediaUrl()}content/${orgUUID}/courses/${courseId}/activities/${activityId}/dynamic/blocks/imageBlock/${blockId}/${fileId}`;
     return uri;
   }
 }
 
-export function getActivityMediaDirectory(orgId: string, courseId: string, activityId: string, fileId: string, activityType: string) {
+export function getActivityMediaDirectory(orgUUID: string, courseId: string, activityId: string, fileId: string, activityType: string) {
   if (activityType == "video") {
-    let uri = `${getMediaUrl()}content/${orgId}/courses/${courseId}/activities/${activityId}/video/${fileId}`;
+    let uri = `${getMediaUrl()}content/${orgUUID}/courses/${courseId}/activities/${activityId}/video/${fileId}`;
     return uri;
   }
   if (activityType == "documentpdf") {
-    let uri = `${getMediaUrl()}content/${orgId}/courses/${courseId}/activities/${activityId}/documentpdf/${fileId}`;
+    let uri = `${getMediaUrl()}content/${orgUUID}/courses/${courseId}/activities/${activityId}/documentpdf/${fileId}`;
     return uri;
   }
 }
 
-export function getOrgLogoMediaDirectory(orgId: string, fileId: string) {
-  let uri = `${getMediaUrl()}content/${orgId}/logos/${fileId}`;
+export function getOrgLogoMediaDirectory(orgUUID: string, fileId: string) {
+  let uri = `${getMediaUrl()}content/${orgUUID}/logos/${fileId}`;
   return uri;
 }

apps/web/services/users/users.ts

@@ -1,8 +1,16 @@
 import { getAPIUrl } from "@services/config/config";
-import { RequestBody, errorHandling } from "@services/utils/ts/requests";
+import { RequestBody, RequestBodyForm, errorHandling, getResponseMetadata } from "@services/utils/ts/requests";
 
 export async function getUser(user_id: string) {
   const result = await fetch(`${getAPIUrl()}users/user_id/${user_id}`, RequestBody("GET", null, null));
   const res = await errorHandling(result);
   return res;
 }
+
+export async function updateUserAvatar(user_uuid: any, avatar_file: any) {
+  const formData = new FormData();
+  formData.append("avatar_file", avatar_file);
+  const result: any = await fetch(`${getAPIUrl()}users/update_avatar/${user_uuid}`, RequestBodyForm("PUT", formData, null));
+  const res = await getResponseMetadata(result);
+  return res;
+}