@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -1,458 +0,0 @@
----
-title: Integrate Interface X Archetype into an existing website
-tags:
-  - integration
-  - archetype
-  - archetype integration
-  - x integration
-  - interface x
-  - x components
----
-
-In this tutorial, you'll learn how to integrate the Interface X Archetype project in your
-commerce store in a matter of minutes. You can use the X Archetype **as is** or you can
-**[extend](web-archetype-development-guide.md)** the search and discovery interface experience to
-meet your business needs.
-
-To integrate the Interface X Archetype layer in your commerce store, just **load** the
-generated Interface X JavaScript file and **initialize** it.
-
-::: note IMPORTANT
-
-If the X Archetype script is hosted by Empathy, all the X resources are provided by a CDN
-through the following environment URLs:
-
-- **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
-- **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
-
-Where `{INSTANCE}` is the name of your commerce store. If you require any assistance, contact
-[Empathy Support](mailto:support@empathy.co).
-
-:::
-
-Depending on your business needs, Interface X supports two initialization types:
-
-- **[Automatic initialization](#initializing-the-interface-x-project-automatically)**
-- **[On-demand initialization](#initializing-the-interface-x-project-on-demand)**
-
-::: develop Frameworks & libraries integration
-
-You can integrate the X Archetype into any existing website regardless of the technology used
-(i.e. **React**, **Vue**, **Svelte**, etc.), as the bundle includes all the dependencies you need
-for a correct implementation.
-
-:::
-
-## Initializing the Interface X project automatically
-
-Automatic initialization is the easiest way to integrate the Interface X project in a website.
-
-**Steps to initialize the project automatically**
-
-1. **Configure the JavaScript snippet** to define either an initialization object or a function.
-2. **Load and initialize** the Interface X script.
-
-### Configuring the snippet
-
-First, add the JavaScript snippet configuration to define multiple initialization options, i.e. the
-API to use, the language or currency to display, or even the tagging parameters to collect
-search-related data to generate conversational search features and analytics.
-
-Depending on whether you are retrieving **static or dynamic configuration values** in your
-[snippet configuration](#snippet-configuration), you define an **object** or a **function** to
-initialize Interface X:
-
-- To retrieve **static** configuration values, define an initialization object as follows:
-
-```js
-window.initX = {
-  instance: 'my-store',
-  scope: 'desktop',
-  lang: 'en',
-  currency: 'EUR',
-  consent: false
-};
-```
-
-- To retrieve configuration values **dynamically**, use an initialization function:
-
-```js
-window.initX = function () {
-  return {
-    instance: 'my-store',
-    env: location.href.includes('.pre.') ? 'staging' : undefined,
-    scope: 'web',
-    lang: localStorage.get('lang'),
-    currency: localStorage.get('currency'),
-    consent: localStorage.get('consent')
-  };
-};
-```
-
-::: note
-
-You can change the snippet configuration values once the project is deployed. Use the
-`/x-archetype/public/snippet-script.js` file to perform hot changes for the snippet parameters. For
-more information on the supported parameters, check out
-[Snippet configuration](#snippet-configuration).
-
-:::
-
-### Loading the script
-
-Once the snippet configuration is ready, add the Interface X script to your webpage. The script
-is hosted in a URL with the following syntax:
-
-- **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
-- **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
-
-For example, to load the production version script for the instance _my-store_, you need to add the
-following scripts to your HTML:
-
-```html
-<script>
-  window.initX = {
-    instance: 'my-store',
-    scope: 'desktop',
-    lang: 'en',
-    currency: 'EUR',
-    consent: false
-  };
-</script>
-<script src="https://x.empathy.co/my-store/app.js" type="module"></script>
-```
-
-In the case you want to load the script for the staging environment, you just modify the script
-attribute `src` so that it points to the staging environment as follows:
-
-```html
-<script>
-  window.initX = {
-    instance: 'my-store',
-    env: 'staging', // By removing this param you would be using a production API with the staging version of Interface X
-    scope: 'desktop',
-    lang: 'en',
-    currency: 'EUR',
-    consent: false
-  };
-</script>
-<script src="https://x.staging.empathy.co/my-store/app.js" type="module"></script>
-```
-
-Thus, when the Interface&nbsp;X JavaScript file is loaded, it retrieves the configuration from the
-defined object or function.
-
-## Initializing the Interface X project on demand
-
-On-demand initialization allows you to control when Interface&nbsp;X is loaded.
-
-**Steps to initialize the project on demand**
-
-1. **Load** the Interface&nbsp;X script.
-2. **Initialize** Interface&nbsp;X.
-
-### Loading the script
-
-Add the Interface&nbsp;X script hosted in a URL with the following syntax:
-
-- **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
-- **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
-
-For example, to load the production version script for the instance _my-store_, you need to add the
-following script to your HTML:
-
-```html
-<script src="https://x.empathy.co/my-store/app.js" type="module"></script>
-```
-
-In the case you want to load the script for the staging environment, you just modify the script
-attribute `src` so that it points to the staging environment as follows:
-
-```html
-<script src="https://x.staging.empathy.co/my-store/app.js" type="module"></script>
-```
-
-### Initializing Interface&nbsp;X
-
-Since no initialization configuration is defined when loading the script, you need to **invoke the
-initialization function** created automatically in the
-[X API](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts)
-object to provide the initialization options:
-
-```html
-<script src="https://x.empathy.co/my-store/app.js" type="module"></script>
-<script>
-  window.InterfaceX.init({
-    instance: 'my-store',
-    scope: 'desktop',
-    lang: 'en',
-    currency: 'EUR',
-    consent: false
-  });
-</script>
-```
-
-For this example, the initialization function is called immediately after loading the script, but it
-can be called at any time. Note that you need to call this function only **once**.
-
-::: interact
-
-Check out the [X&nbsp;API](#x-api) section to learn more about the functions and parameters
-supported.
-
-:::
-
-## Notes on X Archetype integration
-
-To successfully integrate Interface&nbsp;X in your commerce store using the X&nbsp;Archetype, check
-out further information about:
-
-- **Initialization options** supported in [snippet configuration](#snippet-configuration)
-- **[Callbacks and X&nbsp;event&nbsp;types](#callbacks-and-interface-x-events-types)** available to
-  subscribe to when initializing
-- **Functions supported by the [X&nbsp;API object](#x-api)** to initialize Interface&nbsp;X
-- Notes on how to set up [**the preview of query results**](#dynamic-query-results-preview) for
-  determined queries at the pre-search stage
-- [**Tracking options for add to cart events**](#tracking-events-for-add-to-cart-on-product-detail-pages)
-  from product detail pages
-
-### Snippet configuration
-
-The
-[snippet configuration](https://github.com/empathyco/x-archetype/blob/main/public/snippet-script.js)
-allows you to configure multiple initialization options for the Interface&nbsp;X project such as
-language, currency, and shopper's personal data consent. The snippet configuration supports the
-following configuration parameters:
-
-| Parameter                                              | Type                                                                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `instance`                                             | `string`                                                                             | _Required._ ID of the API client instance. It's provided by Empathy.                                                                                                                                                                                                                                                                                                                                                                          |
-| `env`                                                  | `staging`                                                                            | _Optional_. API environment to use. Note that if you **do not** declare this parameter, you'll use the production API. Instead, use `env: 'staging'` to point to the staging API.                                                                                                                                                                                                                                                             |
-| `scope`                                                | `string`                                                                             | _Optional_. Context where the search interface is executed, i.e. `mobile`, `mobile-app`, `tablet`, `desktop`.                                                                                                                                                                                                                                                                                                                                 |
-| `lang`                                                 | `string`                                                                             | _Required._ Language to use. By default, it's used for both the interface messages and the API requests.                                                                                                                                                                                                                                                                                                                                      |
-| `uiLang`                                               | `string`                                                                             | _Optional_. Language to use for the interface messages **only**.                                                                                                                                                                                                                                                                                                                                                                              |
-| `consent`                                              | `boolean`                                                                            | _Required._ Determines whether the shopper has accepted the use of cookies so that the `sessionId` is sent to the Empathy's Search and Tagging APIs or not.                                                                                                                                                                                                                                                                                   |
-| `documentDirection`                                    | `'ltr'` &#124; `'rtl'`                                                               | _Optional_. Writing direction script that the X Components should, i.e. left-to-right or right-to-left.                                                                                                                                                                                                                                                                                                                                       |
-| `currency`                                             | `string`                                                                             | _Required._ Currency identifier to configure how prices are displayed.                                                                                                                                                                                                                                                                                                                                                                        |
-| [`callbacks`](#callbacks-and-interface-x-events-types) | `Record<XEventName, (payload: XEventPayload<Event>, metadata: WireMetadata) => void` | _Optional_. Callback record where the _key_ is the event to listen and the _value_ is the callback to be executed whenever the event is emitted. E.g. to listen to the `UserAcceptedAQuery` event: `{ UserAcceptedAQuery({ eventPayload }) { console.log('UserAcceptedAQuery', eventPayload); }`                                                                                                                                              |
-| `isSpa`                                                | `boolean`                                                                            | _Optional_. Enables single-page application model. You set it to `true` when the X&nbsp;Archetype runs on top of a SPA website.                                                                                                                                                                                                                                                                                                               |
-| `filters`                                              | `string[]`                                                                           | _Optional_. Filters to be applied at the start of the application and start to searching with those filters selected.                                                                                                                                                                                                                                                                                                                         |
-| `queriesPreview`                                       | `QueryPreviewInfo[]`                                                                 | _Optional_. List of queries to preview. Every query defined includes a preview of related product results before shoppers type a search term in the search box. E.g. to preview results for the queries `backpacks` and `watches`, you add the following: `[{query: "backpack", title: "Back to school"}, {query: "watch", title: "Get on time"}]`. See [Dynamic query results preview](#dynamic-query-results-preview) for more information. |
-| `<extra parameters>`                                   | `any`                                                                                | _Optional_. Any other parameters to sent to the API calls directly. E.g. to filter the search catalogue with a warehouse parameter, you add `warehouse: <your-warehouse-identifier>` to the snippet configuration.                                                                                                                                                                                                                            |
-
-::: note Consent parameter
-
-When the `consent` parameter is set to `false`, the `sessionId` is not generated nor sent to the
-Tagging API. Only shoppers' behavioral data (wisdom of the crowd) is inferred from the current
-session. The `consent` parameter is set to `true` as soon as the shopper accepts the use of cookies.
-If page reload is not triggered after accepting cookies, update the `consent` parameter
-(`window.initX.consent = true`) to start tracking the current session.
-
- </br>
-
-Although cookie acceptance is bound to the generation of the `sessionId` in local storage, Empathy
-does **not use any cookies** in its libraries.
-
-<br/>
-
-The `sessionId` lasts until there are 30 minutes of inactivity. However, every time the shopper
-interacts with the commerce search (e.g. queries, clicks, etc.), the session expiration time is
-reset by adding 30 minutes from the time of that interaction. After 30 minutes of shopper
-inactivity, a new `sessionId` is generated.
-
-:::
-
-### Callbacks and Interface X events types
-
-You can use a **callback** to subscribe to specific **X&nbsp;events&nbsp;types** to perform
-particular actions when triggered.
-
-For example, you subscribe to the `UserClickedResultAddToCart` event to add a product result to the
-shopping cart:
-
-```html
-<script src="https://x.empathy.co/my-store/app.js" type="module"></script>
-<script>
-  window.InterfaceX.init({
-    instance: 'my-store',
-    scope: 'desktop',
-    lang: 'en',
-    currency: 'EUR',
-    consent: false,
-    callbacks: {
-      UserAcceptedAQuery: query => {
-        doSomethingInWebApp(query);
-      },
-      UserClickedResultAddToCart: result => {
-        addToCartInWebApp(result);
-      }
-    }
-  });
-</script>
-```
-
-Interface&nbsp;X is built on an [event-based architecture](web-x-architecture.md). There are more
-than one hundred of events available to subscribe to via callbacks to trigger different actions in
-your app. Check out the complete
-**[X&nbsp;events types list](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)**
-in the open source repository in GitHub.
-
-X&nbsp;events types can be triggered from different modules in the X&nbsp;Components project.
-However, every module has its own sort of components (e.g. Empathize X events, Search Box X events,
-etc.). See the corresponding `events.types.ts` file for each module in the
-[X&nbsp;Components library in GitHub](https://github.com/empathyco/x/tree/main/packages/x-components/src/x-modules).
-
-### X API
-
-The
-[X&nbsp;API](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts)
-object allows your commerce store to communicate with Interface&nbsp;X. It supports multiple
-functions to integrate Interface&nbsp;X in your website. You can access these functions inside the
-`window.InterfaceX` object.
-
-| Function           | Parameters                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| ------------------ | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `init`             | [snippet configuration params](#snippet-configuration) - _Required_. Initialization options | [Initializes Interface&nbsp;X on demand](#initializing-interface-x-project-on-demand).                                                                                                                                                                                                                                                                                                                                              |
-| `search`           | `query` - _Optional_. Query to open Interface&nbsp;X                                        | Executes Interface&nbsp;X and triggers a search with the given query.                                                                                                                                                                                                                                                                                                                                                               |
-| `close`            | none                                                                                        | Closes Interface&nbsp;X search layer.                                                                                                                                                                                                                                                                                                                                                                                               |
-| `getSnippetConfig` | none                                                                                        | Returns the current initialization options.                                                                                                                                                                                                                                                                                                                                                                                         |
-| `setSnippetConfig` | [snippet configuration params](#snippet-configuration) - _Required_. Initialization options | Changes initialization options so that all components react to the changes, i.e. changing both search engine and language without reloading the page.                                                                                                                                                                                                                                                                               |
-| `addProductToCart` | `productId` - _Optional._ Id of the product added to cart                                   | Sends tracking of the `AddToCart` event to the [Empathy Tagging microservice](/develop-empathy-platform/capture-interaction-signals/tagging-api-guide.md) for the product displayed on screen. This function is called from the product detail page (PDP) when the shopper clicks on the add-to-cart button. If the `productId` is not provided, the URL detects whether the shopper found the product via a search session or not. |
-
-### Dynamic query results preview
-
-The `queriesPreview` parameter settings can be changed to dynamically preview product results from
-the queries you define according to your brand's strategy.
-
-You may set the `queriesPreview` in two ways:
-
-- In the initialization object as parameter.
-- Later on , using the `setSnippetConfig` function in the [`X API`](#x-api) object to determine the
-  queries to be previewed dynamically depending on the section the shopper is visiting in your
-  commerce store, for instance, or any other scenario.
-
-The following example shows you how to change dynamically the preview of query results in the _kids_
-and _adult_ sections:
-
-```html
-<script>
-  if (yourCommerceStoreEnvironment.section === 'kids') {
-    InterfaceX.setSnippetConfig({
-      queriesPreview: [
-        {
-          query: 'backpack',
-          title: 'Back to School!'
-        },
-        {
-          query: 'pencil',
-          title: 'Write with style!'
-        }
-      ]
-    });
-  } else if (yourCommerceStoreEnvironment.section === 'adult') {
-    InterfaceX.setSnippetConfig({
-      queriesPreview: [
-        {
-          query: 'watch',
-          title: 'Get on time!'
-        }
-      ]
-    });
-  }
-</script>
-```
-
-#### Adding filters
-
-The `queriesPreview` accept additional parameters that allow to filter the result set. See the
-following example:
-
-```html
-<script>
-  InterfaceX.setSnippetConfig({
-    queriesPreview: [
-      {
-        query: 'backpack',
-        title: 'Back to School!',
-        filters: ['brand:acme', 'collection:summer']
-      }
-    ]
-  });
-</script>
-```
-
-::: note
-
-The syntax to each filter is the same one as the one sent to the search request when selecting a
-filter in the interface.
-
-:::
-
-#### Adding extra params
-
-On top of that, extra parameters can be added to the search request of the `queriesPreview`, for
-instance:
-
-```html
-<script>
-  InterfaceX.setSnippetConfig({
-    queriesPreview: [
-      {
-        query: 'backpack',
-        title: 'Back to School!',
-        extraParams: {
-          sort: 'price desc'
-        }
-      }
-    ]
-  });
-</script>
-```
-
-### Tracking events for add to cart on product detail pages
-
-Empathy Platform Interface X allows you to track shoppers' add-to-cart interactions from any product
-detail page (PDP) in your commerce store, regardless of whether your commerce store is running on a
-**single-page application or not**.
-
-#### Tracking add-to-cart events on non-SPA webpages
-
-To track your shoppers' add-to-cart interactions from any PDP based on a non-spa structured webpage,
-follow these steps:
-
-1. Add the `productId` parameter when initializing the script.
-
-   ```html
-   window.InterfaceX.init({ instance: "instanceName", lang: "es", documentDirection: "ltr", scope:
-   'desktop', currency: "EUR", consent: true, isSPA: false, queriesPreview: [] { query: 'coats',
-   title: 'Winter Coats' } ], callbacks: { UserClickedAResult: function(a, b, e, t) {} }, productId:
-   '11776347-ES' // Add this parameter })
-   ```
-
-2. Call the `InterfaceX.addProductToCart('11776347-ES')` function to track the event when the
-   add-to-cart button is clicked.
-
-   ```html
-   yourCommerceStoreEnvironment.addToCartButton.addEventListener('click', () =>
-   InterfaceX.addProductToCart('11776347-ES'); );
-   ```
-
-#### Tracking add-to-cart events on SPA webpages
-
-To track your shoppers' add-to-cart interactions from any PDP based on a SPA structured webpage,
-follow these steps:
-
-1. Call the `InterfaceX.bus.emit('PDPIsLoaded')` function any time a new PDP-type page is loaded.
-
-   ```html
-   if (yourCommerceStoreEnvironment.isPDP && window.initX.isSpa) {
-   InterfaceX.bus.emit('PDPIsLoaded') }
-   ```
-
-2. Call the `InterfaceX.addProductToCart()` function to track the event when the add-to-cart button
-   is clicked:
-
-   ```html
-   yourCommerceStoreEnvironment.addToCartButton.addEventListener('click', () =>
-   InterfaceX.addProductToCart(); );
-   ```

package/docs/build-search-ui/web-how-to-use-x-components-guide.md

@@ -1,200 +0,0 @@
----
-title: How to use and configure Interface X Components in your project
-meta_title: How to use the Interface X Components library in your project
-tags:
-  - configuration
-  - x configuration
-  - x component configuration
-  - use x components
-  - how to
----
-
-Interface X Components are like building blocks that you pick up and mix to craft your
-search UI experiences. The goal of using components is to include only the components you want,
-wherever you want.
-
-Once you’ve installed the
-[dependencies and the xPlugin](web-x-components-development-guide.md#1-install-the-dependencies),
-you’re ready to use X Components in your project.
-
-##### Steps to use X Components in your project:
-
-1. **Import and register** X Components from a module.
-
-2. **Configure the X Components behavior** to customize the search and discovery experience.
-
-## Importing and registering the X Components
-
-Many of the X Components are distributed into modules to make them easier to manage. So you
-need to indicate from which module you’re importing each component as appropriate.
-
-For example, the `search-box` module contains the `SearchInput`, `SearchButton`, and
-`ClearSearchInput` components. See
-[Using the search box components](#example-using-the-search-box-components) for an example on how to
-import and register the Search box components in a project.
-
-When importing the components, you can register each component **locally for each Vue instance** as
-you go.
-
-```typescript
-//Import every component you'd like to use.
-import { ComponentA } from './Module1';
-import { ComponentB } from './Module1';
-import { ComponentC } from './Module1';
-
-//Register the components locally.
-export default {
-  components: {
-    ComponentA,
-    ComponentB,
-    ComponentC
-  }
-  // ...
-};
-
-//The components are now ready to be used inside your template.
-```
-
-## Configuring the X Components
-
-You can configure some behaviors for each component to customize the search experience.
-
-To provide different project-specific behaviors, you use:
-
-- **Props**: custom attributes to pass data into a component. It modifies the behavior or the
-  properties in a component.
-
-```vue
-//Configure a component with props.
-<SearchInput :maxLength="5" :autofocus="false" :instant="true" :instantDebounceInMs="1000" />
-```
-
-- **Scoped slots**: a slot exposes data from a child component to create your own custom
-  implementation.
-
-```vue
-//Configure a component with slots.
-<ClearSearchInput>Clear</ClearSearchInput>
-```
-
-You can pass the configuration attributes documented in the
-[UI Reference](/develop-empathy-platform/ui-reference/) for the Interface&nbsp;X&nbsp;Components.
-Combine components at your ease and use resource modules such as **modals**, **panels**, and
-**animations**. You also use
-**[base components](/develop-empathy-platform/ui-reference/components/base-components/)**, i.e.
-standard Vue components that don’t have any dependencies with the X&nbsp;Components. Use them as a
-foundation to build other components.
-
-::: develop Next steps
-
-Your components are ready to go, but you can provide your search UI with a friendly and fancy style
-and layout. For more information, see
-[Design tokens](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md).
-
-:::
-
-<!--If you want to support multiple languages, you can use the [x-translation](https://github.com/empathyco/x/tree/main/packages/x-translations) library to manage localization options.-->
-
-## Example: Using the search box components
-
-To build your search UI, you need to provide at least a search field that allows users to input a
-query. Additionally, you can include a button to trigger the search and a button to delete the input
-query.
-
-The `search-box` module contains these components:
-
-- `SearchInput`
-- `SearchButton`
-- `ClearSearchInput`
-
-::: interact
-
-Learn more about the
-[Search Box UI](/onboard-empathy-platform/experience-search-and-discovery/search-box.md)
-
-:::
-
-**1. Importing the components from the search-box module**
-
-For this purpose, you need to import the `SearchInput`, `SearchButton`, and `ClearSearchInput`
-components from the `search-box` module to the desired app component. Then, register them and
-include them in the template.
-
-First, **import and locally register** the components.
-
-```vue
-//Import the components from the corresponding module.
-<script>
-  import { SearchInput, SearchButton, ClearSearchInput } from '@empathyco/x-components/search-box';
-
-  //Locally register each component.
-  export default {
-    components: { SearchInput, SearchButton, ClearSearchInput }
-  };
-</script>
-```
-
-Now, you’re ready to start using the component wherever you want in your template.
-
-```vue
-<template>
-  <div>
-    <SearchInput />
-    <SearchButton />
-    <ClearSearchInput />
-  </div>
-</template>
-```
-
-**2. Configuring the SearchInput component**
-
-Next, you want to configure the behavior of the `SearchInput` component. Here you use the
-`maxLength` prop to limit the maximum length to 20 characters.
-
-```vue
-<SearchInput
-  :maxLength="20"
-  :autofocus="false"
-  :instant="true"
-  :instantDebounceInMs="1000"
-  :autocompleteKeyboardKeys="['ArrowDown']"
-  :autocompleteSuggestionsEvent="'NextQueriesChanged'"
-/>
-```
-
-**3. Listening to X Events**
-
-For advanced use cases you might need to subscribe to certain `XEvent`. The recommended way to do so
-is by using the `GlobalXBus` component.
-
-In this example you are subscribing to the `UserAcceptedAQuery` event. This event is emitted both by
-the `SearchInput` component and by the `QuerySuggestions` one.
-
-```vue live
-<template>
-  <div>
-    <GlobalXBus @UserAcceptedAQuery="logUserAcceptedAQuery" />
-    <SearchInput />
-    <QuerySuggestions />
-  </div>
-</template>
-<script>
-  import { GlobalXBus } from '@empathyco/x-components';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';
-
-  export default {
-    name: 'Demo',
-    components: {
-      GlobalXBus,
-      SearchInput,
-      QuerySuggestions
-    },
-    methods: {
-      logUserAcceptedAQuery(query, metadata) {
-        console.log('UserAcceptedAQuery', query, metadata);
-      }
-    }
-  };
-</script>
-```