@genexus/genexus-ide-ui 1.0.47 → 1.0.49

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,113 @@
+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 CONVERSATION_ICON = getIconPath({
+    category: "objects",
+    name: "conversational-flows"
+});
+export class GxIdeChatContainer {
+    constructor() {
+        this.chatTitle = undefined;
+        this.copyConversationCallback = 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;
+        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, this.copyConversationCallback && (h("button", { class: "button-secondary button-icon-only", onClick: this.copyConversationCallback }, h("ch-image", { class: "icon-md", src: COPY_ICON, onClick: this.copyConversationCallback }))))), 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.s"
+                }
+            }
+        };
+    }
+    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,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAC;AAOH,MAAM,OAAO,kBAAkB;;;;gDAcwB,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,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,wBAAwB,CAAC;QACrE,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;oBAChC,IAAI,CAAC,wBAAwB,IAAI,CAChC,cACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAE,IAAI,CAAC,wBAAwB;wBAEtC,gBACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,wBAAwB,GAC5B,CACL,CACV,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 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.s\n   */\n  @Prop() readonly copyConversationCallback: () => 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 = this.chatTitle || this.copyConversationCallback;\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              {this.copyConversationCallback && (\n                <button\n                  class=\"button-secondary button-icon-only\"\n                  onClick={this.copyConversationCallback}\n                >\n                  <ch-image\n                    class=\"icon-md\"\n                    src={COPY_ICON}\n                    onClick={this.copyConversationCallback}\n                  ></ch-image>\n                </button>\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":"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","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/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

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

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

package/dist/collection/showcase/chat-container/chat-showcase.css

@@ -0,0 +1,4 @@
+:host {
+  block-size: 100%;
+  display: grid;
+}