RiseUP/riseup-squad20
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(chat) ajuste no modo escuro na interface do chat

Browse Source
This commit is contained in:
Jonas Francisco 2025-11-24 00:00:41 -03:00
parent 66758614eb
commit 06b7f0d497
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
susconecta/app/audio-teste/page.tsx
View File

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

15
susconecta/components/features/pacientes/chat-widget.tsx
View File

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

14
susconecta/components/ui/file-upload-and-chat.tsx
View File

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