Mario Zechner
0496651308
Storage Architecture:
- New pluggable storage system with backends (LocalStorage, ChromeStorage, IndexedDB)
- SettingsRepository for app settings (proxy config, etc.)
- ProviderKeysRepository for API key management
- AppStorage with global accessors (getAppStorage, setAppStorage, initAppStorage)
Transport Refactoring:
- Renamed DirectTransport → ProviderTransport (calls LLM providers with optional CORS proxy)
- Renamed ProxyTransport → AppTransport (uses app server with user auth)
- Updated TransportMode: "direct" → "provider", "proxy" → "app"
CORS Proxy Integration:
- ProviderTransport checks proxy.enabled/proxy.url from storage
- When enabled, modifies model baseUrl to route through proxy: {proxyUrl}/?url={originalBaseUrl}
- ProviderKeyInput test function also honors proxy settings
- Settings dialog with Proxy tab (Switch toggle, URL input, explanatory description)
Anthropic Prompt Caching:
- System prompt cached with cache_control markers (both OAuth and regular API keys)
- Last user message cached to cache conversation history
- Saves 90% on input tokens for cached content (10x cost reduction)
Settings Dialog Improvements:
- Configurable tab system with SettingsTab base class
- ApiKeysTab and ProxyTab as custom elements
- Switch toggle for proxy enable (instead of Checkbox)
- Explanatory paragraphs for each tab
- ApiKeyPromptDialog reuses ProviderKeyInput component
Removed:
- Deprecated ApiKeysDialog (replaced by ProviderKeyInput in SettingsDialog)
- Old storage-adapter and key-store (replaced by new storage architecture)
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { Button, icon } from "@mariozechner/mini-lit";
|
|
import "@mariozechner/mini-lit/dist/ThemeToggle.js";
|
|
import { ApiKeyPromptDialog, ApiKeysTab, ChatPanel, initAppStorage, ProxyTab, SettingsDialog } from "@mariozechner/pi-web-ui";
|
|
import { html, render } from "lit";
|
|
import { Settings } from "lucide";
|
|
import "./app.css";
|
|
|
|
// Initialize storage with default configuration (localStorage)
|
|
initAppStorage();
|
|
|
|
const systemPrompt = `You are a helpful AI assistant with access to various tools.
|
|
|
|
Available tools:
|
|
- JavaScript REPL: Execute JavaScript code in a sandboxed browser environment (can do calculations, get time, process data, create visualizations, etc.)
|
|
- Artifacts: Create interactive HTML, SVG, Markdown, and text artifacts
|
|
|
|
Feel free to use these tools when needed to provide accurate and helpful responses.`;
|
|
|
|
// Create and configure the chat panel
|
|
const chatPanel = new ChatPanel();
|
|
chatPanel.systemPrompt = systemPrompt;
|
|
chatPanel.additionalTools = [];
|
|
chatPanel.onApiKeyRequired = async (provider: string) => {
|
|
return await ApiKeyPromptDialog.prompt(provider);
|
|
};
|
|
|
|
// Render the app structure
|
|
const appHtml = html`
|
|
<div class="w-full h-screen flex flex-col bg-background text-foreground overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between border-b border-border shrink-0">
|
|
<div class="px-4 py-3">
|
|
<span class="text-base font-semibold text-foreground">Pi Web UI Example</span>
|
|
</div>
|
|
<div class="flex items-center gap-1 px-2">
|
|
<theme-toggle></theme-toggle>
|
|
${Button({
|
|
variant: "ghost",
|
|
size: "sm",
|
|
children: icon(Settings, "sm"),
|
|
onClick: () => SettingsDialog.open([new ApiKeysTab(), new ProxyTab()]),
|
|
title: "Settings",
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Panel -->
|
|
${chatPanel}
|
|
</div>
|
|
`;
|
|
|
|
const app = document.getElementById("app");
|
|
if (!app) {
|
|
throw new Error("App container not found");
|
|
}
|
|
|
|
render(appHtml, app); |