@nuraly/lumenui 0.3.9 → 0.5.0

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement, TemplateResult } from 'lit';
-import { ChatbotMessage, ChatbotSuggestion, ChatbotSize, ChatbotVariant, ChatbotLoadingType, ChatbotThread, ChatbotModule, ChatbotFile, ChatbotAction, ChatbotArtifact } from './chatbot.types.js';
+import { ChatbotMessage, ChatbotSuggestion, ChatbotSize, ChatbotVariant, ChatbotLoadingType, ChatbotThread, ChatbotModule, ChatbotFile, ChatbotAction, ChatbotArtifact, ChatbotI18nOverrides } from './chatbot.types.js';
 import { ChatbotCoreController } from './core/chatbot-core.controller.js';
 declare const NrChatbotElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
@@ -64,6 +64,11 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     disabled: boolean;
     /** Custom placeholder text */
     placeholder: string;
+    /**
+     * Override any UI string. Falls back to the default
+     * (from `@lit/localize`) when a key or section is omitted.
+     */
+    i18n?: ChatbotI18nOverrides;
     /** Show send button */
     showSendButton: boolean;
     /** Auto-scroll to new messages */
@@ -127,6 +132,8 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     private selectedUrlFileName;
     private isFilePreviewModalOpen;
     private previewFile;
+    private _isDragging;
+    private _dragDepth;
     private controllerUnsubscribes;
     private _audio;
     private _audioMode;
@@ -159,6 +166,7 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     private handleControllerMessageSent;
     private handleControllerMessageReceived;
     private handleControllerError;
+    private get resolvedI18n();
     render(): TemplateResult<1>;
     private renderModuleSelectedDisplay;
     private toggleThreadSidebar;
@@ -195,6 +203,11 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     private handleUrlConfirm;
     private handleUrlAttachFile;
     private handleFileRemove;
+    private dragHasFiles;
+    private handleDragEnter;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
     private handleFilePreview;
     private handleArtifactClick;
     private handleArtifactPanelClose;

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

@@ -26,6 +26,79 @@ import { localized, msg } from '@lit/localize';
 import styles from './chatbot.style.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { ChatbotSender, ChatbotSize, ChatbotVariant, ChatbotLoadingType, EMPTY_STRING } from './chatbot.types.js';
+const DEFAULT_I18N = {
+    input: {
+        placeholder: msg('Type your message...'),
+        chatInputAriaLabel: msg('Chat input'),
+        attachButton: msg('Attach'),
+        attachFilesAriaLabel: msg('Attach files'),
+        removeFileLabel: msg('Remove file'),
+        uploadingLabel: msg('Uploading'),
+        uploadingProgress: msg('Uploading…'),
+        dropFilesHere: msg('Drop files here to upload'),
+    },
+    send: {
+        sendButton: msg('Send'),
+        stopButton: msg('Stop'),
+        sendMessageLabel: msg('Send message'),
+        stopQueryLabel: msg('Stop query'),
+    },
+    audio: {
+        recordSpeechLabel: msg('Record speech to text'),
+        sendVoiceMessageLabel: msg('Send voice message'),
+        cancelRecordingLabel: msg('Cancel recording'),
+        speechToTextLabel: msg('Speech to text'),
+        voiceMessageLabel: msg('Voice message'),
+        convertToTextLabel: msg('Convert to text'),
+        sendAsVoiceMessageLabel: msg('Send as voice message'),
+    },
+    modules: {
+        moduleSelectionLabel: msg('Select Modules'),
+        moduleSearchPlaceholder: msg('Search modules...'),
+        moduleSelectAriaLabel: msg('Select modules'),
+        modulesSelectedSuffix: msg('modules selected'),
+    },
+    threads: {
+        conversationsTitle: msg('Conversations'),
+        bookmarksLabel: msg('Bookmarks'),
+        allConversationsLabel: msg('All Conversations'),
+        noConversationsLabel: msg('No conversations yet'),
+        newChatTitle: msg('New Chat'),
+        newConversationLabel: msg('New conversation'),
+        removeBookmarkLabel: msg('Remove bookmark'),
+        bookmarkLabel: msg('Bookmark'),
+        renameLabel: msg('Rename'),
+        deleteLabel: msg('Delete'),
+        moreOptionsLabel: msg('More options'),
+        showThreadsLabel: msg('Show threads'),
+        hideThreadsLabel: msg('Hide threads'),
+    },
+    messages: {
+        attachedFilesLabel: msg('Attached files'),
+        copyMessageLabel: msg('Copy message'),
+        retryMessageLabel: msg('Retry message'),
+        retryButton: msg('Retry'),
+        startConversationLabel: msg('Start a conversation'),
+        suggestionPrefix: msg('Select suggestion: '),
+    },
+    urlModal: {
+        addUrlTitle: msg('Add URL'),
+        urlLabel: msg('URL'),
+        urlPlaceholder: msg('Enter URL...'),
+        loadFromUrlLabel: msg('Load file from URL'),
+        selectedFileLabel: msg('Selected file'),
+        loadingFromUrlLabel: msg('Loading file from URL...'),
+        cancelButton: msg('Cancel'),
+        addButton: msg('Add'),
+    },
+    artifactPanel: {
+        copyCodeLabel: msg('Copy code'),
+        closePanelLabel: msg('Close panel'),
+    },
+    loading: {
+        agentWorkingLabel: msg('Agent is working...'),
+    },
+};
 import { renderChatbotMain, renderFilePreviewModal } from './templates/index.js';
 import { ChatbotAudioController } from './chatbot-audio.controller.js';
 /**
@@ -132,6 +205,8 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this.selectedUrlFileName = '';
         this.isFilePreviewModalOpen = false;
         this.previewFile = null;
+        this._isDragging = false;
+        this._dragDepth = 0;
         // Keep track of controller event unsubscriptions
         this.controllerUnsubscribes = [];
         this._audio = new ChatbotAudioController(this);
@@ -417,8 +492,24 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this.isBotTyping = false;
         console.error('Controller error:', data.error);
     }
+    get resolvedI18n() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const o = this.i18n;
+        return {
+            input: Object.assign(Object.assign({}, DEFAULT_I18N.input), ((_a = o === null || o === void 0 ? void 0 : o.input) !== null && _a !== void 0 ? _a : {})),
+            send: Object.assign(Object.assign({}, DEFAULT_I18N.send), ((_b = o === null || o === void 0 ? void 0 : o.send) !== null && _b !== void 0 ? _b : {})),
+            audio: Object.assign(Object.assign({}, DEFAULT_I18N.audio), ((_c = o === null || o === void 0 ? void 0 : o.audio) !== null && _c !== void 0 ? _c : {})),
+            modules: Object.assign(Object.assign({}, DEFAULT_I18N.modules), ((_d = o === null || o === void 0 ? void 0 : o.modules) !== null && _d !== void 0 ? _d : {})),
+            threads: Object.assign(Object.assign({}, DEFAULT_I18N.threads), ((_e = o === null || o === void 0 ? void 0 : o.threads) !== null && _e !== void 0 ? _e : {})),
+            messages: Object.assign(Object.assign({}, DEFAULT_I18N.messages), ((_f = o === null || o === void 0 ? void 0 : o.messages) !== null && _f !== void 0 ? _f : {})),
+            urlModal: Object.assign(Object.assign({}, DEFAULT_I18N.urlModal), ((_g = o === null || o === void 0 ? void 0 : o.urlModal) !== null && _g !== void 0 ? _g : {})),
+            artifactPanel: Object.assign(Object.assign({}, DEFAULT_I18N.artifactPanel), ((_h = o === null || o === void 0 ? void 0 : o.artifactPanel) !== null && _h !== void 0 ? _h : {})),
+            loading: Object.assign(Object.assign({}, DEFAULT_I18N.loading), ((_j = o === null || o === void 0 ? void 0 : o.loading) !== null && _j !== void 0 ? _j : {})),
+        };
+    }
     render() {
         var _a;
+        const i18n = this.resolvedI18n;
         const templateData = {
             boxed: this.boxed,
             showMessages: this.showMessages,
@@ -448,6 +539,7 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 showAudioButton: this.showAudioButton,
                 audioRecording: this._audio.state,
                 audioMode: this._audioMode,
+                i18n,
             },
             enableThreads: this.showThreads,
             enableThreadCreation: this.enableThreadCreation,
@@ -455,21 +547,26 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
             threadSidebar: this.showThreads ? {
                 threads: this.threads,
                 activeThreadId: this.activeThreadId,
-                editingThreadId: this._editingThreadId
+                editingThreadId: this._editingThreadId,
+                i18n,
             } : undefined,
-            isDragging: false,
+            enableFileUpload: this.enableFileUpload,
+            isDragging: this._isDragging,
+            i18n,
             enableArtifacts: this.enableArtifacts,
             artifactPanel: this.enableArtifacts ? {
                 artifact: this.selectedArtifact,
                 isOpen: this.isArtifactPanelOpen,
-                renderContent: (_a = this.renderArtifactContent) !== null && _a !== void 0 ? _a : this.getPluginArtifactRenderer()
+                renderContent: (_a = this.renderArtifactContent) !== null && _a !== void 0 ? _a : this.getPluginArtifactRenderer(),
+                i18n,
             } : undefined,
             urlModal: this.isUrlModalOpen ? {
                 isOpen: this.isUrlModalOpen,
                 urlInput: this.urlInput,
                 isLoading: this.isUrlLoading,
                 error: this.urlModalError,
-                selectedFileName: this.selectedUrlFileName
+                selectedFileName: this.selectedUrlFileName,
+                i18n,
             } : undefined
         };
         const templateHandlers = {
@@ -518,9 +615,10 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 }
             } : undefined,
             fileUploadArea: {
-                onDrop: () => { },
-                onDragOver: () => { },
-                onDragLeave: () => { }
+                onDragEnter: this.handleDragEnter.bind(this),
+                onDragOver: this.handleDragOver.bind(this),
+                onDragLeave: this.handleDragLeave.bind(this),
+                onDrop: this.handleDrop.bind(this),
             },
             urlModal: this.isUrlModalOpen ? {
                 onClose: this.handleUrlModalClose.bind(this),
@@ -577,7 +675,7 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         }
         return html `
       <span class="module-display-multiple">
-        ${count} ${msg('modules selected')}
+        ${count} ${this.resolvedI18n.modules.modulesSelectedSuffix}
       </span>
     `;
     }
@@ -828,6 +926,59 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         var _a;
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.removeFile(fileId);
     }
+    dragHasFiles(e) {
+        var _a;
+        const types = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types;
+        if (!types)
+            return false;
+        for (let i = 0; i < types.length; i++) {
+            if (types[i] === 'Files')
+                return true;
+        }
+        return false;
+    }
+    handleDragEnter(e) {
+        if (!this.enableFileUpload || this.disabled)
+            return;
+        if (!this.dragHasFiles(e))
+            return;
+        e.preventDefault();
+        this._dragDepth++;
+        this._isDragging = true;
+    }
+    handleDragOver(e) {
+        if (!this.enableFileUpload || this.disabled)
+            return;
+        if (!this.dragHasFiles(e))
+            return;
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'copy';
+    }
+    handleDragLeave(e) {
+        if (!this.enableFileUpload || this.disabled)
+            return;
+        if (!this.dragHasFiles(e))
+            return;
+        e.preventDefault();
+        this._dragDepth = Math.max(0, this._dragDepth - 1);
+        if (this._dragDepth === 0)
+            this._isDragging = false;
+    }
+    handleDrop(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            if (!this.enableFileUpload || this.disabled)
+                return;
+            e.preventDefault();
+            this._dragDepth = 0;
+            this._isDragging = false;
+            const files = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+            if (!files || files.length === 0)
+                return;
+            yield ((_b = this.controller) === null || _b === void 0 ? void 0 : _b.uploadFiles(Array.from(files)));
+        });
+    }
     handleFilePreview(file) {
         this.previewFile = file;
         this.isFilePreviewModalOpen = true;
@@ -1024,6 +1175,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NrChatbotElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Object })
+], NrChatbotElement.prototype, "i18n", void 0);
 __decorate([
     property({ type: Boolean })
 ], NrChatbotElement.prototype, "showSendButton", void 0);
@@ -1129,6 +1283,9 @@ __decorate([
 __decorate([
     state()
 ], NrChatbotElement.prototype, "previewFile", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "_isDragging", void 0);
 NrChatbotElement = __decorate([
     localized(),
     customElement('nr-chatbot')

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

@@ -31,6 +31,7 @@ export default css `
     flex: 1;
     min-height: 0;
     min-width: 300px;
+    position: relative;
   }
 
   .chatbot-container--with-sidebar,
@@ -851,7 +852,9 @@ export default css `
   }
 
   .file-upload-area {
-    display: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     top: 0;
     left: 0;
@@ -861,16 +864,10 @@ export default css `
     border: 0.25rem dashed var(--chatbot-user-message-bg);
     border-radius: var(--chatbot-radius);
     z-index: 10;
+    pointer-events: auto;
   }
 
-  .file-upload-area--visible {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .file-upload-area--drag-over {
-    background-color: rgba(15, 98, 254, 0.1);
+  .file-upload-area--dragging {
     border-color: var(--chatbot-user-message-bg);
   }
 

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

@@ -236,6 +236,100 @@ export interface ChatbotAudioRecordingState {
     duration: string;
     bars: number[];
 }
+/**
+ * Customizable UI strings. Pass a partial object via the
+ * chatbot's `i18n` property to override any of the defaults.
+ * Defaults come from `@lit/localize`, so translation files keep working.
+ */
+export interface ChatbotI18nInput {
+    placeholder: string;
+    chatInputAriaLabel: string;
+    attachButton: string;
+    attachFilesAriaLabel: string;
+    removeFileLabel: string;
+    uploadingLabel: string;
+    uploadingProgress: string;
+    dropFilesHere: string;
+}
+export interface ChatbotI18nSend {
+    sendButton: string;
+    stopButton: string;
+    sendMessageLabel: string;
+    stopQueryLabel: string;
+}
+export interface ChatbotI18nAudio {
+    recordSpeechLabel: string;
+    sendVoiceMessageLabel: string;
+    cancelRecordingLabel: string;
+    speechToTextLabel: string;
+    voiceMessageLabel: string;
+    convertToTextLabel: string;
+    sendAsVoiceMessageLabel: string;
+}
+export interface ChatbotI18nModules {
+    moduleSelectionLabel: string;
+    moduleSearchPlaceholder: string;
+    moduleSelectAriaLabel: string;
+    modulesSelectedSuffix: string;
+}
+export interface ChatbotI18nThreads {
+    conversationsTitle: string;
+    bookmarksLabel: string;
+    allConversationsLabel: string;
+    noConversationsLabel: string;
+    newChatTitle: string;
+    newConversationLabel: string;
+    removeBookmarkLabel: string;
+    bookmarkLabel: string;
+    renameLabel: string;
+    deleteLabel: string;
+    moreOptionsLabel: string;
+    showThreadsLabel: string;
+    hideThreadsLabel: string;
+}
+export interface ChatbotI18nMessages {
+    attachedFilesLabel: string;
+    copyMessageLabel: string;
+    retryMessageLabel: string;
+    retryButton: string;
+    startConversationLabel: string;
+    suggestionPrefix: string;
+}
+export interface ChatbotI18nUrlModal {
+    addUrlTitle: string;
+    urlLabel: string;
+    urlPlaceholder: string;
+    loadFromUrlLabel: string;
+    selectedFileLabel: string;
+    loadingFromUrlLabel: string;
+    cancelButton: string;
+    addButton: string;
+}
+export interface ChatbotI18nArtifactPanel {
+    copyCodeLabel: string;
+    closePanelLabel: string;
+}
+export interface ChatbotI18nLoading {
+    agentWorkingLabel: string;
+}
+export interface ChatbotI18n {
+    input: ChatbotI18nInput;
+    send: ChatbotI18nSend;
+    audio: ChatbotI18nAudio;
+    modules: ChatbotI18nModules;
+    threads: ChatbotI18nThreads;
+    messages: ChatbotI18nMessages;
+    urlModal: ChatbotI18nUrlModal;
+    artifactPanel: ChatbotI18nArtifactPanel;
+    loading: ChatbotI18nLoading;
+}
+/**
+ * Partial override shape for the chatbot's `i18n` property.
+ * Each section is optional, and within each section each key is optional.
+ */
+export type ChatbotI18nOverrides = {
+    [K in keyof ChatbotI18n]?: Partial<ChatbotI18n[K]>;
+};
 /**
  * Constants
  */

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

@@ -4,12 +4,13 @@
  * SPDX-License-Identifier: MIT
  */
 import { nothing, TemplateResult } from 'lit';
-import type { ChatbotArtifact } from '../chatbot.types.js';
+import type { ChatbotArtifact, ChatbotI18n } from '../chatbot.types.js';
 export interface ArtifactPanelTemplateData {
     artifact: ChatbotArtifact | null;
     isOpen: boolean;
     /** Custom content renderer. Return undefined/empty to fall back to default. */
     renderContent?: (artifact: ChatbotArtifact) => TemplateResult | undefined;
+    i18n: ChatbotI18n;
 }
 export interface ArtifactPanelTemplateHandlers {
     onClose: () => void;

package/dist/src/components/chatbot/templates/artifact-panel.template.js

@@ -5,7 +5,6 @@
  */
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { msg } from '@lit/localize';
 import { getLangDisplayName, renderMarkdown } from '../utils/index.js';
 /** Render the content area based on language */
 function renderArtifactContent(artifact) {
@@ -58,16 +57,16 @@ export function renderArtifactPanel(data, handlers) {
               size="small"
               .icon=${['copy']}
               @click=${() => handlers.onCopy(artifact)}
-              title="${msg('Copy code')}"
-              aria-label="${msg('Copy code')}"
+              title="${data.i18n.artifactPanel.copyCodeLabel}"
+              aria-label="${data.i18n.artifactPanel.copyCodeLabel}"
             ></nr-button>
             <nr-button
               type="text"
               size="small"
               .icon=${['x']}
               @click=${handlers.onClose}
-              title="${msg('Close panel')}"
-              aria-label="${msg('Close panel')}"
+              title="${data.i18n.artifactPanel.closePanelLabel}"
+              aria-label="${data.i18n.artifactPanel.closePanelLabel}"
             ></nr-button>
           </div>
         </div>

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

@@ -11,7 +11,7 @@ import { ThreadSidebarTemplateData, ThreadSidebarTemplateHandlers } from './thre
 import { FileUploadAreaTemplateHandlers } from './file-upload-area.template.js';
 import { UrlModalTemplateData, UrlModalTemplateHandlers } from './url-modal.template.js';
 import { ArtifactPanelTemplateData, ArtifactPanelTemplateHandlers } from './artifact-panel.template.js';
-import { ChatbotMessage, ChatbotSuggestion, ChatbotLoadingType } from '../chatbot.types.js';
+import { ChatbotMessage, ChatbotSuggestion, ChatbotLoadingType, ChatbotI18n } from '../chatbot.types.js';
 export interface ChatbotMainTemplateData {
     boxed?: boolean;
     /** Show messages area (set to false for input-only mode) */
@@ -27,7 +27,9 @@ export interface ChatbotMainTemplateData {
     enableThreadCreation: boolean;
     isThreadSidebarOpen: boolean;
     threadSidebar?: ThreadSidebarTemplateData;
+    enableFileUpload: boolean;
     isDragging: boolean;
+    i18n: ChatbotI18n;
     urlModal?: UrlModalTemplateData;
     enableArtifacts?: boolean;
     artifactPanel?: ArtifactPanelTemplateData;

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