@inploi/plugin-chatbot 3.10.1 → 3.12.0

package/dist/{job-application-content-e3943b85.cjs → chatbot-body-a6d50df4.cjs}

@@ -1,31 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-8dc9cfab.cjs");
+const index = require("./index-413f4efe.cjs");
 require("@inploi/sdk");
-const kbToReadableSize = (kb) => index.N(kb).with(index._.number.lte(1e3), () => `${Math.round(kb)}KB`).with(index._.number.lt(1e3 * 10), () => `${(kb / 1e3).toFixed(1)}MB`).otherwise(() => `${Math.round(kb / 1e3)}MB`);
-const getHeadOrThrow = (nodes) => {
-  const head = nodes.find((n2) => n2.isHead);
-  if (!head)
-    throw new Error("No head node found");
-  return head;
-};
-const getApplicationSubmissionsPayload = (submissions) => {
-  const payload = Object.entries(submissions).reduce((acc, [key, submission]) => {
-    acc[key] = submission.value;
-    return acc;
-  }, {});
-  return payload;
-};
-const isSubmissionOfType = (type) => (submission) => {
-  if (!submission)
-    return false;
-  return submission.type === type;
-};
-class AbortedError extends Error {
-  constructor() {
-    super("Aborted");
-  }
-}
 const followNodes = ({
   node,
   nodes,
@@ -77,7 +53,7 @@ const createFlowInterpreter = ({
   onFlowEnd,
   onInterpret
 }) => {
-  const controller = new AbortController();
+  let controller = new AbortController();
   const interpretNode = async (node, prevNode) => {
     const submissions = getSubmissions();
     onInterpret == null ? void 0 : onInterpret(node, prevNode);
@@ -112,16 +88,37 @@ const createFlowInterpreter = ({
         end: () => onFlowEnd == null ? void 0 : onFlowEnd(node)
       });
     } catch (e) {
-      if (e instanceof AbortedError)
+      if (e instanceof index.AbortedError)
         return;
       throw e;
     }
   };
   return {
     interpret: async (startFromNodeId) => {
-      const startNode = flow.find((node) => node.id === startFromNodeId) ?? getHeadOrThrow(flow);
+      const startNode = flow.find((node) => node.id === startFromNodeId) ?? index.getHeadOrThrow(flow);
       return interpretNode(startNode);
     },
+    undo: (nodeHistory) => {
+      let removed = 1;
+      const formerLastNode = flow.find((n2) => n2.id === nodeHistory[nodeHistory.length - 1]);
+      for (let i2 = nodeHistory.length - 2; i2 > 0; i2--) {
+        const nodeId = nodeHistory[i2];
+        const node = flow.find((n2) => n2.id === nodeId);
+        if (!node)
+          break;
+        removed++;
+        if (node.type.startsWith("question-"))
+          break;
+      }
+      controller.abort();
+      controller = new AbortController();
+      const newStartNode = flow.find((node) => node.id === nodeHistory[nodeHistory.length - removed]);
+      index.invariant(newStartNode, "Undo failed: new start node not found");
+      interpretNode(newStartNode, formerLastNode);
+      return {
+        removed
+      };
+    },
     abort: () => {
       controller.abort();
     }
@@ -200,22 +197,17 @@ async function interpretSubmitNode({
   analytics
 }) {
   await chat.userInput({
-    type: "multiple-choice",
+    type: "submit",
     key: void 0,
     config: {
-      options: [{
-        label: "Submit my application",
-        value: "submit"
-      }],
-      maxSelected: 1,
-      minSelected: 1
+      label: "Submit my application"
     }
   });
   const logApplyComplete = () => {
-    const contextJobId = typeof context.jobId === "string" ? context.jobId : void 0;
-    const contextFlowId = typeof context.flowId === "string" ? context.flowId : void 0;
-    index.invariant(contextJobId);
-    index.invariant(contextFlowId);
+    const contextJobId = typeof context.job_id === "string" ? context.job_id : void 0;
+    const contextFlowId = typeof context.flow_id === "string" ? context.flow_id : void 0;
+    if (!contextJobId || !contextFlowId)
+      return;
     if (contextJobId) {
       analytics.log({
         event: "APPLY_COMPLETE",
@@ -243,7 +235,7 @@ async function interpretSubmitNode({
       integration_id: node.data.integrationId,
       anonymous_id,
       session_id,
-      submissions: getApplicationSubmissionsPayload(submissions || {})
+      submissions: index.getFlowSubmissionsPayload(submissions || {})
     })
   }).catch((e) => e);
   await index.N(response).with({
@@ -781,7 +773,7 @@ const interpolateString = (str, context) => {
       case "file":
         if (!submission.value)
           return "no files";
-        return submission.value.map((file) => `${file.name} (${kbToReadableSize(file.sizeKb)})`).join(", ");
+        return submission.value.map((file) => `${file.name} (${index.kbToReadableSize(file.sizeKb)})`).join(", ");
       case "multiple-choice":
         return submission.value.join(", ");
       default:
@@ -814,6 +806,96 @@ const SendButton = ({
     })]
   })
 });
+const TYPING_SPEED_MS_PER_CHARACTER = 25;
+const scrollToEndFn$ = index.a({
+  instant: () => {
+  },
+  smooth: () => {
+  }
+});
+const chatStore = {
+  onSubmitSuccessFn$: index.a(() => {
+  }),
+  isBotTyping$: index.a(false),
+  scrollToEnd: {
+    instant: () => scrollToEndFn$.value.instant(),
+    smooth: () => scrollToEndFn$.value.smooth()
+  }
+};
+const useChatService = () => {
+  const chatRef = index._$1(null);
+  index.y(() => {
+    scrollToEndFn$.value = {
+      instant: () => {
+        var _a;
+        return (_a = chatRef.current) == null ? void 0 : _a.scrollTo({
+          top: chatRef.current.scrollHeight,
+          behavior: "instant"
+        });
+      },
+      smooth: () => {
+        if (!chatRef.current)
+          return;
+        if (chatRef.current.scrollHeight - chatRef.current.scrollTop <= chatRef.current.clientHeight * 1.5) {
+          chatRef.current.scrollTo({
+            top: chatRef.current.scrollHeight,
+            behavior: "smooth"
+          });
+        }
+      }
+    };
+  }, [chatRef]);
+  const chatService = index.F(() => ({
+    send: async ({
+      message,
+      signal: signal2,
+      groupId
+    }) => {
+      await index.N(message).with({
+        author: "bot",
+        type: "text"
+      }, async (message2) => {
+        if (signal2 == null ? void 0 : signal2.aborted)
+          throw new index.AbortedError();
+        chatStore.isBotTyping$.value = true;
+        const typingTime = Math.min(Math.max(20, message2.text.length), 100) * TYPING_SPEED_MS_PER_CHARACTER;
+        await new Promise((resolve) => {
+          return setTimeout(resolve, typingTime, {
+            signal: signal2
+          });
+        });
+        chatStore.isBotTyping$.value = false;
+      }).otherwise(async () => void 0);
+      if (signal2 == null ? void 0 : signal2.aborted)
+        throw new index.AbortedError();
+      index.store.addMessage(message, groupId);
+    },
+    input: async ({
+      input,
+      signal: signal2
+    }) => {
+      if (signal2 == null ? void 0 : signal2.aborted)
+        throw new index.AbortedError();
+      index.store.setInput(input);
+      return await new Promise((resolve) => {
+        const submitFunction = (submission) => {
+          if (signal2 == null ? void 0 : signal2.aborted)
+            throw new index.AbortedError();
+          index.store.setInput(void 0);
+          if (input.key) {
+            index.store.setSubmission(input.key, submission);
+          }
+          resolve(submission);
+        };
+        chatStore.onSubmitSuccessFn$.value = submitFunction;
+      });
+    }
+  }), []);
+  return {
+    chatRef,
+    chatService
+  };
+};
 const SkipButton = ({
   class: className,
   ...props
@@ -954,7 +1036,7 @@ const toBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = reject;
 });
 const addFileSizesKb = (files) => files.reduce((acc, cur) => acc + cur.sizeKb, 0);
-const isFileSubmission = isSubmissionOfType("file");
+const isFileSubmission = index.isSubmissionOfType("file");
 const FILENAMES_TO_SHOW_QTY = 3;
 const FileThumbnail = ({
   file,
@@ -978,7 +1060,7 @@ const FileThumbnail = ({
     }), index.o("p", {
       "aria-label": "File size",
       class: "text-accent-11",
-      children: kbToReadableSize(file.sizeKb)
+      children: index.kbToReadableSize(file.sizeKb)
     })]
   });
 };
@@ -1008,7 +1090,7 @@ const ChatInputFile = ({
   onHeightChange
 }) => {
   var _a;
-  const submission = (_a = index.application.current$.value.application) == null ? void 0 : _a.data.submissions[input.key];
+  const submission = (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key];
   const [files, setFiles] = index.h(isFileSubmission(submission) && submission.value !== null ? submission.value : []);
   const [error, setError] = index.h();
   const hiddenFileCount = files.length - FILENAMES_TO_SHOW_QTY;
@@ -1037,7 +1119,7 @@ const ChatInputFile = ({
       if (input.config.fileSizeLimitKib && totalSize > input.config.fileSizeLimitKib) {
         return setError({
           type: "max",
-          message: `File size exceeds limit of ${kbToReadableSize(input.config.fileSizeLimitKib)}`
+          message: `File size exceeds limit of ${index.kbToReadableSize(input.config.fileSizeLimitKib)}`
         });
       }
       if (input.config.allowMultiple === false && files.length > 1)
@@ -1073,7 +1155,7 @@ const ChatInputFile = ({
             }) : null]
           }), index.o("p", {
             class: "text-neutral-11 text-xs",
-            children: [kbToReadableSize(totalSize), " ", files.length > 1 ? "total" : ""]
+            children: [index.kbToReadableSize(totalSize), " ", files.length > 1 ? "total" : ""]
           })]
         }) : index.o("div", {
           class: "flex flex-col justify-center gap-4 pb-6 pt-5",
@@ -1097,7 +1179,7 @@ const ChatInputFile = ({
               children: [input.config.allowMultiple ? "Select files" : "Select a file", " to upload"]
             }), input.config.fileSizeLimitKib ? index.o("p", {
               class: "text-neutral-10 text-xs",
-              children: ["(max ", kbToReadableSize(input.config.fileSizeLimitKib), ")"]
+              children: ["(max ", index.kbToReadableSize(input.config.fileSizeLimitKib), ")"]
             }) : null]
           }), index.o("aside", {
             class: "flex flex-col items-center gap-2",
@@ -2629,7 +2711,7 @@ const submitIfSingleChecked = (form) => {
     bubbles: true
   }));
 };
-const isMultipleChoiceSubmission = isSubmissionOfType("multiple-choice");
+const isMultipleChoiceSubmission = index.isSubmissionOfType("multiple-choice");
 const getResolver$1 = (config) => {
   const length = {
     min: config.minSelected ?? 0,
@@ -2645,7 +2727,8 @@ const ChatInputMultipleChoice = ({
   onHeightChange
 }) => {
   var _a, _b;
-  const submission = input.key ? (_a = index.application.current$.value.application) == null ? void 0 : _a.data.submissions[input.key] : void 0;
+  const submission = input.key ? (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
+  const isSingleChoice = (input.config.minSelected === 1 || input.config.minSelected === void 0) && input.config.maxSelected === 1;
   const {
     register,
     handleSubmit,
@@ -2654,12 +2737,11 @@ const ChatInputMultipleChoice = ({
     }
   } = useForm({
     defaultValues: {
-      checked: isMultipleChoiceSubmission(submission) ? Object.fromEntries(submission.value.map((key) => [key, true])) : {}
+      checked: isSingleChoice ? {} : isMultipleChoiceSubmission(submission) ? Object.fromEntries(submission.value.map((key) => [key, true])) : {}
     },
     resolver: getResolver$1(input.config)
   });
   const focusRef = useFocusOnMount();
-  const isSingleChoice = (input.config.minSelected === 1 || input.config.minSelected === void 0) && input.config.maxSelected === 1;
   return index.o("form", {
     noValidate: true,
     class: "flex flex-col gap-1 pr-2.5",
@@ -2724,6 +2806,41 @@ const ChatInputMultipleChoice = ({
     })]
   });
 };
+const ChatInputSubmit = ({
+  input,
+  onSubmitSuccess
+}) => {
+  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",
+      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",
+        children: [index.o("span", {
+          class: "inline-flex items-center text-sm font-medium",
+          children: input.config.label
+        }), index.o("svg", {
+          stroke: "currentColor",
+          "stroke-width": "1.5",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [index.o("path", {
+            d: "M4 8L8 4L12 8"
+          }), index.o("path", {
+            d: "M8 4V13"
+          })]
+        })]
+      })
+    })
+  });
+};
 const errors = {
   empty: "Please enter some text",
   email: "That doesn’t look like a valid email address",
@@ -2751,7 +2868,7 @@ const inputFormatToProps = {
     formNoValidate: true
   }
 };
-const isTextSubmission = isSubmissionOfType("text");
+const isTextSubmission = index.isSubmissionOfType("text");
 const getResolver = (config) => i(index.object({
   text: {
     email: index.string(errors.email, [index.email(errors.email)]),
@@ -2766,7 +2883,7 @@ const ChatInputText = ({
   onHeightChange
 }) => {
   var _a;
-  const submission = input.key ? (_a = index.application.current$.value.application) == null ? void 0 : _a.data.submissions[input.key] : void 0;
+  const submission = input.key ? (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
   const defaultValue = input.config.defaultValue;
   const {
     register,
@@ -2832,22 +2949,19 @@ const ChatInputText = ({
     })
   });
 };
-const ChatInput = ({
-  onSubmit,
-  onInputChange,
-  input
-}) => {
+const ChatInput = () => {
+  var _a;
+  const input = (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.currentInput;
   const inputWrapperRef = index._$1(null);
   const updateHeight = index.T(() => {
     if (inputWrapperRef.current) {
-      index.inputHeight.value = inputWrapperRef.current.getBoundingClientRect().height;
+      index.store.inputHeight$.value = inputWrapperRef.current.getBoundingClientRect().height;
     }
   }, []);
   index.p(() => {
     updateHeight();
-    onInputChange(input == null ? void 0 : input.type);
-  }, [input == null ? void 0 : input.type, onInputChange, updateHeight]);
-  const handleSubmitSuccess = (type) => (value) => onSubmit({
+  }, [input == null ? void 0 : input.type, updateHeight]);
+  const handleSubmitSuccess = (type) => (value) => chatStore.onSubmitSuccessFn$.value({
     type,
     value
   });
@@ -2856,18 +2970,19 @@ const ChatInput = ({
       height: 0
     },
     animate: {
-      height: index.inputHeight.value
+      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",
     children: index.o("div", {
       ref: inputWrapperRef,
       class: "border-divider border-t",
       children: index.N({
-        application: index.application,
         input,
         onHeightChange: updateHeight
       }).with({
@@ -2912,6 +3027,13 @@ const ChatInput = ({
       }, (props) => index.o(ChatInputFile, {
         onSubmitSuccess: handleSubmitSuccess(props.input.type),
         ...props
+      })).with({
+        input: {
+          type: "submit"
+        }
+      }, (props) => index.o(ChatInputSubmit, {
+        onSubmitSuccess: handleSubmitSuccess(props.input.type),
+        ...props
       })).exhaustive()
     })
   });
@@ -2960,7 +3082,7 @@ const cva = (base, config) => {
     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", {
+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", {
   variants: {
     side: {
       left: "bg-bubble-weak-bg text-neutral-12 shadow-surface-sm outline outline-1 outline-bubble-weak rounded-bl-md",
@@ -3020,18 +3142,24 @@ const TypingIndicator = ({
   className,
   ...props
 }) => {
+  index.p(() => {
+    chatStore.scrollToEnd.smooth();
+  });
   return index.o("div", {
-    "aria-label": "Typing…",
-    class: index.clsx("flex gap-1 p-4", className),
-    ...props,
-    children: Array.from({
-      length: 3
-    }, (_, i2) => index.o("div", {
-      class: "bg-accent-9 h-1.5 w-1.5 animate-bounce rounded-full",
-      style: {
-        animationDelay: `${-i2 * 200}ms`
-      }
-    }))
+    "aria-hidden": true,
+    children: chatStore.isBotTyping$.value === true ? index.o("div", {
+      "aria-label": "Typing…",
+      class: index.clsx("flex gap-1 p-4", className),
+      ...props,
+      children: Array.from({
+        length: 3
+      }, (_, i2) => index.o("div", {
+        class: "bg-accent-9 h-1.5 w-1.5 animate-bounce rounded-full",
+        style: {
+          animationDelay: `${-i2 * 200}ms`
+        }
+      }))
+    }) : void 0
   });
 };
 const authorToSide = {
@@ -3049,213 +3177,131 @@ const systemMessageStyle = cva("w-full select-none py-2 text-wrap-balance text-c
   }
 });
 const Conversation = ({
-  messages,
-  isBotTyping
+  lastSentMessageFooter
 }) => {
+  var _a;
+  const messages = ((_a = index.store.current$.value.flow) == null ? void 0 : _a.data.messages) ?? [];
+  index.p(() => {
+    chatStore.scrollToEnd.smooth();
+  }, [messages.length]);
   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) => 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) => {
-          return index.o(ChatBubble, {
-            side: authorToSide[message2.author],
-            children: message2.text
-          }, 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"
+      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
-          }
-        })).with({
-          type: "file"
-        }, (file) => {
-          return index.o(FileThumbnail, {
-            class: file.author === "bot" ? "" : "ml-auto",
-            file: {
-              name: file.fileName,
-              sizeKb: file.fileSizeKb
-            }
-          });
-        }).exhaustive()
-      }, i2))
-    }), index.o("aside", {
-      "aria-hidden": true,
-      children: isBotTyping && index.o(TypingIndicator, {})
-    })]
+              });
+            }).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
+                }
+              });
+            }).exhaustive()
+          })
+        }, i2);
+      })
+    }), index.o(TypingIndicator, {}, "typing")]
   });
 };
-const TYPING_SPEED_MS_PER_CHARACTER = 25;
-const useChatService = () => {
-  const chatRef = index._$1(null);
-  const [isBotTyping, setIsBotTyping] = index.h(false);
-  const [onSubmitSuccessFn, setOnSubmitSuccessFn] = index.h(() => () => {
-  });
-  const scrollToEnd = index.F(() => (options2) => {
-    var _a;
-    return (_a = chatRef.current) == null ? void 0 : _a.scrollTo({
-      top: chatRef.current.scrollHeight,
-      ...options2
-    });
-  }, [chatRef]);
-  const chatService = index.F(() => ({
-    send: async ({
-      message,
-      signal,
-      groupId
-    }) => {
-      await index.N(message).with({
-        author: "bot",
-        type: "text"
-      }, async (message2) => {
-        if (signal == null ? void 0 : signal.aborted)
-          throw new AbortedError();
-        setIsBotTyping(true);
-        const typingTime = Math.min(Math.max(20, message2.text.length), 100) * TYPING_SPEED_MS_PER_CHARACTER;
-        await new Promise((resolve) => {
-          return setTimeout(resolve, typingTime, {
-            signal
-          });
-        });
-        setIsBotTyping(false);
-      }).otherwise(async () => void 0);
-      if (signal == null ? void 0 : signal.aborted)
-        throw new AbortedError();
-      index.application.addMessage(message, groupId);
-    },
-    input: async ({
-      input,
-      signal
-    }) => {
-      if (signal == null ? void 0 : signal.aborted)
-        throw new AbortedError();
-      index.application.setInput(input);
-      return await new Promise((resolve) => {
-        const submitFunction = (submission) => {
-          if (signal == null ? void 0 : signal.aborted)
-            throw new AbortedError();
-          index.application.setInput(void 0);
-          if (input.key) {
-            index.application.setSubmission;
-            index.application.setSubmission(input.key, submission);
-          }
-          resolve(submission);
-        };
-        setOnSubmitSuccessFn(() => submitFunction);
-      });
-    }
-  }), []);
-  return {
-    chatRef,
-    chatService,
-    isBotTyping,
-    onSubmitSuccessFn,
-    scrollToEnd
-  };
-};
-const JobApplicationContent = ({
-  currentApplication,
+const ChatbotBody = ({
   logger,
   apiClient,
   analytics
 }) => {
+  const {
+    flow
+  } = index.store.current$.value;
+  index.invariant(flow, "Flow is required to exist to show chatbot body");
+  const view = index.store.viewState$.value;
   const {
     chatRef,
-    chatService,
-    isBotTyping,
-    onSubmitSuccessFn,
-    scrollToEnd
+    chatService
   } = useChatService();
-  const view = index.viewState.value;
-  const flow = currentApplication.flow;
-  const job = currentApplication.job;
+  const [undoFn, setUndoFn] = index.h();
   index.y(() => {
     if (view === "maximised")
-      scrollToEnd({
-        behavior: "instant"
-      });
-  }, [scrollToEnd, view]);
-  index.p(() => {
-    scrollToEnd({
-      behavior: "smooth"
-    });
-  }, [currentApplication.data.messages, scrollToEnd]);
+      chatStore.scrollToEnd.instant();
+  }, [view]);
   index.y(() => {
     const {
       state,
-      application: currentApplication2
-    } = index.application.current$.peek();
+      flow: currentApplication
+    } = index.store.current$.peek();
     if (state !== "loaded")
       throw new Error(index.ERROR_MESSAGES.invalid_state);
-    let fromNodeId = currentApplication2.data.currentNodeId;
-    scrollToEnd({
-      behavior: "instant"
-    });
-    index.application.setInput(void 0);
-    if (currentApplication2.data.isFinished)
+    let fromNodeId = currentApplication.data.nodeHistory.at(-1);
+    chatStore.scrollToEnd.instant();
+    index.store.setInput(void 0);
+    if (currentApplication.data.isFinished)
       return;
-    if (fromNodeId === null) {
-      fromNodeId = getHeadOrThrow(flow.nodes).id;
-      index.application.setCurrentNodeId(fromNodeId);
-      analytics.log({
-        event: "APPLY_START",
-        attributionKey: `job_${job.id}`,
-        properties: {
-          job_id: job.id,
-          flow_id: flow.id
-        }
-      });
+    if (fromNodeId === void 0) {
+      fromNodeId = index.getHeadOrThrow(flow.nodes).id;
+      index.store.setCurrentNodeId(fromNodeId);
     } else {
-      index.application.removeLastGroupMessagesById(fromNodeId);
+      index.store.removeMessagesSentByNodeIds([fromNodeId]);
     }
     const {
       interpret: interpret2,
-      abort
+      abort,
+      undo
     } = createFlowInterpreter({
-      context: {
-        jobId: job.id,
-        flowId: flow.id
-      },
+      context: flow.context,
       analytics,
       apiClient,
       logger,
@@ -3264,57 +3310,87 @@ const JobApplicationContent = ({
       // We need to get fresh submissions, that’s why we call `peek` here.
       getSubmissions: () => {
         var _a;
-        return (_a = index.application.current$.peek().application) == null ? void 0 : _a.data.submissions;
+        return (_a = index.store.current$.peek().flow) == null ? void 0 : _a.data.submissions;
       },
       onInterpret: (node, prevNode) => {
-        const currentState = index.application.current$.peek().application;
+        const currentState = index.store.current$.peek().flow;
         index.invariant(currentState);
         if (prevNode) {
           currentState.data.sequence = currentState.data.sequence + 1;
           analytics.log({
             event: "FLOW_NODE",
-            attributionKey: `job_${job.id}`,
             properties: {
               flow_id: flow.id,
               flow_version: flow.version,
-              job_id: job.id,
               from_node_id: prevNode.id,
               to_node_id: node.id,
               sequence: currentState.data.sequence,
               flow_session_id: currentState.data.flowSessionId
-            }
+            },
+            customProperties: flow.context
           });
         }
-        index.application.setCurrentNodeId(node.id);
+        index.store.setCurrentNodeId(node.id);
       },
       onFlowEnd: async () => {
-        index.application.markAsFinished();
+        index.store.markAsFinished();
       }
     });
+    setUndoFn(() => undo);
     interpret2(fromNodeId);
     return abort;
-  }, [analytics, apiClient, chatService, logger, scrollToEnd, flow, job.id, currentApplication.startedAt]);
+  }, [analytics, apiClient, chatService, logger, flow]);
   return index.o(index.k, {
     children: [index.o("div", {
       ref: chatRef,
-      className: "hide-scrollbars relative flex max-w-full flex-grow flex-col overflow-y-scroll",
+      className: "hide-scrollbars relative flex w-full max-w-full flex-grow flex-col overflow-y-scroll",
       style: {
         WebkitOverflowScrolling: "touch",
-        paddingBottom: index.inputHeight.value
+        paddingBottom: index.store.inputHeight$.value
       },
-      children: index.o(index.AnimatePresence, {
-        children: index.o(Conversation, {
-          isBotTyping,
-          messages: currentApplication.data.messages
+      children: index.o(Conversation, {
+        lastSentMessageFooter: flow.data.isFinished || !undoFn ? null : index.o(UndoButton, {
+          undoFn
         })
       })
-    }), index.o(ChatInput, {
-      input: currentApplication.data.currentInput,
-      onInputChange: () => scrollToEnd({
-        behavior: "smooth"
-      }),
-      onSubmit: onSubmitSuccessFn
-    })]
+    }), index.o(ChatInput, {})]
+  });
+};
+const getNodeKeys = (node) => {
+  if ("key" in node.data && node.data.key)
+    return [node.data.key];
+  if ("keys" in node.data)
+    return Object.values(node.data.keys).filter((key) => typeof key === "string");
+  return [];
+};
+const UndoButton = ({
+  undoFn
+}) => {
+  return index.o("div", {
+    class: "absolute bottom-0 right-0 flex w-full translate-y-full justify-end",
+    children: index.o("button", {
+      class: "fr touch-hitbox text-neutral-9 hover:text-neutral-12 rounded-full p-1 text-right text-xs transition-all",
+      onClick: async () => {
+        const {
+          flow
+        } = index.store.current$.peek();
+        index.invariant(flow);
+        const {
+          removed
+        } = undoFn(flow.data.nodeHistory);
+        const removedNodeIds = flow.data.nodeHistory.splice(-removed);
+        if (removedNodeIds.length === 0)
+          return;
+        index.store.removeMessagesSentByNodeIds(removedNodeIds);
+        index.store.setInput(void 0);
+        removedNodeIds.pop();
+        removedNodeIds.map((nodeId) => flow.nodes.find((node) => node.id === nodeId)).filter(Boolean).flatMap(getNodeKeys).forEach((key) => delete flow.data.submissions[key]);
+        index.store.current$.value = {
+          ...index.store.current$.value
+        };
+      },
+      children: "Undo"
+    })
   });
 };
-exports.JobApplicationContent = JobApplicationContent;
+exports.ChatbotBody = ChatbotBody;