@paymanai/payman-ask-sdk 2.0.5 → 2.0.6

package/dist/index.native.js

@@ -2235,6 +2235,232 @@ var s6 = reactNative.StyleSheet.create({
     borderColor: "rgba(0,0,0,0.07)"
   }
 });
+var COMPACT_BREAKPOINT = 560;
+var PAYMAN_GREEN = "#0A3B44";
+function getCategoryGlyph(label) {
+  const normalizedLabel = label.toLowerCase();
+  if (normalizedLabel.includes("pay") || normalizedLabel.includes("transfer")) return "->";
+  if (normalizedLabel.includes("account")) return "[]";
+  if (normalizedLabel.includes("insight") || normalizedLabel.includes("analytics")) return "/_";
+  if (normalizedLabel.includes("product")) return "o";
+  return "+";
+}
+function formatSuggestionTitle(value) {
+  return value.replace(
+    /\b(Good (?:morning|afternoon|evening))[ \t]+(?=how can I help)/i,
+    "$1 - "
+  );
+}
+function PromptSuggestionsV2({
+  title,
+  categories,
+  disabled = false,
+  onPromptClick
+}) {
+  const { width } = reactNative.useWindowDimensions();
+  const isCompact = width < COMPACT_BREAKPOINT;
+  const validCategories = React.useMemo(
+    () => categories.filter((category) => category.prompts.length > 0),
+    [categories]
+  );
+  const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(null);
+  React.useEffect(() => {
+    if (activeCategoryIndex != null && (activeCategoryIndex < 0 || activeCategoryIndex >= validCategories.length)) {
+      setActiveCategoryIndex(null);
+    }
+  }, [activeCategoryIndex, validCategories.length]);
+  if (validCategories.length === 0) return null;
+  const activeCategory = activeCategoryIndex == null ? null : validCategories[activeCategoryIndex] ?? null;
+  const displayTitle = title ? formatSuggestionTitle(title) : void 0;
+  const categoryButtons = validCategories.map((category, categoryIndex) => {
+    const isActive = activeCategoryIndex === categoryIndex;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${category.label} prompts`,
+        accessibilityState: { expanded: isActive, selected: isActive },
+        onPress: () => setActiveCategoryIndex(
+          (currentIndex) => currentIndex === categoryIndex ? null : categoryIndex
+        ),
+        style: ({ pressed }) => [
+          styles.categoryButton,
+          isActive && styles.categoryButtonActive,
+          pressed && styles.categoryButtonPressed
+        ],
+        children: [
+          category.icon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.customIcon, children: category.icon }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.categoryIcon, isActive && styles.categoryIconActive], children: getCategoryGlyph(category.label) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              numberOfLines: 1,
+              style: [styles.categoryText, isActive && styles.categoryTextActive],
+              children: category.label
+            }
+          )
+        ]
+      },
+      `${category.label}-${categoryIndex}`
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.root, children: [
+    displayTitle ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.title, isCompact && styles.titleCompact], children: displayTitle }) : null,
+    isCompact ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: styles.categoryScrollContent,
+        style: styles.categoryScroll,
+        children: categoryButtons
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.categoryWrap, children: categoryButtons }),
+    activeCategory ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.promptCard, isCompact && styles.promptCardCompact], children: activeCategory.prompts.map((prompt, promptIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `Use suggested prompt: ${prompt}`,
+        disabled,
+        onPress: () => onPromptClick(prompt),
+        style: ({ pressed }) => [
+          styles.promptButton,
+          promptIndex > 0 && styles.promptButtonDivider,
+          pressed && !disabled && styles.promptButtonPressed,
+          disabled && styles.promptButtonDisabled
+        ],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.promptText, children: prompt }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.promptArrow, children: "->" })
+        ]
+      },
+      `${prompt}-${promptIndex}`
+    )) }) : null
+  ] });
+}
+var styles = reactNative.StyleSheet.create({
+  root: {
+    width: "100%",
+    alignItems: "center"
+  },
+  title: {
+    marginBottom: 8,
+    color: "#18181b",
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 24,
+    textAlign: "center"
+  },
+  titleCompact: {
+    maxWidth: 340,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    lineHeight: 24
+  },
+  categoryWrap: {
+    width: "100%",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    marginBottom: 12
+  },
+  categoryScroll: {
+    width: "100%",
+    marginBottom: 12
+  },
+  categoryScrollContent: {
+    paddingHorizontal: 16,
+    paddingVertical: 2
+  },
+  categoryButton: {
+    minHeight: 30,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginHorizontal: 4,
+    marginVertical: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+    borderRadius: 999,
+    backgroundColor: "#ffffff"
+  },
+  categoryButtonActive: {
+    borderColor: PAYMAN_GREEN,
+    backgroundColor: PAYMAN_GREEN
+  },
+  categoryButtonPressed: {
+    opacity: 0.82
+  },
+  customIcon: {
+    marginRight: 6
+  },
+  categoryIcon: {
+    marginRight: 6,
+    color: PAYMAN_GREEN,
+    fontSize: 11,
+    fontWeight: "700",
+    lineHeight: 14
+  },
+  categoryIconActive: {
+    color: "#ffffff"
+  },
+  categoryText: {
+    maxWidth: 180,
+    color: "#3f3f46",
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 14
+  },
+  categoryTextActive: {
+    color: "#ffffff"
+  },
+  promptCard: {
+    width: "100%",
+    maxWidth: 600,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+    borderRadius: 16,
+    backgroundColor: "#ffffff"
+  },
+  promptCardCompact: {
+    width: "auto",
+    alignSelf: "stretch",
+    marginHorizontal: 16,
+    borderRadius: 14
+  },
+  promptButton: {
+    minHeight: 50,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  promptButtonDivider: {
+    borderTopWidth: 1,
+    borderTopColor: "#e4e4e7"
+  },
+  promptButtonPressed: {
+    backgroundColor: "#eef7f7"
+  },
+  promptButtonDisabled: {
+    opacity: 0.5
+  },
+  promptText: {
+    flex: 1,
+    paddingRight: 12,
+    color: "#27272a",
+    fontSize: 13,
+    lineHeight: 18
+  },
+  promptArrow: {
+    color: PAYMAN_GREEN,
+    fontSize: 13,
+    lineHeight: 16
+  }
+});
 var WaveformBar = React.memo(
   ({
     delay,
@@ -2274,7 +2500,7 @@ var WaveformBar = React.memo(
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Animated.View,
       {
-        style: [styles.waveformBar, { height, backgroundColor: color }]
+        style: [styles2.waveformBar, { height, backgroundColor: color }]
       }
     );
   }
@@ -2351,7 +2577,7 @@ var RollingText = React.memo(({ text, color }) => {
     reactNative.Animated.Text,
     {
       style: [
-        styles.transcribedText,
+        styles2.transcribedText,
         {
           color,
           opacity,
@@ -2413,20 +2639,20 @@ var VoiceOverlay = React.memo(
       }
     }, [visible, panelHeight, contentOpacity]);
     if (!mounted) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: onStopRecording, style: styles.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: onStopRecording, style: styles2.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Animated.View,
       {
         style: [
-          styles.panel,
+          styles2.panel,
           {
             height: panelHeight,
             backgroundColor: bgColor
           }
         ],
-        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles.content, { opacity: contentOpacity }], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.textContainer, children: transcribedText.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(RollingText, { text: transcribedText, color: textColor }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.placeholderText, { color: mutedColor }], children: "Listening..." }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.controlsContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.waveformContainer, children: [0, 1, 2, 3, 4].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles2.content, { opacity: contentOpacity }], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.textContainer, children: transcribedText.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(RollingText, { text: transcribedText, color: textColor }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.placeholderText, { color: mutedColor }], children: "Listening..." }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.controlsContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.waveformContainer, children: [0, 1, 2, 3, 4].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
               WaveformBar,
               {
                 delay: index * 20,
@@ -2435,7 +2661,7 @@ var VoiceOverlay = React.memo(
               },
               index
             )) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.hintText, { color: mutedColor }], children: "Tap to stop" })
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.hintText, { color: mutedColor }], children: "Tap to stop" })
           ] })
         ] })
       }
@@ -2443,7 +2669,7 @@ var VoiceOverlay = React.memo(
   }
 );
 VoiceOverlay.displayName = "VoiceOverlay";
-var styles = reactNative.StyleSheet.create({
+var styles2 = reactNative.StyleSheet.create({
   panelWrapper: {
     zIndex: 10,
     elevation: 10
@@ -2672,6 +2898,8 @@ var PaymanChat = React.forwardRef(
     const emptyStateEyebrow = ui.emptyState?.eyebrow;
     const showEmptyIcon = ui.emptyState?.icon ?? true;
     const emptyStateLogo = ui.emptyState?.logo;
+    const suggestions = ui.emptyState?.suggestions;
+    const showSuggestions = suggestions != null && suggestions.enabled !== false && suggestions.categories.some((category) => category.prompts.length > 0);
     const availability = config.availability;
     if (availability?.state === "disabled") {
       return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s7.root, { backgroundColor: palette.background }], children: [
@@ -2724,7 +2952,15 @@ var PaymanChat = React.forwardRef(
               emptyStateLogo ? emptyStateLogo : showEmptyIcon ? /* @__PURE__ */ jsxRuntime.jsx(HeroMark, { palette }) : null,
               emptyStateEyebrow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [s7.emptyEyebrow, { color: palette.textMuted }], children: emptyStateEyebrow }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [s7.emptyStateText, { color: "#94a3b8" }], children: emptyStateText }),
-              !emptyStateLogo ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [s7.emptyStateSubtext, { color: palette.textSecondary }], children: "Ask anything about your accounts, payments, or transfers." }) : null
+              !emptyStateLogo && !showSuggestions ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [s7.emptyStateSubtext, { color: palette.textSecondary }], children: "Ask anything about your accounts, payments, or transfers." }) : null,
+              showSuggestions ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.emptySuggestions, children: /* @__PURE__ */ jsxRuntime.jsx(
+                PromptSuggestionsV2,
+                {
+                  categories: suggestions.categories,
+                  disabled: isWaitingForResponse,
+                  onPromptClick: handleSend
+                }
+              ) }) : null
             ] }),
             !isReadOnly ? /* @__PURE__ */ jsxRuntime.jsx(ChatInputV2, { ref: chatInputRef, ...inputProps }) : null
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2897,6 +3133,10 @@ var s7 = reactNative.StyleSheet.create({
     letterSpacing: -0.15,
     maxWidth: 320
   },
+  emptySuggestions: {
+    width: "100%",
+    marginTop: 16
+  },
   disabledContainer: {
     flex: 1,
     alignItems: "center",
@@ -3864,21 +4104,21 @@ function ChatHeader({
       onCopySessionId(sessionId);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.left, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.title, children: "Chat" }),
-      sessionId && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { onPress: handleCopySessionId, style: styles2.sessionChip, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.sessionText, children: sessionId.length > 20 ? `${sessionId.substring(0, 8)}\u2026${sessionId.slice(-8)}` : sessionId }),
-        copiedSessionId ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.copyHint, children: "copied" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.copyHint, children: "copy" })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.left, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: "Chat" }),
+      sessionId && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { onPress: handleCopySessionId, style: styles3.sessionChip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.sessionText, children: sessionId.length > 20 ? `${sessionId.substring(0, 8)}\u2026${sessionId.slice(-8)}` : sessionId }),
+        copiedSessionId ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.copyHint, children: "copied" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.copyHint, children: "copy" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.right, children: [
-      showResetSession && onNewSession && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: onNewSession, style: styles2.btn, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.btnText, children: "Reset" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.right, children: [
+      showResetSession && onNewSession && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: onNewSession, style: styles3.btn, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.btnText, children: "Reset" }) }),
       children
     ] })
   ] });
 }
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",