thebird 1.2.13 → 1.2.15

package/docs/app.js

@@ -84,7 +84,14 @@ class BirdChat extends HTMLElement {
     if (this.state.apiKey) this.loadModels(this.state.apiKey);
   }
 
-  setState(patch) { Object.assign(this.state, patch); this.render(); }
+  setState(patch) {
+    Object.assign(this.state, patch);
+    this.render();
+    if (this.streamWrap && !this.querySelector('#msg-list')?.contains(this.streamWrap)) {
+      const list = this.querySelector('#msg-list');
+      if (list) list.appendChild(this.streamWrap);
+    }
+  }
 
   async loadModels(apiKey) {
     this.setState({ modelsLoading: true, status: '' });
@@ -127,11 +134,7 @@ class BirdChat extends HTMLElement {
             <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 && 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>`}
+          ${streaming && !streamingText && 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 && html`<div class="text-xs text-error px-4 pb-1">${status}</div>`}
@@ -160,19 +163,29 @@ class BirdChat extends HTMLElement {
     this.setState({ messages, streaming: true, status: '', streamingText: '' });
     try {
       let full = '';
-      let rafPending = false;
-      const gen = streamGenerate(apiKey, model, convertMessages(messages));
-      for await (const chunk of gen) {
+      this.streamEl = document.createElement('div');
+      this.streamEl.className = 'msg-bubble card bg-base-200 text-base-content px-4 py-3 text-sm leading-relaxed';
+      const cursor = document.createElement('span');
+      cursor.className = 'animate-pulse ml-1';
+      cursor.textContent = '▋';
+      this.streamWrap = document.createElement('div');
+      this.streamWrap.className = 'flex justify-start';
+      this.streamWrap.appendChild(this.streamEl);
+      this.streamWrap.appendChild(cursor);
+      const list = this.querySelector('#msg-list');
+      if (list) list.appendChild(this.streamWrap);
+      for await (const chunk of streamGenerate(apiKey, model, convertMessages(messages))) {
         full += chunk;
-        if (!rafPending) {
-          rafPending = true;
-          const snap = full;
-          requestAnimationFrame(() => { this.setState({ streamingText: snap }); rafPending = false; });
-        }
+        this.streamEl.textContent = full;
+        const l = this.querySelector('#msg-list');
+        if (l) l.scrollTop = l.scrollHeight;
       }
+      this.streamWrap.remove();
+      this.streamEl = null;
+      this.streamWrap = null;
       this.setState({ messages: [...messages, { role: 'assistant', content: full || '(empty)' }], streaming: false, streamingText: '' });
-      const list = document.getElementById('msg-list');
-      if (list) list.scrollTop = list.scrollHeight;
+      const l2 = this.querySelector('#msg-list');
+      if (l2) l2.scrollTop = l2.scrollHeight;
     } catch (err) {
       this.setState({ streaming: false, streamingText: '', status: 'Error: ' + (err?.message || String(err)) });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thebird",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "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",