@magicx-eng/ai-autocomplete-vanilla 0.40.0 → 0.42.0

package/README.md

@@ -81,6 +81,7 @@ const ac = new AIAutocomplete(container, {
   commitOnWordEnd: false,   // true = a word still being typed never becomes a chip until a space, Enter, or Tab ends it (exact matches and server identified params). Picking an option is unchanged.
   additionalContext: { tier: "gold" }, // optional user context, to personalize suggestions and options
   language: "es",           // BCP 47 tag sent with every suggestion request and telemetry event. Default: navigator.language, else "en-US"
+  productId: "...",         // your product id: what the dropdown offers before anything is typed is read from a cacheable URL with no credential; falls back to a suggestion request
 
   // Appearance
   mode: "auto",               // "light" | "dark" | "auto"

package/dist/index.d.mts

@@ -170,10 +170,12 @@ interface MatchedItem {
     origin_id?: string;
     title: string;
     /**
-     * The item's lowest price, verbatim as the catalog spells it ("131.00").
-     * Not formatted for display: the currency is the storefront's to add.
+     * The item's price as the catalog's number ("131.00").
+     * The strip formats it with `currency` when the item has one.
      */
     price?: string;
+    /** ISO 4217 currency code. Absent when unknown. */
+    currency?: string;
     vendor?: string;
     /**
      * The platform's URL slug for the item, not a URL. The SDK builds a relative
@@ -403,7 +405,10 @@ interface Product {
     url?: string;
     /** Absent/null renders the placeholder tile — plenty of catalogues have no images. */
     imageUrl?: string | null;
-    /** Pre-formatted by the integration, which is the side that knows the currency. */
+    /**
+     * Display text. The built-in strip formats it with the item's currency when the server sends one.
+     * A custom integration (`opts.products`) supplies its own text.
+     */
     price?: string;
     vendor?: string;
     /**
@@ -940,8 +945,16 @@ interface CoreOptions {
     /**
      * BCP 47 language tag (e.g. `"es"`), sent with every suggestion request and telemetry event.
      * Default: the browser language (`navigator.language`), else `"en-US"`.
+     * Only an explicit value selects the SDK's own UI words (Spanish for `es`, English otherwise). The browser language does not.
      */
     language?: string;
+    /**
+     * Your product id. When set, what the dropdown offers before anything is
+     * typed is read from a cacheable URL for your product, with no credential,
+     * instead of a suggestion request; it falls back to a suggestion request
+     * when it cannot be read.
+     */
+    productId?: string;
     /**
      * Stable id for this visitor, kept by the host across page loads (e.g. a
      * first-party cookie). Rides on funnel telemetry so searches can be joined
@@ -1372,6 +1385,7 @@ declare class AIAutocomplete {
      */
     private fireImpression;
     private fireTelemetry;
+    private updateLanguageAttribute;
     private setupContainer;
     private buildAndRenderFull;
     private buildAndRenderDropdown;
@@ -2101,6 +2115,20 @@ interface RenderEditableArgs {
  */
 declare function renderEditableContent(args: RenderEditableArgs): void;
 
+declare const en: {
+    language: string;
+    proceed: string;
+    select: string;
+    skipHint: string;
+    skip: string;
+    skipLabel: string;
+    products: string;
+    soldOut: string;
+    submit: string;
+    scrollArrow: string;
+};
+type UIStrings = typeof en;
+
 /**
  * The "more below" arrow for the options grid.
  *
@@ -2291,7 +2319,7 @@ declare function buildQuery(text: string, completedParams: CompletedParamState[]
  * Pure computation — no DOM access. Shared by the vanilla renderer and the
  * React / Angular footer components so the wording can't drift between them.
  */
-declare function getFooterHint(optionHighlighted: boolean, isInputEmpty: boolean): {
+declare function getFooterHint(optionHighlighted: boolean, isInputEmpty: boolean, strings?: UIStrings): {
     key: string;
     hint: string;
 };
@@ -2325,14 +2353,14 @@ declare const PRODUCT_PATH_PREFIX = "/products/";
  * `url`: still activatable, still emitting `onProductSelect`, just nothing for
  * cmd-click to open.
  */
-declare function productFromMatchedItem(item: MatchedItem): Product;
+declare function productFromMatchedItem(item: MatchedItem, language?: string): Product;
 /**
  * The strip's contents for a response's catalog report. `null` — no block on
  * the response — is an empty strip rather than "keep the previous one": the
  * previous items answered a previous query, and a strip must never show
  * results belonging to an older one.
  */
-declare function productsFromCustomFields(report: CustomFieldsReport | null | undefined): Product[];
+declare function productsFromCustomFields(report: CustomFieldsReport | null | undefined, language?: string): Product[];
 
 declare class ModeController {
     private container;

package/dist/index.d.ts

@@ -170,10 +170,12 @@ interface MatchedItem {
     origin_id?: string;
     title: string;
     /**
-     * The item's lowest price, verbatim as the catalog spells it ("131.00").
-     * Not formatted for display: the currency is the storefront's to add.
+     * The item's price as the catalog's number ("131.00").
+     * The strip formats it with `currency` when the item has one.
      */
     price?: string;
+    /** ISO 4217 currency code. Absent when unknown. */
+    currency?: string;
     vendor?: string;
     /**
      * The platform's URL slug for the item, not a URL. The SDK builds a relative
@@ -403,7 +405,10 @@ interface Product {
     url?: string;
     /** Absent/null renders the placeholder tile — plenty of catalogues have no images. */
     imageUrl?: string | null;
-    /** Pre-formatted by the integration, which is the side that knows the currency. */
+    /**
+     * Display text. The built-in strip formats it with the item's currency when the server sends one.
+     * A custom integration (`opts.products`) supplies its own text.
+     */
     price?: string;
     vendor?: string;
     /**
@@ -940,8 +945,16 @@ interface CoreOptions {
     /**
      * BCP 47 language tag (e.g. `"es"`), sent with every suggestion request and telemetry event.
      * Default: the browser language (`navigator.language`), else `"en-US"`.
+     * Only an explicit value selects the SDK's own UI words (Spanish for `es`, English otherwise). The browser language does not.
      */
     language?: string;
+    /**
+     * Your product id. When set, what the dropdown offers before anything is
+     * typed is read from a cacheable URL for your product, with no credential,
+     * instead of a suggestion request; it falls back to a suggestion request
+     * when it cannot be read.
+     */
+    productId?: string;
     /**
      * Stable id for this visitor, kept by the host across page loads (e.g. a
      * first-party cookie). Rides on funnel telemetry so searches can be joined
@@ -1372,6 +1385,7 @@ declare class AIAutocomplete {
      */
     private fireImpression;
     private fireTelemetry;
+    private updateLanguageAttribute;
     private setupContainer;
     private buildAndRenderFull;
     private buildAndRenderDropdown;
@@ -2101,6 +2115,20 @@ interface RenderEditableArgs {
  */
 declare function renderEditableContent(args: RenderEditableArgs): void;
 
+declare const en: {
+    language: string;
+    proceed: string;
+    select: string;
+    skipHint: string;
+    skip: string;
+    skipLabel: string;
+    products: string;
+    soldOut: string;
+    submit: string;
+    scrollArrow: string;
+};
+type UIStrings = typeof en;
+
 /**
  * The "more below" arrow for the options grid.
  *
@@ -2291,7 +2319,7 @@ declare function buildQuery(text: string, completedParams: CompletedParamState[]
  * Pure computation — no DOM access. Shared by the vanilla renderer and the
  * React / Angular footer components so the wording can't drift between them.
  */
-declare function getFooterHint(optionHighlighted: boolean, isInputEmpty: boolean): {
+declare function getFooterHint(optionHighlighted: boolean, isInputEmpty: boolean, strings?: UIStrings): {
     key: string;
     hint: string;
 };
@@ -2325,14 +2353,14 @@ declare const PRODUCT_PATH_PREFIX = "/products/";
  * `url`: still activatable, still emitting `onProductSelect`, just nothing for
  * cmd-click to open.
  */
-declare function productFromMatchedItem(item: MatchedItem): Product;
+declare function productFromMatchedItem(item: MatchedItem, language?: string): Product;
 /**
  * The strip's contents for a response's catalog report. `null` — no block on
  * the response — is an empty strip rather than "keep the previous one": the
  * previous items answered a previous query, and a strip must never show
  * results belonging to an older one.
  */
-declare function productsFromCustomFields(report: CustomFieldsReport | null | undefined): Product[];
+declare function productsFromCustomFields(report: CustomFieldsReport | null | undefined, language?: string): Product[];
 
 declare class ModeController {
     private container;