@oh-my-pi/pi-web-ui 1.337.0

package/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "@oh-my-pi/pi-web-ui",
+	"version": "1.337.0",
+	"description": "Reusable web UI components for AI chat interfaces powered by @oh-my-pi/pi-ai",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
+	"exports": {
+		".": "./src/index.ts",
+		"./app.css": "./src/app.css"
+	},
+	"scripts": {
+		"dev:css": "tailwindcss -i ./src/app.css -o ./dist/app.css --watch",
+		"dev:example": "bun --cwd=example run dev",
+		"dev": "bun run dev:css & bun run dev:example",
+		"build:css": "tailwindcss -i ./src/app.css -o ./dist/app.css --minify",
+		"check": "biome check --write . && tsgo --noEmit && bun --cwd=example run check"
+	},
+	"dependencies": {
+		"@lmstudio/sdk": "^1.5.0",
+		"@oh-my-pi/pi-agent-core": "workspace:*",
+		"@oh-my-pi/pi-ai": "workspace:*",
+		"@oh-my-pi/pi-tui": "workspace:*",
+		"docx-preview": "^0.3.7",
+		"highlight.js": "^11.11.1",
+		"jszip": "^3.10.1",
+		"lucide": "^0.544.0",
+		"ollama": "^0.6.0",
+		"pdfjs-dist": "5.4.394",
+		"tailwindcss": "^4.1.18",
+		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
+	},
+	"peerDependencies": {
+		"@mariozechner/mini-lit": "^0.2.0",
+		"lit": "^3.3.1"
+	},
+	"devDependencies": {
+		"@mariozechner/mini-lit": "^0.2.0",
+		"@tailwindcss/cli": "^4.0.0-beta.14"
+	},
+	"keywords": [
+		"ai",
+		"chat",
+		"ui",
+		"components",
+		"llm",
+		"web-components",
+		"mini-lit"
+	],
+	"author": "Mario Zechner",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/can1357/oh-my-pi.git",
+		"directory": "packages/web-ui"
+	}
+}

package/scripts/count-prompt-tokens.ts

@@ -0,0 +1,88 @@
+#!/usr/bin/env bun
+/**
+ * Count tokens in system prompts using Anthropic's token counter API
+ */
+
+import * as prompts from "../src/prompts/prompts.js";
+
+const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
+
+if (!ANTHROPIC_API_KEY) {
+	console.error("Error: ANTHROPIC_API_KEY environment variable not set");
+	process.exit(1);
+}
+
+interface TokenCountResponse {
+	input_tokens: number;
+}
+
+async function countTokens(text: string): Promise<number> {
+	const response = await fetch("https://api.anthropic.com/v1/messages/count_tokens", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			"x-api-key": ANTHROPIC_API_KEY,
+			"anthropic-version": "2023-06-01",
+		},
+		body: JSON.stringify({
+			model: "claude-3-5-sonnet-20241022",
+			messages: [
+				{
+					role: "user",
+					content: text,
+				},
+			],
+		}),
+	});
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(`API error: ${response.status} ${error}`);
+	}
+
+	const data = (await response.json()) as TokenCountResponse;
+	return data.input_tokens;
+}
+
+async function main() {
+	console.log("Counting tokens in prompts...\n");
+
+	const promptsToCount: Array<{ name: string; content: string }> = [
+		{
+			name: "ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW",
+			content: prompts.ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW,
+		},
+		{
+			name: "ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO",
+			content: prompts.ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO,
+		},
+		{
+			name: "ATTACHMENTS_RUNTIME_DESCRIPTION",
+			content: prompts.ATTACHMENTS_RUNTIME_DESCRIPTION,
+		},
+		{
+			name: "JAVASCRIPT_REPL_TOOL_DESCRIPTION (without runtime providers)",
+			content: prompts.JAVASCRIPT_REPL_TOOL_DESCRIPTION([]),
+		},
+		{
+			name: "ARTIFACTS_TOOL_DESCRIPTION (without runtime providers)",
+			content: prompts.ARTIFACTS_TOOL_DESCRIPTION([]),
+		},
+	];
+
+	let total = 0;
+
+	for (const prompt of promptsToCount) {
+		try {
+			const tokens = await countTokens(prompt.content);
+			total += tokens;
+			console.log(`${prompt.name}: ${tokens.toLocaleString()} tokens`);
+		} catch (error) {
+			console.error(`Error counting tokens for ${prompt.name}:`, error);
+		}
+	}
+
+	console.log(`\nTotal: ${total.toLocaleString()} tokens`);
+}
+
+main();

package/src/ChatPanel.ts

@@ -0,0 +1,218 @@
+import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "./components/AgentInterface.js";
+import type { Agent, AgentTool } from "@oh-my-pi/pi-agent-core";
+import type { AgentInterface } from "./components/AgentInterface.js";
+import { ArtifactsRuntimeProvider } from "./components/sandbox/ArtifactsRuntimeProvider.js";
+import { AttachmentsRuntimeProvider } from "./components/sandbox/AttachmentsRuntimeProvider.js";
+import type { SandboxRuntimeProvider } from "./components/sandbox/SandboxRuntimeProvider.js";
+import { ArtifactsPanel, ArtifactsToolRenderer } from "./tools/artifacts/index.js";
+import { registerToolRenderer } from "./tools/renderer-registry.js";
+import type { Attachment } from "./utils/attachment-utils.js";
+import { i18n } from "./utils/i18n.js";
+
+const BREAKPOINT = 800; // px - switch between overlay and side-by-side
+
+@customElement("pi-chat-panel")
+export class ChatPanel extends LitElement {
+	@state() public agent?: Agent;
+	@state() public agentInterface?: AgentInterface;
+	@state() public artifactsPanel?: ArtifactsPanel;
+	@state() private hasArtifacts = false;
+	@state() private artifactCount = 0;
+	@state() private showArtifactsPanel = false;
+	@state() private windowWidth = 0;
+
+	private resizeHandler = () => {
+		this.windowWidth = window.innerWidth;
+		this.requestUpdate();
+	};
+
+	createRenderRoot() {
+		return this;
+	}
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this.windowWidth = window.innerWidth; // Set initial width after connection
+		window.addEventListener("resize", this.resizeHandler);
+		this.style.display = "flex";
+		this.style.flexDirection = "column";
+		this.style.height = "100%";
+		this.style.minHeight = "0";
+		// Update width after initial render
+		requestAnimationFrame(() => {
+			this.windowWidth = window.innerWidth;
+			this.requestUpdate();
+		});
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("resize", this.resizeHandler);
+	}
+
+	async setAgent(
+		agent: Agent,
+		config?: {
+			onApiKeyRequired?: (provider: string) => Promise<boolean>;
+			onBeforeSend?: () => void | Promise<void>;
+			onCostClick?: () => void;
+			sandboxUrlProvider?: () => string;
+			toolsFactory?: (
+				agent: Agent,
+				agentInterface: AgentInterface,
+				artifactsPanel: ArtifactsPanel,
+				runtimeProvidersFactory: () => SandboxRuntimeProvider[],
+			) => AgentTool<any>[];
+		},
+	) {
+		this.agent = agent;
+
+		// Create AgentInterface
+		this.agentInterface = document.createElement("agent-interface") as AgentInterface;
+		this.agentInterface.session = agent;
+		this.agentInterface.enableAttachments = true;
+		this.agentInterface.enableModelSelector = true;
+		this.agentInterface.enableThinkingSelector = true;
+		this.agentInterface.showThemeToggle = false;
+		this.agentInterface.onApiKeyRequired = config?.onApiKeyRequired;
+		this.agentInterface.onBeforeSend = config?.onBeforeSend;
+		this.agentInterface.onCostClick = config?.onCostClick;
+
+		// Set up artifacts panel
+		this.artifactsPanel = new ArtifactsPanel();
+		this.artifactsPanel.agent = agent; // Pass agent for HTML artifact runtime providers
+		if (config?.sandboxUrlProvider) {
+			this.artifactsPanel.sandboxUrlProvider = config.sandboxUrlProvider;
+		}
+		// Register the standalone tool renderer (not the panel itself)
+		registerToolRenderer("artifacts", new ArtifactsToolRenderer(this.artifactsPanel));
+
+		// Runtime providers factory for REPL tools (read-write access)
+		const runtimeProvidersFactory = () => {
+			const attachments: Attachment[] = [];
+			for (const message of this.agent!.state.messages) {
+				if (message.role === "user-with-attachments") {
+					message.attachments?.forEach((a) => {
+						attachments.push(a);
+					});
+				}
+			}
+			const providers: SandboxRuntimeProvider[] = [];
+
+			// Add attachments provider if there are attachments
+			if (attachments.length > 0) {
+				providers.push(new AttachmentsRuntimeProvider(attachments));
+			}
+
+			// Add artifacts provider with read-write access (for REPL)
+			providers.push(new ArtifactsRuntimeProvider(this.artifactsPanel!, this.agent!, true));
+
+			return providers;
+		};
+
+		this.artifactsPanel.onArtifactsChange = () => {
+			const count = this.artifactsPanel?.artifacts?.size ?? 0;
+			const created = count > this.artifactCount;
+			this.hasArtifacts = count > 0;
+			this.artifactCount = count;
+			if (this.hasArtifacts && created) {
+				this.showArtifactsPanel = true;
+			}
+			this.requestUpdate();
+		};
+
+		this.artifactsPanel.onClose = () => {
+			this.showArtifactsPanel = false;
+			this.requestUpdate();
+		};
+
+		this.artifactsPanel.onOpen = () => {
+			this.showArtifactsPanel = true;
+			this.requestUpdate();
+		};
+
+		// Set tools on the agent
+		// Pass runtimeProvidersFactory so consumers can configure their own REPL tools
+		const additionalTools =
+			config?.toolsFactory?.(agent, this.agentInterface, this.artifactsPanel, runtimeProvidersFactory) || [];
+		const tools = [this.artifactsPanel.tool, ...additionalTools];
+		this.agent.setTools(tools);
+
+		// Reconstruct artifacts from existing messages
+		// Temporarily disable the onArtifactsChange callback to prevent auto-opening on load
+		const originalCallback = this.artifactsPanel.onArtifactsChange;
+		this.artifactsPanel.onArtifactsChange = undefined;
+		await this.artifactsPanel.reconstructFromMessages(this.agent.state.messages);
+		this.artifactsPanel.onArtifactsChange = originalCallback;
+
+		this.hasArtifacts = this.artifactsPanel.artifacts.size > 0;
+		this.artifactCount = this.artifactsPanel.artifacts.size;
+
+		this.requestUpdate();
+	}
+
+	render() {
+		if (!this.agent || !this.agentInterface) {
+			return html`<div class="flex items-center justify-center h-full">
+				<div class="text-muted-foreground">No agent set</div>
+			</div>`;
+		}
+
+		const isMobile = this.windowWidth < BREAKPOINT;
+
+		// Set panel props
+		if (this.artifactsPanel) {
+			this.artifactsPanel.collapsed = !this.showArtifactsPanel;
+			this.artifactsPanel.overlay = isMobile;
+		}
+
+		return html`
+			<div class="relative w-full h-full overflow-hidden flex">
+				<div
+					class="h-full"
+					style="${!isMobile && this.showArtifactsPanel && this.hasArtifacts ? "width: 50%;" : "width: 100%;"}"
+				>
+					${this.agentInterface}
+				</div>
+
+				<!-- Floating pill when artifacts exist and panel is collapsed -->
+				${
+					this.hasArtifacts && !this.showArtifactsPanel
+						? html`
+							<button
+								class="absolute z-30 top-4 left-1/2 -translate-x-1/2 pointer-events-auto"
+								@click=${() => {
+									this.showArtifactsPanel = true;
+									this.requestUpdate();
+								}}
+								title=${i18n("Show artifacts")}
+							>
+								${Badge(html`
+									<span class="inline-flex items-center gap-1">
+										<span>${i18n("Artifacts")}</span>
+										<span
+											class="text-[10px] leading-none bg-primary-foreground/20 text-primary-foreground rounded px-1 font-mono tabular-nums"
+											>${this.artifactCount}</span
+										>
+									</span>
+								`)}
+							</button>
+					  `
+						: ""
+				}
+
+				<div
+					class="h-full ${isMobile ? "absolute inset-0 pointer-events-none" : ""}"
+					style="${
+						!isMobile ? (!this.hasArtifacts || !this.showArtifactsPanel ? "display: none;" : "width: 50%;") : ""
+					}"
+				>
+					${this.artifactsPanel}
+				</div>
+			</div>
+		`;
+	}
+}

package/src/app.css

@@ -0,0 +1,68 @@
+/* Import Claude theme from mini-lit */
+@import "@mariozechner/mini-lit/styles/themes/default.css";
+
+/* Tell Tailwind to scan mini-lit components */
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind 4 source directive */
+@source "../../../node_modules/@mariozechner/mini-lit/dist";
+
+/* Import Tailwind */
+/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: fuck you */
+@import "tailwindcss";
+
+body {
+	font-size: 16px;
+	-webkit-font-smoothing: antialiased;
+}
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-border) rgba(0, 0, 0, 0);
+}
+
+*::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: var(--color-border);
+	border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(0, 0, 0, 0);
+}
+
+/* Fix cursor for dialog close buttons */
+.fixed.inset-0 button[aria-label*="Close"],
+.fixed.inset-0 button[type="button"] {
+	cursor: pointer;
+}
+
+/* Shimmer animation for thinking text */
+@keyframes shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+	100% {
+		background-position: 200% 0;
+	}
+}
+
+.animate-shimmer {
+	animation: shimmer 2s ease-in-out infinite;
+}
+
+/* User message with fancy pill styling */
+.user-message-container {
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	position: relative;
+	background: linear-gradient(135deg, rgba(217, 79, 0, 0.12), rgba(255, 107, 0, 0.12), rgba(212, 165, 0, 0.12));
+	border: 1px solid rgba(255, 107, 0, 0.25);
+	backdrop-filter: blur(10px);
+	max-width: 100%;
+}