import { LanguageModelV1Prompt } from "ai" import { createEffect, For, onCleanup } from "solid-js" import { createStore } from "solid-js/store" import SYSTEM_PROMPT from "./system.txt?raw" import { hc } from "hono/client" import { type App } from "opencontrol" import { client } from "./client" const providerMetadata = { anthropic: { cacheControl: { type: "ephemeral", }, }, } // Define initial system messages once const getInitialPrompt = (): LanguageModelV1Prompt => [ { role: "system", content: SYSTEM_PROMPT, providerMetadata: { anthropic: { cacheControl: { type: "ephemeral", }, }, }, }, { role: "system", content: `The current date is ${new Date().toDateString()}`, providerMetadata: { anthropic: { cacheControl: { type: "ephemeral", }, }, }, }, ] export function App() { let root: HTMLDivElement | undefined let textarea: HTMLTextAreaElement | undefined const toolDefs = client.mcp .$post({ json: { jsonrpc: "2.0", method: "tools/list", id: "1", }, }) .then((response) => response.json()) .then((response) => "tools" in response.result ? response.result.tools : [], ) const [store, setStore] = createStore<{ prompt: LanguageModelV1Prompt isProcessing: boolean rate: boolean }>({ rate: false, prompt: getInitialPrompt(), isProcessing: false, }) createEffect(() => { const messages = store.prompt console.log("scrolling to bottom") root?.scrollTo(0, root?.scrollHeight) return messages.length }, 0) createEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape" && store.isProcessing) { setStore("isProcessing", false) textarea?.focus() } } window.addEventListener("keydown", handleKeyDown) onCleanup(() => { window.removeEventListener("keydown", handleKeyDown) }) }) function clearConversation() { setStore("prompt", getInitialPrompt()) } async function send(message: string) { setStore("isProcessing", true) setStore("prompt", store.prompt.length, { role: "user", content: [ { type: "text", text: message, providerMetadata: store.prompt.length === 1 ? providerMetadata : {}, }, ], }) while (true) { if (!store.isProcessing) { console.log("Processing cancelled by user") break } const response = await client.generate.$post({ json: { prompt: store.prompt, mode: { type: "regular", tools: (await toolDefs).map((tool: any) => ({ type: "function", name: tool.name, description: tool.description, parameters: { ...tool.inputSchema, }, })), }, inputFormat: "messages", temperature: 1, }, }) if (!store.isProcessing) continue if (!response.ok) { if (response.status === 400) { setStore("prompt", (val) => { val.splice(2, 1) console.log(val) return [...val] }) } if (response.status === 429) { setStore("rate", true) } await new Promise((resolve) => setTimeout(resolve, 1000)) continue } const result = await response.json() if (result.text) { setStore("prompt", store.prompt.length, { role: "assistant", content: [ { type: "text", text: result.text, }, ], }) } setStore("rate", false) if (result.finishReason === "stop") { setStore("isProcessing", false) break } if (result.finishReason === "tool-calls") { for (const item of result.toolCalls!) { console.log("calling tool", item.toolName, item.args) setStore("prompt", store.prompt.length, { role: "assistant", content: [ { type: "tool-call", toolName: item.toolName, args: JSON.parse(item.args), toolCallId: item.toolCallId, }, ], }) const response = await client.mcp .$post({ json: { jsonrpc: "2.0", id: "2", method: "tools/call", params: { name: item.toolName, arguments: JSON.parse(item.args), }, }, }) .then((r) => r.json()) if ("content" in response.result) { setStore("prompt", store.prompt.length, { role: "tool", content: [ { type: "tool-result", toolName: item.toolName, toolCallId: item.toolCallId, result: response.result.content, }, ], }) } else break } } } setStore("isProcessing", false) textarea?.focus() } return (

{(item) => ( <> {item.role === "user" && item.content[0].type === "text" && (

{item.content[0].text}

)} {item.role === "assistant" && item.content[0].type === "tool-call" && (() => { const [showArgs, setShowArgs] = createStore({ visible: false, }) const toggleArgs = () => { setShowArgs("visible", (prev) => !prev) } return (

🔧 {item.content[0].toolName} {showArgs.visible ? "−" : "+"}

{showArgs.visible && (

                            {JSON.stringify(item.content[0].args, null, 2)}

)}

) })()} {/* Show assistant text messages */} {item.role === "assistant" && item.content[0].type === "text" && (

{item.content[0].text}

)} {/* Show system messages, but not the first ones (initial prompts) */} {item.role === "system" && store.prompt.indexOf(item) > 1 && (

{item.content}

)} )} {/* Loading indicator bar */} {store.isProcessing && (

{store.rate && "Rate limited, retrying..."} {!store.rate && "Thinking"}

)}

{store.prompt.length > 2 && !store.isProcessing && (

)}