style(chat) ajuste na interface do chat

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>
   );

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 />

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,8 @@ import {
   Info,
   Lock,
   Mic,
+  AudioLines,
+  Plus,
 } from "lucide-react";
 
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
@@ -26,7 +29,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,
@@ -44,17 +49,14 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   const chatEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
-  // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height =
-        textareaRef.current.scrollHeight + "px";
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
     }
   }, [inputValue]);
 
@@ -89,16 +91,7 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
       file: file,
     }));
     setUploadedFiles((prev) => [...prev, ...newFiles]);
-
-    // Add system message about file upload
-    const fileNames = newFiles.map((f) => f.name).join(", ");
-    const systemMessage = {
-      id: Date.now(),
-      type: "system",
-      content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
-      timestamp: new Date(),
-    };
-    setMessages((prev) => [...prev, systemMessage]);
+    // Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
   };
 
   const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
@@ -278,15 +271,16 @@ 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)}
-                  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}`}
+                  onClick={() => setTheme(isDarkMode ? "light" : "dark")}
+                  className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
+                  aria-label="Alternar tema"
                 >
-                  <Moon className="w-5 h-5 sm:w-6 sm:h-6" />
+                  <Moon className="w-4 h-4 sm:w-5 sm:h-5" />
                 </button>
               </div>
             </div>
@@ -350,50 +344,7 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               </p>
             </div>
 
-            {/* Files Ready to Send */}
-            {uploadedFiles.length > 0 && (
-              <div>
-                <div className="flex items-center justify-between mb-2 sm:mb-3">
-                  <h4
-                    className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}
-                  >
-                    Files ready to send ({uploadedFiles.length})
-                  </h4>
-                  <button
-                    onClick={() => setUploadedFiles([])}
-                    className={`text-xs px-2 sm:px-3 py-1 rounded-full ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
-                  >
-                    Clear all
-                  </button>
-                </div>
-                <div className="grid grid-cols-1 gap-2">
-                  {uploadedFiles.map((file) => (
-                    <div
-                      key={file.id}
-                      className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}
-                    >
-                      {getFileIcon(file.name)}
-                      <div className="flex-1 min-w-0">
-                        <p
-                          className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}
-                        >
-                          {file.name}
-                        </p>
-                        <p className={`text-xs ${themeClasses.textSecondary}`}>
-                          {formatFileSize(file.size)}
-                        </p>
-                      </div>
-                      <button
-                        onClick={() => removeFile(file.id)}
-                        className={`p-1 rounded-full hover:bg-red-500/20 ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
-                      >
-                        <X className="w-3 h-3 sm:w-4 sm:h-4" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+            {/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
           </div>
         </div>
 
@@ -522,60 +473,98 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
 
           {/* Chat Input */}
           <div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
-            <div className="flex gap-2 sm:gap-3 items-end">
-              <button
-                onClick={() => fileInputRef.current?.click()}
-                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="Attach files"
-              >
-                <Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                className="hidden"
-                onChange={(e) => handleFileSelect(e.target.files)}
-              />
-
-              <div className="flex-1 relative">
-                <textarea
-                  ref={textareaRef}
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  placeholder="Pergunte qualquer coisa para a Zoe"
-                  rows={1}
-                  className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
-                  style={{ minHeight: "40px" }}
-                />
-
-                {/* Character count */}
-                {inputValue.length > 0 && (
-                  <div
-                    className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}
+            <div className="flex flex-col gap-2">
+              {/* Anexos selecionados (chips) */}
+              {uploadedFiles.length > 0 && (
+                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
+                  {uploadedFiles.map((file) => (
+                    <div
+                      key={file.id}
+                      className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
+                    >
+                      {getFileIcon(file.name)}
+                      <div className="min-w-0 max-w-[160px]">
+                        <p className={`text-xs font-medium truncate ${themeClasses.text}`}>
+                          {file.name}
+                        </p>
+                        <p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
+                          {formatFileSize(file.size)}
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => removeFile(file.id)}
+                        className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
+                        aria-label="Remover arquivo"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => setUploadedFiles([])}
+                    className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
                   >
-                    {inputValue.length}
+                    Limpar tudo
+                  </button>
+                </div>
+              )}
+
+              {/* Input unificado com ícones embutidos */}
+              <div className="flex w-full">
+                <div className={`relative flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} overflow-hidden h-11`}>
+                  {/* Botão anexar (esquerda) */}
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    type="button"
+                    className={`absolute left-2 flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 ${themeClasses.text}`}
+                    aria-label="Anexar arquivos"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    onChange={(e) => handleFileSelect(e.target.files)}
+                  />
+                  {/* Textarea */}
+                  <textarea
+                    ref={textareaRef}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    placeholder="Pergunte qualquer coisa para a Zoe"
+                    rows={1}
+                    className={`pl-11 pr-24 w-full h-full bg-transparent resize-none focus:outline-none text-sm leading-snug py-3 ${themeClasses.text} placeholder-gray-400`}
+                    style={{ minHeight: 'auto', overflow: 'hidden' }}
+                  />
+                  {/* Ícones à direita */}
+                  <div className="absolute right-2 flex items-center gap-2">
+                    <button
+                      onClick={() => onOpenVoice?.()}
+                      type="button"
+                      className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 ${themeClasses.text}`}
+                      aria-label="Entrada de voz"
+                    >
+                      <AudioLines className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={sendMessage}
+                      disabled={!inputValue.trim() && uploadedFiles.length === 0}
+                      type="button"
+                      className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md"
+                      aria-label="Enviar mensagem"
+                    >
+                      <Send className="w-4 h-4" />
+                    </button>
                   </div>
-                )}
+                  {/* Contador de caracteres */}
+                  {inputValue.length > 0 && (
+                    <span className={`absolute bottom-1 right-24 text-[10px] ${themeClasses.textSecondary}`}>{inputValue.length}</span>
+                  )}
+                </div>
               </div>
-
-              <button
-                onClick={sendMessage}
-                disabled={!inputValue.trim() && uploadedFiles.length === 0}
-                className="p-2 sm:p-3 bg-linear-to-r from-blue-500 to-purple-600 text-white rounded-lg sm:rounded-xl hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105 disabled:hover:scale-100 shadow-lg"
-                title="Send message"
-              >
-                <Send className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-
-              <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"
-              >
-                <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
             </div>
 
             {/* Quick Actions */}