feat: avatar edition & new avatar component

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