@cnt-dev/chat-ui 0.1.0

package/resources/chatui/ChatBox.gen.d.ts

@@ -0,0 +1,545 @@
+declare module "chatui/ChatBox" {
+import Event from "sap/ui/base/Event";
+import { CSSSize } from "sap/ui/core/library";
+import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+import { $ControlSettings } from "sap/ui/core/Control";
+
+    /**
+     * Interface defining the settings object used in constructor calls
+     */
+    interface $ChatBoxSettings extends $ControlSettings {
+
+        /**
+         * Placeholder shown in the empty input field. If empty, a
+        localised default is used.
+         */
+        placeholder?: string | PropertyBindingInfo;
+
+        /**
+         * When true, the input and buttons are disabled — typically set
+        while the assistant is producing a reply.
+         */
+        busy?: boolean | PropertyBindingInfo | `{${string}}`;
+
+        /**
+         * CSS width of the control. Defaults to <code>100%</code> so the
+        chat adapts to its parent; override for a fixed size.
+         */
+        width?: CSSSize | PropertyBindingInfo | `{${string}}`;
+
+        /**
+         * 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?: CSSSize | PropertyBindingInfo | `{${string}}`;
+
+        /**
+         * 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?: boolean | PropertyBindingInfo | `{${string}}`;
+
+        /**
+         * 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?: string | PropertyBindingInfo;
+
+        /**
+         * 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?: (object | null) | PropertyBindingInfo | `{${string}}`;
+
+        /**
+         * /**
+                     * 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?: string | PropertyBindingInfo;
+
+        /**
+         * /**
+                     * 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?: (event: ChatBox$SendEvent) => void;
+
+        /**
+         * 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?: (event: ChatBox$NewChatEvent) => void;
+
+        /**
+         * 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?: (event: ChatBox$ConversationSelectEvent) => void;
+
+        /**
+         * /**
+                     * 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?: (event: ChatBox$ConversationDeleteEvent) => void;
+    }
+
+    export default interface ChatBox {
+
+        // property: placeholder
+
+        /**
+         * Placeholder shown in the empty input field. If empty, a
+        localised default is used.
+         */
+        getPlaceholder(): string;
+
+        /**
+         * Placeholder shown in the empty input field. If empty, a
+        localised default is used.
+         */
+        setPlaceholder(placeholder: string): this;
+
+        // property: busy
+
+        /**
+         * When true, the input and buttons are disabled — typically set
+        while the assistant is producing a reply.
+         */
+        getBusy(): boolean;
+
+        /**
+         * When true, the input and buttons are disabled — typically set
+        while the assistant is producing a reply.
+         */
+        setBusy(busy: boolean): this;
+
+        // property: width
+
+        /**
+         * CSS width of the control. Defaults to <code>100%</code> so the
+        chat adapts to its parent; override for a fixed size.
+         */
+        getWidth(): CSSSize;
+
+        /**
+         * CSS width of the control. Defaults to <code>100%</code> so the
+        chat adapts to its parent; override for a fixed size.
+         */
+        setWidth(width: CSSSize): this;
+
+        // property: height
+
+        /**
+         * CSS height of the control. Defaults to <code>100%</code>; falls
+        back to a sensible min-height when the parent has no explicit
+        height.
+         */
+        getHeight(): CSSSize;
+
+        /**
+         * CSS height of the control. Defaults to <code>100%</code>; falls
+        back to a sensible min-height when the parent has no explicit
+        height.
+         */
+        setHeight(height: CSSSize): this;
+
+        // property: allowAttachments
+
+        /**
+         * 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.
+         */
+        getAllowAttachments(): boolean;
+
+        /**
+         * 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.
+         */
+        setAllowAttachments(allowAttachments: boolean): this;
+
+        // property: attachmentAccept
+
+        /**
+         * 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".
+         */
+        getAttachmentAccept(): string;
+
+        /**
+         * 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".
+         */
+        setAttachmentAccept(attachmentAccept: string): this;
+
+        // property: conversations
+
+        /**
+         * 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.
+         */
+        getConversations(): object | null;
+
+        /**
+         * 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.
+         */
+        setConversations(conversations: object | null): this;
+
+        // property: activeConversationId
+
+        /**
+         * /**
+                     * 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.
+         */
+        getActiveConversationId(): string;
+
+        /**
+         * /**
+                     * 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.
+         */
+        setActiveConversationId(activeConversationId: string): this;
+
+        // event: send
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        attachSend(fn: (event: ChatBox$SendEvent) => void, listener?: object): this;
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        attachSend<CustomDataType extends object>(data: CustomDataType, fn: (event: ChatBox$SendEvent, data: CustomDataType) => void, listener?: object): this;
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        detachSend(fn: (event: ChatBox$SendEvent) => void, listener?: object): this;
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        fireSend(parameters?: ChatBox$SendEventParameters): this;
+
+        // event: newChat
+
+        /**
+         * 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.
+         */
+        attachNewChat(fn: (event: ChatBox$NewChatEvent) => void, listener?: object): this;
+
+        /**
+         * 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.
+         */
+        attachNewChat<CustomDataType extends object>(data: CustomDataType, fn: (event: ChatBox$NewChatEvent, data: CustomDataType) => void, listener?: object): this;
+
+        /**
+         * 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.
+         */
+        detachNewChat(fn: (event: ChatBox$NewChatEvent) => void, listener?: object): this;
+
+        /**
+         * 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.
+         */
+        fireNewChat(parameters?: ChatBox$NewChatEventParameters): this;
+
+        // event: conversationSelect
+
+        /**
+         * 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>.
+         */
+        attachConversationSelect(fn: (event: ChatBox$ConversationSelectEvent) => void, listener?: object): this;
+
+        /**
+         * 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>.
+         */
+        attachConversationSelect<CustomDataType extends object>(data: CustomDataType, fn: (event: ChatBox$ConversationSelectEvent, data: CustomDataType) => void, listener?: object): this;
+
+        /**
+         * 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>.
+         */
+        detachConversationSelect(fn: (event: ChatBox$ConversationSelectEvent) => void, listener?: object): this;
+
+        /**
+         * 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>.
+         */
+        fireConversationSelect(parameters?: ChatBox$ConversationSelectEventParameters): this;
+
+        // event: conversationDelete
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        attachConversationDelete(fn: (event: ChatBox$ConversationDeleteEvent) => void, listener?: object): this;
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        attachConversationDelete<CustomDataType extends object>(data: CustomDataType, fn: (event: ChatBox$ConversationDeleteEvent, data: CustomDataType) => void, listener?: object): this;
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        detachConversationDelete(fn: (event: ChatBox$ConversationDeleteEvent) => void, listener?: object): this;
+
+        /**
+         * /**
+                     * 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}
+        .
+         */
+        fireConversationDelete(parameters?: ChatBox$ConversationDeleteEventParameters): this;
+    }
+
+    /**
+     * Interface describing the parameters of ChatBox's 'send' event.
+     * /**
+                 * 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}
+    .
+     */
+    export interface ChatBox$SendEventParameters {
+        message?: string;
+        files?: object | null;
+        conversationId?: string;
+    }
+
+    /**
+     * Interface describing the parameters of ChatBox's 'newChat' event.
+     * 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.
+     */
+    // eslint-disable-next-line
+    export interface ChatBox$NewChatEventParameters {
+    }
+
+    /**
+     * Interface describing the parameters of ChatBox's 'conversationSelect' event.
+     * 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>.
+     */
+    export interface ChatBox$ConversationSelectEventParameters {
+        id?: string;
+    }
+
+    /**
+     * Interface describing the parameters of ChatBox's 'conversationDelete' event.
+     * /**
+                 * 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}
+    .
+     */
+    export interface ChatBox$ConversationDeleteEventParameters {
+        id?: string;
+    }
+
+    /**
+     * Type describing the ChatBox's 'send' event.
+     * /**
+                 * 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}
+    .
+     */
+    export type ChatBox$SendEvent = Event<ChatBox$SendEventParameters>;
+
+    /**
+     * Type describing the ChatBox's 'newChat' event.
+     * 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.
+     */
+    export type ChatBox$NewChatEvent = Event<ChatBox$NewChatEventParameters>;
+
+    /**
+     * Type describing the ChatBox's 'conversationSelect' event.
+     * 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>.
+     */
+    export type ChatBox$ConversationSelectEvent = Event<ChatBox$ConversationSelectEventParameters>;
+
+    /**
+     * Type describing the ChatBox's 'conversationDelete' event.
+     * /**
+                 * 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}
+    .
+     */
+    export type ChatBox$ConversationDeleteEvent = Event<ChatBox$ConversationDeleteEventParameters>;
+}

package/resources/chatui/ChatBox.js

@@ -0,0 +1,5 @@
+/*!
+ * ${copyright}
+ */
+sap.ui.define(["sap/ui/core/Control","sap/ui/core/IconPool","sap/ui/core/Lib","sap/base/i18n/Localization","./markdown"],function(t,e,n,s,i){"use strict";function a(t){return t&&t.__esModule&&typeof t.default!=="undefined"?t.default:t}const o=a(i);const c=t.extend("chatui.ChatBox",{renderer:{apiVersion:2,render(t,n){const s=e.getIconInfo("sap-icon://paper-plane");const i=e.getIconInfo("sap-icon://add");const a=e.getIconInfo("sap-icon://attachment");const o=n._i18n();const c=n.getPlaceholder()||o.getText("chatbox.placeholder")||"";const r=n.getAllowAttachments();t.openStart("div",n);t.class("cnetChatBox");t.style("width",n.getWidth());t.style("height",n.getHeight());t.openEnd();t.openStart("aside");t.class("cnetChatBox-sidebar");t.openEnd();t.openStart("div");t.class("cnetChatBox-sidebar-header");t.openEnd();t.openStart("span");t.class("cnetChatBox-sidebar-title");t.openEnd();t.text(o.getText("chatbox.conversations")??"");t.close("span");t.close("div");t.openStart("div",n.getId()+"-conversations");t.class("cnetChatBox-conversations");t.openEnd();t.close("div");t.close("aside");t.openStart("div");t.class("cnetChatBox-main");t.openEnd();t.openStart("div");t.class("cnetChatBox-header");t.openEnd();t.openStart("div",n.getId()+"-headerTitle");t.class("cnetChatBox-header-title");t.openEnd();t.close("div");t.openStart("button",n.getId()+"-newChat");t.class("cnetChatBox-newChatButton");t.attr("type","button");t.attr("title",o.getText("chatbox.newConversation")??"");t.openEnd();t.openStart("span");t.class("cnetChatBox-icon");if(i)t.style("font-family",i.fontFamily);t.openEnd();t.text(i?.content??"＋");t.close("span");t.openStart("span");t.class("cnetChatBox-newChatButton-label");t.openEnd();t.text(o.getText("chatbox.newConversation")??"");t.close("span");t.close("button");t.close("div");t.openStart("div",n.getId()+"-messages");t.class("cnetChatBox-messages");t.openEnd();t.openStart("div");t.class("cnetChatBox-empty");t.openEnd();t.text(o.getText("chatbox.emptyHint")??"");t.close("div");t.close("div");t.openStart("div");t.class("cnetChatBox-inputArea");t.openEnd();t.openStart("div");t.class("cnetChatBox-composer");t.openEnd();t.openStart("div",n.getId()+"-pending");t.class("cnetChatBox-attachmentsPending");t.openEnd();t.close("div");t.openStart("textarea",n.getId()+"-input");t.class("cnetChatBox-textarea");t.attr("placeholder",c);t.attr("rows","1");if(n.getBusy())t.attr("disabled","disabled");t.openEnd();t.close("textarea");t.openStart("div");t.class("cnetChatBox-composerBar");t.openEnd();t.openStart("div");t.class("cnetChatBox-composerBar-left");t.openEnd();if(r){t.openStart("button",n.getId()+"-attach");t.class("cnetChatBox-toolButton");t.class("cnetChatBox-attach");t.attr("type","button");t.attr("title",o.getText("chatbox.attach")??"");t.attr("aria-label",o.getText("chatbox.attach")??"");t.openEnd();t.openStart("span");t.class("cnetChatBox-icon");if(a)t.style("font-family",a.fontFamily);t.openEnd();t.text(a?.content??"📎");t.close("span");t.close("button");t.voidStart("input",n.getId()+"-fileinput");t.class("cnetChatBox-fileinput");t.attr("type","file");t.attr("multiple","multiple");if(n.getAttachmentAccept())t.attr("accept",n.getAttachmentAccept());t.voidEnd()}t.close("div");t.openStart("button",n.getId()+"-send");t.class("cnetChatBox-send");t.attr("type","button");t.attr("title",o.getText("chatbox.send")??"");t.attr("aria-label",o.getText("chatbox.send")??"");t.openEnd();t.openStart("span");t.class("cnetChatBox-icon");if(s)t.style("font-family",s.fontFamily);t.openEnd();t.text(s?.content??"➤");t.close("span");t.close("button");t.close("div");t.close("div");t.close("div");t.close("div");if(r){t.openStart("div",n.getId()+"-drop");t.class("cnetChatBox-dropOverlay");t.openEnd();t.openStart("span");t.class("cnetChatBox-dropLabel");t.openEnd();t.text(o.getText("chatbox.dropHere")??"");t.close("span");t.close("div")}t.close("div")}},metadata:{library:"chatui",properties:{placeholder:{type:"string",group:"Appearance",defaultValue:""},busy:{type:"boolean",group:"Behavior",defaultValue:false},width:{type:"sap.ui.core.CSSSize",group:"Dimension",defaultValue:"100%"},height:{type:"sap.ui.core.CSSSize",group:"Dimension",defaultValue:"100%"},allowAttachments:{type:"boolean",group:"Behavior",defaultValue:true},attachmentAccept:{type:"string",group:"Behavior",defaultValue:""},conversations:{type:"object",group:"Data",defaultValue:[]},activeConversationId:{type:"string",group:"Data",defaultValue:""}},events:{send:{parameters:{message:{type:"string"},files:{type:"object"},conversationId:{type:"string"}}},newChat:{},conversationSelect:{parameters:{id:{type:"string"}}},conversationDelete:{parameters:{id:{type:"string"}}}}},constructor:function e(n,s){t.prototype.constructor.call(this,n,s);this._messages=[];this._pendingAttachments=[];this._conversations=[];this._initialised=false;this._onLocaleChange=()=>{this.invalidate()}},init:function t(){s.attachChange(this._onLocaleChange)},exit:function t(){s.detachChange(this._onLocaleChange)},onAfterRendering:function t(){const e=this._dom("input");const n=this._dom("send");const s=this._dom("newChat");e?.addEventListener("input",()=>{e.style.height="auto";e.style.height=Math.min(e.scrollHeight,160)+"px"});e?.addEventListener("keydown",t=>{if(t.key==="Enter"&&!t.shiftKey){t.preventDefault();this._submit()}});n?.addEventListener("click",()=>this._submit());s?.addEventListener("click",()=>this._startNewChat());if(this.getAllowAttachments()){this._wireAttachments()}this._renderSidebar();this._renderHeaderTitle();this._restoreMessages();this._renderPending()},addAssistantMessage:function t(e){this._messages.push({role:"assistant",content:e??""});this._appendMessageDom(this._messages.length-1);return this},appendToLastAssistantMessage:function t(e){if(!e)return this;const n=this._messages[this._messages.length-1];if(!n||n.role!=="assistant"||n.control){return this.addAssistantMessage(e)}n.content+=e;this._updateBubble(this._messages.length-1);return this},addAssistantControl:function t(e){this.addDependent(e);this._messages.push({role:"assistant",content:"",control:e});this._appendMessageDom(this._messages.length-1);return this},clear:function t(){this._messages=[];this._pendingAttachments=[];this.destroyDependents();this._restoreMessages();this._renderPending();return this},getMessages:function t(){return this._messages.slice()},setMessages:function t(e){this._messages=this._sanitiseMessages(e);this.destroyDependents();this._restoreMessages();return this},setConversations:function t(e){const n=this._sanitiseConversations(e);this._conversations=n;this.setProperty("conversations",n,true);if(!this._initialised&&n.length>0&&!this.getActiveConversationId()){const t=n[0];this.setProperty("activeConversationId",t.id,true);this._messages=this._sanitiseMessages(t.messages??[]);this.destroyDependents();this._restoreMessages();this._renderHeaderTitle()}this._initialised=true;this._renderSidebar();return this},getConversations:function t(){return this._conversations.slice()},setActiveConversationId:function t(e){const n=typeof e==="string"?e:"";if(n===this.getActiveConversationId())return this;this.setProperty("activeConversationId",n,true);const s=this._conversations??[];const i=s.find(t=>t.id===n);this._messages=i?this._sanitiseMessages(i.messages??[]):[];this._pendingAttachments=[];this.destroyDependents();this._renderSidebar();this._renderHeaderTitle();this._restoreMessages();this._renderPending();return this},_i18n:function t(){return n.getResourceBundleFor("chatui")},_dom:function t(e){return document.getElementById(this.getId()+"-"+e)},_messagesContainer:function t(){return this._dom("messages")},_sanitiseMessages:function t(e){const n=[];if(!Array.isArray(e))return n;for(const t of e){if(!t||t.role!=="user"&&t.role!=="assistant")continue;if(typeof t.content!=="string")continue;if(t.control)continue;const e={role:t.role,content:t.content};if(Array.isArray(t.files)&&t.files.length>0){e.files=t.files.slice()}n.push(e)}return n},_sanitiseConversations:function t(e){const n=[];if(!Array.isArray(e))return n;for(const t of e){if(!t||typeof t.id!=="string"||!t.id)continue;const e={id:t.id};if(typeof t.title==="string")e.title=t.title;if(Array.isArray(t.messages))e.messages=this._sanitiseMessages(t.messages);if(t.updatedAt!==undefined&&t.updatedAt!==null)e.updatedAt=t.updatedAt;n.push(e)}return n},_submit:function t(){if(this.getBusy())return;const e=this._dom("input");const n=e?.value.trim()??"";const s=this._pendingAttachments.slice();if(!n&&s.length===0)return;if(e){e.value="";e.style.height="auto"}const i={role:"user",content:n};if(s.length>0)i.files=s;this._messages.push(i);this._pendingAttachments=[];this._appendMessageDom(this._messages.length-1);this._renderPending();this.fireEvent("send",{message:n,files:s,conversationId:this.getActiveConversationId()})},_startNewChat:function t(){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 t(e){if(this.getBusy())return;if(e===this.getActiveConversationId())return;this.setActiveConversationId(e);this.fireEvent("conversationSelect",{id:e})},_requestDeleteConversation:function t(e){if(this.getBusy())return;this.fireEvent("conversationDelete",{id:e})},_buildMessageDom:function t(e){const n=this._messages[e];const s=document.createElement("div");const i=n.role==="assistant";s.className=`cnetChatBox-message cnetChatBox-message--${i?"assistant":"user"}`;const a=document.createElement("div");a.className="cnetChatBox-bubble";this._renderBubble(a,n);s.appendChild(a);if(!n.control){const t=this._buildActions(e,n);if(t)s.appendChild(t)}return s},_buildActions:function t(e,n){const s=document.createElement("div");s.className="cnetChatBox-actions";if(n.role==="assistant"){s.appendChild(this._buildCopyButton(e))}else{s.appendChild(this._buildEditButton(e))}return s},_buildIconButton:function t(n,s,i,a){const o=e.getIconInfo(n);const c=document.createElement("button");c.type="button";c.className=`cnetChatBox-action ${s}`;c.title=i;c.setAttribute("aria-label",i);const r=document.createElement("span");r.className="cnetChatBox-icon";if(o)r.style.fontFamily=o.fontFamily;r.textContent=o?.content??a;c.appendChild(r);return c},_buildCopyButton:function t(e){const n=this._i18n().getText("chatbox.copy")??"Copy";const s=this._buildIconButton("sap-icon://copy","cnetChatBox-copy",n,"⎘");s.addEventListener("click",()=>{const t=this._messages[e];if(!t||!t.content)return;void this._copyMessage(t.content,s)});return s},_buildEditButton:function t(e){const n=this._i18n().getText("chatbox.edit")??"Edit";const s=this._buildIconButton("sap-icon://edit","cnetChatBox-edit",n,"✎");s.addEventListener("click",()=>this._enterEditMode(e));return s},_copyMessage:async function t(e,n){const s=await this._writeClipboard(e);if(!s)return;const i=this._i18n();const a=n.getAttribute("aria-label")??"";const o=i.getText("chatbox.copied")??"Copied";n.classList.add("cnetChatBox-action--done");n.title=o;window.setTimeout(()=>{n.classList.remove("cnetChatBox-action--done");n.title=a},1200)},_enterEditMode:function t(e){if(this.getBusy())return;const n=this._messagesContainer()?.children[e];const s=this._messages[e];if(!n||!s||s.role!=="user")return;const i=n.querySelector(".cnetChatBox-bubble");if(!i)return;const a=n.querySelector(".cnetChatBox-actions");if(a)a.style.display="none";i.textContent="";i.classList.add("cnetChatBox-bubble--editing");if(s.files&&s.files.length>0){i.appendChild(this._buildAttachmentList(s.files,"sent"))}const o=document.createElement("textarea");o.className="cnetChatBox-editTextarea";o.value=s.content;o.rows=2;i.appendChild(o);const c=document.createElement("div");c.className="cnetChatBox-editActions";const r=this._i18n();const d=document.createElement("button");d.type="button";d.className="cnetChatBox-editCancel";d.textContent=r.getText("chatbox.cancel")??"Cancel";const l=document.createElement("button");l.type="button";l.className="cnetChatBox-editSave";l.textContent=r.getText("chatbox.save")??"Save";d.addEventListener("click",()=>this._cancelEdit(e));l.addEventListener("click",()=>this._commitEdit(e,o.value));o.addEventListener("keydown",t=>{if(t.key==="Enter"&&!t.shiftKey){t.preventDefault();this._commitEdit(e,o.value)}else if(t.key==="Escape"){t.preventDefault();this._cancelEdit(e)}});c.appendChild(d);c.appendChild(l);i.appendChild(c);o.focus();o.setSelectionRange(o.value.length,o.value.length)},_cancelEdit:function t(e){const n=this._messagesContainer()?.children[e];const s=this._messages[e];if(!n||!s)return;const i=n.querySelector(".cnetChatBox-bubble");if(!i)return;i.classList.remove("cnetChatBox-bubble--editing");this._renderBubble(i,s);const a=n.querySelector(".cnetChatBox-actions");if(a)a.style.display=""},_commitEdit:function t(e,n){if(this.getBusy())return;const s=this._messages[e];if(!s||s.role!=="user")return;const i=n.trim();const a=s.files?s.files.slice():[];const o=i===s.content;const c=!i&&a.length===0;if(o||c){this._cancelEdit(e);return}for(let t=e+1;t<this._messages.length;t++){const e=this._messages[t];if(e.control)e.control.destroy()}this._messages.length=e+1;s.content=i;this._restoreMessages();this.fireEvent("send",{message:i,files:a,conversationId:this.getActiveConversationId()})},_writeClipboard:async function t(e){try{if(navigator.clipboard?.writeText){await navigator.clipboard.writeText(e);return true}}catch{}try{const t=document.createElement("textarea");t.value=e;t.setAttribute("readonly","");t.style.position="fixed";t.style.opacity="0";document.body.appendChild(t);t.select();const n=document.execCommand("copy");document.body.removeChild(t);return n}catch{return false}},_renderBubble:function t(e,n){if(n.role==="assistant"){if(n.control){e.classList.remove("cnetChatBox-bubble--pending");e.classList.add("cnetChatBox-bubble--rich");e.innerHTML="";n.control.placeAt(e);return}e.classList.remove("cnetChatBox-bubble--rich");if(!n.content){e.classList.add("cnetChatBox-bubble--pending");e.innerHTML='<span class="cnetChatBox-dots"><span></span><span></span><span></span></span>';return}e.classList.remove("cnetChatBox-bubble--pending");e.innerHTML=o(n.content);return}e.textContent="";if(n.files&&n.files.length>0){e.appendChild(this._buildAttachmentList(n.files,"sent"))}if(n.content){const t=document.createElement("div");t.className="cnetChatBox-bubble-text";t.textContent=n.content;e.appendChild(t)}},_buildAttachmentList:function t(e,n){const s=document.createElement("div");s.className=`cnetChatBox-attachments cnetChatBox-attachments--${n}`;for(let t=0;t<e.length;t++){s.appendChild(this._buildAttachmentItem(e[t],n==="pending"?t:-1))}return s},_buildAttachmentItem:function t(n,s){const i=n.type.startsWith("image/");const a=document.createElement("div");a.className=`cnetChatBox-attachment cnetChatBox-attachment--${i?"image":"file"}`;if(i){const t=document.createElement("img");t.className="cnetChatBox-attachment-thumb";t.alt=n.name;t.src=URL.createObjectURL(n);a.appendChild(t)}else{const t=e.getIconInfo("sap-icon://document");const n=document.createElement("span");n.className="cnetChatBox-icon cnetChatBox-attachment-icon";if(t)n.style.fontFamily=t.fontFamily;n.textContent=t?.content??"📄";a.appendChild(n)}const o=document.createElement("span");o.className="cnetChatBox-attachment-name";o.textContent=n.name;o.title=n.name;a.appendChild(o);if(s>=0){const t=this._i18n();const e=t.getText("chatbox.removeAttachment")??"Remove";const n=document.createElement("button");n.type="button";n.className="cnetChatBox-attachment-remove";n.title=e;n.setAttribute("aria-label",e);n.textContent="×";n.addEventListener("click",()=>this._removePending(s));a.appendChild(n)}return a},_appendMessageDom:function t(e){const n=this._messagesContainer();if(!n)return;n.querySelector(".cnetChatBox-empty")?.remove();n.appendChild(this._buildMessageDom(e));n.scrollTop=n.scrollHeight},_updateBubble:function t(e){const n=this._messagesContainer();const s=n?.children[e];const i=s?.querySelector(".cnetChatBox-bubble");if(!i||!n)return;this._renderBubble(i,this._messages[e]);const a=n.scrollHeight-n.scrollTop-n.clientHeight<80;if(a)n.scrollTop=n.scrollHeight},_restoreMessages:function t(){const e=this._messagesContainer();if(!e)return;e.innerHTML="";if(this._messages.length===0){const t=document.createElement("div");t.className="cnetChatBox-empty";t.textContent=this._i18n().getText("chatbox.emptyHint")??"";e.appendChild(t);return}for(let t=0;t<this._messages.length;t++){e.appendChild(this._buildMessageDom(t))}e.scrollTop=e.scrollHeight},_renderSidebar:function t(){const e=this._dom("conversations");if(!e)return;e.innerHTML="";if(this._conversations.length===0){const t=document.createElement("div");t.className="cnetChatBox-conversations-empty";t.textContent=this._i18n().getText("chatbox.noConversations")??"";e.appendChild(t);return}const n=this.getActiveConversationId();for(const t of this._conversations){e.appendChild(this._buildConversationItem(t,t.id===n))}},_buildConversationItem:function t(e,n){const s=this._i18n();const i=document.createElement("div");i.className="cnetChatBox-conversation"+(n?" cnetChatBox-conversation--active":"");i.setAttribute("role","button");i.tabIndex=0;const a=document.createElement("div");a.className="cnetChatBox-conversation-body";const o=document.createElement("div");o.className="cnetChatBox-conversation-title";o.textContent=this._conversationTitle(e);a.appendChild(o);const c=document.createElement("div");c.className="cnetChatBox-conversation-snippet";c.textContent=this._conversationSnippet(e);a.appendChild(c);const r=document.createElement("div");r.className="cnetChatBox-conversation-time";r.textContent=this._formatTimestamp(e.updatedAt);a.appendChild(r);i.appendChild(a);const d=s.getText("chatbox.deleteConversation")??"Delete conversation";const l=document.createElement("button");l.type="button";l.className="cnetChatBox-conversation-remove";l.title=d;l.setAttribute("aria-label",d);l.textContent="×";l.addEventListener("click",t=>{t.stopPropagation();this._requestDeleteConversation(e.id)});i.appendChild(l);i.addEventListener("click",()=>this._selectConversation(e.id));i.addEventListener("keydown",t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();this._selectConversation(e.id)}});return i},_conversationTitle:function t(e){if(e.title&&e.title.trim())return e.title.trim();const n=e.messages??[];for(const t of n){if(t.role==="user"&&t.content&&t.content.trim()){return this._truncate(t.content.trim(),40)}}return this._i18n().getText("chatbox.untitledConversation")??"Neue Konversation"},_conversationSnippet:function t(e){const n=e.messages??[];for(let t=n.length-1;t>=0;t--){const e=n[t];if(e.content&&e.content.trim()){const t=e.role==="user"?(this._i18n().getText("chatbox.youPrefix")??"Du:")+" ":"";return this._truncate(t+e.content.trim().replace(/\s+/g," "),60)}}return""},_truncate:function t(e,n){return e.length>n?e.slice(0,n-1).trimEnd()+"…":e},_formatTimestamp:function t(e){if(e===undefined||e===null)return"";const n=e instanceof Date?e:new Date(e);if(isNaN(n.getTime()))return"";const i=new Date;const a=n.toDateString()===i.toDateString();const o=new Date(i);o.setDate(i.getDate()-1);const c=n.toDateString()===o.toDateString();const r=s.getLanguage()||undefined;if(a){return n.toLocaleTimeString(r,{hour:"2-digit",minute:"2-digit"})}if(c){return this._i18n().getText("chatbox.yesterday")??"Gestern"}const d=(i.getTime()-n.getTime())/(1e3*60*60*24);if(d<7){return n.toLocaleDateString(r,{weekday:"short"})}return n.toLocaleDateString(r,{day:"2-digit",month:"2-digit",year:"2-digit"})},_renderHeaderTitle:function t(){const e=this._dom("headerTitle");if(!e)return;const n=this.getActiveConversationId();const s=n?this._conversations.find(t=>t.id===n):undefined;e.textContent=s?this._conversationTitle(s):""},_wireAttachments:function t(){const e=this._dom("attach");const n=this._dom("fileinput");const s=this.getDomRef();e?.addEventListener("click",()=>n?.click());n?.addEventListener("change",()=>{if(!n.files)return;this._addPending(Array.from(n.files));n.value=""});if(!s)return;let i=0;s.addEventListener("dragenter",t=>{if(!this._hasFiles(t))return;t.preventDefault();i++;s.classList.add("cnetChatBox--dragOver")});s.addEventListener("dragover",t=>{if(!this._hasFiles(t))return;t.preventDefault();if(t.dataTransfer)t.dataTransfer.dropEffect="copy"});s.addEventListener("dragleave",()=>{i=Math.max(0,i-1);if(i===0)s.classList.remove("cnetChatBox--dragOver")});s.addEventListener("drop",t=>{if(!this._hasFiles(t))return;t.preventDefault();i=0;s.classList.remove("cnetChatBox--dragOver");const e=t.dataTransfer?.files;if(!e||e.length===0)return;this._addPending(Array.from(e))})},_hasFiles:function t(e){const n=e.dataTransfer?.types;if(!n)return false;for(let t=0;t<n.length;t++){if(n[t]==="Files")return true}return false},_addPending:function t(e){if(this.getBusy())return;if(e.length===0)return;this._pendingAttachments=this._pendingAttachments.concat(e);this._renderPending()},_removePending:function t(e){if(e<0||e>=this._pendingAttachments.length)return;this._pendingAttachments.splice(e,1);this._renderPending()},_renderPending:function t(){const e=this._dom("pending");if(!e)return;e.innerHTML="";if(this._pendingAttachments.length===0){e.classList.remove("cnetChatBox-attachmentsPending--hasItems");return}e.classList.add("cnetChatBox-attachmentsPending--hasItems");e.appendChild(this._buildAttachmentList(this._pendingAttachments,"pending"))}});return c});
+//# sourceMappingURL=ChatBox.js.map