Refactor: Make UI responsive
This commit is contained in:
gpt-engineer-app[bot]
@@ -50,8 +50,8 @@ export const ChatHeader = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="border-b border-border bg-card/50 backdrop-blur-sm px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<header className="border-b border-border bg-card/50 backdrop-blur-sm px-3 md:px-6 py-3 md:py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-primary animate-pulse-glow" />
|
||||
<span className="text-sm text-muted-foreground">Online</span>
|
||||
@@ -60,9 +60,9 @@ export const ChatHeader = ({
|
||||
{showModelSelector && onModelChange && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="gap-2 glass-effect">
|
||||
<span className="font-medium">{selectedModel}</span>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
<Button variant="outline" className="gap-1 md:gap-2 glass-effect text-xs md:text-sm">
|
||||
<span className="font-medium truncate max-w-[80px] md:max-w-none">{selectedModel}</span>
|
||||
<ChevronDown className="w-3 h-3 md:w-4 md:h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="glass-effect bg-popover border-border z-50">
|
||||
@@ -84,11 +84,11 @@ export const ChatHeader = ({
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2 glass-effect"
|
||||
className="gap-1 md:gap-2 glass-effect text-xs md:text-sm"
|
||||
onClick={() => setTempSystemPrompt(systemPrompt)}
|
||||
>
|
||||
<UserCog className="w-4 h-4" />
|
||||
<span className="font-medium">Personalidade</span>
|
||||
<UserCog className="w-3 h-3 md:w-4 md:h-4" />
|
||||
<span className="hidden md:inline font-medium">Personalidade</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
@@ -120,7 +120,7 @@ export const ChatHeader = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<div className="hidden md:block text-sm text-muted-foreground">
|
||||
{showModelSelector ? "Modelo de linguagem avançado" : "Sistema HGTX Codex"}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -27,7 +27,7 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
||||
<div className="flex h-screen w-full bg-background overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
{!isSidebarCollapsed ? (
|
||||
<aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col">
|
||||
<aside className="hidden md:flex md:w-72 bg-sidebar border-r border-sidebar-border flex-col">
|
||||
{/* Logo */}
|
||||
<div className="p-6 border-b border-sidebar-border flex items-center justify-between">
|
||||
<div>
|
||||
@@ -81,7 +81,7 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
||||
</div>
|
||||
</aside>
|
||||
) : (
|
||||
<aside className="w-16 bg-sidebar border-r border-sidebar-border flex flex-col">
|
||||
<aside className="hidden md:flex md:w-16 bg-sidebar border-r border-sidebar-border flex-col">
|
||||
{/* Collapsed Header with Expand Button */}
|
||||
<div className="p-3 border-b border-sidebar-border space-y-2">
|
||||
<Button
|
||||
@@ -135,7 +135,29 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col overflow-hidden">{children}</main>
|
||||
<main className="flex-1 flex flex-col overflow-hidden w-full">{children}</main>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-sidebar border-t border-sidebar-border flex items-center justify-around py-2 z-50">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-all ${
|
||||
isActive
|
||||
? "text-sidebar-accent-foreground"
|
||||
: "text-sidebar-foreground/70"
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-5 h-5 ${isActive ? "text-primary" : ""}`} />
|
||||
<span className="text-xs font-medium">{tab.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -113,31 +113,33 @@ export const AgentView = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-background">
|
||||
<div className="p-6 border-b border-border">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-3xl font-bold text-foreground">Agente de Parecer Jurídico</h1>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => setShowSearch(true)} variant="outline" className="gap-2">
|
||||
<Search className="w-4 h-4" />
|
||||
Pesquisar Base de Pareceres
|
||||
<div className="flex flex-col h-full bg-background pb-16 md:pb-0">
|
||||
<div className="p-3 md:p-6 border-b border-border">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 mb-4">
|
||||
<h1 className="text-xl md:text-3xl font-bold text-foreground">Agente de Parecer Jurídico</h1>
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Button onClick={() => setShowSearch(true)} variant="outline" className="gap-1 md:gap-2 flex-1 md:flex-none text-xs md:text-sm">
|
||||
<Search className="w-3 h-3 md:w-4 md:h-4" />
|
||||
<span className="hidden sm:inline">Pesquisar Base</span>
|
||||
<span className="sm:hidden">Base</span>
|
||||
</Button>
|
||||
<Button onClick={handleNewOpinion} className="gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Novo Parecer
|
||||
<Button onClick={handleNewOpinion} className="gap-1 md:gap-2 flex-1 md:flex-none text-xs md:text-sm">
|
||||
<Plus className="w-3 h-3 md:w-4 md:h-4" />
|
||||
<span className="hidden sm:inline">Novo Parecer</span>
|
||||
<span className="sm:hidden">Novo</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-4">
|
||||
<Input
|
||||
placeholder="Buscar pareceres..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="max-w-sm"
|
||||
className="w-full md:max-w-sm text-sm"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">Itens por página:</span>
|
||||
<div className="flex items-center gap-2 justify-between md:justify-start">
|
||||
<span className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">Itens:</span>
|
||||
<Select
|
||||
value={itemsPerPage.toString()}
|
||||
onValueChange={(value) => {
|
||||
@@ -145,7 +147,7 @@ export const AgentView = () => {
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-20">
|
||||
<SelectTrigger className="w-16 md:w-20">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -159,42 +161,42 @@ export const AgentView = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="border rounded-lg">
|
||||
<div className="flex-1 overflow-auto p-3 md:p-6">
|
||||
<div className="border rounded-lg overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>
|
||||
<TableHead className="min-w-[200px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort("title")}
|
||||
className="flex items-center gap-1 font-semibold"
|
||||
className="flex items-center gap-1 font-semibold text-xs md:text-sm p-1 md:p-2"
|
||||
>
|
||||
Título
|
||||
<ArrowUpDown className="w-4 h-4" />
|
||||
<ArrowUpDown className="w-3 h-3 md:w-4 md:h-4" />
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<TableHead className="hidden md:table-cell">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort("category")}
|
||||
className="flex items-center gap-1 font-semibold"
|
||||
className="flex items-center gap-1 font-semibold text-sm"
|
||||
>
|
||||
Categoria
|
||||
<ArrowUpDown className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<TableHead className="hidden sm:table-cell">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort("createdAt")}
|
||||
className="flex items-center gap-1 font-semibold"
|
||||
className="flex items-center gap-1 font-semibold text-xs md:text-sm p-1 md:p-2"
|
||||
>
|
||||
Data de Criação
|
||||
<ArrowUpDown className="w-4 h-4" />
|
||||
Data
|
||||
<ArrowUpDown className="w-3 h-3 md:w-4 md:h-4" />
|
||||
</Button>
|
||||
</TableHead>
|
||||
<TableHead className="text-center">Ações</TableHead>
|
||||
<TableHead className="text-center text-xs md:text-sm">Ações</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
@@ -209,29 +211,30 @@ export const AgentView = () => {
|
||||
) : (
|
||||
paginatedOpinions.map((opinion) => (
|
||||
<TableRow key={opinion.id}>
|
||||
<TableCell className="font-medium">{opinion.title}</TableCell>
|
||||
<TableCell>{opinion.category || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="font-medium text-xs md:text-sm">{opinion.title}</TableCell>
|
||||
<TableCell className="hidden md:table-cell text-sm">{opinion.category || "-"}</TableCell>
|
||||
<TableCell className="hidden sm:table-cell text-xs md:text-sm">
|
||||
{new Date(opinion.createdAt).toLocaleDateString("pt-BR")}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleViewOpinion(opinion)}
|
||||
title="Visualizar"
|
||||
className="h-7 w-7 md:h-9 md:w-9"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
<Eye className="w-3 h-3 md:w-4 md:h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteOpinion(opinion.id)}
|
||||
className="text-destructive hover:text-destructive"
|
||||
className="text-destructive hover:text-destructive h-7 w-7 md:h-9 md:w-9"
|
||||
title="Excluir"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<Trash2 className="w-3 h-3 md:w-4 md:h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -243,40 +246,55 @@ export const AgentView = () => {
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Mostrando {startIndex + 1} a {Math.min(startIndex + itemsPerPage, sortedOpinions.length)} de{" "}
|
||||
{sortedOpinions.length} pareceres
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 mt-4">
|
||||
<p className="text-xs md:text-sm text-muted-foreground text-center sm:text-left">
|
||||
{startIndex + 1}-{Math.min(startIndex + itemsPerPage, sortedOpinions.length)} de {sortedOpinions.length}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1 md:gap-2 justify-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="text-xs md:text-sm px-2 md:px-4"
|
||||
>
|
||||
Anterior
|
||||
<span className="hidden sm:inline">Anterior</span>
|
||||
<span className="sm:hidden">Ant</span>
|
||||
</Button>
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
||||
let page;
|
||||
if (totalPages <= 5) {
|
||||
page = i + 1;
|
||||
} else if (currentPage <= 3) {
|
||||
page = i + 1;
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
page = totalPages - 4 + i;
|
||||
} else {
|
||||
page = currentPage - 2 + i;
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
key={page}
|
||||
variant={currentPage === page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className="w-10"
|
||||
className="w-8 h-8 md:w-10 md:h-9 p-0 text-xs md:text-sm"
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="text-xs md:text-sm px-2 md:px-4"
|
||||
>
|
||||
Próxima
|
||||
<span className="hidden sm:inline">Próxima</span>
|
||||
<span className="sm:hidden">Prox</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ Profissional responsável: IA Jurídica HGTX Codex`;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh]">
|
||||
<DialogContent className="max-w-[95vw] md:max-w-4xl max-h-[90vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{selectedOpinion ? "Gerar Novo Modelo do Parecer" : "Novo Parecer Jurídico"}
|
||||
|
||||
@@ -270,22 +270,22 @@ export const AudioView = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex flex-col h-full pb-16 md:pb-0">
|
||||
<ChatHeader />
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<Tabs defaultValue="transcription" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-4 glass-effect">
|
||||
<TabsTrigger value="transcription">
|
||||
<div className="max-w-4xl mx-auto p-3 md:p-6">
|
||||
<Tabs defaultValue="transcription" className="space-y-4 md:space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4 glass-effect text-xs md:text-sm">
|
||||
<TabsTrigger value="transcription" className="text-xs md:text-sm">
|
||||
Transcrição
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="generation">Geração de Voz</TabsTrigger>
|
||||
<TabsTrigger value="transcription-history">
|
||||
Histórico Transcrições
|
||||
<TabsTrigger value="generation" className="text-xs md:text-sm">Geração</TabsTrigger>
|
||||
<TabsTrigger value="transcription-history" className="text-xs md:text-sm">
|
||||
Hist. Trans.
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="audio-history">
|
||||
Histórico Áudios
|
||||
<TabsTrigger value="audio-history" className="text-xs md:text-sm">
|
||||
Hist. Áud.
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
|
||||
@@ -95,19 +95,19 @@ export const BotView = ({ onStartChat }: BotViewProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-full overflow-hidden">
|
||||
<div className="border-b border-border p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 flex flex-col h-full overflow-hidden pb-16 md:pb-0">
|
||||
<div className="border-b border-border p-3 md:p-6">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Bot className="w-6 h-6" />
|
||||
<h2 className="text-xl md:text-2xl font-bold flex items-center gap-2">
|
||||
<Bot className="w-5 h-5 md:w-6 md:h-6" />
|
||||
Gerenciador de Bots
|
||||
</h2>
|
||||
<p className="text-muted-foreground mt-1">Crie e gerencie seus assistentes de IA</p>
|
||||
<p className="text-sm md:text-base text-muted-foreground mt-1">Crie e gerencie seus assistentes de IA</p>
|
||||
</div>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Button className="w-full md:w-auto text-sm">
|
||||
<Bot className="w-4 h-4 mr-2" />
|
||||
Criar Bot
|
||||
</Button>
|
||||
@@ -167,7 +167,7 @@ export const BotView = ({ onStartChat }: BotViewProps) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="flex-1 overflow-auto p-3 md:p-6">
|
||||
{bots.length === 0 ? (
|
||||
<Card className="max-w-2xl mx-auto mt-12">
|
||||
<CardHeader>
|
||||
@@ -190,45 +190,48 @@ export const BotView = ({ onStartChat }: BotViewProps) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="max-w-6xl mx-auto overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nome</TableHead>
|
||||
<TableHead>Modelo</TableHead>
|
||||
<TableHead className="text-right">Ações</TableHead>
|
||||
<TableHead className="text-xs md:text-sm">Nome</TableHead>
|
||||
<TableHead className="hidden md:table-cell text-sm">Modelo</TableHead>
|
||||
<TableHead className="text-right text-xs md:text-sm">Ações</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{currentBots.map((bot) => (
|
||||
<TableRow key={bot.id}>
|
||||
<TableCell className="font-medium">{bot.name}</TableCell>
|
||||
<TableCell>{bot.model}</TableCell>
|
||||
<TableCell className="font-medium text-xs md:text-sm">{bot.name}</TableCell>
|
||||
<TableCell className="hidden md:table-cell text-sm">{bot.model}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex gap-2 justify-end">
|
||||
<div className="flex gap-1 justify-end flex-wrap">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onStartChat(bot)}
|
||||
className="text-xs md:text-sm"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 mr-2" />
|
||||
Conversar
|
||||
<MessageSquare className="w-3 h-3 md:w-4 md:h-4 md:mr-2" />
|
||||
<span className="hidden md:inline">Conversar</span>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openEditDialog(bot)}
|
||||
className="text-xs md:text-sm"
|
||||
>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Editar
|
||||
<Edit className="w-3 h-3 md:w-4 md:h-4 md:mr-2" />
|
||||
<span className="hidden md:inline">Editar</span>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openDeleteDialog(bot)}
|
||||
className="text-xs md:text-sm"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Excluir
|
||||
<Trash2 className="w-3 h-3 md:w-4 md:h-4 md:mr-2" />
|
||||
<span className="hidden md:inline">Excluir</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
@@ -92,19 +92,19 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
|
||||
<div className="max-w-4xl mx-auto space-y-3">
|
||||
<div className="border-t border-border bg-card/50 backdrop-blur-sm p-2 md:p-4">
|
||||
<div className="max-w-4xl mx-auto space-y-2 md:space-y-3">
|
||||
{/* Attached Files Preview */}
|
||||
{attachedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-1 md:gap-2">
|
||||
{attachedFiles.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-muted border border-border text-sm"
|
||||
className="flex items-center gap-1 md:gap-2 px-2 md:px-3 py-1 md:py-1.5 rounded-lg bg-muted border border-border text-xs md:text-sm"
|
||||
>
|
||||
<Paperclip className="w-3 h-3 text-primary" />
|
||||
<span className="font-medium">{file.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<span className="font-medium truncate max-w-[100px] md:max-w-none">{file.name}</span>
|
||||
<span className="hidden md:inline text-xs text-muted-foreground">
|
||||
({(file.size / 1024).toFixed(1)} KB)
|
||||
</span>
|
||||
<Button
|
||||
@@ -121,12 +121,12 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
)}
|
||||
|
||||
{/* Message Input and Buttons */}
|
||||
<div className="flex gap-2 items-end">
|
||||
<div className="flex gap-1 md:gap-2 items-end">
|
||||
<div className="flex-1 glass-effect rounded-xl overflow-hidden">
|
||||
{/* Resize Handle */}
|
||||
{/* Resize Handle - Hidden on mobile */}
|
||||
<div
|
||||
onMouseDown={handleMouseDown}
|
||||
className={`w-full h-6 flex items-center justify-center cursor-ns-resize hover:bg-primary/10 transition-colors ${
|
||||
className={`hidden md:flex w-full h-6 items-center justify-center cursor-ns-resize hover:bg-primary/10 transition-colors ${
|
||||
isDragging ? 'bg-primary/20' : ''
|
||||
}`}
|
||||
title="Arraste para cima para aumentar"
|
||||
@@ -135,21 +135,21 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
</div>
|
||||
|
||||
{/* Textarea */}
|
||||
<div className="px-3 pb-3">
|
||||
<div className="px-2 md:px-3 pb-2 md:pb-3 pt-2 md:pt-0">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Digite sua mensagem..."
|
||||
style={{ height: `${textareaHeight}px` }}
|
||||
className="resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 w-full p-0 overflow-y-auto"
|
||||
style={{ height: window.innerWidth < 768 ? '80px' : `${textareaHeight}px` }}
|
||||
className="resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 w-full p-0 overflow-y-auto text-sm md:text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1 md:gap-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
@@ -161,24 +161,24 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-11 w-11 glass-effect"
|
||||
className="h-9 w-9 md:h-11 md:w-11 glass-effect"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
title="Anexar arquivo"
|
||||
>
|
||||
<Paperclip className="w-5 h-5" />
|
||||
<Paperclip className="w-4 h-4 md:w-5 md:h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
size="icon"
|
||||
className="h-11 w-11 cyber-glow"
|
||||
className="h-9 w-9 md:h-11 md:w-11 cyber-glow"
|
||||
disabled={!message.trim() && attachedFiles.length === 0}
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
<Send className="w-4 h-4 md:w-5 md:h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
<p className="hidden md:block text-xs text-muted-foreground text-center">
|
||||
Pressione Enter para enviar, Shift + Enter para nova linha • Máx. 10MB por arquivo
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -30,22 +30,22 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex gap-4 py-6 px-6 group hover:bg-muted/10 transition-colors ${
|
||||
className={`flex gap-2 md:gap-4 py-4 md:py-6 px-3 md:px-6 group hover:bg-muted/10 transition-colors ${
|
||||
isAssistant ? "justify-start" : "justify-end"
|
||||
}`}
|
||||
onMouseEnter={() => setShowActions(true)}
|
||||
onMouseLeave={() => setShowActions(false)}
|
||||
>
|
||||
{isAssistant && (
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-primary to-secondary">
|
||||
<Bot className="w-5 h-5 text-primary-foreground" />
|
||||
<div className="flex flex-col items-center gap-1 md:gap-2">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-primary to-secondary">
|
||||
<Bot className="w-4 h-4 md:w-5 md:h-5 text-primary-foreground" />
|
||||
</div>
|
||||
|
||||
{model && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
|
||||
className="hidden md:block text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
|
||||
>
|
||||
{model}
|
||||
</Badge>
|
||||
@@ -53,7 +53,7 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`flex-1 max-w-3xl space-y-2 ${isAssistant ? "" : "flex flex-col items-end"}`}>
|
||||
<div className={`flex-1 max-w-3xl space-y-1 md:space-y-2 ${isAssistant ? "" : "flex flex-col items-end"}`}>
|
||||
{/* Attachments */}
|
||||
{attachments && attachments.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
@@ -73,13 +73,13 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`inline-block px-4 py-3 rounded-xl ${
|
||||
className={`inline-block px-3 md:px-4 py-2 md:py-3 rounded-xl ${
|
||||
isAssistant
|
||||
? "bg-card border border-border"
|
||||
: "bg-gradient-to-br from-primary to-secondary text-primary-foreground"
|
||||
}`}
|
||||
>
|
||||
<p className={`leading-relaxed ${isAssistant ? "text-foreground" : "text-white"}`}>
|
||||
<p className={`text-sm md:text-base leading-relaxed ${isAssistant ? "text-foreground" : "text-white"}`}>
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
@@ -100,8 +100,8 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
|
||||
</div>
|
||||
|
||||
{!isAssistant && (
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/20 border border-accent">
|
||||
<User className="w-5 h-5 text-accent" />
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/20 border border-accent">
|
||||
<User className="w-4 h-4 md:w-5 md:h-5 text-accent" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -76,16 +76,18 @@ export const ChatView = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
{/* Chat Sidebar */}
|
||||
<div className="flex h-full w-full pb-16 md:pb-0">
|
||||
{/* Chat Sidebar - Hidden on mobile */}
|
||||
<div className="hidden md:block">
|
||||
<ChatSidebar
|
||||
isCollapsed={isChatSidebarCollapsed}
|
||||
onToggleCollapse={() => setIsChatSidebarCollapsed(!isChatSidebarCollapsed)}
|
||||
onNewChat={handleNewChat}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Chat Area */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="flex-1 flex flex-col w-full">
|
||||
<ChatHeader
|
||||
showModelSelector={true}
|
||||
selectedModel={selectedModel}
|
||||
@@ -95,7 +97,7 @@ export const ChatView = () => {
|
||||
/>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="max-w-4xl mx-auto px-2 md:px-4">
|
||||
{messages.map((message) => (
|
||||
<ChatMessage
|
||||
key={message.id}
|
||||
|
||||
@@ -70,25 +70,26 @@ export const ImageView = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex flex-col h-full pb-16 md:pb-0">
|
||||
<ChatHeader />
|
||||
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Main Content */}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="max-w-5xl mx-auto p-6">
|
||||
<Tabs defaultValue="generate" className="space-y-6">
|
||||
<div className="max-w-5xl mx-auto p-3 md:p-6">
|
||||
<Tabs defaultValue="generate" className="space-y-4 md:space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2 glass-effect">
|
||||
<TabsTrigger value="generate">Gerar Imagem</TabsTrigger>
|
||||
<TabsTrigger value="history">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Histórico
|
||||
<TabsTrigger value="generate" className="text-xs md:text-sm">Gerar Imagem</TabsTrigger>
|
||||
<TabsTrigger value="history" className="text-xs md:text-sm">
|
||||
<Clock className="w-3 h-3 md:w-4 md:h-4 mr-1 md:mr-2" />
|
||||
<span className="hidden md:inline">Histórico</span>
|
||||
<span className="md:hidden">Hist.</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Generate Tab */}
|
||||
<TabsContent value="generate" className="space-y-6">
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<TabsContent value="generate" className="space-y-4 md:space-y-6">
|
||||
<div className="glass-effect rounded-xl p-4 md:p-6 space-y-3 md:space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Descreva a imagem
|
||||
@@ -101,7 +102,7 @@ export const ImageView = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<div className="flex flex-col md:flex-row gap-3 md:gap-4 md:items-end">
|
||||
<div className="flex-1 space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Tamanho
|
||||
|
||||
Reference in New Issue
Block a user