@paymanai/payman-ask-sdk 1.2.17 → 1.2.18

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
 export { cancelUserAction, generateId, resendUserAction, streamWorkflowEvents, submitUserAction, useChat, useVoice } from '@paymanai/payman-typescript-ask-sdk';
-import { createContext, forwardRef, useState, useRef, useMemo, useImperativeHandle, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { createContext, forwardRef, useState, useRef, useEffect, useMemo, useImperativeHandle, useCallback, useLayoutEffect, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { motion, AnimatePresence } from 'framer-motion';
-import { MessageCircle, ArrowDown, Square, Mic, ArrowUp, ShieldCheck, Loader2, X, Check, RefreshCw, User, Clock, Sparkles, Binoculars, ChevronDown, ChevronRight } from 'lucide-react';
+import { Check, RotateCcw, Mic, ArrowUp, ArrowDown, ShieldCheck, Loader2, X, RefreshCw, User, Clock, Sparkles, Binoculars, ChevronDown, ChevronRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -68,20 +68,25 @@ function ChatInput({
   enableVoice = false,
   onVoicePress,
   voiceAvailable = false,
-  isRecording = false
+  isRecording = false,
+  transcribedText = "",
+  onCancelRecording,
+  onConfirmRecording,
+  showResetSession = false,
+  onResetSession
 }) {
   const textareaRef = useRef(null);
   const containerRef = useRef(null);
   const prevWaitingRef = useRef(isWaitingForResponse);
+  const [recordingSeconds, setRecordingSeconds] = useState(0);
+  const recordingTimerRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       const scrollHeight = textareaRef.current.scrollHeight;
       const maxHeight = 160;
-      textareaRef.current.style.height = `${Math.min(
-        scrollHeight,
-        maxHeight
-      )}px`;
+      textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
     }
   }, [value]);
   useEffect(() => {
@@ -99,6 +104,25 @@ function ChatInput({
       });
     }
   }, [isWaitingForResponse]);
+  useEffect(() => {
+    if (isRecording) {
+      setRecordingSeconds(0);
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingSeconds((s) => s + 1);
+      }, 1e3);
+    } else {
+      if (recordingTimerRef.current) {
+        clearInterval(recordingTimerRef.current);
+        recordingTimerRef.current = null;
+      }
+      setRecordingSeconds(0);
+    }
+    return () => {
+      if (recordingTimerRef.current) {
+        clearInterval(recordingTimerRef.current);
+      }
+    };
+  }, [isRecording]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -114,101 +138,178 @@ function ChatInput({
     if (!isSessionParamsConfigured) return "Configure session params to begin";
     return placeholder;
   };
+  const formatTime = useCallback((seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+  }, []);
+  const handleCancel = () => {
+    if (onCancelRecording) {
+      onCancelRecording();
+    } else if (onVoicePress) {
+      onVoicePress();
+    }
+  };
+  const handleConfirm = () => {
+    if (onConfirmRecording) {
+      onConfirmRecording();
+    } else if (onVoicePress) {
+      onVoicePress();
+    }
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
-      className: cn("flex-shrink-0 w-full", className),
-      style: { flexShrink: 0 },
-      children: /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-1.5 w-full", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-2xl mx-auto", children: [
-        /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            initial: false,
-            className: cn(
-              "flex items-end overflow-hidden",
-              "payman-chat-input"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  value,
-                  onChange: (e) => onChange(e.target.value),
-                  onKeyDown: handleKeyDown,
-                  onClick,
-                  disabled: isInputDisabled,
-                  placeholder: getPlaceholder(),
-                  className: cn(
-                    "payman-chat-input-field",
-                    "focus:outline-none resize-none overflow-y-auto",
-                    "flex-1 min-w-0 py-3"
-                  ),
-                  style: {
-                    minHeight: "44px",
-                    maxHeight: "160px",
-                    paddingLeft: "18px",
-                    paddingRight: "8px"
-                  },
-                  rows: 1
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 p-2", children: [
-                showVoiceButton && /* @__PURE__ */ jsxs(
-                  "button",
+      className: cn("payman-chat-input-wrapper", className),
+      children: /* @__PURE__ */ jsx("div", { className: "payman-chat-input-container", children: /* @__PURE__ */ jsxs("div", { className: "payman-chat-input-inner", children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isRecording ? (
+          /* ======== Recording State ======== */
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 6 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: 6 },
+              transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
+              className: "payman-chat-input payman-chat-input--recording",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "payman-recording-transcript-area", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: transcribedText ? /* @__PURE__ */ jsxs(
+                  motion.p,
                   {
-                    type: "button",
-                    onClick: onVoicePress,
-                    disabled: isVoiceButtonDisabled,
-                    className: cn(
-                      "relative flex items-center justify-center",
-                      "w-8 h-8 rounded-full transition-all duration-200",
-                      "payman-chat-input-btn-voice",
-                      isRecording && "recording"
-                    ),
-                    "aria-label": isRecording ? "Stop recording" : "Voice input",
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.15 },
+                    className: "payman-recording-transcript-text",
                     children: [
-                      isRecording && /* @__PURE__ */ jsx(
-                        "span",
+                      transcribedText,
+                      /* @__PURE__ */ jsx(
+                        motion.span,
                         {
-                          className: "absolute inset-0 rounded-full border-2 animate-ping opacity-40",
-                          style: {
-                            borderColor: "var(--payman-input-btn-voice-recording-ring)"
-                          }
-                        }
-                      ),
-                      isRecording ? /* @__PURE__ */ jsx(
-                        Square,
-                        {
-                          className: "w-3 h-3 relative z-10",
-                          fill: "currentColor"
+                          className: "payman-recording-cursor",
+                          animate: { opacity: [1, 0] },
+                          transition: { duration: 0.8, repeat: Infinity, repeatType: "reverse" }
                         }
-                      ) : /* @__PURE__ */ jsx(Mic, { className: "w-4 h-4" })
+                      )
                     ]
-                  }
-                ),
+                  },
+                  "text"
+                ) : /* @__PURE__ */ jsx(
+                  motion.p,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 0.5 },
+                    className: "payman-recording-transcript-placeholder",
+                    children: "Listening..."
+                  },
+                  "placeholder"
+                ) }) }),
+                /* @__PURE__ */ jsxs("div", { className: "payman-recording-bar", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCancel,
+                      className: "payman-recording-btn-cancel",
+                      "aria-label": "Cancel recording",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "payman-recording-indicator", children: [
+                    /* @__PURE__ */ jsx("span", { className: "payman-recording-dot" }),
+                    /* @__PURE__ */ jsx("span", { className: "payman-recording-timer", children: formatTime(recordingSeconds) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleConfirm,
+                      className: "payman-recording-btn-confirm",
+                      "aria-label": "Confirm recording",
+                      children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4", strokeWidth: 2.5 })
+                    }
+                  )
+                ] })
+              ]
+            },
+            "recording"
+          )
+        ) : (
+          /* ======== Normal Input State ======== */
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: false,
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: 6 },
+              transition: { duration: 0.2 },
+              className: cn(
+                "payman-chat-input",
+                isFocused && "payman-chat-input--focused"
+              ),
+              children: [
                 /* @__PURE__ */ jsx(
-                  "button",
+                  "textarea",
                   {
-                    type: "button",
-                    onClick: onSend,
-                    disabled: !canSend,
-                    className: cn(
-                      "flex items-center justify-center",
-                      "w-8 h-8 rounded-full",
-                      "payman-chat-input-btn-send",
-                      "hover:opacity-90 active:scale-95",
-                      "transition-all duration-150"
-                    ),
-                    "aria-label": "Send message",
-                    children: /* @__PURE__ */ jsx(ArrowUp, { className: "w-4 h-4", strokeWidth: 2.5 })
+                    ref: textareaRef,
+                    value,
+                    onChange: (e) => onChange(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    onFocus: () => setIsFocused(true),
+                    onBlur: () => setIsFocused(false),
+                    onClick,
+                    disabled: isInputDisabled,
+                    placeholder: getPlaceholder(),
+                    className: "payman-chat-input-field",
+                    rows: 1
                   }
-                )
-              ] })
-            ]
-          }
-        ),
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "payman-chat-input-bottom", children: [
+                  /* @__PURE__ */ jsx("div", { className: "payman-chat-input-actions-left", children: showResetSession && onResetSession && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onResetSession,
+                      disabled: isWaitingForResponse,
+                      className: "payman-chat-input-btn-reset",
+                      "aria-label": "New Session",
+                      children: [
+                        /* @__PURE__ */ jsx(RotateCcw, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }),
+                        /* @__PURE__ */ jsx("span", { className: "payman-chat-input-btn-reset-tooltip", children: "New Session" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "payman-chat-input-actions", children: [
+                    showVoiceButton && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onVoicePress,
+                        disabled: isVoiceButtonDisabled,
+                        className: "payman-chat-input-btn-voice",
+                        "aria-label": "Voice input",
+                        children: /* @__PURE__ */ jsx(Mic, { className: "w-[18px] h-[18px]" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onSend,
+                        disabled: !canSend,
+                        className: "payman-chat-input-btn-send",
+                        "aria-label": "Send message",
+                        children: /* @__PURE__ */ jsx(ArrowUp, { className: "w-4 h-4", strokeWidth: 2.5 })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            "input"
+          )
+        ) }),
         /* @__PURE__ */ jsx("p", { className: "payman-chat-input-disclaimer", children: AI_DISCLAIMER_TEXT })
       ] }) })
     }
@@ -777,6 +878,7 @@ function MessageList({
   isLoading = false,
   emptyStateText = "What can I help with?",
   showEmptyStateIcon = true,
+  emptyStateComponent,
   layout = "full-width",
   showTimestamps = false,
   stage = "DEV",
@@ -901,7 +1003,7 @@ function MessageList({
   }
   if (messages.length === 0) {
     const lines = emptyStateText.split("\n").map((l) => l.trim()).filter(Boolean);
-    return /* @__PURE__ */ jsx("div", { className: cn("payman-empty-root p-8", className), children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: cn("payman-empty-root", className), children: /* @__PURE__ */ jsxs(
       motion.div,
       {
         initial: { opacity: 0, y: 20 },
@@ -909,17 +1011,17 @@ function MessageList({
         transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] },
         className: "payman-empty-content",
         children: [
-          showEmptyStateIcon && /* @__PURE__ */ jsx(
+          emptyStateComponent && /* @__PURE__ */ jsx(
             motion.div,
             {
-              initial: { scale: 0.85, opacity: 0 },
+              initial: { scale: 0.9, opacity: 0 },
               animate: { scale: 1, opacity: 1 },
-              transition: { delay: 0.08, duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] },
-              className: "payman-empty-icon-wrap",
-              children: /* @__PURE__ */ jsx(MessageCircle, { className: "h-7 w-7 payman-empty-icon", strokeWidth: 1.5 })
+              transition: { delay: 0.05, duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] },
+              className: "payman-empty-custom-component",
+              children: emptyStateComponent
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: lines.map((line, i) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "payman-empty-text-group", children: lines.map((line, i) => /* @__PURE__ */ jsx(
             motion.p,
             {
               initial: { opacity: 0, y: 6 },
@@ -1461,6 +1563,7 @@ var PaymanChat = forwardRef(function PaymanChat2({
 }, ref) {
   const [inputValue, setInputValue] = useState("");
   const prevInputValueRef = useRef(inputValue);
+  const [hasEverSentMessage, setHasEverSentMessage] = useState(false);
   const chat = useChat(config, callbacks);
   const {
     messages,
@@ -1473,6 +1576,11 @@ var PaymanChat = forwardRef(function PaymanChat2({
     getSessionId,
     getMessages
   } = chat;
+  useEffect(() => {
+    if (messages.length > 0 && !hasEverSentMessage) {
+      setHasEverSentMessage(true);
+    }
+  }, [messages.length, hasEverSentMessage]);
   const userActionState = chat.userActionState ?? DEFAULT_USER_ACTION_STATE;
   const approveUserAction = chat.approveUserAction ?? NOOP_ASYNC;
   const rejectUserAction = chat.rejectUserAction ?? NOOP_ASYNC;
@@ -1521,14 +1629,17 @@ var PaymanChat = forwardRef(function PaymanChat2({
       isWaitingForResponse
     ]
   );
+  const { onExecutionTraceClick, onResetSession } = callbacks;
   useImperativeHandle(ref, () => ({
-    resetSession,
+    resetSession: () => {
+      resetSession();
+      onResetSession?.();
+    },
     clearMessages,
     cancelStream,
     getSessionId,
     getMessages
-  }), [resetSession, clearMessages, cancelStream, getSessionId, getMessages]);
-  const { onExecutionTraceClick } = callbacks;
+  }), [resetSession, clearMessages, cancelStream, getSessionId, getMessages, onResetSession]);
   const {
     placeholder = "Type your message...",
     emptyStateText = "What can I help with?",
@@ -1550,7 +1661,9 @@ var PaymanChat = forwardRef(function PaymanChat2({
     animated = true,
     isChatDisabled = false,
     disabledComponent,
-    showEmptyStateIcon = true
+    showEmptyStateIcon = true,
+    emptyStateComponent,
+    showResetSession = false
   } = config;
   const isSessionParamsConfigured = useMemo(() => {
     if (!sessionParams) return false;
@@ -1558,9 +1671,9 @@ var PaymanChat = forwardRef(function PaymanChat2({
   }, [sessionParams?.id, sessionParams?.name]);
   useEffect(() => {
     const wasEmpty = prevInputValueRef.current.trim() === "";
-    const isEmpty = inputValue.trim() === "";
+    const isEmpty2 = inputValue.trim() === "";
     prevInputValueRef.current = inputValue;
-    if (!wasEmpty && isEmpty) {
+    if (!wasEmpty && isEmpty2) {
       clearTranscript();
       if (isRecording) {
         stopRecording();
@@ -1576,14 +1689,23 @@ var PaymanChat = forwardRef(function PaymanChat2({
       setInputValue("");
     }
   };
+  const handleCancelRecording = () => {
+    stopRecording();
+    clearTranscript();
+    setInputValue("");
+  };
+  const handleConfirmRecording = () => {
+    stopRecording();
+  };
   const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
+  const isEmpty = messages.length === 0;
   if (isChatDisabled) {
     if (disabledComponent) {
       return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "bg-card overflow-hidden flex flex-col flex-[4]",
+            "bg-background overflow-hidden flex flex-col flex-[4]",
             className
           ),
           style,
@@ -1598,7 +1720,7 @@ var PaymanChat = forwardRef(function PaymanChat2({
       "div",
       {
         className: cn(
-          "bg-card overflow-hidden flex flex-col flex-[4]",
+          "bg-background overflow-hidden flex flex-col flex-[4]",
           className
         ),
         style,
@@ -1609,62 +1731,138 @@ var PaymanChat = forwardRef(function PaymanChat2({
       }
     ) });
   }
+  const inputElement = hasAskPermission && /* @__PURE__ */ jsx(
+    ChatInput,
+    {
+      value: inputValue,
+      onChange: setInputValue,
+      onSend: handleSend,
+      onPause: cancelStream,
+      disabled: isInputDisabled,
+      placeholder: isRecording ? "Listening..." : placeholder,
+      isWaitingForResponse,
+      hasSelectedSession: true,
+      isSessionParamsConfigured,
+      enableVoice: config.enableVoice === true,
+      onVoicePress: isRecording ? stopRecording : startRecording,
+      voiceAvailable: config.enableVoice === true && voiceAvailable,
+      isRecording,
+      transcribedText: inputValue,
+      onCancelRecording: handleCancelRecording,
+      onConfirmRecording: handleConfirmRecording,
+      inputStyle,
+      layout,
+      showResetSession,
+      onResetSession: () => {
+        resetSession();
+        onResetSession?.();
+      }
+    }
+  );
   return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "bg-card overflow-hidden flex flex-col flex-[4]",
+        "bg-background 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,
-            onLoadMoreMessages,
-            isLoadingMoreMessages,
-            hasMoreMessages
-          }
-        ),
-        hasAskPermission && /* @__PURE__ */ jsx(
-          ChatInput,
-          {
-            value: inputValue,
-            onChange: setInputValue,
-            onSend: handleSend,
-            onPause: cancelStream,
-            disabled: isInputDisabled,
-            placeholder: isRecording ? "Listening..." : placeholder,
-            isWaitingForResponse,
-            hasSelectedSession: true,
-            isSessionParamsConfigured,
-            enableVoice: config.enableVoice === true,
-            onVoicePress: isRecording ? stopRecording : startRecording,
-            voiceAvailable: config.enableVoice === true && voiceAvailable,
-            isRecording,
-            inputStyle,
-            layout
-          }
-        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isEmpty && !hasEverSentMessage ? (
+          /* ---- Centered empty state with input ---- */
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.3 },
+              className: "payman-empty-centered-layout",
+              children: /* @__PURE__ */ jsxs("div", { className: "payman-empty-centered-inner", children: [
+                /* @__PURE__ */ jsx(
+                  MessageList,
+                  {
+                    messages,
+                    isLoading: false,
+                    emptyStateText,
+                    showEmptyStateIcon,
+                    emptyStateComponent,
+                    layout,
+                    showTimestamps,
+                    stage: config.stage || "DEV",
+                    animated,
+                    showAgentName,
+                    agentName,
+                    showAvatars,
+                    showUserAvatar,
+                    showAssistantAvatar,
+                    showExecutionSteps,
+                    showStreamingDot,
+                    streamingStepsText,
+                    completedStepsText,
+                    onExecutionTraceClick,
+                    onLoadMoreMessages,
+                    isLoadingMoreMessages,
+                    hasMoreMessages
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, y: 12 },
+                    animate: { opacity: 1, y: 0 },
+                    transition: { delay: 0.2, duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] },
+                    className: "payman-empty-centered-input",
+                    children: inputElement
+                  }
+                )
+              ] })
+            },
+            "empty-centered"
+          )
+        ) : (
+          /* ---- Normal chat layout ---- */
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: hasEverSentMessage ? { opacity: 0 } : false,
+              animate: { opacity: 1 },
+              transition: { duration: 0.3 },
+              className: "flex flex-col flex-1 min-h-0",
+              children: [
+                /* @__PURE__ */ jsx(
+                  MessageList,
+                  {
+                    messages,
+                    isLoading: false,
+                    emptyStateText,
+                    showEmptyStateIcon,
+                    emptyStateComponent,
+                    layout,
+                    showTimestamps,
+                    stage: config.stage || "DEV",
+                    animated,
+                    showAgentName,
+                    agentName,
+                    showAvatars,
+                    showUserAvatar,
+                    showAssistantAvatar,
+                    showExecutionSteps,
+                    showStreamingDot,
+                    streamingStepsText,
+                    completedStepsText,
+                    onExecutionTraceClick,
+                    onLoadMoreMessages,
+                    isLoadingMoreMessages,
+                    hasMoreMessages
+                  }
+                ),
+                inputElement
+              ]
+            },
+            "chat-layout"
+          )
+        ) }),
         /* @__PURE__ */ jsx(
           UserActionModal,
           {