|
|
@@ -1,9 +1,9 @@
|
|
|
-import { AssistantMessage } from "@opencode-ai/sdk/v2"
|
|
|
+import { AssistantMessage, ToolPart } from "@opencode-ai/sdk/v2/client"
|
|
|
import { useData } from "../context"
|
|
|
import { useDiffComponent } from "../context/diff"
|
|
|
import { getDirectory, getFilename } from "@opencode-ai/util/path"
|
|
|
import { checksum } from "@opencode-ai/util/encode"
|
|
|
-import { createEffect, createMemo, createSignal, For, Match, onCleanup, ParentProps, Show, Switch } from "solid-js"
|
|
|
+import { createEffect, createMemo, For, Match, onCleanup, ParentProps, Show, Switch } from "solid-js"
|
|
|
import { DiffChanges } from "./diff-changes"
|
|
|
import { Typewriter } from "./typewriter"
|
|
|
import { Message } from "./message-part"
|
|
|
@@ -13,16 +13,12 @@ import { StickyAccordionHeader } from "./sticky-accordion-header"
|
|
|
import { FileIcon } from "./file-icon"
|
|
|
import { Icon } from "./icon"
|
|
|
import { Card } from "./card"
|
|
|
-import { MessageProgress } from "./message-progress"
|
|
|
import { Collapsible } from "./collapsible"
|
|
|
import { Dynamic } from "solid-js/web"
|
|
|
-
|
|
|
-// Track animation state per message ID - persists across re-renders
|
|
|
-// "empty" = first saw with no value (should animate when value arrives)
|
|
|
-// "animating" = currently animating (keep returning true)
|
|
|
-// "done" = already animated or first saw with value (never animate)
|
|
|
-const titleAnimationState = new Map<string, "empty" | "animating" | "done">()
|
|
|
-const summaryAnimationState = new Map<string, "empty" | "animating" | "done">()
|
|
|
+import { Button } from "./button"
|
|
|
+import { Spinner } from "./spinner"
|
|
|
+import { createStore } from "solid-js/store"
|
|
|
+import { DateTime, DurationUnit, Interval } from "luxon"
|
|
|
|
|
|
export function SessionTurn(
|
|
|
props: ParentProps<{
|
|
|
@@ -44,11 +40,7 @@ export function SessionTurn(
|
|
|
.filter((m) => m.role === "user")
|
|
|
.sort((a, b) => a.id.localeCompare(b.id)),
|
|
|
)
|
|
|
- const lastUserMessage = createMemo(() => {
|
|
|
- return userMessages()?.at(-1)
|
|
|
- })
|
|
|
const message = createMemo(() => userMessages()?.find((m) => m.id === props.messageID))
|
|
|
-
|
|
|
const status = createMemo(
|
|
|
() =>
|
|
|
data.store.session_status[props.sessionID] ?? {
|
|
|
@@ -61,114 +53,231 @@ export function SessionTurn(
|
|
|
<div data-component="session-turn" class={props.classes?.root}>
|
|
|
<div data-slot="session-turn-content" class={props.classes?.content}>
|
|
|
<Show when={message()}>
|
|
|
- {(msg) => {
|
|
|
- const [detailsExpanded, setDetailsExpanded] = createSignal(false)
|
|
|
-
|
|
|
- // Animation logic: only animate if we witness the value transition from empty to non-empty
|
|
|
- // Track in module-level Maps keyed by message ID so it persists across re-renders
|
|
|
-
|
|
|
- // Initialize animation state for current message (reactive - runs when msg().id changes)
|
|
|
- createEffect(() => {
|
|
|
- const id = msg().id
|
|
|
- if (!titleAnimationState.has(id)) {
|
|
|
- titleAnimationState.set(id, msg().summary?.title ? "done" : "empty")
|
|
|
- }
|
|
|
- if (!summaryAnimationState.has(id)) {
|
|
|
- const assistantMsgs = messages()?.filter(
|
|
|
- (m) => m.role === "assistant" && m.parentID == id,
|
|
|
- ) as AssistantMessage[]
|
|
|
- const parts = assistantMsgs?.flatMap((m) => data.store.part[m.id])
|
|
|
- const lastText = parts?.filter((p) => p?.type === "text")?.at(-1)
|
|
|
- const summaryValue = msg().summary?.body ?? lastText?.text
|
|
|
- summaryAnimationState.set(id, summaryValue ? "done" : "empty")
|
|
|
- }
|
|
|
-
|
|
|
- // When message changes or component unmounts, mark any "animating" states as "done"
|
|
|
- onCleanup(() => {
|
|
|
- if (titleAnimationState.get(id) === "animating") {
|
|
|
- titleAnimationState.set(id, "done")
|
|
|
- }
|
|
|
- if (summaryAnimationState.get(id) === "animating") {
|
|
|
- summaryAnimationState.set(id, "done")
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
+ {(message) => {
|
|
|
const assistantMessages = createMemo(() => {
|
|
|
- return messages()?.filter((m) => m.role === "assistant" && m.parentID == msg().id) as AssistantMessage[]
|
|
|
+ return messages()?.filter(
|
|
|
+ (m) => m.role === "assistant" && m.parentID == message().id,
|
|
|
+ ) as AssistantMessage[]
|
|
|
})
|
|
|
+ const lastAssistantMessage = createMemo(() => assistantMessages()?.at(-1))
|
|
|
const assistantMessageParts = createMemo(() => assistantMessages()?.flatMap((m) => data.store.part[m.id]))
|
|
|
const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
|
|
|
- const parts = createMemo(() => data.store.part[msg().id])
|
|
|
+ const parts = createMemo(() => data.store.part[message().id])
|
|
|
const lastTextPart = createMemo(() =>
|
|
|
assistantMessageParts()
|
|
|
.filter((p) => p?.type === "text")
|
|
|
?.at(-1),
|
|
|
)
|
|
|
- const hasToolPart = createMemo(() => assistantMessageParts().some((p) => p?.type === "tool"))
|
|
|
- const messageWorking = createMemo(() => msg().id === lastUserMessage()?.id && working())
|
|
|
- const initialCompleted = !(msg().id === lastUserMessage()?.id && working())
|
|
|
- const [completed, setCompleted] = createSignal(initialCompleted)
|
|
|
- const summary = createMemo(() => msg().summary?.body ?? lastTextPart()?.text)
|
|
|
- const lastTextPartShown = createMemo(() => !msg().summary?.body && (lastTextPart()?.text?.length ?? 0) > 0)
|
|
|
+ const summary = createMemo(() => message().summary?.body ?? lastTextPart()?.text)
|
|
|
+ const lastTextPartShown = createMemo(
|
|
|
+ () => !message().summary?.body && (lastTextPart()?.text?.length ?? 0) > 0,
|
|
|
+ )
|
|
|
|
|
|
- // Should animate: state is "empty" AND value now exists, or state is "animating"
|
|
|
- // Transition: empty -> animating -> done (done happens on cleanup)
|
|
|
- const animateTitle = createMemo(() => {
|
|
|
- const id = msg().id
|
|
|
- const state = titleAnimationState.get(id)
|
|
|
- const title = msg().summary?.title
|
|
|
- if (state === "animating") {
|
|
|
- return true
|
|
|
- }
|
|
|
- if (state === "empty" && title) {
|
|
|
- titleAnimationState.set(id, "animating")
|
|
|
- return true
|
|
|
+ const assistantParts = createMemo(() => assistantMessages().flatMap((m) => data.store.part[m.id]))
|
|
|
+ const currentTask = createMemo(
|
|
|
+ () =>
|
|
|
+ assistantParts().findLast(
|
|
|
+ (p) =>
|
|
|
+ p &&
|
|
|
+ p.type === "tool" &&
|
|
|
+ p.tool === "task" &&
|
|
|
+ p.state &&
|
|
|
+ "metadata" in p.state &&
|
|
|
+ p.state.metadata &&
|
|
|
+ p.state.metadata.sessionId &&
|
|
|
+ p.state.status === "running",
|
|
|
+ ) as ToolPart,
|
|
|
+ )
|
|
|
+ const resolvedParts = createMemo(() => {
|
|
|
+ let resolved = assistantParts()
|
|
|
+ const task = currentTask()
|
|
|
+ if (task && task.state && "metadata" in task.state && task.state.metadata?.sessionId) {
|
|
|
+ const messages = data.store.message[task.state.metadata.sessionId as string]?.filter(
|
|
|
+ (m) => m.role === "assistant",
|
|
|
+ )
|
|
|
+ resolved = messages?.flatMap((m) => data.store.part[m.id]) ?? assistantParts()
|
|
|
}
|
|
|
- return false
|
|
|
+ return resolved
|
|
|
})
|
|
|
- const animateSummary = createMemo(() => {
|
|
|
- const id = msg().id
|
|
|
- const state = summaryAnimationState.get(id)
|
|
|
- const value = summary()
|
|
|
- if (state === "animating") {
|
|
|
- return true
|
|
|
- }
|
|
|
- if (state === "empty" && value) {
|
|
|
- summaryAnimationState.set(id, "animating")
|
|
|
- return true
|
|
|
+ const lastPart = createMemo(() => resolvedParts().slice(-1)?.at(0))
|
|
|
+ const rawStatus = createMemo(() => {
|
|
|
+ const last = lastPart()
|
|
|
+ if (!last) return undefined
|
|
|
+
|
|
|
+ if (last.type === "tool") {
|
|
|
+ switch (last.tool) {
|
|
|
+ case "task":
|
|
|
+ return "Delegating work"
|
|
|
+ case "todowrite":
|
|
|
+ case "todoread":
|
|
|
+ return "Planning next steps"
|
|
|
+ case "read":
|
|
|
+ return "Gathering context"
|
|
|
+ case "list":
|
|
|
+ case "grep":
|
|
|
+ case "glob":
|
|
|
+ return "Searching the codebase"
|
|
|
+ case "webfetch":
|
|
|
+ return "Searching the web"
|
|
|
+ case "edit":
|
|
|
+ case "write":
|
|
|
+ return "Making edits"
|
|
|
+ case "bash":
|
|
|
+ return "Running commands"
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ } else if (last.type === "reasoning") {
|
|
|
+ return "Thinking"
|
|
|
+ } else if (last.type === "text") {
|
|
|
+ return "Gathering thoughts"
|
|
|
}
|
|
|
- return false
|
|
|
+ return undefined
|
|
|
+ })
|
|
|
+
|
|
|
+ function duration() {
|
|
|
+ const completed = lastAssistantMessage()?.time.completed
|
|
|
+ const from = DateTime.fromMillis(message()!.time.created)
|
|
|
+ const to = completed ? DateTime.fromMillis(completed) : DateTime.now()
|
|
|
+ const interval = Interval.fromDateTimes(from, to)
|
|
|
+ const unit: DurationUnit[] = interval.length("seconds") > 60 ? ["minutes", "seconds"] : ["seconds"]
|
|
|
+
|
|
|
+ return interval.toDuration(unit).normalize().toHuman({
|
|
|
+ notation: "compact",
|
|
|
+ unitDisplay: "narrow",
|
|
|
+ compactDisplay: "short",
|
|
|
+ showZeros: false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const [store, setStore] = createStore({
|
|
|
+ status: rawStatus(),
|
|
|
+ detailsExpanded: true,
|
|
|
+ duration: duration(),
|
|
|
})
|
|
|
|
|
|
createEffect(() => {
|
|
|
- const done = !messageWorking()
|
|
|
- setTimeout(() => setCompleted(done), 1200)
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ setStore("duration", duration())
|
|
|
+ }, 1000)
|
|
|
+ onCleanup(() => clearInterval(timer))
|
|
|
+ })
|
|
|
+
|
|
|
+ let lastStatusChange = Date.now()
|
|
|
+ let statusTimeout: number | undefined
|
|
|
+ createEffect(() => {
|
|
|
+ const newStatus = rawStatus()
|
|
|
+ if (newStatus === store.status || !newStatus) return
|
|
|
+
|
|
|
+ const timeSinceLastChange = Date.now() - lastStatusChange
|
|
|
+
|
|
|
+ if (timeSinceLastChange >= 2500) {
|
|
|
+ setStore("status", newStatus)
|
|
|
+ lastStatusChange = Date.now()
|
|
|
+ if (statusTimeout) {
|
|
|
+ clearTimeout(statusTimeout)
|
|
|
+ statusTimeout = undefined
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (statusTimeout) clearTimeout(statusTimeout)
|
|
|
+ statusTimeout = setTimeout(() => {
|
|
|
+ setStore("status", rawStatus())
|
|
|
+ lastStatusChange = Date.now()
|
|
|
+ statusTimeout = undefined
|
|
|
+ }, 1000 - timeSinceLastChange) as unknown as number
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
return (
|
|
|
- <div data-message={msg().id} data-slot="session-turn-message-container" class={props.classes?.container}>
|
|
|
+ <div
|
|
|
+ data-message={message().id}
|
|
|
+ data-slot="session-turn-message-container"
|
|
|
+ class={props.classes?.container}
|
|
|
+ >
|
|
|
{/* Title */}
|
|
|
<div data-slot="session-turn-message-header">
|
|
|
<div data-slot="session-turn-message-title">
|
|
|
- <Show
|
|
|
- when={!animateTitle()}
|
|
|
- fallback={<Typewriter as="h1" text={msg().summary?.title} data-slot="session-turn-typewriter" />}
|
|
|
- >
|
|
|
- <h1>{msg().summary?.title}</h1>
|
|
|
- </Show>
|
|
|
+ <Switch>
|
|
|
+ <Match when={working()}>
|
|
|
+ <Typewriter as="h1" text={message().summary?.title} data-slot="session-turn-typewriter" />
|
|
|
+ </Match>
|
|
|
+ <Match when={true}>
|
|
|
+ <h1>{message().summary?.title}</h1>
|
|
|
+ </Match>
|
|
|
+ </Switch>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div data-slot="session-turn-message-content">
|
|
|
- <Message message={msg()} parts={parts()} sanitize={sanitizer()} />
|
|
|
+ <Message message={message()} parts={parts()} sanitize={sanitizer()} />
|
|
|
+ </div>
|
|
|
+ {/* Response */}
|
|
|
+ <div data-slot="session-turn-response-section">
|
|
|
+ <Collapsible
|
|
|
+ variant="ghost"
|
|
|
+ open={store.detailsExpanded}
|
|
|
+ onOpenChange={(open) => setStore("detailsExpanded", open)}
|
|
|
+ data-slot="session-turn-collapsible"
|
|
|
+ >
|
|
|
+ <Collapsible.Trigger
|
|
|
+ as={Button}
|
|
|
+ data-slot="session-turn-collapsible-trigger-content"
|
|
|
+ variant="ghost"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <Show when={working()}>
|
|
|
+ <Spinner />
|
|
|
+ </Show>
|
|
|
+ <Switch>
|
|
|
+ <Match when={working()}>{store.status ?? "Considering next steps..."}</Match>
|
|
|
+ <Match when={store.detailsExpanded}>Hide steps</Match>
|
|
|
+ <Match when={!store.detailsExpanded}>Show steps</Match>
|
|
|
+ </Switch>
|
|
|
+ <span>·</span>
|
|
|
+ <span>{store.duration}</span>
|
|
|
+ <Icon name="chevron-grabber-vertical" size="small" />
|
|
|
+ </Collapsible.Trigger>
|
|
|
+ <Collapsible.Content>
|
|
|
+ <div data-slot="session-turn-collapsible-content-inner">
|
|
|
+ <For each={assistantMessages()}>
|
|
|
+ {(assistantMessage) => {
|
|
|
+ const parts = createMemo(() => data.store.part[assistantMessage.id] ?? [])
|
|
|
+ const last = createMemo(() =>
|
|
|
+ parts()
|
|
|
+ .filter((p) => p?.type === "text")
|
|
|
+ .at(-1),
|
|
|
+ )
|
|
|
+ return (
|
|
|
+ <Switch>
|
|
|
+ <Match when={lastTextPartShown() && lastTextPart()?.id === last()?.id}>
|
|
|
+ <Message
|
|
|
+ message={assistantMessage}
|
|
|
+ parts={parts().filter((p) => p?.id !== last()?.id)}
|
|
|
+ sanitize={sanitizer()}
|
|
|
+ />
|
|
|
+ </Match>
|
|
|
+ <Match when={true}>
|
|
|
+ <Message message={assistantMessage} parts={parts()} sanitize={sanitizer()} />
|
|
|
+ </Match>
|
|
|
+ </Switch>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </For>
|
|
|
+ <Show when={error()}>
|
|
|
+ <Card variant="error" class="error-card">
|
|
|
+ {error()?.data?.message as string}
|
|
|
+ </Card>
|
|
|
+ </Show>
|
|
|
+ </div>
|
|
|
+ </Collapsible.Content>
|
|
|
+ </Collapsible>
|
|
|
</div>
|
|
|
{/* Summary */}
|
|
|
- <Show when={completed()}>
|
|
|
+ <Show when={!working()}>
|
|
|
<div data-slot="session-turn-summary-section">
|
|
|
<div data-slot="session-turn-summary-header">
|
|
|
<h2 data-slot="session-turn-summary-title">
|
|
|
<Switch>
|
|
|
- <Match when={msg().summary?.diffs?.length}>Summary</Match>
|
|
|
+ <Match when={message().summary?.diffs?.length}>Summary</Match>
|
|
|
<Match when={true}>Response</Match>
|
|
|
</Switch>
|
|
|
</h2>
|
|
|
@@ -176,15 +285,14 @@ export function SessionTurn(
|
|
|
{(summary) => (
|
|
|
<Markdown
|
|
|
data-slot="session-turn-markdown"
|
|
|
- data-diffs={!!msg().summary?.diffs?.length}
|
|
|
- data-fade={!msg().summary?.diffs?.length && animateSummary()}
|
|
|
+ data-diffs={!!message().summary?.diffs?.length}
|
|
|
text={summary()}
|
|
|
/>
|
|
|
)}
|
|
|
</Show>
|
|
|
</div>
|
|
|
<Accordion data-slot="session-turn-accordion" multiple>
|
|
|
- <For each={msg().summary?.diffs ?? []}>
|
|
|
+ <For each={message().summary?.diffs ?? []}>
|
|
|
{(diff) => (
|
|
|
<Accordion.Item value={diff.file}>
|
|
|
<StickyAccordionHeader>
|
|
|
@@ -230,63 +338,11 @@ export function SessionTurn(
|
|
|
</Accordion>
|
|
|
</div>
|
|
|
</Show>
|
|
|
- <Show when={error() && !detailsExpanded()}>
|
|
|
+ <Show when={error() && !store.detailsExpanded}>
|
|
|
<Card variant="error" class="error-card">
|
|
|
{error()?.data?.message as string}
|
|
|
</Card>
|
|
|
</Show>
|
|
|
- {/* Response */}
|
|
|
- <div data-slot="session-turn-response-section">
|
|
|
- <Switch>
|
|
|
- <Match when={!completed()}>
|
|
|
- <MessageProgress assistantMessages={assistantMessages} done={!messageWorking()} />
|
|
|
- </Match>
|
|
|
- <Match when={completed() && hasToolPart()}>
|
|
|
- <Collapsible variant="ghost" open={detailsExpanded()} onOpenChange={setDetailsExpanded}>
|
|
|
- <Collapsible.Trigger>
|
|
|
- <div data-slot="session-turn-collapsible-trigger-content">
|
|
|
- <div data-slot="session-turn-details-text">
|
|
|
- <Switch>
|
|
|
- <Match when={detailsExpanded()}>Hide details</Match>
|
|
|
- <Match when={!detailsExpanded()}>Show details</Match>
|
|
|
- </Switch>
|
|
|
- </div>
|
|
|
- <Collapsible.Arrow />
|
|
|
- </div>
|
|
|
- </Collapsible.Trigger>
|
|
|
- <Collapsible.Content>
|
|
|
- <div data-slot="session-turn-collapsible-content-inner">
|
|
|
- <For each={assistantMessages()}>
|
|
|
- {(assistantMessage) => {
|
|
|
- const parts = createMemo(() => data.store.part[assistantMessage.id])
|
|
|
- const last = createMemo(() =>
|
|
|
- parts()
|
|
|
- .filter((p) => p?.type === "text")
|
|
|
- .at(-1),
|
|
|
- )
|
|
|
- if (lastTextPartShown() && lastTextPart()?.id === last()?.id) {
|
|
|
- return (
|
|
|
- <Message
|
|
|
- message={assistantMessage}
|
|
|
- parts={parts().filter((p) => p?.id !== last()?.id)}
|
|
|
- sanitize={sanitizer()}
|
|
|
- />
|
|
|
- )
|
|
|
- }
|
|
|
- return <Message message={assistantMessage} parts={parts()} sanitize={sanitizer()} />
|
|
|
- }}
|
|
|
- </For>
|
|
|
- <Show when={error()}>
|
|
|
- <Card variant="error" class="error-card">
|
|
|
- {error()?.data?.message as string}
|
|
|
- </Card>
|
|
|
- </Show>
|
|
|
- </div>
|
|
|
- </Collapsible.Content>
|
|
|
- </Collapsible>
|
|
|
- </Match>
|
|
|
- </Switch>
|
|
|
- </div>
|
|
|
</div>
|
|
|
)
|
|
|
}}
|
Adam