@kodaris/krubble-app-components 1.0.101 → 1.0.103

package/dist/krubble-app.bundled.js

@@ -5795,6 +5795,31 @@ let KRChatbot = class KRChatbot extends i$3 {
         this._skillBrowseQuery = '';
         /** True while the mic is live and speech is being transcribed into the composer. */
         this._isDictating = false;
+        /**
+         * Close the `/` skill menu when the click lands outside it.
+         *
+         * Bound at the document because a click anywhere — including outside this
+         * component entirely — should dismiss the menu. `composedPath()` rather than
+         * `e.target` since the menu lives in this component's shadow root, where
+         * `target` on a document listener is retargeted to the host element and every
+         * inside click would look like an outside one.
+         */
+        this._handleDocumentClick = (e) => {
+            if (!this._skillMenuOpened) {
+                return;
+            }
+            // Excluded: the textarea, since clicking it keeps editing the same `/` command
+            // and dismissing there would fight the user still typing it; and the plus
+            // button, which owns the menu's open/close itself. The plus exclusion matters
+            // in both directions — this listener runs after the button's own handler, so
+            // without it a click that just opened the menu would immediately close it
+            // again, and a click meant to toggle it shut would be double-handled.
+            const path = e.composedPath();
+            if (path.some((el) => el instanceof HTMLElement && (el.classList.contains('skill-menu') || el.classList.contains('input') || el.classList.contains('input-plus')))) {
+                return;
+            }
+            this._skillMenuOpened = false;
+        };
         this._handleMouseMove = (e) => {
             if (this._isDragging) {
                 let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
@@ -5938,6 +5963,7 @@ let KRChatbot = class KRChatbot extends i$3 {
             this.opened = true;
         }
         this._restoreState();
+        document.addEventListener('click', this._handleDocumentClick);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -5947,6 +5973,7 @@ let KRChatbot = class KRChatbot extends i$3 {
         }
         document.removeEventListener('mousemove', this._handleMouseMove);
         document.removeEventListener('mouseup', this._handleMouseUp);
+        document.removeEventListener('click', this._handleDocumentClick);
         // 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.
@@ -6168,7 +6195,12 @@ let KRChatbot = class KRChatbot extends i$3 {
             }
             const state = JSON.parse(raw);
             // Draft text and the debug drawer are persisted for all variants.
-            if (typeof state.message === 'string') {
+            // A lone `/` is dropped — it's the in-progress half of a menu interaction,
+            // not a draft, and restoring it would revive a stale menu the user never
+            // used. Anything with an actual command after the slash (`/code`, `/code do
+            // the thing`) is a real draft and restores normally. Trimmed before testing
+            // so a stray space around the slash doesn't defeat the check.
+            if (typeof state.message === 'string' && state.message.trim() !== '/') {
                 this._inputValue = state.message;
             }
             this._debugPanelOpen = state.debugPanelOpen === 'true';
@@ -6716,6 +6748,15 @@ let KRChatbot = class KRChatbot extends i$3 {
         // the menu interaction, and the picker is a separate window so the menu would
         // otherwise linger open behind it (and after a file is chosen).
         this._skillMenuOpened = false;
+        // A lone `/` was only the means of reaching this action, so it shouldn't be
+        // left behind in the composer once the picker opens. Nothing else is touched:
+        // a real command (`/code`) stays because `/code` plus an attachment is a valid
+        // invocation, and the plus button reaches this same method with an arbitrary
+        // draft in the composer, which must survive.
+        if (this._inputValue.trim() === '/') {
+            this._inputValue = '';
+            this._saveState();
+        }
         this._pendingAttachAnalyze = aiAnalyze;
         this._fileInputEl?.click();
     }
@@ -7997,29 +8038,53 @@ let KRChatbot = class KRChatbot extends i$3 {
               @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"
+              ${this._isDictating ? b `
+                <button
+                  class="mic-stop"
+                  title="Stop dictation"
+                  aria-label="Stop dictation"
+                  @click=${this._handleMicClick}
                 >
-                  <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>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    class="mic-stop-icon"
+                    aria-hidden="true"
+                  >
+                    <rect
+                      x="6"
+                      y="6"
+                      width="12"
+                      height="12"
+                      rx="2"
+                    />
+                  </svg>
+                </button>
+              ` : b `
+                <button
+                  class="mic"
+                  title="Dictate a message"
+                  aria-label="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"
+                    aria-hidden="true"
+                  >
+                    <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
@@ -8864,6 +8929,14 @@ KRChatbot.styles = i$6 `
       color: #b0b0b0;
     }
 
+    /* margin-right rather than a wider .input-wrapper gap, which would also push
+       the plus button and textarea apart. Applied to both mic states so the
+       spacing doesn't shift when dictation swaps one for the other. */
+    .mic,
+    .mic-stop {
+      margin-right: 4px;
+    }
+
     .mic {
       width: 34px;
       height: 34px;
@@ -8883,30 +8956,42 @@ KRChatbot.styles = i$6 `
       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: 21px;
+      height: 21px;
+    }
+
+    /* Dictation swaps the mic for this stop button, sitting in the mic's slot so
+       the composer's layout is unchanged and the textarea stays visible with the
+       transcript streaming into it. Structurally identical to .stop; only the
+       colors differ — dictation isn't an error state, so it takes a neutral grey
+       instead of the error red, and that also keeps it distinct from the solid
+       send button sitting right beside it. The icon is dark rather than white
+       because white on this grey wouldn't meet contrast. */
+    .mic-stop {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: #eae7e7;
+      color: #1f1f1f;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s;
     }
 
-    .mic-icon {
-      width: 18px;
-      height: 18px;
+    .mic-stop:hover {
+      background: #ded9d9;
     }
 
-    @keyframes chatbot-mic-pulse {
-      0%, 100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.55;
-      }
+    /* Larger than .stop-icon's 14px: the rect fills only half its 24-unit
+       viewBox, so the drawn square is half this value. */
+    .mic-stop-icon {
+      width: 20px;
+      height: 20px;
     }
 
     .send {