@salla.sa/ui-ai-kit-core 1.1.0 → 2.0.0

package/dist/cjs/ai-voice-input.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DLJcLHFH.js');
+var index = require('./index-BkNg07SW.js');
 
-const aiVoiceInputCss = () => `:host{display:block;width:100%;font-family:var(--ai-font-family, "PingARLT", sans-serif);--ai-input-bg:var(--ai-bg-input, #ffffff);--ai-input-border-color:var(--ai-border-default, #eeeeee);--ai-send-button-bg:var(--ai-border-default, #eeeeee);--ai-send-button-border:var(--ai-border-default, #eeeeee);--ai-send-button-color:var(--ai-text-secondary, #737373);--ai-send-button-active-color:var(--ai-text-primary, #333333);--ai-voice-timer-color:var(--ai-text-secondary, #737373)}.wrapper{position:relative;padding:var(--ai-input-wrapper-padding, 16px)}.glow{position:absolute;bottom:20px;left:39px;right:39px;height:29px;border-radius:9999px;background:var(--ai-input-glow);filter:blur(20px);opacity:0.9;pointer-events:none}.input-container{position:relative;background-color:var(--ai-input-bg, #ffffff);border-radius:var(--ai-input-border-radius, 9999px);border:1px solid var(--ai-input-border-color, #eeeeee);box-shadow:0 1px 2px 0 var(--ai-input-shadow-color, rgba(18, 18, 23, 0.05));padding:var(--ai-input-padding, 12px);overflow:hidden}.recording-row{display:flex;align-items:center;gap:var(--ai-input-gap, 10px)}.cancel-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;max-height:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-send-button-border, var(--ai-border-default));background-color:var(--ai-send-button-bg, var(--ai-border-default));color:var(--ai-send-button-color, var(--ai-text-secondary));cursor:pointer;flex-shrink:0;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.cancel-button:hover{background-color:var(--ai-bg-surface);border-color:var(--ai-bg-surface)}.submit-button{display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;min-width:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-send-button-active-border, var(--ai-accent));background-color:var(--ai-send-button-active-bg, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer;flex-shrink:0;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.submit-button:hover{background-color:var(--ai-send-button-active-hover-bg, var(--ai-accent));border-color:var(--ai-send-button-active-hover-border, var(--ai-accent))}.timer{font-size:13px;font-weight:500;font-family:var(--ai-font-family, "PingARLT", sans-serif);color:var(--ai-voice-timer-color, #737373);min-width:36px;text-align:center;flex-shrink:0}.timer.warning{color:var(--ai-voice-timer-warning-color, var(--ai-danger-text))}.waveform{flex:1;height:32px;max-width:100%}.error-message{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);background:var(--ai-voice-error-bg, var(--ai-danger-bg));color:var(--ai-voice-error-color, var(--ai-danger-text));font-size:11px;padding:6px 12px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);border:1px solid var(--ai-voice-error-border, var(--ai-danger-border));z-index:10}`;
+const aiVoiceInputCss = () => `:host{display:block;width:100%}.wrapper{position:relative;padding:var(--Spacing-Sizes-lg, 12px)}.glow{position:absolute;bottom:20px;left:39px;right:39px;height:29px;border-radius:9999px;background:var(--ai-input-glow);filter:blur(20px);opacity:0;pointer-events:none;transition:opacity 0.2s ease}.glow.visible{opacity:0.9}.input-container{position:relative;background-color:var(--ai-bg-input);border-radius:var(--ai-input-border-radius, 9999px);border:1px solid var(--ai-border-default);box-shadow:var(--ai-shadow-sm);padding:var(--ai-input-padding, 12px);overflow:hidden}.recording-row{display:flex;align-items:center;gap:var(--ai-input-gap, 10px)}.cancel-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;max-height:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-border-default);background-color:var(--ai-border-default);color:var(--ai-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.cancel-button:hover{background-color:var(--ai-bg-surface);border-color:var(--ai-bg-surface)}.submit-button{display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;min-width:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-send-button-active-border, var(--ai-accent));background-color:var(--ai-send-button-active-bg, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer;flex-shrink:0;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.submit-button:hover{background-color:var(--ai-send-button-active-hover-bg, var(--ai-accent));border-color:var(--ai-send-button-active-hover-border, var(--ai-accent))}@keyframes pulse-once{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}.submit-button.pulse{animation:pulse-once 0.35s ease}.timer{font-size:13px;font-weight:500;color:var(--ai-text-secondary);min-width:36px;text-align:center;flex-shrink:0}.timer.warning{color:var(--ai-voice-timer-warning-color, var(--ai-danger-text))}.waveform{flex:1;min-width:0;height:32px}.error-message{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);background:var(--ai-voice-error-bg, var(--ai-danger-bg));color:var(--ai-voice-error-color, var(--ai-danger-text));font-size:11px;padding:6px 12px;border-radius:6px;white-space:nowrap;box-shadow:var(--ai-shadow-error);border:1px solid var(--ai-voice-error-border, var(--ai-danger-border));z-index:10}`;
 
 const MAX_RECORDING_TIME = 60; // seconds
 const VoiceInput = class {
@@ -11,16 +11,22 @@ const VoiceInput = class {
         this.audioRecorded = index.createEvent(this, "audioRecorded");
         this.recordingCancel = index.createEvent(this, "recordingCancel");
     }
+    get el() { return index.getElement(this); }
     /** Whether the voice input is disabled */
     disabled = false;
     /** Whether to show the waveform animation */
     showWaveform = true;
     /** Whether to auto-start recording on mount */
     autoStart = false;
+    /** Error text to display on mic access failure. Defaults to Arabic; falls back to English when document lang is 'en' */
+    errorText = '';
+    /** Waveform bar color. Falls back to --ai-waveform-color CSS var, then #9ca3af */
+    waveformColor = '';
     /** Internal state */
     state = 'idle';
     error = null;
     recordingDuration = 0;
+    submitPulse = false;
     /** Event emitted when audio blob is ready */
     audioRecorded;
     /** Event emitted when recording is canceled */
@@ -38,7 +44,7 @@ const VoiceInput = class {
     animationFrameId = 0;
     prevHeights = [];
     componentDidLoad() {
-        if (this.autoStart) {
+        if (this.autoStart && !this.disabled) {
             this.startRecording();
         }
     }
@@ -74,6 +80,11 @@ const VoiceInput = class {
             this.streamRef = null;
         }
     };
+    getErrorText() {
+        if (this.errorText)
+            return this.errorText;
+        return document.documentElement.lang === 'en' ? 'Microphone access denied' : 'تعذّر الوصول للميكروفون';
+    }
     startRecording = async () => {
         try {
             this.error = null;
@@ -112,10 +123,10 @@ const VoiceInput = class {
                     this.drawWaveform();
                 });
             }
-            // Start timer
+            // Start timer — 1 s interval avoids unnecessary re-renders
             this.recordingTimer = window.setInterval(() => {
                 this.recordingDuration = Math.floor((Date.now() - this.recordingStartTime) / 1000);
-            }, 100);
+            }, 1000);
             // Auto-stop after max time
             this.maxTimeoutRef = window.setTimeout(() => {
                 this.stopRecording();
@@ -123,27 +134,41 @@ const VoiceInput = class {
         }
         catch (err) {
             console.error('Error starting recording:', err);
-            this.error = 'Microphone access denied';
+            this.error = this.getErrorText();
             this.state = 'idle';
         }
     };
     setupMediaRecorder = (stream) => {
-        const mediaRecorder = new MediaRecorder(stream, {
-            mimeType: 'audio/webm',
-        });
+        // Pick a supported MIME type — audio/webm is unavailable on iOS/Safari
+        const mimeType = MediaRecorder.isTypeSupported('audio/webm')
+            ? 'audio/webm'
+            : MediaRecorder.isTypeSupported('audio/ogg')
+                ? 'audio/ogg'
+                : '';
+        const options = mimeType ? { mimeType } : {};
+        const mediaRecorder = new MediaRecorder(stream, options);
         mediaRecorder.ondataavailable = e => {
             if (e.data.size > 0) {
                 this.audioChunks.push(e.data);
             }
         };
         mediaRecorder.onstop = () => {
-            const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
+            const blobType = mimeType || 'audio/mp4';
+            const audioBlob = new Blob(this.audioChunks, { type: blobType });
             this.audioRecorded.emit({ blob: audioBlob, duration: this.recordingDuration });
         };
         this.mediaRecorderRef = mediaRecorder;
         mediaRecorder.start(100); // Collect data every 100ms
     };
     stopRecording = () => {
+        // Guard: require at least 1 second of audio
+        if (this.recordingDuration < 1) {
+            this.submitPulse = true;
+            setTimeout(() => {
+                this.submitPulse = false;
+            }, 400);
+            return;
+        }
         if (this.recordingTimer) {
             clearInterval(this.recordingTimer);
             this.recordingTimer = null;
@@ -173,21 +198,51 @@ const VoiceInput = class {
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
-        const barCount = 100;
         const barWidth = 1;
         const gap = 2;
+        const minHeight = 4;
         const bufferLength = this.analyserRef.frequencyBinCount;
         const dataArray = new Uint8Array(bufferLength);
-        const binsPerBar = Math.max(1, Math.floor(bufferLength / barCount));
-        const minHeight = 4;
-        // Initialize lerp state
-        if (this.prevHeights.length !== barCount) {
-            this.prevHeights = new Array(barCount).fill(minHeight);
-        }
+        // Resolve waveform color from prop → CSS var → fallback
+        const resolvedColor = this.waveformColor ||
+            getComputedStyle(this.el).getPropertyValue('--ai-waveform-color').trim() ||
+            '#9ca3af';
+        const drawRoundRect = (x, y, w, h, r) => {
+            ctx.beginPath();
+            if (typeof ctx.roundRect === 'function') {
+                ctx.roundRect(x, y, w, h, r);
+            }
+            else {
+                // arc-based fallback for Safari < 15.4
+                const cr = Math.min(r, w / 2, h / 2);
+                ctx.moveTo(x + cr, y);
+                ctx.lineTo(x + w - cr, y);
+                ctx.arcTo(x + w, y, x + w, y + cr, cr);
+                ctx.lineTo(x + w, y + h - cr);
+                ctx.arcTo(x + w, y + h, x + w - cr, y + h, cr);
+                ctx.lineTo(x + cr, y + h);
+                ctx.arcTo(x, y + h, x, y + h - cr, cr);
+                ctx.lineTo(x, y + cr);
+                ctx.arcTo(x, y, x + cr, y, cr);
+                ctx.closePath();
+            }
+        };
         const draw = () => {
             if (this.state !== 'recording')
                 return;
             this.animationFrameId = requestAnimationFrame(draw);
+            // Sync canvas buffer to actual rendered size so it never overflows
+            const renderedWidth = canvas.offsetWidth;
+            if (renderedWidth > 0 && canvas.width !== renderedWidth) {
+                canvas.width = renderedWidth;
+            }
+            // Recompute barCount each frame based on actual canvas width
+            const barCount = Math.min(100, Math.floor(canvas.width / (barWidth + gap)));
+            const binsPerBar = Math.max(1, Math.floor(bufferLength / barCount));
+            // Re-initialize lerp state when barCount changes
+            if (this.prevHeights.length !== barCount) {
+                this.prevHeights = new Array(barCount).fill(minHeight);
+            }
             this.analyserRef.getByteFrequencyData(dataArray);
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             const centerY = canvas.height / 2;
@@ -210,9 +265,8 @@ const VoiceInput = class {
                 const barHeight = this.prevHeights[i];
                 const x = startX + i * (barWidth + gap);
                 const y = centerY - barHeight / 2;
-                ctx.fillStyle = '#9ca3af';
-                ctx.beginPath();
-                ctx.roundRect(x, y, barWidth, barHeight, barWidth / 2);
+                ctx.fillStyle = resolvedColor;
+                drawRoundRect(x, y, barWidth, barHeight, barWidth / 2);
                 ctx.fill();
             }
         };
@@ -225,7 +279,7 @@ const VoiceInput = class {
     };
     render() {
         const remaining = MAX_RECORDING_TIME - this.recordingDuration;
-        return (index.h(index.Host, { key: 'c8bfc86b0c3951460ec23b66e6e018d25c8fa950' }, index.h("div", { key: '114eae0be8e5ebcbda11cdff7fd0714221c0e27a', class: "wrapper" }, this.state === 'recording' && index.h("div", { key: '203008d77352bd2fda62a2f7728f061ea4b1ea4f', class: "glow", "aria-hidden": "true" }), index.h("div", { key: 'a92db7f67500d731faca57e1634aec4a383a9ab7', class: "input-container" }, this.state === 'idle' ? (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, index.h("ai-icon", { name: "mic", size: 16 })), this.error && (index.h("div", { class: "error-message", role: "alert" }, this.error)))) : (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, index.h("ai-icon", { name: "cancel", size: 14 })), index.h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && index.h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", width: "260", height: "32" }), index.h("button", { type: "button", class: "submit-button", onClick: this.stopRecording, "aria-label": "Send" }, index.h("ai-icon", { name: "arrow-up", size: 14 }))))))));
+        return (index.h(index.Host, { key: '225036c9c966084bcbdef9760d08cb677c985cc1' }, index.h("div", { key: '3cb3841dcb8a8e283cc325a200073ba3d540d7f8', class: "wrapper" }, index.h("div", { key: '1e71acf6ceb25d50d4131bf1a8021837756d0a41', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), index.h("div", { key: 'c96027342fdf08edc990cae9f25ebb087dd33612', class: "input-container" }, this.state === 'idle' ? (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, index.h("ai-icon", { name: "mic", size: 16 })), this.error && (index.h("div", { class: "error-message", role: "alert" }, this.error)))) : (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, index.h("ai-icon", { name: "cancel", size: 14 })), index.h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && index.h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), index.h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, index.h("ai-icon", { name: "arrow-up", size: 14 }))))))));
     }
 };
 VoiceInput.style = aiVoiceInputCss();

package/dist/cjs/{icon-registry-dmfLA-Dj.js → icon-registry-BKb9-2Nt.js}

@@ -77,6 +77,30 @@ const iconRegistry = {
         viewBox: '0 0 24 24',
         content: `  <path d="M15.1667 0.999756L15.7646 2.11753C16.1689 2.87322 16.371 3.25107 16.2374 3.41289C16.1037 3.57471 15.6635 3.44402 14.7831 3.18264C13.9029 2.92131 12.9684 2.78071 12 2.78071C6.75329 2.78071 2.5 6.90822 2.5 11.9998C2.5 13.6789 2.96262 15.2533 3.77093 16.6093M8.83333 22.9998L8.23536 21.882C7.83108 21.1263 7.62894 20.7484 7.7626 20.5866C7.89627 20.4248 8.33649 20.5555 9.21689 20.8169C10.0971 21.0782 11.0316 21.2188 12 21.2188C17.2467 21.2188 21.5 17.0913 21.5 11.9998C21.5 10.3206 21.0374 8.74623 20.2291 7.39023" stroke="currentColor"  />`,
     },
+    'list': {
+        viewBox: '0 0 24 24',
+        content: '<path d="M8 6h13M8 12h13M8 18h13" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/><path d="M3 6h.01M3 12h.01M3 18h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
+    },
+    'route': {
+        viewBox: '0 0 24 24',
+        content: '<circle cx="6" cy="19" r="2" stroke="currentColor" stroke-width="2" fill="none"/><circle cx="18" cy="5" r="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M6 17V11a6 6 0 0 1 6-6h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M15 8l3-3-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+    },
+    'check-circle': {
+        viewBox: '0 0 24 24',
+        content: '<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 12l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+    },
+    'wifi-off': {
+        viewBox: '0 0 24 24',
+        content: '<path d="M1 1l22 22M16.72 11.06A11 11 0 0 0 12 10c-2.06 0-3.96.57-5.59 1.56M5 12.55a11 11 0 0 0-1.48 1.45M10.71 5.05A16 16 0 0 1 22.56 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+    },
+    'warning': {
+        viewBox: '0 0 24 24',
+        content: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M12 9v4M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
+    },
+    'ellipsis': {
+        viewBox: '0 0 24 24',
+        content: '<circle cx="5" cy="12" r="2" fill="currentColor"/><circle cx="12" cy="12" r="2" fill="currentColor"/><circle cx="19" cy="12" r="2" fill="currentColor"/>',
+    },
 };
 
 exports.iconRegistry = iconRegistry;

package/dist/cjs/{index-DLJcLHFH.js → index-BkNg07SW.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'ui-ai-kit';
 const BUILD = /* ui-ai-kit */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@import url(\"https://cdn.salla.network/fonts/pingarlt.css\");:root{--ai-font-family:\"PingARLT\", sans-serif;font-family:var(--ai-font-family);--ai-bg-card:hsl(var(--white));--ai-bg-surface:hsl(var(--gray-300));--ai-bg-input:hsl(var(--white));--ai-text-primary:hsl(var(--dark));--ai-text-secondary:hsl(var(--dark-100));--ai-text-muted:hsl(var(--gray));--ai-border-default:hsl(var(--gray-400));--ai-border-light:hsl(var(--gray-300));--ai-accent:hsl(var(--secondary));--ai-accent-dark:hsl(var(--primary));--ai-accent-text:hsl(var(--dark));--ai-user-bubble-bg:hsl(var(--gray-300));--ai-agent-bubble-bg:hsl(var(--white));--ai-warning-bg:hsl(var(--warning-100));--ai-warning-border:hsl(var(--warning));--ai-success:hsl(var(--success));--ai-success-text:hsl(var(--success));--ai-success-bg:hsl(var(--success-100));--ai-danger-text:hsl(var(--danger));--ai-danger-bg:hsl(var(--danger-100));--ai-danger-border:hsl(var(--danger-200));--ai-accent-bg:hsl(var(--secondary-100));--ai-focus-ring:hsl(var(--info));--ai-amber:hsl(var(--warning));--ai-scrollbar-thumb:rgba(0, 0, 0, 0.15);--ai-glow-gradient:linear-gradient(90deg, hsl(var(--dark-100)) 0%, hsl(var(--gray)) 50%, hsl(var(--dark-100)) 100%);--ai-input-glow:linear-gradient(to right, hsl(var(--secondary-400)), hsl(var(--secondary-100)) 10%, hsl(var(--secondary)))}.dark{--ai-bg-card:hsl(var(--gray-100));--ai-bg-surface:hsl(var(--white-300));--ai-bg-input:hsl(var(--gray-100));--ai-text-primary:hsl(var(--dark));--ai-text-secondary:hsl(var(--dark-200));--ai-text-muted:hsl(var(--gray));--ai-border-default:hsl(var(--gray-400));--ai-border-light:hsl(var(--gray-300));--ai-accent:hsl(var(--secondary));--ai-accent-dark:hsl(var(--primary-500));--ai-accent-text:hsl(var(--primary-force));--ai-user-bubble-bg:hsl(var(--gray-400));--ai-agent-bubble-bg:hsl(var(--gray-100));--ai-warning-bg:hsl(var(--warning-100));--ai-warning-border:hsl(var(--warning));--ai-success:hsl(var(--success));--ai-success-text:hsl(var(--success));--ai-success-bg:hsl(var(--success-100));--ai-danger-text:hsl(var(--danger));--ai-danger-bg:hsl(var(--danger-100));--ai-danger-border:hsl(var(--danger-200));--ai-accent-bg:hsl(var(--secondary-100));--ai-focus-ring:hsl(var(--info));--ai-amber:hsl(var(--warning));--ai-scrollbar-thumb:rgba(255, 255, 255, 0.2);--ai-glow-gradient:linear-gradient(90deg, hsl(var(--gray)) 0%, hsl(var(--dark-300)) 50%, hsl(var(--gray)) 100%);--ai-input-glow:linear-gradient(to right, hsl(var(--secondary-400)), hsl(var(--secondary-100)) 10%, hsl(var(--secondary)))}";
+const globalStyles = "@import url(\"https://cdn.salla.network/fonts/pingarlt.css\");:root{--ai-font-family:\"PingARLT\", sans-serif;font-family:var(--ai-font-family);--ai-bg-card:hsl(var(--white));--ai-bg-surface:hsl(var(--gray-300));--ai-bg-input:hsl(var(--white));--ai-text-primary:hsl(var(--dark));--ai-text-secondary:hsl(var(--dark-100));--ai-text-muted:hsl(var(--gray));--ai-border-default:hsl(var(--gray-400));--ai-border-light:hsl(var(--gray-300));--ai-accent:hsl(var(--secondary));--ai-accent-dark:hsl(var(--primary));--ai-accent-text:hsl(var(--dark));--ai-user-bubble-bg:hsl(var(--gray-300));--ai-agent-bubble-bg:hsl(var(--white));--ai-warning-bg:hsl(var(--warning-100));--ai-warning-border:hsl(var(--warning));--ai-success:hsl(var(--success));--ai-success-text:hsl(var(--success));--ai-success-bg:hsl(var(--success-100));--ai-danger-text:hsl(var(--danger));--ai-danger-bg:hsl(var(--danger-100));--ai-danger-border:hsl(var(--danger-200));--ai-accent-bg:hsl(var(--secondary-100));--ai-focus-ring:hsl(var(--info));--ai-amber:hsl(var(--warning));--ai-scrollbar-thumb:rgba(0, 0, 0, 0.15);--ai-scrollbar-thumb-hover:rgba(0, 0, 0, 0.28);--ai-glow-gradient:linear-gradient(90deg, hsl(var(--dark-100)) 0%, hsl(var(--gray)) 50%, hsl(var(--dark-100)) 100%);--ai-input-glow:linear-gradient(90deg, #73F0EE 0%, #EBF1B1 10%, #A4FFE5 100%);--ai-shadow-sm:0px 1px 2px 0px hsl(var(--dark) / 0.05);--ai-shadow-inner:inset 0px 0px 3px 1px hsl(var(--dark) / 0.06);--ai-shadow-badge:0px 0px 2px 1px hsl(var(--dark) / 0.08);--ai-shadow-active:0px 4px 6px -1px hsl(var(--dark) / 0.08), 0px 2px 4px -1px hsl(var(--dark) / 0.06);--ai-shadow-float:0 8px 32px hsl(var(--dark) / 0.12), 0 2px 8px hsl(var(--dark) / 0.08);--ai-shadow-error:0 2px 8px hsl(var(--dark) / 0.15);--ai-shadow-watermark:drop-shadow(0 4px 6px hsl(var(--dark) / 0.05));--ai-hover-overlay:rgba(0, 0, 0, 0.06);--ai-input-focus-glow:0 0 10px 4px hsl(var(--secondary) / 0.4);--ai-font-family-mono:monospace;--ai-spacing-2xl:var(--Spacing-Sizes-2xl, 16px)}.dark{--ai-bg-card:hsl(var(--gray-100));--ai-bg-surface:hsl(var(--white-300));--ai-bg-input:hsl(var(--gray-100));--ai-text-primary:hsl(var(--dark));--ai-text-secondary:hsl(var(--dark-200));--ai-text-muted:hsl(var(--gray));--ai-border-default:hsl(var(--gray-400));--ai-border-light:hsl(var(--gray-300));--ai-accent:hsl(var(--secondary));--ai-accent-dark:hsl(var(--primary-500));--ai-accent-text:hsl(var(--primary-force));--ai-user-bubble-bg:hsl(var(--gray-400));--ai-agent-bubble-bg:hsl(var(--gray-100));--ai-warning-bg:hsl(var(--warning-100));--ai-warning-border:hsl(var(--warning));--ai-success:hsl(var(--success));--ai-success-text:hsl(var(--success));--ai-success-bg:hsl(var(--success-100));--ai-danger-text:hsl(var(--danger));--ai-danger-bg:hsl(var(--danger-100));--ai-danger-border:hsl(var(--danger-200));--ai-accent-bg:hsl(var(--secondary-100));--ai-focus-ring:hsl(var(--info));--ai-amber:hsl(var(--warning));--ai-scrollbar-thumb:rgba(255, 255, 255, 0.2);--ai-scrollbar-thumb-hover:rgba(255, 255, 255, 0.35);--ai-hover-overlay:rgba(255, 255, 255, 0.08);--ai-glow-gradient:linear-gradient(90deg, hsl(var(--gray)) 0%, hsl(var(--dark-300)) 50%, hsl(var(--gray)) 100%);--ai-input-glow:linear-gradient(to right, hsl(var(--secondary-400)), hsl(var(--secondary-100)) 10%, hsl(var(--secondary)))}";
 
 /*
  Stencil Client Platform v4.43.2 | MIT Licensed | https://stenciljs.com

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DLJcLHFH.js');
+var index = require('./index-BkNg07SW.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ai-chat-container.cjs",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"isMobile":[32]},null,{"position":[{"positionChanged":0}]}]]],["ai-message-input.cjs",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"inputValue":[32],"setInputValue":[64]}]]],["ai-voice-input.cjs",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"state":[32],"error":[32],"recordingDuration":[32]}]]],["ai-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header.cjs",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"]}]]],["ai-chat-message.cjs",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"steps":[1],"headerTitle":[1,"header-title"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-suggestion.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
+  return index.bootstrapLazy([["ai-message-input.cjs",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"maxLength":[2,"max-length"],"isRecording":[4,"is-recording"],"inputValue":[32],"showVoiceRecorder":[32],"isMultiline":[32],"setInputValue":[64]},null,{"isRecording":[{"onIsRecordingChange":0}]}]]],["ai-chat-container.cjs",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"theme":[1],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["ai-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header.cjs",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"],"statusIndicator":[1,"status-indicator"],"avatarError":[32]}]]],["ai-chat-message.cjs",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-conversation-list.cjs",[[513,"ai-conversation-list",{"items":[1],"activeId":[1,"active-id"],"loading":[4]}]]],["ai-conversation-summary.cjs",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"thinkingSubtext":[1,"thinking-subtext"],"steps":[16],"headerTitle":[1,"header-title"],"currentAgent":[1,"current-agent"],"showAgentBadges":[4,"show-agent-badges"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-route-decision.cjs",[[513,"ai-route-decision",{"selectedAgent":[1,"selected-agent"],"agentIcon":[1,"agent-icon"],"reason":[1],"confidence":[2],"detectedLanguage":[1,"detected-language"],"expanded":[1028],"_expanded":[32]}]]],["ai-suggestion.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input.cjs",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"errorText":[1,"error-text"],"waveformColor":[1,"waveform-color"],"state":[32],"error":[32],"recordingDuration":[32],"submitPulse":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ui-ai-kit.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLJcLHFH.js');
+var index = require('./index-BkNg07SW.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["ai-chat-container.cjs",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"isMobile":[32]},null,{"position":[{"positionChanged":0}]}]]],["ai-message-input.cjs",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"inputValue":[32],"setInputValue":[64]}]]],["ai-voice-input.cjs",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"state":[32],"error":[32],"recordingDuration":[32]}]]],["ai-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header.cjs",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"]}]]],["ai-chat-message.cjs",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"steps":[1],"headerTitle":[1,"header-title"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-suggestion.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
+  return index.bootstrapLazy([["ai-message-input.cjs",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"maxLength":[2,"max-length"],"isRecording":[4,"is-recording"],"inputValue":[32],"showVoiceRecorder":[32],"isMultiline":[32],"setInputValue":[64]},null,{"isRecording":[{"onIsRecordingChange":0}]}]]],["ai-chat-container.cjs",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"theme":[1],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["ai-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header.cjs",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"],"statusIndicator":[1,"status-indicator"],"avatarError":[32]}]]],["ai-chat-message.cjs",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-conversation-list.cjs",[[513,"ai-conversation-list",{"items":[1],"activeId":[1,"active-id"],"loading":[4]}]]],["ai-conversation-summary.cjs",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"thinkingSubtext":[1,"thinking-subtext"],"steps":[16],"headerTitle":[1,"header-title"],"currentAgent":[1,"current-agent"],"showAgentBadges":[4,"show-agent-badges"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-route-decision.cjs",[[513,"ai-route-decision",{"selectedAgent":[1,"selected-agent"],"agentIcon":[1,"agent-icon"],"reason":[1],"confidence":[2],"detectedLanguage":[1,"detected-language"],"expanded":[1028],"_expanded":[32]}]]],["ai-suggestion.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input.cjs",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"errorText":[1,"error-text"],"waveformColor":[1,"waveform-color"],"state":[32],"error":[32],"recordingDuration":[32],"submitPulse":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -6,9 +6,12 @@
     "components/ai-chat-container/ai-chat-container.js",
     "components/ai-chat-header/ai-chat-header.js",
     "components/ai-chat-message/ai-chat-message.js",
+    "components/ai-conversation-list/ai-conversation-list.js",
+    "components/ai-conversation-summary/ai-conversation-summary.js",
     "components/ai-icon/ai-icon.js",
     "components/ai-link/ai-link.js",
     "components/ai-message-input/ai-message-input.js",
+    "components/ai-route-decision/ai-route-decision.js",
     "components/ai-suggestion/ai-suggestion.js",
     "components/ai-voice-input/ai-voice-input.js"
   ],

package/dist/collection/components/ai-card/ai-card.css

@@ -1,32 +1,29 @@
 /* ─── Custom Properties ──────────────────────────────────────────────────── */
 :host {
-  --ai-card-bg:      var(--ai-bg-card, #ffffff);
-  --ai-card-border:  1px solid var(--ai-border-default, #eeeeee);
+  --ai-card-border:  1px solid var(--ai-border-default);
   --ai-card-radius:  16px;
   --ai-card-padding: 16px;
   --ai-card-gap:     12px;
-  --ai-card-shadow:  0px 1px 2px 0px rgba(18, 18, 23, 0.05);
-  --ai-text-color:   var(--ai-text-primary, #333333);
+  --ai-card-shadow:  var(--ai-shadow-sm);
   display: block;
-  direction: rtl;
 }
 
 /* ─── Card Shell ─────────────────────────────────────────────────────────── */
 .card {
-  background: var(--ai-card-bg);
+  background: var(--ai-bg-card);
   border: var(--ai-card-border);
   border-radius: var(--ai-card-radius);
   padding: var(--ai-card-padding);
   box-shadow: var(--ai-card-shadow);
   box-sizing: border-box;
   overflow: hidden;
-    color: var(--ai-text-color);
+  color: var(--ai-text-primary);
   width: 100%;
   /* Inner layout — flex column so slotted children stack with consistent gap */
   display: flex;
   flex-direction: column;
   gap: var(--ai-card-gap);
-  text-align: right;
+  text-align: start;
   font-size: 14px;
   line-height: 20px;
 }

package/dist/collection/components/ai-chat-container/ai-chat-container.css

@@ -5,13 +5,13 @@
 /* ── Base ─────────────────────────────────────────────────────────────────── */
 
 .chat-container {
-  font-family: var(--ai-font-family, 'PingARLT', sans-serif);
+  font-family: var(--ai-font-family);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;
-  background-color: var(--ai-container-bg, var(--ai-bg-card, white));
-  border: 1px solid var(--border-default, var(--ai-border-default, #eee));
+  background-color: var(--ai-container-bg, var(--ai-bg-card));
+  border: 1px solid var(--ai-border-default);
   z-index: 50;
   box-sizing: border-box;
 }
@@ -23,7 +23,8 @@
   overflow-y: auto;
   min-height: 0;
   scrollbar-width: thin;
-  scrollbar-color: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15)) transparent;
+  padding: var(--ai-spacing-2xl, 16px);
+  scrollbar-color: var(--ai-scrollbar-thumb) transparent;
 }
 
 .messages-area::-webkit-scrollbar {
@@ -35,12 +36,12 @@
 }
 
 .messages-area::-webkit-scrollbar-thumb {
-  background: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15));
+  background: var(--ai-scrollbar-thumb);
   border-radius: 99px;
 }
 
 .messages-area::-webkit-scrollbar-thumb:hover {
-  background: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.28));
+  background: var(--ai-scrollbar-thumb-hover);
 }
 
 /* ── Sticky modes (left / right) ─────────────────────────────────────────── */
@@ -72,17 +73,19 @@
 
 .chat-container.float {
   position: fixed;
-  top: 24px;
-  left: 24px;
   border-radius: 16px;
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.12),
-    0 2px 8px rgba(0, 0, 0, 0.08);
-  display: none;
+  box-shadow: var(--ai-shadow-float);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.95);
+  transform-origin: bottom left;
+  transition: opacity 200ms ease, transform 200ms ease;
 }
 
 .chat-container.float.open {
-  display: flex;
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
 }
 
 /* ── Watermark (empty / idle state) ──────────────────────────────────────── */
@@ -97,7 +100,7 @@
 
 .watermark ai-icon {
   opacity: 0.8;
-  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
+  filter: var(--ai-shadow-watermark);
 }
 
 /* ── Mobile ──────────────────────────────────────────────────────────────── */