summaryrefslogtreecommitdiffhomepage
path: root/packages/web/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/web/src/components')
-rw-r--r--packages/web/src/components/Share.tsx46
-rw-r--r--packages/web/src/components/icons/index.tsx9
-rw-r--r--packages/web/src/components/share/common.tsx7
-rw-r--r--packages/web/src/components/share/content-code.tsx6
-rw-r--r--packages/web/src/components/share/content-diff.tsx20
-rw-r--r--packages/web/src/components/share/copy-button.tsx6
-rw-r--r--packages/web/src/components/share/part.tsx115
7 files changed, 37 insertions, 172 deletions
diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx
index 486b6e44b..062449712 100644
--- a/packages/web/src/components/Share.tsx
+++ b/packages/web/src/components/Share.tsx
@@ -1,14 +1,4 @@
-import {
- For,
- Show,
- onMount,
- Suspense,
- onCleanup,
- createMemo,
- createSignal,
- SuspenseList,
- createEffect,
-} from "solid-js"
+import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList, createEffect } from "solid-js"
import { DateTime } from "luxon"
import { createStore, reconcile, unwrap } from "solid-js/store"
import { IconArrowDown } from "./icons"
@@ -76,13 +66,8 @@ export default function Share(props: { id: string; api: string; info: Session.In
},
messages: {},
})
- const messages = createMemo(() =>
- Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)),
- )
- const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>([
- "disconnected",
- "Disconnected",
- ])
+ const messages = createMemo(() => Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)))
+ const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>(["disconnected", "Disconnected"])
createEffect(() => {
console.log(unwrap(store))
})
@@ -345,9 +330,7 @@ export default function Share(props: { id: string; api: string; info: Session.In
</ul>
<div
data-component="header-time"
- title={DateTime.fromMillis(data().created || 0).toLocaleString(
- DateTime.DATETIME_FULL_WITH_SECONDS,
- )}
+ title={DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
>
{DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)}
</div>
@@ -369,10 +352,7 @@ export default function Share(props: { id: string; api: string; info: Session.In
if (x.type === "text" && x.synthetic === true) return false
if (x.type === "tool" && x.tool === "todoread") return false
if (x.type === "text" && !x.text) return false
- if (
- x.type === "tool" &&
- (x.state.status === "pending" || x.state.status === "running")
- )
+ if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running"))
return false
return true
}),
@@ -384,8 +364,7 @@ export default function Share(props: { id: string; api: string; info: Session.In
{(part, partIndex) => {
const last = createMemo(
() =>
- data().messages.length === msgIndex() + 1 &&
- filteredParts().length === partIndex() + 1,
+ data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1,
)
onMount(() => {
@@ -402,9 +381,7 @@ export default function Share(props: { id: string; api: string; info: Session.In
}
})
- return (
- <Part last={last()} part={part} index={partIndex()} message={msg} />
- )
+ return <Part last={last()} part={part} index={partIndex()} message={msg} />
}}
</For>
</Suspense>
@@ -429,11 +406,7 @@ export default function Share(props: { id: string; api: string; info: Session.In
</li>
<li>
<span data-element-label>Input Tokens</span>
- {data().tokens.input ? (
- <span>{data().tokens.input}</span>
- ) : (
- <span data-placeholder>&mdash;</span>
- )}
+ {data().tokens.input ? <span>{data().tokens.input}</span> : <span data-placeholder>&mdash;</span>}
</li>
<li>
<span data-element-label>Output Tokens</span>
@@ -587,8 +560,7 @@ export function fromV1(v1: Message.Info): MessageWithParts {
}
}
- const { title, time, ...metadata } =
- v1.metadata.tool[part.toolInvocation.toolCallId]
+ const { title, time, ...metadata } = v1.metadata.tool[part.toolInvocation.toolCallId]
if (part.toolInvocation.state === "call") {
return {
status: "running",
diff --git a/packages/web/src/components/icons/index.tsx b/packages/web/src/components/icons/index.tsx
index 9aef7a927..62445611f 100644
--- a/packages/web/src/components/icons/index.tsx
+++ b/packages/web/src/components/icons/index.tsx
@@ -4418,14 +4418,7 @@ export function IconMultiSelect(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
}
export function IconSettings(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
- <svg
- {...props}
- width="16"
- height="16"
- viewBox="0 0 16 16"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
+ <svg {...props} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1256_16163)">
<path
fill-rule="evenodd"
diff --git a/packages/web/src/components/share/common.tsx b/packages/web/src/components/share/common.tsx
index 9520516c6..cab2dbdb0 100644
--- a/packages/web/src/components/share/common.tsx
+++ b/packages/web/src/components/share/common.tsx
@@ -10,12 +10,7 @@ export function AnchorIcon(props: AnchorProps) {
const [copied, setCopied] = createSignal(false)
return (
- <div
- {...rest}
- data-element-anchor
- title="Link to this message"
- data-status={copied() ? "copied" : ""}
- >
+ <div {...rest} data-element-anchor title="Link to this message" data-status={copied() ? "copied" : ""}>
<a
href={`#${local.id}`}
onClick={(e) => {
diff --git a/packages/web/src/components/share/content-code.tsx b/packages/web/src/components/share/content-code.tsx
index 0f9d28fa3..2f383b8be 100644
--- a/packages/web/src/components/share/content-code.tsx
+++ b/packages/web/src/components/share/content-code.tsx
@@ -26,11 +26,7 @@ export function ContentCode(props: Props) {
)
return (
<Suspense>
- <div
- innerHTML={html()}
- class={style.root}
- data-flush={props.flush === true ? true : undefined}
- />
+ <div innerHTML={html()} class={style.root} data-flush={props.flush === true ? true : undefined} />
</Suspense>
)
}
diff --git a/packages/web/src/components/share/content-diff.tsx b/packages/web/src/components/share/content-diff.tsx
index 79c2723cb..9ccd554d0 100644
--- a/packages/web/src/components/share/content-diff.tsx
+++ b/packages/web/src/components/share/content-diff.tsx
@@ -124,9 +124,7 @@ export function ContentDiff(props: Props) {
// Collect consecutive modified/removed/added rows
while (
i < currentRows.length &&
- (currentRows[i].type === "modified" ||
- currentRows[i].type === "removed" ||
- currentRows[i].type === "added")
+ (currentRows[i].type === "modified" || currentRows[i].type === "removed" || currentRows[i].type === "added")
) {
const row = currentRows[i]
if (row.left && (row.type === "removed" || row.type === "modified")) {
@@ -164,16 +162,10 @@ export function ContentDiff(props: Props) {
<div data-component="desktop">
{rows().map((r) => (
<div data-component="diff-row" data-type={r.type}>
- <div
- data-slot="before"
- data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}
- >
+ <div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}>
<ContentCode code={r.left} flush lang={props.lang} />
</div>
- <div
- data-slot="after"
- data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}
- >
+ <div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}>
<ContentCode code={r.right} lang={props.lang} flush />
</div>
</div>
@@ -184,11 +176,7 @@ export function ContentDiff(props: Props) {
{mobileRows().map((block) => (
<div data-component="diff-block" data-type={block.type}>
{block.lines.map((line) => (
- <div
- data-diff-type={
- block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""
- }
- >
+ <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
<ContentCode code={line} lang={props.lang} flush />
</div>
))}
diff --git a/packages/web/src/components/share/copy-button.tsx b/packages/web/src/components/share/copy-button.tsx
index 6f51bb4d8..892d5553f 100644
--- a/packages/web/src/components/share/copy-button.tsx
+++ b/packages/web/src/components/share/copy-button.tsx
@@ -21,11 +21,7 @@ export function CopyButton(props: CopyButtonProps) {
return (
<div data-component="copy-button" class={styles.root}>
<button type="button" onClick={handleCopyClick} data-copied={copied() ? true : undefined}>
- {copied() ? (
- <IconCheckCircle width={16} height={16} />
- ) : (
- <IconClipboard width={16} height={16} />
- )}
+ {copied() ? <IconCheckCircle width={16} height={16} /> : <IconClipboard width={16} height={16} />}
</button>
</div>
)
diff --git a/packages/web/src/components/share/part.tsx b/packages/web/src/components/share/part.tsx
index 6ad18273b..f7a6a9304 100644
--- a/packages/web/src/components/share/part.tsx
+++ b/packages/web/src/components/share/part.tsx
@@ -1,15 +1,6 @@
import map from "lang-map"
import { DateTime } from "luxon"
-import {
- For,
- Show,
- Match,
- Switch,
- type JSX,
- createMemo,
- createSignal,
- type ParentProps,
-} from "solid-js"
+import { For, Show, Match, Switch, type JSX, createMemo, createSignal, type ParentProps } from "solid-js"
import {
IconHashtag,
IconSparkles,
@@ -28,14 +19,7 @@ import {
IconMagnifyingGlass,
IconDocumentMagnifyingGlass,
} from "../icons"
-import {
- IconMeta,
- IconRobot,
- IconOpenAI,
- IconGemini,
- IconAnthropic,
- IconBrain,
-} from "../icons/custom"
+import { IconMeta, IconRobot, IconOpenAI, IconGemini, IconAnthropic, IconBrain } from "../icons/custom"
import { ContentCode } from "./content-code"
import { ContentDiff } from "./content-diff"
import { ContentText } from "./content-text"
@@ -95,11 +79,7 @@ export function Part(props: PartProps) {
<IconPaperClip width={18} height={18} />
</Match>
<Match
- when={
- props.part.type === "step-start" &&
- props.message.role === "assistant" &&
- props.message.modelID
- }
+ when={props.part.type === "step-start" && props.message.role === "assistant" && props.message.modelID}
>
{(model) => <ProviderIcon model={model()} size={18} />}
</Match>
@@ -167,9 +147,7 @@ export function Part(props: PartProps) {
DateTime.DATETIME_FULL_WITH_SECONDS,
)}
>
- {DateTime.fromMillis(props.message.time.completed).toLocaleString(
- DateTime.DATETIME_MED,
- )}
+ {DateTime.fromMillis(props.message.time.completed).toLocaleString(DateTime.DATETIME_MED)}
</Footer>
)}
</div>
@@ -365,10 +343,7 @@ function getShikiLang(filename: string) {
return type ? (overrides[type] ?? type) : "plaintext"
}
-function getDiagnostics(
- diagnosticsByFile: Record<string, Diagnostic[]>,
- currentFile: string,
-): JSX.Element[] {
+function getDiagnostics(diagnosticsByFile: Record<string, Diagnostic[]>, currentFile: string): JSX.Element[] {
const result: JSX.Element[] = []
if (diagnosticsByFile === undefined || diagnosticsByFile[currentFile] === undefined) return result
@@ -422,9 +397,7 @@ export function TodoWriteTool(props: ToolProps) {
completed: 2,
}
const todos = createMemo(() =>
- ((props.state.input?.todos ?? []) as Todo[])
- .slice()
- .sort((a, b) => priority[a.status] - priority[b.status]),
+ ((props.state.input?.todos ?? []) as Todo[]).slice().sort((a, b) => priority[a.status] - priority[b.status]),
)
const starting = () => todos().every((t: Todo) => t.status === "pending")
const finished = () => todos().every((t: Todo) => t.status === "completed")
@@ -466,23 +439,13 @@ export function GrepTool(props: ToolProps) {
<Switch>
<Match when={props.state.metadata?.matches && props.state.metadata?.matches > 0}>
<ResultsButton
- showCopy={
- props.state.metadata?.matches === 1
- ? "1 match"
- : `${props.state.metadata?.matches} matches`
- }
+ showCopy={props.state.metadata?.matches === 1 ? "1 match" : `${props.state.metadata?.matches} matches`}
>
<ContentText expand compact text={props.state.output} />
</ResultsButton>
</Match>
<Match when={props.state.output}>
- <ContentText
- expand
- compact
- text={props.state.output}
- data-size="sm"
- data-color="dimmed"
- />
+ <ContentText expand compact text={props.state.output} data-size="sm" data-color="dimmed" />
</Match>
</Switch>
</div>
@@ -542,9 +505,7 @@ export function WebFetchTool(props: ToolProps) {
}
export function ReadTool(props: ToolProps) {
- const filePath = createMemo(() =>
- stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd),
- )
+ const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd))
return (
<>
@@ -561,10 +522,7 @@ export function ReadTool(props: ToolProps) {
</Match>
<Match when={typeof props.state.metadata?.preview === "string"}>
<ResultsButton showCopy="Show preview" hideCopy="Hide preview">
- <ContentCode
- lang={getShikiLang(filePath() || "")}
- code={props.state.metadata?.preview}
- />
+ <ContentCode lang={getShikiLang(filePath() || "")} code={props.state.metadata?.preview} />
</ResultsButton>
</Match>
<Match when={typeof props.state.metadata?.preview !== "string" && props.state.output}>
@@ -579,12 +537,8 @@ export function ReadTool(props: ToolProps) {
}
export function WriteTool(props: ToolProps) {
- const filePath = createMemo(() =>
- stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd),
- )
- const diagnostics = createMemo(() =>
- getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath),
- )
+ const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd))
+ const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath))
return (
<>
@@ -604,10 +558,7 @@ export function WriteTool(props: ToolProps) {
</Match>
<Match when={props.state.input?.content}>
<ResultsButton showCopy="Show contents" hideCopy="Hide contents">
- <ContentCode
- lang={getShikiLang(filePath() || "")}
- code={props.state.input?.content}
- />
+ <ContentCode lang={getShikiLang(filePath() || "")} code={props.state.input?.content} />
</ResultsButton>
</Match>
</Switch>
@@ -617,12 +568,8 @@ export function WriteTool(props: ToolProps) {
}
export function EditTool(props: ToolProps) {
- const filePath = createMemo(() =>
- stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd),
- )
- const diagnostics = createMemo(() =>
- getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath),
- )
+ const filePath = createMemo(() => stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd))
+ const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath))
return (
<>
@@ -639,10 +586,7 @@ export function EditTool(props: ToolProps) {
</Match>
<Match when={props.state.metadata?.diff}>
<div data-component="diff">
- <ContentDiff
- diff={props.state.metadata?.diff}
- lang={getShikiLang(filePath() || "")}
- />
+ <ContentDiff diff={props.state.metadata?.diff} lang={getShikiLang(filePath() || "")} />
</div>
</Match>
</Switch>
@@ -675,11 +619,7 @@ export function GlobTool(props: ToolProps) {
<Match when={props.state.metadata?.count && props.state.metadata?.count > 0}>
<div data-component="tool-result">
<ResultsButton
- showCopy={
- props.state.metadata?.count === 1
- ? "1 result"
- : `${props.state.metadata?.count} results`
- }
+ showCopy={props.state.metadata?.count === 1 ? "1 result" : `${props.state.metadata?.count} results`}
>
<ContentText expand compact text={props.state.output} />
</ResultsButton>
@@ -702,12 +642,7 @@ function ResultsButton(props: ResultsButtonProps) {
return (
<>
- <button
- type="button"
- data-component="button-text"
- data-more
- onClick={() => setShow((e) => !e)}
- >
+ <button type="button" data-component="button-text" data-more onClick={() => setShow((e) => !e)}>
<span>{show() ? props.hideCopy || "Hide results" : props.showCopy || "Show results"}</span>
<span data-slot="icon">
<Show when={show()} fallback={<IconChevronRight width={11} height={11} />}>
@@ -733,11 +668,7 @@ function Footer(props: ParentProps<{ title: string }>) {
}
function ToolFooter(props: { time: number }) {
- return (
- props.time > MIN_DURATION && (
- <Footer title={`${props.time}ms`}>{formatDuration(props.time)}</Footer>
- )
- )
+ return props.time > MIN_DURATION && <Footer title={`${props.time}ms`}>{formatDuration(props.time)}</Footer>
}
function TaskTool(props: ToolProps) {
@@ -778,13 +709,7 @@ export function FallbackTool(props: ToolProps) {
<Match when={props.state.output}>
<div data-component="tool-result">
<ResultsButton>
- <ContentText
- expand
- compact
- text={props.state.output}
- data-size="sm"
- data-color="dimmed"
- />
+ <ContentText expand compact text={props.state.output} data-size="sm" data-color="dimmed" />
</ResultsButton>
</div>
</Match>
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-29 16:07:08 +0000