From 06b7f0d49780eacecbe51b351884f7d01b55f9a0 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Mon, 24 Nov 2025 00:00:41 -0300
Subject: [PATCH] style(chat) ajuste no modo escuro na interface do chat

---
 susconecta/app/audio-teste/page.tsx               | 12 +++++++++++-
 .../components/features/pacientes/chat-widget.tsx | 15 +++++++++------
 susconecta/components/ui/file-upload-and-chat.tsx | 14 +++++++++-----
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/susconecta/app/audio-teste/page.tsx b/susconecta/app/audio-teste/page.tsx
index 513bfc9..84add01 100644
--- a/susconecta/app/audio-teste/page.tsx
+++ b/susconecta/app/audio-teste/page.tsx
@@ -1,10 +1,20 @@
 "use client";
 
 import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
+import { useTheme } from "next-themes";
+import React from "react";
 
 export default function VozPage() {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+
+  // Classes condicionais para manter coerência com o chat
+  const bgClass = isDark
+    ? "bg-gray-900 text-white"
+    : "bg-gray-50 text-gray-900";
+
   return (
-    <div className="min-h-screen flex items-center justify-center p-10">
+    <div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
       <AIVoiceFlow />
     </div>
   );
diff --git a/susconecta/components/features/pacientes/chat-widget.tsx b/susconecta/components/features/pacientes/chat-widget.tsx
index 74381a4..c706c21 100644
--- a/susconecta/components/features/pacientes/chat-widget.tsx
+++ b/susconecta/components/features/pacientes/chat-widget.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
+import { useTheme } from "next-themes";
 import { ArrowLeft, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import FileUploadChat from "@/components/ui/file-upload-and-chat";
@@ -11,6 +12,8 @@ import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [realtimeOpen, setRealtimeOpen] = useState(false);
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -48,13 +51,13 @@ export function ChatWidget() {
       {assistantOpen && (
         <div
           id="ai-assistant-overlay"
-          className="fixed inset-0 z-100 flex flex-col bg-gray-50 dark:bg-slate-950 border-b border-border"
+          className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
         >
-          <div className="flex items-center justify-between border-b px-4 py-3 bg-slate-100 dark:bg-slate-900 border-gray-300 dark:border-slate-700 shadow-sm">
+          <div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2 text-slate-900 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
+              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
               onClick={closeAssistant}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
@@ -72,13 +75,13 @@ export function ChatWidget() {
       {realtimeOpen && (
         <div
           id="ai-realtime-overlay"
-          className="fixed inset-0 z-110 flex flex-col bg-background"
+          className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
         >
-          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2"
+              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
               onClick={closeRealtime}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index f56d7c3..f5ea671 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useTheme } from "next-themes";
 import {
   Upload,
   Paperclip,
@@ -19,6 +20,7 @@ import {
   Info,
   Lock,
   Mic,
+  AudioLines,
 } from "lucide-react";
 
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
@@ -26,7 +28,9 @@ const FALLBACK_RESPONSE =
   "Tive um problema para responder agora. Tente novamente em alguns instantes.";
 
 const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
-  const [isDarkMode, setIsDarkMode] = useState(true);
+  // Usa tema global fornecido por next-themes
+  const { theme, setTheme } = useTheme();
+  const isDarkMode = theme === "dark";
   const [messages, setMessages] = useState([
     {
       id: 1,
@@ -269,12 +273,12 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
                 <button
                   type="button"
-                  className={`rounded-full border-primary/40 px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10 border whitespace-nowrap`}
+                  className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
                 >
                   Novo atendimento
                 </button>
                 <button
-                  onClick={() => setIsDarkMode(!isDarkMode)}
+                  onClick={() => setTheme(isDarkMode ? "light" : "dark")}
                   className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
                 >
                   <Moon className="w-5 h-5 sm:w-6 sm:h-6" />
@@ -557,9 +561,9 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               <button
                 onClick={() => onOpenVoice?.()}
                 className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
-                title="Voice capture"
+                title="Captura de voz"
               >
-                <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
+                <AudioLines className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
               </div>
             </div>