@paymanai/payman-ask-sdk 1.0.0

package/dist/index.mjs

@@ -0,0 +1,798 @@
+import { createContext, useContext, useState, useMemo, useRef, useEffect } from 'react';
+import { useChat } from '@paymanai/payman-typescript-ask-sdk';
+export { generateId, streamWorkflowEvents, useChat } from '@paymanai/payman-typescript-ask-sdk';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Bot, Pause, Send, User, Loader2, X, ChevronUp, ChevronDown, XCircle, Check, Binoculars } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+var PaymanChatContext = createContext(void 0);
+function usePaymanChat() {
+  const context = useContext(PaymanChatContext);
+  if (!context) {
+    throw new Error("usePaymanChat must be used within a PaymanChat component");
+  }
+  return context;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/formatDate.ts
+function formatDate(timestamp) {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) {
+    return "Just now";
+  }
+  if (diffMins < 60) {
+    return `${diffMins}m ago`;
+  }
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+  if (diffDays < 7) {
+    return `${diffDays}d ago`;
+  }
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
+  });
+}
+function ChatInput({
+  value,
+  onChange,
+  onSend,
+  onPause,
+  disabled = false,
+  placeholder = "Type your message...",
+  isWaitingForResponse = false,
+  hasSelectedSession = true,
+  isSessionParamsConfigured = true,
+  onClick,
+  className
+}) {
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      const scrollHeight = textareaRef.current.scrollHeight;
+      const maxHeight = 200;
+      textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
+    }
+  }, [value]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+  const isInputDisabled = disabled || isWaitingForResponse;
+  const showPauseButton = isWaitingForResponse && onPause;
+  const getPlaceholder = () => {
+    if (!hasSelectedSession) {
+      return "Select a version to start chatting";
+    }
+    if (!isSessionParamsConfigured) {
+      return "Configure User ID and User Label in Session Params";
+    }
+    return placeholder;
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 p-4 w-full", className), style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full px-0", style: { maxWidth: "672px" }, children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: false,
+      className: "relative flex items-end overflow-hidden transition-colors bg-input border border-border shadow-sm",
+      style: { borderRadius: "24px" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            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",
+            style: {
+              minHeight: "48px",
+              maxHeight: "200px",
+              padding: "12px 48px 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" })
+          }
+        )
+      ]
+    }
+  ) }) }) });
+}
+function AgentMessage({
+  message,
+  animated = false,
+  showAgentName = false,
+  agentName = "Assistant",
+  showAvatar = false,
+  layout = "full-width",
+  showTimestamp = false,
+  showExecutionSteps = false,
+  showStreamingDot = false,
+  streamingStepsText,
+  completedStepsText,
+  onExecutionTraceClick
+}) {
+  const isStreaming = message.isStreaming ?? false;
+  const hasSteps = message.steps && message.steps.length > 0;
+  const hasTraceData = !!(message.tracingData || message.executionId) && !isStreaming;
+  const isError = message.isError ?? (message.streamProgress === "error" || !!message.errorDetails);
+  const isCancelled = message.isCancelled ?? false;
+  const currentExecutingStepId = message.currentExecutingStepId;
+  const [isStepsExpanded, setIsStepsExpanded] = useState(isStreaming && hasSteps);
+  useEffect(() => {
+    if (isStreaming && hasSteps) {
+      setIsStepsExpanded(true);
+    }
+  }, [isStreaming, hasSteps]);
+  const totalElapsedMs = hasSteps ? message.steps.reduce((sum, step) => sum + (step.elapsedMs || 0), 0) : 0;
+  const currentMessage = message.currentMessage;
+  const rawContent = message.streamingContent || message.content || "";
+  const content = rawContent.replace(/\\n/g, "\n");
+  const getStreamingStepsText = (expanded) => {
+    const defaultText = `${expanded ? "Hide" : "View"} progress ({count} ${message.steps.length === 1 ? "step" : "steps"})`;
+    const text = streamingStepsText || defaultText;
+    const prefix = expanded ? "Hide" : "View";
+    return text.replace("{count}", message.steps.length.toString()).replace(/^(View|Hide)/, prefix);
+  };
+  const getCompletedStepsText = (expanded) => {
+    if (completedStepsText) {
+      const result = completedStepsText.replace("{count}", message.steps.length.toString()).replace("{time}", (totalElapsedMs / 1e3).toFixed(1));
+      return result;
+    }
+    const prefix = expanded ? "Hide" : "View";
+    const stepWord = message.steps.length === 1 ? "step" : "steps";
+    return `${prefix} execution steps (${message.steps.length} ${stepWord})`;
+  };
+  const messageContent = /* @__PURE__ */ jsxs("div", { className: "flex gap-4 justify-start items-start w-full", children: [
+    showAvatar && /* @__PURE__ */ jsx("div", { className: "h-8 w-8 shrink-0 mt-0.5", children: isStreaming && showStreamingDot ? (
+      // Animated dot indicator while streaming
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-2 w-2 rounded-full bg-primary animate-ping opacity-75" })
+      ] }) })
+    ) : (
+      // Avatar after completion or if streaming dot is disabled
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4 text-muted-foreground" }) })
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "min-w-0 flex flex-col",
+      layout === "centered" ? "max-w-[85%]" : showAvatar ? "max-w-[85%]" : "max-w-[80%]"
+    ), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "overflow-hidden w-full",
+            layout === "centered" ? cn(
+              "bg-white border transition-all duration-200 p-3",
+              hasSteps ? "rounded-t-2xl rounded-tl-sm border-b-0" : "rounded-2xl rounded-tl-sm",
+              message.isStreaming ? "border-neutral-300 shadow-sm" : "border-neutral-200",
+              isError && "border-red-200"
+            ) : cn(
+              "p-3",
+              hasSteps && !isStreaming ? "rounded-t-md" : "rounded-md",
+              isError ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
+            )
+          ),
+          children: [
+            showAgentName && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold mb-1.5 opacity-60", children: agentName }),
+            /* @__PURE__ */ jsx("div", { className: cn("text-sm leading-relaxed", layout === "centered" ? "p-4" : "", showAgentName && "mt-1"), children: isStreaming && !content ? !showAvatar ? (
+              // Without avatars (yaak): show spinner
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 text-primary animate-spin flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
+                  "Thinking",
+                  /* @__PURE__ */ jsxs("span", { className: "ml-1 inline-flex", children: [
+                    /* @__PURE__ */ jsx("span", { className: "thinking-dot", children: "." }),
+                    /* @__PURE__ */ jsx("span", { className: "thinking-dot", children: "." }),
+                    /* @__PURE__ */ jsx("span", { className: "thinking-dot", children: "." })
+                  ] })
+                ] }) })
+              ] })
+            ) : (
+              // With avatars (paygent-central): no spinner in message (dot avatar handles it)
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
+                "Thinking",
+                /* @__PURE__ */ jsxs("span", { className: "ml-1 inline-flex", children: [
+                  /* @__PURE__ */ jsx("span", { className: "thinking-dot", children: "." }),
+                  /* @__PURE__ */ jsx("span", { className: "thinking-dot", children: "." }),
+                  /* @__PURE__ */ jsx("span", { className: "thinking-dot", children: "." })
+                ] })
+              ] }) })
+            ) : isCancelled && !content ? (
+              // Show cancelled state only when message is cancelled and has no content
+              !showAvatar ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || "The request was stopped." })
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || "The request was stopped." })
+            ) : /* @__PURE__ */ jsx("div", { className: cn(
+              "prose prose-sm dark:prose-invert max-w-none",
+              isError && "text-destructive"
+            ), children: /* @__PURE__ */ jsx(
+              ReactMarkdown,
+              {
+                remarkPlugins: [remarkGfm],
+                components: {
+                  p: ({ children }) => /* @__PURE__ */ jsx("p", { className: cn("mb-3 last:mb-0 text-sm leading-relaxed", isError ? "text-destructive" : "text-foreground"), children }),
+                  code: ({ className: codeClassName, children }) => {
+                    const isInline = !codeClassName;
+                    return isInline ? /* @__PURE__ */ jsx("code", { className: cn("px-1.5 py-0.5 rounded text-xs font-mono break-all", isError ? "bg-destructive/10 text-destructive" : "bg-muted"), children }) : /* @__PURE__ */ jsx("code", { className: cn("block p-3 rounded text-xs font-mono overflow-x-auto my-2 whitespace-pre", isError ? "bg-destructive/10 text-destructive" : "bg-muted"), children });
+                  },
+                  pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: cn("my-2 overflow-x-auto max-w-full", isError && "bg-destructive/10"), children }),
+                  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: cn("list-disc ml-4 mb-3 space-y-1 text-sm", isError && "text-destructive"), children }),
+                  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: cn("list-decimal ml-4 mb-3 space-y-1 text-sm", isError && "text-destructive"), children }),
+                  li: ({ children }) => /* @__PURE__ */ jsx("li", { className: cn("text-sm leading-relaxed", isError ? "text-destructive" : "text-foreground"), children }),
+                  h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: cn("text-lg font-semibold mb-2 mt-4 first:mt-0", isError ? "text-destructive" : "text-foreground"), children }),
+                  h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: cn("text-base font-semibold mb-2 mt-3 first:mt-0", isError ? "text-destructive" : "text-foreground"), children }),
+                  h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-semibold mb-1 mt-2 first:mt-0", isError ? "text-destructive" : "text-foreground"), children }),
+                  strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: cn("font-semibold", isError ? "text-destructive" : "text-foreground"), children }),
+                  em: ({ children }) => /* @__PURE__ */ jsx("em", { className: cn("italic", isError ? "text-destructive" : "text-foreground"), children }),
+                  blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "border-l-4 border-border pl-4 my-2 italic text-muted-foreground", children }),
+                  hr: () => /* @__PURE__ */ jsx("hr", { className: "my-4 border-border" }),
+                  a: ({ href, children }) => /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: cn("underline underline-offset-2", isError ? "text-destructive hover:text-destructive/80" : "text-primary hover:text-primary/80"),
+                      children
+                    }
+                  ),
+                  table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-x-auto my-4 -mx-1", children: /* @__PURE__ */ jsx("table", { className: "min-w-full caption-bottom text-sm border border-border rounded-md", children }) }),
+                  thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b bg-muted/50", children }),
+                  tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", children }),
+                  tr: ({ children }) => /* @__PURE__ */ jsx("tr", { className: "hover:bg-muted/50 border-b transition-colors", children }),
+                  th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap", children }),
+                  td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "p-2 align-middle text-foreground", children })
+                },
+                children: content || (isStreaming ? "Thinking..." : isCancelled ? "The request was stopped." : isError ? "Oops, something went wrong. Please try again." : "")
+              }
+            ) }) })
+          ]
+        }
+      ),
+      showExecutionSteps && hasSteps && !isStreaming && !isError && /* @__PURE__ */ jsxs("div", { className: cn(
+        "overflow-hidden",
+        layout === "centered" ? "bg-white border border-t-0 border-neutral-200 rounded-b-2xl" : "bg-muted border-t border-border/30 rounded-b-md"
+      ), children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsStepsExpanded(!isStepsExpanded),
+            className: cn(
+              "w-full px-4 py-2 flex items-center justify-between text-xs transition-colors",
+              layout === "centered" ? "text-neutral-500 hover:bg-neutral-50" : "text-muted-foreground hover:bg-muted/70"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: getCompletedStepsText(isStepsExpanded) }),
+              isStepsExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+            ]
+          }
+        ),
+        isStepsExpanded && /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "px-4 pb-3 pt-2 space-y-2 bg-background/30",
+            children: message.steps.map((step) => {
+              const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
+              return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+                isCurrentlyExecuting && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
+                step.status === "pending" && isCancelled && /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-muted-foreground shrink-0 mt-0.5" }),
+                step.status === "pending" && !isCancelled && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
+                step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
+                step.status === "completed" && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary shrink-0 mt-0.5" }),
+                step.status === "error" && /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-destructive shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-muted-foreground break-words",
+                        step.status === "error" && "text-destructive"
+                      ),
+                      children: step.message
+                    }
+                  ),
+                  step.elapsedMs && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[10px] opacity-50", children: [
+                    "(",
+                    (step.elapsedMs / 1e3).toFixed(1),
+                    "s)"
+                  ] })
+                ] })
+              ] }, step.id);
+            })
+          }
+        ) })
+      ] }),
+      hasSteps && isStreaming && /* @__PURE__ */ jsxs("div", { className: cn(
+        "overflow-hidden",
+        layout === "centered" ? "bg-white border border-t-0 border-neutral-300 rounded-b-2xl" : "bg-muted border-t border-border/30 rounded-b-md"
+      ), children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsStepsExpanded(!isStepsExpanded),
+            className: cn(
+              "w-full px-4 py-2 flex items-center justify-between text-xs transition-colors",
+              layout === "centered" ? "text-neutral-500 hover:bg-neutral-50" : "text-muted-foreground hover:bg-muted/70"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: getStreamingStepsText(isStepsExpanded) }),
+              isStepsExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+            ]
+          }
+        ),
+        isStepsExpanded && /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "px-4 pb-3 pt-2 space-y-2 bg-background/30",
+            children: message.steps.map((step) => {
+              const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
+              return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+                isCurrentlyExecuting && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
+                step.status === "pending" && isCancelled && /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-muted-foreground shrink-0 mt-0.5" }),
+                step.status === "pending" && !isCancelled && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
+                step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
+                step.status === "completed" && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary shrink-0 mt-0.5" }),
+                step.status === "error" && /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-destructive shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-muted-foreground break-words",
+                        step.status === "error" && "text-destructive"
+                      ),
+                      children: step.message
+                    }
+                  ),
+                  step.elapsedMs && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[10px] opacity-50", children: [
+                    "(",
+                    (step.elapsedMs / 1e3).toFixed(1),
+                    "s)"
+                  ] })
+                ] })
+              ] }, step.id);
+            })
+          }
+        ) })
+      ] })
+    ] }),
+    hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onExecutionTraceClick({
+          message,
+          tracingData: message.tracingData,
+          executionId: message.executionId
+        }),
+        className: "mt-0.5 p-2 bg-white/5 border border-white/20 rounded-lg shadow-sm hover:bg-white/10 hover:border-highlight transition-colors duration-200 flex-shrink-0",
+        title: "View execution trace",
+        "aria-label": "View execution trace",
+        children: /* @__PURE__ */ jsx(Binoculars, { className: "w-4 h-4 text-foreground" })
+      }
+    )
+  ] });
+  if (animated) {
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.2 },
+        children: messageContent
+      }
+    );
+  }
+  return messageContent;
+}
+function UserMessage({ message, animated = false, showAvatar = false }) {
+  const content = /* @__PURE__ */ jsxs("div", { className: "flex gap-4 justify-end w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-[85%] min-w-0 flex flex-col items-end", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg p-3 bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap break-words", children: message.content }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] mt-1 text-muted-foreground", children: formatDate(message.timestamp) })
+    ] }),
+    showAvatar && /* @__PURE__ */ jsx("div", { className: "h-8 w-8 shrink-0 mt-0.5", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-primary" }) }) })
+  ] });
+  if (animated) {
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        children: content
+      }
+    );
+  }
+  return content;
+}
+function MessageRow({
+  message,
+  stage = "DEV",
+  animated = false,
+  showAgentName = false,
+  agentName = "Paygent",
+  showAvatars = false,
+  showUserAvatar,
+  showAssistantAvatar,
+  layout = "full-width",
+  showTimestamps = false,
+  showExecutionSteps = false,
+  showStreamingDot = false,
+  streamingStepsText,
+  completedStepsText,
+  onExecutionTraceClick
+}) {
+  const actualShowUserAvatar = showUserAvatar !== void 0 ? showUserAvatar : showAvatars;
+  const actualShowAssistantAvatar = showAssistantAvatar !== void 0 ? showAssistantAvatar : showAvatars;
+  if (message.role === "user") {
+    return /* @__PURE__ */ jsx(UserMessage, { message, animated, showAvatar: actualShowUserAvatar });
+  }
+  return /* @__PURE__ */ jsx(
+    AgentMessage,
+    {
+      message,
+      stage,
+      animated,
+      showAgentName,
+      agentName,
+      showAvatar: actualShowAssistantAvatar,
+      layout,
+      showTimestamp: showTimestamps,
+      showExecutionSteps,
+      showStreamingDot,
+      streamingStepsText,
+      completedStepsText,
+      onExecutionTraceClick
+    }
+  );
+}
+function MessageRowSkeleton({
+  isRightAligned = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex ${isRightAligned ? "justify-end" : "justify-start"} animate-pulse`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-col ${isRightAligned ? "items-end" : "items-start"} w-full max-w-[80%]`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `rounded-lg p-3 ${isRightAligned ? "bg-primary/20" : "bg-muted"} w-full`,
+                children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted-foreground/20 rounded w-3/4" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted-foreground/20 rounded w-full" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted-foreground/20 rounded w-5/6" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "h-2 bg-muted-foreground/20 rounded w-16 mt-1" })
+          ]
+        }
+      )
+    }
+  );
+}
+function MessageList({
+  messages,
+  isLoading = false,
+  emptyStateText = "What can I help with?",
+  showEmptyStateIcon = true,
+  layout = "full-width",
+  showTimestamps = false,
+  stage = "DEV",
+  animated = false,
+  showAgentName = false,
+  agentName = "Paygent",
+  showAvatars = false,
+  showUserAvatar,
+  showAssistantAvatar,
+  showExecutionSteps = false,
+  showStreamingDot = false,
+  streamingStepsText,
+  completedStepsText,
+  onExecutionTraceClick,
+  className
+}) {
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto min-h-0", className), children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-4", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(
+      MessageRowSkeleton,
+      {
+        isRightAligned: index % 3 === 0
+      },
+      `skeleton-${index}`
+    )) }) });
+  }
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex-1 overflow-y-auto min-h-0 flex flex-col items-center justify-center h-full text-center p-4",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: {
+              duration: 0.5,
+              ease: "easeOut"
+            },
+            className: "flex flex-col items-center gap-4",
+            children: [
+              showEmptyStateIcon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center", children: /* @__PURE__ */ jsx(Bot, { className: "h-6 w-6 text-muted-foreground" }) }),
+              emptyStateText.split("\n").map((line, index) => /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    index === 0 ? layout === "centered" ? "text-2xl font-semibold text-primary" : "text-2xl font-semibold text-foreground" : "text-sm text-muted-foreground"
+                  ),
+                  children: line
+                },
+                index
+              ))
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto min-h-0", className), children: /* @__PURE__ */ jsxs("div", { className: cn(
+    "space-y-4",
+    layout === "centered" ? "max-w-2xl mx-auto px-4 py-6" : "p-4"
+  ), children: [
+    messages.map((message) => /* @__PURE__ */ jsx(
+      MessageRow,
+      {
+        message,
+        stage,
+        animated,
+        showAgentName,
+        agentName,
+        showAvatars,
+        showUserAvatar,
+        showAssistantAvatar,
+        layout,
+        showTimestamps,
+        showExecutionSteps,
+        showStreamingDot,
+        streamingStepsText,
+        completedStepsText,
+        onExecutionTraceClick
+      },
+      message.id
+    )),
+    /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+  ] }) });
+}
+function PaymanChat({
+  config,
+  callbacks = {},
+  className,
+  style,
+  children
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const {
+    messages,
+    sendMessage,
+    isWaitingForResponse,
+    resetSession,
+    clearMessages,
+    cancelStream,
+    getSessionId,
+    getMessages
+  } = useChat(config, callbacks);
+  const contextValue = useMemo(
+    () => ({
+      resetSession,
+      clearMessages,
+      cancelStream,
+      getSessionId,
+      getMessages,
+      isWaitingForResponse
+    }),
+    [
+      resetSession,
+      clearMessages,
+      cancelStream,
+      getSessionId,
+      getMessages,
+      isWaitingForResponse
+    ]
+  );
+  const { onExecutionTraceClick } = callbacks;
+  const {
+    placeholder = "Type your message...",
+    emptyStateText = "What can I help with?",
+    sessionParams,
+    disableInput = false,
+    hasAskPermission = true,
+    streamingStepsText,
+    completedStepsText,
+    showAvatars = false,
+    showUserAvatar,
+    showAssistantAvatar,
+    showAgentName = true,
+    agentName = "Assistant",
+    showExecutionSteps = true,
+    showStreamingDot = true,
+    layout = "full-width",
+    showTimestamps = false,
+    animated = true,
+    isChatDisabled = false,
+    disabledComponent,
+    showEmptyStateIcon = true
+  } = config;
+  const isSessionParamsConfigured = useMemo(() => {
+    if (!sessionParams) return false;
+    return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
+  }, [sessionParams?.id, sessionParams?.name]);
+  const handleSend = () => {
+    if (inputValue.trim() && !disableInput && isSessionParamsConfigured) {
+      sendMessage(inputValue.trim());
+      setInputValue("");
+    }
+  };
+  const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
+  if (isChatDisabled) {
+    if (disabledComponent) {
+      return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "bg-card border border-border rounded-lg overflow-hidden flex flex-col flex-[4]",
+            className
+          ),
+          style,
+          children: [
+            children,
+            disabledComponent
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-card border border-border rounded-lg overflow-hidden flex flex-col flex-[4]",
+          className
+        ),
+        style,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: "Chat is currently disabled" }) }) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-card border border-border rounded-lg overflow-hidden flex flex-col flex-[4]",
+        className
+      ),
+      style,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          MessageList,
+          {
+            messages,
+            isLoading: false,
+            emptyStateText,
+            showEmptyStateIcon,
+            layout,
+            showTimestamps,
+            stage: config.stage || "DEV",
+            animated,
+            showAgentName,
+            agentName,
+            showAvatars,
+            showUserAvatar,
+            showAssistantAvatar,
+            showExecutionSteps,
+            showStreamingDot,
+            streamingStepsText,
+            completedStepsText,
+            onExecutionTraceClick
+          }
+        ),
+        hasAskPermission && /* @__PURE__ */ jsx(
+          ChatInput,
+          {
+            value: inputValue,
+            onChange: setInputValue,
+            onSend: handleSend,
+            onPause: cancelStream,
+            disabled: isInputDisabled,
+            placeholder,
+            isWaitingForResponse,
+            hasSelectedSession: true,
+            isSessionParamsConfigured
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { PaymanChat, PaymanChatContext, cn, formatDate, usePaymanChat };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map