718 lines
25 KiB
TypeScript
718 lines
25 KiB
TypeScript
/*
|
|
┌──────────────────────────────────────────────────────────────────────────────┐
|
|
│ @author: Davidson Gomes │
|
|
│ @file: shared-chat/page.tsx │
|
|
│ Developed by: Davidson Gomes │
|
|
│ Creation date: May 13, 2025 │
|
|
│ Contact: contato@evolution-api.com │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ @copyright © Evolution API 2025. All rights reserved. │
|
|
│ Licensed under the Apache License, Version 2.0 │
|
|
│ │
|
|
│ You may not use this file except in compliance with the License. │
|
|
│ You may obtain a copy of the License at │
|
|
│ │
|
|
│ http://www.apache.org/licenses/LICENSE-2.0 │
|
|
│ │
|
|
│ Unless required by applicable law or agreed to in writing, software │
|
|
│ distributed under the License is distributed on an "AS IS" BASIS, │
|
|
│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │
|
|
│ See the License for the specific language governing permissions and │
|
|
│ limitations under the License. │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ @important │
|
|
│ For any future changes to the code in this file, it is recommended to │
|
|
│ include, together with the modification, the information of the developer │
|
|
│ who changed it and the date of modification. │
|
|
└──────────────────────────────────────────────────────────────────────────────┘
|
|
*/
|
|
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { MessageSquare, Loader2, ChevronRight, Info } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogHeader,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { getQueryParam } from "@/lib/utils";
|
|
import { getSharedAgent } from "@/services/agentService";
|
|
import { ChatMessage, ChatPart } from "@/services/sessionService";
|
|
import { useAgentWebSocket } from "@/hooks/use-agent-webSocket";
|
|
import { AgentInfo } from "./AgentInfo";
|
|
import Image from "next/image";
|
|
import { SharedSessionList } from "./components/SharedSessionList";
|
|
import { SharedChatPanel } from "./components/SharedChatPanel";
|
|
import { FileData } from "@/lib/file-utils";
|
|
|
|
interface AttachedFile {
|
|
filename: string;
|
|
content_type: string;
|
|
data: string;
|
|
size: number;
|
|
preview_url?: string;
|
|
}
|
|
|
|
interface FunctionMessageContent {
|
|
title: string;
|
|
content: string;
|
|
author?: string;
|
|
}
|
|
|
|
interface SharedAgentInfo {
|
|
id: string;
|
|
apiKey: string;
|
|
}
|
|
|
|
interface SharedSession {
|
|
id: string;
|
|
update_time: string;
|
|
name?: string;
|
|
messages: ChatMessage[];
|
|
}
|
|
|
|
export default function SharedChat() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [agent, setAgent] = useState<any | null>(null);
|
|
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
|
const [isSending, setIsSending] = useState(false);
|
|
const [agentParams, setAgentParams] = useState<SharedAgentInfo | null>(null);
|
|
const [isParamsDialogOpen, setIsParamsDialogOpen] = useState(false);
|
|
const [manualAgentId, setManualAgentId] = useState("");
|
|
const [manualApiKey, setManualApiKey] = useState("");
|
|
const [savedAgents, setSavedAgents] = useState<SharedAgentInfo[]>([]);
|
|
const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
|
|
|
|
const [sessions, setSessions] = useState<SharedSession[]>([]);
|
|
const [selectedSession, setSelectedSession] = useState<string | null>(null);
|
|
const [isSessionsCollapsed, setIsSessionsCollapsed] = useState(false);
|
|
const [sessionSearchTerm, setSessionSearchTerm] = useState("");
|
|
|
|
const { toast } = useToast();
|
|
|
|
const createNewSession = () => {
|
|
const sessionId = generateExternalId();
|
|
const newSession: SharedSession = {
|
|
id: sessionId,
|
|
update_time: new Date().toISOString(),
|
|
messages: [
|
|
{
|
|
id: `system-${Date.now()}`,
|
|
content: {
|
|
parts: [
|
|
{
|
|
text: "Welcome to this shared agent. Type a message to start chatting.",
|
|
},
|
|
],
|
|
role: "system",
|
|
},
|
|
author: "assistant",
|
|
timestamp: Date.now() / 1000,
|
|
},
|
|
],
|
|
};
|
|
|
|
setSessions((prev) => [...prev, newSession]);
|
|
setSelectedSession(sessionId);
|
|
setMessages(newSession.messages);
|
|
|
|
if (agentParams) {
|
|
saveSessionsToLocalStorage(agentParams.id, [...sessions, newSession]);
|
|
}
|
|
};
|
|
|
|
const saveSessionsToLocalStorage = (
|
|
agentId: string,
|
|
sessionsToSave: SharedSession[]
|
|
) => {
|
|
if (typeof window !== "undefined") {
|
|
const key = `shared_agent_sessions_${agentId}`;
|
|
localStorage.setItem(key, JSON.stringify(sessionsToSave));
|
|
}
|
|
};
|
|
|
|
const loadSessionsFromLocalStorage = (agentId: string): SharedSession[] => {
|
|
if (typeof window !== "undefined") {
|
|
const key = `shared_agent_sessions_${agentId}`;
|
|
const sessionsJson = localStorage.getItem(key);
|
|
if (sessionsJson) {
|
|
try {
|
|
return JSON.parse(sessionsJson);
|
|
} catch (e) {
|
|
console.error("Error parsing sessions from localStorage:", e);
|
|
}
|
|
}
|
|
}
|
|
return [];
|
|
};
|
|
|
|
useEffect(() => {
|
|
const agentId = getQueryParam("agent");
|
|
const apiKey = getQueryParam("key");
|
|
|
|
console.log("[Shared Chat] Params from URL:", { agentId, apiKey });
|
|
|
|
if (agentId && apiKey) {
|
|
setAgentParams({ id: agentId, apiKey });
|
|
|
|
if (typeof window !== "undefined") {
|
|
localStorage.setItem("shared_agent_api_key", apiKey);
|
|
console.log("[Shared Chat] API key set in localStorage");
|
|
|
|
const savedAgentsJson = localStorage.getItem("shared_agents") || "[]";
|
|
try {
|
|
const savedAgents = JSON.parse(savedAgentsJson) as SharedAgentInfo[];
|
|
const existingAgent = savedAgents.find((a) => a.id === agentId);
|
|
|
|
if (!existingAgent) {
|
|
const updatedAgents = [...savedAgents, { id: agentId, apiKey }];
|
|
localStorage.setItem(
|
|
"shared_agents",
|
|
JSON.stringify(updatedAgents)
|
|
);
|
|
console.log("[Shared Chat] Agent added to saved agents");
|
|
}
|
|
} catch (e) {
|
|
console.error("Error processing saved agents:", e);
|
|
}
|
|
}
|
|
} else {
|
|
if (typeof window !== "undefined") {
|
|
const savedAgentsJson = localStorage.getItem("shared_agents") || "[]";
|
|
try {
|
|
const savedAgents = JSON.parse(savedAgentsJson) as SharedAgentInfo[];
|
|
setSavedAgents(savedAgents);
|
|
|
|
if (savedAgents.length > 0) {
|
|
setAgentParams(savedAgents[savedAgents.length - 1]);
|
|
localStorage.setItem(
|
|
"shared_agent_api_key",
|
|
savedAgents[savedAgents.length - 1].apiKey
|
|
);
|
|
} else {
|
|
setIsParamsDialogOpen(true);
|
|
}
|
|
} catch (e) {
|
|
console.error("Error processing saved agents:", e);
|
|
setIsParamsDialogOpen(true);
|
|
}
|
|
} else {
|
|
setIsParamsDialogOpen(true);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const loadAgentData = async () => {
|
|
if (!agentParams) return;
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
localStorage.setItem("shared_agent_api_key", agentParams.apiKey);
|
|
|
|
try {
|
|
const response = await getSharedAgent(agentParams.id);
|
|
setAgent(response.data);
|
|
} catch (error) {
|
|
console.error("Error loading agent data:", error);
|
|
setAgent({
|
|
id: agentParams.id,
|
|
name: "Shared Agent",
|
|
description: "This agent is being accessed via a shared API key",
|
|
type: "llm",
|
|
model: "Unknown model",
|
|
created_at: new Date().toISOString(),
|
|
});
|
|
}
|
|
|
|
const loadedSessions = loadSessionsFromLocalStorage(agentParams.id);
|
|
|
|
if (loadedSessions.length > 0) {
|
|
setSessions(loadedSessions);
|
|
const latestSession = loadedSessions.sort(
|
|
(a, b) =>
|
|
new Date(b.update_time).getTime() -
|
|
new Date(a.update_time).getTime()
|
|
)[0];
|
|
setSelectedSession(latestSession.id);
|
|
setMessages(latestSession.messages);
|
|
} else {
|
|
createNewSession();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error setting up shared agent:", error);
|
|
toast({
|
|
title: "Error",
|
|
description: "Unable to set up the shared agent.",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
loadAgentData();
|
|
}, [agentParams, toast]);
|
|
|
|
useEffect(() => {
|
|
if (selectedSession && messages.length > 0) {
|
|
setSessions((prev) => {
|
|
const updatedSessions = prev.map((session) => {
|
|
if (session.id === selectedSession) {
|
|
return {
|
|
...session,
|
|
messages: messages,
|
|
update_time: new Date().toISOString(),
|
|
};
|
|
}
|
|
return session;
|
|
});
|
|
|
|
if (agentParams) {
|
|
saveSessionsToLocalStorage(agentParams.id, updatedSessions);
|
|
}
|
|
|
|
return updatedSessions;
|
|
});
|
|
}
|
|
}, [messages, selectedSession, agentParams]);
|
|
|
|
const handleSendMessage = async (messageText: string, files?: FileData[]) => {
|
|
if (
|
|
(!messageText.trim() && (!files || files.length === 0)) ||
|
|
!agentParams?.id ||
|
|
!selectedSession
|
|
)
|
|
return;
|
|
|
|
setIsSending(true);
|
|
|
|
const messageParts: ChatPart[] = [];
|
|
|
|
if (messageText.trim()) {
|
|
messageParts.push({ text: messageText });
|
|
}
|
|
|
|
if (files && files.length > 0) {
|
|
files.forEach((file) => {
|
|
messageParts.push({
|
|
inline_data: {
|
|
data: file.data,
|
|
mime_type: file.content_type,
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
setMessages((prev) => [
|
|
...prev,
|
|
{
|
|
id: `temp-${Date.now()}`,
|
|
content: {
|
|
parts: messageParts,
|
|
role: "user",
|
|
},
|
|
author: "user",
|
|
timestamp: Date.now() / 1000,
|
|
},
|
|
]);
|
|
|
|
wsSendMessage(messageText, files);
|
|
};
|
|
|
|
const generateExternalId = () => {
|
|
const now = new Date();
|
|
return (
|
|
now.getFullYear().toString() +
|
|
(now.getMonth() + 1).toString().padStart(2, "0") +
|
|
now.getDate().toString().padStart(2, "0") +
|
|
now.getHours().toString().padStart(2, "0") +
|
|
now.getMinutes().toString().padStart(2, "0") +
|
|
now.getSeconds().toString().padStart(2, "0") +
|
|
now.getMilliseconds().toString().padStart(3, "0")
|
|
);
|
|
};
|
|
|
|
const containsMarkdown = (text: string): boolean => {
|
|
if (!text || text.length < 3) return false;
|
|
|
|
const markdownPatterns = [
|
|
/[*_]{1,2}[^*_]+[*_]{1,2}/, // bold/italic
|
|
/\[[^\]]+\]\([^)]+\)/, // links
|
|
/^#{1,6}\s/m, // headers
|
|
/^[-*+]\s/m, // unordered lists
|
|
/^[0-9]+\.\s/m, // ordered lists
|
|
/^>\s/m, // block quotes
|
|
/`[^`]+`/, // inline code
|
|
/```[\s\S]*?```/, // code blocks
|
|
/^\|(.+\|)+$/m, // tables
|
|
/!\[[^\]]*\]\([^)]+\)/, // images
|
|
];
|
|
|
|
return markdownPatterns.some((pattern) => pattern.test(text));
|
|
};
|
|
|
|
const getMessageText = (
|
|
message: ChatMessage
|
|
): string | FunctionMessageContent => {
|
|
const author = message.author;
|
|
const parts = message.content.parts;
|
|
|
|
if (!parts || parts.length === 0) return "Empty content";
|
|
|
|
const functionCallPart = parts.find(
|
|
(part) => part.functionCall || part.function_call
|
|
);
|
|
const functionResponsePart = parts.find(
|
|
(part) => part.functionResponse || part.function_response
|
|
);
|
|
|
|
const inlineDataParts = parts.filter((part) => part.inline_data);
|
|
|
|
if (functionCallPart) {
|
|
const funcCall =
|
|
functionCallPart.functionCall || functionCallPart.function_call || {};
|
|
const args = funcCall.args || {};
|
|
const name = funcCall.name || "unknown";
|
|
const id = funcCall.id || "no-id";
|
|
|
|
return {
|
|
author,
|
|
title: `📞 Function call: ${name}`,
|
|
content: `ID: ${id}
|
|
Args: ${
|
|
Object.keys(args).length > 0
|
|
? `\n${JSON.stringify(args, null, 2)}`
|
|
: "{}"
|
|
}`,
|
|
} as FunctionMessageContent;
|
|
}
|
|
|
|
if (functionResponsePart) {
|
|
const funcResponse =
|
|
functionResponsePart.functionResponse ||
|
|
functionResponsePart.function_response ||
|
|
{};
|
|
const response = funcResponse.response || {};
|
|
const name = funcResponse.name || "unknown";
|
|
const id = funcResponse.id || "no-id";
|
|
const status = response.status || "unknown";
|
|
const statusEmoji = status === "error" ? "❌" : "✅";
|
|
|
|
let resultText = "";
|
|
if (status === "error") {
|
|
resultText = `Error: ${response.error_message || "Unknown error"}`;
|
|
} else if (response.report) {
|
|
resultText = `Result: ${response.report}`;
|
|
} else if (response.result && response.result.content) {
|
|
const content = response.result.content;
|
|
if (Array.isArray(content) && content.length > 0 && content[0].text) {
|
|
try {
|
|
const textContent = content[0].text;
|
|
const parsedJson = JSON.parse(textContent);
|
|
resultText = `Result: \n${JSON.stringify(parsedJson, null, 2)}`;
|
|
} catch (e) {
|
|
resultText = `Result: ${content[0].text}`;
|
|
}
|
|
} else {
|
|
resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
|
|
}
|
|
} else {
|
|
resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
|
|
}
|
|
|
|
return {
|
|
author,
|
|
title: `${statusEmoji} Function response: ${name}`,
|
|
content: `ID: ${id}\n${resultText}`,
|
|
} as FunctionMessageContent;
|
|
}
|
|
|
|
if (parts.length === 1 && parts[0].text) {
|
|
return {
|
|
author,
|
|
content: parts[0].text,
|
|
title: "Message",
|
|
} as FunctionMessageContent;
|
|
}
|
|
|
|
const textParts = parts
|
|
.filter((part) => part.text)
|
|
.map((part) => part.text)
|
|
.filter((text) => text);
|
|
|
|
if (textParts.length > 0) {
|
|
return {
|
|
author,
|
|
content: textParts.join("\n\n"),
|
|
title: "Message",
|
|
} as FunctionMessageContent;
|
|
}
|
|
|
|
return "Empty content";
|
|
};
|
|
|
|
const onEvent = useCallback((event: any) => {
|
|
setMessages((prev) => [...prev, event]);
|
|
}, []);
|
|
|
|
const onTurnComplete = useCallback(() => {
|
|
setIsSending(false);
|
|
}, []);
|
|
|
|
const externalId = selectedSession || generateExternalId();
|
|
|
|
const { sendMessage: wsSendMessage, disconnect: _ } = useAgentWebSocket({
|
|
agentId: agentParams?.id || "",
|
|
externalId,
|
|
apiKey: agentParams?.apiKey,
|
|
onEvent,
|
|
onTurnComplete,
|
|
});
|
|
|
|
const handleManualConnect = () => {
|
|
if (manualAgentId && manualApiKey) {
|
|
const newAgent = { id: manualAgentId, apiKey: manualApiKey };
|
|
if (typeof window !== "undefined") {
|
|
const savedAgentsJson = localStorage.getItem("shared_agents") || "[]";
|
|
try {
|
|
const savedAgents = JSON.parse(savedAgentsJson) as SharedAgentInfo[];
|
|
const existingAgentIndex = savedAgents.findIndex(
|
|
(a) => a.id === manualAgentId
|
|
);
|
|
|
|
if (existingAgentIndex >= 0) {
|
|
savedAgents[existingAgentIndex] = newAgent;
|
|
} else {
|
|
savedAgents.push(newAgent);
|
|
}
|
|
|
|
localStorage.setItem("shared_agents", JSON.stringify(savedAgents));
|
|
setSavedAgents(savedAgents);
|
|
} catch (e) {
|
|
console.error("Error processing saved agents:", e);
|
|
}
|
|
}
|
|
|
|
setAgentParams(newAgent);
|
|
setIsParamsDialogOpen(false);
|
|
} else {
|
|
toast({
|
|
title: "Incomplete data",
|
|
description: "Please fill in the agent ID and API key.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const selectSavedAgent = (agent: SharedAgentInfo) => {
|
|
setAgentParams(agent);
|
|
setIsParamsDialogOpen(false);
|
|
};
|
|
|
|
const handleSessionSelect = (sessionId: string | null) => {
|
|
if (!sessionId) return;
|
|
|
|
// Encontre a sessão selecionada e carregue suas mensagens
|
|
const session = sessions.find((s) => s.id === sessionId);
|
|
if (session) {
|
|
setMessages(session.messages);
|
|
setSelectedSession(sessionId);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen max-h-screen bg-neutral-950">
|
|
<SharedSessionList
|
|
sessions={sessions}
|
|
selectedSession={selectedSession}
|
|
isLoading={isLoading}
|
|
searchTerm={sessionSearchTerm}
|
|
isCollapsed={isSessionsCollapsed}
|
|
setSearchTerm={setSessionSearchTerm}
|
|
setSelectedSession={handleSessionSelect}
|
|
onNewSession={createNewSession}
|
|
onToggleCollapse={() => setIsSessionsCollapsed(!isSessionsCollapsed)}
|
|
agentName={agent?.name || "Shared Agent"}
|
|
/>
|
|
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{agent && (
|
|
<div className="p-4 border-b border-neutral-700 bg-neutral-900 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Image
|
|
src="https://evolution-api.com/files/evo/logo-evo-ai.svg"
|
|
alt="Evolution API"
|
|
width={60}
|
|
height={30}
|
|
/>
|
|
<div className="h-10 w-px bg-neutral-800" />
|
|
<div
|
|
className="flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity"
|
|
onClick={() => setIsInfoPanelOpen(!isInfoPanelOpen)}
|
|
>
|
|
<div className="p-2 rounded-full bg-emerald-500/20">
|
|
<MessageSquare className="h-5 w-5 text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-lg font-medium text-white flex items-center gap-2">
|
|
{agent.name}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-neutral-400 hover:text-emerald-400 p-0.5"
|
|
onClick={() => setIsInfoPanelOpen(true)}
|
|
>
|
|
<Info className="h-4 w-4" />
|
|
</Button>
|
|
</h1>
|
|
<p className="text-sm text-neutral-400">
|
|
{agent.description?.length > 100
|
|
? `${agent.description.substring(0, 100)}...`
|
|
: agent.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Badge className="bg-emerald-500 text-white px-3 py-1 text-sm border-0">
|
|
Shared Agent
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
|
|
{(selectedSession || agentParams) ? (
|
|
<SharedChatPanel
|
|
messages={messages}
|
|
isLoading={isLoading}
|
|
isSending={isSending}
|
|
agentName={agent?.name || "Shared Agent"}
|
|
onSendMessage={handleSendMessage}
|
|
getMessageText={getMessageText}
|
|
containsMarkdown={containsMarkdown}
|
|
sessionId={selectedSession || undefined}
|
|
/>
|
|
) : (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-center p-6 bg-neutral-950">
|
|
<div className="w-20 h-20 rounded-full bg-emerald-500/20 flex items-center justify-center mb-6 border border-emerald-500/30">
|
|
<MessageSquare className="h-10 w-10 text-emerald-400" />
|
|
</div>
|
|
<h2 className="text-2xl font-semibold text-white mb-3">
|
|
Welcome to Shared Chat
|
|
</h2>
|
|
<p className="text-neutral-400 mb-8 max-w-md">
|
|
To start, please enter an agent ID and API key
|
|
</p>
|
|
<Button
|
|
onClick={() => setIsParamsDialogOpen(true)}
|
|
className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-6 h-auto rounded-xl"
|
|
>
|
|
Connect to Agent
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Dialog open={isParamsDialogOpen} onOpenChange={setIsParamsDialogOpen}>
|
|
<DialogContent className="bg-neutral-900 border-neutral-800 text-white max-w-md">
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="p-1.5 rounded-full bg-emerald-500/20">
|
|
<MessageSquare className="h-5 w-5 text-emerald-400" />
|
|
</div>
|
|
<DialogTitle className="text-xl font-medium">
|
|
Connect to Shared Agent
|
|
</DialogTitle>
|
|
</div>
|
|
<DialogDescription className="text-neutral-400">
|
|
Enter the agent ID and API key to connect
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 py-2">
|
|
<div className="space-y-2">
|
|
<label className="text-sm text-neutral-300">Agent ID</label>
|
|
<Input
|
|
value={manualAgentId}
|
|
onChange={(e) => setManualAgentId(e.target.value)}
|
|
placeholder="Enter agent ID"
|
|
className="bg-neutral-800 border-neutral-700 text-white focus-visible:ring-emerald-500"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm text-neutral-300">API Key</label>
|
|
<Input
|
|
value={manualApiKey}
|
|
onChange={(e) => setManualApiKey(e.target.value)}
|
|
placeholder="Enter API key"
|
|
type="password"
|
|
className="bg-neutral-800 border-neutral-700 text-white focus-visible:ring-emerald-500"
|
|
/>
|
|
</div>
|
|
|
|
{savedAgents.length > 0 && (
|
|
<div className="pt-2 border-t border-neutral-700">
|
|
<p className="text-sm text-neutral-300 mb-2">Or select a saved agent:</p>
|
|
<div className="space-y-2 max-h-32 overflow-y-auto">
|
|
{savedAgents.map((agent) => (
|
|
<Button
|
|
key={agent.id}
|
|
variant="outline"
|
|
className="w-full justify-start text-left mb-1 bg-neutral-800 border-neutral-700 hover:bg-neutral-700 text-neutral-200"
|
|
onClick={() => selectSavedAgent(agent)}
|
|
>
|
|
<div className="truncate">{agent.id}</div>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setIsParamsDialogOpen(false)}
|
|
className="bg-neutral-800 border-neutral-700 text-neutral-300 hover:bg-neutral-700 hover:text-white"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleManualConnect}
|
|
disabled={!manualAgentId || !manualApiKey}
|
|
className="bg-emerald-500 text-white hover:bg-emerald-600"
|
|
>
|
|
Connect
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={isInfoPanelOpen} onOpenChange={setIsInfoPanelOpen}>
|
|
<DialogContent className="bg-neutral-900 border-neutral-800 text-white max-w-3xl h-[80vh]">
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-1.5 rounded-full bg-emerald-500/20">
|
|
<Info className="h-5 w-5 text-emerald-400" />
|
|
</div>
|
|
<DialogTitle className="text-xl font-medium">
|
|
{agent?.name || "Shared Agent"} Information
|
|
</DialogTitle>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-y-auto mt-2">
|
|
{agent && <AgentInfo agent={agent} isShared={true} />}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|