@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/chatbot/chatbot-audio.controller.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface AudioRecordingState {
+    active: boolean;
+    duration: string;
+    bars: number[];
+}
+export interface AudioRecordResult {
+    blob: Blob;
+    mimeType: string;
+    duration: string;
+}
+export declare class ChatbotAudioController implements ReactiveController {
+    host: ReactiveControllerHost;
+    state: AudioRecordingState;
+    private _mediaRecorder;
+    private _audioChunks;
+    private _waveformSamples;
+    private _analyser;
+    private _timer;
+    private _animFrame;
+    private _startTime;
+    private _stopResolve;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    start(): Promise<void>;
+    cancel(): void;
+    stop(): Promise<AudioRecordResult | null>;
+}
+//# sourceMappingURL=chatbot-audio.controller.d.ts.map

package/dist/src/components/chatbot/chatbot-audio.controller.js

@@ -0,0 +1,160 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const INITIAL_STATE = { active: false, duration: '00:00', bars: [] };
+export class ChatbotAudioController {
+    constructor(host) {
+        this.state = Object.assign({}, INITIAL_STATE);
+        this._mediaRecorder = null;
+        this._audioChunks = [];
+        this._waveformSamples = [];
+        this._analyser = null;
+        this._timer = null;
+        this._animFrame = 0;
+        this._startTime = 0;
+        this._stopResolve = null;
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() { this.cancel(); }
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
+                this._audioChunks = [];
+                this._waveformSamples = [];
+                // Pick best supported mime type (Safari only supports mp4/aac)
+                const mimeType = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/aac', '']
+                    .find(t => !t || MediaRecorder.isTypeSupported(t)) || '';
+                this._mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+                // Web Audio analyser for live waveform
+                const audioCtx = new AudioContext();
+                if (audioCtx.state === 'suspended')
+                    yield audioCtx.resume();
+                const source = audioCtx.createMediaStreamSource(stream);
+                this._analyser = audioCtx.createAnalyser();
+                this._analyser.fftSize = 256;
+                this._analyser.smoothingTimeConstant = 0.3;
+                source.connect(this._analyser);
+                this._mediaRecorder.ondataavailable = (e) => {
+                    if (e.data.size > 0)
+                        this._audioChunks.push(e.data);
+                };
+                this._mediaRecorder.onstop = () => {
+                    var _a;
+                    stream.getTracks().forEach(t => t.stop());
+                    audioCtx.close().catch(() => { });
+                    if (this._timer)
+                        clearInterval(this._timer);
+                    cancelAnimationFrame(this._animFrame);
+                    this._analyser = null;
+                    (_a = this._stopResolve) === null || _a === void 0 ? void 0 : _a.call(this, [...this._audioChunks]);
+                    this._stopResolve = null;
+                };
+                this._mediaRecorder.start(100);
+                this._startTime = Date.now();
+                this.state = { active: true, duration: '00:00', bars: [] };
+                this.host.requestUpdate();
+                // Duration timer
+                this._timer = setInterval(() => {
+                    const elapsed = Math.floor((Date.now() - this._startTime) / 1000);
+                    const m = Math.floor(elapsed / 60).toString().padStart(2, '0');
+                    const s = (elapsed % 60).toString().padStart(2, '0');
+                    this.state = Object.assign(Object.assign({}, this.state), { duration: `${m}:${s}` });
+                    this.host.requestUpdate();
+                }, 500);
+                // Live waveform at ~12fps
+                let lastSampleTime = 0;
+                const sampleWaveform = () => {
+                    if (!this._analyser || !this.state.active)
+                        return;
+                    const now = performance.now();
+                    if (now - lastSampleTime > 80) {
+                        lastSampleTime = now;
+                        const bufLen = this._analyser.frequencyBinCount;
+                        const data = new Uint8Array(bufLen);
+                        this._analyser.getByteFrequencyData(data);
+                        let avg = data.reduce((sum, v) => sum + v, 0) / bufLen;
+                        if (avg < 1) {
+                            // Safari fallback: use time domain amplitude
+                            this._analyser.getByteTimeDomainData(data);
+                            let peak = 0;
+                            for (let j = 0; j < bufLen; j++) {
+                                const v = Math.abs(data[j] - 128);
+                                if (v > peak)
+                                    peak = v;
+                            }
+                            avg = peak;
+                        }
+                        const normalized = Math.min(1, avg / 128);
+                        this._waveformSamples.push(normalized);
+                        const liveBars = this._waveformSamples.slice(-40).map(v => Math.max(0.08, v));
+                        this.state = Object.assign(Object.assign({}, this.state), { bars: liveBars });
+                        this.host.requestUpdate();
+                    }
+                    this._animFrame = requestAnimationFrame(sampleWaveform);
+                };
+                this._animFrame = requestAnimationFrame(sampleWaveform);
+            }
+            catch (_a) {
+                console.error('[ChatbotAudio] Mic access denied');
+            }
+        });
+    }
+    cancel() {
+        var _a;
+        if (((_a = this._mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
+            this._stopResolve = null;
+            this._mediaRecorder.stop();
+        }
+        this._audioChunks = [];
+        this._waveformSamples = [];
+        if (this._timer)
+            clearInterval(this._timer);
+        cancelAnimationFrame(this._animFrame);
+        this._analyser = null;
+        this.state = Object.assign({}, INITIAL_STATE);
+        this.host.requestUpdate();
+    }
+    stop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!this._mediaRecorder || this._mediaRecorder.state !== 'recording')
+                return null;
+            const duration = this.state.duration;
+            const chunks = yield new Promise((resolve) => {
+                this._stopResolve = resolve;
+                this._mediaRecorder.stop();
+            });
+            // 200ms grace for final chunk flush
+            yield new Promise(r => setTimeout(r, 200));
+            this.state = Object.assign({}, INITIAL_STATE);
+            this.host.requestUpdate();
+            const recMime = ((_a = this._mediaRecorder) === null || _a === void 0 ? void 0 : _a.mimeType) || 'audio/webm';
+            const rawBlob = new Blob(chunks, { type: recMime });
+            this._audioChunks = [];
+            this._waveformSamples = [];
+            try {
+                const { compressToOpus } = yield import('./audio-compress.js');
+                const { blob, mimeType } = yield compressToOpus(rawBlob, recMime);
+                return { blob, mimeType, duration };
+            }
+            catch (_b) {
+                return { blob: rawBlob, mimeType: recMime, duration };
+            }
+        });
+    }
+}
+//# sourceMappingURL=chatbot-audio.controller.js.map

package/dist/src/components/chatbot/chatbot.component.d.ts

@@ -100,6 +100,13 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     moduleSelectionLabel: string;
     /** Enable artifact mode: code blocks collapse into cards with a preview panel */
     enableArtifacts: boolean;
+    /** Show the mic button to record a voice message */
+    showAudioButton: boolean;
+    /**
+     * Callback fired after recording stops and the blob is compressed.
+     * Consumer is responsible for upload / transcription.
+     */
+    onAudioRecorded?: (blob: Blob, mimeType: string, duration: string, mode: 'transcribe' | 'message') => void;
     /** Optional custom renderer for artifact panel content area. Header remains default. */
     renderArtifactContent?: (artifact: ChatbotArtifact) => TemplateResult;
     /**
@@ -121,6 +128,8 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     private isFilePreviewModalOpen;
     private previewFile;
     private controllerUnsubscribes;
+    private _audio;
+    private _audioMode;
     private _artifactResizeBound;
     private _artifactResizeCleanup?;
     private _hashChangeHandler?;
@@ -161,6 +170,9 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
      * Focus the input element (called by controller via UI callback)
      */
     focusInput(): void;
+    private handleAudioStart;
+    private handleAudioCancel;
+    private handleAudioSend;
     private handleKeyDown;
     private handleSendMessage;
     private handleStopQuery;

package/dist/src/components/chatbot/chatbot.component.js

@@ -27,6 +27,7 @@ import styles from './chatbot.style.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { ChatbotSender, ChatbotSize, ChatbotVariant, ChatbotLoadingType, EMPTY_STRING } from './chatbot.types.js';
 import { renderChatbotMain, renderFilePreviewModal } from './templates/index.js';
+import { ChatbotAudioController } from './chatbot-audio.controller.js';
 /**
  * Enhanced chatbot component powered by ChatbotCoreController.
  *
@@ -118,6 +119,8 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this.moduleSelectionLabel = msg('Select Modules');
         /** Enable artifact mode: code blocks collapse into cards with a preview panel */
         this.enableArtifacts = false;
+        /** Show the mic button to record a voice message */
+        this.showAudioButton = false;
         this.focused = false;
         this.isArtifactPanelOpen = false;
         this.selectedArtifact = null;
@@ -131,6 +134,8 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this.previewFile = null;
         // Keep track of controller event unsubscriptions
         this.controllerUnsubscribes = [];
+        this._audio = new ChatbotAudioController(this);
+        this._audioMode = 'message';
         // Artifact panel resize state
         this._artifactResizeBound = false;
         this.toggleThreadSidebar = () => {
@@ -439,7 +444,10 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 moduleOptions: this.moduleSelectOptions,
                 selectedModules: this.selectedModules,
                 moduleSelectionLabel: this.moduleSelectionLabel,
-                renderModuleDisplay: this.renderModuleSelectedDisplay.bind(this)
+                renderModuleDisplay: this.renderModuleSelectedDisplay.bind(this),
+                showAudioButton: this.showAudioButton,
+                audioRecording: this._audio.state,
+                audioMode: this._audioMode,
             },
             enableThreads: this.showThreads,
             enableThreadCreation: this.enableThreadCreation,
@@ -487,7 +495,10 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 onFileDropdownClick: this.handleFileDropdownClick.bind(this),
                 onModuleChange: this.handleModuleSelectionChange.bind(this),
                 onFileRemove: this.handleFileRemove.bind(this),
-                onFileClick: this.handleFilePreview.bind(this)
+                onFileClick: this.handleFilePreview.bind(this),
+                onAudioStart: this.handleAudioStart.bind(this),
+                onAudioCancel: this.handleAudioCancel.bind(this),
+                onAudioSend: this.handleAudioSend.bind(this),
             },
             threadSidebar: this.showThreads ? {
                 onCreateNew: () => { var _a; (_a = this.controller) === null || _a === void 0 ? void 0 : _a.createThread('New Chat'); },
@@ -602,6 +613,28 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
             inputElement.focus();
         }
     }
+    handleAudioStart(mode) {
+        this._audioMode = mode;
+        this._audio.start();
+    }
+    handleAudioCancel() {
+        this._audio.cancel();
+    }
+    handleAudioSend() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const result = yield this._audio.stop();
+            if (!result)
+                return;
+            const mode = this._audioMode;
+            (_a = this.onAudioRecorded) === null || _a === void 0 ? void 0 : _a.call(this, result.blob, result.mimeType, result.duration, mode);
+            this.dispatchEvent(new CustomEvent('nr-chatbot-audio-recorded', {
+                detail: { blob: result.blob, mimeType: result.mimeType, duration: result.duration, mode },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
     handleKeyDown(e) {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
@@ -1045,6 +1078,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NrChatbotElement.prototype, "enableArtifacts", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-audio-button' })
+], NrChatbotElement.prototype, "showAudioButton", void 0);
+__decorate([
+    property({ type: Function })
+], NrChatbotElement.prototype, "onAudioRecorded", void 0);
 __decorate([
     property({ type: Function })
 ], NrChatbotElement.prototype, "renderArtifactContent", void 0);

package/dist/src/components/chatbot/chatbot.style.js

@@ -1262,6 +1262,147 @@ export default css `
     pointer-events: none;
   }
 
+  /* ── Audio mic buttons ─────────────────────────────────────────── */
+  .audio-mic-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--chatbot-text-secondary, #8c8ca8);
+    cursor: pointer;
+    transition: background 150ms, color 150ms;
+    flex-shrink: 0;
+  }
+
+  .audio-mic-btn:hover {
+    background: var(--chatbot-input-bg, #f5f5f8);
+    color: var(--chatbot-accent, #7c3aed);
+  }
+
+  .audio-mic-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Small badge icon in the bottom-right corner of the mic button */
+  .audio-mic-badge {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: var(--chatbot-bg, #fff);
+    border-radius: 3px;
+    pointer-events: none;
+  }
+
+  /* ── Recording bar (replaces input row while active) ───────────── */
+  .audio-recording-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    min-height: 52px;
+  }
+
+  .audio-rec-cancel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: #ef4444;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 150ms;
+  }
+
+  .audio-rec-cancel:hover { background: #fef2f2; }
+
+  .audio-rec-indicator {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .audio-rec-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #ef4444;
+    flex-shrink: 0;
+    animation: audioRecPulse 1s ease-in-out infinite;
+  }
+
+  @keyframes audioRecPulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50%       { opacity: 0.5; transform: scale(0.85); }
+  }
+
+  .audio-rec-wave {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 1.5px;
+    height: 28px;
+    overflow: hidden;
+  }
+
+  .audio-rec-bar {
+    width: 3px;
+    min-height: 3px;
+    border-radius: 1.5px;
+    background: #ef4444;
+    opacity: 0.75;
+    transition: height 80ms ease;
+  }
+
+  .audio-rec-time {
+    font-size: 14px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--chatbot-text, #0f0f3c);
+    flex-shrink: 0;
+    min-width: 38px;
+  }
+
+  .audio-rec-mode-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--chatbot-text-secondary, #8c8ca8);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .audio-rec-send {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border: none;
+    border-radius: 50%;
+    background: var(--chatbot-accent, #7c3aed);
+    color: #fff;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 150ms;
+  }
+
+  .audio-rec-send:hover { background: #6d28d9; }
+
+  /* Transcribe mode: green tint to distinguish from send */
+  .audio-rec-send--transcribe { background: #059669; }
+  .audio-rec-send--transcribe:hover { background: #047857; }
+
   /* RTL support */
   :host([dir='rtl']) .chat-container--with-threads {
     grid-template-columns: 1fr 280px;

package/dist/src/components/chatbot/chatbot.types.d.ts

@@ -227,6 +227,14 @@ export interface ChatbotArtifact {
     /** Index of this artifact within its message (0-based) */
     index: number;
 }
+/**
+ * Audio recording state (used by ChatbotAudioController)
+ */
+export interface ChatbotAudioRecordingState {
+    active: boolean;
+    duration: string;
+    bars: number[];
+}
 /**
  * Constants
  */

package/dist/src/components/chatbot/controllers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { ChatbotScrollController } from './scroll.controller.js';
+export type { ChatbotScrollControllerHost } from './scroll.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/chatbot/controllers/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Scroll controller
+export { ChatbotScrollController } from './scroll.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/chatbot/controllers/scroll.controller.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { ChatbotMessage } from '../chatbot.types.js';
+/**
+ * Interface for chatbot scroll controller host
+ */
+export interface ChatbotScrollControllerHost extends ReactiveControllerHost {
+    messages: ChatbotMessage[];
+    autoScroll: boolean;
+    shadowRoot: ShadowRoot | null;
+}
+/**
+ * Controller for managing chatbot scroll behavior
+ * Handles scrolling when new messages are added or updated
+ */
+export declare class ChatbotScrollController implements ReactiveController {
+    private host;
+    constructor(host: ChatbotScrollControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle messages update and scroll to bottom
+     */
+    handleMessagesUpdate(): void;
+    /**
+     * Scroll to bottom of messages container
+     */
+    scrollToBottom(): void;
+}
+//# sourceMappingURL=scroll.controller.d.ts.map

package/dist/src/components/chatbot/controllers/scroll.controller.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Controller for managing chatbot scroll behavior
+ * Handles scrolling when new messages are added or updated
+ */
+export class ChatbotScrollController {
+    constructor(host) {
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() { }
+    /**
+     * Handle messages update and scroll to bottom
+     */
+    handleMessagesUpdate() {
+        var _a;
+        if (!this.host.autoScroll)
+            return;
+        const messagesContainer = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.messages');
+        if (!messagesContainer)
+            return;
+        // Simple scroll to bottom for any message update
+        this.scrollToBottom();
+    }
+    /**
+     * Scroll to bottom of messages container
+     */
+    scrollToBottom() {
+        var _a;
+        const messagesContainer = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.messages');
+        if (!messagesContainer)
+            return;
+        requestAnimationFrame(() => {
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        });
+    }
+}
+//# sourceMappingURL=scroll.controller.js.map