@genexus/genexus-ide-ui 1.1.49 → 1.1.51

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.ja.json

@@ -8,6 +8,11 @@
     "description": "作業を開始するための新しいナレッジベースを作成します。",
     "buttonCaption": "新規ナレッジベース"
   },
+  "viewSamples": {
+    "title": "「サンプルを見る」",
+    "description": "私たちのサンプルを探索しましょう。検索して発見し、アシスタントとチャットして、必要なものを正確に見つけてください。",
+    "open": "[projectName] 開く"
+  },
   "openExistingProject": {
     "title": "既存プロジェクトを開く",
     "description": "サーバーからプロジェクトを開くことができます。GeneXus Next Startプロジェクトまたはその他のプロジェクトを開くことができます。",

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.zh.json

@@ -8,6 +8,11 @@
     "description": "Create a new Knowledge Base to start working.",
     "buttonCaption": "New Knowledge Base"
   },
+  "viewSamples": {
+    "title": "View Samples",
+    "description": "Explore our  samples. Search, discover, and chat with the assistant to find exactly what you need.",
+    "open": "Open [projectName]"
+  },
   "openExistingProject": {
     "title": "Open Existing Project",
     "description": "You can open a project from the server, whether it's a GeneXus Next Start project or any other project.",

package/dist/collection/components/start-page/start-page.css

@@ -4,11 +4,37 @@
 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 {
+  --common-spacing: var(--mer-spacing--lg);
+  --spacing-body-block-start: var(--common-spacing);
+  --spacing-body-block-end: var(--common-spacing);
+  --spacing-body-inline-start: var(--common-spacing);
+  --spacing-body-inline-end: 0;
+  --spacing-body-inline-start: 0;
   display: grid;
   block-size: 100%;
   overflow: auto;
 }
 
+:host(.spacing-body) .section-secondary,
+:host(.spacing-body) .section-create-new-kb__header,
+:host(.spacing-body) .section-create-new-kb__actions,
+:host(.spacing-body-inline) .section-secondary,
+:host(.spacing-body-inline) .section-create-new-kb__header,
+:host(.spacing-body-inline) .section-create-new-kb__actions {
+  padding-inline-start: var(--common-spacing);
+  padding-inline-end: var(--common-spacing);
+}
+
+:host(.spacing-body-inline-start) .section-secondary,
+:host(.spacing-body-inline-start) .section-create-new-kb__actions {
+  padding-inline-start: var(--common-spacing);
+}
+
+:host(.spacing-body-inline-end) .section-secondary,
+:host(.spacing-body-inline-end) .section-create-new-kb__actions {
+  padding-inline-end: var(--common-spacing);
+}
+
 .main {
   animation: fadeIn var(--mer-timing--fast) forwards;
   display: grid;
@@ -16,8 +42,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: auto;
   opacity: 0;
   grid-template-rows: max-content 1fr;
-  gap: var(--mer-spacing--xl);
-  min-block-size: 635px;
+  gap: var(--mer-spacing--lg);
 }
 
 @keyframes bounce {
@@ -48,15 +73,21 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .card-filled,
 .card-outlined {
   display: grid;
-  gap: var(--mer-spacing--xl);
+  gap: var(--mer-spacing--md);
   align-content: space-between;
-  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);
-  border-radius: var(--mer-border__radius--sm);
-  padding: var(--mer-spacing--lg);
+  border-radius: var(--mer-border__radius--md);
 }
 
 .card-filled {
   background-color: var(--mer-surface__elevation--01);
+  padding: var(--mer-spacing--md);
+}
+
+.card-outlined {
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  padding: var(--mer-spacing--md) var(--mer-spacing--md) var(--mer-spacing--xs) var(--mer-spacing--md);
 }
 
 .icon-capsule {
@@ -69,15 +100,20 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   border-radius: 50%;
   border: var(--mer-border__width--sm) dashed var(--mer-border-color__on-elevation--02);
 }
+.icon-capsule .icon-circular {
+  --ch-image-size: 20px;
+}
 
 .card__header {
   display: grid;
   gap: var(--mer-spacing--sm);
+  justify-items: self-start;
 }
 
 .card__header-description {
   display: grid;
-  gap: var(--mer-spacing--2xs);
+  gap: var(--mer-spacing--xs);
+  --font-weight-regular: 300;
 }
 
 .section-create-new-kb {
@@ -87,14 +123,22 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 }
 .section-create-new-kb__header {
   display: grid;
-  gap: var(--mer-spacing--2xs);
+  gap: var(--mer-spacing--xs);
+}
+.section-create-new-kb__title {
+  color: var(--mer-text__bright);
+  font-weight: 500;
 }
 .section-create-new-kb__actions {
   display: grid;
   gap: var(--mer-spacing--md);
   overflow-x: auto;
   grid-auto-flow: column;
-  grid-auto-columns: 430px;
+  grid-auto-columns: 330px;
+}
+
+.samples-buttons-container {
+  flex-wrap: wrap;
 }
 
 .section-secondary {
@@ -103,9 +147,20 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   position: relative;
   overflow: auto;
 }
+.section-secondary__title {
+  display: grid;
+  grid-template-columns: 1fr max-content 1fr;
+  gap: var(--mer-spacing--md);
+  align-items: center;
+  font-weight: 300;
+}
+.section-secondary__title::before, .section-secondary__title::after {
+  content: "";
+  block-size: var(--mer-border__width--sm);
+  background-color: var(--mer-border-color__on-elevation--01);
+}
 .section-secondary__actions {
   display: grid;
-  gap: var(--mer-spacing--sm);
 }
 .section-secondary__actions--two-cards {
   grid-template-columns: repeat(2, minmax(430px, 1fr));
@@ -114,11 +169,21 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   grid-auto-columns: 670px;
 }
 
+.section-no-kbs {
+  display: grid;
+  block-size: 100%;
+  position: relative;
+  overflow: auto;
+  grid-template-rows: max-content max-content;
+  gap: var(--mer-spacing--md);
+}
+
 .section-kbs {
   background-color: var(--mer-surface__elevation--01);
   border-radius: var(--mer-border__radius--sm);
   padding: var(--mer-spacing--sm);
   display: grid;
+  container-type: inline-size;
   grid-template-rows: auto 1fr;
   overflow: hidden;
 }
@@ -127,7 +192,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   grid-template-columns: max-content 230px;
   align-items: center;
   gap: var(--mer-spacing--xl);
-  border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--03);
+  border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
   padding-block-end: var(--mer-spacing--sm);
 }
 .section-kbs__header--no-border {
@@ -156,13 +221,19 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   grid-auto-rows: 1fr;
   overflow: hidden;
 }
+@container (max-width: 768px) {
+  .section-kbs__list {
+    grid-template-columns: 1fr;
+  }
+}
 
 .kb__item {
+  --font-weight-regular: 300;
   background-color: var(--mer-surface__elevation--02);
   padding: var(--mer-spacing--sm);
   display: grid;
-  grid-template-columns: 284px 1fr;
-  gap: var(--mer-spacing--md);
+  grid-template-columns: auto max-content;
+  gap: var(--mer-spacing--3xl);
 }
 .kb__details {
   display: grid;
@@ -176,6 +247,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   text-overflow: ellipsis;
   text-decoration: underline;
   cursor: pointer;
+  display: inline-block;
 }
 .kb__name:hover {
   color: var(--mer-text__bright);
@@ -184,6 +256,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
 }
 
 .hiChar {
@@ -210,4 +284,17 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .card__footer {
   font-weight: var(--mer-font__weight--light) !important;
   --control__font-weight--regular: var(--mer-font__weight--light);
+}
+
+.card__header-description {
+  --line-height-tight: 1.7;
+  --font-weight-regular: 300;
+}
+
+.card__header-title {
+  color: var(--mer-text__bright);
+}
+
+.button-tertiary-no-padding-inline-start.button-tertiary {
+  padding-inline-start: 0;
 }

package/dist/collection/components/start-page/start-page.js

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderSecondarySection;
+var _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_renderSecondarySection;
 // Stencil
 import { Host, h } from "@stencil/core";
 // Other Libraries
@@ -24,6 +24,7 @@ import { ja, zhCN, enUS } from "date-fns/locale";
 // Custom
 import { Locale } from "../../common/locale";
 // const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English
+import { formatDate } from "../../common/helpers";
 const LANGS_DATE_FNS_MAP = {
     "en": enUS,
     "ja": ja,
@@ -50,6 +51,7 @@ const SEARCH_ICON = getIconPath({
     name: "search",
     colorType: "on-elevation"
 });
+const PROJECT_NAME_PLACEHOLDER = "[projectName]";
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
@@ -73,13 +75,13 @@ export class GxIdeStartPage {
             event.stopPropagation();
             this.createKBCallback(fromServer);
         });
+        _GxIdeStartPage_filterKbs.set(this, (event) => {
+            this.kbFilterValue = event.detail;
+        });
         _GxIdeStartPage_openKbClickHandler.set(this, (kbId) => (event) => {
             event.stopPropagation();
             this.openKbCallback(kbId);
         });
-        _GxIdeStartPage_filterKbs.set(this, (event) => {
-            this.kbFilterValue = event.detail;
-        });
         _GxIdeStartPage_renderKbsSection.set(this, () => {
             const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;
             const kbsListEmpty = this.filteredKbs.length === 0;
@@ -118,9 +120,14 @@ export class GxIdeStartPage {
                         locale: __classPrivateFieldGet(this, _GxIdeStartPage_userLanguage, "f")
                     })
                     : undefined;
+                // convert date to date format, since toISOString() requires date as Date.
+                const dateAsDate = kb.lastOpenedDate
+                    ? new Date(kb.lastOpenedDate)
+                    : undefined;
+                let dateFormated = formatDate(dateAsDate, "date-time-short");
                 // icon
                 const kbIcon = (_a = kb.icon) !== null && _a !== void 0 ? _a : KB_DEFAULT_ICON;
-                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("p", { class: "body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("div", { class: "body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened} ${relativeDate}`))));
+                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("button", { class: "body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("p", { class: "body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened}`, " ", h("time", { dateTime: dateFormated }, dateFormated)))));
             });
         });
         _GxIdeStartPage_renderSecondarySection.set(this, () => {
@@ -130,24 +137,26 @@ export class GxIdeStartPage {
             const multipleCards = this.secondarySection.cards.length > 2;
             return (h("section", {
                 // Recent Knowledge Bases
-                class: "section-secondary"
-            }, h("header", null, h("h2", { class: "subtitle-regular-s" }, this.secondarySection.title)), h("section", { class: {
+                class: "section-no-kbs"
+            }, h("header", null, h("h2", { class: "body-regular-s section-secondary__title" }, this.secondarySection.title)), h("section", { class: {
                     "section-secondary__actions": true,
                     "section-secondary__actions--two-cards": !multipleCards,
                     "section-secondary__actions--multiple-cards": multipleCards,
                     "scrollable": true
                 } }, this.secondarySection.cards.map((card, index) => {
-                return (h("article", { class: "card card-outlined", key: index }, h("header", { class: "card__header" }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, card.title), card.description.map(paragraph => (h("p", { class: "body-regular-m" }, paragraph))))), h("footer", { class: "card__footer" }, card.action && (h("button", { class: "button-tertiary button-icon-and-text", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
+                return (h("article", { class: "card card-outlined", key: index }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("header", { class: "card__header" }, h("h2", { class: "subtitle-semi-bold-xs card__header-title" }, card.title), card.description.map(paragraph => (h("p", { class: "body-regular-s card__header-description" }, paragraph))), card.action && (h("button", { class: "button-tertiary button-icon-and-text button-tertiary-no-padding-inline-start", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
             }))));
         });
-        this.kbFilterValue = "";
         this.filteredKbs = undefined;
+        this.kbFilterValue = "";
         this.loading = true;
         this.createKBCallback = undefined;
-        this.openKbCallback = undefined;
-        this.secondarySection = undefined;
         this.kbs = undefined;
         this.kbsFilterThreshold = undefined;
+        this.openKbCallback = undefined;
+        this.openSampleCallback = undefined;
+        this.samples = undefined;
+        this.secondarySection = undefined;
     }
     kbFilterValueChanged(newKbFilterValue) {
         this.filteredKbs = this.kbs.filter(kb => kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase()));
@@ -166,22 +175,33 @@ export class GxIdeStartPage {
         __classPrivateFieldSet(this, _GxIdeStartPage_userLanguage, LANGS_DATE_FNS_MAP[userLanguage], "f");
     }
     render() {
-        var _a;
+        var _a, _b;
         this.loading =
             (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
-        return (h(Host, { class: "widget scrollable spacing-body" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
+        const renderCreateProjectCard = this.createKBCallback;
+        const renderOpenProjectCard = this.openKbCallback;
+        const renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
+        const renderCardsContainer = renderCreateProjectCard || renderOpenProjectCard || renderViewSamplesCard;
+        return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
             // Create a new Knowledge Base
             class: "section-create-new-kb"
         }, h("header", {
             // main header
-            class: "section-create-new__header"
-        }, h("h1", { class: "heading-4" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
+            class: "section-create-new-kb__header"
+        }, h("h1", { class: "heading-5 section-create-new-kb__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), renderCardsContainer && (h("section", { class: "section-create-new-kb__actions scrollable" }, renderCreateProjectCard && (h("article", {
             // create project
             class: "card card-filled"
-        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption))), h("article", {
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs card__header-title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption)))), renderOpenProjectCard && (h("article", {
             // open existing project
             class: "card-filled"
-        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.buttonCaption))))), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject
+            .description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject
+            .buttonCaption)))), renderViewSamplesCard ? (h("article", {
+            // view samples
+            class: "card-filled"
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.description))), h("footer", { class: "card__footer" }, h("div", { class: "buttons-spacer samples-buttons-container" }, this.samples.map(sample => {
+            return (h("button", { class: "button-secondary", onClick: () => this.openSampleCallback(sample.id) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.open.replace(PROJECT_NAME_PLACEHOLDER, sample.name)));
+        }))))) : null))), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
     }
     static get is() { return "gx-ide-start-page"; }
     static get encapsulation() { return "shadow"; }
@@ -218,6 +238,44 @@ export class GxIdeStartPage {
                     "text": "Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'."
                 }
             },
+            "kbs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RecentKBData[]",
+                    "resolved": "RecentKBData[]",
+                    "references": {
+                        "RecentKBData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
+                            "id": "src/components/start-page/start-page.tsx::RecentKBData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's kbs array"
+                }
+            },
+            "kbsFilterThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum required of kbs to display a filter."
+                },
+                "attribute": "kbs-filter-threshold",
+                "reflect": false
+            },
             "openKbCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -238,71 +296,74 @@ export class GxIdeStartPage {
                     "text": "Callback invoked to open a KB when the user clicks on a KB card."
                 }
             },
-            "secondarySection": {
+            "openSampleCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SecondarySection",
-                    "resolved": "{ title: string; cards: CardInfo[]; }",
+                    "original": "(sampleId: string) => Promise<void>",
+                    "resolved": "(sampleId: string) => Promise<void>",
                     "references": {
-                        "SecondarySection": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
-                            "id": "src/components/start-page/start-page.tsx::SecondarySection"
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
                         }
                     }
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs."
+                    "text": "Callback invoked when the user clicks a button to open a sample."
                 }
             },
-            "kbs": {
+            "samples": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "RecentKBData[]",
-                    "resolved": "RecentKBData[]",
+                    "original": "SampleData[]",
+                    "resolved": "SampleData[]",
                     "references": {
-                        "RecentKBData": {
+                        "SampleData": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
-                            "id": "src/components/start-page/start-page.tsx::RecentKBData"
+                            "id": "src/components/start-page/start-page.tsx::SampleData"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "User's kbs array"
+                    "text": "List of samples available to be displayed in the samples card."
                 }
             },
-            "kbsFilterThreshold": {
-                "type": "number",
+            "secondarySection": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "SecondarySection",
+                    "resolved": "{ title: string; cards: CardInfo[]; }",
+                    "references": {
+                        "SecondarySection": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
+                            "id": "src/components/start-page/start-page.tsx::SecondarySection"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum required of kbs to display a filter."
-                },
-                "attribute": "kbs-filter-threshold",
-                "reflect": false
+                    "text": "The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs."
+                }
             }
         };
     }
     static get states() {
         return {
-            "kbFilterValue": {},
             "filteredKbs": {},
+            "kbFilterValue": {},
             "loading": {}
         };
     }
@@ -317,7 +378,7 @@ export class GxIdeStartPage {
             }];
     }
 }
-_GxIdeStartPage_componentLocale = new WeakMap(), _GxIdeStartPage_userLanguage = new WeakMap(), _GxIdeStartPage_createKBClickHandler = new WeakMap(), _GxIdeStartPage_openKbClickHandler = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_renderKbsSection = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_renderSecondarySection = new WeakMap(), _GxIdeStartPage_instances = new WeakSet(), _GxIdeStartPage_evaluateContentToRender = function _GxIdeStartPage_evaluateContentToRender() {
+_GxIdeStartPage_componentLocale = new WeakMap(), _GxIdeStartPage_userLanguage = new WeakMap(), _GxIdeStartPage_createKBClickHandler = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_openKbClickHandler = new WeakMap(), _GxIdeStartPage_renderKbsSection = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_renderSecondarySection = new WeakMap(), _GxIdeStartPage_instances = new WeakSet(), _GxIdeStartPage_evaluateContentToRender = function _GxIdeStartPage_evaluateContentToRender() {
     return this.kbs && this.kbs.length > 0
         ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbsSection, "f").call(this)
         : __classPrivateFieldGet(this, _GxIdeStartPage_renderSecondarySection, "f").call(this);