pi-usereq 0.49.0 → 0.50.0

package/pi.dev-src/pi-mono/web-ui/src/components/MessageEditor.ts

@@ -1,405 +0,0 @@
-import { icon } from "@mariozechner/mini-lit";
-import { Button } from "@mariozechner/mini-lit/dist/Button.js";
-import { Select, type SelectOption } from "@mariozechner/mini-lit/dist/Select.js";
-import type { Model } from "@mariozechner/pi-ai";
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { Brain, Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
-import { type Attachment, loadAttachment } from "../utils/attachment-utils.js";
-import { i18n } from "../utils/i18n.js";
-import "./AttachmentTile.js";
-import type { ThinkingLevel } from "@mariozechner/pi-agent-core";
-
-@customElement("message-editor")
-export class MessageEditor extends LitElement {
-	private _value = "";
-	private textareaRef = createRef<HTMLTextAreaElement>();
-
-	@property()
-	get value() {
-		return this._value;
-	}
-
-	set value(val: string) {
-		const oldValue = this._value;
-		this._value = val;
-		this.requestUpdate("value", oldValue);
-	}
-
-	@property() isStreaming = false;
-	@property() currentModel?: Model<any>;
-	@property() thinkingLevel: ThinkingLevel = "off";
-	@property() showAttachmentButton = true;
-	@property() showModelSelector = true;
-	@property() showThinkingSelector = true;
-	@property() onInput?: (value: string) => void;
-	@property() onSend?: (input: string, attachments: Attachment[]) => void;
-	@property() onAbort?: () => void;
-	@property() onModelSelect?: () => void;
-	@property() onThinkingChange?: (level: "off" | "minimal" | "low" | "medium" | "high") => void;
-	@property() onFilesChange?: (files: Attachment[]) => void;
-	@property() attachments: Attachment[] = [];
-	@property() maxFiles = 10;
-	@property() maxFileSize = 20 * 1024 * 1024; // 20MB
-	@property() acceptedTypes =
-		"image/*,application/pdf,.docx,.pptx,.xlsx,.xls,.txt,.md,.json,.xml,.html,.css,.js,.ts,.jsx,.tsx,.yml,.yaml";
-
-	@state() processingFiles = false;
-	@state() isDragging = false;
-	private fileInputRef = createRef<HTMLInputElement>();
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
-
-	private handleTextareaInput = (e: Event) => {
-		const textarea = e.target as HTMLTextAreaElement;
-		this.value = textarea.value;
-		this.onInput?.(this.value);
-	};
-
-	private handleKeyDown = (e: KeyboardEvent) => {
-		// Ignore key events during IME composition (e.g. CJK input)
-		if (e.isComposing || e.key === "Process") return;
-
-		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?.();
-		}
-	};
-
-	private handlePaste = async (e: ClipboardEvent) => {
-		const items = e.clipboardData?.items;
-		if (!items) return;
-
-		const imageFiles: File[] = [];
-
-		// Check for image items in clipboard
-		for (let i = 0; i < items.length; i++) {
-			const item = items[i];
-			if (item.type.startsWith("image/")) {
-				const file = item.getAsFile();
-				if (file) {
-					imageFiles.push(file);
-				}
-			}
-		}
-
-		// If we found images, process them
-		if (imageFiles.length > 0) {
-			e.preventDefault(); // Prevent default paste behavior
-
-			if (imageFiles.length + this.attachments.length > this.maxFiles) {
-				alert(`Maximum ${this.maxFiles} files allowed`);
-				return;
-			}
-
-			this.processingFiles = true;
-			const newAttachments: Attachment[] = [];
-
-			for (const file of imageFiles) {
-				try {
-					if (file.size > this.maxFileSize) {
-						alert(`Image 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 pasted image:", error);
-					alert(`Failed to process pasted image: ${String(error)}`);
-				}
-			}
-
-			this.attachments = [...this.attachments, ...newAttachments];
-			this.onFilesChange?.(this.attachments);
-			this.processingFiles = false;
-		}
-	};
-
-	private handleSend = () => {
-		this.onSend?.(this.value, this.attachments);
-	};
-
-	private handleAttachmentClick = () => {
-		this.fileInputRef.value?.click();
-	};
-
-	private async handleFilesSelected(e: Event) {
-		const input = e.target as HTMLInputElement;
-		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: Attachment[] = [];
-
-		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
-	}
-
-	private removeFile(fileId: string) {
-		this.attachments = this.attachments.filter((f) => f.id !== fileId);
-		this.onFilesChange?.(this.attachments);
-	}
-
-	private handleDragOver = (e: DragEvent) => {
-		e.preventDefault();
-		e.stopPropagation();
-		if (!this.isDragging) {
-			this.isDragging = true;
-		}
-	};
-
-	private handleDragLeave = (e: DragEvent) => {
-		e.preventDefault();
-		e.stopPropagation();
-		// Only set isDragging to false if we're leaving the entire component
-		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-		const x = e.clientX;
-		const y = e.clientY;
-		if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
-			this.isDragging = false;
-		}
-	};
-
-	private handleDrop = async (e: DragEvent) => {
-		e.preventDefault();
-		e.stopPropagation();
-		this.isDragging = false;
-
-		const files = Array.from(e.dataTransfer?.files || []);
-		if (files.length === 0) return;
-
-		if (files.length + this.attachments.length > this.maxFiles) {
-			alert(`Maximum ${this.maxFiles} files allowed`);
-			return;
-		}
-
-		this.processingFiles = true;
-		const newAttachments: Attachment[] = [];
-
-		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;
-	};
-
-	override firstUpdated() {
-		const textarea = this.textareaRef.value;
-		if (textarea) {
-			textarea.focus();
-		}
-	}
-
-	override render() {
-		// Check if current model supports thinking/reasoning
-		const model = this.currentModel;
-		const supportsThinking = model?.reasoning === true; // Models with reasoning:true support thinking
-
-		return html`
-			<div
-				class="bg-card rounded-xl border shadow-sm relative ${this.isDragging ? "border-primary border-2 bg-primary/5" : "border-border"}"
-				@dragover=${this.handleDragOver}
-				@dragleave=${this.handleDragLeave}
-				@drop=${this.handleDrop}
-			>
-				<!-- Drag overlay -->
-				${
-					this.isDragging
-						? html`
-					<div class="absolute inset-0 bg-primary/10 rounded-xl pointer-events-none z-10 flex items-center justify-center">
-						<div class="text-primary font-medium">${i18n("Drop files here")}</div>
-					</div>
-				`
-						: ""
-				}
-
-				<!-- 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; field-sizing: content; min-height: 1lh; height: auto;"
-					.value=${this.value}
-					@input=${this.handleTextareaInput}
-					@keydown=${this.handleKeyDown}
-					@paste=${this.handlePaste}
-					${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 thinking selector -->
-					<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"),
-										})}
-									`
-								: ""
-						}
-						${
-							supportsThinking && this.showThinkingSelector
-								? html`
-									${Select({
-										value: this.thinkingLevel,
-										placeholder: i18n("Off"),
-										options: [
-											{ value: "off", label: i18n("Off"), icon: icon(Brain, "sm") },
-											{ value: "minimal", label: i18n("Minimal"), icon: icon(Brain, "sm") },
-											{ value: "low", label: i18n("Low"), icon: icon(Brain, "sm") },
-											{ value: "medium", label: i18n("Medium"), icon: icon(Brain, "sm") },
-											{ value: "high", label: i18n("High"), icon: icon(Brain, "sm") },
-										] as SelectOption[],
-										onChange: (value: string) => {
-											const level = value as "off" | "minimal" | "low" | "medium" | "high";
-											this.thinkingLevel = level;
-											this.onThinkingChange?.(level);
-										},
-										width: "80px",
-										size: "sm",
-										variant: "ghost",
-										fitContent: true,
-									})}
-								`
-								: ""
-						}
-					</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>
-		`;
-	}
-}

package/pi.dev-src/pi-mono/web-ui/src/components/MessageList.ts

@@ -1,98 +0,0 @@
-import type { AgentMessage, AgentTool } from "@mariozechner/pi-agent-core";
-import type {
-	AssistantMessage as AssistantMessageType,
-	ToolResultMessage as ToolResultMessageType,
-} from "@mariozechner/pi-ai";
-import { html, LitElement, type TemplateResult } from "lit";
-import { property } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
-import { renderMessage } from "./message-renderer-registry.js";
-
-export class MessageList extends LitElement {
-	@property({ type: Array }) messages: AgentMessage[] = [];
-	@property({ type: Array }) tools: AgentTool[] = [];
-	@property({ type: Object }) pendingToolCalls?: ReadonlySet<string>;
-	@property({ type: Boolean }) isStreaming: boolean = false;
-	@property({ attribute: false }) onCostClick?: () => void;
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.style.display = "block";
-	}
-
-	private buildRenderItems() {
-		// Map tool results by call id for quick lookup
-		const resultByCallId = new Map<string, ToolResultMessageType>();
-		for (const message of this.messages) {
-			if (message.role === "toolResult") {
-				resultByCallId.set(message.toolCallId, message);
-			}
-		}
-
-		const items: Array<{ key: string; template: TemplateResult }> = [];
-		let index = 0;
-		for (const msg of this.messages) {
-			// Skip artifact messages - they're for session persistence only, not UI display
-			if (msg.role === "artifact") {
-				continue;
-			}
-
-			// Try custom renderer first
-			const customTemplate = renderMessage(msg);
-			if (customTemplate) {
-				items.push({ key: `msg:${index}`, template: customTemplate });
-				index++;
-				continue;
-			}
-
-			// Fall back to built-in renderers
-			if (msg.role === "user" || msg.role === "user-with-attachments") {
-				items.push({
-					key: `msg:${index}`,
-					template: html`<user-message .message=${msg}></user-message>`,
-				});
-				index++;
-			} else if (msg.role === "assistant") {
-				const amsg = msg as AssistantMessageType;
-				items.push({
-					key: `msg:${index}`,
-					template: html`<assistant-message
-						.message=${amsg}
-						.tools=${this.tools}
-						.isStreaming=${false}
-						.pendingToolCalls=${this.pendingToolCalls}
-						.toolResultsById=${resultByCallId}
-						.hideToolCalls=${false}
-						.hidePendingToolCalls=${this.isStreaming}
-						.onCostClick=${this.onCostClick}
-					></assistant-message>`,
-				});
-				index++;
-			} else {
-				// Skip standalone toolResult messages; they are rendered via paired tool-message above
-				// Skip unknown roles
-			}
-		}
-		return items;
-	}
-
-	override render() {
-		const items = this.buildRenderItems();
-		return html`<div class="flex flex-col gap-3">
-			${repeat(
-				items,
-				(it) => it.key,
-				(it) => it.template,
-			)}
-		</div>`;
-	}
-}
-
-// Register custom element
-if (!customElements.get("message-list")) {
-	customElements.define("message-list", MessageList);
-}