diff --git a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts index 2b2c6cb3..d8964a38 100644 --- a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts +++ b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts @@ -1,9 +1,10 @@ -import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit"; +import { Button, CopyButton, DownloadButton, icon, PreviewCodeToggle } from "@mariozechner/mini-lit"; import hljs from "highlight.js"; import { html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { createRef, type Ref, ref } from "lit/directives/ref.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; +import { RefreshCw } from "lucide"; import type { SandboxIframe } from "../../components/SandboxedIframe.js"; import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "../../components/sandbox/RuntimeMessageRouter.js"; import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js"; @@ -56,6 +57,16 @@ export class HtmlArtifact extends ArtifactElement { return html`
${toggle} + ${Button({ + variant: "ghost", + size: "sm", + onClick: () => { + this.logs = []; + this.executeContent(this._content); + }, + title: i18n("Reload HTML"), + children: icon(RefreshCw, "sm"), + })} ${copyButton} ${DownloadButton({ content: downloadContent, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
diff --git a/packages/web-ui/src/utils/i18n.ts b/packages/web-ui/src/utils/i18n.ts index 206fde82..44293346 100644 --- a/packages/web-ui/src/utils/i18n.ts +++ b/packages/web-ui/src/utils/i18n.ts @@ -122,6 +122,7 @@ declare module "@mariozechner/mini-lit" { Artifacts: string; "Copy HTML": string; "Download HTML": string; + "Reload HTML": string; "Copy SVG": string; "Download SVG": string; "Copy Markdown": string; @@ -294,6 +295,7 @@ export const translations = { Artifacts: "Artifacts", "Copy HTML": "Copy HTML", "Download HTML": "Download HTML", + "Reload HTML": "Reload HTML", "Copy SVG": "Copy SVG", "Download SVG": "Download SVG", "Copy Markdown": "Copy Markdown", @@ -470,6 +472,7 @@ export const translations = { Artifacts: "Artefakte", "Copy HTML": "HTML kopieren", "Download HTML": "HTML herunterladen", + "Reload HTML": "HTML neu laden", "Copy SVG": "SVG kopieren", "Download SVG": "SVG herunterladen", "Copy Markdown": "Markdown kopieren",