thebird 1.2.9 → 1.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/docs/app.js +40 -73
  2. package/docs/index.html +0 -1
  3. package/package.json +1 -1
package/docs/app.js CHANGED
@@ -1,4 +1,7 @@
1
- import { createElement, applyDiff } from 'webjsx';
1
+ import { createElement, applyDiff } from 'https://esm.sh/webjsx@0.0.73';
2
+ import htm from 'https://esm.sh/htm@3';
3
+
4
+ const html = htm.bind(createElement);
2
5
 
3
6
  const MODELS_API = key => `https://generativelanguage.googleapis.com/v1beta/models?key=${key}`;
4
7
 
@@ -47,14 +50,9 @@ class BirdChat extends HTMLElement {
47
50
  constructor() {
48
51
  super();
49
52
  this.state = {
50
- messages: [],
51
- streaming: false,
52
- model: 'gemini-2.5-flash',
53
+ messages: [], streaming: false, model: 'gemini-2.5-flash',
53
54
  apiKey: localStorage.getItem('gemini_api_key') || '',
54
- models: [],
55
- modelsLoading: false,
56
- status: '',
57
- streamingText: '',
55
+ models: [], modelsLoading: false, status: '', streamingText: '',
58
56
  };
59
57
  window.__debug = {
60
58
  get state() { return this.state; }.bind(this),
@@ -75,8 +73,7 @@ class BirdChat extends HTMLElement {
75
73
  try {
76
74
  const models = await fetchModels(apiKey);
77
75
  const current = this.state.model;
78
- const first = models[0]?.id || 'gemini-2.5-flash';
79
- const model = models.find(m => m.id === current) ? current : first;
76
+ const model = models.find(m => m.id === current) ? current : (models[0]?.id || current);
80
77
  this.setState({ models, model, modelsLoading: false });
81
78
  } catch (err) {
82
79
  this.setState({ modelsLoading: false, status: 'Failed to load models: ' + (err?.message || String(err)) });
@@ -85,76 +82,52 @@ class BirdChat extends HTMLElement {
85
82
 
86
83
  render() {
87
84
  const { messages, streaming, model, apiKey, models, modelsLoading, status, streamingText } = this.state;
88
- applyDiff(this, (
85
+ const modelOptions = (models.length === 0 ? [{ id: model, label: model }] : models)
86
+ .map(m => html`<option value=${m.id} selected=${m.id === model}>${m.label}</option>`);
87
+
88
+ applyDiff(this, html`
89
89
  <div class="flex flex-col h-full">
90
90
  <header class="navbar bg-base-200 border-b border-base-300 gap-2 flex-wrap px-4 py-2">
91
91
  <span class="text-primary font-bold text-lg mr-2">🐦 thebird</span>
92
92
  <span class="text-base-content/50 text-xs hidden sm:inline">Anthropic SDK format → Gemini API</span>
93
93
  <div class="flex gap-2 flex-1 min-w-0 items-center flex-wrap">
94
- <input
95
- id="api-key-input"
96
- type="password"
97
- class="input input-sm input-bordered flex-1 min-w-[160px]"
98
- placeholder="GEMINI_API_KEY"
99
- value={apiKey}
100
- onchange={e => {
101
- const v = e.target.value.trim();
102
- localStorage.setItem('gemini_api_key', v);
103
- this.setState({ apiKey: v });
104
- if (v) this.loadModels(v);
105
- }}
106
- />
94
+ <input id="api-key-input" type="password" class="input input-sm input-bordered flex-1 min-w-[160px]"
95
+ placeholder="GEMINI_API_KEY" value=${apiKey}
96
+ onchange=${e => { const v = e.target.value.trim(); localStorage.setItem('gemini_api_key', v); this.setState({ apiKey: v }); if (v) this.loadModels(v); }} />
107
97
  <div class="relative">
108
- {modelsLoading
109
- ? <span class="loading loading-spinner loading-sm text-primary"></span>
110
- : <select
111
- class="select select-sm select-bordered"
112
- value={model}
113
- disabled={models.length === 0}
114
- onchange={e => this.setState({ model: e.target.value })}
115
- >
116
- {(models.length === 0 ? [{ id: model, label: model }] : models).map(m => <option value={m.id} selected={m.id === model}>{m.label}</option>)}
117
- </select>
118
- }
98
+ ${modelsLoading
99
+ ? html`<span class="loading loading-spinner loading-sm text-primary"></span>`
100
+ : html`<select class="select select-sm select-bordered" value=${model} disabled=${models.length === 0}
101
+ onchange=${e => this.setState({ model: e.target.value })}>${modelOptions}</select>`}
119
102
  </div>
120
- <button class="btn btn-sm btn-ghost" onclick={() => this.setState({ messages: [], status: '' })}>Clear</button>
103
+ <button class="btn btn-sm btn-ghost" onclick=${() => this.setState({ messages: [], status: '' })}>Clear</button>
121
104
  </div>
122
105
  </header>
123
106
 
124
107
  <div id="msg-list" class="flex-1 overflow-y-auto flex flex-col gap-3 p-4">
125
- {messages.map((m, i) => (
126
- <div key={i} class={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
127
- <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'}`}>
128
- {m.content}
129
- </div>
130
- </div>
131
- ))}
132
- {streamingText && (
108
+ ${messages.map((m, i) => html`
109
+ <div key=${i} class=${'flex ' + (m.role === 'user' ? 'justify-end' : 'justify-start')}>
110
+ <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>
111
+ </div>`)}
112
+ ${streamingText && html`
133
113
  <div class="flex justify-start">
134
- <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>
135
- </div>
136
- )}
137
- {!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>}
114
+ <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>
115
+ </div>`}
116
+ ${!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>`}
138
117
  </div>
139
118
 
140
- {status && <div class="text-xs text-error px-4 pb-1">{status}</div>}
141
-
142
- <form class="flex gap-2 p-3 border-t border-base-300 bg-base-200" onsubmit={e => { e.preventDefault(); this.send(); }}>
143
- <textarea
144
- id="chat-input"
145
- class="textarea textarea-bordered flex-1 resize-none min-h-[42px] max-h-[120px] text-sm"
146
- placeholder="Message… (Shift+Enter for newline)"
147
- rows="1"
148
- disabled={streaming}
149
- onkeydown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.send(); } }}
150
- oninput={e => { e.target.style.height = 'auto'; e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px'; }}
151
- ></textarea>
152
- <button type="submit" class="btn btn-primary self-end" disabled={streaming}>
153
- {streaming ? <span class="loading loading-spinner loading-sm"></span> : 'Send'}
119
+ ${status && html`<div class="text-xs text-error px-4 pb-1">${status}</div>`}
120
+
121
+ <form class="flex gap-2 p-3 border-t border-base-300 bg-base-200" onsubmit=${e => { e.preventDefault(); this.send(); }}>
122
+ <textarea id="chat-input" class="textarea textarea-bordered flex-1 resize-none min-h-[42px] max-h-[120px] text-sm"
123
+ placeholder="Message… (Shift+Enter for newline)" rows="1" disabled=${streaming}
124
+ onkeydown=${e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.send(); } }}
125
+ oninput=${e => { e.target.style.height = 'auto'; e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px'; }}></textarea>
126
+ <button type="submit" class="btn btn-primary self-end" disabled=${streaming}>
127
+ ${streaming ? html`<span class="loading loading-spinner loading-sm"></span>` : 'Send'}
154
128
  </button>
155
129
  </form>
156
- </div>
157
- ));
130
+ </div>`);
158
131
  }
159
132
 
160
133
  async send() {
@@ -170,18 +143,12 @@ class BirdChat extends HTMLElement {
170
143
  try {
171
144
  const { GoogleGenAI } = await import('https://esm.sh/@google/genai@1');
172
145
  const ai = new GoogleGenAI({ apiKey });
173
- const stream = await ai.models.generateContentStream({
174
- model,
175
- contents: convertMessages(messages),
176
- config: buildConfig(),
177
- });
146
+ const stream = await ai.models.generateContentStream({ model, contents: convertMessages(messages), config: buildConfig() });
178
147
  let full = '';
179
148
  for await (const chunk of stream) {
180
- for (const candidate of (chunk.candidates || [])) {
181
- for (const part of (candidate.content?.parts || [])) {
149
+ for (const candidate of (chunk.candidates || []))
150
+ for (const part of (candidate.content?.parts || []))
182
151
  if (part.text && !part.thought) { full += part.text; this.setState({ streamingText: full }); }
183
- }
184
- }
185
152
  }
186
153
  const list = document.getElementById('msg-list');
187
154
  if (list) list.scrollTop = list.scrollHeight;
package/docs/index.html CHANGED
@@ -6,7 +6,6 @@
6
6
  <title>thebird — Gemini chat</title>
7
7
  <script src="https://cdn.tailwindcss.com"></script>
8
8
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" />
9
- <script type="importmap">{"imports":{"webjsx":"https://unpkg.com/webjsx/dist/index.js"}}</script>
10
9
  <style>
11
10
  :root { --bg: #0f1117; }
12
11
  html, body { height: 100%; background: var(--bg); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "thebird",
3
- "version": "1.2.9",
3
+ "version": "1.2.10",
4
4
  "description": "Anthropic SDK to Gemini streaming bridge — drop-in proxy that translates Anthropic message format and tool calls to Google Gemini",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",