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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-B0yIzgh4.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 {
@@ -9,16 +9,22 @@ const VoiceInput = class {
         this.audioRecorded = createEvent(this, "audioRecorded");
         this.recordingCancel = createEvent(this, "recordingCancel");
     }
+    get el() { return 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 */
@@ -36,7 +42,7 @@ const VoiceInput = class {
     animationFrameId = 0;
     prevHeights = [];
     componentDidLoad() {
-        if (this.autoStart) {
+        if (this.autoStart && !this.disabled) {
             this.startRecording();
         }
     }
@@ -72,6 +78,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;
@@ -110,10 +121,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();
@@ -121,27 +132,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;
@@ -171,21 +196,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;
@@ -208,9 +263,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();
             }
         };
@@ -223,7 +277,7 @@ const VoiceInput = class {
     };
     render() {
         const remaining = MAX_RECORDING_TIME - this.recordingDuration;
-        return (h(Host, { key: 'c8bfc86b0c3951460ec23b66e6e018d25c8fa950' }, h("div", { key: '114eae0be8e5ebcbda11cdff7fd0714221c0e27a', class: "wrapper" }, this.state === 'recording' && h("div", { key: '203008d77352bd2fda62a2f7728f061ea4b1ea4f', class: "glow", "aria-hidden": "true" }), h("div", { key: 'a92db7f67500d731faca57e1634aec4a383a9ab7', class: "input-container" }, this.state === 'idle' ? (h("div", { class: "recording-row" }, h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, h("ai-icon", { name: "mic", size: 16 })), this.error && (h("div", { class: "error-message", role: "alert" }, this.error)))) : (h("div", { class: "recording-row" }, h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, h("ai-icon", { name: "cancel", size: 14 })), h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", width: "260", height: "32" }), h("button", { type: "button", class: "submit-button", onClick: this.stopRecording, "aria-label": "Send" }, h("ai-icon", { name: "arrow-up", size: 14 }))))))));
+        return (h(Host, { key: '225036c9c966084bcbdef9760d08cb677c985cc1' }, h("div", { key: '3cb3841dcb8a8e283cc325a200073ba3d540d7f8', class: "wrapper" }, h("div", { key: '1e71acf6ceb25d50d4131bf1a8021837756d0a41', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), h("div", { key: 'c96027342fdf08edc990cae9f25ebb087dd33612', class: "input-container" }, this.state === 'idle' ? (h("div", { class: "recording-row" }, h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, h("ai-icon", { name: "mic", size: 16 })), this.error && (h("div", { class: "error-message", role: "alert" }, this.error)))) : (h("div", { class: "recording-row" }, h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, h("ai-icon", { name: "cancel", size: 14 })), h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, h("ai-icon", { name: "arrow-up", size: 14 }))))))));
     }
 };
 VoiceInput.style = aiVoiceInputCss();

package/dist/esm/{icon-registry-DYv5ef4M.js → icon-registry-SJZ6Ujn9.js}

@@ -75,6 +75,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"/>',
+    },
 };
 
 export { iconRegistry as i };

package/dist/esm/{index-7hrZ8FOQ.js → index-B0yIzgh4.js}

@@ -2,7 +2,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/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-7hrZ8FOQ.js';
-export { s as setNonce } from './index-7hrZ8FOQ.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-B0yIzgh4.js';
+export { s as setNonce } from './index-B0yIzgh4.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ai-chat-container",[[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",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"inputValue":[32],"setInputValue":[64]}]]],["ai-voice-input",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"state":[32],"error":[32],"recordingDuration":[32]}]]],["ai-card",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header",[[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",[[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",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"steps":[1],"headerTitle":[1,"header-title"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-suggestion",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
+  return bootstrapLazy([["ai-message-input",[[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",[[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",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header",[[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",[[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",[[513,"ai-conversation-list",{"items":[1],"activeId":[1,"active-id"],"loading":[4]}]]],["ai-conversation-summary",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[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",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-route-decision",[[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",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input",[[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);
 };
 
 export { defineCustomElements };

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-7hrZ8FOQ.js';
-export { s as setNonce } from './index-7hrZ8FOQ.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-B0yIzgh4.js';
+export { s as setNonce } from './index-B0yIzgh4.js';
 
 /*
  Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ai-chat-container",[[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",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"inputValue":[32],"setInputValue":[64]}]]],["ai-voice-input",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"state":[32],"error":[32],"recordingDuration":[32]}]]],["ai-card",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header",[[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",[[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",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"steps":[1],"headerTitle":[1,"header-title"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-suggestion",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
+  return bootstrapLazy([["ai-message-input",[[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",[[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",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header",[[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",[[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",[[513,"ai-conversation-list",{"items":[1],"activeId":[1,"active-id"],"loading":[4]}]]],["ai-conversation-summary",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[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",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-route-decision",[[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",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input",[[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);
 });

package/dist/types/components/ai-chat-container/ai-chat-container.d.ts

@@ -12,17 +12,27 @@ export declare class ChatContainer {
     showWatermark: boolean;
     /** Height of the panel when position='float' */
     floatHeight: string;
+    /** Color theme for the panel */
+    theme: 'light' | 'dark' | 'auto';
     isMobile: boolean;
+    floatLeft: string;
+    floatTop: string;
     private containerRef;
+    private messagesAreaRef;
     private dragState;
-    private resizeObserver;
+    private dragListener;
+    constructor();
     componentWillLoad(): void;
     componentDidLoad(): void;
+    isOpenChanged(newVal: boolean): void;
     positionChanged(newVal: string): void;
     disconnectedCallback(): void;
+    /** Programmatically scroll the messages area to the bottom */
+    scrollToBottom(): Promise<void>;
     private checkMobile;
     private setupDrag;
     private getContainerClasses;
     private getContainerStyle;
+    private isDark;
     render(): any;
 }

package/dist/types/components/ai-chat-header/ai-chat-header.d.ts

@@ -13,14 +13,17 @@ export declare class AiChatHeader {
     /** Human mode: show the back button */
     showBack: boolean;
     isDraggable: boolean;
+    /** Human mode: status indicator variant */
+    statusIndicator: 'online' | 'offline' | 'busy' | 'away';
+    private avatarError;
     /** Cancel / close button */
     closeClick: EventEmitter<void>;
     /** Pencil-edit button (agent mode) */
     editClick: EventEmitter<void>;
     /** Title / chevron click → open conversation list (agent mode) */
     dropdownClick: EventEmitter<void>;
-    /** Chevron-down button (human mode) */
-    moreClick: EventEmitter<void>;
+    /** More options button */
+    positionClick: EventEmitter<void>;
     /** Back-arrow button (human mode) */
     backClick: EventEmitter<void>;
     /**
@@ -32,6 +35,8 @@ export declare class AiChatHeader {
         clientY: number;
     }>;
     private renderIcon;
+    private renderAvatar;
+    private renderDragBtn;
     private renderAgentMode;
     private renderHumanMode;
     render(): any;

package/dist/types/components/ai-conversation-list/ai-conversation-list.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface ConversationItem {
+    id: string;
+    title: string;
+    preview: string;
+    timestamp: string;
+    rating?: 1 | 2 | 3 | 4 | 5 | null;
+}
+export declare class AiConversationList {
+    /** JSON array of ConversationItem */
+    items: string;
+    /** ID of the currently active conversation */
+    activeId: string;
+    /** Show skeleton loading state */
+    loading: boolean;
+    conversationSelect: EventEmitter<string>;
+    conversationDelete: EventEmitter<string>;
+    private renderIcon;
+    private getItems;
+    private formatRelativeTime;
+    private renderRatingDots;
+    private renderSkeleton;
+    render(): any;
+}

package/dist/types/components/ai-conversation-summary/ai-conversation-summary.d.ts

@@ -0,0 +1,12 @@
+export declare class AiConversationSummary {
+    /** Card heading */
+    conversation: string;
+    /** Summary body text */
+    summary: string;
+    /** Total message count shown as a badge */
+    messageCount: number;
+    /** Conversation language label */
+    language: string;
+    private renderIcon;
+    render(): any;
+}

package/dist/types/components/ai-loading/ai-loading.d.ts

@@ -1,19 +1,25 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface LoadingStep {
-    id: string;
-    title: string;
-    status: 'pending' | 'executing' | 'completed' | 'failed';
-    agent?: string;
+    step: number;
+    action: string;
+    reason?: string;
+    status?: 'pending' | 'executing' | 'completed' | 'failed';
 }
 export declare class AiLoading {
     /** Main mode switch */
     mode: 'thinking' | 'steps';
     /** Thinking mode status text */
     statusText: string;
+    /** Secondary shimmer line in thinking mode (e.g. live node name) */
+    thinkingSubtext: string;
     /** Steps as JSON string array of LoadingStep */
-    steps: string;
+    steps: LoadingStep[];
     /** Steps mode title */
     headerTitle: string;
+    /** Agent name shown in header alongside sparkle */
+    currentAgent: string;
+    /** Show per-step agent chips */
+    showAgentBadges: boolean;
     /** Steps mode expand state */
     expanded: boolean;
     /** Whether steps card is collapsible */
@@ -25,9 +31,9 @@ export declare class AiLoading {
     private renderIcon;
     private renderSparkleAvatar;
     private renderStepBadge;
-    private getStepsList;
     private handleToggle;
     private renderThinkingMode;
+    private renderPlanningShimmer;
     private renderStepsMode;
     render(): any;
 }

package/dist/types/components/ai-message-input/ai-message-input.d.ts

@@ -7,16 +7,30 @@ export declare class MessageInput {
     disabled: boolean;
     /** Whether to show the voice recording button */
     showVoiceButton: boolean;
+    /** Maximum characters allowed */
+    maxLength: number;
+    /** External prop to show/hide the inline voice recorder */
+    isRecording: boolean;
     inputValue: string;
+    showVoiceRecorder: boolean;
+    isMultiline: boolean;
     private textareaRef;
     /** Event emitted when a message is sent */
     sendMessage: EventEmitter<string>;
-    /** Event emitted when the voice button is clicked — caller controls rendering the voice recorder */
-    voiceButtonClick: EventEmitter<void>;
+    /** Event emitted when voice recording is complete and audio is ready */
+    voiceAudioReady: EventEmitter<{
+        blob: Blob;
+        duration: number;
+    }>;
+    onIsRecordingChange(newVal: boolean): void;
     /** Set the textarea value programmatically (e.g. after speech-to-text transcription) */
     setInputValue(value: string): Promise<void>;
+    private updateHeight;
     private handleSendMessage;
-    private handleKeyPress;
+    private handleKeyDown;
+    private handleVoiceClick;
+    private handleAudioRecorded;
+    private handleRecordingCancel;
     private handleInputChange;
     render(): any;
 }

package/dist/types/components/ai-route-decision/ai-route-decision.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class AiRouteDecision {
+    /** Selected agent name */
+    selectedAgent: string;
+    /** Agent icon — emoji or short text displayed before the agent name */
+    agentIcon: string;
+    /** Reason for routing decision (shown when expanded) */
+    reason: string;
+    /** Routing confidence percentage 0–100 */
+    confidence: number;
+    /** Detected language label (shown when expanded) */
+    detectedLanguage: string;
+    /** Initial expanded state */
+    expanded: boolean;
+    private _expanded;
+    routeExpand: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    private renderIcon;
+    private handleToggle;
+    render(): any;
+}

package/dist/types/components/ai-voice-input/ai-voice-input.d.ts

@@ -1,16 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 type RecordingState = 'idle' | 'recording';
 export declare class VoiceInput {
+    el: HTMLElement;
     /** Whether the voice input is disabled */
     disabled: boolean;
     /** Whether to show the waveform animation */
     showWaveform: boolean;
     /** Whether to auto-start recording on mount */
     autoStart: boolean;
+    /** Error text to display on mic access failure. Defaults to Arabic; falls back to English when document lang is 'en' */
+    errorText: string;
+    /** Waveform bar color. Falls back to --ai-waveform-color CSS var, then #9ca3af */
+    waveformColor: string;
     /** Internal state */
     state: RecordingState;
     error: string | null;
     recordingDuration: number;
+    submitPulse: boolean;
     /** Event emitted when audio blob is ready */
     audioRecorded: EventEmitter<{
         blob: Blob;
@@ -32,6 +38,7 @@ export declare class VoiceInput {
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private cleanup;
+    private getErrorText;
     private startRecording;
     private setupMediaRecorder;
     private stopRecording;