codeblog-app 1.5.2 → 1.6.0

package/src/tui/routes/model.tsx

@@ -0,0 +1,209 @@
+import { createSignal, createMemo, onMount, Show, For } from "solid-js"
+import { useKeyboard, usePaste } from "@opentui/solid"
+import { useTheme } from "../context/theme"
+
+interface ModelItem {
+  id: string
+  name: string
+  provider: string
+}
+
+export function ModelPicker(props: { onDone: (model?: string) => void }) {
+  const theme = useTheme()
+  const [models, setModels] = createSignal<ModelItem[]>([])
+  const [idx, setIdx] = createSignal(0)
+  const [current, setCurrent] = createSignal("")
+  const [loading, setLoading] = createSignal(true)
+  const [filter, setFilter] = createSignal("")
+  const [status, setStatus] = createSignal("")
+
+  // Visible height for scrolling
+  const maxVisible = 15
+
+  const filtered = createMemo(() => {
+    const q = filter().toLowerCase()
+    if (!q) return models()
+    return models().filter((m) => m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q))
+  })
+
+  // Scroll offset
+  const scrollTop = createMemo(() => {
+    const i = idx()
+    const len = filtered().length
+    if (len <= maxVisible) return 0
+    if (i < maxVisible - 2) return 0
+    if (i > len - 3) return Math.max(0, len - maxVisible)
+    return i - maxVisible + 3
+  })
+
+  const visible = createMemo(() => filtered().slice(scrollTop(), scrollTop() + maxVisible))
+
+  onMount(async () => {
+    try {
+      const { AIProvider } = await import("../../ai/provider")
+      const { Config } = await import("../../config")
+      const cfg = await Config.load()
+      setCurrent(cfg.model || AIProvider.DEFAULT_MODEL)
+
+      setStatus("Fetching models from API...")
+      const dynamic = await AIProvider.fetchAllModels()
+      if (dynamic.length > 0) {
+        setModels(dynamic.map((m) => ({ id: m.id, name: m.name, provider: m.providerID })))
+        const curIdx = dynamic.findIndex((m) => m.id === (cfg.model || AIProvider.DEFAULT_MODEL))
+        if (curIdx >= 0) setIdx(curIdx)
+        setStatus(`${dynamic.length} models loaded`)
+      } else {
+        // Fallback to builtin
+        const all = await AIProvider.available()
+        const items = all.filter((m) => m.hasKey).map((m) => ({
+          id: m.model.id,
+          name: m.model.name,
+          provider: m.model.providerID,
+        }))
+        setModels(items)
+        setStatus(`${items.length} models (builtin)`)
+      }
+    } catch (err) {
+      setStatus(`Error: ${err instanceof Error ? err.message : String(err)}`)
+    }
+    setLoading(false)
+  })
+
+  usePaste((evt) => {
+    const text = evt.text.replace(/[\n\r]/g, "").trim()
+    if (text) {
+      setFilter((s) => s + text)
+      setIdx(0)
+      evt.preventDefault()
+    }
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "up") {
+      setIdx((i) => (i - 1 + filtered().length) % filtered().length)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "down") {
+      setIdx((i) => (i + 1) % filtered().length)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "return") {
+      const m = filtered()[idx()]
+      if (m) save(m.id)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "escape") {
+      if (filter()) { setFilter(""); setIdx(0) }
+      else props.onDone()
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "backspace") {
+      setFilter((s) => s.slice(0, -1))
+      setIdx(0)
+      evt.preventDefault()
+      return
+    }
+    if (evt.sequence && evt.sequence.length >= 1 && !evt.ctrl && !evt.meta) {
+      const clean = evt.sequence.replace(/[\x00-\x1f\x7f]/g, "")
+      if (clean) {
+        setFilter((s) => s + clean)
+        setIdx(0)
+        evt.preventDefault()
+        return
+      }
+    }
+    if (evt.name === "space") {
+      setFilter((s) => s + " ")
+      evt.preventDefault()
+      return
+    }
+  })
+
+  async function save(id: string) {
+    try {
+      const { Config } = await import("../../config")
+      await Config.save({ model: id })
+      props.onDone(id)
+    } catch {
+      props.onDone()
+    }
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2} paddingTop={1}>
+      <box flexDirection="row" flexShrink={0}>
+        <text fg={theme.colors.primary}>
+          <span style={{ bold: true }}>Select Model</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>
+          ↑↓ select · Enter confirm · Type to filter · Esc back
+        </text>
+      </box>
+
+      <box flexShrink={0} flexDirection="row" paddingTop={1}>
+        <text fg={theme.colors.textMuted}>Current: </text>
+        <text fg={theme.colors.success}>{current()}</text>
+        <text fg={theme.colors.textMuted}>{" · " + status()}</text>
+      </box>
+
+      {/* Filter input */}
+      <box flexShrink={0} paddingTop={1} flexDirection="row">
+        <text fg={theme.colors.primary}><span style={{ bold: true }}>{"❯ "}</span></text>
+        <text fg={theme.colors.input}>{filter()}</text>
+        <text fg={theme.colors.cursor}>{"█"}</text>
+        <Show when={!filter()}>
+          <text fg={theme.colors.textMuted}> type to filter...</text>
+        </Show>
+      </box>
+
+      <box height={1} />
+
+      <Show when={loading()}>
+        <text fg={theme.colors.textMuted}>Fetching models from API...</text>
+      </Show>
+
+      <Show when={!loading()}>
+        <Show when={filtered().length === 0}>
+          <text fg={theme.colors.warning}>No models match "{filter()}"</text>
+        </Show>
+        <Show when={filtered().length > 0}>
+          <box flexDirection="column" flexShrink={0}>
+            <For each={visible()}>
+              {(m, i) => {
+                const selected = () => scrollTop() + i() === idx()
+                return (
+                  <box flexDirection="row" backgroundColor={selected() ? theme.colors.primary : undefined}>
+                    <text fg={selected() ? "#ffffff" : theme.colors.textMuted}>
+                      {selected() ? "❯ " : "  "}
+                    </text>
+                    <text fg={selected() ? "#ffffff" : theme.colors.text}>
+                      <span style={{ bold: selected() }}>
+                        {m.id.length > 40 ? m.id.slice(0, 40) + "…" : m.id.padEnd(42)}
+                      </span>
+                    </text>
+                    <text fg={selected() ? "#ffffff" : theme.colors.textMuted}>
+                      {" " + m.provider}
+                    </text>
+                    {m.id === current() ? (
+                      <text fg={selected() ? "#ffffff" : theme.colors.success}>{" ← current"}</text>
+                    ) : null}
+                  </box>
+                )
+              }}
+            </For>
+          </box>
+          <Show when={filtered().length > maxVisible}>
+            <text fg={theme.colors.textMuted}>
+              {"  ↑↓ " + filtered().length + " models total · showing " + (scrollTop() + 1) + "-" + Math.min(scrollTop() + maxVisible, filtered().length)}
+            </text>
+          </Show>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/src/tui/routes/chat.tsx

@@ -1,210 +0,0 @@
-import { createSignal, For, Show, onMount } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { useRoute } from "../context/route"
-import { useTheme } from "../context/theme"
-
-interface Message {
-  role: "user" | "assistant"
-  content: string
-}
-
-export function Chat() {
-  const route = useRoute()
-  const theme = useTheme()
-  const [messages, setMessages] = createSignal<Message[]>([])
-  const [streaming, setStreaming] = createSignal(false)
-  const [streamText, setStreamText] = createSignal("")
-  const [model, setModel] = createSignal("")
-  const [modelName, setModelName] = createSignal("")
-  const [inputBuf, setInputBuf] = createSignal("")
-
-  onMount(async () => {
-    try {
-      const { Config } = await import("../../config")
-      const { AIProvider } = await import("../../ai/provider")
-      const cfg = await Config.load()
-      const id = cfg.model || AIProvider.DEFAULT_MODEL
-      setModel(id)
-      const info = AIProvider.BUILTIN_MODELS[id]
-      setModelName(info?.name || id)
-    } catch {}
-
-    // Auto-send initial message from home screen
-    const data = route.data as any
-    if (data.sessionMessages?.length > 0) {
-      for (const msg of data.sessionMessages) {
-        if (msg.role === "user") {
-          send(msg.content)
-          break
-        }
-      }
-    }
-  })
-
-  async function send(text: string) {
-    if (!text.trim() || streaming()) return
-    const userMsg: Message = { role: "user", content: text.trim() }
-    const prev = messages()
-    setMessages([...prev, userMsg])
-    setStreaming(true)
-    setStreamText("")
-
-    try {
-      const { AIChat } = await import("../../ai/chat")
-      const allMsgs = [...prev, userMsg].map((m) => ({
-        role: m.role as "user" | "assistant",
-        content: m.content,
-      }))
-
-      let full = ""
-      await AIChat.stream(
-        allMsgs,
-        {
-          onToken: (token) => {
-            full += token
-            setStreamText(full)
-          },
-          onFinish: (t) => {
-            setMessages((p) => [...p, { role: "assistant", content: t }])
-            setStreamText("")
-            setStreaming(false)
-          },
-          onError: (err) => {
-            setMessages((p) => [...p, { role: "assistant", content: `Error: ${err.message}` }])
-            setStreamText("")
-            setStreaming(false)
-          },
-        },
-        model(),
-      )
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err)
-      setMessages((p) => [...p, { role: "assistant", content: `Error: ${msg}` }])
-      setStreamText("")
-      setStreaming(false)
-    }
-  }
-
-  function handleCommand(cmd: string) {
-    const parts = cmd.split(/\s+/)
-    const name = parts[0]
-
-    if (name === "/clear") {
-      setMessages([])
-      setStreamText("")
-      return
-    }
-
-    if (name === "/model") {
-      const id = parts[1]
-      if (!id) {
-        setMessages((p) => [...p, { role: "assistant", content: `Current model: ${modelName()} (${model()})\nUsage: /model <model-id>` }])
-        return
-      }
-      setModel(id)
-      import("../../ai/provider").then(({ AIProvider }) => {
-        const info = AIProvider.BUILTIN_MODELS[id]
-        setModelName(info?.name || id)
-      }).catch(() => setModelName(id))
-      setMessages((p) => [...p, { role: "assistant", content: `Switched to model: ${id}` }])
-      return
-    }
-
-    if (name === "/help") {
-      setMessages((p) => [...p, {
-        role: "assistant",
-        content: [
-          "Available commands:",
-          "  /model <id>  — switch AI model (e.g. /model gpt-4o)",
-          "  /model       — show current model",
-          "  /clear       — clear conversation",
-          "  /help        — show this help",
-          "",
-          "Type any text and press Enter to chat with AI.",
-        ].join("\n"),
-      }])
-      return
-    }
-
-    setMessages((p) => [...p, { role: "assistant", content: `Unknown command: ${name}. Type /help` }])
-  }
-
-  useKeyboard((evt) => {
-    if (evt.name === "return" && !evt.shift) {
-      const text = inputBuf().trim()
-      if (!text) return
-      setInputBuf("")
-      if (text.startsWith("/")) {
-        handleCommand(text)
-      } else {
-        send(text)
-      }
-      evt.preventDefault()
-      return
-    }
-
-    if (evt.name === "backspace") {
-      setInputBuf((s) => s.slice(0, -1))
-      evt.preventDefault()
-      return
-    }
-
-    if (evt.sequence && evt.sequence.length === 1 && !evt.ctrl && !evt.meta) {
-      setInputBuf((s) => s + evt.sequence)
-      evt.preventDefault()
-      return
-    }
-
-    if (evt.name === "space") {
-      setInputBuf((s) => s + " ")
-      evt.preventDefault()
-      return
-    }
-  })
-
-  return (
-    <box flexDirection="column" flexGrow={1}>
-      {/* Header */}
-      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
-        <text fg={theme.colors.primary}>
-          <span style={{ bold: true }}>AI Chat</span>
-        </text>
-        <text fg={theme.colors.textMuted}>{modelName()}</text>
-        <box flexGrow={1} />
-        <text fg={theme.colors.textMuted}>esc:back · /help · /model · /clear</text>
-      </box>
-
-      {/* Messages */}
-      <box flexDirection="column" paddingLeft={2} paddingRight={2} paddingTop={1} flexGrow={1}>
-        <For each={messages()}>
-          {(msg) => (
-            <box flexDirection="row" paddingBottom={1}>
-              <text fg={msg.role === "user" ? theme.colors.primary : theme.colors.success}>
-                <span style={{ bold: true }}>{msg.role === "user" ? "❯ " : "◆ "}</span>
-              </text>
-              <text fg={theme.colors.text}>{msg.content}</text>
-            </box>
-          )}
-        </For>
-
-        <Show when={streaming()}>
-          <box flexDirection="row" paddingBottom={1}>
-            <text fg={theme.colors.success}>
-              <span style={{ bold: true }}>{"◆ "}</span>
-            </text>
-            <text fg={theme.colors.textMuted}>{streamText() || "thinking..."}</text>
-          </box>
-        </Show>
-      </box>
-
-      {/* Input */}
-      <box paddingLeft={2} paddingRight={2} paddingBottom={1} flexShrink={0} flexDirection="row">
-        <text fg={theme.colors.primary}>
-          <span style={{ bold: true }}>{"❯ "}</span>
-        </text>
-        <text fg={theme.colors.input}>{inputBuf()}</text>
-        <text fg={theme.colors.cursor}>{"█"}</text>
-      </box>
-    </box>
-  )
-}