|
@@ -460,229 +460,246 @@ export default function Share(props: { api: string }) {
|
|
|
|| msg.metadata?.time.created
|
|
|| msg.metadata?.time.created
|
|
|
|| 0
|
|
|| 0
|
|
|
return (
|
|
return (
|
|
|
- <div
|
|
|
|
|
- data-section="part"
|
|
|
|
|
- data-part-type={part.type}
|
|
|
|
|
- data-message-role={msg.role}
|
|
|
|
|
- >
|
|
|
|
|
- <Switch>
|
|
|
|
|
- { /* User text */}
|
|
|
|
|
- <Match when={
|
|
|
|
|
- msg.role === "user" && part.type === "text" && part
|
|
|
|
|
- }>
|
|
|
|
|
- {part =>
|
|
|
|
|
- <>
|
|
|
|
|
- <div data-section="decoration">
|
|
|
|
|
- <div>
|
|
|
|
|
- <IconUserCircle width={18} height={18} />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
|
|
+ <Switch>
|
|
|
|
|
+ { /* User text */}
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ msg.role === "user" && part.type === "text" && part
|
|
|
|
|
+ }>
|
|
|
|
|
+ {part =>
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="user-text"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div data-section="decoration">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <IconUserCircle width={18} height={18} />
|
|
|
</div>
|
|
</div>
|
|
|
- <div data-section="content">
|
|
|
|
|
- <TextPart
|
|
|
|
|
- highlight
|
|
|
|
|
- text={part().text}
|
|
|
|
|
- expand={isLastPart()}
|
|
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div data-section="content">
|
|
|
|
|
+ <TextPart
|
|
|
|
|
+ highlight
|
|
|
|
|
+ text={part().text}
|
|
|
|
|
+ expand={isLastPart()}
|
|
|
|
|
+ />
|
|
|
|
|
+ <PartFooter time={time} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ }
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ { /* AI text */}
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ msg.role === "assistant"
|
|
|
|
|
+ && part.type === "text"
|
|
|
|
|
+ && part
|
|
|
|
|
+ }>
|
|
|
|
|
+ {part =>
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="ai-text"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div data-section="decoration">
|
|
|
|
|
+ <div><IconSparkles width={18} height={18} /></div>
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div data-section="content">
|
|
|
|
|
+ <TextPart
|
|
|
|
|
+ text={part().text}
|
|
|
|
|
+ expand={isLastPart()}
|
|
|
|
|
+ />
|
|
|
|
|
+ <PartFooter time={time} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ }
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ { /* AI model */}
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ msg.role === "assistant"
|
|
|
|
|
+ && part.type === "step-start"
|
|
|
|
|
+ && msg.metadata?.assistant
|
|
|
|
|
+ }>
|
|
|
|
|
+ {assistant =>
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="ai-model"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div data-section="decoration">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <ProviderIcon
|
|
|
|
|
+ size={18}
|
|
|
|
|
+ provider={assistant().providerID}
|
|
|
/>
|
|
/>
|
|
|
- <PartFooter time={time} />
|
|
|
|
|
</div>
|
|
</div>
|
|
|
- </>
|
|
|
|
|
- }
|
|
|
|
|
- </Match>
|
|
|
|
|
- { /* AI text */}
|
|
|
|
|
- <Match when={
|
|
|
|
|
- msg.role === "assistant"
|
|
|
|
|
- && part.type === "text"
|
|
|
|
|
- && part
|
|
|
|
|
- }>
|
|
|
|
|
- {part =>
|
|
|
|
|
- <>
|
|
|
|
|
- <div data-section="decoration">
|
|
|
|
|
- <div><IconSparkles width={18} height={18} /></div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div data-section="content">
|
|
|
|
|
+ <div data-part-tool-body>
|
|
|
|
|
+ <span
|
|
|
|
|
+ data-size="md"
|
|
|
|
|
+ data-part-title
|
|
|
|
|
+ data-element-label
|
|
|
|
|
+ >
|
|
|
|
|
+ {assistant().providerID}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span data-part-model>
|
|
|
|
|
+ {assistant().modelID}
|
|
|
|
|
+ </span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div data-section="content">
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ }
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ { /* System text */}
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ msg.role === "system"
|
|
|
|
|
+ && part.type === "text"
|
|
|
|
|
+ && part
|
|
|
|
|
+ }>
|
|
|
|
|
+ {part =>
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="system-text"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div data-section="decoration">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <IconCpuChip width={18} height={18} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div data-section="content">
|
|
|
|
|
+ <div data-part-tool-body>
|
|
|
|
|
+ <span data-element-label data-part-title>
|
|
|
|
|
+ System
|
|
|
|
|
+ </span>
|
|
|
<TextPart
|
|
<TextPart
|
|
|
|
|
+ data-size="sm"
|
|
|
text={part().text}
|
|
text={part().text}
|
|
|
- expand={isLastPart()}
|
|
|
|
|
|
|
+ data-color="dimmed"
|
|
|
/>
|
|
/>
|
|
|
- <PartFooter time={time} />
|
|
|
|
|
</div>
|
|
</div>
|
|
|
- </>
|
|
|
|
|
- }
|
|
|
|
|
- </Match>
|
|
|
|
|
- { /* AI model */}
|
|
|
|
|
- <Match when={
|
|
|
|
|
- msg.role === "assistant"
|
|
|
|
|
- && part.type === "step-start"
|
|
|
|
|
- && msg.metadata?.assistant
|
|
|
|
|
- }>
|
|
|
|
|
- {assistant =>
|
|
|
|
|
- <>
|
|
|
|
|
- <div data-section="decoration">
|
|
|
|
|
- <div>
|
|
|
|
|
- <ProviderIcon
|
|
|
|
|
- size={18}
|
|
|
|
|
- provider={assistant().providerID}
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div data-section="content">
|
|
|
|
|
- <div data-part-tool-body>
|
|
|
|
|
- <span
|
|
|
|
|
- data-size="md"
|
|
|
|
|
- data-part-title
|
|
|
|
|
- data-element-label
|
|
|
|
|
- >
|
|
|
|
|
- {assistant().providerID}
|
|
|
|
|
- </span>
|
|
|
|
|
- <span data-part-model>
|
|
|
|
|
- {assistant().modelID}
|
|
|
|
|
- </span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </>
|
|
|
|
|
- }
|
|
|
|
|
- </Match>
|
|
|
|
|
- { /* System text */}
|
|
|
|
|
- <Match when={
|
|
|
|
|
- msg.role === "system"
|
|
|
|
|
- && part.type === "text"
|
|
|
|
|
- && part
|
|
|
|
|
- }>
|
|
|
|
|
- {part =>
|
|
|
|
|
- <>
|
|
|
|
|
|
|
+ <PartFooter time={time} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ }
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ { /* Edit tool */}
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ msg.role === "assistant"
|
|
|
|
|
+ && part.type === "tool-invocation"
|
|
|
|
|
+ && part.toolInvocation.toolName === "edit"
|
|
|
|
|
+ && part
|
|
|
|
|
+ }>
|
|
|
|
|
+ {part => {
|
|
|
|
|
+ const args = part().toolInvocation.args
|
|
|
|
|
+ const filePath = args.filePath
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="tool-edit"
|
|
|
|
|
+ >
|
|
|
<div data-section="decoration">
|
|
<div data-section="decoration">
|
|
|
<div>
|
|
<div>
|
|
|
- <IconCpuChip width={18} height={18} />
|
|
|
|
|
|
|
+ <IconPencilSquare width={18} height={18} />
|
|
|
</div>
|
|
</div>
|
|
|
<div></div>
|
|
<div></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div data-section="content">
|
|
<div data-section="content">
|
|
|
<div data-part-tool-body>
|
|
<div data-part-tool-body>
|
|
|
- <span data-element-label data-part-title>
|
|
|
|
|
- System
|
|
|
|
|
|
|
+ <span data-part-title data-size="md">
|
|
|
|
|
+ Edit {filePath}
|
|
|
</span>
|
|
</span>
|
|
|
- <TextPart
|
|
|
|
|
- data-size="sm"
|
|
|
|
|
- text={part().text}
|
|
|
|
|
- data-color="dimmed"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <div data-part-tool-edit>
|
|
|
|
|
+ <DiffView
|
|
|
|
|
+ class={styles["code-block"]}
|
|
|
|
|
+ oldCode={args.oldString}
|
|
|
|
|
+ newCode={args.newString}
|
|
|
|
|
+ lang={getFileType(filePath)}
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
<PartFooter time={time} />
|
|
<PartFooter time={time} />
|
|
|
</div>
|
|
</div>
|
|
|
- </>
|
|
|
|
|
- }
|
|
|
|
|
- </Match>
|
|
|
|
|
- { /* Edit tool */}
|
|
|
|
|
- <Match when={
|
|
|
|
|
- msg.role === "assistant"
|
|
|
|
|
- && part.type === "tool-invocation"
|
|
|
|
|
- && part.toolInvocation.toolName === "edit"
|
|
|
|
|
- && part
|
|
|
|
|
- }>
|
|
|
|
|
- {part => {
|
|
|
|
|
- const args = part().toolInvocation.args
|
|
|
|
|
- const filePath = args.filePath
|
|
|
|
|
- return (
|
|
|
|
|
- <>
|
|
|
|
|
- <div data-section="decoration">
|
|
|
|
|
- <div>
|
|
|
|
|
- <IconPencilSquare width={18} height={18} />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )
|
|
|
|
|
+ }}
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ { /* Tool call */}
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ msg.role === "assistant"
|
|
|
|
|
+ && part.type === "tool-invocation"
|
|
|
|
|
+ && part
|
|
|
|
|
+ }>
|
|
|
|
|
+ {part =>
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="tool-fallback"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div data-section="decoration">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <IconWrenchScrewdriver width={18} height={18} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div data-section="content">
|
|
|
|
|
+ <div data-part-tool-body>
|
|
|
|
|
+ <span data-part-title data-size="md">
|
|
|
|
|
+ {part().toolInvocation.toolName}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <div data-part-tool-args>
|
|
|
|
|
+ <For each={
|
|
|
|
|
+ flattenToolArgs(part().toolInvocation.args)
|
|
|
|
|
+ }>
|
|
|
|
|
+ {([name, value]) =>
|
|
|
|
|
+ <>
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ <div>{name}</div>
|
|
|
|
|
+ <div>{value}</div>
|
|
|
|
|
+ </>
|
|
|
|
|
+ }
|
|
|
|
|
+ </For>
|
|
|
</div>
|
|
</div>
|
|
|
- <div data-section="content">
|
|
|
|
|
- <div data-part-tool-body>
|
|
|
|
|
- <span data-part-title data-size="md">
|
|
|
|
|
- Edit {filePath}
|
|
|
|
|
- </span>
|
|
|
|
|
- <div data-part-tool-edit>
|
|
|
|
|
- <DiffView
|
|
|
|
|
- class={styles["code-block"]}
|
|
|
|
|
- oldCode={args.oldString}
|
|
|
|
|
- newCode={args.newString}
|
|
|
|
|
- lang={getFileType(filePath)}
|
|
|
|
|
|
|
+ <Switch>
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ part().toolInvocation.state === "result"
|
|
|
|
|
+ && part().toolInvocation.result
|
|
|
|
|
+ }>
|
|
|
|
|
+ <div data-part-tool-result>
|
|
|
|
|
+ <ResultsButton
|
|
|
|
|
+ results={results()}
|
|
|
|
|
+ onClick={() => showResults(e => !e)}
|
|
|
/>
|
|
/>
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <PartFooter time={time} />
|
|
|
|
|
- </div>
|
|
|
|
|
- </>
|
|
|
|
|
- )
|
|
|
|
|
- }}
|
|
|
|
|
- </Match>
|
|
|
|
|
- { /* Tool call */}
|
|
|
|
|
- <Match when={
|
|
|
|
|
- msg.role === "assistant"
|
|
|
|
|
- && part.type === "tool-invocation"
|
|
|
|
|
- && part
|
|
|
|
|
- }>
|
|
|
|
|
- {part =>
|
|
|
|
|
- <>
|
|
|
|
|
- <div data-section="decoration">
|
|
|
|
|
- <div>
|
|
|
|
|
- <IconWrenchScrewdriver width={18} height={18} />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div data-section="content">
|
|
|
|
|
- <div data-part-tool-body>
|
|
|
|
|
- <span data-part-title data-size="md">
|
|
|
|
|
- {part().toolInvocation.toolName}
|
|
|
|
|
- </span>
|
|
|
|
|
- <div data-part-tool-args>
|
|
|
|
|
- <For each={
|
|
|
|
|
- flattenToolArgs(part().toolInvocation.args)
|
|
|
|
|
- }>
|
|
|
|
|
- {([name, value]) =>
|
|
|
|
|
- <>
|
|
|
|
|
- <div></div>
|
|
|
|
|
- <div>{name}</div>
|
|
|
|
|
- <div>{value}</div>
|
|
|
|
|
- </>
|
|
|
|
|
- }
|
|
|
|
|
- </For>
|
|
|
|
|
- </div>
|
|
|
|
|
- <Switch>
|
|
|
|
|
- <Match when={
|
|
|
|
|
- part().toolInvocation.state === "result"
|
|
|
|
|
- && part().toolInvocation.result
|
|
|
|
|
- }>
|
|
|
|
|
- <div data-part-tool-result>
|
|
|
|
|
- <ResultsButton
|
|
|
|
|
- results={results()}
|
|
|
|
|
- onClick={() => showResults(e => !e)}
|
|
|
|
|
|
|
+ <Show when={results()}>
|
|
|
|
|
+ <TextPart
|
|
|
|
|
+ expand
|
|
|
|
|
+ data-size="sm"
|
|
|
|
|
+ data-color="dimmed"
|
|
|
|
|
+ text={part().toolInvocation.result}
|
|
|
/>
|
|
/>
|
|
|
- <Show when={results()}>
|
|
|
|
|
- <TextPart
|
|
|
|
|
- expand
|
|
|
|
|
- data-size="sm"
|
|
|
|
|
- data-color="dimmed"
|
|
|
|
|
- text={part().toolInvocation.result}
|
|
|
|
|
- />
|
|
|
|
|
- </Show>
|
|
|
|
|
- </div>
|
|
|
|
|
- </Match>
|
|
|
|
|
- <Match when={
|
|
|
|
|
- part().toolInvocation.state === "call"
|
|
|
|
|
- }>
|
|
|
|
|
- <TextPart
|
|
|
|
|
- data-size="sm"
|
|
|
|
|
- data-color="dimmed"
|
|
|
|
|
- text="Calling..."
|
|
|
|
|
- />
|
|
|
|
|
- </Match>
|
|
|
|
|
- </Switch>
|
|
|
|
|
- </div>
|
|
|
|
|
- <PartFooter time={time} />
|
|
|
|
|
|
|
+ </Show>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ <Match when={
|
|
|
|
|
+ part().toolInvocation.state === "call"
|
|
|
|
|
+ }>
|
|
|
|
|
+ <TextPart
|
|
|
|
|
+ data-size="sm"
|
|
|
|
|
+ data-color="dimmed"
|
|
|
|
|
+ text="Calling..."
|
|
|
|
|
+ />
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ </Switch>
|
|
|
</div>
|
|
</div>
|
|
|
- </>
|
|
|
|
|
- }
|
|
|
|
|
- </Match>
|
|
|
|
|
- { /* Fallback */}
|
|
|
|
|
- <Match when={true}>
|
|
|
|
|
|
|
+ <PartFooter time={time} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ }
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ { /* Fallback */}
|
|
|
|
|
+ <Match when={true}>
|
|
|
|
|
+ <div
|
|
|
|
|
+ data-section="part"
|
|
|
|
|
+ data-part-type="fallback"
|
|
|
|
|
+ >
|
|
|
<div data-section="decoration">
|
|
<div data-section="decoration">
|
|
|
<div>
|
|
<div>
|
|
|
<Switch fallback={
|
|
<Switch fallback={
|
|
@@ -710,9 +727,9 @@ export default function Share(props: { api: string }) {
|
|
|
</div>
|
|
</div>
|
|
|
<PartFooter time={time} />
|
|
<PartFooter time={time} />
|
|
|
</div>
|
|
</div>
|
|
|
- </Match>
|
|
|
|
|
- </Switch>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </Match>
|
|
|
|
|
+ </Switch>
|
|
|
)
|
|
)
|
|
|
}}
|
|
}}
|
|
|
</For>
|
|
</For>
|
Jay V