@magicx-eng/ai-autocomplete-vanilla 0.48.0 → 0.49.0

package/README.md

@@ -644,6 +644,8 @@ unsub();
 
 > **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) while its picture loads; in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`).
 
+> **Parameter names under options.** An option that completes the word being typed (the server's `traditional_autocomplete` suggestion) can read the same as an option of another parameter, so the built-in dropdown draws the name of the parameter it answers under its text, muted and smaller (`Flavor`, `Subcategory`); the SDK sets it as `parameterLabel` from the option's `parameter`, and a skeleton row hides it. It reads `--aia-option-parameter-font-size` (12px), `--aia-option-parameter-color` and `--aia-option-parameter-opacity` (0.6).
+
 ### State shape (`CoreState`)
 
 | Field | Type | Description |

package/dist/index.d.mts

@@ -60,6 +60,13 @@ interface SuggestionOption {
      * being typed: the text typed since the last answer, whose match is drawn in bold.
      */
     matchedText?: string;
+    /**
+     * Set by the SDK, never the server, on the options that complete the word
+     * being typed: the name of the parameter the option is a value of ("Flavor"
+     * for `flavor`), which the built-in rows draw under the option's text. It
+     * tells apart options that read alike but answer different parameters.
+     */
+    parameterLabel?: string;
 }
 /**
  * The value type of a parameter — which picker it needs. The server sends it

package/dist/index.d.ts

@@ -60,6 +60,13 @@ interface SuggestionOption {
      * being typed: the text typed since the last answer, whose match is drawn in bold.
      */
     matchedText?: string;
+    /**
+     * Set by the SDK, never the server, on the options that complete the word
+     * being typed: the name of the parameter the option is a value of ("Flavor"
+     * for `flavor`), which the built-in rows draw under the option's text. It
+     * tells apart options that read alike but answer different parameters.
+     */
+    parameterLabel?: string;
 }
 /**
  * The value type of a parameter — which picker it needs. The server sends it