@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/chatbot/templates/input-box.template.js

@@ -0,0 +1,317 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { msg } from '@lit/localize';
+/**
+ * Renders context tags for uploaded files with hover preview
+ */
+function renderContextTags(files, onRemove, onFileClick) {
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    };
+    const getFileIcon = (mimeType) => {
+        if (mimeType.startsWith('image/'))
+            return 'image';
+        if (mimeType.startsWith('video/'))
+            return 'video';
+        if (mimeType.startsWith('audio/'))
+            return 'music';
+        if (mimeType === 'application/pdf')
+            return 'file-pdf';
+        if (mimeType.startsWith('text/'))
+            return 'file-text';
+        return 'file';
+    };
+    const isImage = (mimeType) => mimeType.startsWith('image/');
+    return html `
+    <div class="context-tags-row" part="context-tags">
+      ${repeat(files, f => f.id, f => html `
+        <nr-dropdown 
+          trigger="hover" 
+          placement="top"
+          size="small"
+          class="file-preview-dropdown"
+        >
+          <nr-tag 
+            slot="trigger"
+            class="context-tag"
+            size="small"
+            closable
+            @click=${() => onFileClick === null || onFileClick === void 0 ? void 0 : onFileClick(f)}
+            @nr-tag-close=${() => onRemove(f.id)}
+            style="cursor: pointer;"
+          >${f.name}</nr-tag>
+          
+          <div slot="content" class="file-preview-content">
+            ${isImage(f.mimeType) && (f.url || f.previewUrl) ? html `
+              <img 
+                src="${f.previewUrl || f.url}" 
+                alt="${f.name}"
+                class="file-preview-image"
+              />
+            ` : html `
+              <nr-icon 
+                .name=${getFileIcon(f.mimeType)}
+                size="large"
+                class="file-preview-icon"
+              ></nr-icon>
+            `}
+            <div class="file-preview-info">
+              <div class="file-preview-name" title="${f.name}">${f.name}</div>
+              <div class="file-preview-details">
+                <span>${formatFileSize(f.size)}</span>
+              </div>
+            </div>
+          </div>
+        </nr-dropdown>
+      `)}
+    </div>
+  `;
+}
+/**
+ * Renders file upload button
+ */
+function renderFileUploadButton(data, handlers) {
+    return html `
+    <nr-dropdown
+      .items=${data.fileUploadItems}
+      trigger="click"
+      placement="top-start"
+      size="small"
+      auto-close
+      ?disabled=${data.disabled}
+      @nr-dropdown-item-click=${handlers.onFileDropdownClick}
+    >
+      <nr-button 
+        slot="trigger"
+        part="file-button"
+        type="default"
+        size="small"
+        .icon=${["upload"]}
+        ?disabled=${data.disabled}
+        aria-label="${msg('Attach files')}"
+        title="${msg('Attach files')}"
+      >
+        Attach
+      </nr-button>
+    </nr-dropdown>
+  `;
+}
+/**
+ * Renders module selector
+ */
+function renderModuleSelector(data, handlers) {
+    return html `
+    <nr-select
+      .options=${data.moduleOptions}
+      .value=${data.selectedModules}
+      multiple
+      placeholder="${data.moduleSelectionLabel}"
+      size="small"
+      ?disabled=${data.disabled}
+      searchable
+      search-placeholder="${msg('Search modules...')}"
+      use-custom-selected-display
+      part="module-select"
+      class="module-select"
+      @nr-change=${handlers.onModuleChange}
+      aria-label="${msg('Select modules')}"
+    >
+      <span slot="selected-display">
+        ${data.renderModuleDisplay()}
+      </span>
+    </nr-select>
+  `;
+}
+/**
+ * Renders send/stop button
+ */
+function renderSendButton(data, handlers) {
+    return html `
+    <nr-button 
+      class="input-box__send-button" 
+      part="send-button"
+      type="default"
+      size="small"
+      .iconRight=${data.isQueryRunning ? 'square' : 'arrow-up'}
+      @click=${data.isQueryRunning ? handlers.onStop : handlers.onSend}
+      @keydown=${handlers.onSendKeydown}
+      aria-label="${data.isQueryRunning ? msg('Stop query') : msg('Send message')}"
+      title="${data.isQueryRunning ? msg('Stop query') : msg('Send message')}"
+    >
+      ${data.isQueryRunning ? msg('Stop') : msg('Send')}
+    </nr-button>
+  `;
+}
+/**
+ * Renders the live recording bar (replaces input row while recording).
+ * The send button icon/title differs by mode:
+ *   transcribe → keyboard icon (converts speech to text in the input)
+ *   message    → send arrow  (sends as an audio attachment)
+ */
+function renderRecordingBar(data, handlers) {
+    const { duration, bars } = data.audioRecording;
+    const isTranscribe = data.audioMode === 'transcribe';
+    const sendTitle = isTranscribe ? msg('Convert to text') : msg('Send as voice message');
+    const sendIcon = isTranscribe
+        ? html `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
+        <path d="M7 10h2l2 3 2-6 2 3h2"/>
+      </svg>`
+        : html `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
+      </svg>`;
+    return html `
+    <div class="audio-recording-bar">
+      <button
+        class="audio-rec-cancel"
+        title="${msg('Cancel recording')}"
+        @click=${handlers.onAudioCancel}
+        aria-label="${msg('Cancel recording')}"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="3 6 5 6 21 6"/>
+          <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
+          <path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/>
+        </svg>
+      </button>
+
+      <div class="audio-rec-indicator">
+        <span class="audio-rec-dot"></span>
+        <div class="audio-rec-wave">
+          ${bars.map(v => html `
+            <div class="audio-rec-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
+          `)}
+        </div>
+        <span class="audio-rec-time">${duration}</span>
+      </div>
+
+      <span class="audio-rec-mode-label">
+        ${isTranscribe ? msg('Speech to text') : msg('Voice message')}
+      </span>
+
+      <button
+        class="audio-rec-send ${isTranscribe ? 'audio-rec-send--transcribe' : ''}"
+        title="${sendTitle}"
+        @click=${handlers.onAudioSend}
+        aria-label="${sendTitle}"
+      >
+        ${sendIcon}
+      </button>
+    </div>
+  `;
+}
+/**
+ * Renders action buttons row
+ */
+function renderActionButtons(data, handlers) {
+    return html `
+    <div class="action-buttons-row">
+      <div class="action-buttons-left">
+        ${data.enableFileUpload ? renderFileUploadButton(data, handlers) : nothing}
+        ${data.enableModuleSelection && data.moduleOptions.length > 0
+        ? renderModuleSelector(data, handlers)
+        : nothing}
+      </div>
+
+      <div class="action-buttons-right">
+        ${data.showAudioButton && !data.isQueryRunning ? html `
+          <!-- Speech-to-text: mic + keyboard indicator -->
+          <button
+            class="audio-mic-btn"
+            title="${msg('Record speech to text')}"
+            ?disabled=${data.disabled}
+            @click=${() => { var _a; return (_a = handlers.onAudioStart) === null || _a === void 0 ? void 0 : _a.call(handlers, 'transcribe'); }}
+            aria-label="${msg('Record speech to text')}"
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
+              <path d="M19 10v2a7 7 0 01-14 0v-2"/>
+              <line x1="12" y1="19" x2="12" y2="23"/>
+            </svg>
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="audio-mic-badge">
+              <rect x="2" y="7" width="20" height="14" rx="2"/>
+              <path d="M7 12h2l2 3 2-5 2 2h2"/>
+            </svg>
+          </button>
+          <!-- Voice message: mic + waveform indicator -->
+          <button
+            class="audio-mic-btn"
+            title="${msg('Send voice message')}"
+            ?disabled=${data.disabled}
+            @click=${() => { var _a; return (_a = handlers.onAudioStart) === null || _a === void 0 ? void 0 : _a.call(handlers, 'message'); }}
+            aria-label="${msg('Send voice message')}"
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
+              <path d="M19 10v2a7 7 0 01-14 0v-2"/>
+              <line x1="12" y1="19" x2="12" y2="23"/>
+            </svg>
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="audio-mic-badge">
+              <path d="M2 12h2M6 8h2M10 6h2M14 8h2M18 12h2M22 12h2"/>
+            </svg>
+          </button>
+        ` : nothing}
+        ${data.showSendButton && (!data.disabled || data.isQueryRunning) &&
+        (data.currentInput.trim() || data.uploadedFiles.length > 0 || data.isQueryRunning)
+        ? renderSendButton(data, handlers)
+        : nothing}
+      </div>
+    </div>
+  `;
+}
+/**
+ * Renders the complete input box
+ */
+export function renderInputBox(data, handlers) {
+    if (data.audioRecording.active) {
+        return html `
+      <div class="input-box" part="input-box">
+        <div class="input-container" part="input-container">
+          ${renderRecordingBar(data, handlers)}
+        </div>
+      </div>
+    `;
+    }
+    return html `
+    <div class="input-box" part="input-box">
+      <div class="input-container" part="input-container">
+        <!-- Context tags -->
+        ${data.uploadedFiles.length > 0
+        ? renderContextTags(data.uploadedFiles, handlers.onFileRemove, handlers.onFileClick)
+        : nothing}
+
+        <!-- Input area -->
+        <div class="input-row">
+          <div
+            class="input-box__input"
+            part="input"
+            contenteditable="true"
+            role="textbox"
+            aria-multiline="true"
+            aria-label="${msg('Chat input')}"
+            data-placeholder="${data.placeholder}"
+            @input=${handlers.onInput}
+            @keydown=${handlers.onKeydown}
+            @focus=${handlers.onFocus}
+            @blur=${handlers.onBlur}
+          ></div>
+        </div>
+
+        <!-- Action buttons -->
+        ${renderActionButtons(data, handlers)}
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=input-box.template.js.map

package/dist/src/components/chatbot/templates/message.template.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult, nothing } from 'lit';
+import { ChatbotMessage, ChatbotLoadingType } from '../chatbot.types.js';
+export interface MessageTemplateHandlers {
+    onRetry: (message: ChatbotMessage) => void;
+    onRetryKeydown: (e: KeyboardEvent) => void;
+    onCopy: (message: ChatbotMessage) => void;
+    onCopyKeydown: (e: KeyboardEvent, message: ChatbotMessage) => void;
+    onFileClick?: (file: any) => void;
+}
+/**
+ * Renders a single message
+ */
+export declare function renderMessage(message: ChatbotMessage, handlers: MessageTemplateHandlers): TemplateResult;
+/**
+ * Renders bot typing indicator
+ */
+export declare function renderBotTypingIndicator(isTyping: boolean, loadingIndicator: ChatbotLoadingType, loadingText?: string): TemplateResult | typeof nothing;
+/**
+ * Renders empty state
+ */
+export declare function renderEmptyState(): TemplateResult;
+/**
+ * Renders messages container with all messages
+ */
+export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers): TemplateResult;
+//# sourceMappingURL=message.template.d.ts.map

package/dist/src/components/chatbot/templates/message.template.js

@@ -0,0 +1,214 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import { ChatbotLoadingType } from '../chatbot.types.js';
+import { formatTimestamp } from '../utils/format.js';
+/**
+ * Parse and render error message with styled container
+ */
+function renderErrorMessage(text) {
+    const errorMatch = text.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERROR_TITLE_END\]([\s\S]*?)\[ERROR_END\]/);
+    if (errorMatch) {
+        const title = errorMatch[1];
+        const description = errorMatch[2];
+        return html `
+      <div class="message__error-container" part="message-error">
+        ${title ? html `<div class="message__error-title" part="message-error-title">${title}</div>` : ''}
+        <div class="message__error-description" part="message-error-description">${description}</div>
+      </div>
+    `;
+    }
+    return html `${text}`;
+}
+/**
+ * Format file size to human readable format
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+/**
+ * Get icon name based on MIME type
+ */
+function getFileIcon(mimeType) {
+    if (mimeType.startsWith('image/'))
+        return 'image';
+    if (mimeType.startsWith('video/'))
+        return 'video';
+    if (mimeType.startsWith('audio/'))
+        return 'music';
+    if (mimeType === 'application/pdf')
+        return 'file-pdf';
+    if (mimeType.startsWith('text/'))
+        return 'file-text';
+    return 'file';
+}
+/**
+ * Check if file is an image
+ */
+function isImageFile(mimeType) {
+    return mimeType.startsWith('image/');
+}
+/**
+ * Renders a single message
+ */
+export function renderMessage(message, handlers) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const isError = (_a = message.text) === null || _a === void 0 ? void 0 : _a.includes('[ERROR_START]');
+    const messageClasses = {
+        error: !!message.error || isError,
+        introduction: !!message.introduction,
+        [message.sender]: true,
+    };
+    return html `
+    <div
+      class="message ${classMap(messageClasses)}"
+      part="message"
+      data-sender="${message.sender}"
+      data-id="${message.id}"
+    >
+      <div class="message__content" part="message-content">
+        ${isError
+        ? renderErrorMessage((_c = (_b = message.text) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '')
+        : ((_d = message === null || message === void 0 ? void 0 : message.metadata) === null || _d === void 0 ? void 0 : _d.renderAsHtml)
+            ? unsafeHTML((_f = (_e = message.text) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : '')
+            : unsafeHTML(((_h = (_g = message.text) === null || _g === void 0 ? void 0 : _g.trim()) !== null && _h !== void 0 ? _h : '').replaceAll('\n', '<br>'))}
+      </div>
+      ${message.files && message.files.length > 0 ? html `
+        <div class="message__attachments" part="message-attachments" role="list" aria-label="${msg('Attached files')}">
+          ${message.files.map((f) => html `
+            <nr-dropdown 
+              trigger="hover" 
+              placement="top-end"
+              size="small"
+              class="message-file-preview-dropdown"
+            >
+              <nr-tag 
+                slot="trigger"
+                class="message__attachment-tag" 
+                size="small"
+                @click=${() => { var _a; return (_a = handlers.onFileClick) === null || _a === void 0 ? void 0 : _a.call(handlers, f); }}
+                style="cursor: pointer;"
+              >${f.name}</nr-tag>
+              
+              <div slot="content" class="message-file-preview-content">
+                ${isImageFile(f.mimeType) && (f.url || f.previewUrl) ? html `
+                  <img 
+                    src="${f.previewUrl || f.url}" 
+                    alt="${f.name}"
+                    class="message-file-preview-image"
+                  />
+                ` : html `
+                  <nr-icon 
+                    .name=${getFileIcon(f.mimeType)}
+                    size="large"
+                    class="message-file-preview-icon"
+                  ></nr-icon>
+                `}
+                <div class="message-file-preview-info">
+                  <div class="message-file-preview-name" title="${f.name}">${f.name}</div>
+                  <div class="message-file-preview-details">
+                    <span>${formatFileSize(f.size)}</span>
+                  </div>
+                </div>
+              </div>
+            </nr-dropdown>
+          `)}
+        </div>
+      ` : nothing}
+      <div class="message__footer" part="message-footer">
+        <div class="message__timestamp" part="message-timestamp">
+          ${formatTimestamp(message.timestamp)}
+        </div>
+        <nr-icon
+          name="copy"
+          size="small"
+          color="#9ca3af"
+          class="message__copy"
+          @click=${() => handlers.onCopy(message)}
+          @keydown=${(e) => handlers.onCopyKeydown(e, message)}
+          title="${msg('Copy message')}"
+          aria-label="${msg('Copy message')}"
+          role="button"
+          tabindex="0"
+        ></nr-icon>
+      </div>
+      ${message.error
+        ? html `
+          <nr-button 
+            type="secondary"
+            size="small"
+            class="message__retry" 
+            part="retry-button"
+            @click=${() => handlers.onRetry(message)}
+            @keydown=${handlers.onRetryKeydown}
+            aria-label="${msg('Retry message')}"
+          >
+            ${msg('Retry')}
+          </nr-button>`
+        : nothing}
+    </div>
+  `;
+}
+/**
+ * Renders bot typing indicator
+ */
+export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText) {
+    if (!isTyping)
+        return nothing;
+    const indicatorContent = loadingIndicator === ChatbotLoadingType.Dots
+        ? html `
+        <div class="dots">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      `
+        : html `<div class="spinner"></div>`;
+    return html `
+    <div class="message bot loading" part="typing-indicator">
+      <div class="message__content">
+        ${indicatorContent}
+        ${loadingText ? html `<span class="loading-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
+      </div>
+    </div>
+  `;
+}
+/**
+ * Renders empty state
+ */
+export function renderEmptyState() {
+    return html `
+    <div class="empty-state" part="empty-state">
+      <slot name="empty-state">
+        <div class="empty-state__content">
+          ${msg('Start a conversation')}
+        </div>
+      </slot>
+    </div>
+  `;
+}
+/**
+ * Renders messages container with all messages
+ */
+export function renderMessages(messages, suggestions, typingIndicator, messageHandlers) {
+    return html `
+    <div class="messages" part="messages">
+      ${messages.length === 0 ? renderEmptyState() : nothing}
+      ${messages.map((message) => renderMessage(message, messageHandlers))}
+      ${suggestions}
+      ${typingIndicator}
+    </div>
+  `;
+}
+//# sourceMappingURL=message.template.js.map

package/dist/src/components/chatbot/templates/suggestion.template.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult, nothing } from 'lit';
+import { ChatbotSuggestion } from '../chatbot.types.js';
+export interface SuggestionTemplateHandlers {
+    onClick: (suggestion: ChatbotSuggestion) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+}
+/**
+ * Renders a single suggestion
+ */
+export declare function renderSuggestion(suggestion: ChatbotSuggestion, handlers: SuggestionTemplateHandlers): TemplateResult;
+/**
+ * Renders suggestions container
+ */
+export declare function renderSuggestions(_chatStarted: boolean, suggestions: ChatbotSuggestion[], handlers: SuggestionTemplateHandlers): TemplateResult | typeof nothing;
+//# sourceMappingURL=suggestion.template.d.ts.map

package/dist/src/components/chatbot/templates/suggestion.template.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+/**
+ * Renders a single suggestion
+ */
+export function renderSuggestion(suggestion, handlers) {
+    return html `
+    <div 
+      class="suggestion ${classMap({ 'suggestion--disabled': suggestion.enabled === false })}" 
+      part="suggestion"
+      role="button"
+      tabindex="0"
+      @click=${() => handlers.onClick(suggestion)}
+      @keydown=${handlers.onKeydown}
+      data-id="${suggestion.id}"
+      aria-label="${msg('Select suggestion: ')}${suggestion.text}"
+    >
+      ${suggestion.text}
+    </div>
+  `;
+}
+/**
+ * Renders suggestions container
+ */
+export function renderSuggestions(_chatStarted, suggestions, handlers) {
+    return suggestions.length > 0
+        ? html `
+        <div class="suggestion-container" part="suggestions">
+          ${suggestions.map((suggestion) => renderSuggestion(suggestion, handlers))}
+        </div>
+      `
+        : nothing;
+}
+//# sourceMappingURL=suggestion.template.js.map

package/dist/src/components/chatbot/templates/thread-sidebar.template.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+import { ChatbotThread } from '../chatbot.types.js';
+export interface ThreadSidebarTemplateHandlers {
+    onCreateNew: () => void;
+    onSelectThread: (threadId: string) => void;
+    onDeleteThread?: (threadId: string) => void;
+    onRenameThread?: (threadId: string, newTitle: string) => void;
+    onBookmarkThread?: (threadId: string) => void;
+}
+export interface ThreadSidebarTemplateData {
+    threads: ChatbotThread[];
+    activeThreadId?: string;
+    editingThreadId?: string;
+}
+/**
+ * Renders thread sidebar
+ */
+export declare function renderThreadSidebar(data: ThreadSidebarTemplateData, handlers: ThreadSidebarTemplateHandlers): TemplateResult;
+//# sourceMappingURL=thread-sidebar.template.d.ts.map