@genexus/genexus-ide-ui 1.0.48 → 1.0.50

package/dist/collection/components/_helpers/chat-container/chat-container.css

@@ -0,0 +1,178 @@
+.chat-container {
+  display: grid;
+  block-size: 100%;
+  overflow: auto;
+  grid-template-rows: max-content 1fr max-content;
+  gap: var(--mer-spacing--xs);
+  padding: var(--mer-spacing--xs);
+  position: relative;
+  --chat-common-border-radius: var(--mer-spacing--2xs);
+}
+
+.section {
+  display: contents;
+}
+
+.chat-container__header {
+  padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--sm);
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--sm);
+  justify-content: space-between;
+}
+
+.chat-container__ch-chat {
+  overflow: auto;
+  position: relative;
+  display: grid;
+}
+
+.chat-container__header,
+.chat-container__footer {
+  padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--sm);
+  border-radius: var(--chat-common-border-radius);
+}
+
+.chat-container__conversation-copied {
+  position: absolute;
+  z-index: 1;
+  inline-size: 100%;
+  block-size: 100%;
+  background: rgba(22, 22, 23, 0.75);
+  backdrop-filter: saturate(180%) blur(20px);
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 32px;
+  --mer-icon__box--md: 18px;
+  pointer-events: none;
+  overflow: hidden;
+  animation: fadeIn 100ms ease-in-out forwards;
+  opacity: 0;
+}
+
+.chat-container__conversation-copied-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--sm);
+}
+
+.chat-container__conversation-copied-wrapper {
+  animation: liftUp var(--mer-timing--fast) ease-in-out forwards;
+  inset-block-start: 4px;
+  opacity: 0;
+  animation-delay: var(--mer-timing--fast);
+  position: relative;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes liftUp {
+  from {
+    opacity: 0;
+    inset-block-start: 4px;
+  }
+  to {
+    opacity: 1;
+    inset-block-start: 0;
+  }
+}
+.chat::part(message) {
+  position: relative;
+  --copy-button-opacity: 0;
+  --copied-to-clipboard-opacity: 0;
+  --date-opacity: 1;
+}
+
+.chat::part(message__time),
+.chat::part(message__copy-button) {
+  transition: opacity var(--mer-timing--super-fast) ease-in-out;
+}
+
+.chat::part(message__time) {
+  opacity: var(--date-opacity);
+}
+
+.chat::part(message):hover {
+  position: relative;
+  --copy-button-opacity: 1;
+  --date-opacity: 0;
+}
+
+.chat::part(message__copy-button) {
+  position: absolute;
+  z-index: 1;
+  inset-inline-end: 0;
+  padding: var(--mer-spacing--sm);
+  transition: opacity var(--mer-timing--fast) ease-in-out;
+  opacity: var(--copy-button-opacity);
+}
+.chat::part(message__copy-button)::after {
+  content: "";
+  inline-size: var(--mer-icon__box--md);
+  block-size: var(--mer-icon__box--md);
+  background: no-repeat center/var(--mer-icon__size--md) var(--icon-path);
+  --icon-path: var(--icon__system_copy_primary--enabled);
+}
+.chat::part(message__copy-button):hover::after {
+  --icon-path: var(--icon__system_copy_primary--hover);
+}
+.chat::part(message__copy-button):active::after {
+  --icon-path: var(--icon__system_copy_primary--active);
+}
+
+.chat::part(message__copied-feedback) {
+  transition: opacity 150ms ease-in-out;
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  background: rgba(22, 22, 23, 0.8);
+  backdrop-filter: saturate(180%) blur(20px);
+  opacity: var(--copied-to-clipboard-opacity);
+  pointer-events: none;
+}
+
+.chat::part(message__copied-feedback-visible) {
+  --copied-to-clipboard-opacity: 1;
+  pointer-events: visible;
+}
+
+.chat::part(send-container) {
+  gap: var(--mer-spacing--xs);
+}
+
+.chat::part(send-input) {
+  --control__padding-block: 7px !important;
+}
+
+.chat::part(send-button) {
+  border-width: var(--control__border-width);
+  border-style: var(--control__border-style);
+  border-color: var(--control__border-color);
+  border-radius: var(--control__border-radius);
+  inline-size: 32px;
+  block-size: 32px;
+  background: no-repeat center/var(--mer-icon__box--md) var(--icon-path);
+  --icon-path: var(--icon__system_send_primary--enabled);
+}
+
+.chat::part(send-button):hover {
+  --icon-path: var(--icon__system_send_primary--hover);
+  --control__border-color: var(--mer-text__primary--hover);
+}
+
+.chat::part(send-button):active {
+  --icon-path: var(--icon__system_send_primary--active);
+  --control__border-color: var(--mer-border-color__primary--active);
+}

package/dist/collection/components/_helpers/chat-container/chat-container.js

@@ -0,0 +1,137 @@
+import { Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "chameleon/scrollbar",
+    "components/button",
+    "components/icon",
+    "utils/elevation"
+];
+const COPY_ICON = getIconPath({
+    category: "system",
+    name: "copy",
+    colorType: "neutral"
+});
+const DELETE_ICON = getIconPath({
+    category: "system",
+    name: "delete-outlined",
+    colorType: "error"
+});
+const CONVERSATION_ICON = getIconPath({
+    category: "objects",
+    name: "conversational-flows"
+});
+export class GxIdeChatContainer {
+    constructor() {
+        this.chatTitle = undefined;
+        this.copyConversationCallback = undefined;
+        this.deleteConversationCallback = undefined;
+        this.displayConversationCopiedMessage = false;
+    }
+    /**
+     * It will display a feedback message that the conversation has been copied
+     */
+    async showCopyConversationMessage() {
+        this.displayConversationCopiedMessage = true;
+        setTimeout(() => {
+            this.displayConversationCopiedMessage = false;
+        }, 2000);
+    }
+    render() {
+        const renderHeader = this.chatTitle ||
+            this.copyConversationCallback ||
+            this.deleteConversationCallback;
+        const renderButtonsGroup = this.copyConversationCallback || this.deleteConversationCallback;
+        return (h(Host, { class: "chat-container" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, renderHeader && (h("header", { class: "chat-container__header elevation-1 body-italic-m" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("div", { class: "buttons-spacer" }, this.deleteConversationCallback && (h("button", { class: "button-secondary button-icon-only", onClick: this.deleteConversationCallback }, h("ch-image", { class: "icon-md", src: DELETE_ICON }))), this.copyConversationCallback && (h("button", { class: "button-secondary button-icon-only", onClick: this.copyConversationCallback }, h("ch-image", { class: "icon-md", src: COPY_ICON }))))))), h("section", { class: "chat-container__ch-chat" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-md", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
+    }
+    static get is() { return "gx-ide-chat-container"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chatTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The chat title"
+                },
+                "attribute": "chat-title",
+                "reflect": false
+            },
+            "copyConversationCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true a button for copying the conversation will be render on the header"
+                }
+            },
+            "deleteConversationCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true a button for deleting the conversation will be render on the header"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayConversationCopiedMessage": {}
+        };
+    }
+    static get methods() {
+        return {
+            "showCopyConversationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "It will display a feedback message that the conversation has been copied",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=chat-container.js.map

package/dist/collection/components/_helpers/chat-container/chat-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-container.js","sourceRoot":"","sources":["../../../../src/components/_helpers/chat-container/chat-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAkB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,qBAAqB;IACrB,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;CAClB,CAAC;AAEF,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,WAAW,GAAG,WAAW,CAAC;IAC9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,OAAO;CACnB,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAC;AAOH,MAAM,OAAO,kBAAkB;;;;;gDAmBwB,KAAK;;IAE1D;;OAEG;IAEH,KAAK,CAAC,2BAA2B;QAC/B,IAAI,CAAC,gCAAgC,GAAG,IAAI,CAAC;QAC7C,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,gCAAgC,GAAG,KAAK,CAAC;QAChD,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAChB,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,wBAAwB;YAC7B,IAAI,CAAC,0BAA0B,CAAC;QAElC,MAAM,kBAAkB,GACtB,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,0BAA0B,CAAC;QACnE,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB;YAC1B,gBAAU,KAAK,EAAE,WAAW,GAAa;YACzC,eAAS,KAAK,EAAC,SAAS;gBACrB,YAAY,IAAI,CACf,cAAQ,KAAK,EAAC,kDAAkD;oBAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS;oBAEhC,kBAAkB,IAAI,CACrB,WAAK,KAAK,EAAC,gBAAgB;wBACxB,IAAI,CAAC,0BAA0B,IAAI,CAClC,cACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAE,IAAI,CAAC,0BAA0B;4BAExC,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,GAAa,CAChD,CACV;wBAEA,IAAI,CAAC,wBAAwB,IAAI,CAChC,cACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAE,IAAI,CAAC,wBAAwB;4BAEtC,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,GAAa,CAC9C,CACV,CACG,CACP,CACM,CACV;gBACD,eAAS,KAAK,EAAC,yBAAyB;oBACtC,eAAa;oBACZ,IAAI,CAAC,gCAAgC,IAAI,CACxC,WAAK,KAAK,EAAC,qCAAqC;wBAC9C,WAAK,KAAK,EAAC,6CAA6C;4BACtD,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,iBAAiB,GAAa;4BAC7D,SAAG,KAAK,EAAC,gBAAgB,0BAAwB,CAC7C,CACF,CACP,CACO,CAEF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Method, State } from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"chameleon/scrollbar\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/elevation\"\n];\n\nconst COPY_ICON = getIconPath({\n  category: \"system\",\n  name: \"copy\",\n  colorType: \"neutral\"\n});\nconst DELETE_ICON = getIconPath({\n  category: \"system\",\n  name: \"delete-outlined\",\n  colorType: \"error\"\n});\nconst CONVERSATION_ICON = getIconPath({\n  category: \"objects\",\n  name: \"conversational-flows\"\n});\n\n@Component({\n  tag: \"gx-ide-chat-container\",\n  styleUrl: \"chat-container.scss\",\n  shadow: false\n})\nexport class GxIdeChatContainer {\n  /**\n   * The chat title\n   */\n  @Prop() readonly chatTitle?: string;\n\n  /**\n   * If true a button for copying the conversation will be render on the header\n   */\n  @Prop() readonly copyConversationCallback: () => void;\n\n  /**\n   * If true a button for deleting the conversation will be render on the header\n   */\n  @Prop() readonly deleteConversationCallback: () => void;\n\n  /**\n   * Coneration Copied\n   */\n  @State() displayConversationCopiedMessage: boolean = false;\n\n  /**\n   * It will display a feedback message that the conversation has been copied\n   */\n  @Method()\n  async showCopyConversationMessage() {\n    this.displayConversationCopiedMessage = true;\n    setTimeout(() => {\n      this.displayConversationCopiedMessage = false;\n    }, 2000);\n  }\n\n  render() {\n    const renderHeader =\n      this.chatTitle ||\n      this.copyConversationCallback ||\n      this.deleteConversationCallback;\n\n    const renderButtonsGroup =\n      this.copyConversationCallback || this.deleteConversationCallback;\n    return (\n      <Host class=\"chat-container\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          {renderHeader && (\n            <header class=\"chat-container__header elevation-1 body-italic-m\">\n              {this.chatTitle && this.chatTitle}\n\n              {renderButtonsGroup && (\n                <div class=\"buttons-spacer\">\n                  {this.deleteConversationCallback && (\n                    <button\n                      class=\"button-secondary button-icon-only\"\n                      onClick={this.deleteConversationCallback}\n                    >\n                      <ch-image class=\"icon-md\" src={DELETE_ICON}></ch-image>\n                    </button>\n                  )}\n\n                  {this.copyConversationCallback && (\n                    <button\n                      class=\"button-secondary button-icon-only\"\n                      onClick={this.copyConversationCallback}\n                    >\n                      <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n                    </button>\n                  )}\n                </div>\n              )}\n            </header>\n          )}\n          <section class=\"chat-container__ch-chat\">\n            <slot></slot>\n            {this.displayConversationCopiedMessage && (\n              <div class=\"chat-container__conversation-copied\">\n                <div class=\"chat-container__conversation-copied-wrapper\">\n                  <ch-image class=\"icon-md\" src={CONVERSATION_ICON}></ch-image>\n                  <p class=\"body-regular-l\">conversation copied</p>\n                </div>\n              </div>\n            )}\n          </section>\n          {/* <footer class=\"chat-container__footer elevation-1\">footer</footer> */}\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/_helpers/chat-container/code-render.js

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+getIconPath;
+const MESSAGE_COPIED_PART_SELECTOR = "message__copied-feedback";
+const MESSAGE_COPIED_VISIBLE_PART_SELECTOR = "message__copied-feedback-visible";
+const copy = (text) => (event) => {
+    event.stopPropagation();
+    // 1. Copy message
+    navigator.clipboard.writeText(text);
+    // 2. Display "copied" message (expects to be the next sibling!)
+    const copiedFeedbackRef = event.target
+        .nextSibling;
+    const copiedFeedbackPart = copiedFeedbackRef.getAttribute("part");
+    if (copiedFeedbackPart === MESSAGE_COPIED_PART_SELECTOR) {
+        copiedFeedbackRef.setAttribute("part", `${MESSAGE_COPIED_PART_SELECTOR} ${MESSAGE_COPIED_VISIBLE_PART_SELECTOR}`);
+        setTimeout(() => {
+            copiedFeedbackRef.setAttribute("part", `${MESSAGE_COPIED_PART_SELECTOR}`);
+        }, 1000);
+    }
+};
+const copyButton = (textToCopy, accessibleName, additionalPart) => {
+    return (h("button", { "aria-label": accessibleName, title: accessibleName, class: "button-copy-code", type: "button", onClick: copy(textToCopy), part: `message__copy-button ${additionalPart}` }));
+};
+export const mercuryCodeRender = (copyButtonAccessibleName) => (options) => (h("div", { class: "code-block-container" }, h("div", { class: "code-block-header" }, copyButton(options.plainText, copyButtonAccessibleName, "code-render")), h("ch-code", { language: options.language, lastNestedChildClass: options.lastNestedChildClass, value: options.plainText })));
+export const mercuryChatMessageRender = (theme) => (messageModel) => messageModel.role === "assistant" && messageModel.status === "waiting"
+    ? [
+        h("span", { part: "message__processing" }, "Processing request"),
+        h("div", { class: "processing-animation", part: "processing-animation" })
+    ]
+    : [
+        // "copy button" before "role" and "time" to hide both on button:focus
+        copyButton(messageModel.content, "Copy code", "common-message"),
+        h("p", { part: MESSAGE_COPIED_PART_SELECTOR }, "message copied to clipboard"),
+        h("span", { part: `message__role ${messageModel.role}` }, messageModel.role === "user" ? "You" : "GeneXus Code Fixer"),
+        h("time", { dateTime: messageModel.metadata, part: "message__time" }, messageModel.metadata),
+        messageModel.role === "user" ? (h("span", { part: "message__content user" }, messageModel.content)) : (h("ch-markdown-viewer", { part: messageModel.role === "assistant" &&
+                (messageModel.status === "complete" || !messageModel.status) &&
+                !messageModel.parts
+                ? `message__content no-error`
+                : "message__content", theme: theme, showIndicator: false, renderCode: mercuryCodeRender("Copy code"), value: messageModel.content }))
+    ];
+//# sourceMappingURL=code-render.js.map

package/dist/collection/components/_helpers/chat-container/code-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-render.js","sourceRoot":"","sources":["../../../../src/components/_helpers/chat-container/code-render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMlC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,WAAW,CAAC;AAEZ,MAAM,4BAA4B,GAAG,0BAA0B,CAAC;AAChE,MAAM,oCAAoC,GAAG,kCAAkC,CAAC;AAEhF,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,KAAY,EAAE,EAAE;IAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,kBAAkB;IAClB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAEpC,gEAAgE;IAChE,MAAM,iBAAiB,GAAI,KAAK,CAAC,MAAsB;SACpD,WAA0B,CAAC;IAC9B,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAClE,IAAI,kBAAkB,KAAK,4BAA4B,EAAE;QACvD,iBAAiB,CAAC,YAAY,CAC5B,MAAM,EACN,GAAG,4BAA4B,IAAI,oCAAoC,EAAE,CAC1E,CAAC;QAEF,UAAU,CAAC,GAAG,EAAE;YACd,iBAAiB,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,4BAA4B,EAAE,CAAC,CAAC;QAC5E,CAAC,EAAE,IAAI,CAAC,CAAC;KACV;AACH,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CACjB,UAAkB,EAClB,cAAsB,EACtB,cAAsB,EACtB,EAAE;IACF,OAAO,CACL,4BACc,cAAc,EAC1B,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,EACzB,IAAI,EAAE,wBAAwB,cAAc,EAAE,GACtC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,wBAAgC,EAAE,EAAE,CACrC,CAAC,OAAwC,EAA4B,EAAE,CACrE,CACE,WAAK,KAAK,EAAC,sBAAsB;IAC/B,WAAK,KAAK,EAAC,mBAAmB,IAC3B,UAAU,CACT,OAAO,CAAC,SAAS,EACjB,wBAAwB,EACxB,aAAa,CACd,CACG;IACN,eACE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,EAClD,KAAK,EAAE,OAAO,CAAC,SAAS,GACf,CACP,CACP,CAAC;AAEN,MAAM,CAAC,MAAM,wBAAwB,GACnC,CAAC,KAAa,EAAE,EAAE,CAClB,CAAC,YAA+D,EAAE,EAAE,CAClE,YAAY,CAAC,IAAI,KAAK,WAAW,IAAI,YAAY,CAAC,MAAM,KAAK,SAAS;IACpE,CAAC,CAAC;QACE,YAAM,IAAI,EAAC,qBAAqB,yBAA0B;QAE1D,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,sBAAsB,GAAO;KACrE;IACH,CAAC,CAAC;QACE,sEAAsE;QACtE,UAAU,CACR,YAAY,CAAC,OAAiB,EAC9B,WAAW,EACX,gBAAgB,CACjB;QACD,SAAG,IAAI,EAAE,4BAA4B,kCAEjC;QACJ,YAAM,IAAI,EAAE,iBAAiB,YAAY,CAAC,IAAI,EAAE,IAC7C,YAAY,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,CACvD;QACP,YAAM,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,IAAI,EAAC,eAAe,IACxD,YAAY,CAAC,QAAQ,CACjB;QAEP,YAAY,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAC7B,YAAM,IAAI,EAAC,uBAAuB,IAAE,YAAY,CAAC,OAAO,CAAQ,CACjE,CAAC,CAAC,CAAC,CACF,0BACE,IAAI,EACF,YAAY,CAAC,IAAI,KAAK,WAAW;gBACjC,CAAC,YAAY,CAAC,MAAM,KAAK,UAAU,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;gBAC5D,CAAC,YAAY,CAAC,KAAK;gBACjB,CAAC,CAAC,2BAA2B;gBAC7B,CAAC,CAAC,kBAAkB,EAExB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE,iBAAiB,CAAC,WAAW,CAAC,EAC1C,KAAK,EAAE,YAAY,CAAC,OAAiB,GACjB,CACvB;KACF,CAAC","sourcesContent":["import { h } from \"@stencil/core\";\nimport {\n  MarkdownViewerCodeRender,\n  ChatMessageByRole\n} from \"@genexus/chameleon-controls-library\";\nimport { MarkdownViewerCodeRenderOptions } from \"@genexus/chameleon-controls-library/dist/types/components/markdown-viewer/parsers/types\";\nimport { getIconPath } from \"@genexus/mercury\";\ngetIconPath;\n\nconst MESSAGE_COPIED_PART_SELECTOR = \"message__copied-feedback\";\nconst MESSAGE_COPIED_VISIBLE_PART_SELECTOR = \"message__copied-feedback-visible\";\n\nconst copy = (text: string) => (event: Event) => {\n  event.stopPropagation();\n\n  // 1. Copy message\n  navigator.clipboard.writeText(text);\n\n  // 2. Display \"copied\" message (expects to be the next sibling!)\n  const copiedFeedbackRef = (event.target as HTMLElement)\n    .nextSibling as HTMLElement;\n  const copiedFeedbackPart = copiedFeedbackRef.getAttribute(\"part\");\n  if (copiedFeedbackPart === MESSAGE_COPIED_PART_SELECTOR) {\n    copiedFeedbackRef.setAttribute(\n      \"part\",\n      `${MESSAGE_COPIED_PART_SELECTOR} ${MESSAGE_COPIED_VISIBLE_PART_SELECTOR}`\n    );\n\n    setTimeout(() => {\n      copiedFeedbackRef.setAttribute(\"part\", `${MESSAGE_COPIED_PART_SELECTOR}`);\n    }, 1000);\n  }\n};\n\nconst copyButton = (\n  textToCopy: string,\n  accessibleName: string,\n  additionalPart: string\n) => {\n  return (\n    <button\n      aria-label={accessibleName}\n      title={accessibleName}\n      class=\"button-copy-code\"\n      type=\"button\"\n      onClick={copy(textToCopy)}\n      part={`message__copy-button ${additionalPart}`}\n    ></button>\n  );\n};\n\nexport const mercuryCodeRender =\n  (copyButtonAccessibleName: string) =>\n  (options: MarkdownViewerCodeRenderOptions): MarkdownViewerCodeRender =>\n    (\n      <div class=\"code-block-container\">\n        <div class=\"code-block-header\">\n          {copyButton(\n            options.plainText,\n            copyButtonAccessibleName,\n            \"code-render\"\n          )}\n        </div>\n        <ch-code\n          language={options.language}\n          lastNestedChildClass={options.lastNestedChildClass}\n          value={options.plainText}\n        ></ch-code>\n      </div>\n    );\n\nexport const mercuryChatMessageRender =\n  (theme: string) =>\n  (messageModel: ChatMessageByRole<\"assistant\" | \"error\" | \"user\">) =>\n    messageModel.role === \"assistant\" && messageModel.status === \"waiting\"\n      ? [\n          <span part=\"message__processing\">Processing request</span>,\n\n          <div class=\"processing-animation\" part=\"processing-animation\"></div>\n        ]\n      : [\n          // \"copy button\" before \"role\" and \"time\" to hide both on button:focus\n          copyButton(\n            messageModel.content as string,\n            \"Copy code\",\n            \"common-message\"\n          ),\n          <p part={MESSAGE_COPIED_PART_SELECTOR}>\n            message copied to clipboard\n          </p>,\n          <span part={`message__role ${messageModel.role}`}>\n            {messageModel.role === \"user\" ? \"You\" : \"GeneXus Code Fixer\"}\n          </span>,\n          <time dateTime={messageModel.metadata} part=\"message__time\">\n            {messageModel.metadata}\n          </time>,\n\n          messageModel.role === \"user\" ? (\n            <span part=\"message__content user\">{messageModel.content}</span>\n          ) : (\n            <ch-markdown-viewer\n              part={\n                messageModel.role === \"assistant\" &&\n                (messageModel.status === \"complete\" || !messageModel.status) &&\n                !messageModel.parts\n                  ? `message__content no-error`\n                  : \"message__content\"\n              }\n              theme={theme}\n              showIndicator={false}\n              renderCode={mercuryCodeRender(\"Copy code\")}\n              value={messageModel.content as string}\n            ></ch-markdown-viewer>\n          )\n        ];\n"]}

package/dist/collection/index.js

@@ -2,4 +2,5 @@ export * from "./components";
 // Add types from Chameleon, without importing any JS in the final bundle.
 // Don't use 'import "@genexus/chameleon-controls-library"'
 typeof import("@genexus/chameleon-controls-library/dist/types/index");
+export { mercuryChatMessageRender, mercuryCodeRender } from "./components/_helpers/chat-container/code-render"; // for ch-chat
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,0EAA0E;AAC1E,2DAA2D;AAC3D,OAAO,MAAM,CAAC,sDAAsD,CAAC,CAAC","sourcesContent":["export * from \"./components\";\n\n// Add types from Chameleon, without importing any JS in the final bundle.\n// Don't use 'import \"@genexus/chameleon-controls-library\"'\ntypeof import(\"@genexus/chameleon-controls-library/dist/types/index\");\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,0EAA0E;AAC1E,2DAA2D;AAC3D,OAAO,MAAM,CAAC,sDAAsD,CAAC,CAAC;AACtE,OAAO,EACL,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,kDAAkD,CAAC,CAAC,cAAc","sourcesContent":["export * from \"./components\";\n\n// Add types from Chameleon, without importing any JS in the final bundle.\n// Don't use 'import \"@genexus/chameleon-controls-library\"'\ntypeof import(\"@genexus/chameleon-controls-library/dist/types/index\");\nexport {\n  mercuryChatMessageRender,\n  mercuryCodeRender\n} from \"./components/_helpers/chat-container/code-render\"; // for ch-chat\n"]}

package/dist/collection/showcase/chat-container/callbacks.js

@@ -0,0 +1,247 @@
+const PROCESSING_PLACEHOLDER = "{{ASSISTANT_NAME}}";
+let timeOut;
+const ASSISTANT_RESPONSE_MARKDOWN = `
+    ### Code block {#code-block}
+    To create code blocks, you’ll use three backticks (\` \`\`\` \`) or three tildes (\`~~~\`) on the lines before and after the code block.
+    
+    \`\`\`
+    {
+      "firstName": "John",
+      "lastName": "Smith",
+      "age": 25
+    }
+    \`\`\`
+    
+    Another way to create code blocks is to indent every line of the block by at least four spaces or one tab.
+    
+        <html>
+          <head>
+          </head>
+        </html>
+    
+    
+    #### Syntax Highlighting {#syntax-highlighting}
+    This feature allows you to add color highlighting for whatever language your code was written in.
+    To add syntax highlighting, specify a language next to the backticks before the fenced code block.
+    
+    \`\`\`json
+    {
+      "firstName": "John",
+      "lastName": "Smith",
+      "age": 25
+    }
+    \`\`\`
+    
+    \`\`\`javascript
+    import React from 'react'
+    import ReactDOM from 'react-dom'
+    import Markdown from 'react-markdown'
+    import rehypeHighlight from 'rehype-highlight'
+    
+    const markdown = \`
+    # Your markdown here
+    \`
+    
+    ReactDOM.render(
+      <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,
+      document.querySelector('#content')
+    )
+    \`\`\`
+    
+    ### Horizontal Rules {#horizontal-rules}
+    To create a horizontal rule, use three or more asterisks (\`***\`), dashes (\`---\`), or underscores (\`___\`) on a line by themselves.
+    `;
+const ASSISTANT_RESPONSE_SHORT_MARKDOWN = `
+    ### Code block {#code-block}
+    To create code blocks, you’ll use three backticks (\` \`\`\` \`) or three tildes (\`~~~\`) on the lines before and after the code block.
+    
+    \`\`\`json
+    {
+      "firstName": "John",
+      "lastName": "Smith",
+      "age": 25
+    }
+    \`\`\`
+    `;
+const sendChatToLLM = () => {
+    // This is a WA to get the chat reference
+    const chatRef = document.querySelector("ch-chat");
+    chatRef.addNewMessage({
+        id: `${new Date().getTime()}`,
+        role: "assistant",
+        content: "Analyzing",
+        status: "waiting"
+    });
+    timeOut = setTimeout(() => {
+        chatRef.updateLastMessage({
+            role: "assistant",
+            content: "Processing with Chat with LLMs",
+            status: "waiting"
+        }, "replace");
+        timeOut = setTimeout(() => {
+            dummyStreaming(chatRef, 20, ASSISTANT_RESPONSE_MARKDOWN, "replace");
+        }, 200);
+    }, 200);
+};
+function dummyStreaming(chatRef, counter, stringToDisplay, mode) {
+    timeOut = setTimeout(() => {
+        const streamingCompleted = counter >= stringToDisplay.length;
+        chatRef.updateLastMessage({
+            role: "assistant",
+            content: {
+                message: stringToDisplay.substring(counter - 20, counter),
+                files: streamingCompleted
+                    ? [
+                        {
+                            url: "https://next.genexus.ai",
+                            caption: "Mars Exploration Contract"
+                        },
+                        {
+                            url: "https://gx-chameleon.netlify.app",
+                            caption: "Venus Exploration Contract"
+                        }
+                    ]
+                    : undefined
+            },
+            status: streamingCompleted ? "complete" : "streaming"
+        }, mode);
+        if (!streamingCompleted) {
+            dummyStreaming(chatRef, counter + 20, stringToDisplay, "concat");
+        }
+    }, counter % 200 === 0 ? 50 : 40);
+}
+export const chatCallbacks = {
+    clear: () => new Promise(resolve => resolve()),
+    sendChatToLLM: sendChatToLLM,
+    uploadImage: () => new Promise(resolve => resolve("")),
+    stopGeneratingAnswer: () => {
+        clearTimeout(timeOut);
+        // This is a WA to get the chat reference
+        const chatRef = document.querySelector("ch-chat");
+        chatRef.updateLastMessage({
+            role: "assistant",
+            content: "",
+            status: "complete"
+        }, "concat");
+        return new Promise(resolve => setTimeout(() => resolve, 10));
+    }
+};
+export const chatTranslations = {
+    accessibleName: {
+        clearChat: "Clear chat",
+        copyResponseButton: "Copy assistant response",
+        downloadCodeButton: "Download code",
+        imagePicker: "Select images",
+        removeUploadedImage: "Remove uploaded image",
+        sendButton: "Send",
+        sendInput: "Message",
+        stopGeneratingAnswerButton: "Stop generating answer"
+    },
+    placeholder: {
+        sendInput: "Ask me a question..."
+    },
+    text: {
+        copyCodeButton: "Copy code",
+        processing: `Processing with ${PROCESSING_PLACEHOLDER}`,
+        sourceFiles: "Source files:"
+    }
+};
+export const chatRecord = [
+    { id: "1", role: "user", content: "Hello world" },
+    { id: "2", role: "assistant", content: ASSISTANT_RESPONSE_MARKDOWN },
+    { id: "3", role: "user", content: "Hello world 1" },
+    { id: "4", role: "assistant", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },
+    { id: "5", role: "user", content: "Hello world 2" },
+    { id: "6", role: "assistant", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },
+    { id: "7", role: "user", content: "Hello world 3" },
+    { id: "8", role: "assistant", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },
+    { id: "9", role: "user", content: "Hello world 4" },
+    { id: "10", role: "assistant", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN }
+];
+export const longChatRecord = Array.from({ length: 40 }, (_, index) => index % 2 === 0
+    ? {
+        id: `index: ${index}`,
+        role: "user",
+        content: `index: ${index}` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n`
+    }
+    : {
+        id: `index: ${index}`,
+        role: "assistant",
+        content: ASSISTANT_RESPONSE_SHORT_MARKDOWN +
+            `\nindex: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n` +
+            `index: ${index}\n`
+    });
+export const codeFixerRecord = [
+    {
+        id: "1",
+        role: "user",
+        content: "Please give me an example about...",
+        metadata: "14:55"
+    },
+    {
+        id: "2",
+        role: "assistant",
+        status: "complete",
+        content: "Action required example. Action required example. Action required example.",
+        metadata: "14:56"
+    },
+    {
+        id: "3",
+        role: "assistant",
+        status: "complete",
+        content: "Warning in request",
+        metadata: "14:57",
+        parts: "warning"
+    },
+    {
+        id: "4",
+        role: "error",
+        content: "Error in Request",
+        metadata: "14:58"
+    },
+    {
+        id: "5",
+        role: "assistant",
+        status: "complete",
+        content: "Warning in request",
+        metadata: "14:59",
+        parts: "success"
+    },
+    {
+        id: "6",
+        role: "user",
+        content: "Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number",
+        metadata: "15:00"
+    },
+    {
+        id: "7",
+        role: "assistant",
+        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: "15:01"
+    },
+    {
+        id: "8",
+        role: "assistant",
+        status: "waiting",
+        content: "Processing Request"
+    },
+    {
+        id: "9",
+        role: "assistant",
+        status: "complete",
+        content: ASSISTANT_RESPONSE_SHORT_MARKDOWN
+    }
+];
+//# sourceMappingURL=callbacks.js.map