@inploi/plugin-chatbot 3.12.5 → 3.12.6

package/dist/{chatbot-body-1c87450e.cjs → chatbot-body-7f2615e5.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-395856be.cjs");
+const index = require("./index-67deb823.cjs");
 require("@inploi/sdk");
 const followNodes = ({
   node,
@@ -2803,13 +2803,13 @@ const ChatInputSubmit = ({
   return index.o("div", {
     class: "flex flex-col items-center py-3",
     children: index.o("button", {
-      class: "bg-accent-9 hover:bg-accent-10 active:bg-submit-bg-active hover:border-accent-10 active:border-submit-bg-active border-accent-9 ring-accent-6 focus-visible:outline-accent-8 ring-offset-neutral-1 group flex cursor-pointer rounded-full border border-solid px-5 py-3 pr-4 text-white shadow-[inset_0px_-6px_2px_-1px_oklch(100_0_0/.45),inset_0px_1px_1px_oklch(100_0_0/.3)] outline-none ring-1 ring-offset-[1.5px] transition-all duration-300 focus-visible:outline-2 active:shadow-[inset_0px_0px_2px_-1px_oklch(100_0_0/.45),inset_0px_3px_1px_.5px_oklch(0_0_0/.08)] active:ring-2 active:ring-offset-2",
+      class: "bg-accent-9 hover:bg-accent-10 active:bg-submit-bg-active hover:border-accent-10 active:border-submit-bg-active border-accent-9 ring-accent-6 focus-visible:outline-accent-8 ring-offset-neutral-1 flex cursor-pointer rounded-full border border-solid px-5 py-3 pr-4 text-white outline-none ring-1 ring-offset-[1.5px] transition-all duration-300 focus-visible:outline-2 active:ring-2 active:ring-offset-2",
       name: input.key,
       onClick: () => {
         onSubmitSuccess(null);
       },
       children: index.o("span", {
-        class: "relative bottom-[2px] top-[-2px] flex items-center gap-1.5 transition-all duration-300 group-active:bottom-0 group-active:top-0",
+        class: "flex items-center gap-1.5",
         children: [index.o("span", {
           class: "inline-flex items-center text-sm font-medium",
           children: input.config.label
@@ -2946,34 +2946,40 @@ const ChatInput = () => {
   var _a;
   const input = (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.currentInput;
   const inputWrapperRef = index._$1(null);
+  const inputContentRef = index._$1(null);
   const updateHeight = index.T(() => {
-    if (inputWrapperRef.current) {
-      index.store.inputHeight$.value = inputWrapperRef.current.getBoundingClientRect().height;
+    if (inputContentRef.current) {
+      index.store.inputHeight$.value = inputContentRef.current.getBoundingClientRect().height;
     }
   }, []);
   index.p(() => {
     updateHeight();
   }, [input == null ? void 0 : input.type, updateHeight]);
+  index.p(() => {
+    const wrapper = inputWrapperRef.current;
+    if (!wrapper)
+      return;
+    wrapper.addEventListener("transitionstart", chatStore.scrollToEnd.smooth);
+    wrapper.addEventListener("transitioncancel", chatStore.scrollToEnd.smooth);
+    wrapper.addEventListener("transitionend", chatStore.scrollToEnd.smooth);
+    return () => {
+      wrapper.removeEventListener("transitionstart", chatStore.scrollToEnd.smooth);
+      wrapper.removeEventListener("transitioncancel", chatStore.scrollToEnd.smooth);
+      wrapper.removeEventListener("transitionend", chatStore.scrollToEnd.smooth);
+    };
+  }, []);
   const handleSubmitSuccess = (type) => (value) => chatStore.onSubmitSuccessFn$.value({
     type,
     value
   });
-  return index.o(index.m.div, {
-    initial: {
-      height: 0
-    },
-    animate: {
+  return index.o("div", {
+    ref: inputWrapperRef,
+    style: {
       height: index.store.inputHeight$.value
     },
-    exit: {
-      height: 0,
-      opacity: 0
-    },
-    onAnimationStart: chatStore.scrollToEnd.smooth,
-    onAnimationComplete: chatStore.scrollToEnd.smooth,
-    class: "bg-statusbar absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-md backdrop-saturate-150",
+    class: "bg-statusbar ease-expo-out absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-md backdrop-saturate-150 transition-all duration-700",
     children: index.o("div", {
-      ref: inputWrapperRef,
+      ref: inputContentRef,
       class: "border-divider border-t",
       children: index.N({
         input,
@@ -3031,101 +3037,36 @@ const ChatInput = () => {
     })
   });
 };
-const falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
-const cx = index.clsx;
-const cva = (base, config) => {
-  return (props) => {
-    var ref;
-    if ((config === null || config === void 0 ? void 0 : config.variants) == null)
-      return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    const { variants, defaultVariants } = config;
-    const getVariantClassNames = Object.keys(variants).map((variant) => {
-      const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-      const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-      if (variantProp === null)
-        return null;
-      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-      return variants[variant][variantKey];
-    });
-    const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-      let [key, value] = param;
-      if (value === void 0) {
-        return acc;
-      }
-      acc[key] = value;
-      return acc;
-    }, {});
-    const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
-      let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param1;
-      return Object.entries(compoundVariantOptions).every((param) => {
-        let [key, value] = param;
-        return Array.isArray(value) ? value.includes({
-          ...defaultVariants,
-          ...propsWithoutUndefined
-        }[key]) : {
-          ...defaultVariants,
-          ...propsWithoutUndefined
-        }[key] === value;
-      }) ? [
-        ...acc,
-        cvClass,
-        cvClassName
-      ] : acc;
-    }, []);
-    return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  };
-};
-const chatBubbleVariants = cva("max-w-[min(100%,24rem)] [text-wrap:pretty] leading-snug flex-shrink min-w-[2rem] py-2 px-3 rounded-[18px] min-h-[36px] break-words relative", {
+const chatBubbleVariants = index.cva("max-w-[min(100%,24rem)] [text-wrap:pretty] leading-snug flex-shrink min-w-[2rem] py-2 px-3 rounded-[18px] min-h-[36px] break-words relative", {
   variants: {
     side: {
       left: "bg-bubble-weak-bg text-neutral-12 shadow-surface-sm outline outline-1 outline-bubble-weak rounded-bl-md",
       right: "ml-auto bg-accent-9 text-white rounded-br-md shadow-surface-sm shadow-bubble-strong-shadow"
     },
-    transitionState: {
-      entering: "opacity-0 translate-y-8",
-      entered: "opacity-100 translate-y-0",
-      exiting: "opacity-0 scale-0",
-      exited: ""
+    animate: {
+      true: "animate-bubble-in",
+      false: ""
     }
   },
   defaultVariants: {
     side: "left"
   }
 });
-const motionVariants = {
-  hidden: {
-    y: "100%",
-    scale: 0.75
-  },
-  shown: {
-    y: 0,
-    scale: 1
-  }
-};
 const ChatBubble = ({
   children,
   className,
-  transitionState,
+  animate,
   side,
   ...props
 }) => {
-  return index.o(index.m.p, {
-    variants: motionVariants,
-    initial: "hidden",
-    animate: "shown",
-    transition: {
-      type: "spring",
-      damping: 25,
-      stiffness: 500
-    },
-    "data-transition": transitionState,
+  return index.o("p", {
     style: {
       transformOrigin: side === "left" ? "0% 50%" : "100% 50%"
     },
     class: chatBubbleVariants({
       className,
       side,
-      transitionState
+      animate
     }),
     ...props,
     children
@@ -3159,7 +3100,7 @@ const authorToSide = {
   bot: "left",
   user: "right"
 };
-const systemMessageStyle = cva("w-full select-none py-2 text-wrap-balance text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_var(--i-color-n-1)]", {
+const systemMessageStyle = index.cva("w-full select-none py-2 text-wrap-balance text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_var(--i-color-n-1)]", {
   variants: {
     variant: {
       info: "text-neutral-8",
@@ -3180,75 +3121,74 @@ const Conversation = ({
   return index.o("ol", {
     "aria-label": "Chat messages",
     class: "flex flex-col justify-end gap-2 p-2 pt-[calc(var(--header-height)+1rem)]",
-    children: [index.o(index.AnimatePresence, {
-      initial: false,
-      children: messages.map((message, i2) => {
-        return index.o(index.k, {
-          children: index.o("li", {
-            class: "flex",
-            children: index.N(message).with({
-              type: "system"
-            }, (message2) => index.o("p", {
-              class: systemMessageStyle({
-                variant: message2.variant
-              }),
-              children: message2.text
-            })).with({
-              type: "text",
-              author: index._.union("bot", "user")
-            }, (message2) => {
-              const isLastSentMessage = message2.author === "user" && !messages.slice(i2 + 1).some((m) => m.type === "text" && m.author === "user");
-              return index.o(ChatBubble, {
-                side: authorToSide[message2.author],
-                children: [message2.text, isLastSentMessage ? lastSentMessageFooter : null]
-              }, i2);
-            }).with({
-              type: "link"
-            }, (message2) => {
-              return index.o("div", {
-                class: "bg-accent-3 flex w-full items-center justify-center overflow-hidden rounded-xl px-2 py-2",
-                children: index.o("a", {
-                  class: "bg-lowest shadow-surface-sm ring-accent-6 hover:ring-accent-8 active:bg-accent-2 active:text-accent-10 text-accent-9 focus-visible:ring-accent-7/50 text-wrap-balance flex items-center gap-1.5 rounded-full py-2 pl-4 pr-2.5 text-center no-underline ring-1 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2",
-                  target: "_blank",
-                  href: message2.href,
-                  children: [message2.text, index.o("svg", {
-                    class: "flex-none",
-                    width: "15",
-                    height: "15",
-                    viewBox: "0 0 15 15",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: index.o("path", {
-                      d: "M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z",
-                      fill: "currentColor",
-                      "fill-rule": "evenodd",
-                      "clip-rule": "evenodd"
-                    })
-                  })]
-                })
-              });
-            }).with({
-              type: "image"
-            }, (image) => index.o("img", {
-              class: "shadow-surface-md w-full max-w-[min(100%,24rem)] rounded-2xl",
-              src: image.url,
-              style: {
-                aspectRatio: image.width / image.height
+    children: [messages.map((message, i2) => {
+      return index.o(index.k, {
+        children: index.o("li", {
+          class: "flex",
+          children: index.N(message).with({
+            type: "system"
+          }, (message2) => index.o("p", {
+            class: systemMessageStyle({
+              variant: message2.variant
+            }),
+            children: message2.text
+          })).with({
+            type: "text",
+            author: index._.union("bot", "user")
+          }, (message2) => {
+            const isLastSentMessage = message2.author === "user" && !messages.slice(i2 + 1).some((m) => m.type === "text" && m.author === "user");
+            const isLastMessage = i2 === messages.length - 1;
+            return index.o(ChatBubble, {
+              animate: isLastMessage,
+              side: authorToSide[message2.author],
+              children: [message2.text, isLastSentMessage ? lastSentMessageFooter : null]
+            }, i2);
+          }).with({
+            type: "link"
+          }, (message2) => {
+            return index.o("div", {
+              class: "bg-accent-3 flex w-full items-center justify-center overflow-hidden rounded-xl px-2 py-2",
+              children: index.o("a", {
+                class: "bg-lowest shadow-surface-sm ring-accent-6 hover:ring-accent-8 active:bg-accent-2 active:text-accent-10 text-accent-9 focus-visible:ring-accent-7/50 text-wrap-balance flex items-center gap-1.5 rounded-full py-2 pl-4 pr-2.5 text-center no-underline ring-1 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2",
+                target: "_blank",
+                href: message2.href,
+                children: [message2.text, index.o("svg", {
+                  class: "flex-none",
+                  width: "15",
+                  height: "15",
+                  viewBox: "0 0 15 15",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: index.o("path", {
+                    d: "M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z",
+                    fill: "currentColor",
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd"
+                  })
+                })]
+              })
+            });
+          }).with({
+            type: "image"
+          }, (image) => index.o("img", {
+            class: "shadow-surface-md w-full max-w-[min(100%,24rem)] rounded-2xl",
+            src: image.url,
+            style: {
+              aspectRatio: image.width / image.height
+            }
+          })).with({
+            type: "file"
+          }, (file) => {
+            return index.o(FileThumbnail, {
+              class: file.author === "bot" ? "" : "ml-auto",
+              file: {
+                name: file.fileName,
+                sizeKb: file.fileSizeKb
               }
-            })).with({
-              type: "file"
-            }, (file) => {
-              return index.o(FileThumbnail, {
-                class: file.author === "bot" ? "" : "ml-auto",
-                file: {
-                  name: file.fileName,
-                  sizeKb: file.fileSizeKb
-                }
-              });
-            }).exhaustive()
-          })
-        }, i2);
-      })
+            });
+          }).exhaustive()
+        })
+      }, i2);
     }), index.o(TypingIndicator, {}, "typing")]
   });
 };
@@ -3292,7 +3232,8 @@ const ChatbotBody = ({
           flow_id: flow.id,
           flow_version: flow.version,
           flow_session_id: currentApplication.data.flowSessionId
-        }
+        },
+        customProperties: flow.context
       });
     } else {
       index.store.removeMessagesSentByNodeIds([fromNodeId]);