@nuraly/lumenui 0.3.8 → 0.5.0

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

@@ -5,7 +5,6 @@
  */
 import { nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
 import { renderMessages, renderBotTypingIndicator } from './message.template.js';
 import { renderSuggestions } from './suggestion.template.js';
 import { renderInputBox } from './input-box.template.js';
@@ -28,8 +27,8 @@ function renderThreadHeader(data, handlers) {
         size="small"
         .icon=${['panel-left']}
         @click=${handlers.onToggleThreadSidebar}
-        title="${msg(data.isThreadSidebarOpen ? 'Hide threads' : 'Show threads')}"
-        aria-label="${msg(data.isThreadSidebarOpen ? 'Hide threads' : 'Show threads')}"
+        title="${data.isThreadSidebarOpen ? data.i18n.threads.hideThreadsLabel : data.i18n.threads.showThreadsLabel}"
+        aria-label="${data.isThreadSidebarOpen ? data.i18n.threads.hideThreadsLabel : data.i18n.threads.showThreadsLabel}"
       ></nr-button>
       ${data.enableThreadCreation && data.messages.length > 0 ? html `
         <nr-button
@@ -37,8 +36,8 @@ function renderThreadHeader(data, handlers) {
           size="small"
           .icon=${['square-pen']}
           @click=${(_a = handlers.threadSidebar) === null || _a === void 0 ? void 0 : _a.onCreateNew}
-          title="${msg('New conversation')}"
-          aria-label="${msg('New conversation')}"
+          title="${data.i18n.threads.newConversationLabel}"
+          aria-label="${data.i18n.threads.newConversationLabel}"
         ></nr-button>
       ` : ''}
     </div>
@@ -51,9 +50,9 @@ function renderContentArea(data, handlers) {
     if (data.showMessages !== false) {
         return html `
       <div class="chatbot-content" part="content">
-        ${renderMessages(data.messages, renderSuggestions(data.chatStarted, data.suggestions, handlers.suggestion), data.isTyping
+        ${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)}
+            : nothing, handlers.message, data.i18n)}
         <slot name="messages"></slot>
       </div>
     `;
@@ -62,7 +61,7 @@ function renderContentArea(data, handlers) {
     if (data.suggestions && data.suggestions.length > 0) {
         return html `
       <div class="input-only-suggestions" part="input-only-suggestions">
-        ${renderSuggestions(false, data.suggestions, handlers.suggestion)}
+        ${renderSuggestions(false, data.suggestions, handlers.suggestion, data.i18n)}
       </div>
     `;
     }
@@ -74,11 +73,17 @@ function renderContentArea(data, handlers) {
 export function renderChatbotMain(data, handlers) {
     var _a;
     const isArtifactPanelOpen = data.enableArtifacts && ((_a = data.artifactPanel) === null || _a === void 0 ? void 0 : _a.isOpen);
+    const dnd = data.enableFileUpload ? handlers.fileUploadArea : undefined;
     return html `
     <div class="chatbot-container ${classMap({
         'chatbot-container--with-sidebar': data.enableThreads && data.isThreadSidebarOpen,
         'chatbot-container--with-artifact-panel': !!isArtifactPanelOpen
-    })}" part="container">
+    })}" part="container"
+      @dragenter=${dnd === null || dnd === void 0 ? void 0 : dnd.onDragEnter}
+      @dragover=${dnd === null || dnd === void 0 ? void 0 : dnd.onDragOver}
+      @dragleave=${dnd === null || dnd === void 0 ? void 0 : dnd.onDragLeave}
+      @drop=${dnd === null || dnd === void 0 ? void 0 : dnd.onDrop}
+    >
 
       ${data.enableThreads && data.isThreadSidebarOpen && data.threadSidebar && handlers.threadSidebar
         ? renderThreadSidebar(data.threadSidebar, handlers.threadSidebar)
@@ -101,7 +106,7 @@ export function renderChatbotMain(data, handlers) {
         : ''}
 
       ${data.isDragging
-        ? renderFileUploadArea({ isDragging: data.isDragging }, handlers.fileUploadArea)
+        ? renderFileUploadArea({ isDragging: data.isDragging, label: data.i18n.input.dropFilesHere })
         : ''}
 
       ${data.urlModal && handlers.urlModal

package/dist/src/components/chatbot/templates/file-upload-area.template.d.ts

@@ -5,15 +5,14 @@
  */
 import { TemplateResult } from 'lit';
 export interface FileUploadAreaTemplateHandlers {
-    onDrop: (e: DragEvent) => void;
+    onDragEnter: (e: DragEvent) => void;
     onDragOver: (e: DragEvent) => void;
-    onDragLeave: () => void;
+    onDragLeave: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
 }
 export interface FileUploadAreaTemplateData {
     isDragging: boolean;
+    label: string;
 }
-/**
- * Renders file upload drag-and-drop area
- */
-export declare function renderFileUploadArea(data: FileUploadAreaTemplateData, handlers: FileUploadAreaTemplateHandlers): TemplateResult;
+export declare function renderFileUploadArea(data: FileUploadAreaTemplateData): TemplateResult;
 //# sourceMappingURL=file-upload-area.template.d.ts.map

package/dist/src/components/chatbot/templates/file-upload-area.template.js

@@ -4,23 +4,16 @@
  * SPDX-License-Identifier: MIT
  */
 import { html } from 'lit';
-import { msg } from '@lit/localize';
-/**
- * Renders file upload drag-and-drop area
- */
-export function renderFileUploadArea(data, handlers) {
+export function renderFileUploadArea(data) {
     return html `
-    <div 
+    <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>
+        <nr-icon name="upload" size="xlarge"></nr-icon>
         <div class="file-upload-area__text">
-          ${msg('Drop files here to upload')}
+          ${data.label}
         </div>
       </div>
     </div>

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { TemplateResult } from 'lit';
-import { ChatbotFile } from '../chatbot.types.js';
+import { ChatbotFile, ChatbotI18n } from '../chatbot.types.js';
 import type { AudioRecordingState } from '../chatbot-audio.controller.js';
 import { DropdownItem } from '../../dropdown/dropdown.types.js';
 import { SelectOption } from '../../select/select.types.js';
@@ -41,6 +41,7 @@ export interface InputBoxTemplateData {
     showAudioButton: boolean;
     audioRecording: AudioRecordingState;
     audioMode: 'transcribe' | 'message';
+    i18n: ChatbotI18n;
 }
 /**
  * Renders the complete input box

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

@@ -6,13 +6,12 @@
 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 thumbnail chips for uploaded files (image thumb for images,
  * extension badge for other file types). While a file is uploading, a
  * spinner overlay is shown on top of the thumbnail.
  */
-function renderContextTags(files, onRemove, onFileClick) {
+function renderContextTags(files, onRemove, i18n, onFileClick) {
     const formatFileSize = (bytes) => {
         if (bytes === 0)
             return '0 Bytes';
@@ -63,15 +62,15 @@ function renderContextTags(files, onRemove, onFileClick) {
               </div>
             `}
             ${f.isUploading ? html `
-              <div class="file-thumb__spinner" aria-label="${msg('Uploading')}">
+              <div class="file-thumb__spinner" aria-label="${i18n.input.uploadingLabel}">
                 <span class="file-thumb__spinner-ring"></span>
               </div>
             ` : ''}
             <button
               type="button"
               class="file-thumb__remove"
-              aria-label="${msg('Remove file')}"
-              title="${msg('Remove file')}"
+              aria-label="${i18n.input.removeFileLabel}"
+              title="${i18n.input.removeFileLabel}"
               @click=${(e) => { e.stopPropagation(); onRemove(f.id); }}
             >
               <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
@@ -97,7 +96,7 @@ function renderContextTags(files, onRemove, onFileClick) {
               <div class="file-preview-name" title="${f.name}">${f.name}</div>
               <div class="file-preview-details">
                 <span>${formatFileSize(f.size)}</span>
-                ${f.isUploading ? html `<span> · ${msg('Uploading…')}</span>` : ''}
+                ${f.isUploading ? html `<span> · ${i18n.input.uploadingProgress}</span>` : ''}
               </div>
             </div>
           </div>
@@ -120,17 +119,17 @@ function renderFileUploadButton(data, handlers) {
       ?disabled=${data.disabled}
       @nr-dropdown-item-click=${handlers.onFileDropdownClick}
     >
-      <nr-button 
+      <nr-button
         slot="trigger"
         part="file-button"
         type="default"
         size="small"
-        .icon=${["upload"]}
+        .icon=${["paperclip"]}
         ?disabled=${data.disabled}
-        aria-label="${msg('Attach files')}"
-        title="${msg('Attach files')}"
+        aria-label="${data.i18n.input.attachFilesAriaLabel}"
+        title="${data.i18n.input.attachFilesAriaLabel}"
       >
-        Attach
+        ${data.i18n.input.attachButton}
       </nr-button>
     </nr-dropdown>
   `;
@@ -148,12 +147,12 @@ function renderModuleSelector(data, handlers) {
       size="small"
       ?disabled=${data.disabled}
       searchable
-      search-placeholder="${msg('Search modules...')}"
+      search-placeholder="${data.i18n.modules.moduleSearchPlaceholder}"
       use-custom-selected-display
       part="module-select"
       class="module-select"
       @nr-change=${handlers.onModuleChange}
-      aria-label="${msg('Select modules')}"
+      aria-label="${data.i18n.modules.moduleSelectAriaLabel}"
     >
       <span slot="selected-display">
         ${data.renderModuleDisplay()}
@@ -174,10 +173,10 @@ function renderSendButton(data, handlers) {
       .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')}"
+      aria-label="${data.isQueryRunning ? data.i18n.send.stopQueryLabel : data.i18n.send.sendMessageLabel}"
+      title="${data.isQueryRunning ? data.i18n.send.stopQueryLabel : data.i18n.send.sendMessageLabel}"
     >
-      ${data.isQueryRunning ? msg('Stop') : msg('Send')}
+      ${data.isQueryRunning ? data.i18n.send.stopButton : data.i18n.send.sendButton}
     </nr-button>
   `;
 }
@@ -190,7 +189,7 @@ function renderSendButton(data, handlers) {
 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 sendTitle = isTranscribe ? data.i18n.audio.convertToTextLabel : data.i18n.audio.sendAsVoiceMessageLabel;
     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"/>
@@ -203,9 +202,9 @@ function renderRecordingBar(data, handlers) {
     <div class="audio-recording-bar">
       <button
         class="audio-rec-cancel"
-        title="${msg('Cancel recording')}"
+        title="${data.i18n.audio.cancelRecordingLabel}"
         @click=${handlers.onAudioCancel}
-        aria-label="${msg('Cancel recording')}"
+        aria-label="${data.i18n.audio.cancelRecordingLabel}"
       >
         <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"/>
@@ -225,7 +224,7 @@ function renderRecordingBar(data, handlers) {
       </div>
 
       <span class="audio-rec-mode-label">
-        ${isTranscribe ? msg('Speech to text') : msg('Voice message')}
+        ${isTranscribe ? data.i18n.audio.speechToTextLabel : data.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
@@ -257,10 +256,10 @@ function renderActionButtons(data, handlers) {
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
-            title="${msg('Record speech to text')}"
+            title="${data.i18n.audio.recordSpeechLabel}"
             ?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')}"
+            aria-label="${data.i18n.audio.recordSpeechLabel}"
           >
             <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"/>
@@ -275,10 +274,10 @@ function renderActionButtons(data, handlers) {
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
-            title="${msg('Send voice message')}"
+            title="${data.i18n.audio.sendVoiceMessageLabel}"
             ?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')}"
+            aria-label="${data.i18n.audio.sendVoiceMessageLabel}"
           >
             <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"/>
@@ -316,7 +315,7 @@ export function renderInputBox(data, handlers) {
       <div class="input-container" part="input-container">
         <!-- Context tags -->
         ${data.uploadedFiles.length > 0
-        ? renderContextTags(data.uploadedFiles, handlers.onFileRemove, handlers.onFileClick)
+        ? renderContextTags(data.uploadedFiles, handlers.onFileRemove, data.i18n, handlers.onFileClick)
         : nothing}
 
         <!-- Input area -->
@@ -327,7 +326,7 @@ export function renderInputBox(data, handlers) {
             contenteditable="true"
             role="textbox"
             aria-multiline="true"
-            aria-label="${msg('Chat input')}"
+            aria-label="${data.i18n.input.chatInputAriaLabel}"
             data-placeholder="${data.placeholder}"
             @input=${handlers.onInput}
             @keydown=${handlers.onKeydown}

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { TemplateResult, nothing } from 'lit';
-import { ChatbotMessage, ChatbotLoadingType } from '../chatbot.types.js';
+import { ChatbotMessage, ChatbotLoadingType, ChatbotI18n } from '../chatbot.types.js';
 export interface MessageTemplateHandlers {
     onRetry: (message: ChatbotMessage) => void;
     onRetryKeydown: (e: KeyboardEvent) => void;
@@ -15,7 +15,7 @@ export interface MessageTemplateHandlers {
 /**
  * Renders a single message
  */
-export declare function renderMessage(message: ChatbotMessage, handlers: MessageTemplateHandlers): TemplateResult;
+export declare function renderMessage(message: ChatbotMessage, handlers: MessageTemplateHandlers, i18n: ChatbotI18n): TemplateResult;
 /**
  * Renders bot typing indicator
  */
@@ -23,9 +23,9 @@ export declare function renderBotTypingIndicator(isTyping: boolean, loadingIndic
 /**
  * Renders empty state
  */
-export declare function renderEmptyState(): TemplateResult;
+export declare function renderEmptyState(i18n: ChatbotI18n): TemplateResult;
 /**
  * Renders messages container with all messages
  */
-export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers): TemplateResult;
+export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers, i18n: ChatbotI18n): TemplateResult;
 //# sourceMappingURL=message.template.d.ts.map

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

@@ -6,7 +6,6 @@
 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';
 /**
@@ -61,7 +60,7 @@ function getFileExtension(name, mimeType) {
 /**
  * Renders a single message
  */
-export function renderMessage(message, handlers) {
+export function renderMessage(message, handlers, i18n) {
     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 = {
@@ -84,7 +83,7 @@ export function renderMessage(message, handlers) {
             : 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')}">
+        <div class="message__attachments" part="message-attachments" role="list" aria-label="${i18n.messages.attachedFilesLabel}">
           ${message.files.map((f) => html `
             <nr-dropdown
               trigger="hover"
@@ -147,8 +146,8 @@ export function renderMessage(message, handlers) {
           class="message__copy"
           @click=${() => handlers.onCopy(message)}
           @keydown=${(e) => handlers.onCopyKeydown(e, message)}
-          title="${msg('Copy message')}"
-          aria-label="${msg('Copy message')}"
+          title="${i18n.messages.copyMessageLabel}"
+          aria-label="${i18n.messages.copyMessageLabel}"
           role="button"
           tabindex="0"
         ></nr-icon>
@@ -162,9 +161,9 @@ export function renderMessage(message, handlers) {
             part="retry-button"
             @click=${() => handlers.onRetry(message)}
             @keydown=${handlers.onRetryKeydown}
-            aria-label="${msg('Retry message')}"
+            aria-label="${i18n.messages.retryMessageLabel}"
           >
-            ${msg('Retry')}
+            ${i18n.messages.retryButton}
           </nr-button>`
         : nothing}
     </div>
@@ -197,12 +196,12 @@ export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText
 /**
  * Renders empty state
  */
-export function renderEmptyState() {
+export function renderEmptyState(i18n) {
     return html `
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
         <div class="empty-state__content">
-          ${msg('Start a conversation')}
+          ${i18n.messages.startConversationLabel}
         </div>
       </slot>
     </div>
@@ -211,11 +210,11 @@ export function renderEmptyState() {
 /**
  * Renders messages container with all messages
  */
-export function renderMessages(messages, suggestions, typingIndicator, messageHandlers) {
+export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n) {
     return html `
     <div class="messages" part="messages">
-      ${messages.length === 0 ? renderEmptyState() : nothing}
-      ${messages.map((message) => renderMessage(message, messageHandlers))}
+      ${messages.length === 0 ? renderEmptyState(i18n) : nothing}
+      ${messages.map((message) => renderMessage(message, messageHandlers, i18n))}
       ${suggestions}
       ${typingIndicator}
     </div>

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

@@ -4,17 +4,11 @@
  * SPDX-License-Identifier: MIT
  */
 import { TemplateResult, nothing } from 'lit';
-import { ChatbotSuggestion } from '../chatbot.types.js';
+import { ChatbotSuggestion, ChatbotI18n } 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;
+export declare function renderSuggestion(suggestion: ChatbotSuggestion, handlers: SuggestionTemplateHandlers, i18n: ChatbotI18n): TemplateResult;
+export declare function renderSuggestions(_chatStarted: boolean, suggestions: ChatbotSuggestion[], handlers: SuggestionTemplateHandlers, i18n: ChatbotI18n): TemplateResult | typeof nothing;
 //# sourceMappingURL=suggestion.template.d.ts.map

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

@@ -5,34 +5,27 @@
  */
 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) {
+export function renderSuggestion(suggestion, handlers, i18n) {
     return html `
-    <div 
-      class="suggestion ${classMap({ 'suggestion--disabled': suggestion.enabled === false })}" 
+    <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}"
+      aria-label="${i18n.messages.suggestionPrefix}${suggestion.text}"
     >
       ${suggestion.text}
     </div>
   `;
 }
-/**
- * Renders suggestions container
- */
-export function renderSuggestions(_chatStarted, suggestions, handlers) {
+export function renderSuggestions(_chatStarted, suggestions, handlers, i18n) {
     return suggestions.length > 0
         ? html `
         <div class="suggestion-container" part="suggestions">
-          ${suggestions.map((suggestion) => renderSuggestion(suggestion, handlers))}
+          ${suggestions.map((suggestion) => renderSuggestion(suggestion, handlers, i18n))}
         </div>
       `
         : nothing;

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { TemplateResult } from 'lit';
-import { ChatbotThread } from '../chatbot.types.js';
+import { ChatbotThread, ChatbotI18n } from '../chatbot.types.js';
 export interface ThreadSidebarTemplateHandlers {
     onCreateNew: () => void;
     onSelectThread: (threadId: string) => void;
@@ -16,6 +16,7 @@ export interface ThreadSidebarTemplateData {
     threads: ChatbotThread[];
     activeThreadId?: string;
     editingThreadId?: string;
+    i18n: ChatbotI18n;
 }
 /**
  * Renders thread sidebar

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

@@ -6,7 +6,6 @@
 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
@@ -53,13 +52,13 @@ function renderThreadItem(thread, data, handlers) {
     }}
           />
         ` : html `
-          <div class="thread-item__title">${thread.title || msg('New Chat')}</div>
+          <div class="thread-item__title">${thread.title || data.i18n.threads.newChatTitle}</div>
         `}
         <div class="thread-item__actions">
           ${handlers.onBookmarkThread && thread.bookmarked ? html `
             <button
               class="thread-item__action-btn thread-item__bookmark--active"
-              title="${msg('Remove bookmark')}"
+              title="${data.i18n.threads.removeBookmarkLabel}"
               @click=${(e) => {
         e.stopPropagation();
         handlers.onBookmarkThread(thread.id);
@@ -94,17 +93,17 @@ function renderThreadItem(thread, data, handlers) {
         }
     }}
               .items=${[
-        ...(handlers.onRenameThread ? [{ id: 'rename', label: msg('Rename') }] : []),
-        ...(handlers.onBookmarkThread ? [{ id: 'bookmark', label: thread.bookmarked ? msg('Remove bookmark') : msg('Bookmark') }] : []),
-        ...(handlers.onDeleteThread ? [{ id: 'delete', label: msg('Delete') }] : []),
+        ...(handlers.onRenameThread ? [{ id: 'rename', label: data.i18n.threads.renameLabel }] : []),
+        ...(handlers.onBookmarkThread ? [{ id: 'bookmark', label: thread.bookmarked ? data.i18n.threads.removeBookmarkLabel : data.i18n.threads.bookmarkLabel }] : []),
+        ...(handlers.onDeleteThread ? [{ id: 'delete', label: data.i18n.threads.deleteLabel }] : []),
     ]}
             >
               <button
                 slot="trigger"
                 class="thread-item__action-btn thread-item__menu"
-                title="${msg('More options')}"
+                title="${data.i18n.threads.moreOptionsLabel}"
                 part="thread-menu"
-                aria-label="${msg('More options')}"
+                aria-label="${data.i18n.threads.moreOptionsLabel}"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>
               </button>
@@ -128,7 +127,7 @@ export function renderThreadSidebar(data, handlers) {
     return html `
     <div class="thread-sidebar" part="thread-sidebar">
       <div class="thread-sidebar__header">
-        <h3>${msg('Conversations')}</h3>
+        <h3>${data.i18n.threads.conversationsTitle}</h3>
       </div>
 
       <div class="thread-list">
@@ -136,18 +135,18 @@ export function renderThreadSidebar(data, handlers) {
           <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')}
+              ${data.i18n.threads.bookmarksLabel}
             </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>
+            <div class="thread-section__label">${data.i18n.threads.allConversationsLabel}</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>
+            <p class="empty-msg">${data.i18n.threads.noConversationsLabel}</p>
           ` : nothing}
         ` : nothing}
       </div>

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { TemplateResult } from 'lit';
+import { ChatbotI18n } from '../chatbot.types.js';
 export interface UrlModalTemplateHandlers {
     onClose: () => void;
     onUrlInputChange: (e: Event) => void;
@@ -17,9 +18,7 @@ export interface UrlModalTemplateData {
     isLoading?: boolean;
     error?: string;
     selectedFileName?: string;
+    i18n: ChatbotI18n;
 }
-/**
- * Renders URL attachment modal
- */
 export declare function renderUrlModal(data: UrlModalTemplateData, handlers: UrlModalTemplateHandlers): TemplateResult;
 //# sourceMappingURL=url-modal.template.d.ts.map