@standardagents/cli 0.10.1-next.bbd142a → 0.11.0-next.7711e15

package/chat/src/components/MessageList.tsx

@@ -0,0 +1,850 @@
+'use client'
+
+import { useEffect, useRef, useMemo, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { useThread } from '@standardagents/react'
+import type { Message, WorkMessage, ThreadMessage } from '@standardagents/react'
+import { Markdown } from './Markdown'
+
+// Get API config
+function getApiConfig() {
+  const isVite = typeof import.meta !== 'undefined' && import.meta.env
+  const baseUrl = isVite
+    ? (import.meta.env.VITE_AGENTBUILDER_URL || '')
+    : (process.env.NEXT_PUBLIC_AGENTBUILDER_URL || '')
+
+  // Token is stored in localStorage by auth flow
+  const token = typeof localStorage !== 'undefined'
+    ? localStorage.getItem('agentbuilder_auth_token') || ''
+    : ''
+
+  return { baseUrl, token }
+}
+
+// Attachment type from API response
+interface Attachment {
+  id: string
+  type: 'file'
+  path: string
+  name: string
+  mimeType: string
+  size?: number
+  width?: number
+  height?: number
+  description?: string
+  localPreviewUrl?: string // Optimistic preview data URL for images
+}
+
+// Extended message type with attachments
+interface MessageWithAttachments extends Message {
+  attachments?: Attachment[] | null
+}
+
+// Type guard to check if a message is a WorkMessage
+function isWorkMessage(msg: ThreadMessage): msg is WorkMessage {
+  return 'type' in msg && msg.type === 'workblock'
+}
+
+// Get the API endpoint from environment
+function getApiEndpoint(): string {
+  const isVite = typeof import.meta !== 'undefined' && import.meta.env
+  return isVite
+    ? (import.meta.env.VITE_AGENTBUILDER_URL || '')
+    : (process.env.NEXT_PUBLIC_AGENTBUILDER_URL || '')
+}
+
+// Type for OpenAI-style multipart content
+interface TextContent {
+  type: 'text'
+  text: string
+}
+
+interface ImageUrlContent {
+  type: 'image_url'
+  image_url: {
+    url: string
+    detail?: 'low' | 'high' | 'auto'
+  }
+}
+
+type ContentPart = TextContent | ImageUrlContent
+
+// Parse message content - handles both string and multipart array formats
+function parseMessageContent(content: string | null): { text: string | null; images: string[] } {
+  if (!content) return { text: null, images: [] }
+
+  // Try to parse as JSON array (multipart content - OpenAI format)
+  try {
+    const parsed = JSON.parse(content)
+    if (Array.isArray(parsed)) {
+      const texts: string[] = []
+      const images: string[] = []
+
+      for (const part of parsed as ContentPart[]) {
+        if (part.type === 'text' && 'text' in part) {
+          texts.push(part.text)
+        } else if (part.type === 'image_url' && 'image_url' in part) {
+          images.push(part.image_url.url)
+        }
+      }
+
+      return {
+        text: texts.length > 0 ? texts.join('\n') : null,
+        images
+      }
+    }
+  } catch {
+    // Not JSON, continue with text parsing
+  }
+
+  // Check for inline base64 images or image URLs in the text
+  const images: string[] = []
+  let textContent = content
+
+  // Extract markdown images: ![alt](url)
+  const markdownImageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g
+  let match
+  while ((match = markdownImageRegex.exec(content)) !== null) {
+    images.push(match[2])
+  }
+  // Remove markdown images from text
+  textContent = textContent.replace(markdownImageRegex, '')
+
+  // Extract standalone image URLs (common image extensions)
+  const imageUrlRegex = /(?:^|\s)(https?:\/\/[^\s]+\.(?:png|jpg|jpeg|gif|webp|svg)(?:\?[^\s]*)?)/gi
+  while ((match = imageUrlRegex.exec(content)) !== null) {
+    if (!images.includes(match[1])) {
+      images.push(match[1])
+    }
+  }
+
+  // Extract base64 data URLs
+  const base64Regex = /(data:image\/[^;]+;base64,[^\s]+)/g
+  while ((match = base64Regex.exec(content)) !== null) {
+    images.push(match[1])
+  }
+
+  // Clean up text - trim excess whitespace from removed images
+  textContent = textContent.replace(/\n{3,}/g, '\n\n').trim()
+
+  return {
+    text: textContent || null,
+    images
+  }
+}
+
+// Icon components for workblocks
+function ToolIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
+    </svg>
+  )
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  )
+}
+
+function ErrorIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  )
+}
+
+function SpinnerIcon({ className }: { className?: string }) {
+  return (
+    <svg className={`animate-spin ${className}`} fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  )
+}
+
+// Action icons for message actions (smooth outline style)
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  )
+}
+
+function TrashIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 6h18" />
+      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+    </svg>
+  )
+}
+
+function RewindIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M1 4v6h6" />
+      <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+    </svg>
+  )
+}
+
+function BranchIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 3v12" />
+      <circle cx="18" cy="6" r="3" />
+      <circle cx="6" cy="18" r="3" />
+      <path d="M18 9a9 9 0 0 1-9 9" />
+    </svg>
+  )
+}
+
+// Format tool name for display
+function formatToolName(name: string | undefined): string {
+  if (!name) return 'Running tool'
+  // Convert snake_case or camelCase to Title Case
+  return name
+    .replace(/_/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, c => c.toUpperCase())
+}
+
+// Get status indicator for a work item
+function WorkItemStatus({ status }: { status: 'pending' | 'success' | 'error' | null | undefined }) {
+  if (status === 'success') {
+    return <CheckIcon className="w-3.5 h-3.5 text-emerald-500" />
+  }
+  if (status === 'error') {
+    return <ErrorIcon className="w-3.5 h-3.5 text-red-500" />
+  }
+  return <SpinnerIcon className="w-3.5 h-3.5 text-[var(--text-secondary)]" />
+}
+
+// Chevron icon for collapse/expand
+function ChevronIcon({ className, expanded }: { className?: string; expanded: boolean }) {
+  return (
+    <svg
+      className={`${className} transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  )
+}
+
+// Workblock component
+function Workblock({ workblock, isLast, threadLoading }: { workblock: WorkMessage; isLast?: boolean; threadLoading?: boolean }) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { text } = parseMessageContent(workblock.content)
+  const isPending = workblock.status === 'pending'
+
+  // Group work items by tool_call_id to pair calls with results
+  const toolCalls = workblock.workItems.filter(item => item.type === 'tool_call')
+  const toolResults = workblock.workItems.filter(item => item.type === 'tool_result')
+
+  // Count completed vs total and check for errors
+  const completedCount = toolCalls.filter(item => item.status === 'success' || item.status === 'error').length
+  const errorCount = toolCalls.filter(item => item.status === 'error').length
+  const totalCount = toolCalls.length
+  const hasErrors = errorCount > 0
+
+  // Get most recent info for the badge (last tool result or last tool call name)
+  const lastResult = toolResults[toolResults.length - 1]
+  const lastToolCall = toolCalls[toolCalls.length - 1]
+  const badgeText = lastResult?.content
+    ? (lastResult.content.length > 40 ? lastResult.content.slice(0, 40) + '...' : lastResult.content)
+    : lastToolCall?.name
+      ? formatToolName(lastToolCall.name)
+      : null
+
+  // Determine status label and color
+  const statusLabel = isPending ? 'Working' : hasErrors ? 'Completed with errors' : 'Completed'
+  const statusColor = isPending ? 'text-violet-500' : hasErrors ? 'text-amber-500' : 'text-emerald-500'
+
+  // Show loader if this is the last workblock and thread is still loading
+  const showLoader = isLast && threadLoading && !isPending
+
+  return (
+    <div className="animate-fade-in">
+      {/* Workblock panel */}
+      <div className={`bg-[var(--bg-tertiary)] border border-[var(--border-primary)] rounded-xl overflow-hidden max-w-[85%] ${isPending ? 'workblock-shimmer' : ''}`}>
+        {/* Header - clickable to toggle */}
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full px-3 py-2 bg-[var(--bg-hover)] flex items-center gap-2 hover:bg-[var(--bg-tertiary)] transition-colors text-left"
+        >
+          <ChevronIcon className="w-3.5 h-3.5 text-[var(--text-tertiary)]" expanded={isExpanded} />
+          <span className={`text-xs font-medium uppercase tracking-wide ${statusColor}`}>
+            {statusLabel}
+          </span>
+          {(isPending || showLoader) && (
+            <SpinnerIcon className="w-3 h-3 text-violet-500" />
+          )}
+          {/* Badge with most recent info when collapsed */}
+          {!isExpanded && badgeText && (
+            <span className="ml-auto text-xs text-[var(--text-tertiary)] bg-[var(--bg-secondary)] px-2 py-0.5 rounded truncate max-w-[200px]">
+              {badgeText}
+            </span>
+          )}
+          {isExpanded && totalCount > 1 && (
+            <span className="ml-auto text-xs text-[var(--text-tertiary)]">
+              {completedCount}/{totalCount}
+            </span>
+          )}
+        </button>
+
+        {/* Collapsible content */}
+        {isExpanded && (
+          <>
+            {/* Text content (thinking/reasoning) inside the workblock */}
+            {text && text.trim() && (
+              <div className="px-3 py-2.5 border-t border-[var(--border-primary)] bg-[var(--bg-secondary)]">
+                <p className="text-sm text-[var(--text-secondary)] italic whitespace-pre-wrap break-words">
+                  {text.trim()}
+                </p>
+              </div>
+            )}
+
+            {/* Tool calls list */}
+            <div className="divide-y divide-[var(--border-primary)] border-t border-[var(--border-primary)]">
+              {toolCalls.map((item, index) => (
+                <div
+                  key={item.id}
+                  className="px-3 py-2.5 flex items-center gap-3 animate-slide-in"
+                  style={{ animationDelay: `${index * 50}ms` }}
+                >
+                  <WorkItemStatus status={item.status} />
+                  <span className="text-sm text-[var(--text-primary)]">
+                    {formatToolName(item.name)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Image attachment component
+function ImageAttachment({ url, name, width, height, onLoad }: { url: string; name?: string; width?: number; height?: number; onLoad?: () => void }) {
+  // Use aspect-ratio to reserve space and prevent layout shift
+  const style: React.CSSProperties = {}
+  if (width && height) {
+    style.aspectRatio = `${width} / ${height}`
+    // Cap the width to max-w-sm (384px) while maintaining aspect ratio
+    style.width = Math.min(width, 384)
+  }
+
+  return (
+    <div
+      className="rounded-lg overflow-hidden max-w-sm bg-[var(--bg-hover)]"
+      style={style}
+    >
+      <img
+        src={url}
+        alt={name || 'Attached image'}
+        className="w-full h-full object-cover cursor-pointer hover:opacity-90 transition-opacity"
+        onClick={() => window.open(url, '_blank')}
+        onLoad={onLoad}
+      />
+    </div>
+  )
+}
+
+// File attachment component (for non-image files)
+function FileAttachment({ name, mimeType, url }: { name: string; mimeType: string; url: string }) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] transition-colors"
+    >
+      <svg className="w-4 h-4 text-[var(--text-secondary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+      </svg>
+      <span className="text-sm text-[var(--text-primary)] truncate max-w-[200px]">{name}</span>
+    </a>
+  )
+}
+
+// Build attachment URL - check localPreviewUrl first for optimistic preview
+function getAttachmentUrl(threadId: string, attachment: Attachment): string {
+  // Check localPreviewUrl first (optimistic preview from SDK)
+  if (attachment.localPreviewUrl) {
+    return attachment.localPreviewUrl
+  }
+  // Otherwise use the server path
+  if (attachment.path) {
+    const endpoint = getApiEndpoint()
+    // Remove leading slash from path if present for clean join
+    const cleanPath = attachment.path.startsWith('/') ? attachment.path.slice(1) : attachment.path
+    return `${endpoint}/api/threads/${threadId}/fs/${cleanPath}`
+  }
+  // Fallback - shouldn't happen
+  return ''
+}
+
+// Render attachments
+function AttachmentList({ attachments, threadId, onImageLoad }: { attachments: Attachment[]; threadId: string; onImageLoad?: () => void }) {
+  const imageAttachments = attachments.filter(a => a.mimeType.startsWith('image/'))
+  const otherAttachments = attachments.filter(a => !a.mimeType.startsWith('image/'))
+
+  return (
+    <div className="space-y-2">
+      {/* Image attachments */}
+      {imageAttachments.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {imageAttachments.map((attachment) => (
+            <ImageAttachment
+              key={attachment.id}
+              url={getAttachmentUrl(threadId, attachment)}
+              name={attachment.name}
+              width={attachment.width}
+              height={attachment.height}
+              onLoad={onImageLoad}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Other file attachments */}
+      {otherAttachments.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {otherAttachments.map((attachment) => (
+            <FileAttachment
+              key={attachment.id}
+              name={attachment.name}
+              mimeType={attachment.mimeType}
+              url={getAttachmentUrl(threadId, attachment)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Message actions component
+interface MessageActionsProps {
+  message: Message
+  threadId: string
+  allMessages: ThreadMessage[]
+  onBranchCreated?: (newThreadId: string) => void
+}
+
+function MessageActions({ message, threadId, allMessages, onBranchCreated }: MessageActionsProps) {
+  const [copied, setCopied] = useState(false)
+  const [showDeleteWarning, setShowDeleteWarning] = useState(false)
+  const [showRewindWarning, setShowRewindWarning] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isBranching, setIsBranching] = useState(false)
+
+  const { baseUrl, token } = getApiConfig()
+  const headers = useMemo(() => {
+    const h: Record<string, string> = { 'Content-Type': 'application/json' }
+    if (token) h['Authorization'] = `Bearer ${token}`
+    return h
+  }, [token])
+
+  // Copy message content to clipboard
+  const handleCopy = useCallback(async () => {
+    const { text } = parseMessageContent(message.content)
+    if (text) {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }, [message.content])
+
+  // Delete this message - show confirmation first
+  const handleDelete = useCallback(() => {
+    setShowDeleteWarning(true)
+  }, [])
+
+  const confirmDelete = useCallback(async () => {
+    setShowDeleteWarning(false)
+    setIsDeleting(true)
+    try {
+      // Try the messages endpoint path
+      const response = await fetch(`${baseUrl}/api/threads/${threadId}/messages/${message.id}`, {
+        method: 'DELETE',
+        headers,
+      })
+      if (!response.ok) {
+        // If that fails, the endpoint might not exist yet
+        console.error('Failed to delete message:', response.status, response.statusText)
+        alert('Delete functionality is not yet available.')
+      }
+      // The thread will auto-refresh via WebSocket
+    } catch (error) {
+      console.error('Failed to delete message:', error)
+      alert('Delete functionality is not yet available.')
+    } finally {
+      setIsDeleting(false)
+    }
+  }, [baseUrl, threadId, message.id, headers])
+
+  // Rewind thread to this point (stub - endpoint not implemented yet)
+  const handleRewind = useCallback(() => {
+    setShowRewindWarning(true)
+  }, [])
+
+  const confirmRewind = useCallback(() => {
+    // TODO: Implement when endpoint is available
+    console.warn('Rewind endpoint not yet implemented')
+    alert('Rewind functionality is not yet available. This feature will be implemented soon.')
+    setShowRewindWarning(false)
+  }, [])
+
+  // Branch: Create new thread with messages up to this point
+  const handleBranch = useCallback(async () => {
+    setIsBranching(true)
+    try {
+      // Get all messages up to and including this message
+      const messageIndex = allMessages.findIndex(m => 'id' in m && m.id === message.id)
+      if (messageIndex === -1) return
+
+      // Filter to only regular messages (not workblocks) up to this point
+      const messagesToCopy = allMessages
+        .slice(0, messageIndex + 1)
+        .filter((m): m is Message => !isWorkMessage(m) && m.role !== 'system' && m.role !== 'tool')
+
+      // Get the agent_id from the current thread
+      const threadResponse = await fetch(`${baseUrl}/api/threads/${threadId}`, { headers })
+      if (!threadResponse.ok) throw new Error('Failed to get thread info')
+      const threadData = await threadResponse.json()
+
+      // Create new thread
+      const createResponse = await fetch(`${baseUrl}/api/threads`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ agent_id: threadData.agent_id }),
+      })
+      if (!createResponse.ok) throw new Error('Failed to create new thread')
+      const newThread = await createResponse.json()
+      const newThreadId = newThread.threadId
+
+      // Copy messages to new thread
+      for (const msg of messagesToCopy) {
+        await fetch(`${baseUrl}/api/threads/${newThreadId}/messages`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({
+            role: msg.role,
+            content: msg.content,
+          }),
+        })
+      }
+
+      // Navigate to new thread
+      if (onBranchCreated) {
+        onBranchCreated(newThreadId)
+      } else {
+        // Fallback: update URL
+        const url = new URL(window.location.href)
+        url.searchParams.set('thread', newThreadId)
+        window.location.href = url.toString()
+      }
+    } catch (error) {
+      console.error('Failed to branch thread:', error)
+    } finally {
+      setIsBranching(false)
+    }
+  }, [baseUrl, threadId, message.id, allMessages, headers, onBranchCreated])
+
+  const iconClass = "w-[18px] h-[18px]"
+  const buttonClass = "p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors disabled:opacity-50"
+
+  return (
+    <div className="flex items-center gap-1 mt-2">
+      {/* Copy */}
+      <button
+        onClick={handleCopy}
+        className={buttonClass}
+        title={copied ? 'Copied!' : 'Copy'}
+      >
+        {copied ? (
+          <CheckIcon className={`${iconClass} text-emerald-500`} />
+        ) : (
+          <CopyIcon className={iconClass} />
+        )}
+      </button>
+
+      {/* Delete */}
+      <button
+        onClick={handleDelete}
+        disabled={isDeleting}
+        className={buttonClass}
+        title="Delete"
+      >
+        {isDeleting ? (
+          <SpinnerIcon className={iconClass} />
+        ) : (
+          <TrashIcon className={iconClass} />
+        )}
+      </button>
+
+      {/* Rewind */}
+      <button
+        onClick={handleRewind}
+        className={buttonClass}
+        title="Rewind to here"
+      >
+        <RewindIcon className={iconClass} />
+      </button>
+
+      {/* Branch */}
+      <button
+        onClick={handleBranch}
+        disabled={isBranching}
+        className={buttonClass}
+        title="Branch from here"
+      >
+        {isBranching ? (
+          <SpinnerIcon className={iconClass} />
+        ) : (
+          <BranchIcon className={iconClass} />
+        )}
+      </button>
+
+      {/* Delete confirmation dialog */}
+      {showDeleteWarning && createPortal(
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-[var(--bg-elevated)] border border-[var(--border-primary)] rounded-xl p-4 max-w-sm mx-4 shadow-xl">
+            <h3 className="text-[var(--text-primary)] font-medium mb-2">Delete Message</h3>
+            <p className="text-sm text-[var(--text-secondary)] mb-4">
+              Are you sure you want to delete this message? This action cannot be undone.
+            </p>
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setShowDeleteWarning(false)}
+                className="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={confirmDelete}
+                className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Rewind confirmation dialog */}
+      {showRewindWarning && createPortal(
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-[var(--bg-elevated)] border border-[var(--border-primary)] rounded-xl p-4 max-w-sm mx-4 shadow-xl">
+            <h3 className="text-[var(--text-primary)] font-medium mb-2">Rewind Thread</h3>
+            <p className="text-sm text-[var(--text-secondary)] mb-4">
+              This will remove all messages after this point. This action cannot be undone.
+            </p>
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setShowRewindWarning(false)}
+                className="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={confirmRewind}
+                className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors"
+              >
+                Rewind
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}
+
+// Regular message component
+function MessageBubble({ message, threadId, allMessages, onBranchCreated, onImageLoad }: { message: Message; threadId: string; allMessages: ThreadMessage[]; onBranchCreated?: (newThreadId: string) => void; onImageLoad?: () => void }) {
+  const isUser = message.role === 'user'
+  const { text, images: inlineImages } = parseMessageContent(message.content)
+
+  // Get attachments from the message (cast to extended type)
+  const rawAttachments = (message as MessageWithAttachments).attachments
+  const attachments = Array.isArray(rawAttachments) ? rawAttachments : []
+  const hasAttachments = attachments.length > 0
+
+  return (
+    <div className={`animate-fade-in ${isUser ? 'flex flex-col items-end' : ''}`}>
+      {/* Attachments shown above message bubble for user messages */}
+      {isUser && hasAttachments && (
+        <div className="mb-2 max-w-[85%]">
+          <AttachmentList attachments={attachments} threadId={threadId} onImageLoad={onImageLoad} />
+        </div>
+      )}
+
+      {isUser ? (
+        <div className="inline-block max-w-[85%] px-4 py-3 rounded-2xl rounded-br-md bg-[var(--bg-tertiary)] text-[var(--text-primary)]">
+          {text && (
+            <div className="whitespace-pre-wrap break-words text-[15px] leading-relaxed">
+              {text}
+            </div>
+          )}
+
+          {/* Inline images from content (fallback) */}
+          {inlineImages.length > 0 && (
+            <div className={`${text ? 'mt-2' : ''} space-y-2`}>
+              {inlineImages.map((url, index) => (
+                <ImageAttachment key={index} url={url} onLoad={onImageLoad} />
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="max-w-[85%] text-[var(--text-primary)]">
+          {text && (
+            <Markdown className="text-[15px] leading-relaxed">
+              {text}
+            </Markdown>
+          )}
+
+          {/* Inline images from content (fallback) */}
+          {inlineImages.length > 0 && (
+            <div className={`${text ? 'mt-2' : ''} space-y-2`}>
+              {inlineImages.map((url, index) => (
+                <ImageAttachment key={index} url={url} onLoad={onImageLoad} />
+              ))}
+            </div>
+          )}
+
+          {/* Attachments shown below content for assistant messages */}
+          {hasAttachments && (
+            <div className="mt-2">
+              <AttachmentList attachments={attachments} threadId={threadId} onImageLoad={onImageLoad} />
+            </div>
+          )}
+
+          {/* Action icons for assistant messages */}
+          {message.status !== 'pending' && (
+            <MessageActions
+              message={message}
+              threadId={threadId}
+              allMessages={allMessages}
+              onBranchCreated={onBranchCreated}
+            />
+          )}
+        </div>
+      )}
+
+    </div>
+  )
+}
+
+// Thinking indicator component
+function ThinkingIndicator() {
+  return (
+    <div className="animate-fade-in">
+      <div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
+        <SpinnerIcon className="w-4 h-4" />
+        <span>Thinking...</span>
+      </div>
+    </div>
+  )
+}
+
+export function MessageList() {
+  const { workblocks: messages, loading, threadId } = useThread()
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [])
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages, loading, scrollToBottom])
+
+  // Determine if we should show typing indicator
+  const showTypingIndicator = useMemo(() => {
+    // Don't show typing indicator if there are no messages yet (initial load)
+    if (messages.length === 0) return false
+
+    // Check if the last user-visible message needs a response
+    const visibleMessages = messages.filter(msg => {
+      if (isWorkMessage(msg)) return true
+      return msg.role !== 'system' && msg.role !== 'tool'
+    })
+
+    if (visibleMessages.length === 0) return false
+
+    const lastMessage = visibleMessages[visibleMessages.length - 1]
+
+    // If last message is from user and we're loading, we're waiting for response
+    if (!isWorkMessage(lastMessage) && lastMessage.role === 'user' && loading) {
+      return true
+    }
+
+    // If last message is a pending workblock, we're still working
+    if (isWorkMessage(lastMessage) && lastMessage.status === 'pending') {
+      return true
+    }
+
+    // If last assistant message is pending
+    if (!isWorkMessage(lastMessage) && lastMessage.role === 'assistant' && lastMessage.status === 'pending') {
+      return true
+    }
+
+    return false
+  }, [messages, loading])
+
+  if (messages.length === 0 && !loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-[var(--text-muted)] text-sm">Send a message to start the conversation</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="py-6 px-4 space-y-6">
+      {messages.map((msg, index) => {
+          const isLast = index === messages.length - 1
+
+          // Handle workblocks
+          if (isWorkMessage(msg)) {
+            return <Workblock key={msg.id} workblock={msg} isLast={isLast} threadLoading={loading} />
+          }
+
+          // Skip system and tool messages (tool messages are shown in workblocks)
+          if (msg.role === 'system' || msg.role === 'tool') {
+            return null
+          }
+
+          return <MessageBubble key={msg.id} message={msg} threadId={threadId} allMessages={messages} onImageLoad={scrollToBottom} />
+        })}
+
+      {/* Thinking indicator - shown when waiting for response */}
+      {showTypingIndicator && !messages.some(m => isWorkMessage(m) && m.status === 'pending') && (
+        <ThinkingIndicator />
+      )}
+
+      <div ref={bottomRef} className="h-4" />
+    </div>
+  )
+}