thebird 1.2.8 → 1.2.10

package/docs/app.js

@@ -1,11 +1,18 @@
-import { createElement, applyDiff } from 'webjsx';
+import { createElement, applyDiff } from 'https://esm.sh/webjsx@0.0.73';
+import htm from 'https://esm.sh/htm@3';
 
-const MODELS = [
-  'gemini-2.0-flash',
-  'gemini-2.0-flash-thinking-exp',
-  'gemini-1.5-pro',
-  'gemini-1.5-flash',
-];
+const html = htm.bind(createElement);
+
+const MODELS_API = key => `https://generativelanguage.googleapis.com/v1beta/models?key=${key}`;
+
+async function fetchModels(apiKey) {
+  const res = await fetch(MODELS_API(apiKey));
+  if (!res.ok) throw new Error(`Models API ${res.status}: ${await res.text()}`);
+  const { models = [] } = await res.json();
+  return models
+    .filter(m => m.supportedGenerationMethods?.includes('generateContent'))
+    .map(m => ({ id: m.name.replace('models/', ''), label: m.displayName || m.name }));
+}
 
 function convertMessages(messages) {
   const contents = [];
@@ -43,85 +50,84 @@ class BirdChat extends HTMLElement {
   constructor() {
     super();
     this.state = {
-      messages: [],
-      streaming: false,
-      model: MODELS[0],
+      messages: [], streaming: false, model: 'gemini-2.5-flash',
       apiKey: localStorage.getItem('gemini_api_key') || '',
-      status: '',
-      streamingText: '',
+      models: [], modelsLoading: false, status: '', streamingText: '',
+    };
+    window.__debug = {
+      get state() { return this.state; }.bind(this),
+      get messages() { return this.state.messages; }.bind(this),
+      get models() { return this.state.models; }.bind(this),
     };
-    window.__debug = { get state() { return this.state; }.bind(this), get messages() { return this.state.messages; }.bind(this) };
   }
 
-  connectedCallback() { this.render(); }
+  connectedCallback() {
+    this.render();
+    if (this.state.apiKey) this.loadModels(this.state.apiKey);
+  }
 
   setState(patch) { Object.assign(this.state, patch); this.render(); }
 
+  async loadModels(apiKey) {
+    this.setState({ modelsLoading: true, status: '' });
+    try {
+      const models = await fetchModels(apiKey);
+      const current = this.state.model;
+      const model = models.find(m => m.id === current) ? current : (models[0]?.id || current);
+      this.setState({ models, model, modelsLoading: false });
+    } catch (err) {
+      this.setState({ modelsLoading: false, status: 'Failed to load models: ' + (err?.message || String(err)) });
+    }
+  }
+
   render() {
-    const { messages, streaming, model, apiKey, status, streamingText } = this.state;
-    applyDiff(this, (
+    const { messages, streaming, model, apiKey, models, modelsLoading, status, streamingText } = this.state;
+    const modelOptions = (models.length === 0 ? [{ id: model, label: model }] : models)
+      .map(m => html`<option value=${m.id} selected=${m.id === model}>${m.label}</option>`);
+
+    applyDiff(this, html`
       <div class="flex flex-col h-full">
         <header class="navbar bg-base-200 border-b border-base-300 gap-2 flex-wrap px-4 py-2">
           <span class="text-primary font-bold text-lg mr-2">🐦 thebird</span>
           <span class="text-base-content/50 text-xs hidden sm:inline">Anthropic SDK format → Gemini API</span>
           <div class="flex gap-2 flex-1 min-w-0 items-center flex-wrap">
-            <input
-              id="api-key-input"
-              type="password"
-              class="input input-sm input-bordered flex-1 min-w-[160px]"
-              placeholder="GEMINI_API_KEY"
-              value={apiKey}
-              onchange={e => { const v = e.target.value.trim(); localStorage.setItem('gemini_api_key', v); this.setState({ apiKey: v }); }}
-            />
-            <select
-              class="select select-sm select-bordered"
-              value={model}
-              onchange={e => this.setState({ model: e.target.value })}
-            >
-              {MODELS.map(m => <option value={m} selected={m === model}>{m}</option>)}
-            </select>
-            <button class="btn btn-sm btn-ghost" onclick={() => this.setState({ messages: [], status: '' })}>Clear</button>
+            <input id="api-key-input" type="password" class="input input-sm input-bordered flex-1 min-w-[160px]"
+              placeholder="GEMINI_API_KEY" value=${apiKey}
+              onchange=${e => { const v = e.target.value.trim(); localStorage.setItem('gemini_api_key', v); this.setState({ apiKey: v }); if (v) this.loadModels(v); }} />
+            <div class="relative">
+              ${modelsLoading
+                ? html`<span class="loading loading-spinner loading-sm text-primary"></span>`
+                : html`<select class="select select-sm select-bordered" value=${model} disabled=${models.length === 0}
+                    onchange=${e => this.setState({ model: e.target.value })}>${modelOptions}</select>`}
+            </div>
+            <button class="btn btn-sm btn-ghost" onclick=${() => this.setState({ messages: [], status: '' })}>Clear</button>
           </div>
         </header>
 
         <div id="msg-list" class="flex-1 overflow-y-auto flex flex-col gap-3 p-4">
-          {messages.map((m, i) => (
-            <div key={i} class={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-              <div class={`msg-bubble card px-4 py-3 text-sm leading-relaxed ${m.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-200 text-base-content'}`}>
-                {m.content}
-              </div>
-            </div>
-          ))}
-          {streamingText && (
+          ${messages.map((m, i) => html`
+            <div key=${i} class=${'flex ' + (m.role === 'user' ? 'justify-end' : 'justify-start')}>
+              <div class=${'msg-bubble card px-4 py-3 text-sm leading-relaxed ' + (m.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-200 text-base-content')}>${m.content}</div>
+            </div>`)}
+          ${streamingText && html`
             <div class="flex justify-start">
-              <div class="msg-bubble card bg-base-200 text-base-content px-4 py-3 text-sm leading-relaxed">{streamingText}<span class="animate-pulse ml-1">▋</span></div>
-            </div>
-          )}
-          {!streamingText && streaming && (
-            <div class="flex justify-start">
-              <div class="card bg-base-200 px-4 py-3"><span class="loading loading-dots loading-sm"></span></div>
-            </div>
-          )}
+              <div class="msg-bubble card bg-base-200 text-base-content px-4 py-3 text-sm leading-relaxed">${streamingText}<span class="animate-pulse ml-1">▋</span></div>
+            </div>`}
+          ${!streamingText && streaming && html`<div class="flex justify-start"><div class="card bg-base-200 px-4 py-3"><span class="loading loading-dots loading-sm"></span></div></div>`}
         </div>
 
-        {status && <div class="text-xs text-error px-4 pb-1">{status}</div>}
-
-        <form class="flex gap-2 p-3 border-t border-base-300 bg-base-200" onsubmit={e => { e.preventDefault(); this.send(); }}>
-          <textarea
-            id="chat-input"
-            class="textarea textarea-bordered flex-1 resize-none min-h-[42px] max-h-[120px] text-sm"
-            placeholder="Message… (Shift+Enter for newline)"
-            rows="1"
-            disabled={streaming}
-            onkeydown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.send(); } }}
-            oninput={e => { e.target.style.height = 'auto'; e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px'; }}
-          ></textarea>
-          <button type="submit" class="btn btn-primary self-end" disabled={streaming}>
-            {streaming ? <span class="loading loading-spinner loading-sm"></span> : 'Send'}
+        ${status && html`<div class="text-xs text-error px-4 pb-1">${status}</div>`}
+
+        <form class="flex gap-2 p-3 border-t border-base-300 bg-base-200" onsubmit=${e => { e.preventDefault(); this.send(); }}>
+          <textarea id="chat-input" class="textarea textarea-bordered flex-1 resize-none min-h-[42px] max-h-[120px] text-sm"
+            placeholder="Message… (Shift+Enter for newline)" rows="1" disabled=${streaming}
+            onkeydown=${e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.send(); } }}
+            oninput=${e => { e.target.style.height = 'auto'; e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px'; }}></textarea>
+          <button type="submit" class="btn btn-primary self-end" disabled=${streaming}>
+            ${streaming ? html`<span class="loading loading-spinner loading-sm"></span>` : 'Send'}
           </button>
         </form>
-      </div>
-    ));
+      </div>`);
   }
 
   async send() {
@@ -137,18 +143,12 @@ class BirdChat extends HTMLElement {
     try {
       const { GoogleGenAI } = await import('https://esm.sh/@google/genai@1');
       const ai = new GoogleGenAI({ apiKey });
-      const stream = await ai.models.generateContentStream({
-        model,
-        contents: convertMessages(messages),
-        config: buildConfig(),
-      });
+      const stream = await ai.models.generateContentStream({ model, contents: convertMessages(messages), config: buildConfig() });
       let full = '';
       for await (const chunk of stream) {
-        for (const candidate of (chunk.candidates || [])) {
-          for (const part of (candidate.content?.parts || [])) {
+        for (const candidate of (chunk.candidates || []))
+          for (const part of (candidate.content?.parts || []))
             if (part.text && !part.thought) { full += part.text; this.setState({ streamingText: full }); }
-          }
-        }
       }
       const list = document.getElementById('msg-list');
       if (list) list.scrollTop = list.scrollHeight;

package/docs/index.html

@@ -6,7 +6,6 @@
 <title>thebird — Gemini chat</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" />
-<script type="importmap">{"imports":{"webjsx":"https://unpkg.com/webjsx/dist/index.js"}}</script>
 <style>
   :root { --bg: #0f1117; }
   html, body { height: 100%; background: var(--bg); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thebird",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "Anthropic SDK to Gemini streaming bridge — drop-in proxy that translates Anthropic message format and tool calls to Google Gemini",
   "main": "index.js",
   "types": "index.d.ts",