@paymanai/payman-ask-sdk 4.0.6 → 4.0.8

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { createContext, forwardRef, useRef, useState, useCallback, useImperative
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as Sentry from '@sentry/react';
-import { ArrowDown, Pencil, X, RotateCcw, Telescope, Zap, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, ThumbsUp, ThumbsDown, Binoculars, ShieldCheck, Download, Loader2, User, Clock, Sparkles, ImageOff, Eye, ChevronDown, ChevronRight } from 'lucide-react';
+import { ArrowDown, Pencil, X, RotateCcw, Telescope, Zap, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, ThumbsUp, ThumbsDown, Binoculars, ShieldCheck, Download, Loader2, ChevronDown, User, Clock, Sparkles, ImageOff, Eye, ChevronRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { createPortal } from 'react-dom';
@@ -232,28 +232,38 @@ var NEGATIVE_FEEDBACK_REASONS = [
   { value: "REPORT_CONTENT", label: "Report content" },
   { value: "OTHER", label: "Other" }
 ];
-async function submitAskFeedback({
+var DEFAULT_STREAM_ENDPOINT = "/api/playground/ask/stream";
+async function submitFeedback({
   baseUrl,
+  streamEndpoint,
   headers,
+  authToken,
+  stage,
+  stageQueryParam,
   executionId,
   feedback,
   details,
   signal
 }) {
   const base = baseUrl.replace(/\/+$/, "");
-  const resp = await fetch(
-    `${base}/api/ask/executions/${encodeURIComponent(executionId)}/feedback`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        ...headers ?? {}
-      },
-      body: JSON.stringify(details ? { feedback, details } : { feedback }),
-      signal
-    }
-  );
+  const endpointPath = (streamEndpoint || DEFAULT_STREAM_ENDPOINT).split("?")[0].replace(/\/+$/, "");
+  const basePath = endpointPath.endsWith("/stream") ? endpointPath.slice(0, -"/stream".length) : endpointPath;
+  const query = new URLSearchParams();
+  if (stage) query.set(stageQueryParam ?? "stage", stage);
+  const qs = query.toString() ? `?${query.toString()}` : "";
+  const url = `${base}${basePath}/executions/${encodeURIComponent(executionId)}/feedback${qs}`;
+  const requestHeaders = {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+    ...headers ?? {}
+  };
+  if (authToken) requestHeaders.Authorization = `Bearer ${authToken}`;
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: requestHeaders,
+    body: JSON.stringify(details ? { feedback, details } : { feedback }),
+    signal
+  });
   if (!resp.ok) {
     throw new Error(`Feedback failed: ${resp.status} ${resp.statusText}`);
   }
@@ -1732,19 +1742,26 @@ function FeedbackReasonModal({
   const [details, setDetails] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState(null);
+  const [reasonOpen, setReasonOpen] = useState(false);
   useEffect(() => {
     if (open) {
       setReason(NEGATIVE_FEEDBACK_REASONS[0].value);
       setDetails("");
       setError(null);
       setSubmitting(false);
+      setReasonOpen(false);
     }
   }, [open]);
   const handleKeyDown = useCallback(
     (event) => {
-      if (event.key === "Escape") onClose();
+      if (event.key !== "Escape") return;
+      if (reasonOpen) {
+        setReasonOpen(false);
+        return;
+      }
+      onClose();
     },
-    [onClose]
+    [onClose, reasonOpen]
   );
   useEffect(() => {
     if (!open || typeof document === "undefined") return;
@@ -1759,6 +1776,7 @@ function FeedbackReasonModal({
   const handleSubmit = async () => {
     setSubmitting(true);
     setError(null);
+    setReasonOpen(false);
     try {
       await onSubmit(reason, details.trim() ? details.trim() : void 0);
       onClose();
@@ -1767,6 +1785,7 @@ function FeedbackReasonModal({
       setSubmitting(false);
     }
   };
+  const selectedReason = NEGATIVE_FEEDBACK_REASONS.find((item) => item.value === reason) ?? NEGATIVE_FEEDBACK_REASONS[0];
   return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -1790,6 +1809,17 @@ function FeedbackReasonModal({
           "aria-modal": "true",
           "aria-labelledby": "payman-v2-feedback-title",
           children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                disabled: submitting,
+                className: "payman-v2-feedback-modal-close",
+                "aria-label": "Close feedback modal",
+                children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2 })
+              }
+            ),
             /* @__PURE__ */ jsx(
               "h2",
               {
@@ -1806,15 +1836,73 @@ function FeedbackReasonModal({
                 children: "What was the issue?"
               }
             ),
-            /* @__PURE__ */ jsx(
-              "select",
+            /* @__PURE__ */ jsxs(
+              "div",
               {
                 id: "payman-v2-feedback-reason",
-                className: "payman-v2-feedback-modal-select",
-                value: reason,
-                onChange: (e) => setReason(e.target.value),
-                disabled: submitting,
-                children: NEGATIVE_FEEDBACK_REASONS.map((r) => /* @__PURE__ */ jsx("option", { value: r.value, children: r.label }, r.value))
+                className: "payman-v2-feedback-modal-reason",
+                onBlur: (event) => {
+                  const nextTarget = event.relatedTarget;
+                  if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
+                    setReasonOpen(false);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "payman-v2-feedback-modal-reason-trigger",
+                      "aria-haspopup": "listbox",
+                      "aria-expanded": reasonOpen,
+                      "aria-controls": "payman-v2-feedback-reason-options",
+                      disabled: submitting,
+                      onClick: () => setReasonOpen((current) => !current),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: selectedReason.label }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            size: 17,
+                            strokeWidth: 2,
+                            className: reasonOpen ? "payman-v2-feedback-modal-reason-chevron payman-v2-feedback-modal-reason-chevron-open" : "payman-v2-feedback-modal-reason-chevron"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  reasonOpen ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: "payman-v2-feedback-reason-options",
+                      className: "payman-v2-feedback-modal-reason-menu",
+                      role: "listbox",
+                      "aria-label": "Feedback issue",
+                      tabIndex: -1,
+                      children: NEGATIVE_FEEDBACK_REASONS.map((item) => {
+                        const isSelected = item.value === reason;
+                        return /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: isSelected ? "payman-v2-feedback-modal-reason-option payman-v2-feedback-modal-reason-option-selected" : "payman-v2-feedback-modal-reason-option",
+                            role: "option",
+                            "aria-selected": isSelected,
+                            onClick: () => {
+                              setReason(item.value);
+                              setReasonOpen(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: item.label }),
+                              isSelected ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2 }) : null
+                            ]
+                          },
+                          item.value
+                        );
+                      })
+                    }
+                  ) : null
+                ]
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1988,34 +2076,6 @@ function AssistantMessageV2({
     void 0,
     typingSpeed
   );
-  const elapsedMs = (() => {
-    const fromServer = message.totalElapsedMs;
-    if (typeof fromServer === "number" && Number.isFinite(fromServer) && fromServer > 0) {
-      return fromServer;
-    }
-    const steps = message.steps;
-    if (!steps || steps.length === 0) return void 0;
-    let earliest = Number.POSITIVE_INFINITY;
-    let latest = Number.NEGATIVE_INFINITY;
-    for (const s of steps) {
-      if (!s.timestamp) continue;
-      if (s.timestamp < earliest) earliest = s.timestamp;
-      const end = s.timestamp + (s.elapsedMs ?? 0);
-      if (end > latest) latest = end;
-    }
-    if (!Number.isFinite(earliest) || !Number.isFinite(latest)) {
-      const total = steps.reduce((sum, s) => sum + (s.elapsedMs || 0), 0);
-      return total > 0 ? total : void 0;
-    }
-    const diff = latest - earliest;
-    return diff > 0 ? diff : void 0;
-  })();
-  function formatElapsed(ms) {
-    if (ms === void 0) return void 0;
-    if (ms < 1e3) return `${Math.round(ms)}ms`;
-    return `${(ms / 1e3).toFixed(1)}s`;
-  }
-  const totalElapsedLabel = formatElapsed(elapsedMs);
   const stickyLabel = (() => {
     const steps = message.steps;
     if (!steps || steps.length === 0) return void 0;
@@ -2230,8 +2290,7 @@ function AssistantMessageV2({
             "aria-label": "Trace response",
             children: /* @__PURE__ */ jsx(Binoculars, { style: { width: 16, height: 16 } })
           }
-        ) }),
-        totalElapsedLabel && /* @__PURE__ */ jsx("span", { className: "payman-v2-assistant-msg-elapsed", children: totalElapsedLabel })
+        ) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -3950,9 +4009,13 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
       if (!executionId) {
         throw new Error("Cannot submit feedback before the response completes");
       }
-      await submitAskFeedback({
+      await submitFeedback({
         baseUrl: config.api.baseUrl,
+        streamEndpoint: config.api.streamEndpoint,
         headers: config.api.headers,
+        authToken: config.api.authToken,
+        stage: config.stage,
+        stageQueryParam: config.stageQueryParam,
         executionId,
         feedback,
         details
@@ -3962,7 +4025,15 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
         feedback: feedback === "POSITIVE" ? "up" : "down"
       });
     },
-    [config.api.baseUrl, config.api.headers, onMessageFeedback]
+    [
+      config.api.baseUrl,
+      config.api.streamEndpoint,
+      config.api.headers,
+      config.api.authToken,
+      config.stage,
+      config.stageQueryParam,
+      onMessageFeedback
+    ]
   );
   const onExecutionTraceClick = useMemo(() => {
     if (!config.debug) return rawOnExecutionTraceClick;