@paymanai/payman-ask-sdk 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.d.mts +8 -2
  2. package/dist/index.d.ts +8 -2
  3. package/dist/index.js +113 -47
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +114 -48
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/index.native.js +135 -48
  8. package/dist/index.native.js.map +1 -1
  9. package/package.json +2 -2
package/dist/index.d.mts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as React from 'react';
3
- import React__default from 'react';
4
2
  import { UserActionResult, UserActionRequest } from '@paymanai/payman-typescript-ask-sdk';
5
3
  export { StreamEvent, StreamOptions, UseVoiceReturn, UserActionRequest, UserActionResult, UserActionState, VoiceCallbacks, VoiceConfig, VoicePermissions, VoiceState, cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
4
+ import * as React from 'react';
5
+ import React__default from 'react';
6
6
  import { ClassValue } from 'clsx';
7
7
 
8
8
  type MessageRole = "user" | "assistant" | "system";
@@ -15,6 +15,8 @@ type StreamingStep = {
15
15
  status: "in_progress" | "completed" | "error" | "pending";
16
16
  timestamp: number;
17
17
  elapsedMs?: number;
18
+ thinkingText?: string;
19
+ isThinking?: boolean;
18
20
  };
19
21
  type ChunkDisplay = {
20
22
  id?: string;
@@ -43,6 +45,10 @@ type MessageDisplay = {
43
45
  currentExecutingStepId?: string;
44
46
  /** Result of user action (OTP approval/rejection) */
45
47
  userActionResult?: UserActionResult;
48
+ /** Current thinking block text (live, resets per block) */
49
+ activeThinkingText?: string;
50
+ /** All thinking accumulated across blocks (for post-stream display) */
51
+ allThinkingText?: string;
46
52
  };
47
53
  type SessionParams = {
48
54
  id?: string;
package/dist/index.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as React from 'react';
3
- import React__default from 'react';
4
2
  import { UserActionResult, UserActionRequest } from '@paymanai/payman-typescript-ask-sdk';
5
3
  export { StreamEvent, StreamOptions, UseVoiceReturn, UserActionRequest, UserActionResult, UserActionState, VoiceCallbacks, VoiceConfig, VoicePermissions, VoiceState, cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
4
+ import * as React from 'react';
5
+ import React__default from 'react';
6
6
  import { ClassValue } from 'clsx';
7
7
 
8
8
  type MessageRole = "user" | "assistant" | "system";
@@ -15,6 +15,8 @@ type StreamingStep = {
15
15
  status: "in_progress" | "completed" | "error" | "pending";
16
16
  timestamp: number;
17
17
  elapsedMs?: number;
18
+ thinkingText?: string;
19
+ isThinking?: boolean;
18
20
  };
19
21
  type ChunkDisplay = {
20
22
  id?: string;
@@ -43,6 +45,10 @@ type MessageDisplay = {
43
45
  currentExecutingStepId?: string;
44
46
  /** Result of user action (OTP approval/rejection) */
45
47
  userActionResult?: UserActionResult;
48
+ /** Current thinking block text (live, resets per block) */
49
+ activeThinkingText?: string;
50
+ /** All thinking accumulated across blocks (for post-stream display) */
51
+ allThinkingText?: string;
46
52
  };
47
53
  type SessionParams = {
48
54
  id?: string;
package/dist/index.js CHANGED
@@ -113,7 +113,7 @@ function ChatInput({
113
113
  {
114
114
  initial: false,
115
115
  className: cn(
116
- "flex items-center overflow-hidden",
116
+ "flex items-end overflow-hidden",
117
117
  "payman-chat-input"
118
118
  ),
119
119
  children: [
@@ -214,6 +214,46 @@ function ChatInput({
214
214
  }
215
215
  );
216
216
  }
217
+ function ThinkingBlock({ text }) {
218
+ const [isOpen, setIsOpen] = react.useState(false);
219
+ const hasContent = typeof text === "string" && text.trim().length > 0;
220
+ if (!hasContent) return null;
221
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 mb-1.5", children: [
222
+ /* @__PURE__ */ jsxRuntime.jsxs(
223
+ "button",
224
+ {
225
+ type: "button",
226
+ onClick: () => setIsOpen((prev) => !prev),
227
+ className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground/50 hover:text-muted-foreground/80 transition-colors",
228
+ "aria-expanded": isOpen,
229
+ "aria-label": isOpen ? "Collapse thought process" : "Expand thought process",
230
+ children: [
231
+ /* @__PURE__ */ jsxRuntime.jsx(
232
+ framerMotion.motion.div,
233
+ {
234
+ animate: { rotate: isOpen ? 180 : 0 },
235
+ transition: { duration: 0.15 },
236
+ className: "shrink-0",
237
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3" })
238
+ }
239
+ ),
240
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Thought process" })
241
+ ]
242
+ }
243
+ ),
244
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
245
+ framerMotion.motion.div,
246
+ {
247
+ initial: { height: 0, opacity: 0 },
248
+ animate: { height: "auto", opacity: 1 },
249
+ exit: { height: 0, opacity: 0 },
250
+ transition: { duration: 0.2, ease: "easeInOut" },
251
+ className: "overflow-hidden",
252
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 bg-muted/50 rounded-md p-2 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-xs text-muted-foreground/70 whitespace-pre-wrap leading-relaxed", children: text }) })
253
+ }
254
+ ) })
255
+ ] });
256
+ }
217
257
  var FRIENDLY_ERROR_MESSAGE = "Oops, something went wrong. Please try again.";
218
258
  function AgentMessage({
219
259
  message,
@@ -249,14 +289,17 @@ function AgentMessage({
249
289
  const currentMessage = message.currentMessage;
250
290
  const rawContent = message.streamingContent || message.content || "";
251
291
  const content = rawContent.replace(/\\n/g, "\n");
292
+ const activeThinkingText = message.activeThinkingText;
293
+ const allThinkingText = message.allThinkingText;
294
+ const currentStep = react.useMemo(
295
+ () => message.steps?.find(
296
+ (s) => s.id === currentExecutingStepId && s.status === "in_progress"
297
+ ),
298
+ [message.steps, currentExecutingStepId]
299
+ );
252
300
  const getStepsLabel = (streaming) => {
253
301
  const count = message.steps.length;
254
302
  const stepWord = count === 1 ? "step" : "steps";
255
- if (streaming) {
256
- if (streamingStepsText)
257
- return streamingStepsText.replace("{count}", count.toString());
258
- return `${count} ${stepWord} in progress`;
259
- }
260
303
  if (completedStepsText) {
261
304
  return completedStepsText.replace("{count}", count.toString()).replace("{time}", (totalElapsedMs / 1e3).toFixed(1));
262
305
  }
@@ -284,7 +327,7 @@ function AgentMessage({
284
327
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 payman-agent-step-icon--error" }) });
285
328
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full payman-agent-step-icon--pending-dim" }) });
286
329
  };
287
- const stepsListContent = hasSteps && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsx(
330
+ const stepsListContent = hasSteps && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
288
331
  framerMotion.motion.div,
289
332
  {
290
333
  initial: { height: 0, opacity: 0 },
@@ -292,34 +335,37 @@ function AgentMessage({
292
335
  exit: { height: 0, opacity: 0 },
293
336
  transition: { duration: 0.2, ease: "easeInOut" },
294
337
  className: "overflow-hidden",
295
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1.5", children: message.steps.map((step) => {
296
- const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
297
- const hasTime = step.elapsedMs != null && step.elapsedMs > 0;
298
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5", children: [
299
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-start", children: [
300
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-px", children: renderStepIcon(step, isCurrentlyExecuting) }),
301
- /* @__PURE__ */ jsxRuntime.jsx(
302
- "span",
303
- {
304
- className: cn(
305
- "text-xs leading-relaxed min-w-0 break-words",
306
- isCurrentlyExecuting && "shimmer-text font-medium",
307
- !isCurrentlyExecuting && step.status === "error" && "payman-agent-step-text--error",
308
- !isCurrentlyExecuting && step.eventType === "USER_ACTION_SUCCESS" && "payman-agent-step-text--success",
309
- !isCurrentlyExecuting && step.status === "completed" && "payman-agent-step-text--completed",
310
- !isCurrentlyExecuting && step.status === "pending" && "payman-agent-step-text--pending",
311
- !isCurrentlyExecuting && step.status === "in_progress" && "payman-agent-step-text--in-progress"
312
- ),
313
- children: step.message
314
- }
315
- )
316
- ] }),
317
- hasTime && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-[22px] mt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md payman-agent-step-time leading-none", children: [
318
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-2.5 w-2.5 payman-agent-step-time-icon shrink-0" }),
319
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono", children: formatElapsedTime(step.elapsedMs) })
320
- ] }) })
321
- ] }, step.id);
322
- }) })
338
+ children: [
339
+ !isStreaming && allThinkingText?.trim() && /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlock, { text: allThinkingText }),
340
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1.5", children: message.steps.map((step) => {
341
+ const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
342
+ const hasTime = step.elapsedMs != null && step.elapsedMs > 0;
343
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5", children: [
344
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-start", children: [
345
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-px", children: renderStepIcon(step, isCurrentlyExecuting) }),
346
+ /* @__PURE__ */ jsxRuntime.jsx(
347
+ "span",
348
+ {
349
+ className: cn(
350
+ "text-xs leading-relaxed min-w-0 break-words",
351
+ isCurrentlyExecuting && "shimmer-text font-medium",
352
+ !isCurrentlyExecuting && step.status === "error" && "text-destructive payman-agent-step-text--error",
353
+ !isCurrentlyExecuting && step.eventType === "USER_ACTION_SUCCESS" && "text-emerald-600 payman-agent-step-text--success",
354
+ !isCurrentlyExecuting && step.status === "completed" && "text-muted-foreground payman-agent-step-text--completed",
355
+ !isCurrentlyExecuting && step.status === "pending" && "text-muted-foreground/40 payman-agent-step-text--pending",
356
+ !isCurrentlyExecuting && step.status === "in_progress" && "text-muted-foreground/60 payman-agent-step-text--in-progress"
357
+ ),
358
+ children: step.message
359
+ }
360
+ )
361
+ ] }),
362
+ hasTime && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-[22px] mt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-muted border border-border/40 leading-none payman-agent-step-time", children: [
363
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-2.5 w-2.5 text-muted-foreground/60 shrink-0 payman-agent-step-time-icon" }),
364
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60", children: formatElapsedTime(step.elapsedMs) })
365
+ ] }) })
366
+ ] }, step.id);
367
+ }) })
368
+ ]
323
369
  }
324
370
  ) });
325
371
  const stepsToggleRef = react.useRef(null);
@@ -350,11 +396,11 @@ function AgentMessage({
350
396
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3" })
351
397
  }
352
398
  ),
353
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: getStepsLabel(streaming) })
399
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: getStepsLabel() })
354
400
  ]
355
401
  }
356
402
  );
357
- const showSteps = showExecutionSteps && hasSteps && !isStreaming && !isError || hasSteps && isStreaming;
403
+ const showSteps = showExecutionSteps && hasSteps && !isStreaming && !isError;
358
404
  const messageContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
359
405
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-start items-start w-full", children: [
360
406
  showAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: isStreaming && showStreamingDot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -413,7 +459,16 @@ function AgentMessage({
413
459
  )
414
460
  ),
415
461
  children: [
416
- showAgentName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold mb-1 payman-agent-name leading-none", children: agentName }),
462
+ showAgentName && /* @__PURE__ */ jsxRuntime.jsx(
463
+ "p",
464
+ {
465
+ className: cn(
466
+ "text-sm font-semibold mb-1 leading-none text-muted-foreground/70 payman-agent-name",
467
+ isStreaming && !content && "animate-pulse"
468
+ ),
469
+ children: isStreaming && !content ? "Thought Process" : agentName
470
+ }
471
+ ),
417
472
  /* @__PURE__ */ jsxRuntime.jsx(
418
473
  "div",
419
474
  {
@@ -421,10 +476,22 @@ function AgentMessage({
421
476
  "text-sm leading-relaxed min-w-0 w-full break-words overflow-wrap-anywhere",
422
477
  showAgentName && "mt-1"
423
478
  ),
424
- children: isStreaming && !content ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 w-full", children: [
425
- !showAvatar && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 payman-agent-thinking-spinner animate-spin shrink-0" }),
426
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm payman-agent-thinking-text min-w-0 break-words overflow-wrap-anywhere", children: currentMessage || "Thinking..." })
427
- ] }) : isCancelled && !content ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
479
+ children: isStreaming && !content ? (
480
+ // One active item at a time, by event order: thinking stream OR current step with loading (same bullet UI as dropdown)
481
+ activeThinkingText ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-start", children: [
482
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-px", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 text-primary animate-spin payman-agent-thinking-spinner" }) }) }),
483
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm leading-relaxed min-w-0 break-words text-muted-foreground whitespace-pre-wrap flex-1 payman-agent-thinking-text", children: [
484
+ activeThinkingText,
485
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-0.5 h-3.5 bg-muted-foreground/50 animate-pulse ml-0.5 align-text-bottom" })
486
+ ] })
487
+ ] }) : currentStep ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-start", children: [
488
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-px", children: renderStepIcon(currentStep, true) }),
489
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-relaxed min-w-0 break-words shimmer-text font-medium", children: currentStep.message })
490
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
491
+ !showAvatar && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 text-primary/70 animate-spin flex-shrink-0 payman-agent-thinking-spinner" }),
492
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap payman-agent-thinking-text", children: currentMessage || "Thinking..." })
493
+ ] })
494
+ ) : isCancelled && !content ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
428
495
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 payman-agent-cancelled-icon flex-shrink-0" }),
429
496
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm payman-agent-cancelled-text italic", children: currentMessage || "Request was stopped." })
430
497
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -473,8 +540,7 @@ function AgentMessage({
473
540
  )
474
541
  ] }),
475
542
  showSteps && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-1.5", showAvatar ? "ml-11" : "ml-0"), children: [
476
- hasSteps && isStreaming && stepsToggle(true),
477
- showExecutionSteps && hasSteps && !isStreaming && !isError && stepsToggle(false),
543
+ showExecutionSteps && hasSteps && !isStreaming && !isError && stepsToggle(),
478
544
  stepsListContent
479
545
  ] })
480
546
  ] });
@@ -1452,7 +1518,7 @@ function PaymanChat({
1452
1518
  "div",
1453
1519
  {
1454
1520
  className: cn(
1455
- "bg-card border border-border rounded-lg overflow-hidden flex flex-col flex-[4]",
1521
+ "bg-card overflow-hidden flex flex-col flex-[4]",
1456
1522
  className
1457
1523
  ),
1458
1524
  style,
@@ -1467,7 +1533,7 @@ function PaymanChat({
1467
1533
  "div",
1468
1534
  {
1469
1535
  className: cn(
1470
- "bg-card border border-border rounded-lg overflow-hidden flex flex-col flex-[4]",
1536
+ "bg-card overflow-hidden flex flex-col flex-[4]",
1471
1537
  className
1472
1538
  ),
1473
1539
  style,
@@ -1482,7 +1548,7 @@ function PaymanChat({
1482
1548
  "div",
1483
1549
  {
1484
1550
  className: cn(
1485
- "bg-card border border-border rounded-lg overflow-hidden flex flex-col flex-[4]",
1551
+ "bg-card overflow-hidden flex flex-col flex-[4]",
1486
1552
  className
1487
1553
  ),
1488
1554
  style,