@kodaris/krubble-app-components 1.0.79 → 1.0.80

package/dist/krubble-app.umd.js

@@ -5751,7 +5751,7 @@
           /**
            * AI framework UI config flags fetched from `aiFrameworkConfig` on connect.
            * `debugTelemetryEnabled` (same server-side gate as TOKEN_USAGE emission) turns
-           * on the debug drawer toggle and the `/test-warning` / `/test-limit` composer
+           * on the debug drawer toggle and the `/test-context-warning` / `/test-context-limit` composer
            * options — known up front, before any message.
            */
           this._aiFrameworkConfig = {};
@@ -6223,7 +6223,7 @@
           if (debugActions && index === 2) {
               this._skillMenuOpened = false;
               this._send({
-                  message: '/test-warning',
+                  message: '/test-context-warning',
                   internalFiles: [],
               });
               return;
@@ -6231,7 +6231,7 @@
           if (debugActions && index === 3) {
               this._skillMenuOpened = false;
               this._send({
-                  message: '/test-limit',
+                  message: '/test-context-limit',
                   internalFiles: [],
               });
               return;
@@ -6916,7 +6916,7 @@
         })}
               @click=${() => this._activateSkillMenuItem(2)}
             >
-              Test: context warning
+              Test Context Warning
             </button>
             <button
               class=${e({
@@ -6925,7 +6925,7 @@
         })}
               @click=${() => this._activateSkillMenuItem(3)}
             >
-              Test: context limit
+              Test Context Limit
             </button>
           ` : A}
         </div>
@@ -7508,9 +7508,7 @@
               </svg>
             </button>
           </div>
-        ` : A}
-
-        ${this._contextLimitReached ? b `
+        ` : this._contextLimitReached ? b `
           <div class="context-limit" role="alert">
             ${this._contextLimitMessage
             || 'This conversation has reached its limit. Please start a new one to continue.'}
@@ -8096,14 +8094,22 @@
 
     /* Context warning banner (user-facing, dismissible, non-blocking) */
     .context-warning {
-      padding: 8px 16px;
+      /* Match the message text column: 768px cap minus its 32px side padding
+         (704px), and viewport minus that padding on narrower screens. */
+      width: 100%;
+      max-width: 735px;
+      margin: 8px auto 0;
+      padding: 10px 14px;
+      border: 1px solid #fde68a;
+      border-radius: 8px;
       background: #fffbeb;
       color: #92400e;
       font-size: 13px;
+      line-height: 1.4;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 8px;
+      gap: 10px;
       flex-shrink: 0;
     }
 
@@ -8116,6 +8122,11 @@
       display: flex;
       align-items: center;
       flex-shrink: 0;
+      opacity: 0.7;
+    }
+
+    .context-warning-dismiss:hover {
+      opacity: 1;
     }
 
     .context-warning-dismiss-icon {
@@ -8125,11 +8136,18 @@
 
     /* Context-limit notice (user-facing, blocking — steers to a new conversation) */
     .context-limit {
-      padding: 10px 16px;
+      /* Match the message text column: 768px cap minus its 32px side padding
+         (704px), and viewport minus that padding on narrower screens. */
+      width: 100%;
+      max-width: 735px;
+      margin: 8px auto 0;
+      padding: 10px 14px;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
       background: var(--kr-chatbot-error-bg);
       color: var(--kr-chatbot-error-text);
       font-size: 13px;
-      line-height: 1.5;
+      line-height: 1.4;
       flex-shrink: 0;
     }