@kodaris/krubble-app-components 1.0.68 → 1.0.70

package/dist/chatbot.d.ts

@@ -1,4 +1,18 @@
 import { LitElement } from 'lit';
+/**
+/**
+ * An image shown on a chat message. `url` is what the thumbnail/lightbox render:
+ * an object URL for an image the user just sent, or a server view URL for one
+ * loaded from conversation history.
+ */
+export interface KRChatbotAttachment {
+    /** URL used to display the image (thumbnail + lightbox). */
+    url: string;
+    /** Original filename, if known. */
+    name?: string;
+    /** MIME type, if known. */
+    mimeType?: string;
+}
 /**
  * Chat message interface
  */
@@ -6,15 +20,19 @@ export interface KRChatbotMessage {
     role: 'user' | 'assistant';
     content: string;
     reasoning?: string;
+    /** Images attached to this message (user messages only, for now). */
+    attachments?: KRChatbotAttachment[];
 }
 /**
  * Callback function type for sending messages.
- * Receives the user's message text and the current conversation history.
- * Must return a Response with a streaming body (SSE format).
+ * Receives the user's message text, the current conversation history, and the
+ * raw image files attached to this message. Must return a Response with a
+ * streaming body (SSE format).
  */
 export type KRChatbotSend = (params: {
     message: string;
     messages: KRChatbotMessage[];
+    files: File[];
 }) => Promise<Response>;
 /**
  * AI chatbot component with SSE streaming.
@@ -69,6 +87,10 @@ export declare class KRChatbot extends LitElement {
     private _dragStartTop;
     private _resizeStartW;
     private _resizeStartH;
+    /** Counter for depth-aware dragenter/dragleave tracking. */
+    private _dragDepth;
+    /** Monotonic id source for pending attachments. */
+    private _pendingSeq;
     /**
      * Callback function for sending messages. Receives the user's message and
      * current conversation history. Must return a Response with a streaming SSE body.
@@ -105,13 +127,24 @@ export declare class KRChatbot extends LitElement {
      * Whether the chat panel is open. Only relevant in floating mode.
      */
     opened: boolean;
+    /**
+     * Hide the built-in floating toggle button. Use this when an external
+     * control (e.g. the site-editor bar) owns opening the chat — the panel is
+     * then driven via the `open()` / `close()` / `toggle()` methods.
+     */
+    hideToggle: boolean;
     private _inputValue;
     private _isStreaming;
     private _statusText;
     private _error;
+    /** Images staged in the composer, before the message is sent. */
+    private _pendingAttachments;
+    /** True while a file is being dragged over the panel (shows the drop overlay). */
+    private _isDraggingFile;
     private _panelEl;
     private _messagesEl;
     private _inputEl;
+    private _fileInputEl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
@@ -119,6 +152,12 @@ export declare class KRChatbot extends LitElement {
      * Stops the current stream without clearing the conversation.
      */
     stop(): void;
+    /** Open the chat panel. */
+    open(): void;
+    /** Close the chat panel. */
+    close(): void;
+    /** Toggle the chat panel open/closed. */
+    toggle(): void;
     /**
      * Shows a full-viewport transparent overlay during drag/resize operations.
      *
@@ -150,6 +189,22 @@ export declare class KRChatbot extends LitElement {
     private _applyStoredLayout;
     private _handleInputChange;
     private _handleKeyDown;
+    private _openFilePicker;
+    private _handleFileInputChange;
+    private _handlePaste;
+    private _handleDragEnter;
+    private _handleDragOver;
+    private _handleDragLeave;
+    private _handleDrop;
+    private _hasFiles;
+    /** Stage a set of image files in the composer (held locally until send). */
+    private _addFiles;
+    private _removePending;
+    private _clearPending;
+    /** Open the shared full-screen previewer for an attachment. */
+    private _openAttachment;
+    /** Whether the send button is active: needs text or at least one image. */
+    private _canSend;
     private _handleSubmit;
     private _handleStop;
     private _handleClear;

package/dist/chatbot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../src/chatbot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;CAC9B,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BA8hBpB;IAIF,OAAO,CAAC,OAAO,CAAwD;IAEvE,OAAO,CAAC,QAAQ,CAAqB;IAErC,OAAO,CAAC,OAAO,CAAM;IAErB,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,QAAQ,CAA4B;IAE5C,OAAO,CAAC,UAAU,CAAM;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,aAAa,CAAK;IAI1B;;;OAGG;IAEH,IAAI,EAAE,aAAa,GAAG,IAAI,CAAQ;IAElC;;;OAGG;IAEH,KAAK,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAQ;IAE9C;;;OAGG;IAEH,IAAI,EAAE,CAAC,MAAM,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAG,IAAI,CAAQ;IAExD;;;OAGG;IAEH,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAElC;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,WAAW,SAAuB;IAElC;;OAEG;IAKH,MAAM,UAAS;IAKf,OAAO,CAAC,WAAW,CAAM;IAGzB,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,WAAW,CAAM;IAGzB,OAAO,CAAC,MAAM,CAAM;IAKpB,OAAO,CAAC,QAAQ,CAAe;IAG/B,OAAO,CAAC,WAAW,CAAe;IAGlC,OAAO,CAAC,QAAQ,CAAuB;IAI9B,iBAAiB;IAYjB,oBAAoB;IAUpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAsB9C;;OAEG;IACH,IAAI;IAMJ;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,gBAAgB,CA+CvB;IAED,OAAO,CAAC,cAAc,CAarB;IAED,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,aAAa;IA2FrB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,gBAAgB;IA2FxB,OAAO,CAAC,kBAAkB;IAsBjB,MAAM;CAgPhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../src/chatbot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAQrD;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACrC;AAED;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAoBxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BA4oBpB;IAIF,OAAO,CAAC,OAAO,CAAwD;IAEvE,OAAO,CAAC,QAAQ,CAAqB;IAErC,OAAO,CAAC,OAAO,CAAM;IAErB,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,QAAQ,CAA4B;IAE5C,OAAO,CAAC,UAAU,CAAM;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,aAAa,CAAK;IAE1B,4DAA4D;IAC5D,OAAO,CAAC,UAAU,CAAK;IAEvB,mDAAmD;IACnD,OAAO,CAAC,WAAW,CAAK;IAIxB;;;OAGG;IAEH,IAAI,EAAE,aAAa,GAAG,IAAI,CAAQ;IAElC;;;OAGG;IAEH,KAAK,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAQ;IAE9C;;;OAGG;IAEH,IAAI,EAAE,CAAC,MAAM,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAG,IAAI,CAAQ;IAExD;;;OAGG;IAEH,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAElC;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,WAAW,SAAuB;IAElC;;OAEG;IAKH,MAAM,UAAS;IAEf;;;;OAIG;IAMH,UAAU,UAAS;IAKnB,OAAO,CAAC,WAAW,CAAM;IAGzB,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,WAAW,CAAM;IAGzB,OAAO,CAAC,MAAM,CAAM;IAEpB,iEAAiE;IAEjE,OAAO,CAAC,mBAAmB,CAAoC;IAE/D,kFAAkF;IAElF,OAAO,CAAC,eAAe,CAAS;IAKhC,OAAO,CAAC,QAAQ,CAAe;IAG/B,OAAO,CAAC,WAAW,CAAe;IAGlC,OAAO,CAAC,QAAQ,CAAuB;IAGvC,OAAO,CAAC,YAAY,CAAoB;IAI/B,iBAAiB;IAYjB,oBAAoB;IAYpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAsB9C;;OAEG;IACH,IAAI;IAIJ,2BAA2B;IAC3B,IAAI;IAMJ,4BAA4B;IAC5B,KAAK;IAML,yCAAyC;IACzC,MAAM;IAMN;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,gBAAgB,CA+CvB;IAED,OAAO,CAAC,cAAc,CAarB;IAED,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,YAAY;IAoBpB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,SAAS;IAIjB,4EAA4E;IAC5E,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAKrB,+DAA+D;IAC/D,OAAO,CAAC,eAAe;IAOvB,2EAA2E;IAC3E,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,aAAa;IAoHrB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,gBAAgB;IA2FxB,OAAO,CAAC,kBAAkB;IAsBjB,MAAM;CAiUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/chatbot.js

@@ -8,7 +8,11 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { marked } from 'marked';
+import { KRFilePreview } from '@kodaris/krubble-components';
+/** Image MIME types the chatbot accepts (matches what Bedrock can ingest). */
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
 /**
  * AI chatbot component with SSE streaming.
  *
@@ -64,6 +68,10 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._dragStartTop = 0;
         this._resizeStartW = 0;
         this._resizeStartH = 0;
+        /** Counter for depth-aware dragenter/dragleave tracking. */
+        this._dragDepth = 0;
+        /** Monotonic id source for pending attachments. */
+        this._pendingSeq = 0;
         // --- @property (public API) ---
         /**
          * Callback function for sending messages. Receives the user's message and
@@ -101,11 +109,21 @@ let KRChatbot = class KRChatbot extends LitElement {
          * Whether the chat panel is open. Only relevant in floating mode.
          */
         this.opened = false;
+        /**
+         * Hide the built-in floating toggle button. Use this when an external
+         * control (e.g. the site-editor bar) owns opening the chat — the panel is
+         * then driven via the `open()` / `close()` / `toggle()` methods.
+         */
+        this.hideToggle = false;
         // --- @state (internal) ---
         this._inputValue = '';
         this._isStreaming = false;
         this._statusText = '';
         this._error = '';
+        /** Images staged in the composer, before the message is sent. */
+        this._pendingAttachments = [];
+        /** True while a file is being dragged over the panel (shows the drop overlay). */
+        this._isDraggingFile = false;
         this._handleMouseMove = (e) => {
             if (this._isDragging) {
                 let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
@@ -184,6 +202,8 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
         document.removeEventListener('mousemove', this._handleMouseMove);
         document.removeEventListener('mouseup', this._handleMouseUp);
+        // Release any object URLs still held by staged attachments.
+        this._pendingAttachments.forEach((p) => URL.revokeObjectURL(p.previewUrl));
     }
     updated(changed) {
         if (changed.has('messages') || changed.has('_statusText')) {
@@ -210,6 +230,22 @@ let KRChatbot = class KRChatbot extends LitElement {
     stop() {
         this._handleStop();
     }
+    /** Open the chat panel. */
+    open() {
+        if (!this.opened) {
+            this._handleToggle();
+        }
+    }
+    /** Close the chat panel. */
+    close() {
+        if (this.opened) {
+            this._handleToggle();
+        }
+    }
+    /** Toggle the chat panel open/closed. */
+    toggle() {
+        this._handleToggle();
+    }
     // --- Private methods ---
     /**
      * Shows a full-viewport transparent overlay during drag/resize operations.
@@ -378,14 +414,137 @@ let KRChatbot = class KRChatbot extends LitElement {
             this._handleSubmit();
         }
     }
+    // --- Attachments ---
+    _openFilePicker() {
+        this._fileInputEl?.click();
+    }
+    _handleFileInputChange(e) {
+        const input = e.target;
+        if (input.files) {
+            this._addFiles(input.files);
+        }
+        // Reset so picking the same file again re-fires change.
+        input.value = '';
+    }
+    _handlePaste(e) {
+        const items = e.clipboardData?.items;
+        if (!items) {
+            return;
+        }
+        const files = [];
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].kind === 'file') {
+                const file = items[i].getAsFile();
+                if (file) {
+                    files.push(file);
+                }
+            }
+        }
+        if (files.length) {
+            e.preventDefault();
+            this._addFiles(files);
+        }
+    }
+    _handleDragEnter(e) {
+        if (!this._hasFiles(e)) {
+            return;
+        }
+        e.preventDefault();
+        this._dragDepth++;
+        this._isDraggingFile = true;
+    }
+    _handleDragOver(e) {
+        if (!this._hasFiles(e)) {
+            return;
+        }
+        // Required so the drop event fires.
+        e.preventDefault();
+    }
+    _handleDragLeave(e) {
+        if (!this._hasFiles(e)) {
+            return;
+        }
+        this._dragDepth--;
+        if (this._dragDepth <= 0) {
+            this._dragDepth = 0;
+            this._isDraggingFile = false;
+        }
+    }
+    _handleDrop(e) {
+        if (!this._hasFiles(e)) {
+            return;
+        }
+        e.preventDefault();
+        this._dragDepth = 0;
+        this._isDraggingFile = false;
+        if (e.dataTransfer?.files) {
+            this._addFiles(e.dataTransfer.files);
+        }
+    }
+    _hasFiles(e) {
+        return Array.from(e.dataTransfer?.types || []).includes('Files');
+    }
+    /** Stage a set of image files in the composer (held locally until send). */
+    _addFiles(fileList) {
+        const files = Array.from(fileList).filter((f) => ACCEPTED_IMAGE_TYPES.includes(f.type));
+        if (!files.length) {
+            return;
+        }
+        files.forEach((file) => {
+            const pending = {
+                localId: 'att-' + this._pendingSeq++,
+                file,
+                name: file.name,
+                previewUrl: URL.createObjectURL(file),
+            };
+            this._pendingAttachments = [...this._pendingAttachments, pending];
+        });
+    }
+    _removePending(localId) {
+        const target = this._pendingAttachments.find((p) => p.localId === localId);
+        if (target) {
+            URL.revokeObjectURL(target.previewUrl);
+        }
+        this._pendingAttachments = this._pendingAttachments.filter((p) => p.localId !== localId);
+    }
+    _clearPending() {
+        this._pendingAttachments.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+        this._pendingAttachments = [];
+    }
+    /** Open the shared full-screen previewer for an attachment. */
+    _openAttachment(att) {
+        KRFilePreview.open({
+            src: att.url,
+            name: att.name || 'image',
+        });
+    }
+    /** Whether the send button is active: needs text or at least one image. */
+    _canSend() {
+        return Boolean(this._inputValue.trim()) || this._pendingAttachments.length > 0;
+    }
     _handleSubmit() {
-        if (!this._inputValue.trim() || !this.send || this._isStreaming) {
+        if (!this.send || this._isStreaming) {
             return;
         }
         const messageText = this._inputValue.trim();
+        const pending = this._pendingAttachments;
+        // Allow sending an image with no text, but require at least one of them.
+        if (!messageText && !pending.length) {
+            return;
+        }
+        // The raw files sent to the backend, and the display attachments for the
+        // sent message. The message reuses each preview object URL, so ownership of
+        // those URLs transfers to the message (we don't revoke them here).
+        const files = pending.map((p) => p.file);
+        const attachments = pending.map((p) => ({
+            url: p.previewUrl,
+            name: p.name,
+            mimeType: p.file.type,
+        }));
         const submitEvent = new CustomEvent('message-submit', {
             detail: {
                 message: messageText,
+                files,
             },
             bubbles: true,
             composed: true,
@@ -395,13 +554,20 @@ let KRChatbot = class KRChatbot extends LitElement {
         if (submitEvent.defaultPrevented) {
             return;
         }
-        this.messages = [...this.messages, {
-                role: 'user',
-                content: messageText,
-            }];
+        const userMessage = {
+            role: 'user',
+            content: messageText,
+        };
+        if (attachments.length) {
+            userMessage.attachments = attachments;
+        }
+        this.messages = [...this.messages, userMessage];
         this._inputValue = '';
         this._error = '';
         this._userHasScrolledUp = false;
+        // Clear the composer without revoking the object URLs — the sent message now
+        // owns them for display.
+        this._pendingAttachments = [];
         // Reset textarea height
         if (this._inputEl) {
             this._inputEl.style.height = 'auto';
@@ -437,6 +603,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         this.send({
             message: messageText,
             messages: this.messages.slice(0, -1),
+            files,
         }).then((response) => {
             if (!response.ok) {
                 this._handleStreamError('Request failed: ' + response.status);
@@ -597,31 +764,57 @@ let KRChatbot = class KRChatbot extends LitElement {
     // --- Render ---
     render() {
         return html `
-      <button
-        class=${classMap({
+      ${this.hideToggle ? nothing : html `
+        <button
+          class=${classMap({
             'toggle': true,
             'toggle--hidden': this.opened,
         })}
-        @click=${this._handleToggle}
-        title="Open chat"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          class="toggle-icon"
+          @click=${this._handleToggle}
+          title="Open chat"
         >
-          <path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
-          <path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
-        </svg>
-      </button>
-
-      <div class=${classMap({
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            class="toggle-icon"
+          >
+            <path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
+            <path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
+          </svg>
+        </button>
+      `}
+
+      <div
+        class=${classMap({
             'panel': true,
             'panel--opened': this.opened,
-        })}>
+        })}
+        @dragenter=${this._handleDragEnter}
+        @dragover=${this._handleDragOver}
+        @dragleave=${this._handleDragLeave}
+        @drop=${this._handleDrop}
+      >
+        ${this._isDraggingFile ? html `
+          <div class="drop-overlay">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
+              />
+            </svg>
+            <span>Drop images to attach</span>
+          </div>
+        ` : nothing}
         <div
           class="resize resize--n"
           data-dir="n"
@@ -735,6 +928,20 @@ let KRChatbot = class KRChatbot extends LitElement {
                   <div class="reasoning-content">${msg.reasoning}</div>
                 </details>
               ` : nothing}
+              ${msg.attachments && msg.attachments.length ? html `
+                <div class="attachments">
+                  ${msg.attachments.map((att) => html `
+                    <button
+                      class="attachment"
+                      type="button"
+                      title=${att.name || 'View image'}
+                      @click=${() => this._openAttachment(att)}
+                    >
+                      <img src=${att.url} alt=${att.name || ''} />
+                    </button>
+                  `)}
+                </div>
+              ` : nothing}
               ${msg.content ? html `
                 <div class="message-content">
                   ${msg.role === 'user'
@@ -776,8 +983,48 @@ let KRChatbot = class KRChatbot extends LitElement {
         ` : nothing}
 
         <div class="footer">
+          ${this._pendingAttachments.length ? html `
+            <div class="composer-attachments">
+              ${repeat(this._pendingAttachments, (p) => p.localId, (p) => html `
+                <div class="chip">
+                  <img src=${p.previewUrl} alt=${p.name} />
+                  <button
+                    class="chip-remove"
+                    title="Remove"
+                    @click=${() => this._removePending(p.localId)}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="3"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M6 18 18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              `)}
+            </div>
+          ` : nothing}
+          <input
+            class="file-input"
+            type="file"
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            multiple
+            hidden
+            @change=${this._handleFileInputChange}
+          />
           <div class="input-wrapper">
-            <button class="input-plus" title="Attach">+</button>
+            <button
+              class="input-plus"
+              title="Attach image"
+              @click=${this._openFilePicker}
+            >+</button>
             <textarea
               class="input"
               .value=${this._inputValue}
@@ -785,6 +1032,7 @@ let KRChatbot = class KRChatbot extends LitElement {
               rows="1"
               @input=${this._handleInputChange}
               @keydown=${this._handleKeyDown}
+              @paste=${this._handlePaste}
             ></textarea>
             ${this._isStreaming ? html `
               <button
@@ -811,7 +1059,7 @@ let KRChatbot = class KRChatbot extends LitElement {
               <button
                 class=${classMap({
             'send': true,
-            'send--disabled': !this._inputValue.trim(),
+            'send--disabled': !this._canSend(),
         })}
                 @click=${this._handleSubmit}
                 title="Send message"
@@ -1378,6 +1626,116 @@ KRChatbot.styles = css `
     .resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
     .resize--se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
 
+    /* Attachment thumbnails inside a sent message bubble */
+    .attachments {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .message--user .attachments {
+      justify-content: flex-end;
+    }
+
+    .attachment {
+      width: 120px;
+      height: 120px;
+      border-radius: 12px;
+      overflow: hidden;
+      background: #f2f2f4;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      cursor: zoom-in;
+      flex-shrink: 0;
+      padding: 0;
+    }
+
+    .attachment img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    /* Composer attachment chips (pre-send) */
+    .composer-attachments {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 0 6px 10px;
+    }
+
+    .chip {
+      position: relative;
+      width: 56px;
+      height: 56px;
+      border-radius: 10px;
+      overflow: hidden;
+      background: #f2f2f4;
+      border: 1px solid var(--kr-chatbot-border);
+      flex-shrink: 0;
+    }
+
+    .chip img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .chip-remove {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      border: none;
+      background: rgba(0, 0, 0, 0.6);
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      line-height: 1;
+    }
+
+    .chip-remove:hover {
+      background: rgba(0, 0, 0, 0.8);
+    }
+
+    .chip-remove svg {
+      width: 10px;
+      height: 10px;
+    }
+
+    /* Drag-and-drop overlay */
+    .drop-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 20;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 10px;
+      /* Frosted, mostly-opaque surface so the chat content behind is masked
+         and doesn't clash with the overlay label. */
+      background: rgba(255, 255, 255, 0.92);
+      backdrop-filter: blur(3px);
+      border: 2px dashed var(--kr-chatbot-primary);
+      border-radius: 16px;
+      color: var(--kr-chatbot-primary);
+      font-weight: 600;
+      font-size: 15px;
+      pointer-events: none;
+    }
+
+    .drop-overlay svg {
+      width: 32px;
+      height: 32px;
+    }
+
   `;
 __decorate([
     property({ attribute: false })
@@ -1406,6 +1764,13 @@ __decorate([
         reflect: true
     })
 ], KRChatbot.prototype, "opened", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'hide-toggle',
+        reflect: true
+    })
+], KRChatbot.prototype, "hideToggle", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_inputValue", void 0);
@@ -1418,6 +1783,12 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_error", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_pendingAttachments", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_isDraggingFile", void 0);
 __decorate([
     query('.panel')
 ], KRChatbot.prototype, "_panelEl", void 0);
@@ -1427,6 +1798,9 @@ __decorate([
 __decorate([
     query('.input')
 ], KRChatbot.prototype, "_inputEl", void 0);
+__decorate([
+    query('.file-input')
+], KRChatbot.prototype, "_fileInputEl", void 0);
 KRChatbot = __decorate([
     customElement('kr-chatbot')
 ], KRChatbot);