Evandro Fonseca Junior
032722e21b
- Added support for rendering markdown in chat messages using ReactMarkdown with custom renderers. - Integrated a default format prompt for the chat system, improving user experience by initializing with a predefined prompt. - Updated the prompt generator to handle model selection more robustly, including loading states and fallback options for model selection. - Enhanced UI components for better accessibility and user feedback during prompt generation.
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Copy, FileJson, FileText, MoreHorizontal } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
interface MessageActionsProps {
|
|
content: string;
|
|
role: string;
|
|
}
|
|
|
|
export function MessageActions({ content, role }: MessageActionsProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
const copyMarkdown = () => handleCopy(content);
|
|
|
|
const copyText = () => {
|
|
// Simple strip markdown (can be improved with a library if needed)
|
|
const text = content
|
|
.replace(/#{1,6}\s/g, '') // Headers
|
|
.replace(/(\*\*|__)(.*?)\1/g, '$2') // Bold
|
|
.replace(/(\*|_)(.*?)\1/g, '$2') // Italic
|
|
.replace(/`{3}[\s\S]*?`{3}/g, '$&') // Keep code blocks but maybe strip fences? For now keep raw
|
|
.replace(/`(.+?)`/g, '$1') // Inline code
|
|
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1 ($2)') // Links
|
|
.replace(/>\s/g, ''); // Blockquotes
|
|
handleCopy(text);
|
|
};
|
|
|
|
const copyJson = () => {
|
|
const json = JSON.stringify({ role, content }, null, 2);
|
|
handleCopy(json);
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={copyMarkdown}
|
|
title="Copiar Markdown"
|
|
>
|
|
{copied ? (
|
|
<span className="text-green-500 text-xs font-bold">✓</span>
|
|
) : (
|
|
<Copy className="h-3.5 w-3.5 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6">
|
|
<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={copyText}>
|
|
<FileText className="mr-2 h-4 w-4" />
|
|
<span>Copiar Texto Puro</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={copyJson}>
|
|
<FileJson className="mr-2 h-4 w-4" />
|
|
<span>Copiar JSON</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
}
|
|
|