From 54e44dd737f6c5c4b529aad4550f4e06014a825f Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Mon, 25 May 2026 12:44:07 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Auto-deploy:=20melhoria=20no=20s?=
 =?UTF-8?q?nap=20e=20medi=C3=A7=C3=A3o=20AR=20em=2025/05/2026=2012:44:07?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MeetingRoom.tsx | 213 ++++++--------------------------------
 1 file changed, 30 insertions(+), 183 deletions(-)

diff --git a/src/pages/MeetingRoom.tsx b/src/pages/MeetingRoom.tsx
index 5cce7bb..e3962d8 100644
--- a/src/pages/MeetingRoom.tsx
+++ b/src/pages/MeetingRoom.tsx
@@ -32,7 +32,7 @@ class ModelErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBounda
   }
 }
 import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls, Text, useGLTF } from '@react-three/drei';
+import { OrbitControls, Text, useGLTF, Billboard, Image } from '@react-three/drei';
 import * as THREE from 'three';
 import { supabase } from '@/integrations/supabase/client';
 import { useModelStore, type SceneModel } from '@/stores/useModelStore';
@@ -166,6 +166,7 @@ function MiiAvatarBackup({
 } & Record<string, unknown>) {
   const groupRef = useRef<THREE.Group>(null);
   const ringRef = useRef<THREE.Mesh>(null);
+  const headRef = useRef<THREE.Group>(null);
   const lastSenderRef = useRef(isLastChatSender);
   const pulseEndTimeRef = useRef(0);
 
@@ -176,27 +177,26 @@ function MiiAvatarBackup({
     lastSenderRef.current = isLastChatSender;
   }, [isLastChatSender]);
   
-  const mii = useMemo(() => {
-    const skin = SKIN_COLORS[(avatarId - 1) % SKIN_COLORS.length];
-    return {
-      skin,
-      hairColor: avatarId === 3 ? '#eab308' : avatarId === 9 ? '#a855f7' : avatarId === 5 ? '#f97316' : '#27272a',
-      hasGlasses: avatarId === 1 || avatarId === 8,
-      glassesColor: avatarId === 8 ? '#18181b' : '#ef4444',
-      hasCap: avatarId === 4,
-      capColor: '#3b82f6',
-      hasHat: avatarId === 10,
-      hatColor: '#b45309',
-      hairStyle: avatarId === 7 ? 'bald' : (avatarId === 9 ? 'modern' : (avatarId % 3 === 0 ? 'long' : 'short')),
-      beard: avatarId === 7,
-    };
-  }, [avatarId]);
+  const avatarUrl = useMemo(() => {
+    const seed = `${username || 'user'}_${avatarId}`;
+    return `https://api.dicebear.com/7.x/toon-head/png?seed=${encodeURIComponent(seed)}&backgroundColor=transparent`;
+  }, [username, avatarId]);
 
   useFrame((state) => {
     if (groupRef.current && props.position && Array.isArray(props.position) && props.position.length >= 2) {
       groupRef.current.position.y = (props.position[1] as number) + Math.sin(state.clock.getElapsedTime() * 2 + avatarId) * 0.012;
     }
 
+    if (headRef.current) {
+      if (isTalking) {
+        headRef.current.position.y = 0.16 + Math.abs(Math.sin(state.clock.getElapsedTime() * 12)) * 0.025;
+        headRef.current.rotation.z = Math.sin(state.clock.getElapsedTime() * 12) * 0.06;
+      } else {
+        headRef.current.position.y = THREE.MathUtils.lerp(headRef.current.position.y, 0.16, 0.15);
+        headRef.current.rotation.z = THREE.MathUtils.lerp(headRef.current.rotation.z, 0, 0.15);
+      }
+    }
+
     if (ringRef.current) {
       const now = Date.now();
       const material = ringRef.current.material as THREE.MeshBasicMaterial;
@@ -236,7 +236,7 @@ function MiiAvatarBackup({
 
   return (
     <group ref={groupRef} position={positionVector} rotation={rotationEuler} scale={scale}>
-      <group position={[0, 0.28, 0]}>
+      <group position={[0, 0.32, 0]}>
         <mesh position={[0, 0, -0.001]}>
           <planeGeometry args={[0.22, 0.05]} />
           <meshBasicMaterial color="#0f172a" transparent opacity={0.7} />
@@ -253,175 +253,22 @@ function MiiAvatarBackup({
         </mesh>
       )}
 
-      <mesh position={[0, 0.1, 0]} scale={[1, 1.15, 1]}>
-        <sphereGeometry args={[0.08, 32, 32]} />
-        <meshStandardMaterial color={mii.skin} roughness={0.6} />
-      </mesh>
-
-      {mii.hairStyle === 'short' && (
-        <group>
-          <mesh position={[0, 0.15, -0.015]} scale={[1.05, 0.8, 1.05]}>
-            <sphereGeometry args={[0.08, 16, 16]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[-0.078, 0.11, 0.02]} scale={[0.2, 0.5, 0.4]}>
-            <sphereGeometry args={[0.03, 8, 8]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[0.078, 0.11, 0.02]} scale={[0.2, 0.5, 0.4]}>
-            <sphereGeometry args={[0.03, 8, 8]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-        </group>
-      )}
-
-      {mii.hairStyle === 'long' && (
-        <group>
-          <mesh position={[0, 0.16, -0.01]} scale={[1.05, 0.7, 1.05]}>
-            <sphereGeometry args={[0.08, 16, 16]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[0, 0.16, 0.045]} scale={[1.3, 0.3, 0.4]} rotation={[0.1, 0, 0]}>
-            <sphereGeometry args={[0.04, 16, 16]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[-0.076, 0.05, 0.01]} scale={[0.3, 1.6, 0.6]}>
-            <sphereGeometry args={[0.038, 16, 16]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[0.076, 0.05, 0.01]} scale={[0.3, 1.6, 0.6]}>
-            <sphereGeometry args={[0.038, 16, 16]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-        </group>
-      )}
-
-      {mii.hairStyle === 'modern' && (
-        <group>
-          <mesh position={[0, 0.16, -0.01]} scale={[1.05, 0.7, 1.05]}>
-            <sphereGeometry args={[0.08, 16, 16]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[0, 0.19, 0.02]} rotation={[-0.3, 0, 0]} scale={[0.8, 1.2, 0.8]}>
-            <coneGeometry args={[0.04, 0.08, 4]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[-0.076, 0.09, 0.01]} scale={[0.3, 1.0, 0.5]}>
-            <sphereGeometry args={[0.03, 8, 8]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[0.076, 0.09, 0.01]} scale={[0.3, 1.0, 0.5]}>
-            <sphereGeometry args={[0.03, 8, 8]} />
-            <meshStandardMaterial color={mii.hairColor} roughness={0.8} />
-          </mesh>
-        </group>
-      )}
-
-      {mii.hasCap && (
-        <group position={[0, 0.17, 0.01]}>
-          <mesh scale={[1.05, 0.65, 1.05]}>
-            <sphereGeometry args={[0.08, 16, 16]} />
-            <meshStandardMaterial color={mii.capColor} roughness={0.5} />
-          </mesh>
-          <mesh position={[0, 0, -0.08]} rotation={[0.1, 0, 0]}>
-            <boxGeometry args={[0.11, 0.008, 0.08]} />
-            <meshStandardMaterial color={mii.capColor} roughness={0.5} />
-          </mesh>
-        </group>
-      )}
-
-      {mii.hasHat && (
-        <group position={[0, 0.17, 0]}>
-          <mesh>
-            <cylinderGeometry args={[0.055, 0.065, 0.05, 16]} />
-            <meshStandardMaterial color={mii.hatColor} roughness={0.8} />
-          </mesh>
-          <mesh position={[0, -0.02, 0]}>
-            <cylinderGeometry args={[0.12, 0.12, 0.006, 16]} />
-            <meshStandardMaterial color={mii.hatColor} roughness={0.8} />
-          </mesh>
-        </group>
-      )}
-
-      <group position={[-0.028, 0.11, 0.07]} rotation={[0.08, -0.15, 0]}>
-        <mesh>
-          <sphereGeometry args={[0.011, 16, 16]} />
-          <meshBasicMaterial color="#111827" />
-        </mesh>
-        <mesh position={[0.004, 0.004, 0.008]}>
-          <sphereGeometry args={[0.004, 8, 8]} />
-          <meshBasicMaterial color="#ffffff" />
-        </mesh>
-      </group>
-      
-      <group position={[0.028, 0.11, 0.07]} rotation={[0.08, 0.15, 0]}>
-        <mesh>
-          <sphereGeometry args={[0.011, 16, 16]} />
-          <meshBasicMaterial color="#111827" />
-        </mesh>
-        <mesh position={[0.004, 0.004, 0.008]}>
-          <sphereGeometry args={[0.004, 8, 8]} />
-          <meshBasicMaterial color="#ffffff" />
-        </mesh>
+      {/* Cabeça do Avatar: Toon Head do Dicebear em Billboard com efeito de pulo ao falar */}
+      <group ref={headRef} position={[0, 0.16, 0]}>
+        <Billboard follow={true}>
+          <Image 
+            url={avatarUrl} 
+            transparent 
+            scale={[0.24, 0.24]} 
+          />
+        </Billboard>
       </group>
 
-      <mesh position={[-0.028, 0.128, 0.072]} rotation={[0.05, -0.15, 0.08]}>
-        <boxGeometry args={[0.028, 0.005, 0.005]} />
-        <meshBasicMaterial color="#18181b" />
+      {/* Base cônica para dar uma sustentação 3D estilizada */}
+      <mesh position={[0, 0.03, 0]}>
+        <coneGeometry args={[0.045, 0.1, 32]} />
+        <meshStandardMaterial color="#475569" roughness={0.5} metalness={0.2} transparent opacity={0.8} />
       </mesh>
-      <mesh position={[0.028, 0.128, 0.072]} rotation={[0.05, 0.15, -0.08]}>
-        <boxGeometry args={[0.028, 0.005, 0.005]} />
-        <meshBasicMaterial color="#18181b" />
-      </mesh>
-
-      <mesh position={[0, 0.09, 0.076]} scale={[1, 1.2, 1.2]}>
-        <sphereGeometry args={[0.008, 8, 8]} />
-        <meshStandardMaterial color={mii.skin} roughness={0.6} />
-      </mesh>
-
-      <mesh position={[-0.042, 0.08, 0.071]} scale={[1, 0.6, 0.2]}>
-        <sphereGeometry args={[0.01, 16, 16]} />
-        <meshBasicMaterial color="#f43f5e" transparent opacity={0.5} />
-      </mesh>
-      <mesh position={[0.042, 0.08, 0.071]} scale={[1, 0.6, 0.2]}>
-        <sphereGeometry args={[0.01, 16, 16]} />
-        <meshBasicMaterial color="#f43f5e" transparent opacity={0.5} />
-      </mesh>
-
-      <mesh position={[0, 0.062, 0.073]} rotation={[0, 0, Math.PI]}>
-        <torusGeometry args={[0.014, 0.003, 8, 24, Math.PI]} />
-        <meshBasicMaterial color="#b91c1c" />
-      </mesh>
-
-      {mii.beard && (
-        <group>
-          <mesh position={[0, 0.075, 0.075]}>
-            <boxGeometry args={[0.04, 0.006, 0.005]} />
-            <meshBasicMaterial color="#713f12" />
-          </mesh>
-          <mesh position={[0, 0.045, 0.072]} scale={[1.2, 1, 1]}>
-            <sphereGeometry args={[0.015, 8, 8]} />
-            <meshStandardMaterial color="#713f12" roughness={0.8} />
-          </mesh>
-        </group>
-      )}
-
-      {mii.hasGlasses && (
-        <group position={[0, 0.11, 0.072]}>
-          <mesh position={[-0.028, 0, 0.002]}>
-            <ringGeometry args={[0.016, 0.019, 16]} />
-            <meshBasicMaterial color={mii.glassesColor} />
-          </mesh>
-          <mesh position={[0.028, 0, 0.002]}>
-            <ringGeometry args={[0.016, 0.019, 16]} />
-            <meshBasicMaterial color={mii.glassesColor} />
-          </mesh>
-          <mesh position={[0, 0, 0.002]}>
-            <boxGeometry args={[0.028, 0.004, 0.002]} />
-            <meshBasicMaterial color={mii.glassesColor} />
-          </mesh>
-        </group>
-      )}
     </group>
   );
 }