@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/chatbot/templates/file-preview-modal.template.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html, TemplateResult, nothing } from 'lit';
+import { ChatbotFile } from '../chatbot.types.js';
+
+export interface FilePreviewModalTemplateData {
+  isOpen: boolean;
+  file: ChatbotFile | null;
+}
+
+export interface FilePreviewModalTemplateHandlers {
+  onClose: () => void;
+}
+
+/**
+ * Format file size to human readable format
+ */
+function formatFileSize(bytes: number): string {
+  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];
+}
+
+/**
+ * Renders file preview modal
+ */
+export function renderFilePreviewModal(
+  data: FilePreviewModalTemplateData,
+  handlers: FilePreviewModalTemplateHandlers
+): TemplateResult | typeof nothing {
+  if (!data.isOpen || !data.file) {
+    return nothing;
+  }
+
+  const file = data.file;
+  const isImage = file.mimeType.startsWith('image/');
+  const isPDF = file.mimeType === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf');
+
+  return html`
+    <nr-modal
+      .open=${data.isOpen}
+      size="large"
+      title="${file.name}"
+      @modal-close=${handlers.onClose}
+    >
+      <div style="width: 100%; height: 75vh; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch;">
+        ${isImage && (file.url || file.previewUrl) ? html`
+          <img 
+            src="${file.url || file.previewUrl}" 
+            alt="${file.name}"
+            style="max-width: 100%; max-height: 100%; object-fit: contain; align-self: center;"
+          />
+        ` : isPDF && file.url ? html`
+          <div style="width: 100%; height: 100%; position: relative;">
+            <nr-document
+              .src="${file.url}"
+              .type="${'pdf'}"
+              .width="${'100%'}"
+              .height="${'100%'}"
+              .block="${true}"
+              style="width: 100%; height: 100%; display: block;"
+            ></nr-document>
+          </div>
+        ` : html`
+          <div style="text-align: center; padding: 2rem; align-self: center;">
+            <nr-icon name="file" size="xlarge" style="margin-bottom: 1rem;"></nr-icon>
+            <p style="font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem;">${file.name}</p>
+            <p style="color: var(--nuraly-color-chatbot-timestamp); margin-bottom: 1.5rem;">
+              ${formatFileSize(file.size)}
+            </p>
+            ${file.url ? html`
+              <nr-button
+                type="primary"
+                @click=${() => window.open(file.url, '_blank')}
+              >
+                Open File
+              </nr-button>
+            ` : nothing}
+          </div>
+        `}
+      </div>
+    </nr-modal>
+  `;
+}

package/components/ui/nuraly-ui/src/components/chatbot/templates/file-upload-area.template.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html, TemplateResult } from 'lit';
+import { msg } from '@lit/localize';
+
+export interface FileUploadAreaTemplateHandlers {
+  onDrop: (e: DragEvent) => void;
+  onDragOver: (e: DragEvent) => void;
+  onDragLeave: () => void;
+}
+
+export interface FileUploadAreaTemplateData {
+  isDragging: boolean;
+}
+
+/**
+ * Renders file upload drag-and-drop area
+ */
+export function renderFileUploadArea(
+  data: FileUploadAreaTemplateData,
+  handlers: FileUploadAreaTemplateHandlers
+): TemplateResult {
+  return html`
+    <div 
+      class="file-upload-area ${data.isDragging ? 'file-upload-area--dragging' : ''}"
+      part="file-upload-area"
+      @drop=${handlers.onDrop}
+      @dragover=${handlers.onDragOver}
+      @dragleave=${handlers.onDragLeave}
+    >
+      <div class="file-upload-area__content">
+        <div class="file-upload-area__icon">📁</div>
+        <div class="file-upload-area__text">
+          ${msg('Drop files here to upload')}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/components/ui/nuraly-ui/src/components/chatbot/templates/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './message.template.js';
+export * from './suggestion.template.js';
+export * from './input-box.template.js';
+export * from './thread-sidebar.template.js';
+export * from './file-upload-area.template.js';
+export * from './url-modal.template.js';
+export * from './file-preview-modal.template.js';
+export * from './chatbot-main.template.js';

package/components/ui/nuraly-ui/src/components/chatbot/templates/input-box.template.ts

@@ -0,0 +1,267 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html, TemplateResult, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { msg } from '@lit/localize';
+import { ChatbotFile } from '../chatbot.types.js';
+import { DropdownItem } from '../../dropdown/dropdown.types.js';
+import { SelectOption } from '../../select/select.types.js';
+
+
+export interface InputBoxTemplateHandlers {
+  onInput: (e: Event) => void;
+  onKeydown: (e: KeyboardEvent) => void;
+  onFocus: (e: FocusEvent) => void;
+  onBlur: (e: FocusEvent) => void;
+  onSend: () => void;
+  onStop: () => void;
+  onSendKeydown: (e: KeyboardEvent) => void;
+  onFileDropdownClick: (e: CustomEvent) => void;
+  onModuleChange: (e: CustomEvent) => void;
+  onFileRemove: (fileId: string) => void;
+  onFileClick?: (file: ChatbotFile) => void;
+}
+
+export interface InputBoxTemplateData {
+  placeholder: string;
+  disabled: boolean;
+  currentInput: string;
+  uploadedFiles: ChatbotFile[];
+  isQueryRunning: boolean;
+  showSendButton: boolean;
+  enableFileUpload: boolean;
+  fileUploadItems: DropdownItem[];
+  enableModuleSelection: boolean;
+  moduleOptions: SelectOption[];
+  selectedModules: string[];
+  moduleSelectionLabel: string;
+  renderModuleDisplay: () => TemplateResult;
+}
+
+/**
+ * Renders context tags for uploaded files with hover preview
+ */
+function renderContextTags(
+  files: ChatbotFile[], 
+  onRemove: (id: string) => void,
+  onFileClick?: (file: ChatbotFile) => void
+): TemplateResult {
+  const formatFileSize = (bytes: number): string => {
+    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: string): string => {
+    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: string) => 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?.(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: InputBoxTemplateData,
+  handlers: InputBoxTemplateHandlers
+): TemplateResult {
+  return html`
+    <nr-dropdown 
+      .items=${data.fileUploadItems}
+      trigger="click"
+      placement="top-start"
+      size="small"
+      ?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: InputBoxTemplateData,
+  handlers: InputBoxTemplateHandlers
+): TemplateResult {
+  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: InputBoxTemplateData,
+  handlers: InputBoxTemplateHandlers
+): TemplateResult {
+  return html`
+    <nr-button 
+      class="input-box__send-button" 
+      part="send-button"
+      type="default"
+      size="small"
+      .iconRight=${data.isQueryRunning ? 'stop' : '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 action buttons row
+ */
+function renderActionButtons(
+  data: InputBoxTemplateData,
+  handlers: InputBoxTemplateHandlers
+): TemplateResult {
+  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.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: InputBoxTemplateData,
+  handlers: InputBoxTemplateHandlers
+): TemplateResult {
+  return html`
+    <div class="input-box" part="input-box">
+      <div class="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>
+  `;
+}

package/components/ui/nuraly-ui/src/components/chatbot/templates/message.template.ts

@@ -0,0 +1,240 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html, TemplateResult, 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 { ChatbotMessage, ChatbotLoadingType } from '../chatbot.types.js';
+
+// Import required components for template
+
+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;
+}
+
+/**
+ * Parse and render error message with styled container
+ */
+function renderErrorMessage(text: string): TemplateResult {
+  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: number): string {
+  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: string): string {
+  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: string): boolean {
+  return mimeType.startsWith('image/');
+}
+
+/**
+ * Renders a single message
+ */
+export function renderMessage(
+  message: ChatbotMessage, 
+  handlers: MessageTemplateHandlers
+): TemplateResult {
+  const isError = message.text?.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(message.text) 
+          : message?.metadata?.renderAsHtml 
+            ? unsafeHTML(message.text) 
+            : message.text
+        }
+      </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=${() => handlers.onFileClick?.(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">
+          ${message.timestamp}
+        </div>
+        <nr-icon
+          name="copy"
+          size="small"
+          color="var(--nuraly-color-chatbot-timestamp)"
+          class="message__copy"
+          @click=${() => handlers.onCopy(message)}
+          @keydown=${(e: KeyboardEvent) => 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: boolean,
+  loadingIndicator: ChatbotLoadingType
+): TemplateResult | typeof nothing {
+  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}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Renders empty state
+ */
+export function renderEmptyState(): TemplateResult {
+  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: ChatbotMessage[],
+  suggestions: TemplateResult | typeof nothing,
+  typingIndicator: TemplateResult | typeof nothing,
+  messageHandlers: MessageTemplateHandlers
+): TemplateResult {
+  return html`
+    <div class="messages" part="messages">
+      ${messages.length === 0 ? renderEmptyState() : nothing}
+      ${messages.map((message) => renderMessage(message, messageHandlers))}
+      ${suggestions}
+      ${typingIndicator}
+    </div>
+  `;
+}