fluxy-bot 0.8.9 → 0.9.0

package/supervisor/chat/src/components/Chat/MessageBubble.tsx

@@ -8,268 +8,176 @@ import AudioBubble from './AudioBubble';
 import type { StoredAttachment } from '../../hooks/useChat';
 
 interface Props {
-    role: 'user' | 'assistant';
-    content: string;
-    timestamp?: string;
-    hasAttachments?: boolean;
-    audioData?: string;
-    attachments?: StoredAttachment[];
-    onImageClick?: (images: string[], index: number) => void;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp?: string;
+  hasAttachments?: boolean;
+  audioData?: string;
+  attachments?: StoredAttachment[];
+  onImageClick?: (images: string[], index: number) => void;
 }
 
 function formatTime(iso: string): string {
-    try {
-        const d = new Date(iso);
-        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    } catch {
-        return '';
-    }
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
 }
 
 function CopyButton({ text }: { text: string }) {
-    const [copied, setCopied] = useState(false);
-    const handleCopy = async () => {
-        try {
-            await navigator.clipboard.writeText(text);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1500);
-        } catch {
-            /* clipboard not available */
-        }
-    };
-    return (
-        <button
-            onClick={handleCopy}
-            className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-muted-foreground/10 text-muted-foreground/50 hover:text-muted-foreground"
-            title="Copy message"
-        >
-            {copied ? (
-                <Check className="h-3.5 w-3.5" />
-            ) : (
-                <Copy className="h-3.5 w-3.5" />
-            )}
-        </button>
-    );
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* clipboard not available */ }
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-muted-foreground/10 text-muted-foreground/50 hover:text-muted-foreground"
+      title="Copy message"
+    >
+      {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+    </button>
+  );
 }
 
-export default function MessageBubble({
-    role,
-    content,
-    timestamp,
-    hasAttachments,
-    audioData,
-    attachments,
-    onImageClick
-}: Props) {
-    const isUser = role === 'user';
-    const time = timestamp ? formatTime(timestamp) : '';
-
-    // Separate image and document attachments
-    const imageAtts =
-        attachments?.filter(a => a.mediaType?.startsWith('image/')) || [];
-    const docAtts =
-        attachments?.filter(a => !a.mediaType?.startsWith('image/')) || [];
+export default function MessageBubble({ role, content, timestamp, hasAttachments, audioData, attachments, onImageClick }: Props) {
+  const isUser = role === 'user';
+  const time = timestamp ? formatTime(timestamp) : '';
 
-    // Resolve image URLs
-    const imageUrls = imageAtts
-        .filter(a => a.filePath)
-        .map(a =>
-            a.filePath.startsWith('data:')
-                ? a.filePath
-                : `/api/files/${a.filePath}`
-        );
+  // Separate image and document attachments
+  const imageAtts = attachments?.filter((a) => a.mediaType?.startsWith('image/')) || [];
+  const docAtts = attachments?.filter((a) => !a.mediaType?.startsWith('image/')) || [];
 
-    if (isUser) {
-        // Voice message: audio-only, no transcript text
-        if (audioData) {
-            return (
-                <div className="flex flex-col items-end gap-0.5">
-                    <div className="group flex items-start gap-1.5 justify-end">
-                        <CopyButton text={content} />
-                        <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-primary text-primary-foreground">
-                            <AudioBubble audioData={audioData} />
-                        </div>
-                    </div>
-                    {time && (
-                        <span className="text-[10px] text-muted-foreground/50 px-1">
-                            {time}
-                        </span>
-                    )}
-                </div>
-            );
-        }
+  // Resolve image URLs
+  const imageUrls = imageAtts
+    .filter((a) => a.filePath)
+    .map((a) =>
+      a.filePath.startsWith('data:') ? a.filePath : `/api/files/${a.filePath}`
+    );
 
-        return (
-            <div className="flex flex-col items-end gap-0.5">
-                <div className="group flex items-start gap-1.5 justify-end">
-                    <CopyButton text={content} />
-                    <div
-                        className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap bg-primary text-primary-foreground break-words overflow-hidden"
-                        style={{ overflowWrap: 'anywhere' }}
-                    >
-                        {/* Image thumbnails */}
-                        {imageUrls.length > 0 && (
-                            <div className="flex gap-1.5 flex-wrap mb-2">
-                                {imageUrls.map((url, i) => (
-                                    <img
-                                        key={i}
-                                        src={url}
-                                        alt={imageAtts[i]?.name || 'attachment'}
-                                        className="w-28 h-28 rounded-lg object-cover cursor-pointer border border-white/10 hover:opacity-80 transition-opacity"
-                                        role="presentation"
-                                        tabIndex={0}
-                                        onKeyDown={e => {
-                                            if (
-                                                e.key === 'Enter' ||
-                                                e.key === ' '
-                                            ) {
-                                                onImageClick?.(imageUrls, i);
-                                                e.preventDefault();
-                                            }
-                                        }}
-                                        onClick={() =>
-                                            onImageClick?.(imageUrls, i)
-                                        }
-                                    />
-                                ))}
-                            </div>
-                        )}
-                        {/* Document attachments */}
-                        {docAtts.length > 0 && (
-                            <span className="inline-flex items-center gap-1 text-primary-foreground/60 mr-1.5">
-                                <Paperclip className="h-3 w-3" />
-                                {docAtts.length > 1 && (
-                                    <span className="text-xs">
-                                        {docAtts.length}
-                                    </span>
-                                )}
-                            </span>
-                        )}
-                        {/* Fallback paperclip for legacy messages with no parsed attachments */}
-                        {!attachments?.length && hasAttachments && (
-                            <span className="inline-flex items-center gap-1 text-primary-foreground/60 mr-1.5">
-                                <Paperclip className="h-3 w-3" />
-                            </span>
-                        )}
-                        {content}
-                    </div>
-                </div>
-                {time && (
-                    <span className="text-[10px] text-muted-foreground/50 px-1">
-                        {time}
-                    </span>
-                )}
+  if (isUser) {
+    // Voice message: audio-only, no transcript text
+    if (audioData) {
+      return (
+        <div className="flex flex-col items-end gap-0.5">
+          <div className="group flex items-start gap-1.5 justify-end">
+            <CopyButton text={content} />
+            <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-primary text-primary-foreground">
+              <AudioBubble audioData={audioData} />
             </div>
-        );
+          </div>
+          {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
+        </div>
+      );
     }
 
     return (
-        <div className="flex flex-col items-start gap-0.5">
-            <div className="group flex items-start gap-1.5">
-                <div
-                    className="min-w-0 rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 break-words overflow-hidden"
-                    style={{ maxWidth: '92%', overflowWrap: 'anywhere' }}
-                >
-                    <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        components={{
-                            pre({ children }) {
-                                return (
-                                    <pre className="overflow-x-auto my-2">
-                                        {children}
-                                    </pre>
-                                );
-                            },
-                            code({ className, children, ...props }) {
-                                const match = /language-(\w+)/.exec(
-                                    className || ''
-                                );
-                                const code = String(children).replace(
-                                    /\n$/,
-                                    ''
-                                );
-                                if (match) {
-                                    return (
-                                        <SyntaxHighlighter
-                                            style={oneDark}
-                                            language={match[1]}
-                                            PreTag="div"
-                                            customStyle={{
-                                                margin: '0.5rem 0',
-                                                borderRadius: '0.5rem',
-                                                fontSize: '0.8rem',
-                                                overflowX: 'auto'
-                                            }}
-                                        >
-                                            {code}
-                                        </SyntaxHighlighter>
-                                    );
-                                }
-                                return (
-                                    <code
-                                        className="bg-white/10 rounded px-1 py-0.5 text-[0.8rem] break-all"
-                                        style={{
-                                            whiteSpace: 'pre-wrap',
-                                            overflowWrap: 'anywhere'
-                                        }}
-                                        {...props}
-                                    >
-                                        {children}
-                                    </code>
-                                );
-                            },
-                            p({ children }) {
-                                return <p className="my-1.5">{children}</p>;
-                            },
-                            ul({ children }) {
-                                return (
-                                    <ul className="my-1.5 pl-4 list-disc">
-                                        {children}
-                                    </ul>
-                                );
-                            },
-                            ol({ children }) {
-                                return (
-                                    <ol className="my-1.5 pl-4 list-decimal">
-                                        {children}
-                                    </ol>
-                                );
-                            },
-                            table({ children }) {
-                                return (
-                                    <div className="overflow-x-auto my-2">
-                                        <table className="border-collapse text-xs">
-                                            {children}
-                                        </table>
-                                    </div>
-                                );
-                            },
-                            th({ children }) {
-                                return (
-                                    <th className="border border-white/10 px-2 py-1 text-left bg-white/5">
-                                        {children}
-                                    </th>
-                                );
-                            },
-                            td({ children }) {
-                                return (
-                                    <td className="border border-white/10 px-2 py-1">
-                                        {children}
-                                    </td>
-                                );
-                            }
-                        }}
-                    >
-                        {content}
-                    </ReactMarkdown>
-                </div>
-                <CopyButton text={content} />
-            </div>
-            {time && (
-                <span className="text-[10px] text-muted-foreground/50 px-1">
-                    {time}
-                </span>
+      <div className="flex flex-col items-end gap-0.5">
+        <div className="group flex items-start gap-1.5 justify-end">
+          <CopyButton text={content} />
+          <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap bg-primary text-primary-foreground break-words overflow-hidden" style={{ overflowWrap: 'anywhere' }}>
+            {/* Image thumbnails */}
+            {imageUrls.length > 0 && (
+              <div className="flex gap-1.5 flex-wrap mb-2">
+                {imageUrls.map((url, i) => (
+                  <img
+                    key={i}
+                    src={url}
+                    alt={imageAtts[i]?.name || 'attachment'}
+                    className="w-28 h-28 rounded-lg object-cover cursor-pointer border border-white/10 hover:opacity-80 transition-opacity"
+                    onClick={() => onImageClick?.(imageUrls, i)}
+                  />
+                ))}
+              </div>
+            )}
+            {/* Document attachments */}
+            {docAtts.length > 0 && (
+              <span className="inline-flex items-center gap-1 text-primary-foreground/60 mr-1.5">
+                <Paperclip className="h-3 w-3" />
+                {docAtts.length > 1 && <span className="text-xs">{docAtts.length}</span>}
+              </span>
             )}
+            {/* Fallback paperclip for legacy messages with no parsed attachments */}
+            {!attachments?.length && hasAttachments && (
+              <span className="inline-flex items-center gap-1 text-primary-foreground/60 mr-1.5">
+                <Paperclip className="h-3 w-3" />
+              </span>
+            )}
+            {content}
+          </div>
         </div>
+        {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
+      </div>
     );
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-0.5">
+      <div className="group flex items-start gap-1.5">
+      <div className="min-w-0 rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 break-words overflow-hidden" style={{ maxWidth: '92%', overflowWrap: 'anywhere' }}>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            pre({ children }) {
+              return <pre className="overflow-x-auto my-2">{children}</pre>;
+            },
+            code({ className, children, ...props }) {
+              const match = /language-(\w+)/.exec(className || '');
+              const code = String(children).replace(/\n$/, '');
+              if (match) {
+                return (
+                  <SyntaxHighlighter
+                    style={oneDark}
+                    language={match[1]}
+                    PreTag="div"
+                    customStyle={{ margin: '0.5rem 0', borderRadius: '0.5rem', fontSize: '0.8rem', overflowX: 'auto' }}
+                  >
+                    {code}
+                  </SyntaxHighlighter>
+                );
+              }
+              return (
+                <code className="bg-white/10 rounded px-1 py-0.5 text-[0.8rem] break-all" style={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }} {...props}>
+                  {children}
+                </code>
+              );
+            },
+            p({ children }) {
+              return <p className="my-1.5">{children}</p>;
+            },
+            ul({ children }) {
+              return <ul className="my-1.5 pl-4 list-disc">{children}</ul>;
+            },
+            ol({ children }) {
+              return <ol className="my-1.5 pl-4 list-decimal">{children}</ol>;
+            },
+            table({ children }) {
+              return (
+                <div className="overflow-x-auto my-2">
+                  <table className="border-collapse text-xs">{children}</table>
+                </div>
+              );
+            },
+            th({ children }) {
+              return <th className="border border-white/10 px-2 py-1 text-left bg-white/5">{children}</th>;
+            },
+            td({ children }) {
+              return <td className="border border-white/10 px-2 py-1">{children}</td>;
+            },
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+      <CopyButton text={content} />
+      </div>
+      {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
+    </div>
+  );
 }