@paymanai/payman-ask-sdk 1.1.2 → 1.2.1

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { UserActionResult, UserActionRequest } from '@paymanai/payman-typescript-ask-sdk';
-export { StreamEvent, StreamOptions, UserActionRequest, UserActionResult, UserActionState, cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat } from '@paymanai/payman-typescript-ask-sdk';
+export { StreamEvent, StreamOptions, UseVoiceReturn, UserActionRequest, UserActionResult, UserActionState, VoiceCallbacks, VoiceConfig, VoicePermissions, VoiceState, cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
 import { ClassValue } from 'clsx';
 
 type MessageRole = "user" | "assistant" | "system";
@@ -114,6 +114,14 @@ type ChatConfig = {
     isChatDisabled?: boolean;
     /** Custom component to render when chat is disabled. If not provided, default disabled UI will be shown */
     disabledComponent?: React__default.ReactNode;
+    /** Enable voice input (default: true) */
+    enableVoice?: boolean;
+    /** Voice language (default: "en-US") */
+    voiceLang?: string;
+    /** Voice interim results (default: true) */
+    voiceInterimResults?: boolean;
+    /** Voice continuous mode (default: true) */
+    voiceContinuous?: boolean;
 };
 type ChatCallbacks = {
     /** Called when a message is sent (before API call) */
@@ -176,6 +184,14 @@ type ChatInputProps = {
     layout?: "centered" | "full-width";
     /** Custom class name */
     className?: string;
+    /** Enable voice input in the chat input. When false, voice button is hidden. */
+    enableVoice?: boolean;
+    /** Voice button handler */
+    onVoicePress?: () => void;
+    /** Is voice available (e.g. speech recognition ready) */
+    voiceAvailable?: boolean;
+    /** Is currently recording voice */
+    isRecording?: boolean;
 };
 type MessageListProps = {
     /** Messages to display */

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { UserActionResult, UserActionRequest } from '@paymanai/payman-typescript-ask-sdk';
-export { StreamEvent, StreamOptions, UserActionRequest, UserActionResult, UserActionState, cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat } from '@paymanai/payman-typescript-ask-sdk';
+export { StreamEvent, StreamOptions, UseVoiceReturn, UserActionRequest, UserActionResult, UserActionState, VoiceCallbacks, VoiceConfig, VoicePermissions, VoiceState, cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
 import { ClassValue } from 'clsx';
 
 type MessageRole = "user" | "assistant" | "system";
@@ -114,6 +114,14 @@ type ChatConfig = {
     isChatDisabled?: boolean;
     /** Custom component to render when chat is disabled. If not provided, default disabled UI will be shown */
     disabledComponent?: React__default.ReactNode;
+    /** Enable voice input (default: true) */
+    enableVoice?: boolean;
+    /** Voice language (default: "en-US") */
+    voiceLang?: string;
+    /** Voice interim results (default: true) */
+    voiceInterimResults?: boolean;
+    /** Voice continuous mode (default: true) */
+    voiceContinuous?: boolean;
 };
 type ChatCallbacks = {
     /** Called when a message is sent (before API call) */
@@ -176,6 +184,14 @@ type ChatInputProps = {
     layout?: "centered" | "full-width";
     /** Custom class name */
     className?: string;
+    /** Enable voice input in the chat input. When false, voice button is hidden. */
+    enableVoice?: boolean;
+    /** Voice button handler */
+    onVoicePress?: () => void;
+    /** Is voice available (e.g. speech recognition ready) */
+    voiceAvailable?: boolean;
+    /** Is currently recording voice */
+    isRecording?: boolean;
 };
 type MessageListProps = {
     /** Messages to display */

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var react = require('react');
 var paymanTypescriptAskSdk = require('@paymanai/payman-typescript-ask-sdk');
+var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var framerMotion = require('framer-motion');
@@ -64,7 +64,11 @@ function ChatInput({
   hasSelectedSession = true,
   isSessionParamsConfigured = true,
   onClick,
-  className
+  className,
+  enableVoice = false,
+  onVoicePress,
+  voiceAvailable = false,
+  isRecording = false
 }) {
   const textareaRef = react.useRef(null);
   react.useEffect(() => {
@@ -83,6 +87,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";
@@ -96,7 +102,7 @@ function ChatInput({
     framerMotion.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__ */ jsxRuntime.jsx(
@@ -109,51 +115,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-4 h-4" })
-          }
-        ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1 shrink-0 mb-2 mr-2", children: [
+          showVoiceButton && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Mic, { className: `w-5 h-5 shrink-0 ${isRecording ? "text-red-500" : "text-foreground"}` })
+            }
+          ),
+          showPauseButton ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-4 h-4" })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
+            }
+          )
+        ] })
       ]
     }
   ) }) }) });
@@ -748,19 +751,7 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
       onPaste: handlePaste,
       onFocus: (e) => e.target.select(),
       "aria-label": `Digit ${i + 1}`,
-      style: {
-        width: "40px",
-        height: "48px",
-        textAlign: "center",
-        fontSize: "20px",
-        fontWeight: 600,
-        border: "1px solid hsl(var(--border, 214.3 31.8% 91.4%))",
-        borderRadius: "8px",
-        outline: "none",
-        backgroundColor: disabled ? "hsl(var(--muted, 210 40% 96.1%))" : "transparent",
-        color: "hsl(var(--foreground, 222.2 84% 4.9%))",
-        opacity: disabled ? 0.5 : 1
-      }
+      className: `w-10 h-12 text-center text-xl font-semibold border border-border rounded-lg outline-none text-foreground ${disabled ? "bg-muted opacity-50" : "bg-transparent"}`
     },
     i
   )) });
@@ -949,67 +940,16 @@ function UserActionModal({
           ref: dialogRef,
           role: "dialog",
           "aria-modal": "true",
-          style: {
-            backgroundColor: "hsl(var(--card, 0 0% 100%))",
-            borderRadius: "12px",
-            padding: "24px",
-            width: "100%",
-            maxWidth: "420px",
-            margin: "0 16px",
-            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
-          },
+          className: "bg-card rounded-xl p-6 shadow-2xl",
+          style: { width: "100%", maxWidth: "420px", margin: "0 16px" },
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "48px",
-                    height: "48px",
-                    borderRadius: "50%",
-                    backgroundColor: "hsl(var(--muted, 210 40% 96.1%))",
-                    marginBottom: "12px"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.ShieldCheck,
-                    {
-                      className: "text-primary",
-                      style: { width: "24px", height: "24px" }
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  style: {
-                    fontSize: "18px",
-                    fontWeight: 600,
-                    color: "hsl(var(--foreground, 222.2 84% 4.9%))",
-                    margin: 0
-                  },
-                  children: MODAL_CONTENT.TITLE
-                }
-              )
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "w-6 h-6 text-primary" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: MODAL_CONTENT.TITLE })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                style: {
-                  fontSize: "14px",
-                  color: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
-                  textAlign: "center",
-                  margin: "0 0 24px 0",
-                  lineHeight: 1.5
-                },
-                children: userActionRequest.message
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground text-center mb-6 leading-relaxed", children: userActionRequest.message }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
               OtpInput,
               {
                 value: otp,
@@ -1134,6 +1074,7 @@ function PaymanChat({
   children
 }) {
   const [inputValue, setInputValue] = react.useState("");
+  const prevInputValueRef = react.useRef(inputValue);
   const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
   const {
     messages,
@@ -1150,6 +1091,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
+  } = paymanTypescriptAskSdk.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 = react.useMemo(
     () => ({
       resetSession,
@@ -1196,7 +1160,21 @@ function PaymanChat({
     if (!sessionParams) return false;
     return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
   }, [sessionParams?.id, sessionParams?.name]);
+  react.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("");
@@ -1276,10 +1254,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
           }
@@ -1324,6 +1306,10 @@ Object.defineProperty(exports, "useChat", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.useChat; }
 });
+Object.defineProperty(exports, "useVoice", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.useVoice; }
+});
 exports.PaymanChat = PaymanChat;
 exports.PaymanChatContext = PaymanChatContext;
 exports.cn = cn;