@paymanai/payman-ask-sdk 2.0.5 → 2.0.6

package/dist/index.mjs

@@ -2498,6 +2498,136 @@ function ImageLightboxV2({ src, alt, onClose }) {
     document.body
   );
 }
+function slugify(value) {
+  const slug = value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  return slug || "category";
+}
+function formatSuggestionTitle(value) {
+  return value.replace(
+    /\b(Good (?:morning|afternoon|evening))[ \t]+(?=how can I help)/i,
+    "$1 - "
+  );
+}
+function CategoryGlyph({ label }) {
+  const normalizedLabel = label.toLowerCase();
+  const icon = normalizedLabel.includes("pay") || normalizedLabel.includes("transfer") ? "arrow" : normalizedLabel.includes("account") ? "card" : normalizedLabel.includes("insight") || normalizedLabel.includes("analytics") ? "chart" : normalizedLabel.includes("product") ? "clock" : "spark";
+  return /* @__PURE__ */ jsxs("span", { className: "payman-v2-prompt-category-icon", "aria-hidden": "true", children: [
+    icon === "arrow" && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M4 10h11m0 0-4-4m4 4-4 4" }) }),
+    icon === "card" && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", focusable: "false", children: [
+      /* @__PURE__ */ jsx("rect", { x: "3.5", y: "5.5", width: "13", height: "9", rx: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M3.5 8h13" })
+    ] }),
+    icon === "chart" && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", focusable: "false", children: [
+      /* @__PURE__ */ jsx("path", { d: "M4 15.5V4.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M4 15.5h12" }),
+      /* @__PURE__ */ jsx("path", { d: "m6.5 12 3-3 2 2 3.5-4" })
+    ] }),
+    icon === "clock" && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", focusable: "false", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "6" }),
+      /* @__PURE__ */ jsx("path", { d: "M10 6.5V10l2.5 1.5" })
+    ] }),
+    icon === "spark" && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M10 3.5 11.5 8l4 2-4 2L10 16.5 8.5 12l-4-2 4-2L10 3.5Z" }) })
+  ] });
+}
+function PromptSuggestionsV2({
+  title,
+  categories,
+  disabled = false,
+  onPromptClick
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const validCategories = useMemo(
+    () => categories.filter((category) => category.prompts.length > 0),
+    [categories]
+  );
+  const [activeCategoryIndex, setActiveCategoryIndex] = useState(null);
+  useEffect(() => {
+    if (activeCategoryIndex != null && (activeCategoryIndex < 0 || activeCategoryIndex >= validCategories.length)) {
+      setActiveCategoryIndex(null);
+    }
+  }, [activeCategoryIndex, validCategories.length]);
+  if (validCategories.length === 0) return null;
+  const fadeTransition = { duration: 0.18, ease: "easeOut" };
+  const rootMotionProps = shouldReduceMotion ? {} : {
+    initial: { opacity: 0, y: 4 },
+    animate: { opacity: 1, y: 0 },
+    transition: fadeTransition
+  };
+  const getBubbleMotionProps = (index) => shouldReduceMotion ? {} : {
+    initial: { opacity: 0, y: 4 },
+    animate: { opacity: 1, y: 0 },
+    transition: { ...fadeTransition, delay: 0.04 * index }
+  };
+  const activeCategory = activeCategoryIndex == null ? null : validCategories[activeCategoryIndex] ?? null;
+  const activePanelId = activeCategoryIndex == null ? void 0 : `payman-v2-prompt-panel-${slugify(activeCategory?.label ?? "category")}-${activeCategoryIndex}`;
+  const displayTitle = title ? formatSuggestionTitle(title) : void 0;
+  return /* @__PURE__ */ jsxs(motion.div, { className: "payman-v2-prompt-root", ...rootMotionProps, children: [
+    displayTitle && /* @__PURE__ */ jsx("h2", { className: "payman-v2-prompt-title", children: displayTitle }),
+    /* @__PURE__ */ jsx("div", { className: "payman-v2-prompt-category-row", "aria-label": "Prompt categories", children: validCategories.map((category, categoryIndex) => {
+      const isActive = activeCategoryIndex === categoryIndex;
+      const categoryId = `payman-v2-prompt-cat-${slugify(category.label)}-${categoryIndex}`;
+      const panelId = `payman-v2-prompt-panel-${slugify(category.label)}-${categoryIndex}`;
+      return /* @__PURE__ */ jsxs(
+        motion.button,
+        {
+          id: categoryId,
+          type: "button",
+          "aria-expanded": isActive,
+          "aria-controls": panelId,
+          onClick: () => setActiveCategoryIndex(
+            (currentIndex) => currentIndex === categoryIndex ? null : categoryIndex
+          ),
+          className: "payman-v2-prompt-category-bubble",
+          "data-active": isActive ? "true" : "false",
+          ...getBubbleMotionProps(categoryIndex),
+          children: [
+            category.icon ?? /* @__PURE__ */ jsx(CategoryGlyph, { label: category.label }),
+            /* @__PURE__ */ jsx("span", { children: category.label })
+          ]
+        },
+        `${category.label}-${categoryIndex}`
+      );
+    }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: activeCategory && activeCategoryIndex != null && /* @__PURE__ */ jsx(
+      motion.section,
+      {
+        id: activePanelId,
+        role: "region",
+        "aria-labelledby": `payman-v2-prompt-cat-${slugify(activeCategory.label)}-${activeCategoryIndex}`,
+        className: "payman-v2-prompt-category",
+        initial: shouldReduceMotion ? void 0 : { opacity: 0, y: -2 },
+        animate: shouldReduceMotion ? void 0 : { opacity: 1, y: 0 },
+        exit: shouldReduceMotion ? void 0 : { opacity: 0, y: -2 },
+        transition: fadeTransition,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "payman-v2-prompt-row",
+            role: "group",
+            "aria-label": `${activeCategory.label} prompts`,
+            children: activeCategory.prompts.map((prompt, promptIndex) => /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                type: "button",
+                disabled,
+                onClick: () => onPromptClick(prompt),
+                className: "payman-v2-prompt-bubble",
+                "aria-label": `Use suggested prompt: ${prompt}`,
+                ...getBubbleMotionProps(promptIndex),
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: prompt }),
+                  /* @__PURE__ */ jsx("span", { className: "payman-v2-prompt-option-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M7 13 13 7m0 0H8m5 0v5" }) }) })
+                ]
+              },
+              `${prompt}-${promptIndex}`
+            ))
+          }
+        )
+      },
+      `${activeCategory.label}-${activeCategoryIndex}`
+    ) })
+  ] });
+}
 var DEFAULT_WIDTH = 260;
 var DEFAULT_MIN_WIDTH = 220;
 var DEFAULT_MAX_WIDTH = 440;
@@ -3692,6 +3822,8 @@ var PaymanChat = forwardRef(function PaymanChat2({
   const emptyStateText = ui.emptyState?.text ?? DEFAULT_EMPTY_STATE_TEXT;
   const showEmptyStateIcon = ui.emptyState?.icon ?? true;
   const emptyStateComponent = ui.emptyState?.content;
+  const suggestions = ui.emptyState?.suggestions;
+  const showSuggestions = suggestions != null && suggestions.enabled !== false && suggestions.categories.some((category) => category.prompts.length > 0);
   const showResetButton = ui.input?.showResetButton ?? false;
   const attachments = normalizeAttachments(ui.input?.attachments);
   const voice = normalizeVoice(ui.input?.voice);
@@ -3850,13 +3982,13 @@ var PaymanChat = forwardRef(function PaymanChat2({
     v2VerificationPending
   ]);
   const hideV2SendDuringVerification = v2UserAction != null && v2UserAction.status !== "approved" && v2UserAction.status !== "rejected";
-  const handleV2Send = (text) => {
+  const handleV2Send = useCallback((text) => {
     if (isRecording) stopRecording();
     if (text.trim()) {
       setEditingMessageId(null);
       void sendMessage(text.trim());
     }
-  };
+  }, [isRecording, sendMessage, stopRecording]);
   const handleEditMessageDraft = useCallback(
     (messageId) => {
       const targetMessage = messages.find((m) => m.id === messageId);
@@ -3996,7 +4128,10 @@ var PaymanChat = forwardRef(function PaymanChat2({
                     {
                       text: emptyStateText,
                       content: emptyStateComponent,
-                      showIcon: showEmptyStateIcon
+                      showIcon: showEmptyStateIcon && !showSuggestions,
+                      suggestions: showSuggestions ? suggestions : void 0,
+                      onPromptClick: handleV2Send,
+                      isStreaming: isWaitingForResponse
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -4105,7 +4240,10 @@ var PaymanChat = forwardRef(function PaymanChat2({
 function EmptyState2({
   text,
   content,
-  showIcon
+  showIcon,
+  suggestions,
+  onPromptClick,
+  isStreaming
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -4122,7 +4260,7 @@ function EmptyState2({
       },
       children: [
         content,
-        showIcon && !content && /* @__PURE__ */ jsx(
+        showIcon && !content && !suggestions && /* @__PURE__ */ jsx(
           "div",
           {
             "aria-hidden": "true",
@@ -4134,7 +4272,15 @@ function EmptyState2({
             }
           }
         ),
-        /* @__PURE__ */ jsx(
+        suggestions && onPromptClick ? /* @__PURE__ */ jsx(
+          PromptSuggestionsV2,
+          {
+            title: suggestions.title ?? text,
+            categories: suggestions.categories,
+            disabled: isStreaming,
+            onPromptClick
+          }
+        ) : /* @__PURE__ */ jsx(
           "div",
           {
             style: {