@nuraly/lumenui 0.6.0 → 0.8.2

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

@@ -6,6 +6,7 @@
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { ChatbotLoadingType } from '../chatbot.types.js';
 import { formatTimestamp } from '../utils/format.js';
 /**
@@ -61,26 +62,46 @@ function getFileExtension(name, mimeType) {
  * Renders a single message
  */
 export function renderMessage(message, handlers, i18n) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     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,
     };
+    const role = message.sender;
+    const rawText = (_c = (_b = message.text) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+    const threshold = (_d = handlers.collapseThreshold) !== null && _d !== void 0 ? _d : 0;
+    const collapsible = role === 'user' && !isError && threshold > 0 && rawText.length > threshold;
+    const expanded = collapsible ? !!((_e = handlers.isExpanded) === null || _e === void 0 ? void 0 : _e.call(handlers, message.id)) : true;
+    const innerContent = isError
+        ? renderErrorMessage(rawText)
+        : ((_f = message === null || message === void 0 ? void 0 : message.metadata) === null || _f === void 0 ? void 0 : _f.renderAsHtml)
+            ? unsafeHTML(rawText)
+            : unsafeHTML(rawText.replaceAll('\n', '<br>'));
     return html `
     <div
       class="message ${classMap(messageClasses)}"
-      part="message"
+      part=${`message message-${role}`}
       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 class="message__content" part=${`message-content message-content-${role}`}>
+        ${collapsible ? html `
+          <div
+            class="message__text-collapsible ${expanded ? 'message__text-collapsible--expanded' : ''}"
+            part="message-text-collapsible"
+          >
+            <div class="message__text-inner">${innerContent}</div>
+          </div>
+          <button
+            class="message__show-more-toggle"
+            part="message-show-more"
+            type="button"
+            data-message-toggle="${message.id}"
+            aria-expanded="${expanded ? 'true' : 'false'}"
+          >${expanded ? i18n.messages.showLessLabel : i18n.messages.showMoreLabel}</button>
+        ` : innerContent}
       </div>
       ${message.files && message.files.length > 0 ? html `
         <div class="message__attachments" part="message-attachments" role="list" aria-label="${i18n.messages.attachedFilesLabel}">
@@ -194,28 +215,52 @@ export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText
     </div>
   `;
 }
-/**
- * Renders empty state
- */
-export function renderEmptyState(i18n) {
+export function renderEmptyState(i18n, welcomeMessage) {
+    const heading = welcomeMessage !== null && welcomeMessage !== void 0 ? welcomeMessage : i18n.messages.startConversationLabel;
     return html `
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
         <div class="empty-state__content" part="empty-state-content">
-          ${i18n.messages.startConversationLabel}
+          ${heading}
         </div>
       </slot>
     </div>
   `;
 }
-/**
- * Renders messages container with all messages
- */
-export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n) {
+export function renderThreadLoading(i18n) {
+    return html `
+    <div class="empty-state empty-state--loading" part="empty-state thread-loading">
+      <slot name="thread-loading">
+        <div class="spinner" part="thread-loading-spinner"></div>
+        <div class="empty-state__content" part="empty-state-content">
+          ${i18n.messages.loadingConversationLabel}
+        </div>
+      </slot>
+    </div>
+  `;
+}
+export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n, welcomeMessage, isPendingThread, invertedScroll) {
+    const emptyContent = messages.length === 0
+        ? isPendingThread
+            ? renderThreadLoading(i18n)
+            : renderEmptyState(i18n, welcomeMessage)
+        : nothing;
+    const renderMsg = (m) => renderMessage(m, messageHandlers, i18n);
+    if (invertedScroll) {
+        const reversed = [...messages].reverse();
+        return html `
+      <div class="messages messages--inverted" part="messages">
+        ${typingIndicator}
+        ${suggestions}
+        ${repeat(reversed, (m) => m.id, renderMsg)}
+        ${emptyContent}
+      </div>
+    `;
+    }
     return html `
     <div class="messages" part="messages">
-      ${messages.length === 0 ? renderEmptyState(i18n) : nothing}
-      ${messages.map((message) => renderMessage(message, messageHandlers, i18n))}
+      ${emptyContent}
+      ${repeat(messages, (m) => m.id, renderMsg)}
       ${suggestions}
       ${typingIndicator}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.6.0",
+  "version": "0.8.2",
   "description": "A comprehensive collection of enterprise-class web components built with Lit and TypeScript",
   "type": "module",
   "main": "dist/nuralyui.bundle.js",

package/packages/themes/dist/default.css

@@ -64,6 +64,11 @@
   --nuraly-color-info-light: #e6f7ff;      
   --nuraly-color-info-dark: #0050b3;       
 
+  --nuraly-color-user-bubble-bg: rgb(124, 58, 237);
+  --nuraly-color-user-bubble-fg: rgb(255, 255, 255);
+  --nuraly-color-bot-bubble-bg: transparent;
+  --nuraly-color-bot-bubble-fg: inherit;
+
   --nuraly-color-background: #ffffff;
   --nuraly-color-background-hover: #fafafa;
   --nuraly-color-background-active: #f5f5f5;
@@ -85,6 +90,7 @@
   --nuraly-color-border-danger: #ff4d4f;   
   --nuraly-color-border-success: #52c41a;  
   --nuraly-color-border-warning: #faad14;  
+  --nuraly-color-divider: rgb(224, 224, 224);
 
   --nuraly-border-radius-none: 0;
   --nuraly-border-radius-xs: 2px;
@@ -201,6 +207,11 @@
   --nuraly-color-info-light: #93c5fd;
   --nuraly-color-info-dark: #1e40af;
 
+  --nuraly-color-user-bubble-bg: rgb(124, 58, 237);
+  --nuraly-color-user-bubble-fg: rgb(255, 255, 255);
+  --nuraly-color-bot-bubble-bg: transparent;
+  --nuraly-color-bot-bubble-fg: inherit;
+
   --nuraly-color-background: #111827;
   --nuraly-color-background-hover: #1f2937;
   --nuraly-color-background-active: #374151;
@@ -222,6 +233,7 @@
   --nuraly-color-border-danger: #f87171;
   --nuraly-color-border-success: #34d399;
   --nuraly-color-border-warning: #fbbf24;
+  --nuraly-color-divider: #374151;
 
   --nuraly-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
   --nuraly-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);