summaryrefslogtreecommitdiffhomepage
path: root/packages/ui
diff options
context:
space:
mode:
authorAdam <[email protected]>2025-12-12 13:27:19 -0600
committerAdam <[email protected]>2025-12-12 15:24:41 -0600
commit78484f545cd6a0a1d326079907d51bee4e871936 (patch)
tree96c670463a827cf9fd2d3fcadf4e0b4bd706fbcd /packages/ui
parentad008d2151b13b7dd858fa7dc557748a1b7d4d27 (diff)
downloadopencode-78484f545cd6a0a1d326079907d51bee4e871936.tar.gz
opencode-78484f545cd6a0a1d326079907d51bee4e871936.zip
chore: cleanup
Diffstat (limited to 'packages/ui')
-rw-r--r--packages/ui/src/components/message-progress.css50
-rw-r--r--packages/ui/src/components/message-progress.tsx179
-rw-r--r--packages/ui/src/styles/index.css1
3 files changed, 0 insertions, 230 deletions
diff --git a/packages/ui/src/components/message-progress.css b/packages/ui/src/components/message-progress.css
deleted file mode 100644
index 0b84e0393..000000000
--- a/packages/ui/src/components/message-progress.css
+++ /dev/null
@@ -1,50 +0,0 @@
-[data-component="message-progress"] {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-[data-component="message-progress"] [data-slot="message-progress-status"] {
- display: flex;
- align-items: center;
- column-gap: 20px;
- padding-left: 12px;
- border: 1px solid transparent;
- color: var(--text-base);
-}
-
-[data-component="message-progress"] [data-slot="message-progress-status-text"] {
- font-size: 12px;
- font-weight: 500;
- line-height: 1.5;
-}
-
-[data-component="message-progress"] [data-slot="message-progress-list-container"] {
- height: 120px;
- overflow: hidden;
- pointer-events: none;
- padding-bottom: 4px;
-
- mask-image: linear-gradient(to bottom, transparent 0%, black 33%, black 95%, transparent 100%);
- -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 33%, black 95%, transparent 100%);
-}
-
-[data-component="message-progress"] [data-slot="message-progress-list"] {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- align-self: stretch;
- gap: 8px;
- padding-top: 32px;
- padding-bottom: 32px;
-
- transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-[data-component="message-progress"] [data-slot="message-progress-item"] {
- height: 32px;
- display: flex;
- align-items: center;
- width: 100%;
-}
diff --git a/packages/ui/src/components/message-progress.tsx b/packages/ui/src/components/message-progress.tsx
deleted file mode 100644
index a6d56b397..000000000
--- a/packages/ui/src/components/message-progress.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { For, JSXElement, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
-import { Part } from "./message-part"
-import { Spinner } from "./spinner"
-import { useData } from "../context/data"
-import type { AssistantMessage as AssistantMessageType, ToolPart } from "@opencode-ai/sdk/v2"
-
-export interface MessageProgressProps {
- assistantMessages: () => AssistantMessageType[]
- done?: boolean
-}
-
-export function MessageProgress(props: MessageProgressProps) {
- const data = useData()
- const sanitizer = createMemo(() => (data.directory ? new RegExp(`${data.directory}/`, "g") : undefined))
- const parts = createMemo(() => props.assistantMessages().flatMap((m) => data.store.part[m.id]))
- const done = createMemo(() => props.done ?? false)
- const currentTask = createMemo(
- () =>
- parts().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 = parts()
- 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]) ?? parts()
- }
- return resolved
- })
-
- const eligibleItems = createMemo(() => {
- return resolvedParts().filter((p) => p?.type === "tool" && p?.state.status === "completed") as ToolPart[]
- })
- const finishedItems = createMemo<(JSXElement | ToolPart)[]>(() => [
- <div data-slot="message-progress-item" />,
- <div data-slot="message-progress-item" />,
- <div data-slot="message-progress-item" />,
- ...eligibleItems(),
- ...(done()
- ? [
- <div data-slot="message-progress-item" />,
- <div data-slot="message-progress-item" />,
- <div data-slot="message-progress-item" />,
- ]
- : []),
- ])
-
- const delay = createMemo(() => (done() ? 220 : 400))
- const [visibleCount, setVisibleCount] = createSignal(eligibleItems().length)
-
- createEffect(() => {
- const total = finishedItems().length
- if (total > visibleCount()) {
- const timer = setTimeout(() => {
- setVisibleCount((prev) => prev + 1)
- }, delay())
- onCleanup(() => clearTimeout(timer))
- } else if (total < visibleCount()) {
- setVisibleCount(total)
- }
- })
-
- const translateY = createMemo(() => {
- const total = visibleCount()
- if (total < 2) return "0px"
- return `-${(total - 2) * 40 - 8}px`
- })
-
- 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 undefined
- })
-
- const [status, setStatus] = createSignal(rawStatus())
- let lastStatusChange = Date.now()
- let statusTimeout: number | undefined
-
- createEffect(() => {
- const newStatus = rawStatus()
- if (newStatus === status() || !newStatus) return
-
- const timeSinceLastChange = Date.now() - lastStatusChange
-
- if (timeSinceLastChange >= 1500) {
- setStatus(newStatus)
- lastStatusChange = Date.now()
- if (statusTimeout) {
- clearTimeout(statusTimeout)
- statusTimeout = undefined
- }
- } else {
- if (statusTimeout) clearTimeout(statusTimeout)
- statusTimeout = setTimeout(() => {
- setStatus(rawStatus())
- lastStatusChange = Date.now()
- statusTimeout = undefined
- }, 1000 - timeSinceLastChange) as unknown as number
- }
- })
-
- return (
- <div data-component="message-progress">
- <div data-slot="message-progress-status">
- <Spinner /> <span data-slot="message-progress-status-text">{status() ?? "Considering next steps..."}</span>
- </div>
- <Show when={eligibleItems().length > 0}>
- <div data-slot="message-progress-list-container">
- <div data-slot="message-progress-list" style={{ transform: `translateY(${translateY()})` }}>
- <For each={finishedItems()}>
- {(part) => (
- <Switch>
- <Match when={part && typeof part === "object" && "type" in part && part}>
- {(p) => {
- const part = p() as ToolPart
- const message = createMemo(() =>
- data.store.message[part.sessionID].find((m) => m.id === part.messageID),
- )
- return (
- <div data-slot="message-progress-item">
- <Part message={message()!} part={part} sanitize={sanitizer()} />
- </div>
- )
- }}
- </Match>
- <Match when={true}>
- <div data-slot="message-progress-item">{part as JSXElement}</div>
- </Match>
- </Switch>
- )}
- </For>
- </div>
- </div>
- </Show>
- </div>
- )
-}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index d60082d93..ba2c954bc 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -26,7 +26,6 @@
@import "../components/logo.css" layer(components);
@import "../components/markdown.css" layer(components);
@import "../components/message-part.css" layer(components);
-@import "../components/message-progress.css" layer(components);
@import "../components/message-nav.css" layer(components);
@import "../components/progress-circle.css" layer(components);
@import "../components/resize-handle.css" layer(components);