@empathyco/x-components 6.0.0-alpha.25 → 6.0.0-alpha.27

package/docs/API-reference/api/x-components.md

@@ -88,7 +88,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [useOnDisplay({ element, callback, triggerOnce })](./x-components.useondisplay.md) | Composable that triggers a callback whenever the provided element appears in the viewport. It can trigger the first time only or every time the element appears in the viewport. |
 |  [useScroll(props, { emit }, scrollEl)](./x-components.usescroll.md) | Composable to share Scroll logic. |
 |  [useState(module, paths)](./x-components.usestate.md) | Function which returns the requested state's properties as a dictionary. |
-|  [useStore()](./x-components.usestore.md) | Function which returns the <code>$store</code> object from the current component instance. |
 |  [useXBus()](./x-components.usexbus.md) | Composable which injects the current location, returns the <code>on</code> and <code>emit</code> functions using the bus and applying component metadata. Also unsubscribe from events when components is unmounted. |
 |  [wireCommit(mutation, payloadFactory)](./x-components.wirecommit.md) | Creates a wire that commits a mutation to the store. This wire receives a function. This function is used to get the actual payload value passed to mutation. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation, staticPayload)](./x-components.wirecommit_1.md) | Creates a wire that commits a mutation to the store. This wire can receive any value as payload. This wire can be used in every event, as it does not have a payload type associated. |
@@ -485,9 +484,10 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [Redirection](./x-components.redirection.md) | A redirection is a component that sends the user to a link in the website. It is helpful when there are queries like <code>help</code>, <code>shipping costs</code>, <code>my account</code>, where a link to a section in the website will be more helpful than the set of results returned. |
 |  [refreshHistoryQueriesSession](./x-components.refreshhistoryqueriessession.md) | Triggers a session refresh, extending its validity for the time configured in the [HistoryQueriesConfig.sessionTTLInMs](./x-components.historyqueriesconfig.sessionttlinms.md)<!-- -->. |
 |  [refreshSession](./x-components.refreshsession.md) | Default implementation for the [HistoryQueriesActions.refreshSession()](./x-components.historyqueriesactions.refreshsession.md)<!-- -->. |
-|  [RelatedPrompt](./x-components.relatedprompt.md) | <p>This component shows a suggested related prompt with the associated next queries. It allows to select one of the next query and show it.</p><p>It provide slots to customize the header, the next queries list, the individual next query inside the list and the selected query.</p> |
+|  [RelatedPrompt](./x-components.relatedprompt.md) | <p>This component shows a suggested related prompt.</p><p>It provides a slot to customize the related prompt button information.</p> |
 |  [relatedPromptRequest](./x-components.relatedpromptrequest.md) | Default implementation for the [RelatedPromptsGetters.request](./x-components.relatedpromptsgetters.request.md) getter. |
 |  [RelatedPromptsList](./x-components.relatedpromptslist.md) | Component that inserts groups of related prompts in different positions of the injected search items list, based on the provided configuration. |
+|  [RelatedPromptsTagList](./x-components.relatedpromptstaglist.md) |  |
 |  [relatedPromptsXModule](./x-components.relatedpromptsxmodule.md) | Related Prompts [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>related-prompts</code> entry point. |
 |  [RelatedTag](./x-components.relatedtag.md) | This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for \*lego\*, a related tag could be \*city\*, refining the search with \*lego city\*. |
 |  [relatedTags](./x-components.relatedtags.md) | Default implementation for the [RelatedTagsGetters.relatedTags](./x-components.relatedtagsgetters.relatedtags.md) getter. |

package/docs/API-reference/api/x-components.relatedprompt.md

@@ -4,9 +4,9 @@
 
 ## RelatedPrompt variable
 
-This component shows a suggested related prompt with the associated next queries. It allows to select one of the next query and show it.
+This component shows a suggested related prompt.
 
-It provide slots to customize the header, the next queries list, the individual next query inside the list and the selected query.
+It provides a slot to customize the related prompt button information.
 
 **Signature:**
 
@@ -16,23 +16,39 @@ _default: import("vue").DefineComponent<{
         type: PropType<RelatedPrompt>;
         required: true;
     };
-    nextQueryButtonClass: {
-        type: StringConstructor;
-        default: string;
+    isPromptVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isSelected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
     };
 }, {
-    selectedNextQuery: import("vue").Ref<string>;
-    onClick: (nextQuery: string) => void;
+    toggleSuggestion: (index: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     relatedPrompt: {
         type: PropType<RelatedPrompt>;
         required: true;
     };
-    nextQueryButtonClass: {
-        type: StringConstructor;
-        default: string;
+    isPromptVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isSelected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
     };
 }>>, {
-    nextQueryButtonClass: string;
+    isPromptVisible: boolean;
+    isSelected: boolean;
 }, {}>
 ```

package/docs/API-reference/api/x-components.relatedpromptsmutations.md

@@ -18,6 +18,7 @@ export interface RelatedPromptsMutations extends StatusMutations, QueryMutations
 |  Method | Description |
 |  --- | --- |
 |  [resetRelatedPromptsState()](./x-components.relatedpromptsmutations.resetrelatedpromptsstate.md) | Resets the related prompts state. |
+|  [resetSelectedPrompt()](./x-components.relatedpromptsmutations.resetselectedprompt.md) | Resets the selected related prompt number. |
 |  [setParams(params)](./x-components.relatedpromptsmutations.setparams.md) | Sets the extra params of the module. |
 |  [setRelatedPromptsProducts(products)](./x-components.relatedpromptsmutations.setrelatedpromptsproducts.md) | Sets the related prompts of the module. |
 |  [setSelectedPrompt(index)](./x-components.relatedpromptsmutations.setselectedprompt.md) | Sets the selected related prompt. |

package/docs/API-reference/api/x-components.relatedpromptsmutations.resetselectedprompt.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsMutations](./x-components.relatedpromptsmutations.md) &gt; [resetSelectedPrompt](./x-components.relatedpromptsmutations.resetselectedprompt.md)
+
+## RelatedPromptsMutations.resetSelectedPrompt() method
+
+Resets the selected related prompt number.
+
+**Signature:**
+
+```typescript
+resetSelectedPrompt(): void;
+```
+**Returns:**
+
+void
+

package/docs/API-reference/api/x-components.relatedpromptsmutations.setrelatedpromptsproducts.md

@@ -16,7 +16,7 @@ setRelatedPromptsProducts(products: RelatedPrompt[]): void;
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  products | RelatedPrompt\[\] |  |
+|  products | RelatedPrompt\[\] | The new related prompts to save to the state. |
 
 **Returns:**
 

package/docs/API-reference/api/x-components.relatedpromptstaglist.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsTagList](./x-components.relatedpromptstaglist.md)
+
+## RelatedPromptsTagList variable
+
+**Signature:**
+
+```typescript
+_default: import("vue").DefineComponent<{
+    buttonClass: StringConstructor;
+}, {
+    arePromptsVisible: import("vue").Ref<boolean>;
+    hidePrompt: (index: number) => boolean;
+    isSelected: (index: number) => boolean;
+    relatedPrompts: import("vue").ComputedRef<any>;
+    selectedPrompt: import("vue").ComputedRef<any>;
+    slidingPanelContent: import("vue").Ref<Element | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    buttonClass: StringConstructor;
+}>>, {}, {}>
+```

package/docs/API-reference/components/related-prompts/x-components.related-prompt.md

@@ -6,24 +6,21 @@ title: RelatedPrompt
 
 # RelatedPrompt
 
-This component shows a suggested related prompt with the associated next queries. It allows to
-select one of the next query and show it.
+This component shows a suggested related prompt.
 
-It provide slots to customize the header, the next queries list, the individual next query inside
-the list and the selected query.
+It provides a slot to customize the related prompt button information.
 
 ## Props
 
-| Name                              | Description | Type                       | Default                          |
-| --------------------------------- | ----------- | -------------------------- | -------------------------------- |
-| <code>relatedPrompt</code>        |             | <code>RelatedPrompt</code> | <code></code>                    |
-| <code>nextQueryButtonClass</code> |             | <code>string</code>        | <code>'x-button-outlined'</code> |
+| Name                         | Description | Type                       | Default            |
+| ---------------------------- | ----------- | -------------------------- | ------------------ |
+| <code>relatedPrompt</code>   |             | <code>RelatedPrompt</code> | <code></code>      |
+| <code>isPromptVisible</code> |             | <code>boolean</code>       | <code>false</code> |
+| <code>isSelected</code>      |             | <code>boolean</code>       | <code>false</code> |
+| <code>index</code>           |             | <code>number</code>        | <code></code>      |
 
 ## Slots
 
-| Name                        | Description | Bindings<br />(name - type - description) |
-| --------------------------- | ----------- | ----------------------------------------- |
-| <code>header</code>         |             |                                           |
-| <code>next-queries</code>   |             |                                           |
-| <code>next-query</code>     |             |                                           |
-| <code>selected-query</code> |             |                                           |
+| Name                                    | Description | Bindings<br />(name - type - description) |
+| --------------------------------------- | ----------- | ----------------------------------------- |
+| <code>related-prompt-button-info</code> |             | None                                      |

package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md

@@ -0,0 +1,23 @@
+---
+
+title: RelatedPromptsTagList
+
+---
+
+# RelatedPromptsTagList
+
+## Props
+
+| Name                     | Description | Type                | Default       |
+| ------------------------ | ----------- | ------------------- | ------------- |
+| <code>buttonClass</code> |             | <code>string</code> | <code></code> |
+
+## Slots
+
+| Name                                    | Description | Bindings<br />(name - type - description) |
+| --------------------------------------- | ----------- | ----------------------------------------- |
+| <code>header</code>                     |             | None                                      |
+| <code>sliding-panel-left-button</code>  |             | None                                      |
+| <code>sliding-panel-content</code>      |             | None                                      |
+| <code>related-prompt-button</code>      |             | <br /><br /><br />                        |
+| <code>sliding-panel-right-button</code> |             | None                                      |

package/js/composables/use-alias-api.js

@@ -7,7 +7,7 @@ import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
 import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 
 /**
  * Creates an object containing the alias part of {@link XComponentAPI}.

package/js/composables/use-getter.js

@@ -8,7 +8,7 @@ import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
 import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested getters as a dictionary of getters.

package/js/composables/use-state.js

@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested state's properties as a dictionary.

package/js/index.js

@@ -148,7 +148,7 @@ export { useDebounce } from './composables/use-debounce.js';
 export { useGetter } from './composables/use-getter.js';
 export { useEmitDisplayEvent, useOnDisplay } from './composables/use-on-display.js';
 export { useState } from './composables/use-state.js';
-export { useStore } from './composables/use-store.js';
+export { useStore } from 'vuex';
 export { useXBus } from './composables/use-x-bus.js';
 export { infiniteScroll } from './directives/infinite-scroll.js';
 export { setupDevtools } from './plugins/devtools/devtools.plugin.js';
@@ -331,6 +331,7 @@ export { recommendationsWiring, setRecommendationsExtraParams } from './x-module
 export { recommendationsXModule } from './x-modules/recommendations/x-module.js';
 export { default as RelatedPrompt } from './x-modules/related-prompts/components/related-prompt.vue.js';
 export { default as RelatedPromptsList } from './x-modules/related-prompts/components/related-prompts-list.vue.js';
+export { default as RelatedPromptsTagList } from './x-modules/related-prompts/components/related-prompts-tag-list.vue.js';
 export { cancelFetchAndSaveRelatedPrompts, fetchAndSaveRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.js';
 export { fetchRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-related-prompts.action.js';
 export { request as relatedPromptRequest } from './x-modules/related-prompts/store/getters/request.getter.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-prompts/components/related-prompt.vue.js

@@ -1,90 +1,52 @@
 import _sfc_main from './related-prompt.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx, Fragment, renderList, normalizeClass, createBlock } from 'vue';
-import './related-prompt.vue3.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode, normalizeStyle, toDisplayString, createBlock } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-const _hoisted_1 = {
-  class: "x-related-prompt",
-  "data-test": "related-prompt"
-};
-const _hoisted_2 = { class: "x-related-prompt__info" };
-const _hoisted_3 = { class: "x-related-prompt__sliding-panel-content" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "x-related-prompt__query-preview" };
+const _hoisted_1 = { class: "x-related-prompt__button-info" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CrossTinyIcon = resolveComponent("CrossTinyIcon");
   const _component_PlusIcon = resolveComponent("PlusIcon");
-  const _component_SlidingPanel = resolveComponent("SlidingPanel");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
-      renderSlot(_ctx.$slots, "header", {
-        suggestionText: _ctx.relatedPrompt.suggestionText
-      }, () => [
-        createTextVNode(
-          toDisplayString(_ctx.relatedPrompt.suggestionText),
-          1
-          /* TEXT */
-        )
-      ], true),
-      renderSlot(_ctx.$slots, "next-queries", {
-        nextQueries: _ctx.relatedPrompt.nextQueries
-      }, () => [
-        createVNode(_component_SlidingPanel, { resetOnContentChange: false }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_3, [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(_ctx.relatedPrompt.nextQueries, (nextQuery, index) => {
-                  return openBlock(), createElementBlock("button", {
-                    key: index,
-                    onClick: ($event) => _ctx.onClick(nextQuery),
-                    class: normalizeClass([
-                      "x-button",
-                      { "x-selected": _ctx.selectedNextQuery === nextQuery },
-                      _ctx.nextQueryButtonClass
-                    ])
-                  }, [
-                    renderSlot(_ctx.$slots, "next-query", { nextQuery }, () => [
-                      createElementVNode(
-                        "span",
-                        null,
-                        toDisplayString(nextQuery),
-                        1
-                        /* TEXT */
-                      ),
-                      _ctx.selectedNextQuery === nextQuery ? (openBlock(), createBlock(_component_CrossTinyIcon, {
-                        key: 0,
-                        class: "x-icon"
-                      })) : (openBlock(), createBlock(_component_PlusIcon, {
-                        key: 1,
-                        class: "x-icon"
-                      }))
-                    ], true)
-                  ], 10, _hoisted_4);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ])
-          ]),
-          _: 3
-          /* FORWARDED */
-        })
-      ], true)
-    ]),
-    createElementVNode("div", _hoisted_5, [
-      renderSlot(_ctx.$slots, "selected-query", { selectedQuery: _ctx.selectedNextQuery }, () => [
-        createTextVNode(
-          toDisplayString(_ctx.selectedNextQuery),
-          1
-          /* TEXT */
-        )
-      ], true)
-    ])
-  ]);
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleSuggestion(_ctx.index)),
+      onKeydown: _cache[1] || (_cache[1] = ($event) => _ctx.toggleSuggestion(_ctx.index)),
+      class: normalizeClass(["x-related-prompt__button", [{ "x-related-prompt-selected__button": _ctx.isSelected }]]),
+      role: "button",
+      "aria-pressed": "true",
+      tabindex: "0"
+    },
+    [
+      renderSlot(_ctx.$slots, "related-prompt-button-info", {}, () => [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode(
+            "span",
+            {
+              class: normalizeClass(["x-typewritter-initial", [{ "x-typewritter-animation": _ctx.isPromptVisible }]]),
+              style: normalizeStyle({
+                animationDelay: `${_ctx.index * 0.4 + 0.05}s`,
+                "--suggestion-text-length": _ctx.relatedPrompt.suggestionText.length
+              })
+            },
+            toDisplayString(_ctx.relatedPrompt.suggestionText),
+            7
+            /* TEXT, CLASS, STYLE */
+          )
+        ]),
+        _ctx.isSelected ? (openBlock(), createBlock(_component_CrossTinyIcon, {
+          key: 0,
+          class: "x-icon-lg"
+        })) : (openBlock(), createBlock(_component_PlusIcon, {
+          key: 1,
+          class: "x-icon-lg"
+        }))
+      ])
+    ],
+    34
+    /* CLASS, NEED_HYDRATION */
+  );
 }
-var relatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-44e318df"]]);
+var RelatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { relatedPrompt as default };
+export { RelatedPrompt as default };
 //# sourceMappingURL=related-prompt.vue.js.map

package/js/x-modules/related-prompts/components/related-prompt.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <div class=\"x-related-prompt\" data-test=\"related-prompt\">\n    <div class=\"x-related-prompt__info\">\n      <slot name=\"header\" :suggestionText=\"relatedPrompt.suggestionText\">\n        {{ relatedPrompt.suggestionText }}\n      </slot>\n      <slot name=\"next-queries\" :nextQueries=\"relatedPrompt.nextQueries\">\n        <SlidingPanel :resetOnContentChange=\"false\">\n          <div class=\"x-related-prompt__sliding-panel-content\">\n            <button\n              v-for=\"(nextQuery, index) in relatedPrompt.nextQueries\"\n              :key=\"index\"\n              @click=\"onClick(nextQuery)\"\n              :class=\"[\n                'x-button',\n                { 'x-selected': selectedNextQuery === nextQuery },\n                nextQueryButtonClass\n              ]\"\n            >\n              <slot name=\"next-query\" :nextQuery=\"nextQuery\">\n                <span>{{ nextQuery }}</span>\n                <CrossTinyIcon v-if=\"selectedNextQuery === nextQuery\" class=\"x-icon\" />\n                <PlusIcon v-else class=\"x-icon\" />\n              </slot>\n            </button>\n          </div>\n        </SlidingPanel>\n      </slot>\n    </div>\n    <div class=\"x-related-prompt__query-preview\">\n      <slot name=\"selected-query\" :selectedQuery=\"selectedNextQuery\">\n        {{ selectedNextQuery }}\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import { relatedPromptsXModule } from '../x-module';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n\n  /**\n   * This component shows a suggested related prompt with the associated next queries.\n   * It allows to select one of the next query and show it.\n   *\n   * It provide slots to customize the header, the next queries list,\n   * the individual next query inside the list and the selected query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    components: {\n      SlidingPanel,\n      CrossTinyIcon,\n      PlusIcon\n    },\n    xModule: relatedPromptsXModule.name,\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      nextQueryButtonClass: {\n        type: String,\n        default: 'x-button-outlined'\n      }\n    },\n    setup(props) {\n      const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);\n\n      /**\n       * Handles the click event on a next query button.\n       *\n       * @param nextQuery - The clicked next query.\n       */\n      function onClick(nextQuery: string): void {\n        if (selectedNextQuery.value === nextQuery) {\n          selectedNextQuery.value = '';\n        } else {\n          selectedNextQuery.value = nextQuery;\n        }\n      }\n\n      return { selectedNextQuery, onClick };\n    }\n  });\n</script>\n<style lang=\"css\" scoped>\n  .x-related-prompt__info {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .x-related-prompt__sliding-panel-content {\n    display: flex;\n    gap: 8px;\n  }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createElementVNode","relatedPrompt","_renderSlot","_createTextVNode","_toDisplayString","_createVNode","_withCtx","_Fragment","_renderList","onClick","selectedNextQuery","nextQueryButtonClass","_createBlock"],"mappings":";;;;;MACgC,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,kBAAA;;;AAD1C,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,wBAAA,EAAA,CAAA;AA6BS,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,yCAAiC,EAAA,CAAA;;;;;;kCA5B9CA,gBAiCM,CAAA,cAAA,CAAA,CAAA;SA/BFC,SAEO,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA,CAF8BC,KAAc,EAAA,UAAA,EAAA;AAAA,MAE5CC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,QALb,cAIWD,EAAAA,IAAAA,CAAAA,aAAAA,CAAAA,cAAAA;AAAAA,OAAAA,EAAAA,MAAAA;AAEL,QAAAE,eAAA;AAAA,UAqBOC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OArBoB,EAAA,IAAA,CAAA;AAAA,MAqBpBF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,cAAA,EAAA;AAAA,QApBL,WAmBe,EAAA,IAAA,CAAA,aAAA,CAAA,WAAA;AAAA,OA1BvB,EAAA,MAAA;AAAA,QAAAG,WAAA,CAQU,uBAiBM,EAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,EAAA;AAAA,UAhBJ,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,YAAAN,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,eAAAF,SAAA,CAEQ,IAAK,CAAA,EAAAC,kBAAA;AAAA,gBAAAQ,QAAA;AAAA,gBAAA,IAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,aAAA,CAAA,WAAA,EAAA,CAAA,SAAA,EAAA,KAAA,KAAA;yBACVV,SAAK,EAAA,EAAEW,mBAAQ,QAAS,EAAA;AAAA,oBACxB,GAAK,EAAA,KAAA;AAAA,oBAAA,OAAA,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,OAAA,CAAA,SAAA,CAAA;AAAgEC,oBAAAA,KAAAA,EAAAA,cAAAA,CAAAA;AAAAA,sBAAmDC,UAAAA;AAAAA,sBAAAA,EAAAA,YAAAA,EAAAA,IAAAA,CAAAA,iBAAAA,KAAAA,SAAAA,EAAAA;;;;AAQlGD,oBAAAA,UAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAiB,YAAc,EAAA,EAAA,SAAA,EAAA,EAAA,MAAA;AAAA,sBAAAV,kBAAA;AAApD,wBAAA,MAAA;AAAA,wBAAA,IAAA;AAAA,wBAAuEI,eAAA,CAAA,SAAA,CAAA;AAAA,wBAAA,CAAA;AAAA;AAAA,uBAAA;AAAA,sBAAA,IAAA,CArBvF,8CAqBoF,EAAAQ,WAAA,CAAA,wBAAA,EAAA;AAAA,wBAAA,GAAA,EAAA,CAAA;;wCACrC,EAAAA,WAAA,CAAA,mBAAA,EAAA;AAAA,wBAAA,GAAA,EAAA,CAAA;;;;;;;;;AAtB/C,aAAA,CAAA;AAAA,WAAA,CAAA;;;;AA6BI,OAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;uBA7BJ,KA+BWF,EAAAA,UAAAA,EAAAA;AAAAA,MAAAA,UAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAAA,gBAAAA,EAAAA,EAAAA,aAAAA,EAAAA,IAAAA,CAAAA,iBAAAA,EAAAA,EAAAA,MAAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <div\n    @click=\"toggleSuggestion(index)\"\n    @keydown=\"toggleSuggestion(index)\"\n    class=\"x-related-prompt__button\"\n    :class=\"[{ 'x-related-prompt-selected__button': isSelected }]\"\n    role=\"button\"\n    aria-pressed=\"true\"\n    tabindex=\"0\"\n  >\n    <slot name=\"related-prompt-button-info\">\n      <div class=\"x-related-prompt__button-info\">\n        <span\n          class=\"x-typewritter-initial\"\n          :class=\"[{ 'x-typewritter-animation': isPromptVisible }]\"\n          :style=\"{\n            animationDelay: `${index * 0.4 + 0.05}s`,\n            '--suggestion-text-length': relatedPrompt.suggestionText.length\n          }\"\n        >\n          {{ relatedPrompt.suggestionText }}\n        </span>\n      </div>\n      <CrossTinyIcon v-if=\"isSelected\" class=\"x-icon-lg\" />\n      <PlusIcon v-else class=\"x-icon-lg\" />\n    </slot>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import { relatedPromptsXModule } from '../x-module';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import { use$x } from '../../../composables/index';\n\n  /**\n   * This component shows a suggested related prompt.\n   *\n   * It provides a slot to customize the related prompt button information.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    components: {\n      CrossTinyIcon,\n      PlusIcon\n    },\n    xModule: relatedPromptsXModule.name,\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      isPromptVisible: {\n        type: Boolean,\n        default: false\n      },\n      isSelected: {\n        type: Boolean,\n        default: false\n      },\n      index: {\n        type: Number,\n        required: true\n      }\n    },\n    setup() {\n      const x = use$x();\n\n      const toggleSuggestion = (index: number): void => {\n        x.emit('UserSelectedARelatedPrompt', index);\n      };\n\n      return {\n        toggleSuggestion\n      };\n    }\n  });\n</script>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","index","_normalizeStyle","relatedPrompt","isSelected","_toDisplayString","_createBlock"],"mappings":";;;;;;;8BACEA,gBAyBM,CAAA,UAAA,CAAA,CAAA;SAvBHC,SAAO,EAAA,EAAAC,kBAAA;AAAA,IAAA,KAAA;AAAA,IAAA;AAAA,MACR,OAAA,EAJJ,qBAIU,CAA0B,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MAEhC,WAAK,MAAQ,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MACb,KAAmB,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,CAAA,EAAA,mCAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,MACnB,IAAA,EAAA,QAAA;AAAA,MAAA,cAAA,EAAA,MAAA;AAEA,MAAA,QAAA,EAAA,GAAA;AAAA,KAAA;;iBAEI,IASO,CAAA,MAAA,EAAA,4BAAA,EAAA,EAAA,EAAA,MAAA;AAAA,QAAAC,kBAAA,CArBf,KAagB,EAAA,UAAA,EAAA;AAAA,UAAAA,kBAAA;AAbhB,YAAA,MAAA;AAAA,YAAA;AAAA,cAAA,KAAA,EAAAD,cAAA,CAemDE,CAAK,uBAAA,EAAA,CAAA,EAAA,yBAAA,EAAA,IAAA,CAAA,eAAA,EAAA,CAAA,CAAA,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA;;AAK3CC,gBAAAA,0BAAAA,EAAAA,IAAAA,CAAAA,aAAAA,CAAc,cAAc,CAAA,MAAA;AAAA,eAAA,CAAA;AAGdC,aAAAA;AAAAA,YAAUC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;AAvBrC,QAAA,IAAA,CAAA,UAAA,IAAAR,SAAA,EAuBwD,EAAAS,WAAA,CAAA,wBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;;0BAChB,EAAAA,WAAA,CAAA,mBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;"}

package/js/x-modules/related-prompts/components/related-prompt.vue2.js

@@ -1,22 +1,30 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import { relatedPromptsXModule } from '../x-module.js';
 import CrossTinyIcon from '../../../components/icons/cross-tiny.vue.js';
 import PlusIcon from '../../../components/icons/plus.vue.js';
-import SlidingPanel from '../../../components/sliding-panel.vue.js';
+import '../../../composables/create-use-device.js';
+import { use$x } from '../../../composables/use-_x.js';
+import '@vue/devtools-api';
+import '../../../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../../../plugins/devtools/colors.utils.js';
+import '../../../plugins/x-bus.js';
+import '../../../plugins/x-plugin.js';
+import 'vuex';
+import '@vueuse/core';
 
 /**
- * This component shows a suggested related prompt with the associated next queries.
- * It allows to select one of the next query and show it.
+ * This component shows a suggested related prompt.
  *
- * It provide slots to customize the header, the next queries list,
- * the individual next query inside the list and the selected query.
+ * It provides a slot to customize the related prompt button information.
  *
  * @public
  */
 var _sfc_main = defineComponent({
     name: 'RelatedPrompt',
     components: {
-        SlidingPanel,
         CrossTinyIcon,
         PlusIcon
     },
@@ -26,27 +34,27 @@ var _sfc_main = defineComponent({
             type: Object,
             required: true
         },
-        nextQueryButtonClass: {
-            type: String,
-            default: 'x-button-outlined'
+        isPromptVisible: {
+            type: Boolean,
+            default: false
+        },
+        isSelected: {
+            type: Boolean,
+            default: false
+        },
+        index: {
+            type: Number,
+            required: true
         }
     },
-    setup(props) {
-        const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);
-        /**
-         * Handles the click event on a next query button.
-         *
-         * @param nextQuery - The clicked next query.
-         */
-        function onClick(nextQuery) {
-            if (selectedNextQuery.value === nextQuery) {
-                selectedNextQuery.value = '';
-            }
-            else {
-                selectedNextQuery.value = nextQuery;
-            }
-        }
-        return { selectedNextQuery, onClick };
+    setup() {
+        const x = use$x();
+        const toggleSuggestion = (index) => {
+            x.emit('UserSelectedARelatedPrompt', index);
+        };
+        return {
+            toggleSuggestion
+        };
     }
 });
 

package/js/x-modules/related-prompts/components/related-prompt.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <div class=\"x-related-prompt\" data-test=\"related-prompt\">\n    <div class=\"x-related-prompt__info\">\n      <slot name=\"header\" :suggestionText=\"relatedPrompt.suggestionText\">\n        {{ relatedPrompt.suggestionText }}\n      </slot>\n      <slot name=\"next-queries\" :nextQueries=\"relatedPrompt.nextQueries\">\n        <SlidingPanel :resetOnContentChange=\"false\">\n          <div class=\"x-related-prompt__sliding-panel-content\">\n            <button\n              v-for=\"(nextQuery, index) in relatedPrompt.nextQueries\"\n              :key=\"index\"\n              @click=\"onClick(nextQuery)\"\n              :class=\"[\n                'x-button',\n                { 'x-selected': selectedNextQuery === nextQuery },\n                nextQueryButtonClass\n              ]\"\n            >\n              <slot name=\"next-query\" :nextQuery=\"nextQuery\">\n                <span>{{ nextQuery }}</span>\n                <CrossTinyIcon v-if=\"selectedNextQuery === nextQuery\" class=\"x-icon\" />\n                <PlusIcon v-else class=\"x-icon\" />\n              </slot>\n            </button>\n          </div>\n        </SlidingPanel>\n      </slot>\n    </div>\n    <div class=\"x-related-prompt__query-preview\">\n      <slot name=\"selected-query\" :selectedQuery=\"selectedNextQuery\">\n        {{ selectedNextQuery }}\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import { relatedPromptsXModule } from '../x-module';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n\n  /**\n   * This component shows a suggested related prompt with the associated next queries.\n   * It allows to select one of the next query and show it.\n   *\n   * It provide slots to customize the header, the next queries list,\n   * the individual next query inside the list and the selected query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    components: {\n      SlidingPanel,\n      CrossTinyIcon,\n      PlusIcon\n    },\n    xModule: relatedPromptsXModule.name,\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      nextQueryButtonClass: {\n        type: String,\n        default: 'x-button-outlined'\n      }\n    },\n    setup(props) {\n      const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);\n\n      /**\n       * Handles the click event on a next query button.\n       *\n       * @param nextQuery - The clicked next query.\n       */\n      function onClick(nextQuery: string): void {\n        if (selectedNextQuery.value === nextQuery) {\n          selectedNextQuery.value = '';\n        } else {\n          selectedNextQuery.value = nextQuery;\n        }\n      }\n\n      return { selectedNextQuery, onClick };\n    }\n  });\n</script>\n<style lang=\"css\" scoped>\n  .x-related-prompt__info {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .x-related-prompt__sliding-panel-content {\n    display: flex;\n    gap: 8px;\n  }\n</style>\n"],"names":[],"mappings":";;;;;;AA4CE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,aAAa;QACb,QAAO;AACR,KAAA;IACD,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,mBAAkB;AAC7B,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAkB,GAAE,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;AAEjE;;;;AAIE;QACF,SAAS,OAAO,CAAC,SAAiB,EAAA;AAChC,YAAA,IAAI,iBAAiB,CAAC,KAAI,KAAM,SAAS,EAAE;AACzC,gBAAA,iBAAiB,CAAC,KAAI,GAAI,EAAE,CAAA;AAC5B,aAAA;AAAK,iBAAA;AACL,gBAAA,iBAAiB,CAAC,QAAQ,SAAS,CAAA;AACrC,aAAA;SACF;AAEA,QAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,CAAA;KACvC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <div\n    @click=\"toggleSuggestion(index)\"\n    @keydown=\"toggleSuggestion(index)\"\n    class=\"x-related-prompt__button\"\n    :class=\"[{ 'x-related-prompt-selected__button': isSelected }]\"\n    role=\"button\"\n    aria-pressed=\"true\"\n    tabindex=\"0\"\n  >\n    <slot name=\"related-prompt-button-info\">\n      <div class=\"x-related-prompt__button-info\">\n        <span\n          class=\"x-typewritter-initial\"\n          :class=\"[{ 'x-typewritter-animation': isPromptVisible }]\"\n          :style=\"{\n            animationDelay: `${index * 0.4 + 0.05}s`,\n            '--suggestion-text-length': relatedPrompt.suggestionText.length\n          }\"\n        >\n          {{ relatedPrompt.suggestionText }}\n        </span>\n      </div>\n      <CrossTinyIcon v-if=\"isSelected\" class=\"x-icon-lg\" />\n      <PlusIcon v-else class=\"x-icon-lg\" />\n    </slot>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import { relatedPromptsXModule } from '../x-module';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import { use$x } from '../../../composables/index';\n\n  /**\n   * This component shows a suggested related prompt.\n   *\n   * It provides a slot to customize the related prompt button information.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    components: {\n      CrossTinyIcon,\n      PlusIcon\n    },\n    xModule: relatedPromptsXModule.name,\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      isPromptVisible: {\n        type: Boolean,\n        default: false\n      },\n      isSelected: {\n        type: Boolean,\n        default: false\n      },\n      index: {\n        type: Number,\n        required: true\n      }\n    },\n    setup() {\n      const x = use$x();\n\n      const toggleSuggestion = (index: number): void => {\n        x.emit('UserSelectedARelatedPrompt', index);\n      };\n\n      return {\n        toggleSuggestion\n      };\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoCE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;IACD,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,gBAAe,GAAI,CAAC,KAAa,KAAW;AAChD,YAAA,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAA;AAC7C,SAAC,CAAA;QAED,OAAO;YACL,gBAAe;SAChB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js

@@ -0,0 +1,80 @@
+import _sfc_main from './related-prompts-tag-list.vue2.js';
+import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createVNode, withCtx, createElementVNode, normalizeClass, Fragment, renderList, normalizeStyle, mergeProps } from 'vue';
+import './related-prompts-tag-list.vue3.js';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RelatedPrompt = resolveComponent("RelatedPrompt");
+  const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  return openBlock(), createElementBlock("div", null, [
+    _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : createCommentVNode("v-if", true),
+    createVNode(_component_SlidingPanel, {
+      "reset-on-content-change": true,
+      "button-class": _ctx.buttonClass,
+      "scroll-container-class": _ctx.selectedPrompt === -1 ? "desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm" : ""
+    }, {
+      "sliding-panel-left-button": withCtx(() => [
+        renderSlot(_ctx.$slots, "sliding-panel-left-button")
+      ]),
+      "sliding-panel-right-button": withCtx(() => [
+        renderSlot(_ctx.$slots, "sliding-panel-right-button")
+      ]),
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "sliding-panel-content", {}, () => [
+          createElementVNode(
+            "div",
+            {
+              ref: "slidingPanelContent",
+              class: normalizeClass(["x-related-prompt__sliding-panel-content", { "x-w-[calc(100%)]": _ctx.selectedPrompt !== -1 }])
+            },
+            [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.relatedPrompts, (suggestion, index) => {
+                  return openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: index,
+                      style: normalizeStyle({
+                        animationDelay: `${index * 0.4 + 0.05}s`
+                      }),
+                      class: normalizeClass(["x-related-prompt x-staggered-initial", [
+                        { "x-staggered-animation": _ctx.arePromptsVisible },
+                        { "x-hidden": _ctx.hidePrompt(index) },
+                        { "x-related-prompt-selected": _ctx.isSelected(index) }
+                      ]]),
+                      "data-test": "related-prompt-item"
+                    },
+                    [
+                      renderSlot(_ctx.$slots, "related-prompt-button", mergeProps({ ref_for: true }, { suggestion, index, arePromptsVisible: _ctx.arePromptsVisible, isSelected: _ctx.isSelected }), () => [
+                        createVNode(_component_RelatedPrompt, {
+                          "related-prompt": suggestion,
+                          index,
+                          "is-prompt-visible": _ctx.arePromptsVisible,
+                          "is-selected": _ctx.isSelected(index)
+                        }, null, 8, ["related-prompt", "index", "is-prompt-visible", "is-selected"])
+                      ])
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ],
+            2
+            /* CLASS */
+          )
+        ])
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["button-class", "scroll-container-class"])
+  ]);
+}
+var relatedPromptsTagList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { relatedPromptsTagList as default };
+//# sourceMappingURL=related-prompts-tag-list.vue.js.map