bloby-bot 0.22.18 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.22.18",
+  "version": "0.23.0",
   "releaseNotes": [
     "1. new stuff",
     "2. ",

package/supervisor/chat/src/components/Chat/InputBar.tsx

@@ -293,6 +293,7 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled, on
       isHolding.current = true;
       setIsRecording(true);
       setRecordingTime(0);
+      if (isMobile) try { navigator.vibrate?.(50); } catch {}
     } catch (err) {
       console.error('[InputBar] recording setup failed:', err);
     }
@@ -528,14 +529,17 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled, on
                     {/* Draggable mic (DOM transform for 60fps) */}
                     <div
                       ref={micRef}
-                      className="shrink-0 touch-none select-none will-change-transform"
+                      className="shrink-0 touch-none select-none will-change-transform relative z-10"
                       style={{ transition: 'none' }}
                       onPointerDown={handleMicDown}
                       onPointerMove={handleMicMove}
                       onPointerUp={handleMicUp}
                       onPointerCancel={handleMicCancel}
                     >
-                      <div className="flex items-center justify-center h-11 w-11 rounded-full bg-destructive text-destructive-foreground">
+                      <div
+                        className="flex items-center justify-center h-11 w-11 rounded-full bg-destructive text-destructive-foreground animate-mic-pulse transition-transform duration-200"
+                        style={{ transform: 'scale(1.1) translateY(-6px)' }}
+                      >
                         <Mic className="h-5 w-5" />
                       </div>
                     </div>

package/supervisor/chat/src/styles/globals.css

@@ -130,3 +130,11 @@ body {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+@keyframes mic-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 77, 104, 0.4); }
+  50% { box-shadow: 0 0 0 12px rgba(240, 77, 104, 0); }
+}
+.animate-mic-pulse {
+  animation: mic-pulse 1.5s ease-in-out infinite;
+}

package/supervisor/widget.js

@@ -13,6 +13,8 @@
     '#bloby-widget-panel.open{transform:translateX(0)}',
     '#bloby-widget-panel iframe{width:100%;height:100%;border:none;background:#212121}',
     '@media(max-width:480px){#bloby-widget-panel{width:100vw}}',
+    '@keyframes bloby-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,77,104,0.4)}50%{box-shadow:0 0 0 14px rgba(240,77,104,0)}}',
+    '#bloby-widget-bubble.recording{animation:bloby-mic-pulse 1.5s ease-in-out infinite}',
   ].join('\n');
   document.head.appendChild(style);
 
@@ -475,7 +477,11 @@
       loadHpSprite(function() { if (hpPointerDown) beginHpAnimation(); });
       return;
     }
+    try { navigator.vibrate(50); } catch(e) {}
     badgeEl.style.display = 'none';
+    canvas.style.transition = 'transform 0.2s ease';
+    canvas.style.transform = 'scale(1.1) translateY(-8px)';
+    canvas.classList.add('recording');
     hpState = 'activating';
     hpFrame = HP_ACTIVATE_START;
     hpPingPong = 1;
@@ -524,6 +530,10 @@
       }
     }
 
+    // Shrink back + remove pulse
+    canvas.style.transform = '';
+    canvas.classList.remove('recording');
+
     // v2 deactivation: reverse 40→11 (activate played backwards)
     if (hpState === 'activating') {
       hpState = 'activating_then_deactivate';
@@ -593,6 +603,7 @@
   // ══════════════════════════════════════════════════════════════════
 
   var isOpen = false;
+  var toggleCooldown = false;
 
   function toggle() {
     console.log('[widget] toggle called', { canvasPhase: canvasPhase, isOpen: isOpen });
@@ -643,8 +654,11 @@
       stopHpRecording(false);
     }
     // Tap detection: preventDefault on pointerdown suppresses click on mobile,
-    // so we handle taps here instead.
+    // so we handle taps here instead. Set cooldown to prevent the synthesized
+    // click from hitting the backdrop (bubble is hidden by then).
     if (!hpWasHold) {
+      toggleCooldown = true;
+      setTimeout(function() { toggleCooldown = false; }, 400);
       toggle();
     }
     hpWasHold = false;
@@ -674,7 +688,7 @@
   });
 
   bubble.addEventListener('contextmenu', function(e) { e.preventDefault(); });
-  backdrop.addEventListener('click', toggle);
+  backdrop.addEventListener('click', function() { if (!toggleCooldown) toggle(); });
   document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && isOpen) toggle(); });
 
   // ── PWA Install ──