@genexus/genexus-ide-ui 0.0.71 → 0.0.73

package/dist/collection/components/ai-assistant/ai-assistant.css

@@ -0,0 +1,389 @@
+/*Gemini*/
+/*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
+:host {
+  display: block;
+  height: 100%;
+  --assistant-bg-color: var(--gray-11);
+}
+
+/*--- Assistant Status ---*/
+:host(.assistant--success) .header::before {
+  background-color: var(--color-primary-hover);
+}
+
+:host(.assistant--error) .header::before {
+  background-color: var(--color-error-light);
+}
+
+.gx-ide-main-wrapper {
+  padding: 106px 10px 52px 10px;
+  background-color: var(--gray-10);
+  height: 100%;
+}
+
+/*--- Header ---*/
+.header {
+  border-block-start: 1px solid var(--gray-13);
+  padding-block-start: var(--spacing-comp-03);
+  display: flex;
+  gap: var(--spacing-comp-02);
+  align-items: center;
+}
+.header::before {
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  display: block;
+  border-radius: calc(var(--spacing-comp-02) / 2);
+  background-color: var(--gray-02);
+}
+
+/*--- Messages ---*/
+.messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-comp-02);
+  list-style-type: none;
+  padding: 0;
+}
+.messages .message {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 100ms;
+  transition: grid-template-rows 100ms, -ms-grid-rows 100ms;
+  /*caption*/
+}
+.messages .message--visible {
+  grid-template-rows: 1fr;
+}
+.messages .message__outer-wrapper {
+  overflow: hidden;
+}
+.messages .message__inner-wrapper {
+  padding: 8px;
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width-sm) solid transparent;
+  background-color: var(--assistant-bg-color);
+  border-inline-start-width: var(--border-width-md);
+}
+.messages .message__caption {
+  font-size: var(--mc-font-size-xxs);
+  line-height: var(--font-style-regular);
+}
+.messages .message--user .message__inner-wrapper {
+  background-color: var(--gray-12);
+}
+.messages .message--assistant-action .message__inner-wrapper, .messages .message--assistant-error .message__inner-wrapper {
+  font-style: italic;
+}
+.messages .message--assistant-in-progress .message__inner-wrapper {
+  font-style: italic;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-comp-02);
+  border-inline-start-color: var(--gray-02);
+}
+.messages .message--assistant-in-progress .message__inner-wrapper .message__caption {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+.messages .message--assistant-in-progress .message__inner-wrapper .animation-wrapper {
+  flex: none;
+}
+.messages .message--assistant-chat .message__inner-wrapper, .messages .message--assistant-action .message__inner-wrapper {
+  border-inline-start-color: var(--color-primary-hover);
+}
+.messages .message--assistant-error .message__inner-wrapper {
+  border-inline-start-color: var(--color-error-light);
+}
+/*--- Message Animation ---*/
+@keyframes message-animation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/*--- Prompt ---*/
+.prompt {
+  position: relative;
+  margin-top: auto;
+}
+.prompt__textarea::part(textarea-wrapper) {
+  border: none;
+  background-color: var(--assistant-bg-color);
+}
+.prompt__shortcuts {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-comp-01);
+  padding-right: var(--spacing-comp-02);
+  right: 0;
+  top: 0;
+  height: 100%;
+}
+.prompt__shortcut {
+  padding: var(--spacing-comp-00) var(--spacing-comp-02);
+  background-color: var(--gray-00);
+  border-radius: var(--border-width-md);
+}
+
+/*--- Dot Pulse Sweet Animation ---*/
+.animation-wrapper {
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dot-pulse {
+  position: relative;
+  left: -9999px;
+  width: 5px;
+  height: 5px;
+  border-radius: 2.5px;
+  background-color: var(--gray-03);
+  color: var(--gray-03);
+  box-shadow: 9999px 0 0 -5px;
+  animation: dot-pulse 1.5s infinite linear;
+  animation-delay: 0.25s;
+}
+.dot-pulse::before, .dot-pulse::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 5px;
+  height: 5px;
+  border-radius: 2.5px;
+  background-color: var(--gray-03);
+  color: var(--gray-03);
+}
+.dot-pulse::before {
+  box-shadow: 9984px 0 0 -5px;
+  animation: dot-pulse-before 1.5s infinite linear;
+  animation-delay: 0s;
+}
+.dot-pulse::after {
+  box-shadow: 10014px 0 0 -5px;
+  animation: dot-pulse-after 1.5s infinite linear;
+  animation-delay: 0.5s;
+}
+
+@keyframes dot-pulse-before {
+  0% {
+    box-shadow: 9984px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 9984px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 9984px 0 0 -5px;
+  }
+}
+@keyframes dot-pulse {
+  0% {
+    box-shadow: 9999px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 9999px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 9999px 0 0 -5px;
+  }
+}
+@keyframes dot-pulse-after {
+  0% {
+    box-shadow: 10014px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 10014px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 10014px 0 0 -5px;
+  }
+}

package/dist/collection/components/ai-assistant/ai-assistant.js

@@ -0,0 +1,269 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+export class GxIdeTemplate {
+  constructor() {
+    this.renderedFirstTime = false;
+    // 9.LOCAL METHODS //
+    this.renderMessage = (message) => {
+      if (message.text.length > 0) {
+        return (h("li", { class: {
+            "message": true,
+            [`message--${[message.type]}`]: true,
+            "message--assistant": message.type !== "user",
+            "message--visible": this.showMessage
+          } }, h("div", { class: "message__outer-wrapper" }, h("div", { class: "message__inner-wrapper" }, h("div", { class: {
+            "message__caption": true,
+            "message__caption--in-progress": message.type === "assistant-in-progress"
+          } }, message.text), message.type === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
+      }
+    };
+    this.textAreaInputHandler = () => {
+      this.userHasTyped = true;
+    };
+    this.promptEnterHandler = async (prompt) => {
+      const promptValue = prompt.detail;
+      if (this.userMessageCallback && !this.processingUserMessage) {
+        this.processingUserMessage = true;
+        this.userMessageCallback(promptValue).then(() => {
+          this.processingUserMessage = false;
+        });
+      }
+    };
+    this.userHasTyped = false;
+    this.addingQuery = false;
+    this.showMessage = true;
+    this.processingUserMessage = false;
+    this.messages = undefined;
+    this.promptMaxHeight = "128px";
+    this.assistantStatus = "success";
+    this.focusShortcuts = undefined;
+    this.userMessageCallback = undefined;
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  /**
+   * Clear the list of messages
+   */
+  async clear() {
+    this.messages = [];
+  }
+  /**
+   * Add a message. This method will be used by the host to add messages from the assistant
+   */
+  async addMessage(message) {
+    var _a;
+    if (((_a = message.text) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      const messages = [...this.messages];
+      const updateInProgressMessage = messages[messages.length - 1].type === "assistant-in-progress";
+      if (updateInProgressMessage) {
+        messages.pop();
+      }
+      messages.push(message);
+      this.messages = messages;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var _a;
+    return (h(Host, { class: { [`assistant--${this.assistantStatus}`]: true } }, h("div", { class: "gx-ide-main-wrapper" }, h("header", { class: "header" }, h("gxg-title", { type: "title-02" }, this._componentLocale.componentName)), ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (h("ol", { class: { messages: true } }, this.messages.map(message => {
+      return this.renderMessage(message);
+    }))) : null, h("div", { class: {
+        prompt: true
+      } }, h("gxg-form-textarea", { grow: true, class: "prompt__textarea", maxHeight: this.promptMaxHeight, placeholder: this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, disabled: this.processingUserMessage }), !this.userHasTyped ? (h("div", { class: {
+        prompt__shortcuts: true
+      } }, h("span", { class: "prompt__shortcut" }, "Ctrl"), h("span", { class: "prompt__shortcut" }, "A"))) : null))));
+  }
+  static get is() { return "gx-ide-ai-assistant"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ai-assistant.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ai-assistant.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/ai-assistant"]; }
+  static get properties() {
+    return {
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Message[]",
+          "resolved": "Message[]",
+          "references": {
+            "Message": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of messages displayed by the component"
+        }
+      },
+      "promptMaxHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"128px\"",
+          "resolved": "\"128px\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The prompt textarea max-height"
+        },
+        "attribute": "prompt-max-height",
+        "reflect": false,
+        "defaultValue": "\"128px\""
+      },
+      "assistantStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AiStatus",
+          "resolved": "\"error\" | \"indeterminate\" | \"success\"",
+          "references": {
+            "AiStatus": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A temporary property to illustrate the assistant status"
+        },
+        "attribute": "assistant-status",
+        "reflect": false,
+        "defaultValue": "\"success\""
+      },
+      "focusShortcuts": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of keys that make up the shortcut to focus on the component's text input"
+        }
+      },
+      "userMessageCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "UserMessageCallback",
+          "resolved": "(text: string) => Promise<void>",
+          "references": {
+            "UserMessageCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of keys that make up the shortcut to focus on the component's text input"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "userHasTyped": {},
+      "addingQuery": {},
+      "showMessage": {},
+      "processingUserMessage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Clear the list of messages",
+          "tags": []
+        }
+      },
+      "addMessage": {
+        "complexType": {
+          "signature": "(message: Message) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Message": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Add a message. This method will be used by the host to add messages from the assistant",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ai-assistant/gx-ide-assets/ai-assistant/langs/ai-assistant.lang.en.json

@@ -0,0 +1,6 @@
+{
+  "componentName": "Ai Assistant",
+  "greeting": "✨ Greetings!, ¿How may I assist you?",
+  "promptPlaceholder": "Ask anything...",
+  "processingQueryPlaceholder": "Processing query..."
+}

package/dist/collection/components/ai-assistant/gx-ide-assets/ai-assistant/langs/ai-assistant.lang.ja.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "「こんにちは、私の名前は {0} です。オレゴンに住んでいます。」"
+}

package/dist/collection/components/ai-assistant/gx-ide-assets/ai-assistant/langs/ai-assistant.lang.zh.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "你好，我的名字是 {0}，我住在俄勒冈州。"
+}

package/dist/collection/components/bpm-application-declaration/bpm-app-declaration.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/create-kb-from-server/create-kb-from-server.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/kb-manager-export/kb-manager-export.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/kb-manager-import/kb-manager-import.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/