@paymanai/payman-ask-sdk 1.1.1 → 1.2.0

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" })
+            }
+          )
+        ] })
       ]
     }
   ) }) }) });
@@ -754,11 +757,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
       }
     },
@@ -950,7 +953,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%",
@@ -971,7 +974,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__ */ jsxRuntime.jsx(
@@ -989,7 +992,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
@@ -1001,7 +1004,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
@@ -1134,6 +1137,7 @@ function PaymanChat({
   children
 }) {
   const [inputValue, setInputValue] = react.useState("");
+  const prevInputValueRef = react.useRef(inputValue);
   const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
   const {
     messages,
@@ -1150,6 +1154,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 +1223,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 +1317,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 +1369,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;