feat: avatar edition & new avatar component

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,10 +72,10 @@ 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" />
-                            </div>
+                        <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'>
                             <ToolTip content={session.user.username + "'s Settings"} slateBlack sideOffset={8} side='right'  >

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

@@ -2,11 +2,33 @@ 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(() => {
   }
     , [session, session.user])
@@ -15,83 +37,142 @@ function UserEditGeneral() {
     <div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
       {session.user && (
         <Formik
-        enableReinitialize
-        initialValues={{
-          username: session.user.username,
-          first_name: session.user.first_name,
-          last_name: session.user.last_name,
-          email: session.user.email,
-          bio: session.user.bio,
-        }}
-        onSubmit={(values, { setSubmitting }) => {
-          setTimeout(() => {
+          enableReinitialize
+          initialValues={{
+            username: session.user.username,
+            first_name: session.user.first_name,
+            last_name: session.user.last_name,
+            email: session.user.email,
+            bio: session.user.bio,
+          }}
+          onSubmit={(values, { setSubmitting }) => {
+            setTimeout(() => {
 
-            setSubmitting(false);
-            updateProfile(values,session.user.id)
-          }, 400);
-        }}
-      >
-        {({ isSubmitting }) => (
-          <Form className="max-w-md">
-            <label className="block mb-2 font-bold" htmlFor="email">
-              Email
-            </label>
-            <Field
-              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              type="email"
-              name="email"
-            />
+              setSubmitting(false);
+              updateProfile(values, session.user.id)
+            }, 400);
+          }}
+        >
+          {({ isSubmitting }) => (
+            <div className='flex space-x-8'>
+              
+              <Form className="max-w-md">
+                
+                <label className="block mb-2 font-bold" htmlFor="email">
+                  Email
+                </label>
+                <Field
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="email"
+                  name="email"
+                />
 
-            <label className="block mb-2 font-bold" htmlFor="username">
-              Username
-            </label>
-            <Field
-              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              type="username"
-              name="username"
-            />
+                <label className="block mb-2 font-bold" htmlFor="username">
+                  Username
+                </label>
+                <Field
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="username"
+                  name="username"
+                />
 
-            <label className="block mb-2 font-bold" htmlFor="first_name">
-              First Name
-            </label>
+                <label className="block mb-2 font-bold" htmlFor="first_name">
+                  First Name
+                </label>
 
-            <Field
-              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              type="first_name"
-              name="first_name"
-            />
+                <Field
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="first_name"
+                  name="first_name"
+                />
 
-            <label className="block mb-2 font-bold" htmlFor="last_name">
-              Last Name
-            </label>
+                <label className="block mb-2 font-bold" htmlFor="last_name">
+                  Last Name
+                </label>
 
-            <Field
-              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              type="last_name"
-              name="last_name"
-            />
+                <Field
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="last_name"
+                  name="last_name"
+                />
 
-            <label className="block mb-2 font-bold" htmlFor="bio">
-              Bio
-            </label>
+                <label className="block mb-2 font-bold" htmlFor="bio">
+                  Bio
+                </label>
 
-            <Field
-              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              type="bio"
-              name="bio"
+                <Field
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="bio"
+                  name="bio"
 
-            />
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              Submit
-            </button>
-          </Form>
+                />
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  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)} />
 
-        )}
-      </Formik>
+                      ) : (
+                        <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>
       )}
     </div>
   )

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;
   }
 `;