@eshal-bot/chat-widget 0.2.54 → 0.2.56

package/dist/chat-widget-markdown-chunk.js

@@ -88719,6 +88719,125 @@
     return null;
   }
 
+  // ── Option lists (choice cards) ────────────────────────────────────────
+  //
+  // One card per option the customer can pick: flights from a search, time
+  // slots, rooms, products. Aurelia demo call, dev, 13 Nov 2026: the agent said
+  // "XA 1 at 7:45 a.m. for USD 588.50, or XA 3 at 2:30 p.m. for USD 585.50" and
+  // the caller had to remember both. The card shows each option with a Select
+  // button, and the pick goes into the conversation as the customer's own words
+  // (`reply`), on chat and on a call alike.
+  //
+  // The spec, every field but `options[].title` optional:
+  //   {"type":"options","title":"Dubai to London, Fri 4 Dec","subtitle":"1 adult",
+  //    "actionLabel":"Select","moreLabel":"Show more","selectedLabel":"Selected",
+  //    "visible":3,
+  //    "options":[{"title":"XA 1","subtitle":"Aurelia Airways","start":"7:45 AM",
+  //      "end":"11:50 AM","duration":"7h 05m","tags":["Nonstop","Economy"],
+  //      "price":"USD 588.50","priceNote":"total","badge":"Earliest",
+  //      "image":"https://...","reply":"XA 1, please","value":"XA1"}]}
+  //
+  // Plain text only: every field is coerced to a capped string here and drawn
+  // as a text node, and `image` still goes through each renderer's safeUrl and
+  // image policy.
+
+  /** Component types drawn as an option list. `choices` and `option-list` are aliases. */
+  const A2UI_OPTION_LIST_TYPES = Object.freeze(['options', 'option-list', 'choices']);
+
+  /** At most this many options are kept from one card. */
+  const OPTION_LIST_MAX = 12;
+  /** Options shown before "show more", unless the card asks for 1 to 4. */
+  const OPTION_LIST_VISIBLE = 3;
+  const OPTION_TEXT_MAX = 120;
+  const OPTION_TAG_MAX = 6;
+  function optionText(value, max) {
+    if (value === null || value === undefined) return '';
+    if (typeof value !== 'string' && typeof value !== 'number') return '';
+    const s = String(value).replace(/\s+/g, ' ').trim();
+    const cap = max || OPTION_TEXT_MAX;
+    return s.length > cap ? s.slice(0, cap - 1).trim() + '…' : s;
+  }
+  function firstText(obj, keys, max) {
+    for (let i = 0; i < keys.length; i += 1) {
+      const t = optionText(obj[keys[i]], max);
+      if (t) return t;
+    }
+    return '';
+  }
+
+  /** Is `type` (any case, `_` or `-`) an option list? */
+  function isOptionListType(type) {
+    return A2UI_OPTION_LIST_TYPES.indexOf(normalizeA2uiType(type)) !== -1;
+  }
+
+  /**
+   * The option list a spec describes, with every field a capped plain string,
+   * or null when it has no option with a title. `reply` is the message a pick
+   * sends: the option's own `reply`, else its title.
+   */
+  function optionList(spec) {
+    if (!spec || typeof spec !== 'object') return null;
+    const raw = Array.isArray(spec.options) ? spec.options : Array.isArray(spec.items) ? spec.items : Array.isArray(spec.choices) ? spec.choices : [];
+    const options = [];
+    for (let i = 0; i < raw.length && options.length < OPTION_LIST_MAX; i += 1) {
+      const o = raw[i];
+      if (!o || typeof o !== 'object') continue;
+      const title = firstText(o, ['title', 'name', 'label'], 80);
+      if (!title) continue;
+      const tagSource = Array.isArray(o.tags) ? o.tags : Array.isArray(o.features) ? o.features : [];
+      const tags = [];
+      for (let j = 0; j < tagSource.length && tags.length < OPTION_TAG_MAX; j += 1) {
+        const t = optionText(tagSource[j], 40);
+        if (t) tags.push(t);
+      }
+      options.push({
+        title: title,
+        subtitle: firstText(o, ['subtitle', 'description'], OPTION_TEXT_MAX),
+        start: firstText(o, ['start', 'depart', 'from'], 40),
+        end: firstText(o, ['end', 'arrive', 'to'], 40),
+        duration: optionText(o.duration, 40),
+        tags: tags,
+        price: optionText(o.price, 40),
+        priceNote: optionText(o.priceNote, 40),
+        badge: optionText(o.badge, 30),
+        image: typeof o.image === 'string' ? o.image : '',
+        value: optionText(o.value, OPTION_TEXT_MAX),
+        reply: firstText(o, ['reply'], 200) || title
+      });
+    }
+    if (options.length === 0) return null;
+    const asked = Number(spec.visible);
+    const visible = Number.isFinite(asked) && asked >= 1 ? Math.min(4, Math.floor(asked)) : OPTION_LIST_VISIBLE;
+    return {
+      title: optionText(spec.title, 120),
+      subtitle: optionText(spec.subtitle, 160),
+      actionLabel: optionText(spec.actionLabel, 30) || 'Select',
+      moreLabel: optionText(spec.moreLabel, 30) || 'Show more',
+      lessLabel: optionText(spec.lessLabel, 30) || 'Show less',
+      selectedLabel: optionText(spec.selectedLabel, 30) || 'Selected',
+      visible: visible,
+      options: options
+    };
+  }
+
+  /**
+   * Which option a recorded answer picked: its index, or -1 when unanswered
+   * or the customer moved on by typing something else. Matches the option's
+   * reply, title or value, as a pick sends the reply.
+   */
+  function matchAnsweredOption(options, answer) {
+    if (answer === undefined || answer === null) return -1;
+    const a = normAnswer(answer);
+    if (!a) return -1;
+    const list = options || [];
+    for (let i = 0; i < list.length; i += 1) {
+      const o = list[i];
+      if (!o) continue;
+      if (normAnswer(o.reply) === a || normAnswer(o.title) === a || o.value && normAnswer(o.value) === a) return i;
+    }
+    return -1;
+  }
+
   /**
    * The same rule for images a card draws itself (A2UI card, list item,
    * avatar, gallery), which never pass through markdown. Returns `src`
@@ -89488,6 +89607,13 @@
       spec: spec,
       isDark: isDark
     });
+    // Option list (choice cards): flights, time slots, products. A pick is the
+    // customer's next turn, on chat and on a call.
+    if (isOptionListType(t)) return /*#__PURE__*/jsxRuntimeExports.jsx(OptionList, {
+      spec: spec,
+      isDark: isDark,
+      onButtonClick: onButtonClick
+    });
 
     // Unrecognised type - render the data (if any) as a labeled list. Never
     // fall through to raw JSON; that's the bug we're fixing.
@@ -90524,6 +90650,7 @@
   // versions but hand-rolled here (no Tailwind runtime in the widget bundle).
 
   const BRAND_BLUE = '#2563eb';
+  const BRAND_BLUE_HOVER = '#1d4ed8';
   function tagChipStyle(isDark) {
     return {
       display: 'inline-flex',
@@ -91175,6 +91302,298 @@
     });
   }
 
+  // ── Option list (choice cards) ──
+  //
+  // One card per option the customer can pick, from a tool's results: flights
+  // (number, depart and arrive, duration, stops, cabin, total), time slots,
+  // rooms, products. The spec is read by the shared chat core's optionList
+  // (packages/shared/src/chatCore/a2ui.js), which caps every field to plain
+  // text. Select sends the option's `reply` ("XA 1, please") as the customer's
+  // own message, so the bubble reads as words, not an id (EV-4471). The first
+  // `visible` options show, the rest behind "show more". Once picked, or once
+  // the conversation history records the answer, the card locks.
+  //
+  // RTL: no physical left/right. The rows are flex rows that follow the
+  // bubble's direction, and times, prices and flight numbers sit in <bdi> so an
+  // Arabic reply keeps "7:45 AM" and "USD 588.50" whole.
+
+  function OptionList({
+    spec,
+    isDark,
+    onButtonClick
+  }) {
+    const list = optionList(spec);
+    const consumedBy = React.useContext(A2uiAnsweredContext);
+    const [localChosen, setLocalChosen] = React.useState(-1);
+    const [expanded, setExpanded] = React.useState(false);
+    const sentRef = React.useRef(false);
+    if (!list) return null;
+    const answered = matchAnsweredOption(list.options, consumedBy);
+    const chosen = localChosen !== -1 ? localChosen : answered;
+    const locked = chosen !== -1 || consumedBy !== undefined;
+    const hidden = list.options.length - list.visible;
+    // the picked option stays in view even when it sat behind "show more"
+    const showAll = expanded || chosen >= list.visible;
+    const shown = showAll ? list.options : list.options.slice(0, list.visible);
+    const subColor = isDark ? '#9ca3af' : '#6b7280';
+    const border = isDark ? '#374151' : '#e5e7eb';
+    const choose = index => {
+      if (!onButtonClick || sentRef.current || locked) return;
+      sentRef.current = true;
+      setLocalChosen(index);
+      const o = list.options[index];
+      onButtonClick(o.reply, o.title);
+    };
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      style: {
+        margin: '8px 0',
+        minWidth: 0
+      },
+      "data-a2ui": "options",
+      children: [(list.title || list.subtitle) && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        style: {
+          marginBottom: 8
+        },
+        children: [list.title && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          style: {
+            fontSize: 13,
+            fontWeight: 700,
+            overflowWrap: 'anywhere'
+          },
+          children: list.title
+        }), list.subtitle && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          style: {
+            fontSize: 11,
+            color: subColor
+          },
+          children: list.subtitle
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        role: "list",
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8
+        },
+        children: shown.map((o, i) => {
+          const picked = chosen === i;
+          const imageUrl = cardImageSrc(o.image);
+          // on the picked card's tint the chips keep a solid fill, or they melt into it
+          const chip = picked ? {
+            ...tagChipStyle(isDark),
+            background: isDark ? '#1f2937' : '#ffffff'
+          } : tagChipStyle(isDark);
+          return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+            role: "listitem",
+            "aria-label": o.title,
+            "data-option-index": i,
+            style: {
+              border: '1px solid ' + (picked ? BRAND_BLUE : border),
+              background: picked ? isDark ? 'rgba(37,99,235,0.12)' : '#eff6ff' : isDark ? '#1f2937' : '#ffffff',
+              borderRadius: 8,
+              padding: 10,
+              display: 'flex',
+              gap: 10,
+              alignItems: 'flex-start',
+              opacity: locked && !picked ? 0.6 : 1,
+              minWidth: 0
+            },
+            children: [imageUrl && /*#__PURE__*/jsxRuntimeExports.jsx("img", {
+              src: imageUrl,
+              alt: o.title,
+              referrerPolicy: "no-referrer",
+              onError: e => {
+                e.currentTarget.style.display = 'none';
+              },
+              style: {
+                width: 56,
+                height: 56,
+                borderRadius: 6,
+                objectFit: 'cover',
+                flexShrink: 0,
+                background: isDark ? '#111827' : '#f9fafb'
+              }
+            }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+              style: {
+                flex: 1,
+                minWidth: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 6
+              },
+              children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-between',
+                  gap: 8
+                },
+                children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                  style: {
+                    minWidth: 0
+                  },
+                  children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      flexWrap: 'wrap',
+                      gap: 6
+                    },
+                    children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                      style: {
+                        fontSize: 13,
+                        fontWeight: 700,
+                        overflowWrap: 'anywhere'
+                      },
+                      children: /*#__PURE__*/jsxRuntimeExports.jsx("bdi", {
+                        children: o.title
+                      })
+                    }), o.badge && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                      style: chip,
+                      children: o.badge
+                    })]
+                  }), o.subtitle && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                    style: {
+                      fontSize: 11,
+                      color: subColor,
+                      marginTop: 2
+                    },
+                    children: o.subtitle
+                  })]
+                }), o.price && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                  style: {
+                    textAlign: 'end',
+                    flexShrink: 0
+                  },
+                  children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                    style: {
+                      fontSize: 14,
+                      fontWeight: 700,
+                      color: isDark ? '#93c5fd' : BRAND_BLUE_HOVER
+                    },
+                    children: /*#__PURE__*/jsxRuntimeExports.jsx("bdi", {
+                      children: o.price
+                    })
+                  }), o.priceNote && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                    style: {
+                      fontSize: 10,
+                      color: subColor
+                    },
+                    children: o.priceNote
+                  })]
+                })]
+              }), (o.start || o.end) && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8
+                },
+                children: [o.start && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600
+                  },
+                  children: /*#__PURE__*/jsxRuntimeExports.jsx("bdi", {
+                    children: o.start
+                  })
+                }), o.start && o.end && /*#__PURE__*/jsxRuntimeExports.jsxs("span", {
+                  style: {
+                    flex: 1,
+                    minWidth: 24,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 2
+                  },
+                  children: [o.duration && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                    style: {
+                      fontSize: 10,
+                      color: subColor
+                    },
+                    children: /*#__PURE__*/jsxRuntimeExports.jsx("bdi", {
+                      children: o.duration
+                    })
+                  }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                    "aria-hidden": "true",
+                    style: {
+                      display: 'block',
+                      width: '100%',
+                      height: 1,
+                      background: isDark ? '#4b5563' : '#d1d5db'
+                    }
+                  })]
+                }), o.end && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600
+                  },
+                  children: /*#__PURE__*/jsxRuntimeExports.jsx("bdi", {
+                    children: o.end
+                  })
+                })]
+              }), !(o.start && o.end) && o.duration && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                style: {
+                  fontSize: 11,
+                  color: subColor
+                },
+                children: /*#__PURE__*/jsxRuntimeExports.jsx("bdi", {
+                  children: o.duration
+                })
+              }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  gap: 6
+                },
+                children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                  style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 4,
+                    minWidth: 0
+                  },
+                  children: o.tags.map((t, ti) => /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                    style: chip,
+                    children: t
+                  }, ti))
+                }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+                  type: "button",
+                  onClick: onButtonClick && !locked ? () => choose(i) : undefined,
+                  disabled: !onButtonClick || locked,
+                  "aria-label": picked ? `${list.selectedLabel}: ${o.title}` : `${list.actionLabel}: ${o.title}`,
+                  "aria-pressed": picked,
+                  style: {
+                    ...primaryButtonStyle(isDark, !onButtonClick || locked && !picked),
+                    marginInlineStart: 'auto',
+                    minWidth: 72
+                  },
+                  children: picked ? `${list.selectedLabel} ✓` : list.actionLabel
+                })]
+              })]
+            })]
+          }, i);
+        })
+      }), hidden > 0 && chosen < list.visible && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+        type: "button",
+        onClick: () => setExpanded(v => !v),
+        "aria-expanded": expanded,
+        style: {
+          marginTop: 6,
+          padding: '4px 0',
+          border: 'none',
+          background: 'none',
+          fontSize: 12,
+          fontWeight: 600,
+          color: isDark ? '#93c5fd' : BRAND_BLUE,
+          cursor: 'pointer'
+        },
+        children: expanded ? list.lessLabel : `${list.moreLabel} (${hidden})`
+      })]
+    });
+  }
+
   // ── 6. Gallery (horizontal image strip) ──
 
   function Gallery({