KnowledgeBase/web/components/ChatMessage.tsx

import React, { useState } from 'react';
import { copyToClipboard } from '../utils/clipboard';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Message, Role } from '../types';
import { Bot, User, AlertCircle, Copy, Check, Search, ChevronDown, ChevronRight, Sparkles } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLanguage } from '../contexts/LanguageContext';
import { ChatSource } from '../types';

interface ChatMessageProps {
  message: Message;
  onPreviewSource?: (source: ChatSource) => void;
  onOpenFile?: (source: ChatSource) => void;
}

const ChatMessage: React.FC<ChatMessageProps> = ({ message, onPreviewSource, onOpenFile }) => {
  const { t } = useLanguage();
  const isUser = message.role === Role.USER;
  const [copied, setCopied] = useState(false);
  const [sourcesExpanded, setSourcesExpanded] = useState(false);

  const handleCopy = async () => {
    const success = await copyToClipboard(message.text);
    if (success) {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  const renderContent = (content: string) => {
    return (
      <div className="markdown-body text-[15px] leading-[1.6] tracking-tight">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          components={{
            code({ node, inline, className, children, ...props }: any) {
              const match = /language-(\w+)/.exec(className || '');
              const language = match ? match[1] : '';

              if (language === 'mermaid') {
                return (
                  <div className="my-6 p-5 bg-slate-900/5 border border-slate-200 rounded-2xl overflow-x-auto shadow-inner">
                    <pre className="text-xs text-slate-600 font-mono whitespace-pre-wrap">
                      {String(children).replace(/\n$/, '')}
                    </pre>
                    <div className="flex items-center gap-2 text-[10px] text-slate-400 mt-4 font-bold uppercase tracking-wider">
                      <div className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[8px]">M</div>
                      Mermaid diagram rendering
                    </div>
                  </div>
                );
              }

              if (!inline && match) {
                return (
                  <div className="my-5 group/code">
                    <div className="flex items-center justify-between bg-slate-800 text-slate-300 px-4 py-2 rounded-t-xl text-[10px] font-bold uppercase tracking-widest border-b border-white/5">
                      <span className="font-mono">{language}</span>
                      <span className="opacity-0 group-hover/code:opacity-100 transition-opacity text-[10px]">Code Block</span>
                    </div>
                    <pre className="bg-[#1E293B] text-slate-100 p-4 rounded-b-xl overflow-x-auto border border-t-0 border-slate-800 shadow-lg">
                      <code className={className} {...props}>
                        {children}
                      </code>
                    </pre>
                  </div>
                );
              }

              return (
                <code className="bg-blue-50 text-blue-700 rounded-md px-1.5 py-0.5 text-xs font-mono font-bold" {...props}>
                  {children}
                </code>
              );
            },
            h1: ({ children }) => (
              <h1 className="text-2xl font-bold mt-8 mb-4 text-slate-900 border-b pb-2 border-slate-100">{children}</h1>
            ),
            h2: ({ children }) => (
              <h2 className="text-xl font-bold mt-6 mb-3 text-slate-800 flex items-start gap-2">
                <div className="w-1 h-5 bg-blue-500 rounded-full mt-1 shrink-0" />
                <span className="break-words min-w-0">{children}</span>
              </h2>
            ),
            h3: ({ children }) => (
              <h3 className="text-lg font-bold mt-5 mb-2 text-slate-800 tracking-tight">{children}</h3>
            ),
            ul: ({ children }) => (
              <ul className="list-disc list-outside ml-5 space-y-2 my-4 text-slate-700">{children}</ul>
            ),
            ol: ({ children }) => (
              <ol className="list-decimal list-outside ml-5 space-y-2 my-4 text-slate-700">{children}</ol>
            ),
            li: ({ children }) => (
              <li className="pl-1">{children}</li>
            ),
            p: ({ children }) => (
              <p className="my-3 leading-[1.7] last:mb-0">{children}</p>
            ),
            table: ({ children }) => (
              <div className="overflow-x-auto my-6 border border-slate-200 rounded-xl shadow-sm">
                <table className="min-w-full divide-y divide-slate-200">{children}</table>
              </div>
            ),
            th: ({ children }) => (
              <th className="border-b border-slate-200 bg-slate-50/80 px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-slate-500">{children}</th>
            ),
            td: ({ children }) => (
              <td className="px-4 py-3 text-sm text-slate-600 border-b border-slate-50">{children}</td>
            ),
            blockquote: ({ children }) => (
              <blockquote className="border-l-4 border-blue-200 bg-blue-50/30 px-5 py-3 my-5 rounded-r-xl italic text-slate-600">
                {children}
              </blockquote>
            ),
          }}
        >
          {content}
        </ReactMarkdown>
      </div>
    );
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      className={`flex w-full ${isUser ? 'justify-end' : 'justify-start'} mb-2`}
    >
      <div className={`flex max-w-[90%] md:max-w-[85%] gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>

        {/* Avatar */}
        <div className={`shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all ${isUser ? 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-blue-200 shadow-md' : 'bg-white border border-slate-200 text-indigo-600 shadow-sm'
          }`}>
          {isUser ? <User className="w-5 h-5" /> : <Sparkles className="w-5 h-5" />}
        </div>

        {/* Message Bubble + Sources */}
        <div className={`flex flex-col ${isUser ? 'items-end' : 'items-start'} group max-w-full`}>
          <div className={`relative px-6 py-4 rounded-[24px] shadow-sm transition-all duration-300 ${isUser
            ? 'bg-gradient-to-br from-blue-600 to-indigo-700 text-white rounded-tr-none shadow-blue-200/50 hover:shadow-lg hover:shadow-blue-200/50'
            : message.isError
              ? 'bg-red-50 border border-red-200 text-red-700 rounded-tl-none'
              : 'bg-white/80 backdrop-blur-md border border-slate-200/60 text-slate-800 rounded-tl-none hover:shadow-md hover:border-slate-300/50'
            }`}>
            {message.isError && (
              <div className="flex items-center gap-2 mb-3 text-red-600 font-bold uppercase text-[10px] tracking-widest">
                <AlertCircle className="w-4 h-4" />
                <span>{t('errorLabel')}</span>
              </div>
            )}
            <div className={`${isUser ? 'text-blue-50' : 'text-slate-800'}`}>
              {renderContent(message.text)}
            </div>

            {/* Copy Button (Always visible, icon only) */}
            <div className={`flex justify-end mt-3 pt-3 border-t ${isUser ? 'border-white/10' : 'border-slate-100/50'}`}>
              <button
                onClick={handleCopy}
                className={`flex items-center justify-center p-2 rounded-lg transition-all ${isUser
                  ? 'text-blue-200 hover:bg-white/10 hover:text-white'
                  : 'text-slate-400 hover:bg-slate-50 hover:text-indigo-600'
                  }`}
                title={copied ? t('copied') : t('copy')}
              >
                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
              </button>
            </div>
          </div>

          {/* Timestamp */}
          <span className="text-[10px] font-bold text-slate-400/80 mt-1.5 px-2 uppercase tracking-tight">
            {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
          </span>

          {!isUser && message.sources && message.sources.length > 0 && (
            <div className="mt-4 w-full pt-2">
              <button
                onClick={() => setSourcesExpanded(!sourcesExpanded)}
                className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-slate-500 hover:text-indigo-600 transition-all mb-3 group/btn"
              >
                <div className={`flex items-center justify-center w-5 h-5 rounded-full border border-slate-200 transition-transform ${sourcesExpanded ? 'rotate-90' : 'rotate-0'}`}>
                  <ChevronRight className="w-3 h-3" />
                </div>
                <div className="flex items-center gap-1.5">
                  <Search className="w-3 h-3" />
                  <span>{t('citationSources')} ({message.sources.length})</span>
                </div>
              </button>

              <AnimatePresence>
                {sourcesExpanded && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: 'auto' }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{ duration: 0.3, ease: "easeInOut" }}
                    className="grid gap-3 w-full overflow-hidden"
                  >
                    {message.sources.map((source, index) => (
                      <div
                        key={`${source.fileName}-${source.chunkIndex}-${index}`}
                        className="bg-white/60 hover:bg-white border border-slate-200/60 rounded-xl p-4 transition-all cursor-pointer hover:shadow-lg hover:shadow-indigo-500/5 hover:border-indigo-200 group/source relative overflow-hidden"
                        onClick={() => onPreviewSource?.(source)}
                      >
                        <div className="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500 opacity-0 group-hover/source:opacity-100 transition-opacity" />
                        <div className="flex justify-between items-start mb-2.5">
                          {source.fileId ? (
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                onOpenFile?.(source);
                              }}
                              className="font-bold text-slate-900 text-[13px] truncate pr-3 hover:text-indigo-600 transition-colors text-left"
                              title={source.fileName}
                            >
                              {source.fileName}
                            </button>
                          ) : (
                            <div className="font-bold text-slate-900 text-[13px] truncate pr-3" title={source.fileName}>{source.fileName}</div>
                          )}
                          <div className="text-[10px] font-black bg-indigo-50 text-indigo-700 px-2.5 py-1 rounded-full shrink-0 border border-indigo-100 shadow-sm uppercase tracking-tighter">
                            {(source.score * 100).toFixed(1)}%
                          </div>
                        </div>
                        <div className="text-slate-600 text-sm leading-relaxed line-clamp-2 italic font-medium">
                          &ldquo;{source.content}&rdquo;
                        </div>
                        <div className="text-[10px] font-bold text-slate-400 mt-3 flex justify-between items-center uppercase tracking-widest">
                          <span>{t('chunkNumber')} #{source.chunkIndex + 1}</span>
                          <span className="text-indigo-600 opacity-0 group-hover/source:opacity-100 transition-all transform translate-x-2 group-hover/source:translate-x-0 flex items-center gap-1">
                            {t('sourcePreview')} &rarr;
                          </span>
                        </div>
                      </div>
                    ))}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          )}
        </div>
      </div>
    </motion.div>
  );
};

export default ChatMessage;