+ {/* Conversation sidebar */}
+
+
+
+
+
+
+
+
+
+ setChatSearch(e.target.value)}
+ placeholder="Search conversations..."
+ />
+ {chatSearch && (
+
+ )}
+
+
+
+
+ {filteredConversations.map(conv => (
+
switchConversation(conv.id)}
+ >
+
+ {editingName === conv.id ? (
+
setEditName(e.target.value)}
+ onBlur={finishRename}
+ onKeyDown={(e) => e.key === 'Enter' && finishRename()}
+ autoFocus
+ onClick={(e) => e.stopPropagation()}
+ style={{ padding: '2px 4px', fontSize: '0.8125rem' }}
+ />
+ ) : (
+
+
+ startRename(conv.id, conv.name)}
+ >
+ {processingChatId === conv.id && }
+ {conv.name}
+
+ {relativeTime(conv.updatedAt)}
+
+
+ {getLastMessagePreview(conv) || 'No messages yet'}
+
+
+ )}
+
+
+ {conversations.length > 1 && (
+
+ )}
+
+
+ ))}
+ {filteredConversations.length === 0 && chatSearch && (
+
+ No conversations match your search
+
+ )}
+
+
+
{/* Header */}
+
{name}
+
+ {canvasMode && artifacts.length > 0 && !canvasOpen && (
+
+ )}
-
@@ -161,55 +480,70 @@ export default function AgentChat() {
)}
- {messages.map(msg => {
- const role = senderToRole(msg.sender)
-
- if (role === 'system') {
- return (
-
+ {(() => {
+ const elements = []
+ let systemBuf = []
+ const flushSystem = (key) => {
+ if (systemBuf.length > 0) {
+ elements.push(
)
+ systemBuf = []
+ }
+ }
+ messages.forEach((msg, idx) => {
+ const role = senderToRole(msg.sender)
+ if (role === 'system') {
+ systemBuf.push(msg)
+ return
+ }
+ flushSystem(idx)
+ elements.push(
+
+
+
+
-
+
+ {role === 'user' ? (
+
/g, '>').replace(/\n/g, '
') }} />
+ ) : (
+
+ )}
+
+ {role === 'assistant' && msg.metadata && (
+
+ )}
+
+
+
{new Date(msg.timestamp).toLocaleTimeString()}
)
- }
-
- return (
-
-
-
-
-
-
- {role === 'user' ? (
-
/g, '>').replace(/\n/g, '
') }} />
- ) : (
-
- )}
-
-
-
-
-
- {new Date(msg.timestamp).toLocaleTimeString()}
-
-
-
- )
- })}
+ })
+ flushSystem('end')
+ return elements
+ })()}
{processing && (
-
-
+
+
-
-
@@ -245,5 +579,14 @@ export default function AgentChat() {
+ {canvasOpen && artifacts.length > 0 && (
+
setCanvasOpen(false)}
+ />
+ )}
+
)
}
diff --git a/core/http/react-ui/src/pages/Chat.jsx b/core/http/react-ui/src/pages/Chat.jsx
index 4fecb1a73..fe16d98a9 100644
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -1,8 +1,10 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { useParams, useOutletContext, useNavigate } from 'react-router-dom'
import { useChat } from '../hooks/useChat'
import ModelSelector from '../components/ModelSelector'
import { renderMarkdown, highlightAll } from '../utils/markdown'
+import { extractCodeArtifacts, renderMarkdownWithArtifacts } from '../utils/artifacts'
+import CanvasPanel from '../components/CanvasPanel'
import { fileToBase64, modelsApi } from '../utils/api'
function relativeTime(ts) {
@@ -54,87 +56,165 @@ function exportChatAsMarkdown(chat) {
URL.revokeObjectURL(url)
}
-function ThinkingMessage({ msg, onToggle }) {
+function formatToolContent(raw) {
+ try {
+ const data = JSON.parse(raw)
+ const name = data.name || 'unknown'
+ const params = data.arguments || data.input || data.result || data.parameters || {}
+ const entries = typeof params === 'object' && params !== null ? Object.entries(params) : []
+ return { name, entries, fallback: null }
+ } catch (_e) {
+ return { name: null, entries: [], fallback: raw }
+ }
+}
+
+function ToolParams({ entries, fallback }) {
+ if (fallback) {
+ return
{fallback}
+ }
+ if (entries.length === 0) return null
+ return (
+
+ {entries.map(([k, v]) => {
+ const val = typeof v === 'string' ? v : JSON.stringify(v, null, 2)
+ const isLong = val.length > 120
+ return (
+
+ {k}:
+ {val}
+
+ )
+ })}
+
+ )
+}
+
+function ActivityGroup({ items, updateChatSettings, activeChat }) {
+ const [expanded, setExpanded] = useState(false)
const contentRef = useRef(null)
useEffect(() => {
- if (msg.expanded && contentRef.current) {
- highlightAll(contentRef.current)
+ if (expanded && contentRef.current) highlightAll(contentRef.current)
+ }, [expanded])
+
+ if (!items || items.length === 0) return null
+
+ const labels = items.map(item => {
+ if (item.role === 'thinking' || item.role === 'reasoning') return 'Thought'
+ if (item.role === 'tool_call') {
+ try { return JSON.parse(item.content)?.name || 'Tool' } catch (_e) { return 'Tool' }
}
- }, [msg.expanded, msg.content])
-
- return (
-
-
- {msg.expanded && (
-
- )}
-
- )
-}
-
-function ToolCallMessage({ msg, onToggle }) {
- let parsed = null
- try { parsed = JSON.parse(msg.content) } catch (_e) { /* ignore */ }
- const isCall = msg.role === 'tool_call'
-
- return (
-
-
- {msg.expanded && (
-
- )}
-
- )
-}
-
-function StreamingToolCalls({ toolCalls }) {
- if (!toolCalls || toolCalls.length === 0) return null
- return toolCalls.map((tc, i) => {
- const isCall = tc.type === 'tool_call'
- return (
-
-
-
-
-
- {isCall ? 'Tool Call' : 'Tool Result'}: {tc.name}
-
-
-
-
-
-
{JSON.stringify(isCall ? tc.arguments : tc.result, null, 2)}
-
-
- )
+ if (item.role === 'tool_result') {
+ try { return `${JSON.parse(item.content)?.name || 'Tool'} result` } catch (_e) { return 'Result' }
+ }
+ return item.role
})
+ const summary = labels.join(' → ')
+
+ return (
+
+
+
+
+
+
+ {expanded && (
+
+ {items.map((item, idx) => {
+ if (item.role === 'thinking' || item.role === 'reasoning') {
+ return (
+
+ )
+ }
+ const isCall = item.role === 'tool_call'
+ const parsed = formatToolContent(item.content)
+ return (
+
+ {labels[idx]}
+
+
+ )
+ })}
+
+ )}
+
+
+ )
+}
+
+function StreamingActivity({ reasoning, toolCalls, hasResponse }) {
+ const hasContent = reasoning || (toolCalls && toolCalls.length > 0)
+ if (!hasContent) return null
+
+ const contentRef = useRef(null)
+ const [manualCollapse, setManualCollapse] = useState(null)
+
+ // Auto-expand while thinking, auto-collapse when response starts
+ const autoExpanded = reasoning && !hasResponse
+ const expanded = manualCollapse !== null ? !manualCollapse : autoExpanded
+
+ // Scroll to bottom of thinking content as it streams
+ useEffect(() => {
+ if (expanded && contentRef.current) {
+ contentRef.current.scrollTop = contentRef.current.scrollHeight
+ }
+ }, [reasoning, expanded])
+
+ // Reset manual override when streaming state changes significantly
+ useEffect(() => {
+ setManualCollapse(null)
+ }, [hasResponse])
+
+ const lastTool = toolCalls && toolCalls.length > 0 ? toolCalls[toolCalls.length - 1] : null
+ const label = reasoning
+ ? 'Thinking...'
+ : lastTool
+ ? (lastTool.type === 'tool_call' ? lastTool.name : `${lastTool.name} result`)
+ : ''
+
+ return (
+
+
+
+
+
+
+ {expanded && reasoning && (
+
+ )}
+ {expanded && toolCalls && toolCalls.length > 0 && (
+
+ {toolCalls.map((tc, idx) => {
+ const parsed = formatToolContent(JSON.stringify(tc, null, 2))
+ return (
+
+ {tc.name || tc.type}
+
+
+ )
+ })}
+
+ )}
+
+
+ )
}
function UserMessageContent({ content, files }) {
@@ -180,12 +260,31 @@ export default function Chat() {
const [modelInfo, setModelInfo] = useState(null)
const [showModelInfo, setShowModelInfo] = useState(false)
const [sidebarOpen, setSidebarOpen] = useState(true)
+ const [canvasMode, setCanvasMode] = useState(false)
+ const [canvasOpen, setCanvasOpen] = useState(false)
+ const [selectedArtifactId, setSelectedArtifactId] = useState(null)
const messagesEndRef = useRef(null)
const fileInputRef = useRef(null)
const messagesRef = useRef(null)
- const thinkingBoxRef = useRef(null)
const textareaRef = useRef(null)
+ const artifacts = useMemo(
+ () => canvasMode ? extractCodeArtifacts(activeChat?.history, 'role', 'assistant') : [],
+ [activeChat?.history, canvasMode]
+ )
+
+ const prevArtifactCountRef = useRef(0)
+ useEffect(() => {
+ prevArtifactCountRef.current = artifacts.length
+ }, [activeChat?.id])
+ useEffect(() => {
+ if (artifacts.length > prevArtifactCountRef.current && artifacts.length > 0) {
+ setSelectedArtifactId(artifacts[artifacts.length - 1].id)
+ if (!canvasOpen) setCanvasOpen(true)
+ }
+ prevArtifactCountRef.current = artifacts.length
+ }, [artifacts])
+
// Check MCP availability and fetch model config
useEffect(() => {
const model = activeChat?.model
@@ -242,13 +341,6 @@ export default function Chat() {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [activeChat?.history, streamingContent, streamingReasoning, streamingToolCalls])
- // Scroll streaming thinking box
- useEffect(() => {
- if (thinkingBoxRef.current) {
- thinkingBoxRef.current.scrollTop = thinkingBoxRef.current.scrollHeight
- }
- }, [streamingReasoning])
-
// Highlight code blocks
useEffect(() => {
if (messagesRef.current) {
@@ -268,6 +360,41 @@ export default function Chat() {
autoGrowTextarea()
}, [input, autoGrowTextarea])
+ // Event delegation for artifact cards
+ useEffect(() => {
+ const el = messagesRef.current
+ if (!el || !canvasMode) return
+ const handler = (e) => {
+ const openBtn = e.target.closest('.artifact-card-open')
+ const downloadBtn = e.target.closest('.artifact-card-download')
+ const card = e.target.closest('.artifact-card')
+ if (downloadBtn) {
+ e.stopPropagation()
+ const id = downloadBtn.dataset.artifactId
+ const artifact = artifacts.find(a => a.id === id)
+ if (artifact?.code) {
+ const blob = new Blob([artifact.code], { type: 'text/plain' })
+ const url = URL.createObjectURL(blob)
+ const a = document.createElement('a')
+ a.href = url
+ a.download = artifact.title || 'download.txt'
+ a.click()
+ URL.revokeObjectURL(url)
+ }
+ return
+ }
+ if (openBtn || card) {
+ const id = (openBtn || card).dataset.artifactId
+ if (id) {
+ setSelectedArtifactId(id)
+ setCanvasOpen(true)
+ }
+ }
+ }
+ el.addEventListener('click', handler)
+ return () => el.removeEventListener('click', handler)
+ }, [canvasMode, artifacts])
+
const handleFileChange = useCallback(async (e) => {
const newFiles = []
for (const file of e.target.files) {
@@ -517,6 +644,30 @@ export default function Chat() {
)}
+
+ {canvasMode && artifacts.length > 0 && !canvasOpen && (
+
+ )}