@genexus/genexus-ide-ui 1.1.56 → 1.1.57

package/dist/components/gx-ide-sc-chat-container.js

@@ -1,8 +1,252 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { r as renderItemMercury } from './render-item.lit.js';
+import './mer-animated-dots.js';
+import { html, nothing } from 'lit';
+import { when } from 'lit/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { d as defineCustomElement$3 } from './chat-container.js';
 import { d as defineCustomElement$2 } from './chat-welcome.js';
 
+// TODO: The functions on this file are a WA until Chameleon 7 is released and we can reuse
+// the existing functions from Chameleon. At the moment, we have to copy paste the functions
+// because in Chameleon 6 we can import them.
+// The following utils were copied from Chamelmeon (src/components/chat/utils.ts or src/common/utils.ts)
+const getMessageSerializedContentAll = (message) => typeof message.content === "string"
+    ? message.content
+    : JSON.stringify(message.content, undefined, 2);
+const getMessageContent = (message) => typeof message.content === "string"
+    ? message.content
+    : message.content.message;
+/**
+ * Converts an object mapping token keys to booleans into a space-separated
+ * string containing the token keys that map to truthy values.
+ * @example
+ *   part={tokenMap({
+ *     header: true,
+ *     disabled: this.disabled,
+ *     selected: this.selected,
+ *     [levelPart]: canShowLines,
+ *     "expand-button":
+ *       canShowLines && !this.leaf && this.expandableButton !== "no"
+ *   })}
+ */
+const tokenMap = (tokens) => {
+    const keys = Object.keys(tokens);
+    let result = "";
+    for (let index = 0; index < keys.length; index++) {
+        const tokenKey = keys[index];
+        const tokenValue = tokens[tokenKey];
+        if (tokenValue) {
+            result += result === "" ? tokenKey : ` ${tokenKey}`;
+        }
+    }
+    return result;
+};
+const copyToTheClipboard = (text) => navigator.clipboard.writeText(text);
+const copyButtonClickHandler = (event, text) => {
+    copyToTheClipboard(text);
+    const button = event.currentTarget;
+    if (button) {
+        const buttonOriginalParts = button.getAttribute("part");
+        const buttonWithCopyingParts = `${buttonOriginalParts} copying`;
+        button.setAttribute("disabled", "disabled");
+        button.setAttribute("part", buttonWithCopyingParts);
+        setTimeout(() => {
+            button.removeAttribute("disabled");
+            button.setAttribute("part", buttonOriginalParts || "");
+        }, 1500);
+    }
+};
+const DEFAULT_ASSISTANT_STATUS = "complete";
+
+const copyClickHandler = (event, message) => {
+    // We use the whole message to support copying the files and/or sources
+    const messageSerializedContentAll = getMessageSerializedContentAll(message);
+    copyButtonClickHandler(event, messageSerializedContentAll);
+};
+const customActionsRender = (message, chatRef) => {
+    const { accessibleName } = chatRef.translations;
+    const conditionToRender1 = message.role === "assistant" &&
+        (message.status === "complete" || !message.status);
+    const conditionToRender2 = message.role === "error";
+    return when(conditionToRender1 || conditionToRender2, () => html `<div part="actions-container"><button aria-label="${accessibleName.copyMessageContent}" part="${tokenMap({
+        [`action-button action-copy-message ${message.id}`]: true,
+        ...(message.parts ? { [message.parts]: true } : {})
+    })}" type="button" @click="${(e) => copyClickHandler(e, message)}"></button></div>`);
+};
+
+const downloadCodeBlockCallback = (plainText, language, downloadCodeBlock) => () => downloadCodeBlock(plainText, language);
+const customCodeBlockRender = (chatRef) => (options) => {
+    const { accessibleName, text } = chatRef.translations;
+    const downloadCb = chatRef.callbacks?.downloadCodeBlock;
+    return html `<div part="code-block"><div part="code-block__header"><span part="code-block__header-caption">${options.language}</span><div part="code-block__header-actions"><button class="button-copy-code" aria-label="${text.copyCodeButton}" part="code-block__button--icon-only code-block__copy-code-button" type="button" @click="${(e) => copyButtonClickHandler(e, options.plainText)}"></button> ${when(downloadCb, () => html `<button aria-label="${accessibleName.downloadCodeButton}" part="code-block__button--icon-only code-block__download-code-button" @click="${downloadCodeBlockCallback(options.plainText, options.language, downloadCb)}"></button>`)}</div></div><ch-code .language="${options.language}" .lastNestedChildClass="${options.lastNestedChildClass}" part="code-block__content" .showIndicator="${options.showIndicator}" .value="${options.plainText}"></ch-code></div>`;
+};
+
+const DEFAULT_FILE_UPLOAD_STATE = "uploaded";
+// /**
+//  * Returns a skeleton element shown while a file is being uploaded.
+//  *
+//  * In Mercury, the loading state is visually represented in the footer,
+//  * so this skeleton is currently unused. However, it is recommended to keep
+//  * this function in the file in case the design changes and a visual loader
+//  * inside the file container becomes necessary again.
+//  *
+//  * @param file - The file object containing metadata and upload state.
+//  * @param fileFormat - The format type of the file (e.g., text, image, etc.).
+//  * @returns A TemplateResult with the skeleton element or `nothing` if not loading.
+//  */
+// const fileSkeleton = (
+//   file: ChatMessageFile,
+//   fileFormat: keyof ChMimeTypeFormatMap
+// ): TemplateResult | typeof nothing => {
+//   return file.uploadState === "in-progress"
+//     ? html`<div
+//         part=${tokenMap({
+//           [`file-skeleton format-${fileFormat} ${file.mimeType} ${
+//             file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE
+//           }`]: true,
+//           [file.extension!]: !!file.extension,
+//           [file.parts!]: !!file.parts
+//         })}
+//       ></div>`
+//     : nothing;
+// };
+const fileFooter = (file, fileFormat) => {
+    return html `<div class="elevation-1" part="${tokenMap({
+        [`file-footer format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
+        [file.extension]: !!file.extension,
+        [file.parts]: !!file.parts
+    })}"><span class="body-regular-xs" part="file-caption">${file.caption}${file.extension && "." + file.extension.toLowerCase()} </span>${file.uploadState === "in-progress"
+        ? html `<mer-spinner></mer-spinner>`
+        : nothing}</div>`;
+};
+const getFileContainerParts = (file, fileFormat) => {
+    return tokenMap({
+        [`file-container format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
+        [file.extension]: !!file.extension,
+        [file.parts]: !!file.parts
+    });
+};
+const getFileParts = (file, fileFormat) => tokenMap({
+    [`file format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
+    [file.extension]: !!file.extension,
+    [file.parts]: !!file.parts
+});
+// TODO: Improve accessibility by exposing progress or spin states while
+// uploading
+const customFileRenders = {
+    audio: (file) => {
+        return html `<li class="file-container" part="${getFileContainerParts(file, "audio")}"><audio aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "audio")}" src="${ifDefined(file.uploadState === "in-progress" ? undefined : file.url)}" controls></audio>${fileFooter(file, "audio")}</li>`;
+    },
+    video: (file) => {
+        return html `<li class="file-container" part="${getFileContainerParts(file, "video")}"><video aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "video")}" src="${ifDefined(file.uploadState === "in-progress" ? undefined : file.url)}" controls></video>${fileFooter(file, "video")}</li>`;
+    },
+    image: (file) => {
+        return html `<li class="file-container" part="${getFileContainerParts(file, "image")}"><img aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "image")}" src="${file.url}" alt="${file.alternativeText ?? file.accessibleName ?? ""}" loading="lazy"> ${fileFooter(file, "image")}</li>`;
+    },
+    file: (file) => {
+        const disabledWhileUploading = file.uploadState === "in-progress";
+        return html `<li class="file-container" part="${getFileContainerParts(file, "file")}"><a aria-label="${ifDefined(file.accessibleName)}" role="${disabledWhileUploading ? "link" : nothing}" aria-disabled="${disabledWhileUploading ? "true" : nothing}" part="${getFileParts(file, "file")}" href="${disabledWhileUploading ? nothing : file.url}" target="_blank"></a> ${fileFooter(file, "file")}</li>`;
+    }
+};
+
+/*
+README:
+This file contains two utilities:
+
+1) [Sections for customitizing the ch-chat renderItem]
+The following sections are being customized at the time of writting:
+- actions: customActionsRender,
+- codeBlock: customCodeBlockRender,
+- content: customContentRender
+
+What for?
+
+- actions: In order to be able to customize the copy button, by adding a part
+"copying" when the user copies the message. This additional part allows changing
+the current button icon of "copy" to a "checked" icon.
+- codeBlock: Same reason as "actions" section.
+- content: Mercury includes a "header" section for the assistant message. This
+header includes an avatar, the assistant name, and optionally the message time.
+This header requires custom markup, and for this reason this section has to be
+customized.
+
+2) [Configuration for the ch-chat sendContainerLayout property]
+The chat styles are designed for a specific layout, so users must use the sendContainerLayout provided by Mercury. Customizing it is not supported.
+*/
+// 1) [Sections for customitizing the ch-chat renderItem.]
+/**
+ * Mercury section that includes the assistant the assistant name, and an optional message time.
+ *
+ * @param messageMetaData - Metadata containing agentName and time
+ * @returns TemplateResult rendering the assistant message header
+ */
+const messageHeader = (messageMetaData, waiting = false) => {
+    const agentName = messageMetaData?.agentName;
+    const assistantId = agentName?.toLowerCase().replace(/ /g, "-");
+    const messageTime = messageMetaData?.time;
+    return html `<div part="header assistant${assistantId ? ` header-${assistantId}` : ""}"><div part="header__start assistant"><div part="header__avatar-container assistant"><div part="header__avatar-border assistant"></div><div part="header__avatar-image assistant"></div></div><div part="header__role assistant">${agentName}</div>${waiting ? html `<mer-animated-dots></mer-animated-dots>` : nothing}</div>${messageTime
+        ? html `<time datetime="${messageTime}" part="header__time assistant">${messageTime}</time>`
+        : nothing}</div>`;
+};
+// customzied in order to add the custom "messageHeader"
+const customAssistantContentRender = (message, chatRef, codeBlockRender) => {
+    const messageContent = getMessageContent(message);
+    return message.status === "waiting"
+        ? html `${messageHeader(message.metadata, true)}<div class="assistant-loading" part="${tokenMap({
+            [`assistant content waiting ${message.id}`]: true,
+            ...(message.parts ? { [message.parts]: true } : {})
+        })}">${messageContent}</div>`
+        : html `${messageHeader(message.metadata)}<ch-markdown-viewer part="${tokenMap({
+            [`assistant content ${message.id} ${message.status ?? DEFAULT_ASSISTANT_STATUS}`]: true,
+            ...(message.parts ? { [message.parts]: true } : {})
+        })}" .renderCode="${
+        // WA: Define codeBlockRender as "never" to avoid types incompatibility:
+        // codeBlockRender returns TemplateResult and renderCode expects TemplateResult | undefined
+        // In Chameleon this type mismatch does not happens. TODO: Evaluate a solution in Chameleon.
+        codeBlockRender(chatRef)}" .showIndicator="${message.status === "streaming"}" .theme="${chatRef.markdownTheme ?? undefined}" .value="${messageContent}"></ch-markdown-viewer>`;
+};
+// customzied in order to add the custom "messageHeader"
+const customErrorContentRender = (message, chatRef, codeBlockRender) => {
+    const errorContent = getMessageContent(message);
+    return html `${messageHeader(message.metadata)}<ch-markdown-viewer part="${tokenMap({
+        [`error content ${message.id}`]: true,
+        ...(message.parts ? { [message.parts]: true } : {})
+    })}" .renderCode="${
+    // WA: Define codeBlockRender as "never" to avoid types incompatibility:
+    // codeBlockRender returns TemplateResult and renderCode expects TemplateResult | undefined
+    // In Chameleon this type mismatch does not happens. TODO: Evaluate a solution in Chameleon.
+    codeBlockRender(chatRef)}" .theme="${chatRef.markdownTheme ?? undefined}" .value="${errorContent}"></ch-markdown-viewer>`;
+};
+// No modification. It is required to be defined.
+const defaultSystemContentRender = () => "string | TemplateResult";
+// No modification. It is required to be defined.
+const defaultUserContentRender = (messageModel) => getMessageContent(messageModel) ?? "";
+const contentRenderByRole = {
+    // TODO: Check if each contentRender can be optional, since it may be not me required to implement
+    // a custom render for each type of content. ie.: Mercury does not requres to customize "system" and "user"
+    assistant: customAssistantContentRender,
+    error: customErrorContentRender,
+    system: defaultSystemContentRender, // No modification
+    user: defaultUserContentRender // No modification
+};
+const customContentRender = (message, chatRef, codeBlockRender) => contentRenderByRole[message.role](message, chatRef, codeBlockRender);
+const renderItem = {
+    actions: customActionsRender,
+    codeBlock: customCodeBlockRender,
+    content: customContentRender,
+    file: customFileRenders
+};
+// 2) [Configuration for the ch-chat sendContainerLayout property]
+const sendContainerLayout = {
+    sendInputAfter: [
+        "attach-files-button",
+        "live-audio-button",
+        "send-button",
+        "chat-attached-files-viewer"
+    ],
+    sendContainerAfter: ["live-audio-container"]
+};
+
 const ASSISTANT_RESPONSE_SHORT_MARKDOWN = '\n### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (` ``` `) or three tildes (`~~~`) on the lines before and after the code block.\n\n```json\n{\n  "firstName": "John",\n  "lastName": "Smith",\n  "age": 25\n}';
 const ASSISTANT_NAME = "Nexa";
 // - - - - - - - - - - - - - -
@@ -96,7 +340,7 @@ const codeFixerRecord = [
         status: "complete",
         content: "Action required example. Action required example. Action required example.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -106,7 +350,7 @@ const codeFixerRecord = [
         status: "complete",
         content: "Some fields contain missing or invalid data, which may prevent the process from completing correctly. Review your input carefully and make any necessary corrections before continuing.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "warning"
@@ -116,7 +360,7 @@ const codeFixerRecord = [
         role: "error",
         content: "An unexpected error occurred while processing your request, and the operation couldn’t be completed.Please check your internet connection or try again later. If the problem persists, contact support.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -126,7 +370,7 @@ const codeFixerRecord = [
         status: "complete",
         content: "Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "success"
@@ -143,7 +387,7 @@ const codeFixerRecord = [
         status: "complete",
         content: "You can provide further details or updates regarding your support ticket and its associated code. Your input here helps us better understand and address your issue effectively.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -153,7 +397,7 @@ const codeFixerRecord = [
         status: "waiting",
         content: "You can provide further details or updates",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -163,7 +407,7 @@ const codeFixerRecord = [
         status: "complete",
         content: ASSISTANT_RESPONSE_SHORT_MARKDOWN,
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     }
@@ -171,14 +415,14 @@ const codeFixerRecord = [
 
 const PROCESSING_PLACEHOLDER = "{{ASSISTANT_NAME}}";
 const sendChatMessages = (chatRef) => () => {
-    chatRef.generatingResponse = true;
+    chatRef.waitingResponse = true;
     chatRef.addNewMessage({
         id: `${new Date().getTime()}`,
         role: "assistant",
         content: "Analyzing",
         status: "waiting",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     });
@@ -188,7 +432,7 @@ const sendChatMessages = (chatRef) => () => {
             content: "Processing with Chat with LLMs",
             status: "waiting",
             metadata: {
-                assistantName: ASSISTANT_NAME,
+                agentName: ASSISTANT_NAME,
                 time: "14:25"
             }
         }, "replace");
@@ -197,7 +441,7 @@ const sendChatMessages = (chatRef) => () => {
         }, 2000);
     }, 2000);
 };
-const stopGeneratingAnswer = () => {
+const stopResponseAnswer = () => {
     console.log("stop generating answer");
     return new Promise(resolve => {
         // Lógica asincrónica aquí si es necesario
@@ -214,7 +458,7 @@ const chatCallbacksWithChatRef = (chChatRef) => {
                 mimeType: "application/javascript"
             });
         }),
-        stopGeneratingAnswer: stopGeneratingAnswer
+        stopResponse: stopResponseAnswer
     };
 };
 function dummyStreaming(chatRef, counter, stringToDisplay, mode) {
@@ -240,7 +484,7 @@ function dummyStreaming(chatRef, counter, stringToDisplay, mode) {
             // },
             status: streamingCompleted ? "complete" : "streaming",
             metadata: {
-                assistantName: ASSISTANT_NAME,
+                agentName: ASSISTANT_NAME,
                 time: "14:25"
             }
         }, mode);
@@ -248,7 +492,7 @@ function dummyStreaming(chatRef, counter, stringToDisplay, mode) {
             dummyStreaming(chatRef, counter + 20, stringToDisplay, "concat");
         }
         else {
-            chatRef.generatingResponse = false;
+            chatRef.waitingResponse = false;
         }
     }, counter % 200 === 0 ? 50 : 40);
 }
@@ -259,7 +503,7 @@ const chatTranslations = {
         downloadCodeButton: "Download code",
         sendButton: "Send",
         sendInput: "Message",
-        stopGeneratingAnswerButton: "Stop generating answer"
+        stopResponseButton: "Stop generating answer"
     },
     placeholder: {
         sendInput: "Ask me a question..."
@@ -270,7 +514,7 @@ const chatTranslations = {
         downloadCodeButton: "Download code",
         processing: `Processing with ${PROCESSING_PLACEHOLDER}`,
         sourceFiles: "Source files:",
-        stopGeneratingAnswerButton: "Stop generating answer"
+        stopResponseButton: ""
     }
 };
 
@@ -293,11 +537,10 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _GxIdeScChatContainer_chatContainerRef, _GxIdeScChatContainer_chatWelcomeRef, _GxIdeScChatContainer_chChatRef, _GxIdeScChatContainer_chatCallbacks, _GxIdeScChatContainer_copyConversationCallbackHandler, _GxIdeScChatContainer_deleteConversationCallbackHandler, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler;
-// TODO: Add back "components/chat-lit" once chat bundle for lit is ready
-// on a new Mercury version
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/elevation",
+    "components/chat",
     "components/markdown-viewer"
 ];
 const GxIdeScChatContainer$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeScChatContainer extends HTMLElement {
@@ -406,7 +649,7 @@ const GxIdeScChatContainer$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeScCha
         }
     }
     render() {
-        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat-lit", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: renderItemMercury, items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: (el) => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")), markdownTheme: "components/markdown-viewer" }, h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f") }), h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", waitingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: renderItem, items: this.chatItems, showAdditionalContent: false, sendContainerLayout: sendContainerLayout, translations: chatTranslations, ref: (el) => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")), markdownTheme: "components/markdown-viewer" }, h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f") }), h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
     }
     static get style() { return chatShowcaseCss; }
 }, [1, "gx-ide-sc-chat-container", {