@nuraly/lumenui 0.3.9 → 0.6.0

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>
-        <div class="file-upload-area__text">
-          ${msg('Drop files here to upload')}
+      <div class="file-upload-area__content" part="file-upload-area-content">
+        <nr-icon name="upload" size="xlarge" part="file-upload-area-icon"></nr-icon>
+        <div class="file-upload-area__text" part="file-upload-area-text">
+          ${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';
@@ -46,6 +45,7 @@ function renderContextTags(files, onRemove, onFileClick) {
           <div
             slot="trigger"
             class="file-thumb ${f.isUploading ? 'file-thumb--uploading' : ''}"
+            part="file-thumb"
             role="button"
             tabindex="0"
             title="${f.name}"
@@ -54,24 +54,26 @@ function renderContextTags(files, onRemove, onFileClick) {
             ${isImage(f.mimeType) && (f.previewUrl || f.url) ? html `
               <img
                 class="file-thumb__image"
+                part="file-thumb-image"
                 src="${f.previewUrl || f.url}"
                 alt="${f.name}"
               />
             ` : html `
-              <div class="file-thumb__ext" data-ext="${getExtension(f.name, f.mimeType)}">
-                <span class="file-thumb__ext-label">${getExtension(f.name, f.mimeType)}</span>
+              <div class="file-thumb__ext" part="file-thumb-ext" data-ext="${getExtension(f.name, f.mimeType)}">
+                <span class="file-thumb__ext-label" part="file-thumb-ext-label">${getExtension(f.name, f.mimeType)}</span>
               </div>
             `}
             ${f.isUploading ? html `
-              <div class="file-thumb__spinner" aria-label="${msg('Uploading')}">
+              <div class="file-thumb__spinner" part="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')}"
+              part="file-thumb-remove"
+              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 +99,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 +122,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 +150,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 +176,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 +192,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"/>
@@ -200,12 +202,13 @@ function renderRecordingBar(data, handlers) {
         <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
       </svg>`;
     return html `
-    <div class="audio-recording-bar">
+    <div class="audio-recording-bar" part="audio-recording-bar">
       <button
         class="audio-rec-cancel"
-        title="${msg('Cancel recording')}"
+        part="audio-cancel-button"
+        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"/>
@@ -214,22 +217,23 @@ function renderRecordingBar(data, handlers) {
         </svg>
       </button>
 
-      <div class="audio-rec-indicator">
-        <span class="audio-rec-dot"></span>
-        <div class="audio-rec-wave">
+      <div class="audio-rec-indicator" part="audio-indicator">
+        <span class="audio-rec-dot" part="audio-dot"></span>
+        <div class="audio-rec-wave" part="audio-wave">
           ${bars.map(v => html `
-            <div class="audio-rec-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
+            <div class="audio-rec-bar" part="audio-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
           `)}
         </div>
-        <span class="audio-rec-time">${duration}</span>
+        <span class="audio-rec-time" part="audio-time">${duration}</span>
       </div>
 
-      <span class="audio-rec-mode-label">
-        ${isTranscribe ? msg('Speech to text') : msg('Voice message')}
+      <span class="audio-rec-mode-label" part="audio-mode-label">
+        ${isTranscribe ? data.i18n.audio.speechToTextLabel : data.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
         class="audio-rec-send ${isTranscribe ? 'audio-rec-send--transcribe' : ''}"
+        part="audio-send-button"
         title="${sendTitle}"
         @click=${handlers.onAudioSend}
         aria-label="${sendTitle}"
@@ -244,23 +248,24 @@ function renderRecordingBar(data, handlers) {
  */
 function renderActionButtons(data, handlers) {
     return html `
-    <div class="action-buttons-row">
-      <div class="action-buttons-left">
+    <div class="action-buttons-row" part="actions">
+      <div class="action-buttons-left" part="actions-left">
         ${data.enableFileUpload ? renderFileUploadButton(data, handlers) : nothing}
         ${data.enableModuleSelection && data.moduleOptions.length > 0
         ? renderModuleSelector(data, handlers)
         : nothing}
       </div>
 
-      <div class="action-buttons-right">
+      <div class="action-buttons-right" part="actions-right">
         ${data.showAudioButton && !data.isQueryRunning ? html `
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
-            title="${msg('Record speech to text')}"
+            part="audio-mic-button audio-mic-transcribe"
+            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 +280,11 @@ function renderActionButtons(data, handlers) {
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
-            title="${msg('Send voice message')}"
+            part="audio-mic-button audio-mic-voice"
+            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,18 +322,18 @@ 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 -->
-        <div class="input-row">
+        <div class="input-row" part="input-row">
           <div
             class="input-box__input"
             part="input"
             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"
@@ -145,10 +144,11 @@ export function renderMessage(message, handlers) {
           size="small"
           color="#9ca3af"
           class="message__copy"
+          part="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 +162,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>
@@ -178,18 +178,18 @@ export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText
         return nothing;
     const indicatorContent = loadingIndicator === ChatbotLoadingType.Dots
         ? html `
-        <div class="dots">
+        <div class="dots" part="typing-dots">
           <span></span>
           <span></span>
           <span></span>
         </div>
       `
-        : html `<div class="spinner"></div>`;
+        : html `<div class="spinner" part="typing-spinner"></div>`;
     return html `
     <div class="message bot loading" part="typing-indicator">
-      <div class="message__content">
+      <div class="message__content" part="typing-content">
         ${indicatorContent}
-        ${loadingText ? html `<span class="loading-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
+        ${loadingText ? html `<span class="loading-text" part="typing-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
       </div>
     </div>
   `;
@@ -197,12 +197,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')}
+        <div class="empty-state__content" part="empty-state-content">
+          ${i18n.messages.startConversationLabel}
         </div>
       </slot>
     </div>
@@ -211,11 +211,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
@@ -27,6 +26,7 @@ function renderThreadItem(thread, data, handlers) {
         ${data.editingThreadId === thread.id && handlers.onRenameThread ? html `
           <input
             class="thread-item__rename-input"
+            part="thread-rename-input"
             type="text"
             .value=${thread.title || ''}
             @click=${(e) => e.stopPropagation()}
@@ -53,13 +53,13 @@ function renderThreadItem(thread, data, handlers) {
     }}
           />
         ` : html `
-          <div class="thread-item__title">${thread.title || msg('New Chat')}</div>
+          <div class="thread-item__title" part="thread-title">${thread.title || data.i18n.threads.newChatTitle}</div>
         `}
-        <div class="thread-item__actions">
+        <div class="thread-item__actions" part="thread-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 +94,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>
@@ -112,10 +112,10 @@ function renderThreadItem(thread, data, handlers) {
           ` : ''}
         </div>
       </div>
-      <div class="thread-item__preview">
+      <div class="thread-item__preview" part="thread-preview">
         ${previewText}
       </div>
-      <div class="thread-item__timestamp">${formatTimestamp(thread.updatedAt)}</div>
+      <div class="thread-item__timestamp" part="thread-timestamp">${formatTimestamp(thread.updatedAt)}</div>
     </div>
   `;
 }
@@ -127,27 +127,27 @@ export function renderThreadSidebar(data, handlers) {
     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 class="thread-sidebar__header" part="thread-sidebar-header">
+        <h3 part="thread-sidebar-title">${data.i18n.threads.conversationsTitle}</h3>
       </div>
 
-      <div class="thread-list">
+      <div class="thread-list" part="thread-list">
         ${bookmarkedThreads.length > 0 ? html `
-          <div class="thread-section" part="thread-section-bookmarks">
-            <div class="thread-section__label">
+          <div class="thread-section" part="thread-section thread-section-bookmarks">
+            <div class="thread-section__label" part="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" part="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" part="thread-empty">${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