Port PDF/Office support, message editor, overlays, key setter

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<any> | null = null;
+	@state() messageText = "";
+	@state() attachments: Attachment[] = [];
+
 	createRenderRoot() {
 		return this;
 	}
 
+	override async connectedCallback() {
+		super.connectedCallback();
+		// Set default model
+		this.currentModel = getModel("anthropic", "claude-3-5-haiku-20241022");
+	}
+
+	private handleSend = (text: string, attachments: Attachment[]) => {
+		// For now just alert and clear
+		alert(`Message: ${text}\nAttachments: ${attachments.length}`);
+		this.messageText = "";
+		this.attachments = [];
+	};
+
+	private handleModelSelect = () => {
+		ModelSelector.open(this.currentModel, (model) => {
+			this.currentModel = model;
+		});
+	};
+
 	render() {
-		return html`<h1>Hello world</h1>`;
+		return html`
+			<div class="flex flex-col h-full">
+				<!-- Messages area (empty for now) -->
+				<div class="flex-1 overflow-y-auto p-4">
+					<!-- Messages will go here -->
+				</div>
+
+				<!-- Message editor at the bottom -->
+				<div class="p-4 border-t border-border">
+					<message-editor
+						.value=${this.messageText}
+						.currentModel=${this.currentModel}
+						.attachments=${this.attachments}
+						.showAttachmentButton=${true}
+						.showThinking=${false}
+						.onInput=${(value: string) => {
+							this.messageText = value;
+						}}
+						.onSend=${this.handleSend}
+						.onModelSelect=${this.handleModelSelect}
+						.onFilesChange=${(files: Attachment[]) => {
+							this.attachments = files;
+						}}
+					></message-editor>
+				</div>
+			</div>
+		`;
 	}
 }