forked from hangshuo652/aurak
feat: implement QuestionBank CRUD with pagination and template query
- Add pagination support to findAll (page, limit query params) - Add findByTemplateId method to service - Add GET /by-template/:templateId endpoint to controller - Service already includes CRUD for QuestionBank and QuestionBankItem
This commit is contained in:
Developer
@@ -0,0 +1,250 @@
|
||||
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">
|
||||
“{source.content}”
|
||||
</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')} →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatMessage;
|
||||
Reference in New Issue
Block a user