| 'use client'; |
|
|
| import { useMemo, useState, useCallback } from 'react'; |
| import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; |
| import { Copy, Check, Play, Square, Edit2, X } from 'lucide-react'; |
| import Editor from '@monaco-editor/react'; |
| import { clsx } from 'clsx'; |
| import { QubitIcon } from './QubitIcon'; |
| import { ExecutionResult, ExecutionResultData } from './ExecutionResult'; |
| import { MarkdownContent } from './MarkdownContent'; |
| import { ExpandableImage } from '../ui/ImageLightbox'; |
| import type { Message as MessageType } from '@/types'; |
|
|
| interface MessageProps { |
| message: MessageType; |
| onCopyCode?: (code: string) => void; |
| loadingStatus?: React.ReactNode; |
| } |
|
|
| |
| const customTheme: { [key: string]: React.CSSProperties } = { |
| 'code[class*="language-"]': { |
| color: '#d4d4d8', |
| background: 'none', |
| fontFamily: "'JetBrains Mono', Consolas, Monaco, 'Andale Mono', monospace", |
| fontSize: '0.875rem', |
| textAlign: 'left', |
| whiteSpace: 'pre', |
| wordSpacing: 'normal', |
| wordBreak: 'normal', |
| wordWrap: 'normal', |
| lineHeight: '1.6', |
| tabSize: 4, |
| hyphens: 'none', |
| }, |
| 'pre[class*="language-"]': { |
| color: '#d4d4d8', |
| background: '#18181b', |
| fontFamily: "'JetBrains Mono', Consolas, Monaco, 'Andale Mono', monospace", |
| fontSize: '0.875rem', |
| textAlign: 'left', |
| whiteSpace: 'pre', |
| wordSpacing: 'normal', |
| wordBreak: 'normal', |
| wordWrap: 'normal', |
| lineHeight: '1.6', |
| tabSize: 4, |
| hyphens: 'none', |
| padding: '1rem', |
| margin: '0', |
| overflow: 'auto', |
| borderRadius: '0.5rem', |
| }, |
| comment: { color: '#71717a' }, |
| prolog: { color: '#71717a' }, |
| doctype: { color: '#71717a' }, |
| cdata: { color: '#71717a' }, |
| punctuation: { color: '#a1a1aa' }, |
| namespace: { opacity: 0.7 }, |
| property: { color: '#f0abfc' }, |
| tag: { color: '#f0abfc' }, |
| boolean: { color: '#c4b5fd' }, |
| number: { color: '#c4b5fd' }, |
| constant: { color: '#c4b5fd' }, |
| symbol: { color: '#c4b5fd' }, |
| deleted: { color: '#fca5a5' }, |
| selector: { color: '#86efac' }, |
| 'attr-name': { color: '#fcd34d' }, |
| string: { color: '#86efac' }, |
| char: { color: '#86efac' }, |
| builtin: { color: '#86efac' }, |
| inserted: { color: '#86efac' }, |
| operator: { color: '#f0abfc' }, |
| entity: { color: '#fcd34d', cursor: 'help' }, |
| url: { color: '#67e8f9' }, |
| '.language-css .token.string': { color: '#67e8f9' }, |
| '.style .token.string': { color: '#67e8f9' }, |
| variable: { color: '#d4d4d8' }, |
| atrule: { color: '#93c5fd' }, |
| 'attr-value': { color: '#86efac' }, |
| function: { color: '#93c5fd' }, |
| 'class-name': { color: '#93c5fd' }, |
| keyword: { color: '#c4b5fd' }, |
| regex: { color: '#fcd34d' }, |
| important: { color: '#fcd34d', fontWeight: 'bold' }, |
| bold: { fontWeight: 'bold' }, |
| italic: { fontStyle: 'italic' }, |
| }; |
|
|
| function isPythonCode(language: string, code: string): boolean { |
| if (language === 'python') return true; |
|
|
| const pythonPatterns = [ |
| /^from\s+\w+\s+import/m, |
| /^import\s+\w+/m, |
| /^def\s+\w+\s*\(/m, |
| /^class\s+\w+/m, |
| /QuantumCircuit/, |
| /qiskit/i, |
| ]; |
|
|
| return pythonPatterns.some(p => p.test(code)); |
| } |
|
|
| function CodeBlock({ |
| language, |
| code: initialCode, |
| onCopy, |
| }: { |
| language: string; |
| code: string; |
| onCopy?: (code: string) => void; |
| }) { |
| const [copied, setCopied] = useState(false); |
| const [isExecuting, setIsExecuting] = useState(false); |
| const [isEditing, setIsEditing] = useState(false); |
| const [editedCode, setEditedCode] = useState(initialCode); |
| const [executionResult, setExecutionResult] = useState<ExecutionResultData | null>(null); |
|
|
| |
| const code = isEditing ? editedCode : initialCode; |
|
|
| const handleCopy = async () => { |
| await navigator.clipboard.writeText(code); |
| setCopied(true); |
| onCopy?.(code); |
| setTimeout(() => setCopied(false), 2000); |
| }; |
|
|
| const handleExecute = useCallback(async () => { |
| if (isExecuting) return; |
|
|
| setIsExecuting(true); |
| setExecutionResult(null); |
|
|
| try { |
| const response = await fetch('/api/execute', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ code, timeout: 30 }), |
| }); |
|
|
| const result = await response.json(); |
| setExecutionResult(result); |
| } catch (error) { |
| setExecutionResult({ |
| success: false, |
| output: '', |
| error: error instanceof Error ? error.message : 'Execution failed', |
| executionTime: 0, |
| hasCircuitOutput: false, |
| }); |
| } finally { |
| setIsExecuting(false); |
| } |
| }, [code, isExecuting]); |
|
|
| const handleStopExecution = () => { |
| setIsExecuting(false); |
| }; |
|
|
| const handleToggleEdit = () => { |
| if (isEditing) { |
| |
| setIsEditing(false); |
| } else { |
| |
| setEditedCode(initialCode); |
| setIsEditing(true); |
| } |
| }; |
|
|
| const handleCancelEdit = () => { |
| setEditedCode(initialCode); |
| setIsEditing(false); |
| }; |
|
|
| const detectedLanguage = language || detectLanguage(code); |
| const canExecute = isPythonCode(detectedLanguage, code); |
| |
| |
| const lineCount = code.split('\n').length; |
| const editorHeight = Math.min(Math.max(lineCount * 20 + 32, 100), 400); |
|
|
| return ( |
| <div className="relative group my-3 code-block-wrapper"> |
| {/* Action buttons */} |
| <div className="absolute right-2 top-2 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity z-10"> |
| <span className="text-xs text-zinc-500 bg-zinc-800 px-2 py-0.5 rounded"> |
| {detectedLanguage || 'code'} |
| </span> |
| |
| {/* Edit toggle */} |
| <button |
| onClick={isEditing ? handleCancelEdit : handleToggleEdit} |
| className={clsx( |
| 'flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-all', |
| isEditing |
| ? 'bg-amber-600/20 text-amber-400 hover:bg-amber-600/30' |
| : 'bg-zinc-700/50 text-zinc-400 hover:bg-zinc-700' |
| )} |
| title={isEditing ? 'Cancel editing' : 'Edit code'} |
| > |
| {isEditing ? ( |
| <> |
| <X className="w-3 h-3" /> |
| <span>Cancel</span> |
| </> |
| ) : ( |
| <> |
| <Edit2 className="w-3 h-3" /> |
| <span>Edit</span> |
| </> |
| )} |
| </button> |
|
|
| {canExecute && ( |
| <button |
| onClick={isExecuting ? handleStopExecution : handleExecute} |
| disabled={isExecuting} |
| className={clsx( |
| 'flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-all', |
| isExecuting |
| ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30' |
| : 'bg-teal-600/20 text-teal-400 hover:bg-teal-600/30' |
| )} |
| title={isExecuting ? 'Stop execution' : 'Run code'} |
| > |
| {isExecuting ? ( |
| <> |
| <Square className="w-3 h-3" /> |
| <span>Stop</span> |
| </> |
| ) : ( |
| <> |
| <Play className="w-3 h-3" /> |
| <span>Run</span> |
| </> |
| )} |
| </button> |
| )} |
|
|
| <button |
| onClick={handleCopy} |
| className="p-1.5 rounded bg-zinc-800 hover:bg-zinc-700 transition-colors" |
| title="Copy code" |
| > |
| {copied ? ( |
| <Check className="w-3.5 h-3.5 text-emerald-400" /> |
| ) : ( |
| <Copy className="w-3.5 h-3.5 text-zinc-400" /> |
| )} |
| </button> |
| </div> |
|
|
| {isEditing ? ( |
| |
| <div |
| className="rounded-lg overflow-hidden border border-amber-600/30" |
| style={{ height: editorHeight }} |
| > |
| <Editor |
| height="100%" |
| language={detectedLanguage || 'python'} |
| value={editedCode} |
| onChange={(value) => setEditedCode(value || '')} |
| theme="vs-dark" |
| options={{ |
| fontSize: 14, |
| fontFamily: "'JetBrains Mono', Consolas, Monaco, monospace", |
| minimap: { enabled: false }, |
| scrollBeyondLastLine: false, |
| lineNumbers: 'on', |
| glyphMargin: false, |
| folding: false, |
| lineDecorationsWidth: 8, |
| lineNumbersMinChars: 3, |
| padding: { top: 12, bottom: 12 }, |
| renderLineHighlight: 'line', |
| tabSize: 4, |
| insertSpaces: true, |
| wordWrap: 'on', |
| automaticLayout: true, |
| }} |
| /> |
| </div> |
| ) : ( |
| |
| <SyntaxHighlighter |
| style={customTheme} |
| language={detectedLanguage || 'python'} |
| PreTag="div" |
| customStyle={{ |
| margin: 0, |
| borderRadius: '0.5rem', |
| background: '#18181b', |
| padding: '1rem', |
| fontSize: '0.875rem', |
| border: '1px solid #27272a', |
| lineHeight: '1.6', |
| }} |
| codeTagProps={{ |
| style: { |
| background: 'none', |
| padding: 0, |
| }, |
| }} |
| wrapLongLines={false} |
| > |
| {code} |
| </SyntaxHighlighter> |
| )} |
|
|
| {} |
| {(isExecuting || executionResult) && ( |
| <ExecutionResult |
| result={executionResult || { success: false, output: '', error: '', executionTime: 0 }} |
| isLoading={isExecuting} |
| /> |
| )} |
| </div> |
| ); |
| } |
|
|
| function detectLanguage(code: string): string { |
| const pythonPatterns = [ |
| /^from\s+\w+\s+import/m, |
| /^import\s+\w+/m, |
| /^def\s+\w+\s*\(/m, |
| /^class\s+\w+/m, |
| /QuantumCircuit/, |
| /qiskit/i, |
| /\.measure/, |
| /numpy|np\./, |
| /print\s*\(/, |
| ]; |
|
|
| if (pythonPatterns.some((p) => p.test(code))) { |
| return 'python'; |
| } |
|
|
| const jsPatterns = [ |
| /^const\s+\w+\s*=/m, |
| /^let\s+\w+\s*=/m, |
| /^function\s+\w+/m, |
| /=>\s*{/, |
| /console\.log/, |
| ]; |
|
|
| if (jsPatterns.some((p) => p.test(code))) { |
| return 'javascript'; |
| } |
|
|
| const bashPatterns = [/^\$\s+/m, /^#!\/bin\/(ba)?sh/m, /\|\s*grep/, /apt-get|pip\s+install/]; |
|
|
| if (bashPatterns.some((p) => p.test(code))) { |
| return 'bash'; |
| } |
|
|
| return 'python'; |
| } |
|
|
| export function Message({ message, onCopyCode, loadingStatus }: MessageProps) { |
| const isUser = message.role === 'user'; |
| const isLoading = message.isLoading; |
|
|
| const avatar = useMemo(() => { |
| if (isUser) { |
| return ( |
| <div className="w-8 h-8 rounded-md bg-zinc-800 flex items-center justify-center border border-zinc-700/50"> |
| <span className="text-[10px] font-bold text-zinc-400 font-mono">YOU</span> |
| </div> |
| ); |
| } |
| return ( |
| <div className="w-8 h-8 rounded-md bg-zinc-800 flex items-center justify-center border border-teal-700/40"> |
| <QubitIcon size={18} className="text-teal-400" /> |
| </div> |
| ); |
| }, [isUser]); |
|
|
| const imageSource = |
| message.imageUrl || (message.imageBase64 ? `data:image/jpeg;base64,${message.imageBase64}` : null); |
|
|
| return ( |
| <div className={clsx('flex gap-3 animate-in', isUser ? 'flex-row-reverse' : 'flex-row')}> |
| <div className="flex-shrink-0">{avatar}</div> |
| |
| <div className={clsx('flex-1 max-w-[85%]', isUser ? 'flex flex-col items-end' : '')}> |
| {imageSource && ( |
| <div className="mb-2 max-w-xs"> |
| <ExpandableImage |
| src={imageSource} |
| alt="Attached image" |
| className="max-h-64 w-full object-contain" |
| /> |
| </div> |
| )} |
| |
| <div |
| className={clsx( |
| 'rounded-xl px-4 py-3', |
| isUser |
| ? 'bg-teal-700/80 text-white rounded-tr-sm' |
| : 'bg-zinc-800/90 border border-zinc-700/50 rounded-tl-sm' |
| )} |
| > |
| {isLoading ? ( |
| loadingStatus || ( |
| <div className="typing-indicator py-1"> |
| <span /> |
| <span /> |
| <span /> |
| </div> |
| ) |
| ) : ( |
| <MarkdownContent |
| content={message.content} |
| className={isUser ? 'text-white/90' : undefined} |
| renderCodeBlock={({ language, code }) => ( |
| <CodeBlock language={language} code={code} onCopy={onCopyCode} /> |
| )} |
| /> |
| )} |
| </div> |
| |
| <span className="text-xs text-zinc-500 mt-1 px-2"> |
| {message.timestamp.toLocaleTimeString([], { |
| hour: '2-digit', |
| minute: '2-digit', |
| })} |
| </span> |
| </div> |
| </div> |
| ); |
| } |
|
|
