From e927de1821f06015703f3f8a0ca434ddbbdfd0da Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Thu, 13 Nov 2025 13:54:26 -0300
Subject: [PATCH] fix(ia) adicionei  um componente  Voice Visualization

---
 .../features/pacientes/chat-widget.tsx        | 95 ++++++++++++++++++-
 susconecta/package.json                       |  1 +
 susconecta/pnpm-lock.yaml                     |  8 ++
 3 files changed, 99 insertions(+), 5 deletions(-)

diff --git a/susconecta/components/features/pacientes/chat-widget.tsx b/susconecta/components/features/pacientes/chat-widget.tsx
index 99e8ee9..a270f5d 100644
--- a/susconecta/components/features/pacientes/chat-widget.tsx
+++ b/susconecta/components/features/pacientes/chat-widget.tsx
@@ -1,9 +1,12 @@
+
+
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { ArrowLeft, Sparkles } from "lucide-react";
+import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { AIAssistantInterface } from "@/components/ZoeIA/ai-assistant-interface";
+import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 
 interface HistoryEntry {
   id: string;
@@ -13,10 +16,13 @@ interface HistoryEntry {
 
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
+  const [realtimeOpen, setRealtimeOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [voiceDetected, setVoiceDetected] = useState(false);
   const [history, setHistory] = useState<HistoryEntry[]>([]);
 
   useEffect(() => {
-    if (!assistantOpen) return;
+    if (!assistantOpen && !realtimeOpen) return;
 
     const original = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -24,7 +30,7 @@ export function ChatWidget() {
     return () => {
       document.body.style.overflow = original;
     };
-  }, [assistantOpen]);
+  }, [assistantOpen, realtimeOpen]);
 
   const gradientRing = useMemo(
     () => (
@@ -39,14 +45,33 @@ export function ChatWidget() {
   const openAssistant = () => setAssistantOpen(true);
   const closeAssistant = () => setAssistantOpen(false);
 
+  const openRealtime = () => setRealtimeOpen(true);
+  const closeRealtime = () => {
+    setRealtimeOpen(false);
+    setAssistantOpen(true);
+    setIsRecording(false);
+    setVoiceDetected(false);
+  };
+
+  const toggleRecording = () => {
+    setIsRecording((prev) => {
+      const next = !prev;
+      if (!next) {
+        setVoiceDetected(false);
+      }
+      return next;
+    });
+  };
+
   const handleOpenDocuments = () => {
     console.log("[ChatWidget] Abrindo fluxo de documentos");
     closeAssistant();
   };
 
   const handleOpenChat = () => {
-    console.log("[ChatWidget] Encaminhando para chat humano");
-    closeAssistant();
+    console.log("[ChatWidget] Encaminhando para chat em tempo real");
+    setAssistantOpen(false);
+    openRealtime();
   };
 
   const handleAddHistory = (entry: HistoryEntry) => {
@@ -87,6 +112,66 @@ export function ChatWidget() {
         </div>
       )}
 
+      {realtimeOpen && (
+        <div
+          id="ai-realtime-overlay"
+          className="fixed inset-0 z-[110] flex flex-col bg-background"
+        >
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+            <Button
+              type="button"
+              variant="ghost"
+              className="flex items-center gap-2"
+              onClick={closeRealtime}
+            >
+              <ArrowLeft className="h-4 w-4" aria-hidden />
+              <span className="text-sm">Voltar para a Zoe</span>
+            </Button>
+          </div>
+
+          <div className="flex-1 overflow-auto">
+            <div className="mx-auto flex h-full w-full max-w-4xl flex-col items-center justify-center gap-8 px-6 py-10 text-center">
+              <div className="relative w-full max-w-md aspect-square">
+                <VoicePoweredOrb
+                  enableVoiceControl={isRecording}
+                  className="h-full w-full rounded-3xl shadow-2xl"
+                  onVoiceDetected={setVoiceDetected}
+                />
+                {voiceDetected && (
+                  <span className="absolute bottom-6 right-6 rounded-full bg-primary/90 px-3 py-1 text-xs font-semibold text-primary-foreground shadow-lg">
+                    Ouvindo…
+                  </span>
+                )}
+              </div>
+
+              <div className="flex flex-col items-center gap-4">
+                <Button
+                  onClick={toggleRecording}
+                  size="lg"
+                  className="px-8 py-3"
+                  variant={isRecording ? "destructive" : "default"}
+                >
+                  {isRecording ? (
+                    <>
+                      <MicOff className="mr-2 h-5 w-5" aria-hidden />
+                      Parar captura de voz
+                    </>
+                  ) : (
+                    <>
+                      <Mic className="mr-2 h-5 w-5" aria-hidden />
+                      Iniciar captura de voz
+                    </>
+                  )}
+                </Button>
+                <p className="max-w-md text-sm text-muted-foreground">
+                  Ative a captura para falar com a equipe em tempo real. Assim que sua voz for detectada, a Zoe sinaliza visualmente e encaminha o atendimento.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
         <button
           type="button"
diff --git a/susconecta/package.json b/susconecta/package.json
index 65a7442..7a06058 100644
--- a/susconecta/package.json
+++ b/susconecta/package.json
@@ -58,6 +58,7 @@
     "jspdf": "^3.0.3",
     "lucide-react": "^0.454.0",
     "next-themes": "latest",
+    "ogl": "^1.0.11",
     "react": "^18",
     "react-day-picker": "latest",
     "react-dom": "^18",
diff --git a/susconecta/pnpm-lock.yaml b/susconecta/pnpm-lock.yaml
index 996088a..da9e9cb 100644
--- a/susconecta/pnpm-lock.yaml
+++ b/susconecta/pnpm-lock.yaml
@@ -152,6 +152,9 @@ importers:
       next-themes:
         specifier: latest
         version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      ogl:
+        specifier: ^1.0.11
+        version: 1.0.11
       react:
         specifier: ^18
         version: 18.3.1
@@ -2809,6 +2812,9 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  ogl@1.0.11:
+    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -6089,6 +6095,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  ogl@1.0.11: {}
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4