@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,160 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import { formatTimestamp } from '../utils/format.js';
+function renderThreadItem(thread, data, handlers) {
+    const lastMessage = thread.messages.length > 0
+        ? thread.messages[thread.messages.length - 1]
+        : null;
+    const previewText = lastMessage && typeof lastMessage.text === 'string'
+        ? lastMessage.text
+        : '';
+    return html `
+    <div
+      class="thread-item ${classMap({
+        'thread-item--active': thread.id === data.activeThreadId
+    })}"
+      @click=${() => handlers.onSelectThread(thread.id)}
+      part="thread-item"
+    >
+      <div class="thread-item__header">
+        ${data.editingThreadId === thread.id && handlers.onRenameThread ? html `
+          <input
+            class="thread-item__rename-input"
+            type="text"
+            .value=${thread.title || ''}
+            @click=${(e) => e.stopPropagation()}
+            @keydown=${(e) => {
+        if (e.key === 'Enter') {
+            const input = e.target;
+            const value = input.value.trim();
+            if (value)
+                handlers.onRenameThread(thread.id, value);
+        }
+        if (e.key === 'Escape') {
+            handlers.onRenameThread(thread.id, thread.title || '');
+        }
+    }}
+            @blur=${(e) => {
+        const input = e.target;
+        const value = input.value.trim();
+        if (value && value !== thread.title) {
+            handlers.onRenameThread(thread.id, value);
+        }
+        else {
+            handlers.onRenameThread(thread.id, thread.title || '');
+        }
+    }}
+          />
+        ` : html `
+          <div class="thread-item__title">${thread.title || msg('New Chat')}</div>
+        `}
+        <div class="thread-item__actions">
+          ${handlers.onRenameThread && data.editingThreadId !== thread.id ? html `
+            <button
+              class="thread-item__action-btn"
+              title="${msg('Rename conversation')}"
+              @click=${(e) => {
+        e.stopPropagation();
+        e.target.dispatchEvent(new CustomEvent('nr-thread-edit', {
+            bubbles: true,
+            composed: true,
+            detail: { threadId: thread.id }
+        }));
+    }}
+              part="thread-rename"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            </button>
+          ` : ''}
+          ${handlers.onBookmarkThread ? html `
+            <button
+              class="thread-item__action-btn ${thread.bookmarked ? 'thread-item__bookmark--active' : ''}"
+              title="${thread.bookmarked ? msg('Remove bookmark') : msg('Bookmark conversation')}"
+              @click=${(e) => {
+        e.stopPropagation();
+        handlers.onBookmarkThread(thread.id);
+    }}
+              part="thread-bookmark"
+            >
+              ${thread.bookmarked ? html `
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+              ` : html `
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+              `}
+            </button>
+          ` : ''}
+          ${handlers.onDeleteThread ? html `
+            <nr-popconfirm
+              title="${msg('Delete this conversation?')}"
+              description="${msg('This action cannot be undone.')}"
+              ok-text="${msg('Delete')}"
+              cancel-text="${msg('Cancel')}"
+              ok-type="danger"
+              placement="right"
+              @click=${(e) => e.stopPropagation()}
+              @nr-confirm=${() => handlers.onDeleteThread(thread.id)}
+            >
+              <button
+                slot="trigger"
+                class="thread-item__action-btn thread-item__delete"
+                title="${msg('Delete conversation')}"
+                part="thread-delete"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+              </button>
+            </nr-popconfirm>
+          ` : ''}
+        </div>
+      </div>
+      <div class="thread-item__preview">
+        ${previewText}
+      </div>
+      <div class="thread-item__timestamp">${formatTimestamp(thread.updatedAt)}</div>
+    </div>
+  `;
+}
+/**
+ * Renders thread sidebar
+ */
+export function renderThreadSidebar(data, handlers) {
+    const bookmarkedThreads = data.threads.filter(t => t.bookmarked);
+    const regularThreads = data.threads.filter(t => !t.bookmarked);
+    return html `
+    <div class="thread-sidebar" part="thread-sidebar">
+      <div class="thread-sidebar__header">
+        <h3>${msg('Conversations')}</h3>
+      </div>
+
+      <div class="thread-list">
+        ${bookmarkedThreads.length > 0 ? html `
+          <div class="thread-section" part="thread-section-bookmarks">
+            <div class="thread-section__label">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+              ${msg('Bookmarks')}
+            </div>
+            ${repeat(bookmarkedThreads, t => t.id, t => renderThreadItem(t, data, handlers))}
+          </div>
+        ` : nothing}
+        ${regularThreads.length > 0 || bookmarkedThreads.length === 0 ? html `
+          ${bookmarkedThreads.length > 0 ? html `
+            <div class="thread-section__label">${msg('All Conversations')}</div>
+          ` : nothing}
+          ${repeat(regularThreads, t => t.id, t => renderThreadItem(t, data, handlers))}
+          ${regularThreads.length === 0 && bookmarkedThreads.length === 0 ? html `
+            <p class="empty-msg">${msg('No conversations yet')}</p>
+          ` : nothing}
+        ` : nothing}
+      </div>
+
+      <slot name="thread-sidebar"></slot>
+    </div>
+  `;
+}
+//# sourceMappingURL=thread-sidebar.template.js.map

package/dist/src/components/chatbot/templates/url-modal.template.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+export interface UrlModalTemplateHandlers {
+    onClose: () => void;
+    onUrlInputChange: (e: Event) => void;
+    onUrlInputKeydown: (e: KeyboardEvent) => void;
+    onConfirm: () => void;
+    onAttachFile: () => void;
+}
+export interface UrlModalTemplateData {
+    isOpen: boolean;
+    urlInput: string;
+    isLoading?: boolean;
+    error?: string;
+    selectedFileName?: string;
+}
+/**
+ * Renders URL attachment modal
+ */
+export declare function renderUrlModal(data: UrlModalTemplateData, handlers: UrlModalTemplateHandlers): TemplateResult;
+//# sourceMappingURL=url-modal.template.d.ts.map

package/dist/src/components/chatbot/templates/url-modal.template.js

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { msg } from '@lit/localize';
+/**
+ * Renders URL attachment modal
+ */
+export function renderUrlModal(data, handlers) {
+    return html `
+    <nr-modal 
+      ?open=${data.isOpen}
+      @nr-modal-close=${handlers.onClose}
+      part="url-modal"
+    >
+      <div slot="header">${msg('Add URL')}</div>
+      
+      <div >
+        <nr-row gutter="8" align="bottom">
+          <nr-col span="20" >
+            <nr-input
+              
+              type="url"
+              .value=${data.urlInput}
+              placeholder="${msg('Enter URL...')}"
+              ?disabled=${data.isLoading}
+              @nr-input=${handlers.onUrlInputChange}
+              @keydown=${handlers.onUrlInputKeydown}
+            >
+              <nr-label slot="label">${msg('URL')}</nr-label>
+            </nr-input>
+          </nr-col>
+          <nr-col span="4" >
+            <nr-button 
+              type="default"
+              .icon=${['paperclip']}
+              size="small"
+              ?disabled=${data.isLoading}
+              @click=${handlers.onAttachFile}
+              title="${msg('Load file from URL')}"
+              style="margin-left: 0.5rem;"
+            >
+            </nr-button>
+          </nr-col>
+        </nr-row>
+        
+        ${data.error ? html `
+          <nr-alert 
+            type="error" 
+            closable
+            style="margin-top: 1rem;"
+          >
+            ${data.error}
+          </nr-alert>
+        ` : nothing}
+        
+        ${data.selectedFileName ? html `
+          <nr-alert 
+            type="success" 
+            style="margin-top: 1rem;"
+          >
+            ${msg('Selected file')}: ${data.selectedFileName}
+          </nr-alert>
+        ` : nothing}
+        
+        ${data.isLoading ? html `
+          <nr-alert 
+            type="info" 
+            style="margin-top: 1rem;"
+          >
+            ${msg('Loading file from URL...')}
+          </nr-alert>
+        ` : nothing}
+      </div>
+      
+      <div slot="footer">
+        <nr-button 
+          type="default"
+          size="small"
+          ?disabled=${data.isLoading}
+          @click=${handlers.onClose}
+        >
+          ${msg('Cancel')}
+        </nr-button>
+        <nr-button 
+          type="primary"
+          size="small"
+          ?disabled=${(!data.urlInput && !data.selectedFileName) || data.isLoading}
+          ?loading=${data.isLoading}
+          @click=${handlers.onConfirm}
+        >
+          ${msg('Add')}
+        </nr-button>
+      </div>
+    </nr-modal>
+  `;
+}
+//# sourceMappingURL=url-modal.template.js.map

package/dist/src/components/chatbot/utils/format.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Format timestamp for display
+ * Shows time only (e.g., "5:30 PM") for today, or date + time for older messages
+ */
+export declare function formatTimestamp(timestamp: Date | string | undefined): string;
+/** Escape HTML entities for safe insertion into innerHTML */
+export declare function escapeHtml(text: string): string;
+/** Map a language identifier to a human-readable display name */
+export declare function getLangDisplayName(lang: string): string;
+/**
+ * Render a subset of Markdown to HTML.
+ *
+ * Supports: code blocks, inline code, headings (h1-h3), bold, italic,
+ * links, unordered lists, and paragraph wrapping.  The input is HTML-escaped
+ * first so the result is safe for innerHTML.
+ */
+export declare function renderMarkdown(text: string): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/src/components/chatbot/utils/format.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Format timestamp for display
+ * Shows time only (e.g., "5:30 PM") for today, or date + time for older messages
+ */
+export function formatTimestamp(timestamp) {
+    if (!timestamp)
+        return '';
+    const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const timeOptions = {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true
+    };
+    if (isToday) {
+        return date.toLocaleTimeString(undefined, timeOptions);
+    }
+    // For older messages, show date + time
+    const dateOptions = Object.assign({ month: 'short', day: 'numeric' }, timeOptions);
+    return date.toLocaleDateString(undefined, dateOptions);
+}
+/** Escape HTML entities for safe insertion into innerHTML */
+export function escapeHtml(text) {
+    return text
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;');
+}
+/** Language display-name map shared by artifact plugin and panel template */
+const LANG_DISPLAY_NAMES = {
+    javascript: 'JavaScript', typescript: 'TypeScript', python: 'Python',
+    java: 'Java', go: 'Go', rust: 'Rust', c: 'C', cpp: 'C++',
+    csharp: 'C#', ruby: 'Ruby', php: 'PHP', swift: 'Swift',
+    kotlin: 'Kotlin', html: 'HTML', css: 'CSS', scss: 'SCSS',
+    sql: 'SQL', graphql: 'GraphQL', json: 'JSON', yaml: 'YAML',
+    xml: 'XML', toml: 'TOML', markdown: 'Markdown', md: 'Markdown',
+    bash: 'Bash', shell: 'Shell', sh: 'Shell', zsh: 'Zsh',
+    dockerfile: 'Dockerfile', makefile: 'Makefile', text: 'Text'
+};
+/** Map a language identifier to a human-readable display name */
+export function getLangDisplayName(lang) {
+    return LANG_DISPLAY_NAMES[lang] || lang.charAt(0).toUpperCase() + lang.slice(1);
+}
+/**
+ * Render a subset of Markdown to HTML.
+ *
+ * Supports: code blocks, inline code, headings (h1-h3), bold, italic,
+ * links, unordered lists, and paragraph wrapping.  The input is HTML-escaped
+ * first so the result is safe for innerHTML.
+ */
+export function renderMarkdown(text) {
+    let t = escapeHtml(text);
+    // Code blocks ```...```
+    t = t.replaceAll(/```([\s\S]*?)```/g, '<pre class="md-code"><code>$1</code></pre>');
+    // Inline code `...`
+    t = t.replaceAll(/`([^`]+)`/g, '<code class="md-inline-code">$1</code>');
+    // Headings (anchored to line start — negated class prevents backtracking)
+    t = t.replaceAll(/^###[^\S\n]+(.+)$/gm, '<h3>$1</h3>');
+    t = t.replaceAll(/^##[^\S\n]+(.+)$/gm, '<h2>$1</h2>');
+    t = t.replaceAll(/^#[^\S\n]+(.+)$/gm, '<h1>$1</h1>');
+    // Bold / Italic (negated class prevents backtracking)
+    t = t.replaceAll(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    t = t.replaceAll(/\*([^*]+)\*/g, '<em>$1</em>');
+    // Links (negated classes prevent backtracking)
+    t = t.replaceAll(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    // Unordered lists
+    t = t.replaceAll(/(?:^|\n)-\s+(.+)(?=\n|$)/g, (_m, item) => `\n<ul><li>${item}</li></ul>`);
+    t = t.replaceAll(/<ul>\s*<li>([\s\S]*?)<\/li>\s*<\/ul>\n<ul>/g, '<ul><li>$1</li>');
+    // Paragraphs: wrap text blocks that are not block elements
+    t = t.split(/\n\n+/)
+        .map(block => /^(<h\d|<pre|<ul|<ol|<blockquote)/.test(block.trim()) ? block : `<p>${block.replaceAll('\n', '<br/>')}</p>`)
+        .join('\n');
+    return t;
+}
+//# sourceMappingURL=format.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './format.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './format.js';
+//# sourceMappingURL=index.js.map