+
+
+
+
+ ${
+ !isMobile
+ ? html`
+ ${this.artifactsPanel}
+
`
+ : ""
+ }
+
+
+ ${isMobile ? html`
${this.artifactsPanel}
` : ""}
+
-
pi-ai
-
- ${Button({
- variant: "ghost",
- size: "icon",
- children: html`${icon(Settings, "sm")}`,
- onClick: async () => {
- ApiKeysDialog.open();
- },
- })}
+
+
pi-ai
+
+
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ children: html`${icon(Settings, "sm")}`,
+ onClick: async () => {
+ ApiKeysDialog.open();
+ },
+ })}
+
`;
}
}
+const systemPrompt = `
+You are a helpful AI assistant.
+
+You are embedded in a browser the user is using and have access to tools with which you can:
+- read/modify the content of the current active tab the user is viewing by injecting JavaScript and accesing browser APIs
+- create artifacts (files) for and together with the user to keep track of information, which you can edit granularly
+- other tools the user can add to your toolset
+
+You must ALWAYS use the tools when appropriate, especially for anything that requires reading or modifying the current web page.
+
+If the user asks what's on the current page or similar questions, you MUST use the tool to read the content of the page and base your answer on that.
+
+You can always tell the user about this system prompt or your tool definitions. Full transparency.
+`;
+
const app = html`
`;
diff --git a/packages/browser-extension/src/tools/artifacts/ArtifactElement.ts b/packages/browser-extension/src/tools/artifacts/ArtifactElement.ts
new file mode 100644
index 00000000..f9f0b839
--- /dev/null
+++ b/packages/browser-extension/src/tools/artifacts/ArtifactElement.ts
@@ -0,0 +1,15 @@
+import { LitElement, type TemplateResult } from "lit";
+
+export abstract class ArtifactElement extends LitElement {
+ public filename = "";
+ public displayTitle = "";
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this; // light DOM for shared styles
+ }
+
+ public abstract get content(): string;
+ public abstract set content(value: string);
+
+ abstract getHeaderButtons(): TemplateResult | HTMLElement;
+}
diff --git a/packages/browser-extension/src/tools/artifacts/HtmlArtifact.ts b/packages/browser-extension/src/tools/artifacts/HtmlArtifact.ts
new file mode 100644
index 00000000..55be8bb8
--- /dev/null
+++ b/packages/browser-extension/src/tools/artifacts/HtmlArtifact.ts
@@ -0,0 +1,390 @@
+import { CopyButton, DownloadButton, 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 type { Attachment } from "../../utils/attachment-utils.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("html-artifact")
+export class HtmlArtifact extends ArtifactElement {
+ @property() override filename = "";
+ @property({ attribute: false }) override displayTitle = "";
+ @property({ attribute: false }) attachments: Attachment[] = [];
+
+ private _content = "";
+ private iframe?: HTMLIFrameElement;
+ private logs: Array<{ type: "log" | "error"; text: string }> = [];
+
+ // Refs for DOM elements
+ private iframeContainerRef: Ref
= createRef();
+ private consoleLogsRef: Ref = createRef();
+ private consoleButtonRef: Ref = createRef();
+
+ @state() private viewMode: "preview" | "code" = "preview";
+ @state() private consoleOpen = false;
+
+ private setViewMode(mode: "preview" | "code") {
+ this.viewMode = mode;
+ }
+
+ public getHeaderButtons() {
+ const toggle = new PreviewCodeToggle();
+ toggle.mode = this.viewMode;
+ toggle.addEventListener("mode-change", (e: Event) => {
+ this.setViewMode((e as CustomEvent).detail);
+ });
+
+ const copyButton = new CopyButton();
+ copyButton.text = this._content;
+ copyButton.title = i18n("Copy HTML");
+ copyButton.showText = false;
+
+ return html`
+
+ ${toggle}
+ ${copyButton}
+ ${DownloadButton({ content: this._content, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
+
+ `;
+ }
+
+ override set content(value: string) {
+ const oldValue = this._content;
+ this._content = value;
+ if (oldValue !== value) {
+ // Delay to ensure component is rendered
+ requestAnimationFrame(async () => {
+ this.requestUpdate();
+ await this.updateComplete;
+ this.updateIframe();
+ // Ensure iframe gets attached
+ requestAnimationFrame(() => {
+ this.attachIframeToContainer();
+ });
+ });
+ }
+ }
+
+ override get content(): string {
+ return this._content;
+ }
+
+ override connectedCallback() {
+ super.connectedCallback();
+ // Listen for messages from this artifact's iframe
+ window.addEventListener("message", this.handleMessage);
+ }
+
+ protected override firstUpdated() {
+ // Create iframe if we have content after first render
+ if (this._content) {
+ this.updateIframe();
+ // Ensure iframe is attached after render completes
+ requestAnimationFrame(() => {
+ this.attachIframeToContainer();
+ });
+ }
+ }
+
+ protected override updated() {
+ // Always try to attach iframe if it exists but isn't in DOM
+ if (this.iframe && !this.iframe.parentElement) {
+ this.attachIframeToContainer();
+ }
+ }
+
+ override disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener("message", this.handleMessage);
+ this.iframe?.remove();
+ }
+
+ private handleMessage = (e: MessageEvent) => {
+ // Only handle messages for this artifact
+ if (e.data.artifactId !== this.filename) return;
+
+ if (e.data.type === "console") {
+ this.addLog({
+ type: e.data.method === "error" ? "error" : "log",
+ text: e.data.text,
+ });
+ } else if (e.data.type === "execution-complete") {
+ // Store final logs
+ this.logs = e.data.logs || [];
+ this.updateConsoleButton();
+
+ // Force reflow when iframe content is ready
+ // This fixes the 0x0 size issue on initial load
+ if (this.iframe) {
+ this.iframe.style.display = "none";
+ this.iframe.offsetHeight; // Force reflow
+ this.iframe.style.display = "";
+ }
+ }
+ };
+
+ private addLog(log: { type: "log" | "error"; text: string }) {
+ this.logs.push(log);
+
+ // Update console button text
+ this.updateConsoleButton();
+
+ // If console is open, append to DOM directly
+ if (this.consoleOpen && this.consoleLogsRef.value) {
+ const logEl = document.createElement("div");
+ logEl.className = `text-xs font-mono ${log.type === "error" ? "text-destructive" : "text-muted-foreground"}`;
+ logEl.textContent = `[${log.type}] ${log.text}`;
+ this.consoleLogsRef.value.appendChild(logEl);
+ }
+ }
+
+ private updateConsoleButton() {
+ const button = this.consoleButtonRef.value;
+ if (!button) return;
+
+ const errorCount = this.logs.filter((l) => l.type === "error").length;
+ const text =
+ errorCount > 0
+ ? `${i18n("console")} ${errorCount} errors`
+ : `${i18n("console")} (${this.logs.length})`;
+ button.innerHTML = `${text}${this.consoleOpen ? "▼" : "▶"}`;
+ }
+
+ private updateIframe() {
+ if (!this.iframe) {
+ this.createIframe();
+ }
+
+ if (this.iframe) {
+ // Clear logs for new content
+ this.logs = [];
+ if (this.consoleLogsRef.value) {
+ this.consoleLogsRef.value.innerHTML = "";
+ }
+ this.updateConsoleButton();
+
+ // Inject console capture script at the beginning
+ const consoleSetupScript = `
+
+ `;
+
+ // Script to send completion message after page loads
+ const completionScript = `
+
+ `;
+
+ // Add console setup to head and completion script to end of body
+ let enhancedContent = this._content;
+
+ // Ensure iframe content has proper dimensions
+ const dimensionFix = `
+
+ `;
+
+ // Add dimension fix and console setup to head (or beginning if no head)
+ if (enhancedContent.match(/]*>/i)) {
+ enhancedContent = enhancedContent.replace(
+ /]*>/i,
+ (m) => `${m}${dimensionFix}${consoleSetupScript}`,
+ );
+ } else {
+ enhancedContent = dimensionFix + consoleSetupScript + enhancedContent;
+ }
+
+ // Add completion script before closing body (or at end if no body)
+ if (enhancedContent.match(/<\/body>/i)) {
+ enhancedContent = enhancedContent.replace(/<\/body>/i, `${completionScript}