+ ${
+ hasPreview
+ ? html`
+
+ `;
+ }
+}
diff --git a/packages/browser-extension/src/ChatPanel.ts b/packages/browser-extension/src/ChatPanel.ts
index ed4b7d0f..c985ceaf 100644
--- a/packages/browser-extension/src/ChatPanel.ts
+++ b/packages/browser-extension/src/ChatPanel.ts
@@ -1,13 +1,68 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
+import { html } from "@mariozechner/mini-lit";
+import type { Model } from "@mariozechner/pi-ai";
+import { getModel } from "@mariozechner/pi-ai";
+import { LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { ModelSelector } from "./dialogs/ModelSelector.js";
+import "./MessageEditor.js";
+import type { Attachment } from "./utils/attachment-utils.js";
@customElement("pi-chat-panel")
export class ChatPanel extends LitElement {
+ @state() currentModel: Model
+ 
+ ${
+ isPdf
+ ? html`
+
+
+ `
+ : html`
+
+
+
+ `
+ : ""
+ }
+ ${i18n("PDF")}
+
+ ${getDocumentIcon()}
+
+ `
+ }
+ ${
+ this.showDelete
+ ? html`
+
+ `
+ : ""
+ }
+
+ ${
+ this.attachment.fileName.length > 10
+ ? this.attachment.fileName.substring(0, 8) + "..."
+ : this.attachment.fileName
+ }
+
+ Hello world
`; + return html` +
+
+
+ `;
}
}
diff --git a/packages/browser-extension/src/MessageEditor.ts b/packages/browser-extension/src/MessageEditor.ts
new file mode 100644
index 00000000..362b9673
--- /dev/null
+++ b/packages/browser-extension/src/MessageEditor.ts
@@ -0,0 +1,267 @@
+import { Button, html, icon } from "@mariozechner/mini-lit";
+import type { Model } from "@mariozechner/pi-ai";
+import { LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
+import "./AttachmentTile.js";
+import { type Attachment, loadAttachment } from "./utils/attachment-utils.js";
+import { i18n } from "./utils/i18n.js";
+
+@customElement("message-editor")
+export class MessageEditor extends LitElement {
+ private _value = "";
+ private textareaRef = createRef
+
+
+
+
+
+ {
+ this.messageText = value;
+ }}
+ .onSend=${this.handleSend}
+ .onModelSelect=${this.handleModelSelect}
+ .onFilesChange=${(files: Attachment[]) => {
+ this.attachments = files;
+ }}
+ >
+
+
+
+ ${
+ this.attachments.length > 0
+ ? html`
+
+ `;
+ }
+}
diff --git a/packages/browser-extension/src/ModeToggle.ts b/packages/browser-extension/src/ModeToggle.ts
new file mode 100644
index 00000000..043bccde
--- /dev/null
+++ b/packages/browser-extension/src/ModeToggle.ts
@@ -0,0 +1,53 @@
+import { html } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+
+export class ModeToggle extends LitElement {
+ @property({ type: Array }) modes: string[] = ["Mode 1", "Mode 2"];
+ @property({ type: Number }) selectedIndex = 0;
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this;
+ }
+
+ private setMode(index: number) {
+ if (this.selectedIndex !== index && index >= 0 && index < this.modes.length) {
+ this.selectedIndex = index;
+ this.dispatchEvent(
+ new CustomEvent<{ index: number; mode: string }>("mode-change", {
+ detail: { index, mode: this.modes[index] },
+ bubbles: true,
+ }),
+ );
+ }
+ }
+
+ override render() {
+ if (this.modes.length < 2) return html``;
+
+ return html`
+
+ ${this.attachments.map(
+ (attachment) => html`
+ this.removeFile(attachment.id)}
+ >
+ `,
+ )}
+
+ `
+ : ""
+ }
+
+
+
+
+
+
+
+
+
+
+
+ ${
+ this.showAttachmentButton
+ ? this.processingFiles
+ ? html`
+
+
+
+
+ ${icon(Loader2, "sm", "animate-spin text-muted-foreground")}
+
+ `
+ : html`
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ className: "h-8 w-8",
+ onClick: this.handleAttachmentClick,
+ children: icon(Paperclip, "sm"),
+ })}
+ `
+ : ""
+ }
+
+ ${
+ this.showModelSelector && this.currentModel
+ ? html`
+ ${Button({
+ variant: "ghost",
+ size: "sm",
+ onClick: () => {
+ // Focus textarea before opening model selector so focus returns there
+ this.textareaRef.value?.focus();
+ // Wait for next frame to ensure focus takes effect before dialog captures it
+ requestAnimationFrame(() => {
+ this.onModelSelect?.();
+ });
+ },
+ children: html`
+ ${icon(Sparkles, "sm")}
+ ${this.currentModel.id}
+ `,
+ className: "h-8 text-xs truncate",
+ })}
+ `
+ : ""
+ }
+ ${
+ this.isStreaming
+ ? html`
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ onClick: this.onAbort,
+ children: icon(Square, "sm"),
+ className: "h-8 w-8",
+ })}
+ `
+ : html`
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ onClick: this.handleSend,
+ disabled: (!this.value.trim() && this.attachments.length === 0) || this.processingFiles,
+ children: html`
+ ${icon(Send, "sm")}
`,
+ className: "h-8 w-8",
+ })}
+ `
+ }
+
+ ${this.modes.map(
+ (mode, index) => html`
+
+ `,
+ )}
+
+ `;
+ }
+}
+
+// Register the custom element only once
+if (!customElements.get("mode-toggle")) {
+ customElements.define("mode-toggle", ModeToggle);
+}
diff --git a/packages/browser-extension/src/dialogs/ApiKeysDialog.ts b/packages/browser-extension/src/dialogs/ApiKeysDialog.ts
new file mode 100644
index 00000000..a54eec4e
--- /dev/null
+++ b/packages/browser-extension/src/dialogs/ApiKeysDialog.ts
@@ -0,0 +1,273 @@
+import { Alert, Badge, Button, DialogHeader, html, type TemplateResult } from "@mariozechner/mini-lit";
+import { type Context, complete, getModel, getProviders } from "@mariozechner/pi-ai";
+import type { PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { Input } from "../Input.js";
+import { keyStore } from "../state/KeyStore.js";
+import { i18n } from "../utils/i18n.js";
+import { DialogBase } from "./DialogBase.js";
+
+// Test models for each provider - known to be reliable and cheap
+const TEST_MODELS: Record
+
+
+ `;
+ }
+}
diff --git a/packages/browser-extension/src/sidepanel.html b/packages/browser-extension/src/sidepanel.html
index 637fb1c6..6a370d99 100644
--- a/packages/browser-extension/src/sidepanel.html
+++ b/packages/browser-extension/src/sidepanel.html
@@ -2,7 +2,7 @@
-
+ ${DialogHeader({ title: i18n("API Keys Configuration") })}
+
+
+
+ ${
+ this.error
+ ? html`
+ + ${i18n("Configure API keys for LLM providers. Keys are stored locally in your browser.")} +
+${Alert(this.error, "destructive")}
+ `
+ : ""
+ }
+
+
+
+
+
+
+
+ ${providers.map(
+ (provider) => html`
+
+
+
+ `,
+ )}
+
+ ${provider}
+ ${
+ this.apiKeys[provider]
+ ? Badge({ children: i18n("Configured"), variant: "default" })
+ : Badge({ children: i18n("Not configured"), variant: "secondary" })
+ }
+ ${
+ this.testResults[provider] === "success"
+ ? Badge({ children: i18n("✓ Valid"), variant: "default" })
+ : this.testResults[provider] === "error"
+ ? Badge({ children: i18n("✗ Invalid"), variant: "destructive" })
+ : this.testResults[provider] === "testing"
+ ? Badge({ children: i18n("Testing..."), variant: "secondary" })
+ : ""
+ }
+
+
+
+ ${Input({
+ type: "password",
+ placeholder: this.apiKeys[provider] ? i18n("Update API key") : i18n("Enter API key"),
+ value: this.apiKeyInputs[provider] || "",
+ onInput: (e: Event) => {
+ this.apiKeyInputs[provider] = (e.target as HTMLInputElement).value;
+ this.requestUpdate();
+ },
+ className: "flex-1",
+ })}
+
+ ${Button({
+ onClick: () => this.saveKey(provider),
+ variant: "default",
+ size: "sm",
+ disabled: !this.apiKeyInputs[provider] || this.savingProvider === provider,
+ loading: this.savingProvider === provider,
+ children:
+ this.savingProvider === provider
+ ? i18n("Testing...")
+ : this.apiKeys[provider]
+ ? i18n("Update")
+ : i18n("Save"),
+ })}
+
+ ${
+ this.apiKeys[provider]
+ ? html`
+ ${Button({
+ onClick: () => this.testExistingKey(provider),
+ variant: "outline",
+ size: "sm",
+ loading: this.testingProvider === provider,
+ disabled: this.testingProvider !== "" && this.testingProvider !== provider,
+ children:
+ this.testingProvider === provider ? i18n("Testing...") : i18n("Test"),
+ })}
+ ${Button({
+ onClick: () => this.removeKey(provider),
+ variant: "ghost",
+ size: "sm",
+ children: i18n("Remove"),
+ })}
+ `
+ : ""
+ }
+
+
+
+ + ${i18n("API keys are required to use AI models. Get your keys from the provider's website.")} +
+
- pi-ai webby
+ pi-ai
diff --git a/packages/browser-extension/src/state/KeyStore.ts b/packages/browser-extension/src/state/KeyStore.ts
new file mode 100644
index 00000000..3b20cec7
--- /dev/null
+++ b/packages/browser-extension/src/state/KeyStore.ts
@@ -0,0 +1,50 @@
+import { getProviders } from "@mariozechner/pi-ai";
+
+/**
+ * Interface for API key storage
+ */
+export interface KeyStore {
+ getKey(provider: string): Promise