@cnt-dev/chat-ui 0.1.0

package/resources/chatui/ChatBox-dbg.js

@@ -0,0 +1,1099 @@
+/*!
+ * ${copyright}
+ */
+sap.ui.define(["sap/ui/core/Control", "sap/ui/core/IconPool", "sap/ui/core/Lib", "sap/base/i18n/Localization", "./markdown"], function (Control, IconPool, Lib, Localization, __markdownToHtml) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  const markdownToHtml = _interopRequireDefault(__markdownToHtml);
+  /**
+   * Constructor for a new <code>chatui.ChatBox</code> control.
+   *
+   * A flexible chat UI block that can be embedded into any UI5 application.
+   * It renders a conversation sidebar, a scrollable message list, an
+   * auto-growing input textarea and a send button. The control is
+   * intentionally transport-agnostic: it fires a <code>send</code> event with
+   * the user's message and expects the embedding application to feed the
+   * assistant's reply back via {@link #addAssistantMessage} /
+   * {@link #appendToLastAssistantMessage}.
+   *
+   * The control fills the space provided by its parent. For standalone use
+   * a sensible default size is applied via CSS.
+   *
+   * @extends sap.ui.core.Control
+   *
+   * @author CONET
+   * @version 0.1.0
+   *
+   * @constructor
+   * @public
+   * @name chatui.ChatBox
+   */
+  const ChatBox = Control.extend("chatui.ChatBox", {
+    renderer: {
+      apiVersion: 2,
+      render(rm, control) {
+        const sendIcon = IconPool.getIconInfo("sap-icon://paper-plane");
+        const newChatIcon = IconPool.getIconInfo("sap-icon://add");
+        const attachIcon = IconPool.getIconInfo("sap-icon://attachment");
+        const i18n = control._i18n();
+        const placeholder = control.getPlaceholder() || i18n.getText("chatbox.placeholder") || "";
+        const allowAttachments = control.getAllowAttachments();
+        rm.openStart("div", control);
+        rm.class("cnetChatBox");
+        rm.style("width", control.getWidth());
+        rm.style("height", control.getHeight());
+        rm.openEnd();
+
+        // ---- Sidebar ----
+        rm.openStart("aside");
+        rm.class("cnetChatBox-sidebar");
+        rm.openEnd();
+        rm.openStart("div");
+        rm.class("cnetChatBox-sidebar-header");
+        rm.openEnd();
+        rm.openStart("span");
+        rm.class("cnetChatBox-sidebar-title");
+        rm.openEnd();
+        rm.text(i18n.getText("chatbox.conversations") ?? "");
+        rm.close("span");
+        rm.close("div");
+        rm.openStart("div", control.getId() + "-conversations");
+        rm.class("cnetChatBox-conversations");
+        rm.openEnd();
+        rm.close("div");
+        rm.close("aside");
+
+        // ---- Main column ----
+        rm.openStart("div");
+        rm.class("cnetChatBox-main");
+        rm.openEnd();
+
+        // Header
+        rm.openStart("div");
+        rm.class("cnetChatBox-header");
+        rm.openEnd();
+        rm.openStart("div", control.getId() + "-headerTitle");
+        rm.class("cnetChatBox-header-title");
+        rm.openEnd();
+        rm.close("div");
+        rm.openStart("button", control.getId() + "-newChat");
+        rm.class("cnetChatBox-newChatButton");
+        rm.attr("type", "button");
+        rm.attr("title", i18n.getText("chatbox.newConversation") ?? "");
+        rm.openEnd();
+        rm.openStart("span");
+        rm.class("cnetChatBox-icon");
+        if (newChatIcon) rm.style("font-family", newChatIcon.fontFamily);
+        rm.openEnd();
+        rm.text(newChatIcon?.content ?? "＋");
+        rm.close("span");
+        rm.openStart("span");
+        rm.class("cnetChatBox-newChatButton-label");
+        rm.openEnd();
+        rm.text(i18n.getText("chatbox.newConversation") ?? "");
+        rm.close("span");
+        rm.close("button");
+        rm.close("div");
+
+        // Messages
+        rm.openStart("div", control.getId() + "-messages");
+        rm.class("cnetChatBox-messages");
+        rm.openEnd();
+        rm.openStart("div");
+        rm.class("cnetChatBox-empty");
+        rm.openEnd();
+        rm.text(i18n.getText("chatbox.emptyHint") ?? "");
+        rm.close("div");
+        rm.close("div");
+
+        // Input area
+        rm.openStart("div");
+        rm.class("cnetChatBox-inputArea");
+        rm.openEnd();
+        rm.openStart("div");
+        rm.class("cnetChatBox-composer");
+        rm.openEnd();
+        rm.openStart("div", control.getId() + "-pending");
+        rm.class("cnetChatBox-attachmentsPending");
+        rm.openEnd();
+        rm.close("div");
+        rm.openStart("textarea", control.getId() + "-input");
+        rm.class("cnetChatBox-textarea");
+        rm.attr("placeholder", placeholder);
+        rm.attr("rows", "1");
+        if (control.getBusy()) rm.attr("disabled", "disabled");
+        rm.openEnd();
+        rm.close("textarea");
+        rm.openStart("div");
+        rm.class("cnetChatBox-composerBar");
+        rm.openEnd();
+        rm.openStart("div");
+        rm.class("cnetChatBox-composerBar-left");
+        rm.openEnd();
+        if (allowAttachments) {
+          rm.openStart("button", control.getId() + "-attach");
+          rm.class("cnetChatBox-toolButton");
+          rm.class("cnetChatBox-attach");
+          rm.attr("type", "button");
+          rm.attr("title", i18n.getText("chatbox.attach") ?? "");
+          rm.attr("aria-label", i18n.getText("chatbox.attach") ?? "");
+          rm.openEnd();
+          rm.openStart("span");
+          rm.class("cnetChatBox-icon");
+          if (attachIcon) rm.style("font-family", attachIcon.fontFamily);
+          rm.openEnd();
+          rm.text(attachIcon?.content ?? "📎");
+          rm.close("span");
+          rm.close("button");
+          rm.voidStart("input", control.getId() + "-fileinput");
+          rm.class("cnetChatBox-fileinput");
+          rm.attr("type", "file");
+          rm.attr("multiple", "multiple");
+          if (control.getAttachmentAccept()) rm.attr("accept", control.getAttachmentAccept());
+          rm.voidEnd();
+        }
+        rm.close("div");
+        rm.openStart("button", control.getId() + "-send");
+        rm.class("cnetChatBox-send");
+        rm.attr("type", "button");
+        rm.attr("title", i18n.getText("chatbox.send") ?? "");
+        rm.attr("aria-label", i18n.getText("chatbox.send") ?? "");
+        rm.openEnd();
+        rm.openStart("span");
+        rm.class("cnetChatBox-icon");
+        if (sendIcon) rm.style("font-family", sendIcon.fontFamily);
+        rm.openEnd();
+        rm.text(sendIcon?.content ?? "➤");
+        rm.close("span");
+        rm.close("button");
+        rm.close("div");
+        rm.close("div");
+        rm.close("div");
+        rm.close("div"); // main
+
+        if (allowAttachments) {
+          rm.openStart("div", control.getId() + "-drop");
+          rm.class("cnetChatBox-dropOverlay");
+          rm.openEnd();
+          rm.openStart("span");
+          rm.class("cnetChatBox-dropLabel");
+          rm.openEnd();
+          rm.text(i18n.getText("chatbox.dropHere") ?? "");
+          rm.close("span");
+          rm.close("div");
+        }
+        rm.close("div");
+      }
+    },
+    metadata: {
+      library: "chatui",
+      properties: {
+        /**
+         * Placeholder shown in the empty input field. If empty, a
+         * localised default is used.
+         */
+        placeholder: {
+          type: "string",
+          group: "Appearance",
+          defaultValue: ""
+        },
+        /**
+         * When true, the input and buttons are disabled — typically set
+         * while the assistant is producing a reply.
+         */
+        busy: {
+          type: "boolean",
+          group: "Behavior",
+          defaultValue: false
+        },
+        /**
+         * CSS width of the control. Defaults to <code>100%</code> so the
+         * chat adapts to its parent; override for a fixed size.
+         */
+        width: {
+          type: "sap.ui.core.CSSSize",
+          group: "Dimension",
+          defaultValue: "100%"
+        },
+        /**
+         * CSS height of the control. Defaults to <code>100%</code>; falls
+         * back to a sensible min-height when the parent has no explicit
+         * height.
+         */
+        height: {
+          type: "sap.ui.core.CSSSize",
+          group: "Dimension",
+          defaultValue: "100%"
+        },
+        /**
+         * When true (default), the user can attach files via the paperclip
+         * button and drag-and-drop. Uploaded <code>File</code> objects are
+         * handed to the consumer via the <code>files</code> parameter of
+         * the <code>send</code> event — the library never performs any
+         * network transfer itself.
+         */
+        allowAttachments: {
+          type: "boolean",
+          group: "Behavior",
+          defaultValue: true
+        },
+        /**
+         * Value passed to the underlying <code>&lt;input type="file"&gt;</code>
+         * as its <code>accept</code> attribute (e.g. <code>"image/*"</code>
+         * or <code>".pdf,.docx"</code>). Empty string means "any file".
+         */
+        attachmentAccept: {
+          type: "string",
+          group: "Behavior",
+          defaultValue: ""
+        },
+        /**
+         * The list of conversations shown in the sidebar. Each entry has
+         * an <code>id</code>, an optional <code>title</code>, an optional
+         * ordered array of <code>messages</code>, and an optional
+         * <code>updatedAt</code> timestamp (number, ISO string or Date).
+         * Passed in by the embedding application and never mutated by
+         * the library. When set for the first time, the library
+         * automatically selects and displays the first conversation. If
+         * the property is empty or unset, an empty new-chat view is
+         * shown.
+         */
+        conversations: {
+          type: "object",
+          group: "Data",
+          defaultValue: []
+        },
+        /**
+         * The id of the currently displayed conversation. Empty string
+         * means "new chat draft" — no history is shown, and the next
+         * <code>send</code> event carries an empty <code>conversationId</code>
+         * so the consumer can allocate a fresh id. When set to a value
+         * that matches an entry in {@link #getConversations}, that
+         * conversation's messages are loaded into the transcript.
+         */
+        activeConversationId: {
+          type: "string",
+          group: "Data",
+          defaultValue: ""
+        }
+      },
+      events: {
+        /**
+         * Fired when the user submits a prompt. The embedding
+         * application should produce an assistant response and feed it
+         * back via {@link #addAssistantMessage} or
+         * {@link #appendToLastAssistantMessage}.
+         */
+        send: {
+          parameters: {
+            /** The prompt the user submitted (trimmed; empty when only files are sent). */
+            message: {
+              type: "string"
+            },
+            /** File objects the user attached; empty array if none. Not transferred by the library — the consumer is responsible for upload/transport. */
+            files: {
+              type: "object"
+            },
+            /** Id of the conversation the message belongs to. Empty string when the user is composing in a new-chat draft — the consumer typically allocates a fresh id and pushes an updated conversation list back. */
+            conversationId: {
+              type: "string"
+            }
+          }
+        },
+        /**
+         * Fired when the user clicks the "Neue Konversation" button.
+         * The transcript view has already been cleared and
+         * <code>activeConversationId</code> reset to <code>""</code> by
+         * the time the event fires — listeners typically use this to
+         * reset any server-side session state.
+         */
+        newChat: {},
+        /**
+         * Fired when the user picks a conversation from the sidebar.
+         * The library has already switched the transcript view to that
+         * conversation and updated <code>activeConversationId</code>.
+         */
+        conversationSelect: {
+          parameters: {
+            /** Id of the conversation the user selected. */
+            id: {
+              type: "string"
+            }
+          }
+        },
+        /**
+         * Fired when the user clicks the × on a conversation in the
+         * sidebar. The library does not mutate the conversations
+         * property itself — the consumer is expected to drop the entry
+         * from its store and push an updated list back via
+         * {@link #setConversations}.
+         */
+        conversationDelete: {
+          parameters: {
+            /** Id of the conversation the user asked to delete. */
+            id: {
+              type: "string"
+            }
+          }
+        }
+      }
+    },
+    constructor: function _constructor(id, settings) {
+      Control.prototype.constructor.call(this, id, settings);
+      this._messages = [];
+      this._pendingAttachments = [];
+      this._conversations = [];
+      this._initialised = false;
+      this._onLocaleChange = () => {
+        this.invalidate();
+      };
+    },
+    init: function _init() {
+      Localization.attachChange(this._onLocaleChange);
+    },
+    exit: function _exit() {
+      Localization.detachChange(this._onLocaleChange);
+    },
+    onAfterRendering: function _onAfterRendering() {
+      const textarea = this._dom("input");
+      const sendBtn = this._dom("send");
+      const newChatBtn = this._dom("newChat");
+      textarea?.addEventListener("input", () => {
+        textarea.style.height = "auto";
+        textarea.style.height = Math.min(textarea.scrollHeight, 160) + "px";
+      });
+      textarea?.addEventListener("keydown", e => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          this._submit();
+        }
+      });
+      sendBtn?.addEventListener("click", () => this._submit());
+      newChatBtn?.addEventListener("click", () => this._startNewChat());
+      if (this.getAllowAttachments()) {
+        this._wireAttachments();
+      }
+      this._renderSidebar();
+      this._renderHeaderTitle();
+      this._restoreMessages();
+      this._renderPending();
+    },
+    /**
+     * Append an assistant message to the transcript. Pass an empty string
+     * to open a "pending" bubble that can then be filled incrementally via
+     * {@link #appendToLastAssistantMessage}.
+     *
+     * @public
+     */
+    addAssistantMessage: function _addAssistantMessage(text) {
+      this._messages.push({
+        role: "assistant",
+        content: text ?? ""
+      });
+      this._appendMessageDom(this._messages.length - 1);
+      return this;
+    },
+    /**
+     * Append a chunk to the last assistant message. Useful when streaming
+     * tokens from a language model. If the last message is not a plain
+     * assistant text message, a new one is started.
+     *
+     * @public
+     */
+    appendToLastAssistantMessage: function _appendToLastAssistantMessage(chunk) {
+      if (!chunk) return this;
+      const last = this._messages[this._messages.length - 1];
+      if (!last || last.role !== "assistant" || last.control) {
+        return this.addAssistantMessage(chunk);
+      }
+      last.content += chunk;
+      this._updateBubble(this._messages.length - 1);
+      return this;
+    },
+    /**
+     * Attach an arbitrary UI5 control as a stand-alone assistant bubble
+     * (e.g. a <code>sap.viz.ui5.controls.VizFrame</code>, an
+     * <code>sap.ui.integration.widgets.Card</code>, or any custom
+     * control). The library owns the control's lifecycle from here on —
+     * it is destroyed together with the ChatBox as well as on
+     * {@link #clear}, {@link #setMessages}, or the user-driven new-chat
+     * action. Do not add the same control twice.
+     *
+     * @public
+     */
+    addAssistantControl: function _addAssistantControl(control) {
+      this.addDependent(control);
+      this._messages.push({
+        role: "assistant",
+        content: "",
+        control
+      });
+      this._appendMessageDom(this._messages.length - 1);
+      return this;
+    },
+    /**
+     * Remove all messages from the transcript. Does not fire
+     * <code>newChat</code> — that event is reserved for the user-driven
+     * clear action. Does not touch the conversations list.
+     *
+     * @public
+     */
+    clear: function _clear() {
+      this._messages = [];
+      this._pendingAttachments = [];
+      this.destroyDependents();
+      this._restoreMessages();
+      this._renderPending();
+      return this;
+    },
+    /**
+     * Read-only snapshot of the current transcript. Intended for
+     * persistence — do not mutate.
+     *
+     * @public
+     */
+    getMessages: function _getMessages() {
+      return this._messages.slice();
+    },
+    /**
+     * Replace the transcript with the given messages. Intended as a
+     * restore path — the consumer stores {@link #getMessages} somewhere
+     * (localStorage, backend, …) and hands it back after a reload. Does
+     * not fire <code>newChat</code> or <code>send</code>. Pending
+     * attachments (a possibly ongoing draft) are left untouched. Invalid
+     * entries (missing/unknown <code>role</code> or non-string
+     * <code>content</code>) are silently skipped.
+     *
+     * @public
+     */
+    setMessages: function _setMessages(messages) {
+      this._messages = this._sanitiseMessages(messages);
+      this.destroyDependents();
+      this._restoreMessages();
+      return this;
+    },
+    /**
+     * Replace the conversations list shown in the sidebar. On the first
+     * call with a non-empty list, the first entry is automatically
+     * selected and its messages are loaded into the transcript. Later
+     * calls only update the sidebar — call {@link #setActiveConversationId}
+     * to switch the visible transcript.
+     *
+     * @public
+     */
+    setConversations: function _setConversations(conversations) {
+      const list = this._sanitiseConversations(conversations);
+      this._conversations = list;
+      this.setProperty("conversations", list, true);
+      if (!this._initialised && list.length > 0 && !this.getActiveConversationId()) {
+        const first = list[0];
+        this.setProperty("activeConversationId", first.id, true);
+        this._messages = this._sanitiseMessages(first.messages ?? []);
+        this.destroyDependents();
+        this._restoreMessages();
+        this._renderHeaderTitle();
+      }
+      this._initialised = true;
+      this._renderSidebar();
+      return this;
+    },
+    /**
+     * Read-only snapshot of the conversations currently shown in the
+     * sidebar.
+     *
+     * @public
+     */
+    getConversations: function _getConversations() {
+      return this._conversations.slice();
+    },
+    /**
+     * Switch the transcript view to the given conversation. If the id
+     * does not match any conversation (including the empty string), the
+     * transcript is cleared — that is the "new chat draft" state.
+     *
+     * @public
+     */
+    setActiveConversationId: function _setActiveConversationId(id) {
+      const next = typeof id === "string" ? id : "";
+      if (next === this.getActiveConversationId()) return this;
+      this.setProperty("activeConversationId", next, true);
+      const list = this._conversations ?? [];
+      const conv = list.find(c => c.id === next);
+      this._messages = conv ? this._sanitiseMessages(conv.messages ?? []) : [];
+      this._pendingAttachments = [];
+      this.destroyDependents();
+      this._renderSidebar();
+      this._renderHeaderTitle();
+      this._restoreMessages();
+      this._renderPending();
+      return this;
+    },
+    _i18n: function _i18n() {
+      return Lib.getResourceBundleFor("chatui");
+    },
+    _dom: function _dom(suffix) {
+      return document.getElementById(this.getId() + "-" + suffix);
+    },
+    _messagesContainer: function _messagesContainer() {
+      return this._dom("messages");
+    },
+    _sanitiseMessages: function _sanitiseMessages(messages) {
+      const clean = [];
+      if (!Array.isArray(messages)) return clean;
+      for (const raw of messages) {
+        if (!raw || raw.role !== "user" && raw.role !== "assistant") continue;
+        if (typeof raw.content !== "string") continue;
+        if (raw.control) continue;
+        const msg = {
+          role: raw.role,
+          content: raw.content
+        };
+        if (Array.isArray(raw.files) && raw.files.length > 0) {
+          msg.files = raw.files.slice();
+        }
+        clean.push(msg);
+      }
+      return clean;
+    },
+    _sanitiseConversations: function _sanitiseConversations(conversations) {
+      const clean = [];
+      if (!Array.isArray(conversations)) return clean;
+      for (const raw of conversations) {
+        if (!raw || typeof raw.id !== "string" || !raw.id) continue;
+        const conv = {
+          id: raw.id
+        };
+        if (typeof raw.title === "string") conv.title = raw.title;
+        if (Array.isArray(raw.messages)) conv.messages = this._sanitiseMessages(raw.messages);
+        if (raw.updatedAt !== undefined && raw.updatedAt !== null) conv.updatedAt = raw.updatedAt;
+        clean.push(conv);
+      }
+      return clean;
+    },
+    _submit: function _submit() {
+      if (this.getBusy()) return;
+      const textarea = this._dom("input");
+      const text = textarea?.value.trim() ?? "";
+      const files = this._pendingAttachments.slice();
+      if (!text && files.length === 0) return;
+      if (textarea) {
+        textarea.value = "";
+        textarea.style.height = "auto";
+      }
+      const message = {
+        role: "user",
+        content: text
+      };
+      if (files.length > 0) message.files = files;
+      this._messages.push(message);
+      this._pendingAttachments = [];
+      this._appendMessageDom(this._messages.length - 1);
+      this._renderPending();
+      this.fireEvent("send", {
+        message: text,
+        files,
+        conversationId: this.getActiveConversationId()
+      });
+    },
+    _startNewChat: function _startNewChat() {
+      if (this.getBusy()) return;
+      this._messages = [];
+      this._pendingAttachments = [];
+      this.destroyDependents();
+      this.setProperty("activeConversationId", "", true);
+      this._renderSidebar();
+      this._renderHeaderTitle();
+      this._restoreMessages();
+      this._renderPending();
+      this.fireEvent("newChat");
+    },
+    _selectConversation: function _selectConversation(id) {
+      if (this.getBusy()) return;
+      if (id === this.getActiveConversationId()) return;
+      this.setActiveConversationId(id);
+      this.fireEvent("conversationSelect", {
+        id
+      });
+    },
+    _requestDeleteConversation: function _requestDeleteConversation(id) {
+      if (this.getBusy()) return;
+      this.fireEvent("conversationDelete", {
+        id
+      });
+    },
+    _buildMessageDom: function _buildMessageDom(index) {
+      const msg = this._messages[index];
+      const div = document.createElement("div");
+      const isAssistant = msg.role === "assistant";
+      div.className = `cnetChatBox-message cnetChatBox-message--${isAssistant ? "assistant" : "user"}`;
+      const bubble = document.createElement("div");
+      bubble.className = "cnetChatBox-bubble";
+      this._renderBubble(bubble, msg);
+      div.appendChild(bubble);
+      if (!msg.control) {
+        const actions = this._buildActions(index, msg);
+        if (actions) div.appendChild(actions);
+      }
+      return div;
+    },
+    _buildActions: function _buildActions(index, msg) {
+      const actions = document.createElement("div");
+      actions.className = "cnetChatBox-actions";
+      if (msg.role === "assistant") {
+        actions.appendChild(this._buildCopyButton(index));
+      } else {
+        actions.appendChild(this._buildEditButton(index));
+      }
+      return actions;
+    },
+    _buildIconButton: function _buildIconButton(iconName, className, label, fallback) {
+      const icon = IconPool.getIconInfo(iconName);
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = `cnetChatBox-action ${className}`;
+      btn.title = label;
+      btn.setAttribute("aria-label", label);
+      const iconSpan = document.createElement("span");
+      iconSpan.className = "cnetChatBox-icon";
+      if (icon) iconSpan.style.fontFamily = icon.fontFamily;
+      iconSpan.textContent = icon?.content ?? fallback;
+      btn.appendChild(iconSpan);
+      return btn;
+    },
+    _buildCopyButton: function _buildCopyButton(index) {
+      const label = this._i18n().getText("chatbox.copy") ?? "Copy";
+      const btn = this._buildIconButton("sap-icon://copy", "cnetChatBox-copy", label, "⎘");
+      btn.addEventListener("click", () => {
+        const msg = this._messages[index];
+        if (!msg || !msg.content) return;
+        void this._copyMessage(msg.content, btn);
+      });
+      return btn;
+    },
+    _buildEditButton: function _buildEditButton(index) {
+      const label = this._i18n().getText("chatbox.edit") ?? "Edit";
+      const btn = this._buildIconButton("sap-icon://edit", "cnetChatBox-edit", label, "✎");
+      btn.addEventListener("click", () => this._enterEditMode(index));
+      return btn;
+    },
+    _copyMessage: async function _copyMessage(text, btn) {
+      const ok = await this._writeClipboard(text);
+      if (!ok) return;
+      const i18n = this._i18n();
+      const original = btn.getAttribute("aria-label") ?? "";
+      const done = i18n.getText("chatbox.copied") ?? "Copied";
+      btn.classList.add("cnetChatBox-action--done");
+      btn.title = done;
+      window.setTimeout(() => {
+        btn.classList.remove("cnetChatBox-action--done");
+        btn.title = original;
+      }, 1200);
+    },
+    _enterEditMode: function _enterEditMode(index) {
+      if (this.getBusy()) return;
+      const wrapper = this._messagesContainer()?.children[index];
+      const msg = this._messages[index];
+      if (!wrapper || !msg || msg.role !== "user") return;
+      const bubble = wrapper.querySelector(".cnetChatBox-bubble");
+      if (!bubble) return;
+      const actionsRow = wrapper.querySelector(".cnetChatBox-actions");
+      if (actionsRow) actionsRow.style.display = "none";
+      bubble.textContent = "";
+      bubble.classList.add("cnetChatBox-bubble--editing");
+      if (msg.files && msg.files.length > 0) {
+        bubble.appendChild(this._buildAttachmentList(msg.files, "sent"));
+      }
+      const editor = document.createElement("textarea");
+      editor.className = "cnetChatBox-editTextarea";
+      editor.value = msg.content;
+      editor.rows = 2;
+      bubble.appendChild(editor);
+      const editBar = document.createElement("div");
+      editBar.className = "cnetChatBox-editActions";
+      const i18n = this._i18n();
+      const cancelBtn = document.createElement("button");
+      cancelBtn.type = "button";
+      cancelBtn.className = "cnetChatBox-editCancel";
+      cancelBtn.textContent = i18n.getText("chatbox.cancel") ?? "Cancel";
+      const saveBtn = document.createElement("button");
+      saveBtn.type = "button";
+      saveBtn.className = "cnetChatBox-editSave";
+      saveBtn.textContent = i18n.getText("chatbox.save") ?? "Save";
+      cancelBtn.addEventListener("click", () => this._cancelEdit(index));
+      saveBtn.addEventListener("click", () => this._commitEdit(index, editor.value));
+      editor.addEventListener("keydown", e => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          this._commitEdit(index, editor.value);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          this._cancelEdit(index);
+        }
+      });
+      editBar.appendChild(cancelBtn);
+      editBar.appendChild(saveBtn);
+      bubble.appendChild(editBar);
+      editor.focus();
+      editor.setSelectionRange(editor.value.length, editor.value.length);
+    },
+    _cancelEdit: function _cancelEdit(index) {
+      const wrapper = this._messagesContainer()?.children[index];
+      const msg = this._messages[index];
+      if (!wrapper || !msg) return;
+      const bubble = wrapper.querySelector(".cnetChatBox-bubble");
+      if (!bubble) return;
+      bubble.classList.remove("cnetChatBox-bubble--editing");
+      this._renderBubble(bubble, msg);
+      const actionsRow = wrapper.querySelector(".cnetChatBox-actions");
+      if (actionsRow) actionsRow.style.display = "";
+    },
+    _commitEdit: function _commitEdit(index, newText) {
+      if (this.getBusy()) return;
+      const msg = this._messages[index];
+      if (!msg || msg.role !== "user") return;
+      const trimmed = newText.trim();
+      const files = msg.files ? msg.files.slice() : [];
+      const unchanged = trimmed === msg.content;
+      const empty = !trimmed && files.length === 0;
+      if (unchanged || empty) {
+        this._cancelEdit(index);
+        return;
+      }
+      for (let i = index + 1; i < this._messages.length; i++) {
+        const later = this._messages[i];
+        if (later.control) later.control.destroy();
+      }
+      this._messages.length = index + 1;
+      msg.content = trimmed;
+      this._restoreMessages();
+      this.fireEvent("send", {
+        message: trimmed,
+        files,
+        conversationId: this.getActiveConversationId()
+      });
+    },
+    _writeClipboard: async function _writeClipboard(text) {
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+          return true;
+        }
+      } catch {
+        // fall through to legacy path
+      }
+      try {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "");
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(ta);
+        return ok;
+      } catch {
+        return false;
+      }
+    },
+    _renderBubble: function _renderBubble(bubble, msg) {
+      if (msg.role === "assistant") {
+        if (msg.control) {
+          bubble.classList.remove("cnetChatBox-bubble--pending");
+          bubble.classList.add("cnetChatBox-bubble--rich");
+          bubble.innerHTML = "";
+          msg.control.placeAt(bubble);
+          return;
+        }
+        bubble.classList.remove("cnetChatBox-bubble--rich");
+        if (!msg.content) {
+          bubble.classList.add("cnetChatBox-bubble--pending");
+          bubble.innerHTML = '<span class="cnetChatBox-dots"><span></span><span></span><span></span></span>';
+          return;
+        }
+        bubble.classList.remove("cnetChatBox-bubble--pending");
+        bubble.innerHTML = markdownToHtml(msg.content);
+        return;
+      }
+      bubble.textContent = "";
+      if (msg.files && msg.files.length > 0) {
+        bubble.appendChild(this._buildAttachmentList(msg.files, "sent"));
+      }
+      if (msg.content) {
+        const text = document.createElement("div");
+        text.className = "cnetChatBox-bubble-text";
+        text.textContent = msg.content;
+        bubble.appendChild(text);
+      }
+    },
+    _buildAttachmentList: function _buildAttachmentList(files, variant) {
+      const wrap = document.createElement("div");
+      wrap.className = `cnetChatBox-attachments cnetChatBox-attachments--${variant}`;
+      for (let i = 0; i < files.length; i++) {
+        wrap.appendChild(this._buildAttachmentItem(files[i], variant === "pending" ? i : -1));
+      }
+      return wrap;
+    },
+    _buildAttachmentItem: function _buildAttachmentItem(file, pendingIndex) {
+      const isImage = file.type.startsWith("image/");
+      const item = document.createElement("div");
+      item.className = `cnetChatBox-attachment cnetChatBox-attachment--${isImage ? "image" : "file"}`;
+      if (isImage) {
+        const img = document.createElement("img");
+        img.className = "cnetChatBox-attachment-thumb";
+        img.alt = file.name;
+        img.src = URL.createObjectURL(file);
+        item.appendChild(img);
+      } else {
+        const iconInfo = IconPool.getIconInfo("sap-icon://document");
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "cnetChatBox-icon cnetChatBox-attachment-icon";
+        if (iconInfo) iconSpan.style.fontFamily = iconInfo.fontFamily;
+        iconSpan.textContent = iconInfo?.content ?? "📄";
+        item.appendChild(iconSpan);
+      }
+      const name = document.createElement("span");
+      name.className = "cnetChatBox-attachment-name";
+      name.textContent = file.name;
+      name.title = file.name;
+      item.appendChild(name);
+      if (pendingIndex >= 0) {
+        const i18n = this._i18n();
+        const removeLabel = i18n.getText("chatbox.removeAttachment") ?? "Remove";
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "cnetChatBox-attachment-remove";
+        btn.title = removeLabel;
+        btn.setAttribute("aria-label", removeLabel);
+        btn.textContent = "×";
+        btn.addEventListener("click", () => this._removePending(pendingIndex));
+        item.appendChild(btn);
+      }
+      return item;
+    },
+    _appendMessageDom: function _appendMessageDom(index) {
+      const container = this._messagesContainer();
+      if (!container) return;
+      container.querySelector(".cnetChatBox-empty")?.remove();
+      container.appendChild(this._buildMessageDom(index));
+      container.scrollTop = container.scrollHeight;
+    },
+    _updateBubble: function _updateBubble(index) {
+      const container = this._messagesContainer();
+      const wrapper = container?.children[index];
+      const bubble = wrapper?.querySelector(".cnetChatBox-bubble");
+      if (!bubble || !container) return;
+      this._renderBubble(bubble, this._messages[index]);
+      const atBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 80;
+      if (atBottom) container.scrollTop = container.scrollHeight;
+    },
+    _restoreMessages: function _restoreMessages() {
+      const container = this._messagesContainer();
+      if (!container) return;
+      container.innerHTML = "";
+      if (this._messages.length === 0) {
+        const hint = document.createElement("div");
+        hint.className = "cnetChatBox-empty";
+        hint.textContent = this._i18n().getText("chatbox.emptyHint") ?? "";
+        container.appendChild(hint);
+        return;
+      }
+      for (let i = 0; i < this._messages.length; i++) {
+        container.appendChild(this._buildMessageDom(i));
+      }
+      container.scrollTop = container.scrollHeight;
+    },
+    _renderSidebar: function _renderSidebar() {
+      const container = this._dom("conversations");
+      if (!container) return;
+      container.innerHTML = "";
+      if (this._conversations.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "cnetChatBox-conversations-empty";
+        empty.textContent = this._i18n().getText("chatbox.noConversations") ?? "";
+        container.appendChild(empty);
+        return;
+      }
+      const active = this.getActiveConversationId();
+      for (const conv of this._conversations) {
+        container.appendChild(this._buildConversationItem(conv, conv.id === active));
+      }
+    },
+    _buildConversationItem: function _buildConversationItem(conv, isActive) {
+      const i18n = this._i18n();
+      const item = document.createElement("div");
+      item.className = "cnetChatBox-conversation" + (isActive ? " cnetChatBox-conversation--active" : "");
+      item.setAttribute("role", "button");
+      item.tabIndex = 0;
+      const body = document.createElement("div");
+      body.className = "cnetChatBox-conversation-body";
+      const title = document.createElement("div");
+      title.className = "cnetChatBox-conversation-title";
+      title.textContent = this._conversationTitle(conv);
+      body.appendChild(title);
+      const snippet = document.createElement("div");
+      snippet.className = "cnetChatBox-conversation-snippet";
+      snippet.textContent = this._conversationSnippet(conv);
+      body.appendChild(snippet);
+      const time = document.createElement("div");
+      time.className = "cnetChatBox-conversation-time";
+      time.textContent = this._formatTimestamp(conv.updatedAt);
+      body.appendChild(time);
+      item.appendChild(body);
+      const removeLabel = i18n.getText("chatbox.deleteConversation") ?? "Delete conversation";
+      const del = document.createElement("button");
+      del.type = "button";
+      del.className = "cnetChatBox-conversation-remove";
+      del.title = removeLabel;
+      del.setAttribute("aria-label", removeLabel);
+      del.textContent = "×";
+      del.addEventListener("click", e => {
+        e.stopPropagation();
+        this._requestDeleteConversation(conv.id);
+      });
+      item.appendChild(del);
+      item.addEventListener("click", () => this._selectConversation(conv.id));
+      item.addEventListener("keydown", e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this._selectConversation(conv.id);
+        }
+      });
+      return item;
+    },
+    _conversationTitle: function _conversationTitle(conv) {
+      if (conv.title && conv.title.trim()) return conv.title.trim();
+      const msgs = conv.messages ?? [];
+      for (const m of msgs) {
+        if (m.role === "user" && m.content && m.content.trim()) {
+          return this._truncate(m.content.trim(), 40);
+        }
+      }
+      return this._i18n().getText("chatbox.untitledConversation") ?? "Neue Konversation";
+    },
+    _conversationSnippet: function _conversationSnippet(conv) {
+      const msgs = conv.messages ?? [];
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const m = msgs[i];
+        if (m.content && m.content.trim()) {
+          const prefix = m.role === "user" ? (this._i18n().getText("chatbox.youPrefix") ?? "Du:") + " " : "";
+          return this._truncate(prefix + m.content.trim().replace(/\s+/g, " "), 60);
+        }
+      }
+      return "";
+    },
+    _truncate: function _truncate(text, max) {
+      return text.length > max ? text.slice(0, max - 1).trimEnd() + "…" : text;
+    },
+    _formatTimestamp: function _formatTimestamp(raw) {
+      if (raw === undefined || raw === null) return "";
+      const d = raw instanceof Date ? raw : new Date(raw);
+      if (isNaN(d.getTime())) return "";
+      const now = new Date();
+      const sameDay = d.toDateString() === now.toDateString();
+      const yesterday = new Date(now);
+      yesterday.setDate(now.getDate() - 1);
+      const wasYesterday = d.toDateString() === yesterday.toDateString();
+      const locale = Localization.getLanguage() || undefined;
+      if (sameDay) {
+        return d.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit"
+        });
+      }
+      if (wasYesterday) {
+        return this._i18n().getText("chatbox.yesterday") ?? "Gestern";
+      }
+      const weekDelta = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24);
+      if (weekDelta < 7) {
+        return d.toLocaleDateString(locale, {
+          weekday: "short"
+        });
+      }
+      return d.toLocaleDateString(locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "2-digit"
+      });
+    },
+    _renderHeaderTitle: function _renderHeaderTitle() {
+      const target = this._dom("headerTitle");
+      if (!target) return;
+      const active = this.getActiveConversationId();
+      const conv = active ? this._conversations.find(c => c.id === active) : undefined;
+      target.textContent = conv ? this._conversationTitle(conv) : "";
+    },
+    _wireAttachments: function _wireAttachments() {
+      const attachBtn = this._dom("attach");
+      const fileInput = this._dom("fileinput");
+      const root = this.getDomRef();
+      attachBtn?.addEventListener("click", () => fileInput?.click());
+      fileInput?.addEventListener("change", () => {
+        if (!fileInput.files) return;
+        this._addPending(Array.from(fileInput.files));
+        fileInput.value = "";
+      });
+      if (!root) return;
+      let dragDepth = 0;
+      root.addEventListener("dragenter", e => {
+        if (!this._hasFiles(e)) return;
+        e.preventDefault();
+        dragDepth++;
+        root.classList.add("cnetChatBox--dragOver");
+      });
+      root.addEventListener("dragover", e => {
+        if (!this._hasFiles(e)) return;
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+      });
+      root.addEventListener("dragleave", () => {
+        dragDepth = Math.max(0, dragDepth - 1);
+        if (dragDepth === 0) root.classList.remove("cnetChatBox--dragOver");
+      });
+      root.addEventListener("drop", e => {
+        if (!this._hasFiles(e)) return;
+        e.preventDefault();
+        dragDepth = 0;
+        root.classList.remove("cnetChatBox--dragOver");
+        const files = e.dataTransfer?.files;
+        if (!files || files.length === 0) return;
+        this._addPending(Array.from(files));
+      });
+    },
+    _hasFiles: function _hasFiles(e) {
+      const types = e.dataTransfer?.types;
+      if (!types) return false;
+      for (let i = 0; i < types.length; i++) {
+        if (types[i] === "Files") return true;
+      }
+      return false;
+    },
+    _addPending: function _addPending(files) {
+      if (this.getBusy()) return;
+      if (files.length === 0) return;
+      this._pendingAttachments = this._pendingAttachments.concat(files);
+      this._renderPending();
+    },
+    _removePending: function _removePending(index) {
+      if (index < 0 || index >= this._pendingAttachments.length) return;
+      this._pendingAttachments.splice(index, 1);
+      this._renderPending();
+    },
+    _renderPending: function _renderPending() {
+      const container = this._dom("pending");
+      if (!container) return;
+      container.innerHTML = "";
+      if (this._pendingAttachments.length === 0) {
+        container.classList.remove("cnetChatBox-attachmentsPending--hasItems");
+        return;
+      }
+      container.classList.add("cnetChatBox-attachmentsPending--hasItems");
+      container.appendChild(this._buildAttachmentList(this._pendingAttachments, "pending"));
+    }
+  });
+  return ChatBox;
+});
+//# sourceMappingURL=ChatBox-dbg.js.map