getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-19 17:04:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add reload button to HTML artifact header

Browse source 
Adds a reload button with RefreshCw icon to HTML artifact header buttons.
Clicking the button clears logs and re-executes the HTML content, useful
for manually refreshing when developing HTML artifacts or testing changes.

Changes:
- Import Button, icon from mini-lit and RefreshCw from lucide
- Add reload button to getHeaderButtons() that clears logs and calls executeContent()
- Add "Reload HTML" i18n key in English and German translations
This commit is contained in:
Mario Zechner 2025-10-18 00:13:16 +02:00
parent 92ce5a342f
commit 2d5054e6c0
2 changed files with 15 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
View file

@ -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 hljs from "highlight.js";
import { html } from "lit"; import { html } from "lit";
import { customElement, property, state } from "lit/decorators.js"; import { customElement, property, state } from "lit/decorators.js";
import { createRef, type Ref, ref } from "lit/directives/ref.js"; import { createRef, type Ref, ref } from "lit/directives/ref.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { RefreshCw } from "lucide";
import type { SandboxIframe } from "../../components/SandboxedIframe.js"; import type { SandboxIframe } from "../../components/SandboxedIframe.js";
import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "../../components/sandbox/RuntimeMessageRouter.js"; import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "../../components/sandbox/RuntimeMessageRouter.js";
import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js"; import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js";
@ -56,6 +57,16 @@ export class HtmlArtifact extends ArtifactElement {
return html` return html`
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
${toggle} ${toggle}
${Button({
variant: "ghost",
size: "sm",
onClick: () => {
this.logs = [];
this.executeContent(this._content);
},
title: i18n("Reload HTML"),
children: icon(RefreshCw, "sm"),
})}
${copyButton} ${copyButton}
${DownloadButton({ content: downloadContent, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })} ${DownloadButton({ content: downloadContent, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
</div> </div>

3
packages/web-ui/src/utils/i18n.ts
View file

@ -122,6 +122,7 @@ declare module "@mariozechner/mini-lit" {
Artifacts: string; Artifacts: string;
"Copy HTML": string; "Copy HTML": string;
"Download HTML": string; "Download HTML": string;
"Reload HTML": string;
"Copy SVG": string; "Copy SVG": string;
"Download SVG": string; "Download SVG": string;
"Copy Markdown": string; "Copy Markdown": string;
@ -294,6 +295,7 @@ export const translations = {
Artifacts: "Artifacts", Artifacts: "Artifacts",
"Copy HTML": "Copy HTML", "Copy HTML": "Copy HTML",
"Download HTML": "Download HTML", "Download HTML": "Download HTML",
"Reload HTML": "Reload HTML",
"Copy SVG": "Copy SVG", "Copy SVG": "Copy SVG",
"Download SVG": "Download SVG", "Download SVG": "Download SVG",
"Copy Markdown": "Copy Markdown", "Copy Markdown": "Copy Markdown",
@ -470,6 +472,7 @@ export const translations = {
Artifacts: "Artefakte", Artifacts: "Artefakte",
"Copy HTML": "HTML kopieren", "Copy HTML": "HTML kopieren",
"Download HTML": "HTML herunterladen", "Download HTML": "HTML herunterladen",
"Reload HTML": "HTML neu laden",
"Copy SVG": "SVG kopieren", "Copy SVG": "SVG kopieren",
"Download SVG": "SVG herunterladen", "Download SVG": "SVG herunterladen",
"Copy Markdown": "Markdown kopieren", "Copy Markdown": "Markdown kopieren",