npm - @empathyco/x-components - Versions diffs - 6.1.3 → 6.2.0 - Mend

@empathyco/x-components 6.1.3 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/docs/API-reference/api/x-components.aioverview.md DELETED Viewed

@@ -1,88 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiOverview](./x-components.aioverview.md)
-## AiOverview variable
-**Signature:**
-```typescript
-_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-    };
-    titleLoading: {
-        type: StringConstructor;
-        default: string;
-    };
-    autoExpandInSearchNoResults: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    contentClasses: {
-        type: StringConstructor;
-    };
-    slidingPanelsClasses: {
-        type: StringConstructor;
-    };
-    slidingPanelContainersClasses: {
-        type: StringConstructor;
-    };
-    slidingPanelButtonsClasses: {
-        type: StringConstructor;
-    };
-}>, {
-    aiOverviewRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
-    emptyTaggingRequest: TaggingRequest;
-    expanded: import("vue").Ref<boolean, boolean>;
-    parsedResponseText: import("vue").ComputedRef<string | Promise<string>>;
-    suggestionsLoading: import("vue").ComputedRef<boolean>;
-    suggestionsSearch: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionSearch[]>;
-    suggestionText: import("vue").ComputedRef<string>;
-    shouldAnimateSuggestion: import("vue").Ref<boolean, boolean>;
-    query: import("vue").ComputedRef<string>;
-    tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
-    isNoResults: import("vue").ComputedRef<boolean>;
-    queries: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionQuery[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-    };
-    titleLoading: {
-        type: StringConstructor;
-        default: string;
-    };
-    autoExpandInSearchNoResults: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    contentClasses: {
-        type: StringConstructor;
-    };
-    slidingPanelsClasses: {
-        type: StringConstructor;
-    };
-    slidingPanelContainersClasses: {
-        type: StringConstructor;
-    };
-    slidingPanelButtonsClasses: {
-        type: StringConstructor;
-    };
-}>> & Readonly<{}>, {
-    titleLoading: string;
-    autoExpandInSearchNoResults: boolean;
-}, {}, {
-    AIStarIcon: import("vue").DefineComponent<{}, {}, any>;
-    ArrowRightIcon: import("vue").DefineComponent<{}, {}, any>;
-    BaseEventButton: import("vue").DefineComponent<{}, {}, any>;
-    CollapseHeight: import("vue").DefineComponent<{}, {}, any>;
-    ChangeHeight: import("vue").DefineComponent<{}, {}, any>;
-    Fade: import("vue").DefineComponent<{}, {}, any>;
-    SlidingPanel: import("vue").DefineComponent<{}, {}, any>;
-    SpinnerIcon: import("vue").DefineComponent<{}, {}, any>;
-    DisplayEmitter: import("vue").DefineComponent<{}, {}, any>;
-    DisplayClickProvider: import("vue").DefineComponent<{}, {}, any>;
-}, {
-    typing: import("vue").Directive<import("../../../directives").TypingHTMLElement, import("../../../directives").TypingOptions>;
-}, string, import("vue").ComponentProvideOptions, true, {}, any>
-```

package/docs/API-reference/api/x-components.aistate.isnoresults.md DELETED Viewed

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiState](./x-components.aistate.md) &gt; [isNoResults](./x-components.aistate.isnoresults.md)
-## AiState.isNoResults property
-Flag to indicate that the AI response has no results
-**Signature:**
-```typescript
-isNoResults: boolean;
-```

package/docs/API-reference/api/x-components.aistate.responsetext.md DELETED Viewed

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiState](./x-components.aistate.md) &gt; [responseText](./x-components.aistate.responsetext.md)
-## AiState.responseText property
-The streamed field from suggestion response.
-**Signature:**
-```typescript
-responseText: string;
-```

package/docs/API-reference/api/x-components.aistate.suggestiontext.md DELETED Viewed

@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiState](./x-components.aistate.md) &gt; [suggestionText](./x-components.aistate.suggestiontext.md)
-## AiState.suggestionText property
-**Signature:**
-```typescript
-suggestionText: string;
-```

package/docs/API-reference/components/ai/x-components.ai-overview.md DELETED Viewed

@@ -1,96 +0,0 @@
----
-title: AiOverview
----
-# AiOverview
-## Props
-| Name                                       | Description | Type                 | Default                                   |
-| ------------------------------------------ | ----------- | -------------------- | ----------------------------------------- |
-| <code>title</code>                         |             | <code>string</code>  | <code></code>                             |
-| <code>titleLoading</code>                  |             | <code>string</code>  | <code>'Generating with Empathy AI'</code> |
-| <code>autoExpandInSearchNoResults</code>   |             | <code>boolean</code> | <code>true</code>                         |
-| <code>contentClasses</code>                |             | <code>string</code>  | <code></code>                             |
-| <code>slidingPanelsClasses</code>          |             | <code>string</code>  | <code></code>                             |
-| <code>slidingPanelContainersClasses</code> |             | <code>string</code>  | <code></code>                             |
-| <code>slidingPanelButtonsClasses</code>    |             | <code>string</code>  | <code></code>                             |
-## Slots
-| Name                                     | Description            | Bindings<br />(name - type - description) |
-| ---------------------------------------- | ---------------------- | ----------------------------------------- |
-| <code>title-loading</code>               |                        | None                                      |
-| <code>extra-content</code>               |                        | None                                      |
-| <code>sliding-panel</code>               |                        |                                           |
-| <code>sliding-panels-addons</code>       |                        |                                           |
-| <code>sliding-panels-left-button</code>  |                        | None                                      |
-| <code>sliding-panels-right-button</code> |                        | None                                      |
-| <code>result</code>                      | (required) result card |                                           |
-| <code>suggestions-extra-content</code>   |                        | None                                      |
-## AI Overview Examples
-The `ai-overview` component provides an AI-generated summary and suggestions for queries.
-### Basic usage
-```vue
-<template>
-  <AiOverview
-    :title="'AI Overview'"
-    :title-loading="'Generating with Empathy AI'"
-    :expand-text="'Show more'"
-    :collapse-text="'Show less'"
-    :content-classes="'my-content-class'"
-    :sliding-panels-classes="'my-sliding-panel-class'"
-    :sliding-panel-containers-classes="'my-sliding-panel-container-class'"
-    :sliding-panel-buttons-classes="'my-sliding-panel-button-class'"
-  >
-    <template #result="{ result }">
-      <ResultCard :result="result" />
-    </template>
-  </AiOverview>
-</template>
-<script setup>
-import AiOverview from "@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue";
-import ResultCard from "./ResultCard.vue";
-</script>
-```
-### Customizing slots
-You can customize the loading title, extra content, and sliding panel slots:
-```vue
-<template>
-  <AiOverview
-    :title="'AI Overview'"
-    :title-loading="'Loading... Please wait'"
-    :expand-text="'Show more'"
-    :collapse-text="'Show less'"
-  >
-    <template #title-loading>
-      <span>Custom loading title...</span>
-    </template>
-    <template #extra-content>
-      <div>Extra content below the main overview</div>
-    </template>
-    <template #sliding-panels-addons="{ arrivedState }">
-      <span v-if="arrivedState.left">Left end reached</span>
-      <span v-if="arrivedState.right">Right end reached</span>
-    </template>
-    <template #result="{ result }">
-      <ResultCard :result="result" />
-    </template>
-  </AiOverview>
-</template>
-<script setup>
-import AiOverview from "@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue";
-import ResultCard from "./ResultCard.vue";
-</script>
-```

package/js/x-modules/ai/components/ai-overview.vue.js DELETED Viewed

@@ -1,267 +0,0 @@
-import _sfc_main from './ai-overview.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, normalizeStyle, Fragment, renderList } from 'vue';
-import './ai-overview.vue3.js';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
-const _hoisted_1 = {
-  key: 0,
-  ref: "aiOverviewRef",
-  class: "x-ai-overview",
-  "data-test": "ai-overview-wrapper"
-};
-const _hoisted_2 = { class: "x-ai-overview-main" };
-const _hoisted_3 = {
-  key: 0,
-  class: "x-ai-overview-title-loading",
-  "data-test": "ai-overview-title-loading"
-};
-const _hoisted_4 = {
-  class: "x-ai-overview-title-loading-text",
-  "data-test": "ai-overview-title-loading-text"
-};
-const _hoisted_5 = {
-  class: "x-ai-overview-title",
-  "data-test": "ai-overview-title"
-};
-const _hoisted_6 = { class: "x-ai-overview-content-wrapper" };
-const _hoisted_7 = {
-  key: 0,
-  class: "x-ai-overview-content-title",
-  "data-test": "ai-overview-content-title"
-};
-const _hoisted_8 = ["innerHTML"];
-const _hoisted_9 = {
-  key: 1,
-  class: "x-ai-overview-suggestions",
-  "data-test": "ai-overview-suggestions-container"
-};
-const _hoisted_10 = { class: "x-ai-overview-suggestion-results" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_AIStarIcon = resolveComponent("AIStarIcon");
-  const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
-  const _component_Fade = resolveComponent("Fade");
-  const _component_ChangeHeight = resolveComponent("ChangeHeight");
-  const _component_SpinnerIcon = resolveComponent("SpinnerIcon");
-  const _component_ArrowRightIcon = resolveComponent("ArrowRightIcon");
-  const _component_BaseEventButton = resolveComponent("BaseEventButton");
-  const _component_SlidingPanel = resolveComponent("SlidingPanel");
-  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
-  const _component_CollapseHeight = resolveComponent("CollapseHeight");
-  return openBlock(), createBlock(_component_CollapseHeight, null, {
-    default: withCtx(() => [
-      !_ctx.isNoResults ? (openBlock(), createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          createElementVNode("div", _hoisted_2, [
-            createVNode(_component_Fade, { mode: "out-in" }, {
-              default: withCtx(() => [
-                _ctx.suggestionsLoading ? (openBlock(), createElementBlock("span", _hoisted_3, [
-                  _cache[0] || (_cache[0] = createElementVNode(
-                    "span",
-                    { class: "x-ai-overview-title-loading-indicator" },
-                    null,
-                    -1
-                    /* CACHED */
-                  )),
-                  createElementVNode("span", _hoisted_4, [
-                    renderSlot(_ctx.$slots, "title-loading", {}, () => [
-                      createTextVNode(
-                        toDisplayString(_ctx.titleLoading),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ])
-                ])) : (openBlock(), createBlock(_component_DisplayEmitter, {
-                  key: 1,
-                  payload: _ctx.tagging?.toolingDisplay ?? _ctx.emptyTaggingRequest,
-                  "event-metadata": {
-                    feature: "overview",
-                    displayOriginalQuery: _ctx.query || "overview-without-query",
-                    replaceable: false
-                  },
-                  "data-test": "ai-overview-display-emitter"
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("span", _hoisted_5, [
-                      createVNode(_component_AIStarIcon, { class: "x-ai-overview-title-icon" }),
-                      createTextVNode(
-                        toDisplayString(!!_ctx.title ? _ctx.title : _ctx.suggestionText),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["payload", "event-metadata"]))
-              ]),
-              _: 3
-              /* FORWARDED */
-            }),
-            createVNode(_component_ChangeHeight, null, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_6, [
-                  _ctx.title ? (openBlock(), createElementBlock(
-                    "span",
-                    _hoisted_7,
-                    toDisplayString(_ctx.suggestionText),
-                    1
-                    /* TEXT */
-                  )) : createCommentVNode("v-if", true),
-                  createElementVNode("div", {
-                    class: normalizeClass(_ctx.contentClasses),
-                    "data-test": "ai-overview-content",
-                    innerHTML: _ctx.parsedResponseText
-                  }, null, 10, _hoisted_8)
-                ])
-              ]),
-              _: 1
-              /* STABLE */
-            }),
-            renderSlot(_ctx.$slots, "extra-content")
-          ]),
-          createVNode(_component_CollapseHeight, {
-            style: normalizeStyle({
-              "--x-collapse-height-transition-duration": `${300 * _ctx.suggestionsSearch.length}ms`
-            }),
-            "data-test": "ai-overview-collapse-height-suggestions"
-          }, {
-            default: withCtx(() => [
-              !_ctx.suggestionsSearch.length ? (openBlock(), createBlock(_component_SpinnerIcon, {
-                key: 0,
-                class: "x-ai-overview-suggestions-loading",
-                "data-test": "ai-overview-suggestions-loading"
-              })) : (openBlock(), createElementBlock("div", _hoisted_9, [
-                (openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }, suggestionIndex) => {
-                    return openBlock(), createBlock(_component_DisplayEmitter, {
-                      key: suggestionQuery,
-                      payload: _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplay ?? _ctx.emptyTaggingRequest,
-                      "event-metadata": {
-                        feature: "overview",
-                        displayOriginalQuery: _ctx.query || "overview-without-query",
-                        replaceable: false
-                      },
-                      "data-test": "ai-overview-query-display-emitter"
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode(
-                          "div",
-                          {
-                            class: normalizeClass(["x-ai-overview-suggestion", {
-                              "x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
-                            }]),
-                            "data-test": "ai-overview-suggestion",
-                            style: normalizeStyle({ animationDelay: `${suggestionIndex * 300}ms` })
-                          },
-                          [
-                            createVNode(_component_BaseEventButton, {
-                              class: "x-ai-overview-suggestion-query-btn",
-                              events: { UserAcceptedAQuery: suggestionQuery }
-                            }, {
-                              default: withCtx(() => [
-                                createTextVNode(
-                                  toDisplayString(suggestionQuery) + " ",
-                                  1
-                                  /* TEXT */
-                                ),
-                                createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
-                              ]),
-                              _: 2
-                              /* DYNAMIC */
-                            }, 1032, ["events"]),
-                            createVNode(_component_DisplayClickProvider, {
-                              "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayClick,
-                              "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart,
-                              "result-feature": "overview"
-                            }, {
-                              default: withCtx(() => [
-                                renderSlot(_ctx.$slots, "sliding-panel", { results: queriesResults }, () => [
-                                  createVNode(_component_SlidingPanel, {
-                                    class: normalizeClass(_ctx.slidingPanelsClasses),
-                                    "scroll-container-class": _ctx.slidingPanelContainersClasses,
-                                    "button-class": _ctx.slidingPanelButtonsClasses,
-                                    "reset-on-content-change": false
-                                  }, {
-                                    "sliding-panel-addons": withCtx(({ arrivedState }) => [
-                                      renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
-                                    ]),
-                                    "sliding-panel-left-button": withCtx(() => [
-                                      renderSlot(_ctx.$slots, "sliding-panels-left-button")
-                                    ]),
-                                    "sliding-panel-right-button": withCtx(() => [
-                                      renderSlot(_ctx.$slots, "sliding-panels-right-button")
-                                    ]),
-                                    default: withCtx(() => [
-                                      createElementVNode("ul", _hoisted_10, [
-                                        (openBlock(true), createElementBlock(
-                                          Fragment,
-                                          null,
-                                          renderList(queriesResults, (result, resultIndex) => {
-                                            return openBlock(), createElementBlock(
-                                              "li",
-                                              {
-                                                key: result.id,
-                                                "data-test": "ai-overview-suggestion-result",
-                                                class: normalizeClass({
-                                                  "x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
-                                                }),
-                                                style: normalizeStyle({
-                                                  animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`
-                                                })
-                                              },
-                                              [
-                                                renderSlot(_ctx.$slots, "result", { result })
-                                              ],
-                                              6
-                                              /* CLASS, STYLE */
-                                            );
-                                          }),
-                                          128
-                                          /* KEYED_FRAGMENT */
-                                        ))
-                                      ])
-                                    ]),
-                                    _: 2
-                                    /* DYNAMIC */
-                                  }, 1032, ["class", "scroll-container-class", "button-class"])
-                                ])
-                              ]),
-                              _: 2
-                              /* DYNAMIC */
-                            }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"])
-                          ],
-                          6
-                          /* CLASS, STYLE */
-                        )
-                      ]),
-                      _: 2
-                      /* DYNAMIC */
-                    }, 1032, ["payload", "event-metadata"]);
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                )),
-                renderSlot(_ctx.$slots, "suggestions-extra-content")
-              ]))
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 8, ["style"])
-        ],
-        512
-        /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true)
-    ]),
-    _: 3
-    /* FORWARDED */
-  });
-}
-var aiOverview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { aiOverview as default };
-//# sourceMappingURL=ai-overview.vue.js.map

package/js/x-modules/ai/components/ai-overview.vue.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ai-overview.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content-wrapper\">\n <span\n v-if=\"title\"\n class=\"x-ai-overview-content-title\"\n data-test=\"ai-overview-content-title\"\n >{{ suggestionText }}\n </span>\n <div\n :class=\"contentClasses\"\n data-test=\"ai-overview-content\"\n v-html=\"parsedResponseText\"\n />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div v-else class=\"x-ai-overview-suggestions\" data-test=\"ai-overview-suggestions-container\">\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n \n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </CollapseHeight>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading */\n title: {\n type: String,\n },\n /* The text displayed when the question is loading. */\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n /* The classes added to the parsed response text container. */\n contentClasses: {\n type: String,\n },\n /* The classes added to each sliding panel for each query. */\n slidingPanelsClasses: {\n type: String,\n },\n /* The classes added to each sliding panel container of each query. */\n slidingPanelContainersClasses: {\n type: String,\n },\n /* The classes added to each sliding panel button of each query. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup() {\n const $x = use$x()\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsStatus,\n tagging,\n isNoResults,\n queries,\n query,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement | null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const suggestionsLoading = computed(\n () => suggestionsStatus.value !== 'success' && suggestionsStatus.value !== 'error',\n )\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n max-width: var(--x-ai-overview-main-max-width, none);\n margin: 0 auto;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content-wrapper {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n}\n\n.x-ai-overview-content-title {\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-btn-wrapper {\n display: flex;\n justify-content: center;\n cursor: pointer;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n\n<docs lang=\"mdx\">\n## AI Overview Examples\n\nThe `ai-overview` component provides an AI-generated summary and suggestions for queries.\n\n### Basic usage\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Generating with Empathy AI'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n :content-classes=\"'my-content-class'\"\n :sliding-panels-classes=\"'my-sliding-panel-class'\"\n :sliding-panel-containers-classes=\"'my-sliding-panel-container-class'\"\n :sliding-panel-buttons-classes=\"'my-sliding-panel-button-class'\"\n >\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n\n### Customizing slots\n\nYou can customize the loading title, extra content, and sliding panel slots:\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Loading... Please wait'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n >\n <template #title-loading>\n <span>Custom loading title...</span>\n </template>\n <template #extra-content>\n <div>Extra content below the main overview</div>\n </template>\n <template #sliding-panels-addons=\"{ arrivedState }\">\n <span v-if=\"arrivedState.left\">Left end reached</span>\n <span v-if=\"arrivedState.right\">Right end reached</span>\n </template>\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_normalizeStyle","_Fragment","_renderList"],"mappings":"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"}

package/js/x-modules/ai/components/ai-overview.vue2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content-wrapper\">\n <span\n v-if=\"title\"\n class=\"x-ai-overview-content-title\"\n data-test=\"ai-overview-content-title\"\n >{{ suggestionText }}\n </span>\n <div\n :class=\"contentClasses\"\n data-test=\"ai-overview-content\"\n v-html=\"parsedResponseText\"\n />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div v-else class=\"x-ai-overview-suggestions\" data-test=\"ai-overview-suggestions-container\">\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n \n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </CollapseHeight>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading */\n title: {\n type: String,\n },\n /* The text displayed when the question is loading. */\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n /* The classes added to the parsed response text container. */\n contentClasses: {\n type: String,\n },\n /* The classes added to each sliding panel for each query. */\n slidingPanelsClasses: {\n type: String,\n },\n /* The classes added to each sliding panel container of each query. */\n slidingPanelContainersClasses: {\n type: String,\n },\n /* The classes added to each sliding panel button of each query. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup() {\n const $x = use$x()\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsStatus,\n tagging,\n isNoResults,\n queries,\n query,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement | null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const suggestionsLoading = computed(\n () => suggestionsStatus.value !== 'success' && suggestionsStatus.value !== 'error',\n )\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n max-width: var(--x-ai-overview-main-max-width, none);\n margin: 0 auto;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content-wrapper {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n}\n\n.x-ai-overview-content-title {\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-btn-wrapper {\n display: flex;\n justify-content: center;\n cursor: pointer;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n\n<docs lang=\"mdx\">\n## AI Overview Examples\n\nThe `ai-overview` component provides an AI-generated summary and suggestions for queries.\n\n### Basic usage\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Generating with Empathy AI'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n :content-classes=\"'my-content-class'\"\n :sliding-panels-classes=\"'my-sliding-panel-class'\"\n :sliding-panel-containers-classes=\"'my-sliding-panel-container-class'\"\n :sliding-panel-buttons-classes=\"'my-sliding-panel-button-class'\"\n >\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n\n### Customizing slots\n\nYou can customize the loading title, extra content, and sliding panel slots:\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Loading... Please wait'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n >\n <template #title-loading>\n <span>Custom loading title...</span>\n </template>\n <template #extra-content>\n <div>Extra content below the main overview</div>\n </template>\n <template #sliding-panels-addons=\"{ arrivedState }\">\n <span v-if=\"arrivedState.left\">Left end reached</span>\n <span v-if=\"arrivedState.right\">Right end reached</span>\n </template>\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n</docs>\n"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2KA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;IACD,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,cAAc;QACd,eAAe;QACf,cAAc;QACd,YAAY;QACZ,IAAI;QACJ,YAAY;QACZ,WAAW;wBACXA,WAAc;8BACdC,WAAoB;AACrB,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,4BAA4B;AACtC,SAAA;;AAED,QAAA,2BAA2B,EAAE;AAC3B,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,6BAA6B,EAAE;AAC7B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,0BAA0B,EAAE;AAC1B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QACjB,MAAM,EACJ,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,OAAO,EACP,KAAK,GACP,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEjB,MAAM,mBAAmB,GAAmB,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAC,EAAE;AAElE,QAAA,MAAM,gBAAgB,GAAG,CAAwB,IAAI,CAAA;AACrD,QAAA,MAAM,QAAO,GAAI,GAAG,CAAC,KAAK,CAAA;AAC1B,QAAA,MAAM,uBAAsB,GAAI,GAAG,CAAC,IAAI,CAAA;AACxC,QAAA,MAAM,qBAAqB,QAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAE1E,QAAA,MAAM,kBAAiB,GAAI,QAAQ,CACjC,MAAM,iBAAiB,CAAC,KAAI,KAAM,SAAQ,IAAK,iBAAiB,CAAC,KAAI,KAAM,OAAO,CACpF;QAEA,EAAE,CAAC,EAAE,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAI;AACxD,YAAA,QAAQ,CAAC,KAAI,GAAI,KAAI;AACrB,YAAA,uBAAuB,CAAC,KAAI,GAAI,IAAG;AACrC,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,UAAS,EAAG,CAAA;AAClE,QAAA,CAAC,CAAA;QAED,OAAO;YACL,aAAa;YACb,mBAAmB;YACnB,QAAQ;YACR,kBAAkB;YAClB,kBAAkB;YAClB,iBAAiB;YACjB,cAAc;YACd,uBAAuB;YACvB,KAAK;YACL,OAAO;YACP,WAAW;YACX,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/ai/components/ai-overview.vue3.js DELETED Viewed

@@ -1,7 +0,0 @@
-import injectCss from '../../../../tools/inject-css.js';
-var css = ".x-ai-overview{--color:var(--x-ai-overview-color,#bbc9cf);--color-lighter:var(--x-ai-overview-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;position:relative}.x-ai-overview-main{margin:0 auto;max-width:var(--x-ai-overview-main-max-width,none);padding:1rem}.x-ai-overview-title{font-size:.875rem;font-weight:700;gap:.25rem}.x-ai-overview-title,.x-ai-overview-title-loading{align-items:center;display:flex;margin-bottom:.5rem}.x-ai-overview-title-loading{gap:.375rem}.x-ai-overview-title-loading-indicator{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}.x-ai-overview-title-loading-text{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:.75rem}.x-ai-overview-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem}.x-ai-overview-content-wrapper{display:flex;flex-direction:column;line-height:1.25rem;text-align:left}.x-ai-overview-content-title{font-weight:500;margin-bottom:8px}.x-ai-overview-gradient{background-image:linear-gradient(to bottom,transparent 0,var(--color-lighter) 100%);border-radius:1.5rem;bottom:0;content:none;cursor:pointer;height:100%;position:absolute;width:100%}.x-ai-overview-toggle-btn-wrapper{cursor:pointer;display:flex;justify-content:center}.x-ai-overview-toggle-btn{align-items:center;background-color:#fff;border-color:var(--button-color-50,#283034);border-radius:9999px;border-style:solid;border-width:1px;color:var(--button-color-50,#283034);display:flex;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;margin:auto;min-height:2.5rem;padding-left:1rem;padding-right:1rem;position:relative;width:100%}.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}@media (min-width:640px){.x-ai-overview-toggle-btn{transform:translateY(50%);transition-duration:.5s;transition-property:all;width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{aspect-ratio:1/1;height:1rem;transform:rotate(0deg);transition-duration:.3s;transition-property:all}.x-ai-overview-toggle-btn-icon-expanded{transform:rotate(180deg)}.x-ai-overview-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:.5rem}.x-ai-overview-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}@keyframes x-spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}";
-injectCss(css);
-export { css };
-//# sourceMappingURL=ai-overview.vue3.js.map

package/js/x-modules/ai/components/ai-overview.vue3.js.map DELETED Viewed

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