375 lines
16 KiB
TypeScript
375 lines
16 KiB
TypeScript
/*
|
|
┌──────────────────────────────────────────────────────────────────────────────┐
|
|
│ @author: Davidson Gomes │
|
|
│ @file: /app/chat/components/ChatMessage.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 { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { ChatMessage as ChatMessageType } from "@/services/sessionService";
|
|
import { ChevronDown, ChevronRight, Copy, Check, User, Bot, Terminal } from "lucide-react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import { useState } from "react";
|
|
import { InlineDataAttachments } from "./InlineDataAttachments";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FunctionMessageContent {
|
|
title: string;
|
|
content: string;
|
|
author?: string;
|
|
}
|
|
|
|
interface AttachedFile {
|
|
filename: string;
|
|
content_type: string;
|
|
data: string;
|
|
size: number;
|
|
preview_url?: string;
|
|
}
|
|
|
|
interface ChatMessageProps {
|
|
message: ChatMessageType;
|
|
agentColor: string;
|
|
isExpanded: boolean;
|
|
toggleExpansion: (messageId: string) => void;
|
|
containsMarkdown: (text: string) => boolean;
|
|
messageContent: string | FunctionMessageContent;
|
|
sessionId?: string;
|
|
}
|
|
|
|
export function ChatMessage({
|
|
message,
|
|
agentColor,
|
|
isExpanded,
|
|
toggleExpansion,
|
|
containsMarkdown,
|
|
messageContent,
|
|
sessionId,
|
|
}: ChatMessageProps) {
|
|
const [isCopied, setIsCopied] = useState(false);
|
|
|
|
const isUser = message.author === "user";
|
|
const hasFunctionCall = message.content.parts.some(
|
|
(part) => part.functionCall || part.function_call
|
|
);
|
|
const hasFunctionResponse = message.content.parts.some(
|
|
(part) => part.functionResponse || part.function_response
|
|
);
|
|
const isFunctionMessage = hasFunctionCall || hasFunctionResponse;
|
|
const isTaskExecutor = typeof messageContent === "object" &&
|
|
"author" in messageContent &&
|
|
typeof messageContent.author === "string" &&
|
|
messageContent.author.endsWith("- Task executor");
|
|
|
|
const inlineDataParts = message.content.parts.filter(part => part.inline_data);
|
|
const hasInlineData = inlineDataParts.length > 0;
|
|
|
|
const copyToClipboard = () => {
|
|
const textToCopy = typeof messageContent === "string"
|
|
? messageContent
|
|
: messageContent.content;
|
|
|
|
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
setIsCopied(true);
|
|
setTimeout(() => setIsCopied(false), 2000);
|
|
});
|
|
};
|
|
|
|
// Generate appropriate avatar content
|
|
const getAvatar = () => {
|
|
if (isUser) {
|
|
return (
|
|
<Avatar className="bg-gradient-to-br from-emerald-500 to-emerald-700 shadow-md border-0">
|
|
<AvatarFallback className="bg-transparent">
|
|
<User className="h-4 w-4 text-white" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
} else {
|
|
return (
|
|
<Avatar className={`shadow-md border-0 ${
|
|
isFunctionMessage
|
|
? "bg-gradient-to-br from-emerald-600 to-emerald-800"
|
|
: "bg-gradient-to-br from-purple-600 to-purple-800"
|
|
}`}>
|
|
<AvatarFallback className="bg-transparent">
|
|
{isFunctionMessage ?
|
|
<Terminal className="h-4 w-4 text-white" /> :
|
|
<Bot className="h-4 w-4 text-white" />
|
|
}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={message.id}
|
|
className="flex w-full"
|
|
style={{
|
|
justifyContent: isUser ? "flex-end" : "flex-start"
|
|
}}
|
|
>
|
|
<div
|
|
className="flex gap-3 max-w-[90%]"
|
|
style={{
|
|
flexDirection: isUser ? "row-reverse" : "row"
|
|
}}
|
|
>
|
|
{getAvatar()}
|
|
<div
|
|
className={`rounded-lg p-3 overflow-hidden relative group shadow-md ${
|
|
isFunctionMessage || isTaskExecutor
|
|
? "bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50 text-emerald-300 font-mono text-sm"
|
|
: isUser
|
|
? "bg-emerald-500 text-white"
|
|
: "bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50 text-white"
|
|
}`}
|
|
style={{
|
|
wordBreak: "break-word",
|
|
maxWidth: "calc(100% - 3rem)",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
{isFunctionMessage || isTaskExecutor ? (
|
|
<div className="w-full">
|
|
<div
|
|
className="flex items-center gap-2 cursor-pointer hover:bg-[#444] rounded px-1 py-0.5 transition-colors"
|
|
onClick={() => toggleExpansion(message.id)}
|
|
>
|
|
{typeof messageContent === "object" &&
|
|
"title" in messageContent && (
|
|
<>
|
|
<div className="flex-1 font-semibold">
|
|
{(messageContent as FunctionMessageContent).title}
|
|
</div>
|
|
<div className="flex items-center justify-center w-5 h-5 text-emerald-400">
|
|
{isExpanded ? (
|
|
<ChevronDown className="h-4 w-4" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4" />
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
{isTaskExecutor && (
|
|
<>
|
|
<div className="flex-1 font-semibold">
|
|
Task Execution
|
|
</div>
|
|
<div className="flex items-center justify-center w-5 h-5 text-emerald-400">
|
|
{isExpanded ? (
|
|
<ChevronDown className="h-4 w-4" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4" />
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div className="mt-2 pt-2 border-t border-[#555]">
|
|
{typeof messageContent === "object" &&
|
|
"content" in messageContent && (
|
|
<div className="max-w-full overflow-x-auto">
|
|
<pre className="whitespace-pre-wrap text-xs max-w-full" style={{
|
|
wordWrap: "break-word",
|
|
maxWidth: "100%",
|
|
wordBreak: "break-all"
|
|
}}>
|
|
{(messageContent as FunctionMessageContent).content}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="markdown-content break-words max-w-full overflow-x-auto">
|
|
{typeof messageContent === "object" &&
|
|
"author" in messageContent &&
|
|
messageContent.author !== "user" &&
|
|
!isTaskExecutor && (
|
|
<div className="text-xs text-neutral-400 mb-1">
|
|
{messageContent.author}
|
|
</div>
|
|
)}
|
|
{((typeof messageContent === "string" &&
|
|
containsMarkdown(messageContent)) ||
|
|
(typeof messageContent === "object" &&
|
|
"content" in messageContent &&
|
|
typeof messageContent.content === "string" &&
|
|
containsMarkdown(messageContent.content))) &&
|
|
!isTaskExecutor ? (
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
h1: ({ ...props }) => (
|
|
<h1 className="text-xl font-bold my-4" {...props} />
|
|
),
|
|
h2: ({ ...props }) => (
|
|
<h2 className="text-lg font-bold my-3" {...props} />
|
|
),
|
|
h3: ({ ...props }) => (
|
|
<h3 className="text-base font-bold my-2" {...props} />
|
|
),
|
|
h4: ({ ...props }) => (
|
|
<h4 className="font-semibold my-2" {...props} />
|
|
),
|
|
p: ({ ...props }) => <p className="mb-3" {...props} />,
|
|
ul: ({ ...props }) => (
|
|
<ul
|
|
className="list-disc pl-6 mb-3 space-y-1"
|
|
{...props}
|
|
/>
|
|
),
|
|
ol: ({ ...props }) => (
|
|
<ol
|
|
className="list-decimal pl-6 mb-3 space-y-1"
|
|
{...props}
|
|
/>
|
|
),
|
|
li: ({ ...props }) => <li className="mb-1" {...props} />,
|
|
a: ({ ...props }) => (
|
|
<a
|
|
className="text-emerald-300 underline hover:opacity-80 transition-opacity"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
{...props}
|
|
/>
|
|
),
|
|
blockquote: ({ ...props }) => (
|
|
<blockquote
|
|
className="border-l-4 border-[#444] pl-4 py-1 italic my-3 text-neutral-300"
|
|
{...props}
|
|
/>
|
|
),
|
|
code: ({ className, children, ...props }: any) => {
|
|
const match = /language-(\w+)/.exec(className || "");
|
|
const isInline =
|
|
!match &&
|
|
typeof children === "string" &&
|
|
!children.includes("\n");
|
|
|
|
if (isInline) {
|
|
return (
|
|
<code
|
|
className="bg-[#333] px-1.5 py-0.5 rounded text-emerald-300 text-sm font-mono"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</code>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="my-3 relative group/code">
|
|
<div className="bg-[#1a1a1a] rounded-t-md border-b border-[#333] p-2 text-xs text-neutral-400 flex justify-between items-center">
|
|
<span>{match?.[1] || "Code"}</span>
|
|
<button
|
|
onClick={copyToClipboard}
|
|
className="text-neutral-400 hover:text-emerald-300 transition-colors"
|
|
title="Copy code"
|
|
>
|
|
{isCopied ? (
|
|
<Check className="h-3.5 w-3.5" />
|
|
) : (
|
|
<Copy className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<pre className="bg-[#1a1a1a] p-3 rounded-b-md overflow-x-auto whitespace-pre text-sm">
|
|
<code {...props}>{children}</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
},
|
|
table: ({ ...props }) => (
|
|
<div className="overflow-x-auto my-3">
|
|
<table
|
|
className="min-w-full border border-[#333] rounded"
|
|
{...props}
|
|
/>
|
|
</div>
|
|
),
|
|
thead: ({ ...props }) => (
|
|
<thead className="bg-[#1a1a1a]" {...props} />
|
|
),
|
|
tbody: ({ ...props }) => <tbody {...props} />,
|
|
tr: ({ ...props }) => (
|
|
<tr
|
|
className="border-b border-[#333] last:border-0"
|
|
{...props}
|
|
/>
|
|
),
|
|
th: ({ ...props }) => (
|
|
<th
|
|
className="px-4 py-2 text-left text-xs font-semibold text-neutral-300"
|
|
{...props}
|
|
/>
|
|
),
|
|
td: ({ ...props }) => (
|
|
<td className="px-4 py-2 text-sm" {...props} />
|
|
),
|
|
}}
|
|
>
|
|
{typeof messageContent === "string"
|
|
? messageContent
|
|
: messageContent.content}
|
|
</ReactMarkdown>
|
|
) : (
|
|
<div className="whitespace-pre-wrap">
|
|
{typeof messageContent === "string"
|
|
? messageContent
|
|
: messageContent.content}
|
|
</div>
|
|
)}
|
|
|
|
{hasInlineData && (
|
|
<InlineDataAttachments parts={inlineDataParts} sessionId={sessionId} />
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={copyToClipboard}
|
|
className="absolute top-2 right-2 p-1.5 rounded-full bg-neutral-800/80 text-neutral-400 hover:text-white opacity-0 group-hover:opacity-100 transition-all hover:bg-neutral-700/80"
|
|
title="Copy message"
|
|
>
|
|
{isCopied ? (
|
|
<Check className="h-3.5 w-3.5" />
|
|
) : (
|
|
<Copy className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|