diff options
Diffstat (limited to 'packages/ui/src/components')
| -rw-r--r-- | packages/ui/src/components/basic-tool.css (renamed from packages/ui/src/components/tool-display.css) | 0 | ||||
| -rw-r--r-- | packages/ui/src/components/basic-tool.tsx (renamed from packages/ui/src/components/tool-display.tsx) | 0 | ||||
| -rw-r--r-- | packages/ui/src/components/index.ts | 8 | ||||
| -rw-r--r-- | packages/ui/src/components/markdown.css | 24 | ||||
| -rw-r--r-- | packages/ui/src/components/markdown.tsx | 36 | ||||
| -rw-r--r-- | packages/ui/src/components/message-part.css | 107 | ||||
| -rw-r--r-- | packages/ui/src/components/message-part.tsx | 365 | ||||
| -rw-r--r-- | packages/ui/src/components/tool-registry.tsx | 33 |
8 files changed, 537 insertions, 36 deletions
diff --git a/packages/ui/src/components/tool-display.css b/packages/ui/src/components/basic-tool.css index f3d9f865f..f3d9f865f 100644 --- a/packages/ui/src/components/tool-display.css +++ b/packages/ui/src/components/basic-tool.css diff --git a/packages/ui/src/components/tool-display.tsx b/packages/ui/src/components/basic-tool.tsx index 43574fbb7..43574fbb7 100644 --- a/packages/ui/src/components/tool-display.tsx +++ b/packages/ui/src/components/basic-tool.tsx diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 29e8cfe3b..8d6ddc89c 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -11,11 +11,15 @@ export * from "./icon-button" export * from "./input" export * from "./fonts" export * from "./list" +export * from "./markdown" export * from "./message-part" export * from "./progress-circle" export * from "./select" export * from "./select-dialog" export * from "./tabs" -export * from "./tool-display" -export * from "./tool-registry" +export * from "./basic-tool" export * from "./tooltip" + +export * from "../context/helper" +export * from "../context/shiki" +export * from "../context/marked" diff --git a/packages/ui/src/components/markdown.css b/packages/ui/src/components/markdown.css new file mode 100644 index 000000000..ddf8b7872 --- /dev/null +++ b/packages/ui/src/components/markdown.css @@ -0,0 +1,24 @@ +[data-component="markdown"] { + min-width: 0; + max-width: 100%; + overflow: auto; + scrollbar-width: none; + color: var(--text-base); + + /* text-14-regular */ + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); /* 142.857% */ + letter-spacing: var(--letter-spacing-normal); + + &::-webkit-scrollbar { + display: none; + } + + /* p { */ + /* margin-top: 8px; */ + /* margin-bottom: 8px; */ + /* } */ +} diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx new file mode 100644 index 000000000..071132e80 --- /dev/null +++ b/packages/ui/src/components/markdown.tsx @@ -0,0 +1,36 @@ +import { useMarked } from "../context/marked" +import { ComponentProps, createResource, splitProps } from "solid-js" + +function strip(text: string): string { + const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/ + const match = text.match(wrappedRe) + return match ? match[2] : text +} + +export function Markdown( + props: ComponentProps<"div"> & { + text: string + class?: string + classList?: Record<string, boolean> + }, +) { + const [local, others] = splitProps(props, ["text", "class", "classList"]) + const marked = useMarked() + const [html] = createResource( + () => strip(local.text), + async (markdown) => { + return marked.parse(markdown) + }, + ) + return ( + <div + data-component="markdown" + classList={{ + ...(local.classList ?? {}), + [local.class ?? ""]: !!local.class, + }} + innerHTML={html()} + {...others} + /> + ) +} diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index 8931d3bc6..fa251a2b3 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -20,3 +20,110 @@ -webkit-box-orient: vertical; overflow: hidden; } + +[data-component="text-part"] { + [data-component="markdown"] { + margin-top: 32px; + } +} + +[data-component="tool-error"] { + display: flex; + align-items: center; + gap: 8px; + + [data-slot="icon"] { + color: var(--icon-critical-active); + } + + [data-slot="content"] { + display: flex; + align-items: center; + gap: 8px; + } + + [data-slot="title"] { + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + color: var(--ember-light-11); + text-transform: capitalize; + } +} + +[data-component="tool-output"] { + white-space: pre; +} + +[data-component="edit-trigger"], +[data-component="write-trigger"] { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + + [data-slot="title-area"] { + display: flex; + align-items: center; + gap: 8px; + } + + [data-slot="title"] { + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + color: var(--text-base); + text-transform: capitalize; + } + + [data-slot="path"] { + display: flex; + } + + [data-slot="directory"] { + color: var(--text-weak); + } + + [data-slot="filename"] { + color: var(--text-strong); + } + + [data-slot="actions"] { + display: flex; + gap: 16px; + align-items: center; + justify-content: flex-end; + } +} + +[data-component="edit-content"] { + border-top: 1px solid var(--border-weaker-base); +} + +[data-component="tool-action"] { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +[data-component="todos"] { + padding: 10px 12px 24px 48px; + display: flex; + flex-direction: column; + gap: 8px; + + [data-slot="todo-content"] { + &[data-completed="completed"] { + text-decoration: line-through; + color: var(--text-weaker); + } + } +} diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index 06f5046dc..1aaab751a 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -8,6 +8,14 @@ import { ToolPart, UserMessage, } from "@opencode-ai/sdk" +import { BasicTool } from "./basic-tool" +import { GenericTool } from "./basic-tool" +import { Card } from "./card" +import { Icon } from "./icon" +import { Checkbox } from "./checkbox" +import { Diff } from "./diff" +import { DiffChanges } from "./diff-changes" +import { Markdown } from "./markdown" export interface MessageProps { message: MessageType @@ -22,7 +30,20 @@ export interface MessagePartProps { export type PartComponent = Component<MessagePartProps> -const PART_MAPPING: Record<string, PartComponent | undefined> = {} +export const PART_MAPPING: Record<string, PartComponent | undefined> = {} + +function getFilename(path: string) { + if (!path) return "" + const trimmed = path.replace(/[\/]+$/, "") + const parts = trimmed.split("/") + return parts[parts.length - 1] ?? "" +} + +function getDirectory(path: string) { + const parts = path.split("/") + const dir = parts.slice(0, parts.length - 1).join("/") + return dir ? dir + "/" : "" +} export function registerPartComponent(type: string, component: PartComponent) { PART_MAPPING[type] = component @@ -81,3 +102,345 @@ export function Part(props: MessagePartProps) { </Show> ) } + +export interface ToolProps { + input: Record<string, any> + metadata: Record<string, any> + tool: string + output?: string + hideDetails?: boolean +} + +export type ToolComponent = Component<ToolProps> + +const state: Record< + string, + { + name: string + render?: ToolComponent + } +> = {} + +export function registerTool(input: { name: string; render?: ToolComponent }) { + state[input.name] = input + return input +} + +export function getTool(name: string) { + return state[name]?.render +} + +export const ToolRegistry = { + register: registerTool, + render: getTool, +} + +PART_MAPPING["tool"] = function ToolPartDisplay(props) { + const part = props.part as ToolPart + const component = createMemo(() => { + const render = ToolRegistry.render(part.tool) ?? GenericTool + const metadata = part.state.status === "pending" ? {} : (part.state.metadata ?? {}) + const input = part.state.status === "completed" ? part.state.input : {} + + return ( + <Switch> + <Match when={part.state.status === "error" && part.state.error}> + {(error) => { + const cleaned = error().replace("Error: ", "") + const [title, ...rest] = cleaned.split(": ") + return ( + <Card variant="error"> + <div data-component="tool-error"> + <Icon name="circle-ban-sign" size="small" data-slot="icon" /> + <Switch> + <Match when={title}> + <div data-slot="content"> + <div data-slot="title">{title}</div> + <span>{rest.join(": ")}</span> + </div> + </Match> + <Match when={true}>{cleaned}</Match> + </Switch> + </div> + </Card> + ) + }} + </Match> + <Match when={true}> + <Dynamic + component={render} + input={input} + tool={part.tool} + metadata={metadata} + output={part.state.status === "completed" ? part.state.output : undefined} + hideDetails={props.hideDetails} + /> + </Match> + </Switch> + ) + }) + + return <Show when={component()}>{component()}</Show> +} + +PART_MAPPING["text"] = function TextPartDisplay(props) { + const part = props.part as TextPart + return ( + <Show when={part.text.trim()}> + <div data-component="text-part"> + <Markdown text={part.text.trim()} /> + </div> + </Show> + ) +} + +PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props) { + const part = props.part as any + return ( + <Show when={part.text.trim()}> + <div data-component="reasoning-part"> + <Markdown text={part.text.trim()} /> + </div> + </Show> + ) +} + +ToolRegistry.register({ + name: "read", + render(props) { + return ( + <BasicTool + icon="glasses" + trigger={{ + title: "Read", + subtitle: props.input.filePath ? getFilename(props.input.filePath) : "", + }} + /> + ) + }, +}) + +ToolRegistry.register({ + name: "list", + render(props) { + return ( + <BasicTool + icon="bullet-list" + trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }} + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "glob", + render(props) { + return ( + <BasicTool + icon="magnifying-glass-menu" + trigger={{ + title: "Glob", + subtitle: getDirectory(props.input.path || "/"), + args: props.input.pattern ? ["pattern=" + props.input.pattern] : [], + }} + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "grep", + render(props) { + const args = [] + if (props.input.pattern) args.push("pattern=" + props.input.pattern) + if (props.input.include) args.push("include=" + props.input.include) + return ( + <BasicTool + icon="magnifying-glass-menu" + trigger={{ + title: "Grep", + subtitle: getDirectory(props.input.path || "/"), + args, + }} + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "webfetch", + render(props) { + return ( + <BasicTool + icon="window-cursor" + trigger={{ + title: "Webfetch", + subtitle: props.input.url || "", + args: props.input.format ? ["format=" + props.input.format] : [], + action: ( + <div data-component="tool-action"> + <Icon name="square-arrow-top-right" size="small" /> + </div> + ), + }} + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "task", + render(props) { + return ( + <BasicTool + icon="task" + trigger={{ + title: `${props.input.subagent_type || props.tool} Agent`, + titleClass: "capitalize", + subtitle: props.input.description, + }} + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "bash", + render(props) { + return ( + <BasicTool + icon="console" + trigger={{ + title: "Shell", + subtitle: "Ran " + props.input.command, + }} + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "edit", + render(props) { + return ( + <BasicTool + icon="code-lines" + trigger={ + <div data-component="edit-trigger"> + <div data-slot="title-area"> + <div data-slot="title">Edit</div> + <div data-slot="path"> + <Show when={props.input.filePath?.includes("/")}> + <span data-slot="directory">{getDirectory(props.input.filePath!)}</span> + </Show> + <span data-slot="filename">{getFilename(props.input.filePath ?? "")}</span> + </div> + </div> + <div data-slot="actions"> + <Show when={props.metadata.filediff}> + <DiffChanges diff={props.metadata.filediff} /> + </Show> + </div> + </div> + } + > + <Show when={props.metadata.filediff}> + <div data-component="edit-content"> + <Diff + before={{ + name: getFilename(props.metadata.filediff.path), + contents: props.metadata.filediff.before, + }} + after={{ + name: getFilename(props.metadata.filediff.path), + contents: props.metadata.filediff.after, + }} + /> + </div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "write", + render(props) { + return ( + <BasicTool + icon="code-lines" + trigger={ + <div data-component="write-trigger"> + <div data-slot="title-area"> + <div data-slot="title">Write</div> + <div data-slot="path"> + <Show when={props.input.filePath?.includes("/")}> + <span data-slot="directory">{getDirectory(props.input.filePath!)}</span> + </Show> + <span data-slot="filename">{getFilename(props.input.filePath ?? "")}</span> + </div> + </div> + <div data-slot="actions">{/* <DiffChanges diff={diff} /> */}</div> + </div> + } + > + <Show when={false && props.output}> + <div data-component="tool-output">{props.output}</div> + </Show> + </BasicTool> + ) + }, +}) + +ToolRegistry.register({ + name: "todowrite", + render(props) { + return ( + <BasicTool + icon="checklist" + trigger={{ + title: "To-dos", + subtitle: `${props.input.todos?.filter((t: any) => t.status === "completed").length}/${props.input.todos?.length}`, + }} + > + <Show when={props.input.todos?.length}> + <div data-component="todos"> + <For each={props.input.todos}> + {(todo: any) => ( + <Checkbox readOnly checked={todo.status === "completed"}> + <div data-slot="todo-content" data-completed={todo.status === "completed"}> + {todo.content} + </div> + </Checkbox> + )} + </For> + </div> + </Show> + </BasicTool> + ) + }, +}) diff --git a/packages/ui/src/components/tool-registry.tsx b/packages/ui/src/components/tool-registry.tsx deleted file mode 100644 index 8ee7d8293..000000000 --- a/packages/ui/src/components/tool-registry.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from "solid-js" - -export interface ToolProps { - input: Record<string, any> - metadata: Record<string, any> - tool: string - output?: string - hideDetails?: boolean -} - -export type ToolComponent = Component<ToolProps> - -const state: Record< - string, - { - name: string - render?: ToolComponent - } -> = {} - -export function registerTool(input: { name: string; render?: ToolComponent }) { - state[input.name] = input - return input -} - -export function getTool(name: string) { - return state[name]?.render -} - -export const ToolRegistry = { - register: registerTool, - render: getTool, -} |