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

Add auto-reload for HTML artifacts when dependencies change

Browse source 
HTML artifacts can read other artifacts via getArtifact() and attachments.
When any artifact is created, updated, rewritten, or deleted, all HTML
artifacts now automatically reload to reflect the latest data.

Changes:
- Add reloadAllHtmlArtifacts() method to ArtifactsPanel
- Call reload after all artifact mutations (create/update/rewrite/delete)
- Make HtmlArtifact.sandboxIframeRef and executeContent() public
- Update runtime providers before re-executing HTML content

This ensures HTML artifacts always display current data from their dependencies.
This commit is contained in:
Mario Zechner 2025-10-18 00:10:23 +02:00
parent 2a7ccf0fcb
commit 92ce5a342f
2 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,7 @@ export class HtmlArtifact extends ArtifactElement {
private logs: Array<{ type: "log" | "error"; text: string }> = [];
// Refs for DOM elements
private sandboxIframeRef: Ref<SandboxIframe> = createRef();
public sandboxIframeRef: Ref<SandboxIframe> = createRef();
private consoleRef: Ref<Console> = createRef();
@state() private viewMode: "preview" | "code" = "preview";
@ -76,7 +76,7 @@ export class HtmlArtifact extends ArtifactElement {
}
}
private executeContent(html: string) {
public executeContent(html: string) {
const sandbox = this.sandboxIframeRef.value;
if (!sandbox) return;

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

@ -451,6 +451,18 @@ export class ArtifactsPanel extends LitElement {
});
}
// Reload all HTML artifacts (called when any artifact changes)
private reloadAllHtmlArtifacts() {
this.artifactElements.forEach((element) => {
if (element instanceof HtmlArtifact && element.sandboxIframeRef.value) {
// Update runtime providers with latest artifact state
element.runtimeProviders = this.getHtmlArtifactRuntimeProviders();
// Re-execute the HTML content
element.executeContent(element.content);
}
});
}
private async createArtifact(
params: ArtifactsParams,
options: { skipWait?: boolean; silent?: boolean } = {},
@ -479,6 +491,9 @@ export class ArtifactsPanel extends LitElement {
this.requestUpdate();
}
// Reload all HTML artifacts since they might depend on this new artifact
this.reloadAllHtmlArtifacts();
// For HTML files, wait for execution
let result = `Created file ${params.filename}`;
if (this.getFileType(params.filename) === "html" && !options.skipWait) {
@ -520,6 +535,9 @@ export class ArtifactsPanel extends LitElement {
// Show the artifact
this.showArtifact(params.filename);
// Reload all HTML artifacts since they might depend on this updated artifact
this.reloadAllHtmlArtifacts();
// For HTML files, wait for execution
let result = `Updated file ${params.filename}`;
if (this.getFileType(params.filename) === "html" && !options.skipWait) {
@ -557,6 +575,9 @@ export class ArtifactsPanel extends LitElement {
// Show the artifact
this.showArtifact(params.filename);
// Reload all HTML artifacts since they might depend on this rewritten artifact
this.reloadAllHtmlArtifacts();
// For HTML files, wait for execution
let result = "";
if (this.getFileType(params.filename) === "html" && !options.skipWait) {
@ -608,6 +629,9 @@ export class ArtifactsPanel extends LitElement {
this.onArtifactsChange?.();
this.requestUpdate();
// Reload all HTML artifacts since they might have depended on this deleted artifact
this.reloadAllHtmlArtifacts();
return `Deleted file ${params.filename}`;
}