470 lines
23 KiB
TypeScript
470 lines
23 KiB
TypeScript
/*
|
|
┌──────────────────────────────────────────────────────────────────────────────┐
|
|
│ @author: Davidson Gomes │
|
|
│ @file: /app/agents/workflows/nodes/components/agent/AgentTestChatModal.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. │
|
|
└──────────────────────────────────────────────────────────────────────────────┘
|
|
*/
|
|
import { useState, useCallback, useEffect, useRef } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useAgentWebSocket } from "@/hooks/use-agent-webSocket";
|
|
import { getAccessTokenFromCookie, cn } from "@/lib/utils";
|
|
import { Agent } from "@/types/agent";
|
|
import { ChatInput } from "@/app/chat/components/ChatInput";
|
|
import { ChatMessage as ChatMessageComponent } from "@/app/chat/components/ChatMessage";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { ChatPart } from "@/services/sessionService";
|
|
import { FileData } from "@/lib/file-utils";
|
|
import { X, User, Bot, Zap, MessageSquare, Loader2, Code, ExternalLink, Workflow, RefreshCw } from "lucide-react";
|
|
|
|
interface FunctionMessageContent {
|
|
title: string;
|
|
content: string;
|
|
author?: string;
|
|
}
|
|
|
|
interface ChatMessage {
|
|
id: string;
|
|
content: any;
|
|
author: string;
|
|
timestamp: number;
|
|
}
|
|
|
|
interface AgentTestChatModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
agent: Agent;
|
|
canvasRef?: React.RefObject<any>;
|
|
}
|
|
|
|
export function AgentTestChatModal({ open, onOpenChange, agent, canvasRef }: AgentTestChatModalProps) {
|
|
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
|
const [isSending, setIsSending] = useState(false);
|
|
const [expandedFunctions, setExpandedFunctions] = useState<Record<string, boolean>>({});
|
|
const [isInitializing, setIsInitializing] = useState(true);
|
|
const messagesContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const user = typeof window !== "undefined" ? JSON.parse(localStorage.getItem("user") || "{}") : {};
|
|
const clientId = user?.client_id || "test";
|
|
|
|
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 [externalId, setExternalId] = useState(generateExternalId());
|
|
const jwt = getAccessTokenFromCookie();
|
|
|
|
const onEvent = useCallback((event: any) => {
|
|
setMessages((prev) => [...prev, event]);
|
|
|
|
// Check if the message comes from a workflow node and highlight the node
|
|
// only if the canvasRef is available (called from Test Workflow on the main page)
|
|
if (event.author && event.author.startsWith('workflow-node:') && canvasRef?.current) {
|
|
const nodeId = event.author.split(':')[1];
|
|
canvasRef.current.setActiveExecutionNodeId(nodeId);
|
|
}
|
|
}, [canvasRef]);
|
|
|
|
const onTurnComplete = useCallback(() => {
|
|
setIsSending(false);
|
|
}, []);
|
|
|
|
const { sendMessage: wsSendMessage, disconnect } = useAgentWebSocket({
|
|
agentId: agent.id,
|
|
externalId,
|
|
jwt,
|
|
onEvent,
|
|
onTurnComplete,
|
|
});
|
|
|
|
// Handle ESC key to close the panel
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape" && open) {
|
|
onOpenChange(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [onOpenChange, open]);
|
|
|
|
// Show initialization state for better UX
|
|
useEffect(() => {
|
|
if (open) {
|
|
setIsInitializing(true);
|
|
const timer = setTimeout(() => {
|
|
setIsInitializing(false);
|
|
}, 1200);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [open, externalId]);
|
|
|
|
const handleRestartChat = () => {
|
|
if (disconnect) disconnect();
|
|
setMessages([]);
|
|
setExpandedFunctions({});
|
|
setExternalId(generateExternalId());
|
|
setIsInitializing(true);
|
|
|
|
// Short delay to show the initialization status
|
|
const timer = setTimeout(() => {
|
|
setIsInitializing(false);
|
|
}, 1200);
|
|
};
|
|
|
|
const handleSendMessageWithFiles = (message: string, files?: FileData[]) => {
|
|
if ((!message.trim() && (!files || files.length === 0))) return;
|
|
setIsSending(true);
|
|
|
|
const messageParts: ChatPart[] = [];
|
|
|
|
if (message.trim()) {
|
|
messageParts.push({ text: message });
|
|
}
|
|
|
|
if (files && files.length > 0) {
|
|
files.forEach(file => {
|
|
messageParts.push({
|
|
inline_data: {
|
|
data: file.data,
|
|
mime_type: file.content_type,
|
|
metadata: {
|
|
filename: file.filename
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
setMessages((prev) => [
|
|
...prev,
|
|
{
|
|
id: `temp-${Date.now()}`,
|
|
content: {
|
|
parts: messageParts,
|
|
role: "user"
|
|
},
|
|
author: "user",
|
|
timestamp: Date.now() / 1000,
|
|
},
|
|
]);
|
|
|
|
wsSendMessage(message, files);
|
|
};
|
|
|
|
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: any) => part.functionCall || part.function_call);
|
|
const functionResponsePart = parts.find((part: any) => part.functionResponse || part.function_response);
|
|
|
|
const inlineDataParts = parts.filter((part: any) => 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}\nArgs: ${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: any) => part.text).map((part: any) => part.text).filter((text: string) => text);
|
|
if (textParts.length > 0) {
|
|
return {
|
|
author,
|
|
content: textParts.join("\n\n"),
|
|
title: "Message",
|
|
} as FunctionMessageContent;
|
|
}
|
|
try {
|
|
return JSON.stringify(parts, null, 2).replace(/\\n/g, "\n");
|
|
} catch (error) {
|
|
return "Unable to interpret message content";
|
|
}
|
|
};
|
|
|
|
const toggleFunctionExpansion = (messageId: string) => {
|
|
setExpandedFunctions((prev) => ({ ...prev, [messageId]: !prev[messageId] }));
|
|
};
|
|
|
|
const getAgentTypeIcon = (type: string) => {
|
|
switch (type) {
|
|
case "llm":
|
|
return <Code className="h-4 w-4 text-green-400" />;
|
|
case "a2a":
|
|
return <ExternalLink className="h-4 w-4 text-indigo-400" />;
|
|
case "sequential":
|
|
case "workflow":
|
|
return <Workflow className="h-4 w-4 text-blue-400" />;
|
|
default:
|
|
return <Bot className="h-4 w-4 text-emerald-400" />;
|
|
}
|
|
};
|
|
|
|
// Scroll to bottom whenever messages change
|
|
useEffect(() => {
|
|
if (messagesContainerRef.current) {
|
|
messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
|
|
}
|
|
}, [messages]);
|
|
|
|
if (!open) return null;
|
|
|
|
// Use React Portal to render directly to document body, bypassing all parent containers
|
|
const modalContent = (
|
|
<>
|
|
{/* Overlay for mobile */}
|
|
<div
|
|
className="md:hidden fixed inset-0 bg-black bg-opacity-50 z-[15] transition-opacity duration-300"
|
|
onClick={() => onOpenChange(false)}
|
|
/>
|
|
|
|
{/* Side panel */}
|
|
<div
|
|
className="fixed right-0 top-0 z-[1000] h-full w-[450px] bg-gradient-to-b from-neutral-900 to-neutral-950 border-l border-neutral-800 shadow-2xl flex flex-col transition-all duration-300 ease-in-out transform"
|
|
style={{
|
|
transform: open ? 'translateX(0)' : 'translateX(100%)',
|
|
boxShadow: '0 0 25px rgba(0, 0, 0, 0.3)',
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex-shrink-0 p-5 bg-gradient-to-r from-neutral-900 to-neutral-800 border-b border-neutral-800">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center mb-1">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-600 to-emerald-900 flex items-center justify-center shadow-lg mr-3">
|
|
{getAgentTypeIcon(agent.type)}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white">{agent.name}</h2>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge
|
|
className="bg-emerald-900/40 text-emerald-400 border border-emerald-700/50 px-2"
|
|
>
|
|
{agent.type.toUpperCase()} Agent
|
|
</Badge>
|
|
{agent.model && (
|
|
<span className="text-xs text-neutral-400 bg-neutral-800/60 px-2 py-0.5 rounded-md">
|
|
{agent.model}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={handleRestartChat}
|
|
className="p-1.5 rounded-full hover:bg-neutral-700/50 text-neutral-400 hover:text-white transition-colors group relative"
|
|
title="Restart chat"
|
|
disabled={isInitializing}
|
|
>
|
|
<RefreshCw size={18} className={isInitializing ? "animate-spin text-emerald-400" : ""} />
|
|
<span className="absolute -bottom-8 right-0 bg-neutral-800 text-neutral-200 text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">
|
|
Restart chat
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() => onOpenChange(false)}
|
|
className="p-1.5 rounded-full hover:bg-neutral-700/50 text-neutral-400 hover:text-white transition-colors group relative"
|
|
>
|
|
<X size={18} />
|
|
<span className="absolute -bottom-8 right-0 bg-neutral-800 text-neutral-200 text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">
|
|
Close
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{agent.description && (
|
|
<div className="mt-3 text-sm text-neutral-400 bg-neutral-800/30 p-3 rounded-md border border-neutral-800">
|
|
{agent.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Chat content */}
|
|
<div className="flex-1 overflow-y-auto overflow-x-hidden p-3 bg-gradient-to-b from-neutral-900/50 to-neutral-950" ref={messagesContainerRef}>
|
|
{isInitializing ? (
|
|
<div className="flex flex-col items-center justify-center h-full">
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shadow-lg mb-4 animate-pulse">
|
|
<Zap className="h-5 w-5 text-white" />
|
|
</div>
|
|
<p className="text-neutral-400 mb-2">Initializing connection...</p>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
|
|
style={{ animationDelay: '0ms' }}></span>
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
|
|
style={{ animationDelay: '150ms' }}></span>
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
|
|
style={{ animationDelay: '300ms' }}></span>
|
|
</div>
|
|
</div>
|
|
) : messages.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full text-center px-6">
|
|
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500/20 to-emerald-500/20 flex items-center justify-center shadow-lg mb-5 border border-emerald-500/30">
|
|
<MessageSquare className="h-6 w-6 text-emerald-400" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-neutral-300 mb-2">Start the conversation</h3>
|
|
<p className="text-neutral-500 text-sm max-w-xs">
|
|
Type a message below to begin chatting with {agent.name}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 w-full max-w-full">
|
|
{messages.map((message) => {
|
|
const messageContent = getMessageText(message);
|
|
const agentColor = message.author === "user" ? "bg-emerald-500" : "bg-gradient-to-br from-neutral-800 to-neutral-900";
|
|
const isExpanded = expandedFunctions[message.id] || false;
|
|
|
|
return (
|
|
<ChatMessageComponent
|
|
key={message.id}
|
|
message={message}
|
|
agentColor={agentColor}
|
|
isExpanded={isExpanded}
|
|
toggleExpansion={toggleFunctionExpansion}
|
|
containsMarkdown={containsMarkdown}
|
|
messageContent={messageContent}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{isSending && (
|
|
<div className="flex justify-start">
|
|
<div className="flex gap-3 max-w-[80%]">
|
|
<Avatar
|
|
className="bg-gradient-to-br from-purple-600 to-purple-800 shadow-md border-0"
|
|
>
|
|
<AvatarFallback className="bg-transparent">
|
|
<Bot className="h-4 w-4 text-white" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="rounded-lg p-3 bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50">
|
|
<div className="flex space-x-2">
|
|
<div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce"></div>
|
|
<div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.2s]"></div>
|
|
<div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.4s]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Message input */}
|
|
<div className="p-3 border-t border-neutral-800 bg-neutral-900">
|
|
<ChatInput
|
|
onSendMessage={handleSendMessageWithFiles}
|
|
isLoading={isSending}
|
|
placeholder="Type your message..."
|
|
autoFocus={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
// Use createPortal to render the modal directly to the document body
|
|
return typeof document !== 'undefined'
|
|
? createPortal(modalContent, document.body)
|
|
: null;
|
|
}
|