Commit inicial - upload de todos os arquivos da pasta
This commit is contained in:
375
frontend/app/chat/components/ChatMessage.tsx
Normal file
375
frontend/app/chat/components/ChatMessage.tsx
Normal file
@@ -0,0 +1,375 @@
|
||||
/*
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ @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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user