@paymanai/payman-ask-sdk 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { createContext, useContext, useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { useChat } from '@paymanai/payman-typescript-ask-sdk';
-export { cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat } from '@paymanai/payman-typescript-ask-sdk';
+import { useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
+export { cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
+import { createContext, useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Bot, Pause, Send, ShieldCheck, Loader2, User, CheckCircle2, XCircle, X, ChevronUp, ChevronDown, Check, Binoculars } from 'lucide-react';
+import { Bot, Mic, Pause, Send, ShieldCheck, Loader2, User, CheckCircle2, XCircle, X, ChevronUp, ChevronDown, Check, Binoculars } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -58,7 +58,11 @@ function ChatInput({
   hasSelectedSession = true,
   isSessionParamsConfigured = true,
   onClick,
-  className
+  className,
+  enableVoice = false,
+  onVoicePress,
+  voiceAvailable = false,
+  isRecording = false
 }) {
   const textareaRef = useRef(null);
   useEffect(() => {
@@ -77,6 +81,8 @@ function ChatInput({
   };
   const isInputDisabled = disabled || isWaitingForResponse;
   const showPauseButton = isWaitingForResponse && onPause;
+  const showVoiceButton = enableVoice && onVoicePress != null;
+  const isVoiceButtonDisabled = isWaitingForResponse || !voiceAvailable || !isSessionParamsConfigured;
   const getPlaceholder = () => {
     if (!hasSelectedSession) {
       return "Select a version to start chatting";
@@ -90,7 +96,7 @@ function ChatInput({
     motion.div,
     {
       initial: false,
-      className: "relative flex items-end overflow-hidden transition-colors bg-input border border-border shadow-sm",
+      className: "flex items-end overflow-hidden transition-colors bg-input border border-border shadow-sm",
       style: { borderRadius: "24px" },
       children: [
         /* @__PURE__ */ jsx(
@@ -103,51 +109,48 @@ function ChatInput({
             onClick,
             disabled: isInputDisabled,
             placeholder: getPlaceholder(),
-            className: "bg-transparent text-foreground focus:outline-none resize-none overflow-y-auto disabled:opacity-50 disabled:cursor-not-allowed w-full text-sm placeholder:text-muted-foreground",
+            className: "bg-transparent text-foreground focus:outline-none resize-none overflow-y-auto disabled:opacity-50 disabled:cursor-not-allowed flex-1 min-w-0 text-sm placeholder:text-muted-foreground",
             style: {
               minHeight: "48px",
               maxHeight: "200px",
-              padding: "12px 48px 12px 16px"
+              padding: "12px 12px 12px 16px"
             },
             rows: 1
           }
         ),
-        showPauseButton ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onPause,
-            className: "flex items-center justify-center flex-shrink-0 transition-all bg-primary text-primary-foreground hover:bg-primary/90",
-            style: {
-              position: "absolute",
-              bottom: "8px",
-              right: "8px",
-              padding: "8px",
-              borderRadius: "9999px",
-              width: "32px",
-              height: "32px"
-            },
-            "aria-label": "Pause request",
-            children: /* @__PURE__ */ jsx(Pause, { className: "w-4 h-4" })
-          }
-        ) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onSend,
-            disabled: isInputDisabled || !value.trim(),
-            className: "flex items-center justify-center flex-shrink-0 transition-all bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
-            style: {
-              position: "absolute",
-              bottom: "8px",
-              right: "8px",
-              padding: "8px",
-              borderRadius: "9999px",
-              width: "32px",
-              height: "32px"
-            },
-            "aria-label": "Send message",
-            children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-1 shrink-0 mb-2 mr-2", children: [
+          showVoiceButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onVoicePress,
+              disabled: isVoiceButtonDisabled,
+              className: `flex items-center justify-center flex-shrink-0 transition-all rounded-full w-8 h-8 min-w-[32px] ${isRecording ? "animate-pulse" : "hover:opacity-80"} disabled:opacity-50 disabled:cursor-not-allowed`,
+              "aria-label": isRecording ? "Stop recording" : "Voice input",
+              children: /* @__PURE__ */ jsx(Mic, { className: `w-5 h-5 shrink-0 ${isRecording ? "text-red-500" : "text-foreground"}` })
+            }
+          ),
+          showPauseButton ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onPause,
+              className: "flex items-center justify-center flex-shrink-0 transition-all rounded-full w-8 h-8 bg-primary text-primary-foreground hover:bg-primary/90",
+              "aria-label": "Pause request",
+              children: /* @__PURE__ */ jsx(Pause, { className: "w-4 h-4" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onSend,
+              disabled: isInputDisabled || !value.trim(),
+              className: "flex items-center justify-center flex-shrink-0 transition-all rounded-full w-8 h-8 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
+            }
+          )
+        ] })
       ]
     }
   ) }) }) });
@@ -748,11 +751,11 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
         textAlign: "center",
         fontSize: "20px",
         fontWeight: 600,
-        border: "1px solid var(--border, #E5E5E5)",
+        border: "1px solid hsl(var(--border, 214.3 31.8% 91.4%))",
         borderRadius: "8px",
         outline: "none",
-        backgroundColor: disabled ? "var(--muted, #F5F5F5)" : "transparent",
-        color: "var(--foreground, #000)",
+        backgroundColor: disabled ? "hsl(var(--muted, 210 40% 96.1%))" : "transparent",
+        color: "hsl(var(--foreground, 222.2 84% 4.9%))",
         opacity: disabled ? 0.5 : 1
       }
     },
@@ -944,7 +947,7 @@ function UserActionModal({
           role: "dialog",
           "aria-modal": "true",
           style: {
-            backgroundColor: "var(--card, #FFFFFF)",
+            backgroundColor: "hsl(var(--card, 0 0% 100%))",
             borderRadius: "12px",
             padding: "24px",
             width: "100%",
@@ -965,7 +968,7 @@ function UserActionModal({
                     width: "48px",
                     height: "48px",
                     borderRadius: "50%",
-                    backgroundColor: "var(--muted, #F5F5F5)",
+                    backgroundColor: "hsl(var(--muted, 210 40% 96.1%))",
                     marginBottom: "12px"
                   },
                   children: /* @__PURE__ */ jsx(
@@ -983,7 +986,7 @@ function UserActionModal({
                   style: {
                     fontSize: "18px",
                     fontWeight: 600,
-                    color: "var(--foreground, #000)",
+                    color: "hsl(var(--foreground, 222.2 84% 4.9%))",
                     margin: 0
                   },
                   children: MODAL_CONTENT.TITLE
@@ -995,7 +998,7 @@ function UserActionModal({
               {
                 style: {
                   fontSize: "14px",
-                  color: "var(--muted-foreground, #666)",
+                  color: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
                   textAlign: "center",
                   margin: "0 0 24px 0",
                   lineHeight: 1.5
@@ -1128,6 +1131,7 @@ function PaymanChat({
   children
 }) {
   const [inputValue, setInputValue] = useState("");
+  const prevInputValueRef = useRef(inputValue);
   const chat = useChat(config, callbacks);
   const {
     messages,
@@ -1144,6 +1148,29 @@ function PaymanChat({
   const rejectUserAction = chat.rejectUserAction ?? NOOP_ASYNC;
   const resendOtp = chat.resendOtp ?? NOOP_ASYNC;
   const isUserActionSupported = typeof chat.approveUserAction === "function" && typeof chat.rejectUserAction === "function" && typeof chat.resendOtp === "function";
+  const {
+    isAvailable: voiceAvailable,
+    isRecording,
+    startRecording,
+    stopRecording,
+    clearTranscript
+  } = useVoice(
+    {
+      lang: config.voiceLang || "en-US",
+      interimResults: config.voiceInterimResults !== false,
+      continuous: config.voiceContinuous !== false
+    },
+    {
+      onResult: (text) => {
+        setInputValue(text);
+      },
+      onEnd: () => {
+      },
+      onError: (error) => {
+        console.error("Voice error:", error);
+      }
+    }
+  );
   const contextValue = useMemo(
     () => ({
       resetSession,
@@ -1190,7 +1217,21 @@ function PaymanChat({
     if (!sessionParams) return false;
     return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
   }, [sessionParams?.id, sessionParams?.name]);
+  useEffect(() => {
+    const wasEmpty = prevInputValueRef.current.trim() === "";
+    const isEmpty = inputValue.trim() === "";
+    prevInputValueRef.current = inputValue;
+    if (!wasEmpty && isEmpty) {
+      clearTranscript();
+      if (isRecording) {
+        stopRecording();
+      }
+    }
+  }, [inputValue, clearTranscript, isRecording, stopRecording]);
   const handleSend = () => {
+    if (isRecording) {
+      stopRecording();
+    }
     if (inputValue.trim() && !disableInput && isSessionParamsConfigured) {
       sendMessage(inputValue.trim());
       setInputValue("");
@@ -1270,10 +1311,14 @@ function PaymanChat({
             onSend: handleSend,
             onPause: cancelStream,
             disabled: isInputDisabled,
-            placeholder,
+            placeholder: isRecording ? "Listening..." : placeholder,
             isWaitingForResponse,
             hasSelectedSession: true,
             isSessionParamsConfigured,
+            enableVoice: config.enableVoice === true,
+            onVoicePress: isRecording ? stopRecording : startRecording,
+            voiceAvailable: config.enableVoice === true && voiceAvailable,
+            isRecording,
             inputStyle,
             layout
           }