From 3b746162d27a32a851aa257455042b5a86ec017c Mon Sep 17 00:00:00 2001 From: Dax Raad Date: Sat, 31 May 2025 14:41:00 -0400 Subject: run formatter --- packages/web/src/components/CodeBlock.tsx | 14 +- packages/web/src/components/DiffView.tsx | 6 +- packages/web/src/components/Share.tsx | 399 +++++++++++++----------- packages/web/src/components/diffview.module.css | 2 +- packages/web/src/components/icons/custom.tsx | 21 +- packages/web/src/components/icons/index.tsx | 150 ++++----- packages/web/src/components/share.module.css | 31 +- 7 files changed, 338 insertions(+), 285 deletions(-) (limited to 'packages/web/src/components') diff --git a/packages/web/src/components/CodeBlock.tsx b/packages/web/src/components/CodeBlock.tsx index 17559ece1..f410ab070 100644 --- a/packages/web/src/components/CodeBlock.tsx +++ b/packages/web/src/components/CodeBlock.tsx @@ -6,7 +6,7 @@ import { createResource, } from "solid-js" import { codeToHtml } from "shiki" -import { transformerNotationDiff } from '@shikijs/transformers' +import { transformerNotationDiff } from "@shikijs/transformers" interface CodeBlockProps extends JSX.HTMLAttributes { code: string @@ -20,12 +20,10 @@ function CodeBlock(props: CodeBlockProps) { return (await codeToHtml(local.code, { lang: local.lang || "text", themes: { - light: 'github-light', - dark: 'github-dark', + light: "github-light", + dark: "github-dark", }, - transformers: [ - transformerNotationDiff(), - ], + transformers: [transformerNotationDiff()], })) as string }) @@ -39,9 +37,7 @@ function CodeBlock(props: CodeBlockProps) { } }) - return ( -
- ) + return
} export default CodeBlock diff --git a/packages/web/src/components/DiffView.tsx b/packages/web/src/components/DiffView.tsx index 44feef140..4e864e06b 100644 --- a/packages/web/src/components/DiffView.tsx +++ b/packages/web/src/components/DiffView.tsx @@ -31,11 +31,7 @@ const DiffView: Component = (props) => { diffRows.push({ left: chunk.removed ? line : chunk.added ? "" : line, right: chunk.added ? line : chunk.removed ? "" : line, - type: chunk.added - ? "added" - : chunk.removed - ? "removed" - : "unchanged", + type: chunk.added ? "added" : chunk.removed ? "removed" : "unchanged", }) } } diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx index ac75a3cf7..f4b89e1f5 100644 --- a/packages/web/src/components/Share.tsx +++ b/packages/web/src/components/Share.tsx @@ -12,11 +12,7 @@ import { createSignal, } from "solid-js" import { DateTime } from "luxon" -import { - IconOpenAI, - IconGemini, - IconAnthropic, -} from "./icons/custom" +import { IconOpenAI, IconGemini, IconAnthropic } from "./icons/custom" import { IconCpuChip, IconSparkles, @@ -31,8 +27,12 @@ import styles from "./share.module.css" import { type UIMessage } from "ai" import { createStore, reconcile } from "solid-js/store" -type Status = "disconnected" | "connecting" | "connected" | "error" | "reconnecting" - +type Status = + | "disconnected" + | "connecting" + | "connected" + | "error" + | "reconnecting" type SessionMessage = UIMessage<{ time: { @@ -40,23 +40,26 @@ type SessionMessage = UIMessage<{ completed?: number } assistant?: { - modelID: string; - providerID: string; - cost: number; + modelID: string + providerID: string + cost: number tokens: { - input: number; - output: number; - reasoning: number; - }; - }; + input: number + output: number + reasoning: number + } + } sessionID: string - tool: Record - time: { - start: number - end: number + tool: Record< + string, + { + properties: Record + time: { + start: number + end: number + } } - }> + > }> type SessionInfo = { @@ -65,48 +68,47 @@ type SessionInfo = { } function getFileType(path: string) { - return path.split('.').pop() + return path.split(".").pop() } // Converts `{a:{b:{c:1}}` to `[['a.b.c', 1]]` function flattenToolArgs(obj: any, prefix: string = ""): Array<[string, any]> { - const entries: Array<[string, any]> = []; + const entries: Array<[string, any]> = [] for (const [key, value] of Object.entries(obj)) { - const path = prefix ? `${prefix}.${key}` : key; - - if ( - value !== null && - typeof value === "object" && - !Array.isArray(value) - ) { - entries.push(...flattenToolArgs(value, path)); - } - else { - entries.push([path, value]); + const path = prefix ? `${prefix}.${key}` : key + + if (value !== null && typeof value === "object" && !Array.isArray(value)) { + entries.push(...flattenToolArgs(value, path)) + } else { + entries.push([path, value]) } } - return entries; + return entries } function getStatusText(status: [Status, string?]): string { switch (status[0]) { - case "connected": return "Connected" - case "connecting": return "Connecting..." - case "disconnected": return "Disconnected" - case "reconnecting": return "Reconnecting..." - case "error": return status[1] || "Error" - default: return "Unknown" + case "connected": + return "Connected" + case "connecting": + return "Connecting..." + case "disconnected": + return "Disconnected" + case "reconnecting": + return "Reconnecting..." + case "error": + return status[1] || "Error" + default: + return "Unknown" } } -function ProviderIcon(props: { provider: string, size?: number }) { +function ProviderIcon(props: { provider: string; size?: number }) { const size = props.size || 16 return ( - - }> + }> @@ -132,15 +134,11 @@ function ResultsButton(props: ResultsButtonProps) { data-element-button-more {...rest} > - - {local.results ? "Hide results" : "Show results"} - + {local.results ? "Hide results" : "Show results"} - } + fallback={} > @@ -187,16 +185,16 @@ function TextPart(props: TextPartProps) { data-expanded={expanded() || local.expand === true} {...rest} > - 
 (preEl = el)}>{local.text}
- {overflowed() && + 
 (preEl = el)}>{local.text}
+ {overflowed() && ( - } + )} ) } @@ -205,13 +203,13 @@ function PartFooter(props: { time: number }) { return ( - {DateTime.fromMillis(props.time).toLocaleString(DateTime.TIME_WITH_SECONDS)} + {DateTime.fromMillis(props.time).toLocaleString( + DateTime.TIME_WITH_SECONDS, + )} ) } @@ -226,8 +224,12 @@ export default function Share(props: { api: string }) { }>({ 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"]) onMount(() => { const apiUrl = props.api @@ -326,7 +328,10 @@ export default function Share(props: { api: string }) { const result: string[][] = [] for (const msg of messages()) { if (msg.role === "assistant" && msg.metadata?.assistant) { - result.push([msg.metadata.assistant.providerID, msg.metadata.assistant.modelID]) + result.push([ + msg.metadata.assistant.providerID, + msg.metadata.assistant.modelID, + ]) } } return result @@ -339,7 +344,7 @@ export default function Share(props: { api: string }) { input: 0, output: 0, reasoning: 0, - } + }, } for (const msg of messages()) { const assistant = msg.metadata?.assistant @@ -366,39 +371,39 @@ export default function Share(props: { api: string }) {
  • Cost - {metrics().cost !== undefined ? + {metrics().cost !== undefined ? ( ${metrics().cost.toFixed(2)} - : + ) : ( — - } + )}
  • Input Tokens - {metrics().tokens.input ? + {metrics().tokens.input ? ( {metrics().tokens.input} - : + ) : ( — - } + )}
  • Output Tokens - {metrics().tokens.output ? + {metrics().tokens.output ? ( {metrics().tokens.output} - : + ) : ( — - } + )}
  • Reasoning Tokens - {metrics().tokens.reasoning ? + {metrics().tokens.reasoning ? ( {metrics().tokens.reasoning} - : + ) : ( — - } + )}
    - {models().length > 0 ? + {models().length > 0 ? ( {([provider, model]) => (
  • @@ -409,27 +414,29 @@ export default function Share(props: { api: string }) {
    • )}     - : + ) : (
  • Models —
    • - } + )}
- {messages().length > 0 && messages()[0].metadata?.time.created ? - + {messages().length > 0 && messages()[0].metadata?.time.created ? ( + {DateTime.fromMillis( - messages()[0].metadata?.time.created || 0 + messages()[0].metadata?.time.created || 0, ).toLocaleString(DateTime.DATE_MED)} - : - Started at — - } + ) : ( + + Started at — + + )}
@@ -444,27 +451,32 @@ export default function Share(props: { api: string }) { {(msg, msgIndex) => ( {(part, partIndex) => { - if (part.type === "step-start" && (partIndex() > 0 || !msg.metadata?.assistant)) return null + if ( + part.type === "step-start" && + (partIndex() > 0 || !msg.metadata?.assistant) + ) + return null const [results, showResults] = createSignal(false) - const isLastPart = createMemo(() => - (messages().length === msgIndex() + 1) - && (msg.parts.length === partIndex() + 1) + const isLastPart = createMemo( + () => + messages().length === msgIndex() + 1 && + msg.parts.length === partIndex() + 1, ) - const time = msg.metadata?.time.completed - || msg.metadata?.time.created - || 0 + const time = + msg.metadata?.time.completed || + msg.metadata?.time.created || + 0 return ( - { /* User text */} - - {part => -
+ {/* User text */} + + {(part) => ( +
@@ -480,21 +492,22 @@ export default function Share(props: { api: string }) {
- } + )} - { /* AI text */} - - {part => -
+ {/* AI text */} + + {(part) => ( +
-
+
+ +
@@ -505,19 +518,18 @@ export default function Share(props: { api: string }) {
- } + )} - { /* AI model */} - - {assistant => -
+ {/* AI model */} + + {(assistant) => ( +
- } + )} - { /* System text */} - - {part => + {/* System text */} + + {(part) => (
- } + )} - { /* Edit tool */} - - {part => { + {/* Edit tool */} + + {(part) => { const args = part().toolInvocation.args const filePath = args.filePath return ( @@ -618,20 +634,25 @@ export default function Share(props: { api: string }) { ) }} - { /* Tool call */} - - {part => + {/* Tool call */} + + {(part) => (
- +
@@ -641,27 +662,32 @@ export default function Share(props: { api: string }) { {part().toolInvocation.toolName}
- - {([name, value]) => + + {([name, value]) => ( <>
{name}
{value}
- } + )}
- +
showResults(e => !e)} + onClick={() => showResults((e) => !e)} />
- +
- } + )} - { /* Fallback */} + {/* Fallback */} -
+
- - }> - + + } + > + @@ -718,7 +753,9 @@ export default function Share(props: { api: string }) { {part.type} - +
@@ -767,6 +804,6 @@ export default function Share(props: { api: string }) {
- + ) } diff --git a/packages/web/src/components/diffview.module.css b/packages/web/src/components/diffview.module.css index 1a0e6c523..e92bd61fc 100644 --- a/packages/web/src/components/diffview.module.css +++ b/packages/web/src/components/diffview.module.css @@ -7,7 +7,7 @@ } .column { - display: flex; + display: flex; flex-direction: column; overflow-x: auto; min-width: 0; diff --git a/packages/web/src/components/icons/custom.tsx b/packages/web/src/components/icons/custom.tsx index f016b83cf..be5576718 100644 --- a/packages/web/src/components/icons/custom.tsx +++ b/packages/web/src/components/icons/custom.tsx @@ -3,20 +3,35 @@ import { type JSX } from "solid-js" // https://icones.js.org/collection/ri?s=openai&icon=ri:openai-fill export function IconOpenAI(props: JSX.SvgSVGAttributes) { return ( - + + + ) } // https://icones.js.org/collection/ri?s=anthropic&icon=ri:anthropic-fill export function IconAnthropic(props: JSX.SvgSVGAttributes) { return ( - + + + ) } // https://icones.js.org/collection/ri?s=gemini&icon=ri:gemini-fill export function IconGemini(props: JSX.SvgSVGAttributes) { return ( - + + + ) } diff --git a/packages/web/src/components/icons/index.tsx b/packages/web/src/components/icons/index.tsx index 9603925d5..a788d8f47 100644 --- a/packages/web/src/components/icons/index.tsx +++ b/packages/web/src/components/icons/index.tsx @@ -21,7 +21,7 @@ export function IconAcademicCap(props: JSX.SvgSVGAttributes) { ) } export function IconAdjustmentsHorizontal( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowDownCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowDownOnSquareStack( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowLeftCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowPathRoundedSquare( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowRightCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowSmallRight( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowTopRightOnSquare( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowUpOnSquareStack( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowUturnRight( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconArrowsPointingIn( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconBars3BottomLeft( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconBuildingLibrary( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconBuildingStorefront( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconChatBubbleBottomCenterText( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconChatBubbleOvalLeftEllipsis( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconChevronDoubleDown( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconClipboardDocumentCheck( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconCodeBracketSquare( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconComputerDesktop( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconCubeTransparent( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconCurrencyBangladeshi( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconCursorArrowRays( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconDocumentArrowDown( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconDocumentDuplicate( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconEllipsisHorizontalCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconExclamationCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconFolderArrowDown( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconGlobeAsiaAustralia( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconInformationCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconMagnifyingGlassCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconPhoneArrowDownLeft( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconPresentationChartBar( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconQuestionMarkCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconShieldExclamation( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconVideoCameraSlash( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconViewfinderCircle( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( ) { ) } export function IconWrenchScrewdriver( - props: JSX.SvgSVGAttributes + props: JSX.SvgSVGAttributes, ) { return ( div:nth-child(3n+1) { + & > div:nth-child(3n + 1) { width: 8px; height: 2px; border-radius: 1px; background: var(--sl-color-divider); } - & > div:nth-child(3n+2), - & > div:nth-child(3n+3) { + & > div:nth-child(3n + 2), + & > div:nth-child(3n + 3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -232,7 +241,7 @@ line-height: 1.5; } - & > div:nth-child(3n+3) { + & > div:nth-child(3n + 3) { padding-left: 0.125rem; color: var(--sl-color-text-dimmed); } -- cgit v1.2.3