@paymanai/payman-ask-sdk 4.0.0 → 4.0.2

package/dist/index.mjs

@@ -123,6 +123,36 @@ function subscribeToCfRay(urlPattern, listener) {
   };
 }
 
+// src/utils/slashCommands.ts
+var DEFAULT_SLASH_COMMANDS = [
+  {
+    name: "/draft-knowledge",
+    description: "Create a Knowledge Vault draft for admin review",
+    requiredAnyPermissions: ["vault:author", "vault:publish"]
+  }
+];
+function filterSlashCommands(commands, permissions) {
+  const granted = new Set(permissions ?? []);
+  return commands.filter((command) => {
+    const required = command.requiredAnyPermissions ?? [];
+    return required.length === 0 || required.some((permission) => granted.has(permission));
+  });
+}
+function parseSlashCommand(content) {
+  const trimmedStart = content.trimStart();
+  if (!trimmedStart.startsWith("/")) return null;
+  const match = trimmedStart.match(/^(\/[a-z][a-z0-9-]*)(?:\s+([\s\S]*))?$/i);
+  if (!match) return null;
+  return {
+    command: match[1],
+    body: match[2] ?? ""
+  };
+}
+function slashCommandBodyIsEmpty(content) {
+  const parsed = parseSlashCommand(content);
+  return parsed?.command === "/draft-knowledge" && parsed.body.trim().length === 0;
+}
+
 // src/utils/errorMessages.ts
 var WORKFLOW_FAILED = "WORKFLOW_FAILED";
 var STREAM_NOT_STARTED = "STREAM_NOT_STARTED";
@@ -763,6 +793,7 @@ function UserMessage({
   animated = false,
   showAvatar = false
 }) {
+  const parsedCommand = parseSlashCommand(message.content);
   const content = /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "max-w-[80%] min-w-0 flex flex-col items-end", children: [
       /* @__PURE__ */ jsx(
@@ -773,7 +804,10 @@ function UserMessage({
             "bg-primary text-primary-foreground",
             "shadow-sm"
           ),
-          children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap break-words", children: message.content })
+          children: parsedCommand ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-md bg-black/15 px-2 py-0.5 font-mono text-xs", children: parsedCommand.command }),
+            parsedCommand.body.trim() ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap break-words", children: parsedCommand.body }) : null
+          ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap break-words", children: message.content })
         }
       ),
       /* @__PURE__ */ jsx("span", { className: "text-[10px] mt-1.5 mr-1 text-muted-foreground/70 select-none", children: formatDate(message.timestamp) })
@@ -914,7 +948,7 @@ function MessageList({
   messages,
   isLoading = false,
   emptyStateText = "What can I help with?",
-  showEmptyStateIcon = true,
+  showEmptyStateIcon: _showEmptyStateIcon = true,
   emptyStateComponent,
   layout = "full-width",
   showTimestamps = false,
@@ -1289,6 +1323,7 @@ function UserMessageV2({
     }
   };
   const timestamp = formatMessageTime(message.timestamp);
+  const parsedCommand = parseSlashCommand(message.content);
   const hasVisibleActions = showCopyAction || showEditAction && !!onEdit || showRetryAction && !!onRetry;
   const toastPortal = typeof document !== "undefined" ? createPortal(
     /* @__PURE__ */ jsx(AnimatePresence, { children: toast && /* @__PURE__ */ jsx(
@@ -1333,7 +1368,10 @@ function UserMessageV2({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     toastPortal,
     /* @__PURE__ */ jsx("div", { className: "payman-v2-user-msg payman-v2-fade-in", children: /* @__PURE__ */ jsxs("div", { className: "payman-v2-user-msg-group", children: [
-      /* @__PURE__ */ jsx("div", { className: "payman-v2-user-msg-bubble", children: /* @__PURE__ */ jsx("p", { className: "payman-v2-user-msg-text", children: message.content }) }),
+      /* @__PURE__ */ jsx("div", { className: "payman-v2-user-msg-bubble", children: parsedCommand ? /* @__PURE__ */ jsxs("div", { className: "payman-v2-user-msg-command", children: [
+        /* @__PURE__ */ jsx("span", { className: "payman-v2-user-msg-command-chip", children: parsedCommand.command }),
+        parsedCommand.body.trim() ? /* @__PURE__ */ jsx("p", { className: "payman-v2-user-msg-text", children: parsedCommand.body }) : null
+      ] }) : /* @__PURE__ */ jsx("p", { className: "payman-v2-user-msg-text", children: message.content }) }),
       message.isError && message.errorDetails && (() => {
         const resolvedError = getConflictErrorMessage(message.errorDetails) ?? message.errorDetails;
         return /* @__PURE__ */ jsxs("div", { className: "payman-v2-user-msg-error", children: [
@@ -2471,7 +2509,6 @@ var MessageListV2 = forwardRef(
 var ChatInputV2 = forwardRef(
   function ChatInputV22({
     onSend,
-    onCancel,
     disabled = false,
     isStreaming = false,
     placeholder = "Reply...",
@@ -2490,12 +2527,16 @@ var ChatInputV2 = forwardRef(
     editingMessageId = null,
     onClearEditing,
     analysisMode,
-    onAnalysisModeChange
+    onAnalysisModeChange,
+    slashCommands = []
   }, ref) {
     const [value, setValue] = useState("");
     const [isFocused, setIsFocused] = useState(false);
     const [showActions, setShowActions] = useState(false);
     const [showVoiceTooltip, setShowVoiceTooltip] = useState(false);
+    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
+    const [inlineHint, setInlineHint] = useState(null);
+    const [commandMenuDismissed, setCommandMenuDismissed] = useState(false);
     const textareaRef = useRef(null);
     const actionsRef = useRef(null);
     const preRecordTextRef = useRef("");
@@ -2508,6 +2549,11 @@ var ChatInputV2 = forwardRef(
     const showAttachmentMenuButton = showAttachmentButton && hasAttachmentOptions;
     const showVoiceButton = enableVoice && onVoicePress != null;
     const isVoiceButtonDisabled = disabled || !voiceAvailable;
+    const commandQuery = value.startsWith("/") && !value.includes("\n") && !/\s/.test(value) ? value.toLowerCase() : null;
+    const commandSuggestions = commandQuery == null ? [] : slashCommands.filter(
+      (command) => command.name.toLowerCase().startsWith(commandQuery)
+    );
+    const showCommandSuggestions = !commandMenuDismissed && !isRecording && !disabled && commandSuggestions.length > 0;
     useEffect(() => {
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
@@ -2557,6 +2603,10 @@ var ChatInputV2 = forwardRef(
         setShowActions(false);
       }
     }, [showAttachmentMenuButton]);
+    useEffect(() => {
+      setSelectedCommandIndex(0);
+      setCommandMenuDismissed(false);
+    }, [commandQuery]);
     useEffect(() => {
       return () => {
         if (voiceTooltipTimerRef.current) {
@@ -2572,8 +2622,13 @@ var ChatInputV2 = forwardRef(
     }, [isRecording, transcribedText]);
     const handleSend = useCallback(() => {
       if (!value.trim() || disabled) return;
+      if (slashCommandBodyIsEmpty(value)) {
+        setInlineHint("Add markdown content below the command line.");
+        return;
+      }
       voiceDraftSyncActiveRef.current = false;
       preRecordTextRef.current = "";
+      setInlineHint(null);
       onClearEditing?.();
       onSend(value.trim());
       setValue("");
@@ -2584,7 +2639,48 @@ var ChatInputV2 = forwardRef(
         }
       });
     }, [value, disabled, onClearEditing, onSend]);
+    const selectCommand = useCallback(
+      (command) => {
+        const insertText = command.insertText ?? `${command.name} `;
+        setValue(insertText);
+        setInlineHint(null);
+        setShowActions(false);
+        requestAnimationFrame(() => {
+          const textarea = textareaRef.current;
+          if (!textarea) return;
+          textarea.focus();
+          textarea.setSelectionRange(insertText.length, insertText.length);
+        });
+      },
+      []
+    );
     const handleKeyDown = (e) => {
+      if (showCommandSuggestions) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setSelectedCommandIndex(
+            (current) => Math.min(current + 1, commandSuggestions.length - 1)
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setSelectedCommandIndex((current) => Math.max(current - 1, 0));
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          e.preventDefault();
+          const command = commandSuggestions[selectedCommandIndex];
+          if (command) selectCommand(command);
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setSelectedCommandIndex(0);
+          setCommandMenuDismissed(true);
+          return;
+        }
+      }
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         if (isStreaming) return;
@@ -2629,6 +2725,35 @@ var ChatInputV2 = forwardRef(
     const canSend = value.trim().length > 0 && !disabled;
     const sendDisabled = !canSend || isStreaming;
     return /* @__PURE__ */ jsxs("div", { className: "payman-v2-input-container", children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { children: showCommandSuggestions && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 6, scale: 0.98 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: 6, scale: 0.98 },
+          transition: { duration: 0.12 },
+          className: "payman-v2-command-menu",
+          children: commandSuggestions.map((command, index) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (event) => {
+                event.preventDefault();
+                selectCommand(command);
+              },
+              className: cn(
+                "payman-v2-command-option",
+                index === selectedCommandIndex && "payman-v2-command-option-active"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "payman-v2-command-name", children: command.name }),
+                /* @__PURE__ */ jsx("span", { className: "payman-v2-command-description", children: command.description })
+              ]
+            },
+            command.name
+          ))
+        }
+      ) }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -2673,6 +2798,8 @@ var ChatInputV2 = forwardRef(
                     if (isRecording) return;
                     const nextValue = e.target.value;
                     voiceDraftSyncActiveRef.current = false;
+                    setInlineHint(null);
+                    setCommandMenuDismissed(false);
                     setValue(nextValue);
                     if (editingMessageId && nextValue.length === 0) {
                       onClearEditing?.();
@@ -2887,6 +3014,7 @@ var ChatInputV2 = forwardRef(
           ]
         }
       ),
+      inlineHint && /* @__PURE__ */ jsx("p", { className: "payman-v2-input-inline-hint", children: inlineHint }),
       /* @__PURE__ */ jsx("p", { className: "payman-v2-input-disclaimer", children: "AI can make mistakes. Please double-check responses." })
     ] });
   }
@@ -3353,7 +3481,10 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
     showAttachmentButton = true,
     showUploadImageButton = true,
     showAttachFileButton = true,
-    messageActions: messageActionsConfig
+    messageActions: messageActionsConfig,
+    enableSlashCommands = true,
+    slashCommands: slashCommandsConfig,
+    commandPermissions
   } = config;
   const messageActions = useMemo(
     () => ({
@@ -3371,6 +3502,13 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
     }),
     [messageActionsConfig]
   );
+  const slashCommands = useMemo(
+    () => enableSlashCommands ? filterSlashCommands(
+      slashCommandsConfig ?? DEFAULT_SLASH_COMMANDS,
+      commandPermissions
+    ) : [],
+    [commandPermissions, enableSlashCommands, slashCommandsConfig]
+  );
   const isSessionParamsConfigured = useMemo(() => {
     if (!sessionParams) return false;
     return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
@@ -3568,7 +3706,8 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
                       editingMessageId,
                       onClearEditing: handleClearEditing,
                       analysisMode,
-                      onAnalysisModeChange: setAnalysisMode
+                      onAnalysisModeChange: setAnalysisMode,
+                      slashCommands
                     }
                   )
                 }
@@ -3643,7 +3782,8 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
                   editingMessageId,
                   onClearEditing: handleClearEditing,
                   analysisMode,
-                  onAnalysisModeChange: setAnalysisMode
+                  onAnalysisModeChange: setAnalysisMode,
+                  slashCommands
                 }
               )
             ]