feat(experiences): bootstrap managed widget mechanism

examples/js/getting-started/src/app.js

@@ -1,47 +1,33 @@
 import { liteClient as algoliasearch } from 'algoliasearch/lite';
 import instantsearch from 'instantsearch.js';
-import { carousel } from 'instantsearch.js/es/templates';
 import {
-  configure,
   hits,
-  pagination,
+  searchBox,
+  experience,
+  configure,
   panel,
   refinementList,
-  searchBox,
-  trendingItems,
-  chat,
+  pagination,
 } from 'instantsearch.js/es/widgets';
 
 import 'instantsearch.css/themes/satellite.css';
 
 const searchClient = algoliasearch(
-  'latency',
-  '6be0576ff61c053d5f9a3225e2a90f76'
+  'F4T6CUV2AH',
+  '4ce25fa46f7de67117fc1b787742e0f3'
 );
 
 const search = instantsearch({
-  indexName: 'instant_search',
+  indexName: 'spencer_and_williams',
   searchClient,
   insights: true,
+  future: { enableExperience: { env: 'beta' } },
 });
 
-const productItemTemplate = (item, { html }) => html`
-  <article class="ais-Carousel-hit">
-    <div class="ais-Carousel-hit-image">
-      <img src="${item.image}" />
-    </div>
-    <h2 class="ais-Carousel-hit-title">
-      <a
-        href="/products.html?pid=${item.objectID}"
-        class="ais-Carousel-hit-link"
-      >
-        ${item.name}
-      </a>
-    </h2>
-  </article>
-`;
-
 search.addWidgets([
+  experience({
+    id: 'agent-ui-7354b616-d29e-4f47-b339-205f3c8f0222',
+  }),
   searchBox({
     container: '#searchbox',
   }),
@@ -73,21 +59,6 @@ search.addWidgets([
   pagination({
     container: '#pagination',
   }),
-  trendingItems({
-    container: '#trending',
-    limit: 6,
-    templates: {
-      item: productItemTemplate,
-      layout: carousel(),
-    },
-  }),
-  chat({
-    container: '#chat',
-    agentId: '7c2f6816-bfdb-46e9-a51f-9cb8e5fc9628',
-    templates: {
-      item: productItemTemplate,
-    },
-  }),
 ]);
 
 search.start();

packages/algolia-experiences/rollup.config.js

@@ -1,5 +1,6 @@
 import path from 'path';
 
+import alias from 'rollup-plugin-alias';
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 import resolve from 'rollup-plugin-node-resolve';
@@ -17,6 +18,38 @@ const link = 'https://github.com/algolia/instantsearch';
 const license = `/*! algolia-experiences ${version} | ${algolia} | ${link} */`;
 
 const plugins = [
+  alias({
+    entries: [
+      {
+        find: /^zod.*/,
+        replacement: path.join(
+          __dirname,
+          '../instantsearch.js/scripts/rollup/emptyModule.js'
+        ),
+      },
+      {
+        find: /^react.*/,
+        replacement: path.join(
+          __dirname,
+          '../instantsearch.js/scripts/rollup/emptyModule.js'
+        ),
+      },
+      {
+        find: /^instantsearch\.css\/.*\.css$/,
+        replacement: path.join(
+          __dirname,
+          '../instantsearch.js/scripts/rollup/emptyModule.js'
+        ),
+      },
+      {
+        find: 'eventsource-parser/stream',
+        replacement: path.join(
+          __dirname,
+          '../../node_modules/eventsource-parser/dist/stream.js'
+        ),
+      },
+    ],
+  }),
   {
     /**
      * This plugin is a workaround for the fact that the `algoliasearch/lite`

packages/instantsearch-ui-components/src/components/autocomplete/createAutocompletePropGetters.ts

@@ -225,7 +225,7 @@ export function createAutocompletePropGetters({
               event.preventDefault();
               return;
             default:
-              setActiveDescendant(undefined);
+              setActiveDescendant(itemsIds[0] || undefined);
               break;
           }
         },

packages/instantsearch.css/src/components/autocomplete.scss

@@ -231,6 +231,90 @@
   }
 }
 
+// Dialog
+.ais-AutocompleteDialog {
+  &--active {
+    overflow: hidden !important;
+  }
+
+  .ais-AutocompleteDialog-Button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: var(--ais-autocomplete-search-input-height);
+    font: inherit;
+    color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
+    background-color: rgba(var(--ais-background-color-rgb), var(--ais-background-color-alpha));
+    border: 1px solid rgba(var(--ais-border-color-rgb), .8);
+    border-radius: var(--ais-border-radius-sm);
+    line-height: 1em;
+  }
+
+  .ais-AutocompleteDialog-Button-Icon {
+    display: flex;
+    align-items: center;
+    padding-left: calc(var(--ais-spacing) * .75 - 1px);
+    padding-right: calc(var(--ais-spacing) / 2);
+    height: 100%;
+    width: calc(var(--ais-spacing) * 1.75 + var(--ais-icon-size) - 1px);
+
+    svg {
+      fill: rgba(var(--ais-primary-color-rgb), 1);
+      height: auto;
+      max-height: var(--ais-icon-size);
+      stroke-width: var(--ais-icon-stroke-width);
+      width: var(--ais-icon-size);
+    }
+
+    span {
+      color: rgba(var(--ais-text-color-rgb), .8);
+    }
+  }
+
+  .ais-AutocompleteDialog-Container {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    z-index: 400;
+  }
+
+  .ais-AutocompleteDialog-Content {
+    position: relative;
+    margin: 100px auto auto;
+    max-width: 800px;
+  }
+}
+
+// Agent
+.ais-Autocomplete-AgentPrompt {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 8px;
+  height: 56px;
+
+  svg {
+    width: calc(var(--ais-icon-size) * 1.4);
+    margin-right: 8px;
+    color: rgb(var(--ais-primary-color-rgb), .8);
+  }
+
+  span {
+    position: relative;
+    color: rgb(var(--ais-primary-color-rgb), .8);
+    border-bottom: 1px solid rgb(var(--ais-primary-color-rgb), .8);
+  }
+}
+
 // Source
 .ais-AutocompleteIndex {
   margin: 0;
@@ -347,6 +431,49 @@
       font-style: normal;
       font-weight: var(--ais-font-weight-bold);
     }
+
+    @at-root .ais-AutocompleteItemContentBody {
+      display: grid;
+      gap: calc(var(--ais-spacing) / 2);
+    }
+    @at-root .ais-AutocompleteItemContentTitle {
+      display: inline-block;
+      margin: 0 0.5em 0 0;
+      max-width: 100%;
+      overflow: hidden;
+      padding: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    @at-root .ais-AutocompleteItemContentDescription {
+      color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
+      font-size: 0.85em;
+      max-width: 100%;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      &:empty {
+        display: none;
+      }
+      mark {
+        // background: rgba(
+        //   var(--ais-description-highlight-background-color-rgb),
+        //   var(--ais-description-highlight-background-color-alpha)
+        // );
+        color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
+        font-style: normal;
+        font-weight: var(--ais-font-weight-medium);
+      }
+    }
+
+    @at-root .ais-AutocompleteItemContentTag {
+      background-color: rgba(
+        var(--ais-muted-color-rgb),
+        .15
+      );
+      border-radius: 3px;
+      margin: 0 0.4em 0 0;
+      padding: 0.08em 0.3em;
+    }
   }
 
   @at-root .ais-AutocompleteItemIcon {
@@ -362,10 +489,32 @@
     stroke-width: var(--ais-icon-stroke-width);
     text-align: center;
     width: calc(var(--ais-icon-size) + calc(var(--ais-spacing) / 2));
+    img {
+      height: auto;
+      max-height: calc(var(--ais-icon-size) + calc(var(--ais-spacing) / 2) - 8px);
+      max-width: calc(var(--ais-icon-size) + calc(var(--ais-spacing) / 2) - 8px);
+      width: auto;
+    }
     svg {
       height: var(--ais-icon-size);
       width: var(--ais-icon-size);
     }
+    @at-root .ais-AutocompleteItemIcon--alignTop {
+      align-self: flex-start;
+    }
+    @at-root .ais-AutocompleteItemIcon--noBorder {
+      background: none;
+      box-shadow: none;
+    }
+    @at-root .ais-AutocompleteItemIcon--picture {
+      height: 96px;
+      width: 96px;
+      img {
+        max-height: 100%;
+        max-width: 100%;
+        padding: calc(var(--ais-spacing) / 2);
+      }
+    }
   }
   @at-root .ais-AutocompleteItemActions {
     display: grid;

packages/instantsearch.css/src/components/chat.scss

@@ -11,3 +11,51 @@
 @use 'chat/chat-prompt';
 @use 'chat/chat-carousel';
 @use 'chat/chat-suggestions';
+
+.ais-Chat-ToolCard {
+  margin-bottom: calc(var(--ais-spacing) * 1.5);
+  max-width: calc(var(--ais-chat-width) - var(--ais-spacing) * 4);
+
+  &--loading {
+    position: relative;
+    padding: calc(var(--ais-spacing) * .75);
+    width: fit-content;
+    display: flex;
+    color: rgba(var(--ais-muted-color-rgb), var(--ais-muted-color-alpha));
+    background-color: rgba(var(--ais-muted-color-rgb), .1);
+    border-radius: var(--ais-border-radius-md);
+    overflow: hidden;
+
+    > * {
+      visibility: hidden;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      transform: translateX(-100%);
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.55) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      animation: ais-card-shine 1.2s ease-in-out infinite;
+      pointer-events: none;
+    }
+  }
+}
+
+@keyframes ais-card-shine {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ais-Chat-ToolCard--loading::after {
+    animation: none;
+    display: none;
+  }
+}