@mariozechner/pi-web-ui 0.5.44

package/dist/components/AttachmentTile.js

@@ -0,0 +1,114 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, icon } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { FileSpreadsheet, FileText, X } from "lucide";
+import { AttachmentOverlay } from "../dialogs/AttachmentOverlay.js";
+import { i18n } from "../utils/i18n.js";
+let AttachmentTile = class AttachmentTile extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showDelete = false;
+        this.handleClick = () => {
+            AttachmentOverlay.open(this.attachment);
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.display = "block";
+        this.classList.add("max-h-16");
+    }
+    render() {
+        const hasPreview = !!this.attachment.preview;
+        const isImage = this.attachment.type === "image";
+        const isPdf = this.attachment.mimeType === "application/pdf";
+        const isDocx = this.attachment.mimeType?.includes("wordprocessingml") ||
+            this.attachment.fileName.toLowerCase().endsWith(".docx");
+        const isPptx = this.attachment.mimeType?.includes("presentationml") ||
+            this.attachment.fileName.toLowerCase().endsWith(".pptx");
+        const isExcel = this.attachment.mimeType?.includes("spreadsheetml") ||
+            this.attachment.fileName.toLowerCase().endsWith(".xlsx") ||
+            this.attachment.fileName.toLowerCase().endsWith(".xls");
+        // Choose the appropriate icon
+        const getDocumentIcon = () => {
+            if (isExcel)
+                return icon(FileSpreadsheet, "md");
+            return icon(FileText, "md");
+        };
+        return html `
+			<div class="relative group inline-block">
+				${hasPreview
+            ? html `
+							<div class="relative">
+								<img
+									src="data:${isImage ? this.attachment.mimeType : "image/png"};base64,${this.attachment.preview}"
+									class="w-16 h-16 object-cover rounded-lg border border-input cursor-pointer hover:opacity-80 transition-opacity"
+									alt="${this.attachment.fileName}"
+									title="${this.attachment.fileName}"
+									@click=${this.handleClick}
+								/>
+								${isPdf
+                ? html `
+											<!-- PDF badge overlay -->
+											<div class="absolute bottom-0 left-0 right-0 bg-background/90 px-1 py-0.5 rounded-b-lg">
+												<div class="text-[10px] text-muted-foreground text-center font-medium">${i18n("PDF")}</div>
+											</div>
+										`
+                : ""}
+							</div>
+						`
+            : html `
+							<!-- Fallback: document icon + filename -->
+							<div
+								class="w-16 h-16 rounded-lg border border-input cursor-pointer hover:opacity-80 transition-opacity bg-muted text-muted-foreground flex flex-col items-center justify-center p-2"
+								@click=${this.handleClick}
+								title="${this.attachment.fileName}"
+							>
+								${getDocumentIcon()}
+								<div class="text-[10px] text-center truncate w-full">
+									${this.attachment.fileName.length > 10
+                ? this.attachment.fileName.substring(0, 8) + "..."
+                : this.attachment.fileName}
+								</div>
+							</div>
+						`}
+				${this.showDelete
+            ? html `
+							<button
+								@click=${(e) => {
+                e.stopPropagation();
+                this.onDelete?.();
+            }}
+								class="absolute -top-1 -right-1 w-5 h-5 bg-background hover:bg-muted text-muted-foreground hover:text-foreground rounded-full flex items-center justify-center opacity-100 hover:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100 transition-opacity border border-input shadow-sm"
+								title="${i18n("Remove")}"
+							>
+								${icon(X, "xs")}
+							</button>
+						`
+            : ""}
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], AttachmentTile.prototype, "attachment", void 0);
+__decorate([
+    property({ type: Boolean })
+], AttachmentTile.prototype, "showDelete", void 0);
+__decorate([
+    property()
+], AttachmentTile.prototype, "onDelete", void 0);
+AttachmentTile = __decorate([
+    customElement("attachment-tile")
+], AttachmentTile);
+export { AttachmentTile };
+//# sourceMappingURL=AttachmentTile.js.map

package/dist/components/AttachmentTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentTile.js","sourceRoot":"","sources":["../../src/components/AttachmentTile.ts"],"names":[],"mappings":"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"}

package/dist/components/ConsoleBlock.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class ConsoleBlock extends LitElement {
+    content: string;
+    private copied;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    private copy;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=ConsoleBlock.d.ts.map

package/dist/components/ConsoleBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ConsoleBlock.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBAAa,YAAa,SAAQ,UAAU;IAC/B,OAAO,EAAE,MAAM,CAAM;IACxB,OAAO,CAAC,MAAM,CAAS;cAEb,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D,iBAAiB,IAAI,IAAI;YAKpB,IAAI;IAYT,OAAO;IAQP,MAAM;CAsBf"}

package/dist/components/ConsoleBlock.js

@@ -0,0 +1,77 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, icon } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { Check, Copy } from "lucide";
+import { i18n } from "../utils/i18n.js";
+export class ConsoleBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.content = "";
+        this.copied = false;
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.display = "block";
+    }
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.content || "");
+            this.copied = true;
+            setTimeout(() => {
+                this.copied = false;
+            }, 1500);
+        }
+        catch (e) {
+            console.error("Copy failed", e);
+        }
+    }
+    updated() {
+        // Auto-scroll to bottom on content changes
+        const container = this.querySelector(".console-scroll");
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+        }
+    }
+    render() {
+        return html `
+			<div class="border border-border rounded-lg overflow-hidden">
+				<div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border">
+					<span class="text-xs text-muted-foreground font-mono">${i18n("console")}</span>
+					<button
+						@click=${() => this.copy()}
+						class="flex items-center gap-1 px-2 py-0.5 text-xs rounded hover:bg-accent text-muted-foreground hover:text-accent-foreground transition-colors"
+						title="${i18n("Copy output")}"
+					>
+						${this.copied ? icon(Check, "sm") : icon(Copy, "sm")}
+						${this.copied ? html `<span>${i18n("Copied!")}</span>` : ""}
+					</button>
+				</div>
+				<div class="console-scroll overflow-auto max-h-64">
+					<pre class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs text-foreground font-mono whitespace-pre-wrap">
+${this.content || ""}</pre
+					>
+				</div>
+			</div>
+		`;
+    }
+}
+__decorate([
+    property()
+], ConsoleBlock.prototype, "content", void 0);
+__decorate([
+    state()
+], ConsoleBlock.prototype, "copied", void 0);
+// Register custom element
+if (!customElements.get("console-block")) {
+    customElements.define("console-block", ConsoleBlock);
+}
+//# sourceMappingURL=ConsoleBlock.js.map

package/dist/components/ConsoleBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleBlock.js","sourceRoot":"","sources":["../../src/components/ConsoleBlock.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QACa,YAAO,GAAW,EAAE,CAAC;QAChB,WAAM,GAAG,KAAK,CAAC;IAqDjC,CAAC;IAnDmB,gBAAgB;QAClC,OAAO,IAAI,CAAC;IACb,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAC9B,CAAC;IAEO,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC;YACJ,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,UAAU,CAAC,GAAG,EAAE;gBACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACrB,CAAC,EAAE,IAAI,CAAC,CAAC;QACV,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACjC,CAAC;IACF,CAAC;IAEQ,OAAO;QACf,2CAA2C;QAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAuB,CAAC;QAC9E,IAAI,SAAS,EAAE,CAAC;YACf,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;QAC9C,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;;6DAGgD,IAAI,CAAC,SAAS,CAAC;;eAE7D,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;eAEjB,IAAI,CAAC,aAAa,CAAC;;QAE1B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;QAClD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,SAAS,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;EAK9D,IAAI,CAAC,OAAO,IAAI,EAAE;;;;GAIjB,CAAC;IACH,CAAC;CACD;AAtDY;IAAX,QAAQ,EAAE;6CAAsB;AAChB;IAAhB,KAAK,EAAE;4CAAwB;AAuDjC,0BAA0B;AAC1B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;IAC1C,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC"}

package/dist/components/Input.d.ts

@@ -0,0 +1,26 @@
+import { type BaseComponentProps } from "@mariozechner/mini-lit";
+import { type Ref } from "lit/directives/ref.js";
+export type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "search";
+export type InputSize = "sm" | "md" | "lg";
+export interface InputProps extends BaseComponentProps {
+    type?: InputType;
+    size?: InputSize;
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    autocomplete?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    inputRef?: Ref<HTMLInputElement>;
+    onInput?: (e: Event) => void;
+    onChange?: (e: Event) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+}
+export declare const Input: import("@mariozechner/mini-lit").Component<InputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAY,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,KAAK,GAAG,EAAO,MAAM,uBAAuB,CAAC;AAGtD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC5F,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,KAAK,wDAmFjB,CAAC"}

package/dist/components/Input.js

@@ -0,0 +1,56 @@
+import { fc, html } from "@mariozechner/mini-lit";
+import { ref } from "lit/directives/ref.js";
+import { i18n } from "../utils/i18n.js";
+export const Input = fc(({ type = "text", size = "md", value = "", placeholder = "", label = "", error = "", disabled = false, required = false, name = "", autocomplete = "", min, max, step, inputRef, onInput, onChange, onKeyDown, onKeyUp, className = "", }) => {
+    const sizeClasses = {
+        sm: "h-8 px-3 py-1 text-sm",
+        md: "h-9 px-3 py-1 text-sm md:text-sm",
+        lg: "h-10 px-4 py-1 text-base",
+    };
+    const baseClasses = "flex w-full min-w-0 rounded-md border bg-transparent text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium";
+    const interactionClasses = "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground";
+    const focusClasses = "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
+    const darkClasses = "dark:bg-input/30";
+    const stateClasses = error
+        ? "border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+        : "border-input";
+    const disabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
+    const handleInput = (e) => {
+        onInput?.(e);
+    };
+    const handleChange = (e) => {
+        onChange?.(e);
+    };
+    return html `
+			<div class="flex flex-col gap-1.5 ${className}">
+				${label
+        ? html `
+							<label class="text-sm font-medium text-foreground">
+								${label} ${required ? html `<span class="text-destructive">${i18n("*")}</span>` : ""}
+							</label>
+						`
+        : ""}
+				<input
+					type="${type}"
+					class="${baseClasses} ${sizeClasses[size]} ${interactionClasses} ${focusClasses} ${darkClasses} ${stateClasses} ${disabledClasses}"
+					.value=${value}
+					placeholder="${placeholder}"
+					?disabled=${disabled}
+					?required=${required}
+					?aria-invalid=${!!error}
+					name="${name}"
+					autocomplete="${autocomplete}"
+					min="${min ?? ""}"
+					max="${max ?? ""}"
+					step="${step ?? ""}"
+					@input=${handleInput}
+					@change=${handleChange}
+					@keydown=${onKeyDown}
+					@keyup=${onKeyUp}
+					${inputRef ? ref(inputRef) : ""}
+				/>
+				${error ? html `<span class="text-sm text-destructive">${error}</span>` : ""}
+			</div>
+		`;
+});
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AA0BxC,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,CACtB,CAAC,EACA,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,EAAE,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,EAAE,EACT,YAAY,GAAG,EAAE,EACjB,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GAAG,EAAE,GACd,EAAE,EAAE;IACJ,MAAM,WAAW,GAAG;QACnB,EAAE,EAAE,uBAAuB;QAC3B,EAAE,EAAE,kCAAkC;QACtC,EAAE,EAAE,0BAA0B;KAC9B,CAAC;IAEF,MAAM,WAAW,GAChB,qNAAqN,CAAC;IACvN,MAAM,kBAAkB,GACvB,0FAA0F,CAAC;IAC5F,MAAM,YAAY,GAAG,+EAA+E,CAAC;IACrG,MAAM,WAAW,GAAG,kBAAkB,CAAC;IACvC,MAAM,YAAY,GAAG,KAAK;QACzB,CAAC,CAAC,2FAA2F;QAC7F,CAAC,CAAC,cAAc,CAAC;IAClB,MAAM,eAAe,GAAG,8EAA8E,CAAC;IAEvG,MAAM,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;QAChC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;QACjC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;uCAC0B,SAAS;MAE3C,KAAK;QACJ,CAAC,CAAC,IAAI,CAAA;;UAEF,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;OAEpF;QACD,CAAC,CAAC,EACJ;;aAES,IAAI;cACH,WAAW,IACnB,WAAW,CAAC,IAAI,CACjB,IAAI,kBAAkB,IAAI,YAAY,IAAI,WAAW,IAAI,YAAY,IAAI,eAAe;cAC/E,KAAK;oBACC,WAAW;iBACd,QAAQ;iBACR,QAAQ;qBACJ,CAAC,CAAC,KAAK;aACf,IAAI;qBACI,YAAY;YACrB,GAAG,IAAI,EAAE;YACT,GAAG,IAAI,EAAE;aACR,IAAI,IAAI,EAAE;cACT,WAAW;eACV,YAAY;gBACX,SAAS;cACX,OAAO;OACd,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;;MAE9B,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;;GAE5E,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/MessageEditor.d.ts

@@ -0,0 +1,38 @@
+import type { Model } from "@mariozechner/pi-ai";
+import { LitElement } from "lit";
+import "./AttachmentTile.js";
+import { type Attachment } from "../utils/attachment-utils.js";
+export declare class MessageEditor extends LitElement {
+    private _value;
+    private textareaRef;
+    get value(): string;
+    set value(val: string);
+    isStreaming: boolean;
+    currentModel?: Model<any>;
+    showAttachmentButton: boolean;
+    showModelSelector: boolean;
+    showThinking: boolean;
+    onInput?: (value: string) => void;
+    onSend?: (input: string, attachments: Attachment[]) => void;
+    onAbort?: () => void;
+    onModelSelect?: () => void;
+    onFilesChange?: (files: Attachment[]) => void;
+    attachments: Attachment[];
+    maxFiles: number;
+    maxFileSize: number;
+    acceptedTypes: string;
+    processingFiles: boolean;
+    private fileInputRef;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private handleTextareaInput;
+    private handleKeyDown;
+    private handleSend;
+    private handleAttachmentClick;
+    private handleFilesSelected;
+    private removeFile;
+    private adjustTextareaHeight;
+    firstUpdated(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=MessageEditor.d.ts.map

package/dist/components/MessageEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageEditor.d.ts","sourceRoot":"","sources":["../../src/components/MessageEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,8BAA8B,CAAC;AAG/E,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,WAAW,CAAoC;IAEvD,IACI,KAAK,IAIM,MAAM,CAFpB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAWpB;IAEW,WAAW,UAAS;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1B,oBAAoB,UAAQ;IAC5B,iBAAiB,UAAQ;IACzB,YAAY,UAAS;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,WAAW,EAAE,UAAU,EAAE,CAAM;IAC/B,QAAQ,SAAM;IACd,WAAW,SAAoB;IAC/B,aAAa,SACqF;IAErG,eAAe,UAAS;IACjC,OAAO,CAAC,YAAY,CAAiC;cAElC,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAIrE,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,aAAa,CAUnB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;YAEY,mBAAmB;IAmCjC,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,oBAAoB;IAYnB,YAAY;IAQZ,OAAO;IAOP,MAAM;CAwHf"}

package/dist/components/MessageEditor.js

@@ -0,0 +1,296 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Button, html, icon } from "@mariozechner/mini-lit";
+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 { loadAttachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+let MessageEditor = class MessageEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._value = "";
+        this.textareaRef = createRef();
+        this.isStreaming = false;
+        this.showAttachmentButton = true;
+        this.showModelSelector = true;
+        this.showThinking = false; // Disabled for now
+        this.attachments = [];
+        this.maxFiles = 10;
+        this.maxFileSize = 20 * 1024 * 1024; // 20MB
+        this.acceptedTypes = "image/*,application/pdf,.docx,.pptx,.xlsx,.xls,.txt,.md,.json,.xml,.html,.css,.js,.ts,.jsx,.tsx,.yml,.yaml";
+        this.processingFiles = false;
+        this.fileInputRef = createRef();
+        this.handleTextareaInput = (e) => {
+            const textarea = e.target;
+            this.value = textarea.value;
+            textarea.style.height = "auto";
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+            this.onInput?.(this.value);
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                if (!this.isStreaming && !this.processingFiles && (this.value.trim() || this.attachments.length > 0)) {
+                    this.handleSend();
+                }
+            }
+            else if (e.key === "Escape" && this.isStreaming) {
+                e.preventDefault();
+                this.onAbort?.();
+            }
+        };
+        this.handleSend = () => {
+            this.onSend?.(this.value, this.attachments);
+        };
+        this.handleAttachmentClick = () => {
+            this.fileInputRef.value?.click();
+        };
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        const oldValue = this._value;
+        this._value = val;
+        this.requestUpdate("value", oldValue);
+        this.updateComplete.then(() => {
+            const textarea = this.textareaRef.value;
+            if (textarea) {
+                textarea.style.height = "auto";
+                textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+            }
+        });
+    }
+    createRenderRoot() {
+        return this;
+    }
+    async handleFilesSelected(e) {
+        const input = e.target;
+        const files = Array.from(input.files || []);
+        if (files.length === 0)
+            return;
+        if (files.length + this.attachments.length > this.maxFiles) {
+            alert(`Maximum ${this.maxFiles} files allowed`);
+            input.value = "";
+            return;
+        }
+        this.processingFiles = true;
+        const newAttachments = [];
+        for (const file of files) {
+            try {
+                if (file.size > this.maxFileSize) {
+                    alert(`${file.name} exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+                    continue;
+                }
+                const attachment = await loadAttachment(file);
+                newAttachments.push(attachment);
+            }
+            catch (error) {
+                console.error(`Error processing ${file.name}:`, error);
+                alert(`Failed to process ${file.name}: ${String(error)}`);
+            }
+        }
+        this.attachments = [...this.attachments, ...newAttachments];
+        this.onFilesChange?.(this.attachments);
+        this.processingFiles = false;
+        input.value = ""; // Reset input
+    }
+    removeFile(fileId) {
+        this.attachments = this.attachments.filter((f) => f.id !== fileId);
+        this.onFilesChange?.(this.attachments);
+    }
+    adjustTextareaHeight() {
+        const textarea = this.textareaRef.value;
+        if (textarea) {
+            // Reset height to auto to get accurate scrollHeight
+            textarea.style.height = "auto";
+            // Only adjust if there's content, otherwise keep minimal height
+            if (this.value.trim()) {
+                textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+            }
+        }
+    }
+    firstUpdated() {
+        const textarea = this.textareaRef.value;
+        if (textarea) {
+            // Don't adjust height on first render - let it be minimal
+            textarea.focus();
+        }
+    }
+    updated() {
+        // Only adjust height when component updates if there's content
+        if (this.value) {
+            this.adjustTextareaHeight();
+        }
+    }
+    render() {
+        return html `
+			<div class="bg-card rounded-xl border border-border shadow-sm">
+				<!-- Attachments -->
+				${this.attachments.length > 0
+            ? html `
+							<div class="px-4 pt-3 pb-2 flex flex-wrap gap-2">
+								${this.attachments.map((attachment) => html `
+										<attachment-tile
+											.attachment=${attachment}
+											.showDelete=${true}
+											.onDelete=${() => this.removeFile(attachment.id)}
+										></attachment-tile>
+									`)}
+							</div>
+						`
+            : ""}
+
+				<textarea
+					class="w-full bg-transparent p-4 text-foreground placeholder-muted-foreground outline-none resize-none overflow-y-auto"
+					placeholder=${i18n("Type a message...")}
+					rows="1"
+					style="max-height: 200px;"
+					.value=${this.value}
+					@input=${this.handleTextareaInput}
+					@keydown=${this.handleKeyDown}
+					${ref(this.textareaRef)}
+				></textarea>
+
+				<!-- Hidden file input -->
+				<input
+					type="file"
+					${ref(this.fileInputRef)}
+					@change=${this.handleFilesSelected}
+					accept=${this.acceptedTypes}
+					multiple
+					style="display: none;"
+				/>
+
+				<!-- Button Row -->
+				<div class="px-2 pb-2 flex items-center justify-between">
+					<!-- Left side - attachment and quick action buttons -->
+					<div class="flex gap-2 items-center">
+						${this.showAttachmentButton
+            ? this.processingFiles
+                ? html `
+										<div class="h-8 w-8 flex items-center justify-center">
+											${icon(Loader2, "sm", "animate-spin text-muted-foreground")}
+										</div>
+									`
+                : html `
+										${Button({
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    onClick: this.handleAttachmentClick,
+                    children: icon(Paperclip, "sm"),
+                })}
+									`
+            : ""}
+					</div>
+
+					<!-- Model selector and send on the right -->
+					<div class="flex gap-2 items-center">
+						${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")}
+											<span class="ml-1">${this.currentModel.id}</span>
+										`,
+                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 `<div style="transform: rotate(-45deg)">${icon(Send, "sm")}</div>`,
+                className: "h-8 w-8",
+            })}
+								`}
+					</div>
+				</div>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property()
+], MessageEditor.prototype, "value", null);
+__decorate([
+    property()
+], MessageEditor.prototype, "isStreaming", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "currentModel", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "showAttachmentButton", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "showModelSelector", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "showThinking", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onInput", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onSend", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onAbort", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onModelSelect", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onFilesChange", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "attachments", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "maxFiles", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "maxFileSize", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "acceptedTypes", void 0);
+__decorate([
+    state()
+], MessageEditor.prototype, "processingFiles", void 0);
+MessageEditor = __decorate([
+    customElement("message-editor")
+], MessageEditor);
+export { MessageEditor };
+//# sourceMappingURL=MessageEditor.js.map