987 lines
34 KiB
TypeScript
987 lines
34 KiB
TypeScript
import { For, Match, Show, Switch, createMemo, createSignal, createEffect, onCleanup } from "solid-js"
|
|
import MessageItem from "./message-item"
|
|
import ToolCall from "./tool-call"
|
|
import Kbd from "./kbd"
|
|
import type { MessageInfo, ClientPart } from "../types/message"
|
|
import { partHasRenderableText } from "../types/message"
|
|
import { getSessionInfo, sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
|
|
import { showCommandPalette } from "../stores/command-palette"
|
|
import { messageStoreBus } from "../stores/message-v2/bus"
|
|
import type { MessageRecord } from "../stores/message-v2/types"
|
|
import { buildRecordDisplayData, clearRecordDisplayCacheForInstance } from "../stores/message-v2/record-display-cache"
|
|
import { useConfig } from "../stores/preferences"
|
|
import { sseManager } from "../lib/sse-manager"
|
|
import { formatTokenTotal } from "../lib/formatters"
|
|
import { useScrollCache } from "../lib/hooks/use-scroll-cache"
|
|
import { setActiveInstanceId } from "../stores/instances"
|
|
|
|
const SCROLL_SCOPE = "session"
|
|
|
|
const TOOL_ICON = "🔧"
|
|
const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
|
|
|
|
const messageItemCache = new Map<string, ContentDisplayItem>()
|
|
const toolItemCache = new Map<string, ToolDisplayItem>()
|
|
|
|
type ToolCallPart = Extract<ClientPart, { type: "tool" }>
|
|
|
|
type ToolState = import("@opencode-ai/sdk").ToolState
|
|
type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
|
|
type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
|
|
type ToolStateError = import("@opencode-ai/sdk").ToolStateError
|
|
|
|
function isToolStateRunning(state: ToolState | undefined): state is ToolStateRunning {
|
|
return Boolean(state && state.status === "running")
|
|
}
|
|
|
|
function isToolStateCompleted(state: ToolState | undefined): state is ToolStateCompleted {
|
|
return Boolean(state && state.status === "completed")
|
|
}
|
|
|
|
function isToolStateError(state: ToolState | undefined): state is ToolStateError {
|
|
return Boolean(state && state.status === "error")
|
|
}
|
|
|
|
function extractTaskSessionId(state: ToolState | undefined): string {
|
|
if (!state) return ""
|
|
const metadata = (state as unknown as { metadata?: Record<string, unknown> }).metadata ?? {}
|
|
const directId = metadata?.sessionId ?? metadata?.sessionID
|
|
return typeof directId === "string" ? directId : ""
|
|
}
|
|
|
|
interface TaskSessionLocation {
|
|
sessionId: string
|
|
instanceId: string
|
|
parentId: string | null
|
|
}
|
|
|
|
function findTaskSessionLocation(sessionId: string): TaskSessionLocation | null {
|
|
if (!sessionId) return null
|
|
const allSessions = sessions()
|
|
for (const [instanceId, sessionMap] of allSessions) {
|
|
const session = sessionMap?.get(sessionId)
|
|
if (session) {
|
|
return {
|
|
sessionId: session.id,
|
|
instanceId,
|
|
parentId: session.parentId ?? null,
|
|
}
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
function navigateToTaskSession(location: TaskSessionLocation) {
|
|
setActiveInstanceId(location.instanceId)
|
|
const parentToActivate = location.parentId ?? location.sessionId
|
|
setActiveParentSession(location.instanceId, parentToActivate)
|
|
if (location.parentId) {
|
|
setActiveSession(location.instanceId, location.sessionId)
|
|
}
|
|
}
|
|
|
|
function formatTokens(tokens: number): string {
|
|
return formatTokenTotal(tokens)
|
|
}
|
|
|
|
function makeInstanceCacheKey(instanceId: string, id: string) {
|
|
return `${instanceId}:${id}`
|
|
}
|
|
|
|
function clearInstanceCaches(instanceId: string) {
|
|
|
|
clearRecordDisplayCacheForInstance(instanceId)
|
|
const prefix = `${instanceId}:`
|
|
for (const key of messageItemCache.keys()) {
|
|
if (key.startsWith(prefix)) {
|
|
messageItemCache.delete(key)
|
|
}
|
|
}
|
|
for (const key of toolItemCache.keys()) {
|
|
if (key.startsWith(prefix)) {
|
|
toolItemCache.delete(key)
|
|
}
|
|
}
|
|
}
|
|
|
|
messageStoreBus.onInstanceDestroyed(clearInstanceCaches)
|
|
|
|
interface MessageStreamV2Props {
|
|
instanceId: string
|
|
sessionId: string
|
|
loading?: boolean
|
|
onRevert?: (messageId: string) => void
|
|
onFork?: (messageId?: string) => void
|
|
}
|
|
|
|
interface ContentDisplayItem {
|
|
type: "content"
|
|
key: string
|
|
record: MessageRecord
|
|
parts: ClientPart[]
|
|
messageInfo?: MessageInfo
|
|
isQueued: boolean
|
|
showAgentMeta?: boolean
|
|
}
|
|
|
|
interface ToolDisplayItem {
|
|
type: "tool"
|
|
key: string
|
|
toolPart: ToolCallPart
|
|
messageInfo?: MessageInfo
|
|
messageId: string
|
|
messageVersion: number
|
|
partVersion: number
|
|
}
|
|
|
|
interface StepDisplayItem {
|
|
type: "step-start" | "step-finish"
|
|
key: string
|
|
part: ClientPart
|
|
messageInfo?: MessageInfo
|
|
}
|
|
|
|
type ReasoningDisplayItem = {
|
|
type: "reasoning"
|
|
key: string
|
|
part: ClientPart
|
|
messageInfo?: MessageInfo
|
|
showAgentMeta?: boolean
|
|
}
|
|
|
|
type MessageBlockItem = ContentDisplayItem | ToolDisplayItem | StepDisplayItem | ReasoningDisplayItem
|
|
|
|
interface MessageDisplayBlock {
|
|
record: MessageRecord
|
|
items: MessageBlockItem[]
|
|
}
|
|
|
|
export default function MessageStreamV2(props: MessageStreamV2Props) {
|
|
const { preferences } = useConfig()
|
|
const showUsagePreference = () => preferences().showUsageMetrics ?? true
|
|
const store = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
|
|
const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
|
|
const messageRecords = createMemo(() =>
|
|
messageIds()
|
|
.map((id) => store().getMessage(id))
|
|
.filter((record): record is MessageRecord => Boolean(record)),
|
|
)
|
|
|
|
const sessionRevision = createMemo(() => store().getSessionRevision(props.sessionId))
|
|
const usageSnapshot = createMemo(() => store().getSessionUsage(props.sessionId))
|
|
const sessionInfo = createMemo(() =>
|
|
getSessionInfo(props.instanceId, props.sessionId) ?? {
|
|
cost: 0,
|
|
contextWindow: 0,
|
|
isSubscriptionModel: false,
|
|
inputTokens: 0,
|
|
outputTokens: 0,
|
|
reasoningTokens: 0,
|
|
actualUsageTokens: 0,
|
|
modelOutputLimit: 0,
|
|
contextAvailableTokens: null,
|
|
},
|
|
)
|
|
const tokenStats = createMemo(() => {
|
|
const usage = usageSnapshot()
|
|
const info = sessionInfo()
|
|
return {
|
|
used: usage?.actualUsageTokens ?? info.actualUsageTokens ?? 0,
|
|
avail: info.contextAvailableTokens,
|
|
}
|
|
})
|
|
|
|
const connectionStatus = () => sseManager.getStatus(props.instanceId)
|
|
const handleCommandPaletteClick = () => {
|
|
showCommandPalette(props.instanceId)
|
|
}
|
|
|
|
const messageInfoMap = createMemo(() => {
|
|
const map = new Map<string, MessageInfo>()
|
|
messageRecords().forEach((record) => {
|
|
const info = store().getMessageInfo(record.id)
|
|
if (info) {
|
|
map.set(record.id, info)
|
|
}
|
|
})
|
|
return map
|
|
})
|
|
const revertTarget = createMemo(() => store().getSessionRevert(props.sessionId))
|
|
|
|
const messageIndexMap = createMemo(() => {
|
|
const map = new Map<string, number>()
|
|
const records = messageRecords()
|
|
records.forEach((record, index) => map.set(record.id, index))
|
|
return map
|
|
})
|
|
|
|
const lastAssistantIndex = createMemo(() => {
|
|
const records = messageRecords()
|
|
for (let index = records.length - 1; index >= 0; index--) {
|
|
if (records[index].role === "assistant") {
|
|
return index
|
|
}
|
|
}
|
|
return -1
|
|
})
|
|
|
|
function reasoningHasRenderableContent(part: ClientPart): boolean {
|
|
if (!part || part.type !== "reasoning") {
|
|
return false
|
|
}
|
|
const checkSegment = (segment: unknown): boolean => {
|
|
if (typeof segment === "string") {
|
|
return segment.trim().length > 0
|
|
}
|
|
if (segment && typeof segment === "object") {
|
|
const candidate = segment as { text?: unknown; value?: unknown; content?: unknown[] }
|
|
if (typeof candidate.text === "string" && candidate.text.trim().length > 0) {
|
|
return true
|
|
}
|
|
if (typeof candidate.value === "string" && candidate.value.trim().length > 0) {
|
|
return true
|
|
}
|
|
if (Array.isArray(candidate.content)) {
|
|
return candidate.content.some((entry) => checkSegment(entry))
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
if (checkSegment((part as any).text)) {
|
|
return true
|
|
}
|
|
if (Array.isArray((part as any).content)) {
|
|
return (part as any).content.some((entry: unknown) => checkSegment(entry))
|
|
}
|
|
return false
|
|
}
|
|
|
|
const displayBlocks = createMemo<MessageDisplayBlock[]>(() => {
|
|
const infoMap = messageInfoMap()
|
|
const showThinking = preferences().showThinkingBlocks
|
|
const showUsageMetrics = showUsagePreference()
|
|
const revert = revertTarget()
|
|
const instanceId = props.instanceId
|
|
const blocks: MessageDisplayBlock[] = []
|
|
const usedMessageKeys = new Set<string>()
|
|
const usedToolKeys = new Set<string>()
|
|
const records = messageRecords()
|
|
const assistantIndex = lastAssistantIndex()
|
|
const indexMap = messageIndexMap()
|
|
|
|
for (const record of records) {
|
|
if (revert?.messageID && record.id === revert.messageID) {
|
|
break
|
|
}
|
|
|
|
const { orderedParts } = buildRecordDisplayData(instanceId, record)
|
|
const messageInfo = infoMap.get(record.id)
|
|
const recordIndex = indexMap.get(record.id) ?? 0
|
|
const isQueued = record.role === "user" && (assistantIndex === -1 || recordIndex > assistantIndex)
|
|
|
|
const items: MessageBlockItem[] = []
|
|
let segmentIndex = 0
|
|
let pendingParts: ClientPart[] = []
|
|
let agentMetaAttached = record.role !== "assistant"
|
|
|
|
const flushContent = () => {
|
|
if (pendingParts.length === 0) return
|
|
const segmentKey = makeInstanceCacheKey(instanceId, `${record.id}:segment:${segmentIndex}`)
|
|
segmentIndex += 1
|
|
const shouldShowAgentMeta =
|
|
record.role === "assistant" &&
|
|
!agentMetaAttached &&
|
|
pendingParts.some((part) => partHasRenderableText(part))
|
|
let cached = messageItemCache.get(segmentKey)
|
|
if (!cached) {
|
|
cached = {
|
|
type: "content",
|
|
key: segmentKey,
|
|
record,
|
|
parts: pendingParts.slice(),
|
|
messageInfo,
|
|
isQueued,
|
|
showAgentMeta: shouldShowAgentMeta,
|
|
}
|
|
messageItemCache.set(segmentKey, cached)
|
|
} else {
|
|
cached.record = record
|
|
cached.parts = pendingParts.slice()
|
|
cached.messageInfo = messageInfo
|
|
cached.isQueued = isQueued
|
|
cached.showAgentMeta = shouldShowAgentMeta
|
|
}
|
|
if (shouldShowAgentMeta) {
|
|
agentMetaAttached = true
|
|
}
|
|
items.push(cached)
|
|
usedMessageKeys.add(segmentKey)
|
|
pendingParts = []
|
|
}
|
|
|
|
orderedParts.forEach((part, partIndex) => {
|
|
if (part.type === "tool") {
|
|
flushContent()
|
|
const partVersion = typeof part.version === "number" ? part.version : 0
|
|
const messageVersion = record.revision
|
|
const key = `${record.id}:${part.id ?? partIndex}`
|
|
const cacheKey = makeInstanceCacheKey(instanceId, key)
|
|
let toolItem = toolItemCache.get(cacheKey)
|
|
if (!toolItem) {
|
|
toolItem = {
|
|
type: "tool",
|
|
key,
|
|
toolPart: part as ToolCallPart,
|
|
messageInfo,
|
|
messageId: record.id,
|
|
messageVersion,
|
|
partVersion,
|
|
}
|
|
toolItemCache.set(cacheKey, toolItem)
|
|
} else {
|
|
toolItem.key = key
|
|
toolItem.toolPart = part as ToolCallPart
|
|
toolItem.messageInfo = messageInfo
|
|
toolItem.messageId = record.id
|
|
toolItem.messageVersion = messageVersion
|
|
toolItem.partVersion = partVersion
|
|
}
|
|
items.push(toolItem)
|
|
usedToolKeys.add(cacheKey)
|
|
return
|
|
}
|
|
|
|
if (part.type === "step-start") {
|
|
flushContent()
|
|
return
|
|
}
|
|
|
|
if (part.type === "step-finish") {
|
|
flushContent()
|
|
if (showUsageMetrics) {
|
|
const key = makeInstanceCacheKey(instanceId, `${record.id}:${part.id ?? partIndex}:${part.type}`)
|
|
items.push({ type: part.type, key, part, messageInfo })
|
|
}
|
|
return
|
|
}
|
|
|
|
if (part.type === "reasoning") {
|
|
flushContent()
|
|
if (showThinking && reasoningHasRenderableContent(part)) {
|
|
const key = makeInstanceCacheKey(instanceId, `${record.id}:${part.id ?? partIndex}:reasoning`)
|
|
const showAgentMeta = record.role === "assistant" && !agentMetaAttached
|
|
if (showAgentMeta) {
|
|
agentMetaAttached = true
|
|
}
|
|
items.push({ type: "reasoning", key, part, messageInfo, showAgentMeta })
|
|
}
|
|
return
|
|
}
|
|
|
|
pendingParts.push(part)
|
|
})
|
|
|
|
flushContent()
|
|
|
|
if (items.length === 0) {
|
|
continue
|
|
}
|
|
|
|
blocks.push({ record, items })
|
|
}
|
|
|
|
for (const key of messageItemCache.keys()) {
|
|
if (!usedMessageKeys.has(key)) {
|
|
messageItemCache.delete(key)
|
|
}
|
|
}
|
|
for (const key of toolItemCache.keys()) {
|
|
if (!usedToolKeys.has(key)) {
|
|
toolItemCache.delete(key)
|
|
}
|
|
}
|
|
|
|
return blocks
|
|
})
|
|
|
|
const changeToken = createMemo(() => {
|
|
const revisionValue = sessionRevision()
|
|
const blocks = displayBlocks()
|
|
if (blocks.length === 0) {
|
|
return `${revisionValue}:empty`
|
|
}
|
|
const lastBlock = blocks[blocks.length - 1]
|
|
const lastItem = lastBlock.items[lastBlock.items.length - 1]
|
|
let tailSignature: string
|
|
if (!lastItem) {
|
|
tailSignature = `msg:${lastBlock.record.id}:${lastBlock.record.revision}`
|
|
} else if (lastItem.type === "tool") {
|
|
tailSignature = `tool:${lastItem.key}:${lastItem.partVersion}`
|
|
} else if (lastItem.type === "content") {
|
|
tailSignature = `content:${lastItem.key}:${lastBlock.record.revision}`
|
|
} else {
|
|
const version = typeof lastItem.part.version === "number" ? lastItem.part.version : 0
|
|
tailSignature = `step:${lastItem.key}:${version}`
|
|
}
|
|
return `${revisionValue}:${tailSignature}`
|
|
})
|
|
|
|
const scrollCache = useScrollCache({
|
|
instanceId: () => props.instanceId,
|
|
sessionId: () => props.sessionId,
|
|
scope: SCROLL_SCOPE,
|
|
})
|
|
|
|
const [autoScroll, setAutoScroll] = createSignal(true)
|
|
const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
|
|
const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
|
|
let containerRef: HTMLDivElement | undefined
|
|
|
|
function isNearBottom(element: HTMLDivElement, offset = 48) {
|
|
const { scrollTop, scrollHeight, clientHeight } = element
|
|
return scrollHeight - (scrollTop + clientHeight) <= offset
|
|
}
|
|
|
|
function isNearTop(element: HTMLDivElement, offset = 48) {
|
|
return element.scrollTop <= offset
|
|
}
|
|
|
|
function updateScrollIndicators(element: HTMLDivElement) {
|
|
const hasItems = displayBlocks().length > 0
|
|
setShowScrollBottomButton(hasItems && !isNearBottom(element))
|
|
setShowScrollTopButton(hasItems && !isNearTop(element))
|
|
}
|
|
|
|
function scrollToBottom(immediate = false) {
|
|
if (!containerRef) return
|
|
const behavior = immediate ? "auto" : "smooth"
|
|
containerRef.scrollTo({ top: containerRef.scrollHeight, behavior })
|
|
setAutoScroll(true)
|
|
requestAnimationFrame(() => {
|
|
if (!containerRef) return
|
|
updateScrollIndicators(containerRef)
|
|
persistScrollState()
|
|
})
|
|
}
|
|
|
|
function scrollToTop(immediate = false) {
|
|
if (!containerRef) return
|
|
const behavior = immediate ? "auto" : "smooth"
|
|
setAutoScroll(false)
|
|
containerRef.scrollTo({ top: 0, behavior })
|
|
requestAnimationFrame(() => {
|
|
if (!containerRef) return
|
|
updateScrollIndicators(containerRef)
|
|
persistScrollState()
|
|
})
|
|
}
|
|
|
|
function persistScrollState() {
|
|
if (!containerRef) return
|
|
scrollCache.persist(containerRef, { atBottomOffset: 48 })
|
|
}
|
|
|
|
function handleScroll(event: Event) {
|
|
if (!containerRef) return
|
|
updateScrollIndicators(containerRef)
|
|
if (event.isTrusted) {
|
|
const atBottom = isNearBottom(containerRef)
|
|
if (!atBottom) {
|
|
setAutoScroll(false)
|
|
} else {
|
|
setAutoScroll(true)
|
|
}
|
|
}
|
|
persistScrollState()
|
|
}
|
|
|
|
createEffect(() => {
|
|
const target = containerRef
|
|
if (!target) return
|
|
scrollCache.restore(target, {
|
|
fallback: () => scrollToBottom(true),
|
|
onApplied: (snapshot) => {
|
|
if (snapshot) {
|
|
setAutoScroll(snapshot.atBottom)
|
|
} else {
|
|
const atBottom = isNearBottom(target)
|
|
setAutoScroll(atBottom)
|
|
}
|
|
updateScrollIndicators(target)
|
|
},
|
|
})
|
|
})
|
|
|
|
let previousToken: string | undefined
|
|
createEffect(() => {
|
|
const token = changeToken()
|
|
if (!token || token === previousToken) {
|
|
return
|
|
}
|
|
previousToken = token
|
|
if (autoScroll()) {
|
|
requestAnimationFrame(() => scrollToBottom(true))
|
|
}
|
|
})
|
|
|
|
createEffect(() => {
|
|
if (messageRecords().length === 0) {
|
|
setShowScrollTopButton(false)
|
|
setShowScrollBottomButton(false)
|
|
setAutoScroll(true)
|
|
}
|
|
})
|
|
|
|
onCleanup(() => {
|
|
persistScrollState()
|
|
})
|
|
|
|
return (
|
|
<div class="message-stream-container">
|
|
<div class="connection-status">
|
|
<div class="connection-status-text connection-status-info flex flex-wrap items-center gap-2 text-sm font-medium">
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
|
|
<span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
|
|
<span class="font-semibold text-primary">{formatTokens(tokenStats().used)}</span>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
|
|
<span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
|
|
<span class="font-semibold text-primary">
|
|
{sessionInfo().contextAvailableTokens !== null ? formatTokens(sessionInfo().contextAvailableTokens ?? 0) : "--"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connection-status-text connection-status-shortcut">
|
|
<div class="connection-status-shortcut-action">
|
|
<button type="button" class="connection-status-button" onClick={handleCommandPaletteClick} aria-label="Open command palette">
|
|
Command Palette
|
|
</button>
|
|
<span class="connection-status-shortcut-hint">
|
|
<Kbd shortcut="cmd+shift+p" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="connection-status-meta flex items-center justify-end gap-3">
|
|
<Show when={connectionStatus() === "connected"}>
|
|
<span class="status-indicator connected">
|
|
<span class="status-dot" />
|
|
Connected
|
|
</span>
|
|
</Show>
|
|
<Show when={connectionStatus() === "connecting"}>
|
|
<span class="status-indicator connecting">
|
|
<span class="status-dot" />
|
|
Connecting...
|
|
</span>
|
|
</Show>
|
|
<Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
|
|
<span class="status-indicator disconnected">
|
|
<span class="status-dot" />
|
|
Disconnected
|
|
</span>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="message-stream"
|
|
ref={(element) => {
|
|
containerRef = element || undefined
|
|
}}
|
|
onScroll={handleScroll}
|
|
>
|
|
<Show when={!props.loading && displayBlocks().length === 0}>
|
|
<div class="empty-state">
|
|
<div class="empty-state-content">
|
|
<div class="flex flex-col items-center gap-3 mb-6">
|
|
<img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
|
|
<h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
|
|
</div>
|
|
<h3>Start a conversation</h3>
|
|
<p>Type a message below or open the Command Palette:</p>
|
|
<ul>
|
|
<li>
|
|
<span>Command Palette</span>
|
|
<Kbd shortcut="cmd+shift+p" class="ml-2" />
|
|
</li>
|
|
<li>Ask about your codebase</li>
|
|
<li>
|
|
Attach files with <code>@</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
|
|
<Show when={props.loading}>
|
|
<div class="loading-state">
|
|
<div class="spinner" />
|
|
<p>Loading messages...</p>
|
|
</div>
|
|
</Show>
|
|
|
|
<For each={displayBlocks()}>
|
|
{(block) => (
|
|
<div class="message-stream-block" data-message-id={block.record.id}>
|
|
<For each={block.items}>
|
|
{(item) => (
|
|
<Switch>
|
|
<Match when={item.type === "content"}>
|
|
<MessageItem
|
|
record={(item as ContentDisplayItem).record}
|
|
messageInfo={(item as ContentDisplayItem).messageInfo}
|
|
combinedParts={(item as ContentDisplayItem).parts}
|
|
orderedParts={(item as ContentDisplayItem).parts}
|
|
instanceId={props.instanceId}
|
|
sessionId={props.sessionId}
|
|
isQueued={(item as ContentDisplayItem).isQueued}
|
|
showAgentMeta={(item as ContentDisplayItem).showAgentMeta}
|
|
onRevert={props.onRevert}
|
|
onFork={props.onFork}
|
|
/>
|
|
</Match>
|
|
<Match when={item.type === "tool"}>
|
|
{(() => {
|
|
const toolItem = item as ToolDisplayItem
|
|
const toolState = toolItem.toolPart.state as ToolState | undefined
|
|
const hasToolState =
|
|
Boolean(toolState) &&
|
|
(isToolStateRunning(toolState) || isToolStateCompleted(toolState) || isToolStateError(toolState))
|
|
const taskSessionId = hasToolState ? extractTaskSessionId(toolState) : ""
|
|
const taskLocation = taskSessionId ? findTaskSessionLocation(taskSessionId) : null
|
|
const handleGoToTaskSession = (event: MouseEvent) => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if (!taskLocation) return
|
|
navigateToTaskSession(taskLocation)
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<div class="tool-call-message" data-key={toolItem.key}>
|
|
<div class="tool-call-header-label">
|
|
<div class="tool-call-header-meta">
|
|
<span class="tool-call-icon">{TOOL_ICON}</span>
|
|
<span>Tool Call</span>
|
|
<span class="tool-name">{toolItem.toolPart.tool || "unknown"}</span>
|
|
</div>
|
|
<Show when={taskSessionId}>
|
|
<button
|
|
class="tool-call-header-button"
|
|
type="button"
|
|
disabled={!taskLocation}
|
|
onClick={handleGoToTaskSession}
|
|
title={!taskLocation ? "Session not available yet" : "Go to session"}
|
|
>
|
|
Go to Session
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
<ToolCall
|
|
toolCall={toolItem.toolPart}
|
|
toolCallId={toolItem.key}
|
|
messageId={toolItem.messageId}
|
|
messageVersion={toolItem.messageVersion}
|
|
partVersion={toolItem.partVersion}
|
|
instanceId={props.instanceId}
|
|
sessionId={props.sessionId}
|
|
/>
|
|
</div>
|
|
)
|
|
})()}
|
|
</Match>
|
|
<Match when={item.type === "step-start"}>
|
|
<StepCard
|
|
kind="start"
|
|
part={(item as StepDisplayItem).part}
|
|
messageInfo={(item as StepDisplayItem).messageInfo}
|
|
showAgentMeta
|
|
/>
|
|
</Match>
|
|
<Match when={item.type === "step-finish"}>
|
|
<StepCard
|
|
kind="finish"
|
|
part={(item as StepDisplayItem).part}
|
|
messageInfo={(item as StepDisplayItem).messageInfo}
|
|
showUsage={showUsagePreference()}
|
|
/>
|
|
</Match>
|
|
<Match when={item.type === "reasoning"}>
|
|
<ReasoningCard
|
|
part={(item as ReasoningDisplayItem).part}
|
|
messageInfo={(item as ReasoningDisplayItem).messageInfo}
|
|
instanceId={props.instanceId}
|
|
sessionId={props.sessionId}
|
|
showAgentMeta={(item as ReasoningDisplayItem).showAgentMeta}
|
|
/>
|
|
</Match>
|
|
</Switch>
|
|
)}
|
|
</For>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
<Show when={showScrollTopButton() || showScrollBottomButton()}>
|
|
<div class="message-scroll-button-wrapper">
|
|
<Show when={showScrollTopButton()}>
|
|
<button
|
|
type="button"
|
|
class="message-scroll-button"
|
|
onClick={() => scrollToTop()}
|
|
aria-label="Scroll to first message"
|
|
>
|
|
<span class="message-scroll-icon" aria-hidden="true">
|
|
↑
|
|
</span>
|
|
</button>
|
|
</Show>
|
|
<Show when={showScrollBottomButton()}>
|
|
<button
|
|
type="button"
|
|
class="message-scroll-button"
|
|
onClick={() => scrollToBottom()}
|
|
aria-label="Scroll to latest message"
|
|
>
|
|
<span class="message-scroll-icon" aria-hidden="true">
|
|
↓
|
|
</span>
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface StepCardProps {
|
|
kind: "start" | "finish"
|
|
part: ClientPart
|
|
messageInfo?: MessageInfo
|
|
showAgentMeta?: boolean
|
|
showUsage?: boolean
|
|
}
|
|
|
|
function StepCard(props: StepCardProps) {
|
|
const timestamp = () => {
|
|
const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
|
|
const date = new Date(value)
|
|
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
|
|
}
|
|
|
|
const agentIdentifier = () => {
|
|
if (!props.showAgentMeta) return ""
|
|
const info = props.messageInfo
|
|
if (!info || info.role !== "assistant") return ""
|
|
return info.mode || ""
|
|
}
|
|
|
|
const modelIdentifier = () => {
|
|
if (!props.showAgentMeta) return ""
|
|
const info = props.messageInfo
|
|
if (!info || info.role !== "assistant") return ""
|
|
const modelID = info.modelID || ""
|
|
const providerID = info.providerID || ""
|
|
if (modelID && providerID) return `${providerID}/${modelID}`
|
|
return modelID
|
|
}
|
|
|
|
const usageStats = () => {
|
|
if (props.kind !== "finish" || !props.showUsage) {
|
|
return null
|
|
}
|
|
const info = props.messageInfo
|
|
if (!info || info.role !== "assistant" || !info.tokens) {
|
|
return null
|
|
}
|
|
const tokens = info.tokens
|
|
const input = tokens.input ?? 0
|
|
const output = tokens.output ?? 0
|
|
const reasoningTokens = tokens.reasoning ?? 0
|
|
if (input === 0 && output === 0 && reasoningTokens === 0) {
|
|
return null
|
|
}
|
|
return {
|
|
input,
|
|
output,
|
|
reasoning: reasoningTokens,
|
|
cacheRead: tokens.cache?.read ?? 0,
|
|
cacheWrite: tokens.cache?.write ?? 0,
|
|
cost: info.cost ?? 0,
|
|
}
|
|
}
|
|
|
|
const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => (
|
|
<div class="message-step-usage">
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
|
|
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Input</span>
|
|
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.input)}</span>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
|
|
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Output</span>
|
|
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.output)}</span>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
|
|
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Reasoning</span>
|
|
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.reasoning)}</span>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
|
|
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cache Read</span>
|
|
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.cacheRead)}</span>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
|
|
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cache Write</span>
|
|
<span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.cacheWrite)}</span>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
|
|
<span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cost</span>
|
|
<span class="font-semibold text-[var(--text-primary)]">{formatCostValue(usage.cost)}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
if (props.kind === "finish") {
|
|
const usage = usageStats()
|
|
if (!usage) {
|
|
return null
|
|
}
|
|
return (
|
|
<div class={`message-step-card message-step-finish`}>
|
|
{renderUsageChips(usage)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div class={`message-step-card message-step-start`}>
|
|
<div class="message-step-heading">
|
|
<div class="message-step-title">
|
|
<div class="message-step-title-left">
|
|
<Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
|
|
<span class="message-step-meta-inline">
|
|
<Show when={agentIdentifier()}>{(value) => <span>Agent: {value()}</span>}</Show>
|
|
<Show when={modelIdentifier()}>{(value) => <span>Model: {value()}</span>}</Show>
|
|
</span>
|
|
</Show>
|
|
</div>
|
|
<span class="message-step-time">{timestamp()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
function formatCostValue(value: number) {
|
|
if (!value) return "$0.00"
|
|
if (value < 0.01) return `$${value.toPrecision(2)}`
|
|
return `$${value.toFixed(2)}`
|
|
}
|
|
|
|
interface ReasoningCardProps {
|
|
part: ClientPart
|
|
messageInfo?: MessageInfo
|
|
instanceId: string
|
|
sessionId: string
|
|
showAgentMeta?: boolean
|
|
}
|
|
|
|
function ReasoningCard(props: ReasoningCardProps) {
|
|
const [expanded, setExpanded] = createSignal(false)
|
|
|
|
const timestamp = () => {
|
|
const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
|
|
const date = new Date(value)
|
|
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
|
|
}
|
|
|
|
const agentIdentifier = () => {
|
|
const info = props.messageInfo
|
|
if (!info || info.role !== "assistant") return ""
|
|
return info.mode || ""
|
|
}
|
|
|
|
const modelIdentifier = () => {
|
|
const info = props.messageInfo
|
|
if (!info || info.role !== "assistant") return ""
|
|
const modelID = info.modelID || ""
|
|
const providerID = info.providerID || ""
|
|
if (modelID && providerID) return `${providerID}/${modelID}`
|
|
return modelID
|
|
}
|
|
|
|
const reasoningText = () => {
|
|
const part = props.part as any
|
|
if (!part) return ""
|
|
|
|
const stringifySegment = (segment: unknown): string => {
|
|
if (typeof segment === "string") {
|
|
return segment
|
|
}
|
|
if (segment && typeof segment === "object") {
|
|
const obj = segment as { text?: unknown; value?: unknown; content?: unknown[] }
|
|
const pieces: string[] = []
|
|
if (typeof obj.text === "string") {
|
|
pieces.push(obj.text)
|
|
}
|
|
if (typeof obj.value === "string") {
|
|
pieces.push(obj.value)
|
|
}
|
|
if (Array.isArray(obj.content)) {
|
|
pieces.push(obj.content.map((entry) => stringifySegment(entry)).join("\n"))
|
|
}
|
|
return pieces.filter((piece) => piece && piece.trim().length > 0).join("\n")
|
|
}
|
|
return ""
|
|
}
|
|
|
|
const textValue = stringifySegment(part.text)
|
|
if (textValue.trim().length > 0) {
|
|
return textValue
|
|
}
|
|
if (Array.isArray(part.content)) {
|
|
return part.content.map((entry: unknown) => stringifySegment(entry)).join("\n")
|
|
}
|
|
return ""
|
|
}
|
|
|
|
const toggle = () => setExpanded((prev) => !prev)
|
|
|
|
return (
|
|
<div class="message-reasoning-card">
|
|
<button
|
|
type="button"
|
|
class="message-reasoning-toggle"
|
|
onClick={toggle}
|
|
aria-expanded={expanded()}
|
|
aria-label={expanded() ? "Collapse thinking" : "Expand thinking"}
|
|
>
|
|
<span class="message-reasoning-label flex flex-wrap items-center gap-2">
|
|
<span>Thinking</span>
|
|
<Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
|
|
<span class="message-step-meta-inline">
|
|
<Show when={agentIdentifier()}>{(value) => <span class="font-medium text-[var(--message-assistant-border)]">Agent: {value()}</span>}</Show>
|
|
<Show when={modelIdentifier()}>{(value) => <span class="font-medium text-[var(--message-assistant-border)]">Model: {value()}</span>}</Show>
|
|
</span>
|
|
</Show>
|
|
</span>
|
|
<span class="message-reasoning-meta">
|
|
<span class="message-reasoning-indicator">{expanded() ? "Hide" : "View"}</span>
|
|
<span class="message-reasoning-time">{timestamp()}</span>
|
|
</span>
|
|
</button>
|
|
|
|
<Show when={expanded()}>
|
|
<div class="message-reasoning-expanded">
|
|
<div class="message-reasoning-divider" aria-hidden="true" />
|
|
<div class="message-reasoning-body">
|
|
<pre class="message-reasoning-text">{reasoningText() || ""}</pre>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|