@kodaris/krubble-app-components 1.0.100 → 1.0.101

package/dist/krubble-app.bundled.js

@@ -5626,6 +5626,24 @@ let KRChatbot = class KRChatbot extends i$3 {
          * in place; call requestUpdate() after changing it to re-render.
          */
         this._globalSkillPending = new Set();
+        /**
+         * The live Web Speech recognizer while dictating, else null. Not reactive —
+         * `_isDictating` drives the UI; this is just the handle used to stop it.
+         */
+        this._speechRecognition = null;
+        /**
+         * The composer text as it stood when dictation started. Each `result` event
+         * re-reports the whole utterance (final + interim), so the value is rebuilt as
+         * this base + the transcript rather than appended to — appending would repeat
+         * the interim text on every event.
+         */
+        this._speechBaseValue = '';
+        /**
+         * Transcript of utterances the recognizer has marked final this session.
+         * Held separately because `results` is pruned in continuous mode on some
+         * browsers; without this, earlier sentences would vanish mid-dictation.
+         */
+        this._speechFinalTranscript = '';
         // --- @property (public API) ---
         /**
          * Callback function for sending messages. Receives the user's message and
@@ -5775,6 +5793,8 @@ let KRChatbot = class KRChatbot extends i$3 {
         this._skillBrowseSource = 'org';
         /** Search text in the browse dialog, routed to the active tab's search. */
         this._skillBrowseQuery = '';
+        /** True while the mic is live and speech is being transcribed into the composer. */
+        this._isDictating = false;
         this._handleMouseMove = (e) => {
             if (this._isDragging) {
                 let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
@@ -5927,6 +5947,14 @@ let KRChatbot = class KRChatbot extends i$3 {
         }
         document.removeEventListener('mousemove', this._handleMouseMove);
         document.removeEventListener('mouseup', this._handleMouseUp);
+        // Release the mic if the chatbot is torn down mid-dictation — otherwise the
+        // recognizer keeps the browser's recording indicator lit with nothing to
+        // transcribe into. abort() (not stop()) since the discarded text has nowhere to go.
+        if (this._speechRecognition) {
+            this._speechRecognition.abort();
+            this._speechRecognition = null;
+            this._isDictating = false;
+        }
         // Release any object URLs still held by staged attachments.
         this._pendingConversationFiles.forEach((p) => {
             if (p.previewUrl) {
@@ -6533,6 +6561,92 @@ let KRChatbot = class KRChatbot extends i$3 {
         this._skillMenuOpened = true;
         this._searchInvocableSkills('');
     }
+    /**
+     * The mic button toggles dictation. Speech is transcribed straight into the
+     * composer as editable text — the user still reviews and presses send, so a
+     * misheard word is fixable and nothing is sent by voice alone.
+     *
+     * Recognition runs entirely in the browser's Web Speech API (Chrome/Edge send
+     * audio to Google's service, Safari to Apple's). No audio reaches Kodaris, and
+     * there's no backend call or cost on our side.
+     */
+    _handleMicClick() {
+        // Second click stops. `stop()` flushes the pending utterance as a final
+        // result, so the last words aren't lost; onend clears the state.
+        if (this._speechRecognition) {
+            this._speechRecognition.stop();
+            return;
+        }
+        // Prefixed in Chrome/Edge/Safari; the unprefixed name is checked first for
+        // whenever they drop the prefix. The mic button isn't rendered without one of
+        // these, so reaching here unsupported means a mid-session change — bail quietly.
+        const SpeechRecognitionCtor = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognitionCtor) {
+            return;
+        }
+        const recognition = new SpeechRecognitionCtor();
+        // Keep listening through natural pauses — a chat message is often several
+        // sentences, and the default stops at the first one.
+        recognition.continuous = true;
+        // Show words as they're recognized rather than only at end of utterance.
+        recognition.interimResults = true;
+        // `lang` is deliberately left unset so the recognizer follows the page/OS
+        // language, which is correct for every consumer of this component.
+        // Dictation ADDS to whatever is already typed rather than replacing it, so
+        // the user can type half a message and speak the rest. The separating space
+        // is part of the base so the transcript never runs into the existing word.
+        this._speechBaseValue = this._inputValue;
+        if (this._speechBaseValue && !this._speechBaseValue.endsWith(' ')) {
+            this._speechBaseValue += ' ';
+        }
+        this._speechFinalTranscript = '';
+        recognition.onresult = (e) => {
+            // Everything from resultIndex on is new since the last event: finalized
+            // pieces move to _speechFinalTranscript permanently, while non-final ones
+            // are rebuilt each event because the browser revises its guess as it hears
+            // more. Rebuilding the whole value (base + final + interim) is what keeps
+            // those revisions from stacking up as duplicated text.
+            let interim = '';
+            for (let i = e.resultIndex; i < e.results.length; i++) {
+                if (e.results[i].isFinal) {
+                    this._speechFinalTranscript += e.results[i][0].transcript;
+                }
+                else {
+                    interim += e.results[i][0].transcript;
+                }
+            }
+            this._inputValue = this._speechBaseValue + this._speechFinalTranscript + interim;
+            this._saveState();
+            // Grow the textarea as dictated text wraps — the same clamp the typing path
+            // uses, since @input doesn't fire for programmatic value changes.
+            if (this._inputEl) {
+                this._inputEl.style.height = 'auto';
+                this._inputEl.style.height = Math.min(this._inputEl.scrollHeight, 120) + 'px';
+            }
+        };
+        recognition.onerror = (e) => {
+            // Denied mic permission is the one error worth explaining — the user has to
+            // fix it in browser settings, and the button would otherwise look broken.
+            if (e.error === 'not-allowed' || e.error === 'service-not-allowed') {
+                this._error = 'Microphone access is blocked. Allow it in your browser settings to use voice input.';
+                return;
+            }
+            // `no-speech` (silence) and `aborted` (user stopped) are normal; anything
+            // else is a transient service hiccup. onend still runs, so the mic resets.
+        };
+        // Fires on stop(), on error, and when the browser ends recognition on its own
+        // (e.g. a long silence) — the single place the live state is torn down.
+        recognition.onend = () => {
+            this._speechRecognition = null;
+            this._isDictating = false;
+        };
+        // start() is what triggers the browser's mic permission prompt.
+        this._speechRecognition = recognition;
+        this._isDictating = true;
+        this._error = '';
+        recognition.start();
+        this._inputEl?.focus();
+    }
     /** Insert `/code ` into the composer and focus it, ready for the message. */
     _handleSkillSelect(skill) {
         // A global skill must be installed before it can be chosen — inserting /code
@@ -6803,6 +6917,13 @@ let KRChatbot = class KRChatbot extends i$3 {
                 previewUrl: p.previewUrl,
             }));
         }
+        // The message is on its way, so stop the mic if it's still live — otherwise
+        // it would keep transcribing into the now-cleared composer. abort() rather
+        // than stop() because a trailing pending utterance belongs to the message
+        // just sent; flushing it would drop stray words into the next one.
+        if (this._speechRecognition) {
+            this._speechRecognition.abort();
+        }
         this.messages = [...this.messages, userMessage];
         this._inputValue = '';
         this._saveState();
@@ -7875,6 +7996,31 @@ let KRChatbot = class KRChatbot extends i$3 {
               @keydown=${this._handleKeyDown}
               @paste=${this._handlePaste}
             ></textarea>
+            ${window.SpeechRecognition || window.webkitSpeechRecognition ? b `
+              <button
+                class=${e({
+            mic: true,
+            'mic--recording': this._isDictating,
+        })}
+                title=${this._isDictating ? 'Stop dictation' : 'Dictate a message'}
+                @click=${this._handleMicClick}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="mic-icon"
+                >
+                  <path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Z"/>
+                  <path d="M19 11a7 7 0 0 1-14 0"/>
+                  <path d="M12 18v3"/>
+                </svg>
+              </button>
+            ` : A}
             ${this._isStreaming ? b `
               <button
                 class="stop"
@@ -8718,6 +8864,51 @@ KRChatbot.styles = i$6 `
       color: #b0b0b0;
     }
 
+    .mic {
+      width: 34px;
+      height: 34px;
+      border: none;
+      background: transparent;
+      color: var(--kr-chatbot-text);
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .mic:hover {
+      background: #f8f9fc;
+    }
+
+    /* Live dictation: red mic on a tinted circle, pulsing so it's clear the
+       microphone is still open even when the user has stopped speaking. */
+    .mic--recording {
+      color: var(--kr-chatbot-error-text);
+      background: var(--kr-chatbot-error-bg);
+      animation: chatbot-mic-pulse 1.6s ease-in-out infinite;
+    }
+
+    .mic--recording:hover {
+      background: var(--kr-chatbot-error-bg);
+    }
+
+    .mic-icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    @keyframes chatbot-mic-pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.55;
+      }
+    }
+
     .send {
       width: 34px;
       height: 34px;
@@ -9345,6 +9536,9 @@ __decorate([
 __decorate([
     r()
 ], KRChatbot.prototype, "_skillBrowseQuery", void 0);
+__decorate([
+    r()
+], KRChatbot.prototype, "_isDictating", void 0);
 __decorate([
     e$3('.panel')
 ], KRChatbot.prototype, "_panelEl", void 0);