feat: update dependencies and enhance chat functionality

- Added new Radix UI components including checkbox, label, popover, slider, switch, and tooltip to improve UI interactions. - Integrated react-syntax-highlighter for better code rendering in chat messages. - Updated package.json and pnpm-lock.yaml to include new dependencies and ensure compatibility. - Enhanced chat input to support web search toggling, improving user experience during message composition. - Implemented auto-saving of chat sessions and improved session management features. - Refactored chat message rendering to clean up metadata and improve display quality.
2025-11-20 04:26:35 -03:00
1 parent 032722e21b
commit 8834ef2b4f
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { Server, CheckCircle2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { McpServerInfo } from '@/hooks/use-mcp-servers';
+
+interface McpServerSelectorProps {
+  servers: McpServerInfo[];
+  selectedServers: string[];
+  onSelectionChange: (servers: string[]) => void;
+  isLoading?: boolean;
+  className?: string;
+}
+
+export function McpServerSelector({
+  servers,
+  selectedServers,
+  onSelectionChange,
+  isLoading = false,
+  className,
+}: McpServerSelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  // Filter only running servers
+const runningServers = servers.filter(s => s.status === 'running');
+
+  const handleToggle = (serverName: string) => {
+    if (selectedServers.includes(serverName)) {
+      onSelectionChange(selectedServers.filter(s => s !== serverName));
+    } else {
+      onSelectionChange([...selectedServers, serverName]);
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (selectedServers.length === runningServers.length) {
+      onSelectionChange([]);
+    } else {
+      onSelectionChange(runningServers.map(s => s.name));
+    }
+  };
+
+  const getButtonText = () => {
+    if (selectedServers.length === 0) {
+      return 'Servidores MCP';
+    }
+    if (selectedServers.length === 1) {
+      return selectedServers[0];
+    }
+    return `${selectedServers.length} servidores`;
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn('h-8 gap-2', className)}
+          disabled={isLoading}
+        >
+          <Server className="h-3.5 w-3.5" />
+          <span className="hidden sm:inline">{getButtonText()}</span>
+          {selectedServers.length > 0 && (
+            <Badge variant="secondary" className="ml-1 h-5 px-1.5 text-xs">
+              {selectedServers.length}
+            </Badge>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="flex items-center justify-between">
+          <span>Servidores MCP</span>
+          {selectedServers.length > 0 && (
+            <span className="text-xs font-normal text-muted-foreground">
+              {selectedServers.length} selecionado{selectedServers.length !== 1 ? 's' : ''}
+            </span>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={selectedServers.length === runningServers.length && runningServers.length > 0}
+          onCheckedChange={handleSelectAll}
+          className="font-medium"
+        >
+          Selecionar Todos
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        {runningServers.map((server) => (
+          <DropdownMenuCheckboxItem
+            key={server.name}
+            checked={selectedServers.includes(server.name)}
+            onCheckedChange={() => handleToggle(server.name)}
+            className="flex items-center justify-between"
+          >
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-3 w-3 text-green-600 dark:text-green-400" />
+              <span>{server.name}</span>
+            </div>
+            {server.toolCount !== undefined && server.toolCount > 0 && (
+              <Badge variant="outline" className="ml-2 h-5 px-1.5 text-xs">
+                {server.toolCount}
+              </Badge>
+            )}
+          </DropdownMenuCheckboxItem>
+        ))}
+        {runningServers.length === 0 && (
+          <div className="px-2 py-1.5 text-sm text-muted-foreground">
+            Nenhum servidor rodando
+          </div>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+