@nuraly/lumenui 0.8.0 → 0.8.2

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

@@ -420,6 +420,11 @@ export default css `
     justify-content: flex-start; /* Always align messages to top */
   }
 
+  .messages--inverted {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+  }
+
   .empty-state {
     display: flex;
     flex-direction: column;
@@ -560,6 +565,54 @@ export default css `
     box-shadow: none;
   }
 
+  .message__text-collapsible {
+    position: relative;
+    max-height: var(--chatbot-message-collapsed-height, 200px);
+    overflow: hidden;
+  }
+
+  .message__text-collapsible--expanded {
+    max-height: none;
+  }
+
+  .message__text-collapsible:not(.message__text-collapsible--expanded)::after {
+    content: '';
+    position: absolute;
+    inset: auto 0 0 0;
+    height: 48px;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--nuraly-color-user-bubble-bg, rgb(124, 58, 237))
+    );
+  }
+
+  .message__show-more-toggle {
+    margin-top: 6px;
+    background: transparent;
+    border: 0;
+    padding: 4px 0;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    color: inherit;
+    opacity: 0.85;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .message__show-more-toggle:hover {
+    opacity: 1;
+  }
+
+  .message__show-more-toggle:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
   .message.bot .message__content {
     background-color: var(--nuraly-color-bot-bubble-bg, transparent);
     color: var(--nuraly-color-bot-bubble-fg, inherit);

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

@@ -295,6 +295,8 @@ export interface ChatbotI18nMessages {
     startConversationLabel: string;
     suggestionPrefix: string;
     loadingConversationLabel: string;
+    showMoreLabel: string;
+    showLessLabel: string;
 }
 export interface ChatbotI18nUrlModal {
     addUrlTitle: string;

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

@@ -20,6 +20,8 @@ export interface ChatbotMainTemplateData {
     welcomeMessage?: string;
     /** True when activeThreadId points at a thread that has not yet been loaded. Renders a loading state in the messages area. */
     isPendingThread?: boolean;
+    /** Anchor messages to the bottom via flex-direction: column-reverse. New messages stay anchored without JS scroll. */
+    invertedScroll?: boolean;
     messages: ChatbotMessage[];
     isTyping: boolean;
     loadingIndicator?: ChatbotLoadingType;

package/dist/src/components/chatbot/templates/chatbot-main.template.js

@@ -52,7 +52,7 @@ function renderContentArea(data, handlers) {
       <div class="chatbot-content" part="content">
         ${renderMessages(data.messages, renderSuggestions(data.chatStarted, data.suggestions, handlers.suggestion, data.i18n), data.isTyping
             ? renderBotTypingIndicator(data.isTyping, data.loadingIndicator || ChatbotLoadingType.Spinner, data.loadingText)
-            : nothing, handlers.message, data.i18n, data.welcomeMessage, data.isPendingThread)}
+            : nothing, handlers.message, data.i18n, data.welcomeMessage, data.isPendingThread, data.invertedScroll)}
         <slot name="messages"></slot>
       </div>
     `;

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

@@ -11,6 +11,8 @@ export interface MessageTemplateHandlers {
     onCopy: (message: ChatbotMessage) => void;
     onCopyKeydown: (e: KeyboardEvent, message: ChatbotMessage) => void;
     onFileClick?: (file: any) => void;
+    collapseThreshold?: number;
+    isExpanded?: (id: string) => boolean;
 }
 /**
  * Renders a single message
@@ -22,5 +24,5 @@ export declare function renderMessage(message: ChatbotMessage, handlers: Message
 export declare function renderBotTypingIndicator(isTyping: boolean, loadingIndicator: ChatbotLoadingType, loadingText?: string): TemplateResult | typeof nothing;
 export declare function renderEmptyState(i18n: ChatbotI18n, welcomeMessage?: string): TemplateResult;
 export declare function renderThreadLoading(i18n: ChatbotI18n): TemplateResult;
-export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers, i18n: ChatbotI18n, welcomeMessage?: string, isPendingThread?: boolean): TemplateResult;
+export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers, i18n: ChatbotI18n, welcomeMessage?: string, isPendingThread?: boolean, invertedScroll?: boolean): TemplateResult;
 //# sourceMappingURL=message.template.d.ts.map

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,7 +62,7 @@ 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,
@@ -69,6 +70,15 @@ export function renderMessage(message, handlers, i18n) {
         [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)}"
@@ -77,11 +87,21 @@ export function renderMessage(message, handlers, i18n) {
       data-id="${message.id}"
     >
       <div class="message__content" part=${`message-content message-content-${role}`}>
-        ${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>'))}
+        ${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}">
@@ -219,15 +239,28 @@ export function renderThreadLoading(i18n) {
     </div>
   `;
 }
-export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n, welcomeMessage, isPendingThread) {
-    return html `
-    <div class="messages" part="messages">
-      ${messages.length === 0
+export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n, welcomeMessage, isPendingThread, invertedScroll) {
+    const emptyContent = messages.length === 0
         ? isPendingThread
             ? renderThreadLoading(i18n)
             : renderEmptyState(i18n, welcomeMessage)
-        : nothing}
-      ${messages.map((message) => renderMessage(message, messageHandlers, i18n))}
+        : 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">
+      ${emptyContent}
+      ${repeat(messages, (m) => m.id, renderMsg)}
       ${suggestions}
       ${typingIndicator}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.8.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",