@cnt-dev/chat-ui 0.1.0

package/resources/chatui/ChatBox.ts

@@ -0,0 +1,1153 @@
+/*!
+ * ${copyright}
+ */
+
+import Control from "sap/ui/core/Control";
+import RenderManager from "sap/ui/core/RenderManager";
+import IconPool from "sap/ui/core/IconPool";
+import Lib from "sap/ui/core/Lib";
+import Localization from "sap/base/i18n/Localization";
+import ResourceBundle from "sap/base/i18n/ResourceBundle";
+import markdownToHtml from "./markdown";
+
+interface IconInfo {
+    fontFamily: string;
+    content: string;
+}
+
+export interface Message {
+    role: "user" | "assistant";
+    content: string;
+    files?: File[];
+    control?: Control;
+}
+
+export interface Conversation {
+    id: string;
+    title?: string;
+    messages?: ReadonlyArray<Message>;
+    updatedAt?: number | string | Date;
+}
+
+/**
+ * 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
+ */
+export default class ChatBox extends Control {
+
+    // The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures
+    constructor(id?: string | $ChatBoxSettings);
+    constructor(id?: string, settings?: $ChatBoxSettings);
+    constructor(id?: string, settings?: $ChatBoxSettings) { super(id, settings); }
+
+    static readonly 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" }
+                }
+            }
+        }
+    };
+
+    private _messages: Message[] = [];
+    private _pendingAttachments: File[] = [];
+    private _conversations: Conversation[] = [];
+    private _initialised = false;
+    private _onLocaleChange = (): void => { this.invalidate(); };
+
+    override init(): void {
+        Localization.attachChange(this._onLocaleChange);
+    }
+
+    override exit(): void {
+        Localization.detachChange(this._onLocaleChange);
+    }
+
+    static renderer = {
+        apiVersion: 2,
+        render(rm: RenderManager, control: ChatBox): void {
+            const sendIcon = IconPool.getIconInfo("sap-icon://paper-plane") as IconInfo | undefined;
+            const newChatIcon = IconPool.getIconInfo("sap-icon://add") as IconInfo | undefined;
+            const attachIcon = IconPool.getIconInfo("sap-icon://attachment") as IconInfo | undefined;
+            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");
+        }
+    };
+
+    override onAfterRendering(): void {
+        const textarea = this._dom("input") as HTMLTextAreaElement | null;
+        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: KeyboardEvent) => {
+            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(text: string): this {
+        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(chunk: string): this {
+        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(control: Control): this {
+        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(): this {
+        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(): ReadonlyArray<Message> {
+        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(messages: ReadonlyArray<Message>): this {
+        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(conversations: ReadonlyArray<Conversation> | null | undefined): this {
+        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(): ReadonlyArray<Conversation> {
+        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(id: string): this {
+        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;
+    }
+
+    private _i18n(): ResourceBundle {
+        return Lib.getResourceBundleFor("chatui") as ResourceBundle;
+    }
+
+    private _dom(suffix: string): HTMLElement | null {
+        return document.getElementById(this.getId() + "-" + suffix);
+    }
+
+    private _messagesContainer(): HTMLElement | null {
+        return this._dom("messages");
+    }
+
+    private _sanitiseMessages(messages: ReadonlyArray<Message> | null | undefined): Message[] {
+        const clean: Message[] = [];
+        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: Message = { 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;
+    }
+
+    private _sanitiseConversations(conversations: ReadonlyArray<Conversation> | null | undefined): Conversation[] {
+        const clean: Conversation[] = [];
+        if (!Array.isArray(conversations)) return clean;
+        for (const raw of conversations) {
+            if (!raw || typeof raw.id !== "string" || !raw.id) continue;
+            const conv: Conversation = { 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;
+    }
+
+    private _submit(): void {
+        if (this.getBusy()) return;
+        const textarea = this._dom("input") as HTMLTextAreaElement | null;
+        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: 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() });
+    }
+
+    private _startNewChat(): void {
+        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");
+    }
+
+    private _selectConversation(id: string): void {
+        if (this.getBusy()) return;
+        if (id === this.getActiveConversationId()) return;
+        this.setActiveConversationId(id);
+        this.fireEvent("conversationSelect", { id });
+    }
+
+    private _requestDeleteConversation(id: string): void {
+        if (this.getBusy()) return;
+        this.fireEvent("conversationDelete", { id });
+    }
+
+    private _buildMessageDom(index: number): HTMLDivElement {
+        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;
+    }
+
+    private _buildActions(index: number, msg: Message): HTMLDivElement | null {
+        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;
+    }
+
+    private _buildIconButton(iconName: string, className: string, label: string, fallback: string): HTMLButtonElement {
+        const icon = IconPool.getIconInfo(iconName) as IconInfo | undefined;
+        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;
+    }
+
+    private _buildCopyButton(index: number): HTMLButtonElement {
+        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;
+    }
+
+    private _buildEditButton(index: number): HTMLButtonElement {
+        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;
+    }
+
+    private async _copyMessage(text: string, btn: HTMLButtonElement): Promise<void> {
+        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);
+    }
+
+    private _enterEditMode(index: number): void {
+        if (this.getBusy()) return;
+        const wrapper = this._messagesContainer()?.children[index] as HTMLDivElement | undefined;
+        const msg = this._messages[index];
+        if (!wrapper || !msg || msg.role !== "user") return;
+
+        const bubble = wrapper.querySelector<HTMLElement>(".cnetChatBox-bubble");
+        if (!bubble) return;
+
+        const actionsRow = wrapper.querySelector<HTMLElement>(".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: KeyboardEvent) => {
+            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);
+    }
+
+    private _cancelEdit(index: number): void {
+        const wrapper = this._messagesContainer()?.children[index] as HTMLDivElement | undefined;
+        const msg = this._messages[index];
+        if (!wrapper || !msg) return;
+        const bubble = wrapper.querySelector<HTMLElement>(".cnetChatBox-bubble");
+        if (!bubble) return;
+        bubble.classList.remove("cnetChatBox-bubble--editing");
+        this._renderBubble(bubble, msg);
+        const actionsRow = wrapper.querySelector<HTMLElement>(".cnetChatBox-actions");
+        if (actionsRow) actionsRow.style.display = "";
+    }
+
+    private _commitEdit(index: number, newText: string): void {
+        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() });
+    }
+
+    private async _writeClipboard(text: string): Promise<boolean> {
+        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;
+        }
+    }
+
+    private _renderBubble(bubble: HTMLElement, msg: Message): void {
+        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);
+        }
+    }
+
+    private _buildAttachmentList(files: File[], variant: "sent" | "pending"): HTMLDivElement {
+        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;
+    }
+
+    private _buildAttachmentItem(file: File, pendingIndex: number): HTMLDivElement {
+        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") as IconInfo | undefined;
+            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;
+    }
+
+    private _appendMessageDom(index: number): void {
+        const container = this._messagesContainer();
+        if (!container) return;
+        container.querySelector(".cnetChatBox-empty")?.remove();
+        container.appendChild(this._buildMessageDom(index));
+        container.scrollTop = container.scrollHeight;
+    }
+
+    private _updateBubble(index: number): void {
+        const container = this._messagesContainer();
+        const wrapper = container?.children[index] as HTMLElement | undefined;
+        const bubble = wrapper?.querySelector(".cnetChatBox-bubble") as HTMLElement | null;
+        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;
+    }
+
+    private _restoreMessages(): void {
+        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;
+    }
+
+    private _renderSidebar(): void {
+        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));
+        }
+    }
+
+    private _buildConversationItem(conv: Conversation, isActive: boolean): HTMLDivElement {
+        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: MouseEvent) => {
+            e.stopPropagation();
+            this._requestDeleteConversation(conv.id);
+        });
+        item.appendChild(del);
+
+        item.addEventListener("click", () => this._selectConversation(conv.id));
+        item.addEventListener("keydown", (e: KeyboardEvent) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._selectConversation(conv.id);
+            }
+        });
+
+        return item;
+    }
+
+    private _conversationTitle(conv: Conversation): string {
+        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";
+    }
+
+    private _conversationSnippet(conv: Conversation): string {
+        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 "";
+    }
+
+    private _truncate(text: string, max: number): string {
+        return text.length > max ? text.slice(0, max - 1).trimEnd() + "…" : text;
+    }
+
+    private _formatTimestamp(raw: number | string | Date | undefined): string {
+        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" });
+    }
+
+    private _renderHeaderTitle(): void {
+        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) : "";
+    }
+
+    private _wireAttachments(): void {
+        const attachBtn = this._dom("attach");
+        const fileInput = this._dom("fileinput") as HTMLInputElement | null;
+        const root = this.getDomRef() as HTMLElement | null;
+
+        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: DragEvent) => {
+            if (!this._hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth++;
+            root.classList.add("cnetChatBox--dragOver");
+        });
+        root.addEventListener("dragover", (e: DragEvent) => {
+            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: DragEvent) => {
+            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));
+        });
+    }
+
+    private _hasFiles(e: DragEvent): boolean {
+        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;
+    }
+
+    private _addPending(files: File[]): void {
+        if (this.getBusy()) return;
+        if (files.length === 0) return;
+        this._pendingAttachments = this._pendingAttachments.concat(files);
+        this._renderPending();
+    }
+
+    private _removePending(index: number): void {
+        if (index < 0 || index >= this._pendingAttachments.length) return;
+        this._pendingAttachments.splice(index, 1);
+        this._renderPending();
+    }
+
+    private _renderPending(): void {
+        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"));
+    }
+}