wehub-resource-sync
e30e75b5d4
Code Quality / Oxlint + Oxfmt (push) Waiting to run
Code Quality / Template Sync (push) Waiting to run
Code Quality / Build Changed Packages (push) Waiting to run
Code Quality / Test Changed Packages (push) Waiting to run
Deploy Expo Example / Deploy Production (push) Waiting to run
Deploy Ink Example / Deploy Production (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.12) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Waiting to run
Deploy Shadcn Registry / Deploy Production (push) Waiting to run
Template Metrics / LOC + Bundle Size (push) Waiting to run
Changesets / Create Version PR (push) Has been cancelled
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useAuiState } from "@assistant-ui/react";
|
|
import type { ToolCallMessagePart } from "@assistant-ui/react";
|
|
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
|
|
export const ArtifactsView = () => {
|
|
const artifact = useAuiState((s) => {
|
|
const messages = s.thread.messages || [];
|
|
return messages
|
|
.flatMap((m) =>
|
|
m.content.filter(
|
|
(c): c is ToolCallMessagePart =>
|
|
c.type === "tool-call" && c.toolName === "render_html",
|
|
),
|
|
)
|
|
.at(-1)?.args.code as string | undefined;
|
|
});
|
|
|
|
if (!artifact) return null;
|
|
|
|
return (
|
|
<div className="flex grow basis-full justify-stretch p-3 transition-[width]">
|
|
<div className="h-full w-full overflow-hidden rounded-lg border">
|
|
<TabsPrimitive.Root
|
|
defaultValue="source"
|
|
className="flex h-full flex-col"
|
|
>
|
|
<TabsPrimitive.List className="grid w-full grid-cols-2 border-b">
|
|
<TabsPrimitive.Tab
|
|
value="source"
|
|
className="data-active:border-primary border-b-2 border-transparent px-4 py-2 text-sm font-medium transition-colors hover:border-gray-300"
|
|
>
|
|
Source Code
|
|
</TabsPrimitive.Tab>
|
|
<TabsPrimitive.Tab
|
|
value="preview"
|
|
className="data-active:border-primary border-b-2 border-transparent px-4 py-2 text-sm font-medium transition-colors hover:border-gray-300"
|
|
>
|
|
Preview
|
|
</TabsPrimitive.Tab>
|
|
</TabsPrimitive.List>
|
|
<TabsPrimitive.Panel
|
|
value="source"
|
|
className="grow overflow-y-scroll px-4 py-2 font-mono text-sm wrap-break-word whitespace-pre-line"
|
|
>
|
|
{artifact}
|
|
</TabsPrimitive.Panel>
|
|
<TabsPrimitive.Panel value="preview" className="grow px-4 py-2">
|
|
{artifact && (
|
|
<iframe
|
|
title="artifact-preview"
|
|
className="h-full w-full"
|
|
srcDoc={artifact}
|
|
/>
|
|
)}
|
|
</TabsPrimitive.Panel>
|
|
</TabsPrimitive.Root>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|