| "use client"; |
|
|
| import { Button } from "@/components/ui/button"; |
| import type { Message } from "@/lib/types"; |
| import { cn } from "@/lib/utils"; |
| import { Bot, FileText, Star, User, Copy, Check } from "lucide-react"; |
| import { useState } from "react"; |
| import ReactMarkdown from "react-markdown"; |
| import { useToast } from "@/hooks/use-toast"; |
|
|
| type Props = { |
| message: Message; |
| handleTranscriptClick: (transcript: Message["transcripts"][0]) => void; |
| onEvaluate: () => void; |
| }; |
|
|
| const MessageBlock = ({ |
| message, |
| handleTranscriptClick, |
| onEvaluate, |
| }: Props) => { |
| const Icon = message.role === "user" ? User : Bot; |
| const role = message.role === "user" ? "You" : "AI Assistant"; |
| const [copied, setCopied] = useState(false); |
|
|
| const { toast } = useToast(); |
|
|
| const handleCopy = async () => { |
| await navigator.clipboard.writeText(message.content); |
| setCopied(true); |
| setTimeout(() => setCopied(false), 2000); |
| toast({ |
| title: "Copied to clipboard", |
| description: "The response has been copied successfully.", |
| }); |
| }; |
|
|
| return ( |
| <div className="w-full"> |
| <div |
| className={cn( |
| "rounded-2xl p-4 sm:p-6 transition-all duration-200", |
| "max-w-full overflow-x-auto break-words", // Prevent overflow on mobile |
| message.role === "user" |
| ? "bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 ml-0 sm:ml-12" |
| : "bg-gradient-to-br from-card to-card/50 border border-border/50 mr-0 sm:mr-12" |
| )} |
| style={{ wordBreak: "break-word" }} // Extra safety for long words |
| > |
| <div |
| className={cn( |
| "flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4", |
| message.role === "assistant" ? "justify-start" : "justify-end" |
| )} |
| > |
| <div |
| className={cn( |
| "flex items-center gap-2", |
| message.role === "user" && "flex-row-reverse" |
| )} |
| > |
| <div |
| className={cn( |
| "w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center flex-shrink-0", |
| message.role === "user" |
| ? "bg-primary text-primary-foreground" |
| : "bg-gradient-to-br from-blue-500 to-purple-600 text-white" |
| )} |
| > |
| <Icon className="h-3.5 w-3.5 sm:h-4 sm:w-4" /> |
| </div> |
| <div |
| className={cn( |
| "flex flex-col", |
| message.role === "user" ? "items-end" : "items-start" |
| )} |
| > |
| <span className="font-medium text-xs sm:text-sm">{role}</span> |
| <span className="text-xs text-muted-foreground"> |
| {message.timestamp.toLocaleTimeString()} |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| <div |
| className={cn( |
| "prose prose-sm dark:prose-invert max-w-full text-sm sm:text-base", // max-w-full for mobile |
| message.role === "user" ? "text-right" : "text-left" |
| )} |
| style={{ wordBreak: "break-word" }} // Extra safety for markdown content |
| > |
| <ReactMarkdown |
| components={{ |
| a: ({ href, children, ...props }) => ( |
| <a |
| href={href} |
| target="_blank" |
| rel="noopener noreferrer" |
| {...props} |
| > |
| {children} |
| </a> |
| ), |
| }} |
| > |
| {message.content} |
| </ReactMarkdown> |
| </div> |
| |
| {message.transcripts.length > 0 && ( |
| <div className="flex flex-wrap mt-4 sm:mt-6 gap-2"> |
| {message.transcripts.map((transcript) => ( |
| <Button |
| key={transcript.id} |
| variant="secondary" |
| size="sm" |
| className="text-xs h-auto min-h-7 sm:min-h-8 bg-muted/50 hover:bg-muted border border-border/50 transition-all duration-200 hover:scale-105 py-2 max-w-full overflow-x-auto" |
| onClick={() => handleTranscriptClick(transcript)} |
| style={{ wordBreak: "break-word" }} |
| > |
| <FileText className="mr-1 sm:mr-1.5 w-3" /> |
| <span className="text-start whitespace-normal break-words"> |
| {transcript.filename} @ {transcript.timestamp} |
| </span> |
| </Button> |
| ))} |
| </div> |
| )} |
| |
| {message.role === "assistant" && ( |
| <div className="mt-4 sm:mt-6 flex flex-col sm:flex-row justify-start gap-2"> |
| {/* <Button |
| onClick={onEvaluate} |
| variant="ghost" |
| size="sm" |
| className="h-8 text-xs hover:bg-accent/50 transition-all duration-200 justify-start sm:justify-center" |
| > |
| <Star className="h-3.5 w-3.5 mr-1.5" /> |
| Rate Answer |
| </Button> */} |
| <Button |
| variant="ghost" |
| size="sm" |
| className="h-8 text-xs hover:bg-accent/50 transition-all duration-200 justify-start sm:justify-center" |
| onClick={handleCopy} |
| > |
| {copied ? ( |
| <Check className="h-3.5 w-3.5 mr-1.5 text-green-500" /> |
| ) : ( |
| <Copy className="h-3.5 w-3.5 mr-1.5" /> |
| )} |
| {copied ? "Copied!" : "Copy Response"} |
| </Button> |
| </div> |
| )} |
| </div> |
| </div> |
| ); |
| }; |
|
|
| export default MessageBlock; |
|
|
