@inploi/plugin-chatbot 3.12.7 → 3.13.1

package/dist/{chatbot-body-273e1510.cjs → chatbot-body-56aa93b9.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-0fac2e23.cjs");
+const index = require("./index-4d52a3ee.cjs");
 require("@inploi/sdk");
 const followNodes = ({
   node,
@@ -454,197 +454,39 @@ async function interpretQuestionBooleanNode({
   }
   next(node.nextId);
 }
-const dummyDivBecauseGoogleRequiresIt = document.createElement("div");
-const keyToAddressComponnents = {
-  line1: ["street_number", "floor", "room", "premise"],
-  line2: ["subpremise", "street_address", "route"],
-  line3: ["sublocality", "neighborhood"],
-  city: ["locality", "postal_town"],
-  state: ["administrative_area_level_1"],
-  postcode: ["postal_code"],
-  country: ["country"]
-};
-const fieldMapKeys = Object.keys(keyToAddressComponnents);
 async function interpretQuestionAddressNode({
   chat,
   next,
-  node,
-  logger
+  node
 }) {
-  if (fieldMapKeys.every((key) => node.data.keys[key] === null))
-    return next(node.nextId);
-  const {
-    google
-  } = window;
   await chat.sendMessage({
     author: "bot",
     type: "text",
     text: node.data.question
   });
-  const askForAddress = async (defaultValues) => {
-    const addressFields = [{
-      label: "Postcode",
-      key: node.data.keys.postcode,
-      optional: false,
-      defaultValue: defaultValues.postcode
-    }, {
-      label: "Line 1",
-      key: node.data.keys.line1,
-      optional: false,
-      defaultValue: defaultValues.line1
-    }, {
-      label: "Line 2",
-      key: node.data.keys.line2,
-      optional: true,
-      defaultValue: defaultValues.line2
-    }, {
-      label: "Line 3",
-      key: node.data.keys.line3,
-      optional: true,
-      defaultValue: defaultValues.line3
-    }, {
-      label: "City",
-      key: node.data.keys.city,
-      optional: false,
-      defaultValue: defaultValues.city
-    }, {
-      label: "State/County/Province",
-      key: node.data.keys.state,
-      optional: true,
-      defaultValue: defaultValues.state
-    }, {
-      label: "Country",
-      key: node.data.keys.country,
-      optional: false,
-      defaultValue: defaultValues.country
-    }];
-    for (const field of addressFields) {
-      if (field.key === null)
-        continue;
-      await chat.sendMessage({
-        author: "bot",
-        type: "text",
-        text: field.label
-      });
-      const {
-        value
-      } = await chat.userInput({
-        type: "text",
-        key: field.key,
-        config: {
-          format: "text",
-          optional: field.optional,
-          defaultValue: field.defaultValue
-        }
-      });
-      if (value === null) {
-        await chat.sendMessage({
-          type: "system",
-          variant: "info",
-          text: "Skipped"
-        });
-      } else {
-        await chat.sendMessage({
-          author: "user",
-          type: "text",
-          text: value
-        });
-      }
-    }
-  };
-  if (!index.hasProp(window, "google") || !index.hasProp(window.google, "maps") || !index.hasProp(window.google.maps, "places")) {
-    logger.warn("Google maps not available, falling back to manual input.");
-    logger.info("If you’d like to use the address autocomplete, please insert the google maps API snippet in your website and make sure it has access to the *places* library.");
-    await askForAddress({});
-    return next(node.nextId);
-  }
-  const autocomplete = new google.maps.places.AutocompleteService();
-  const places = new google.maps.places.PlacesService(dummyDivBecauseGoogleRequiresIt);
-  const {
-    value: search
-  } = await chat.userInput({
-    type: "text",
-    key: "_internal-address-search",
-    config: {
-      format: "text",
-      optional: false,
-      placeholder: "Search for your address"
-    }
-  });
-  if (search === null)
-    return next(node.id);
-  await chat.sendMessage({
-    author: "user",
-    type: "text",
-    text: `Search for “${search}”`
-  });
-  const {
-    predictions
-  } = await autocomplete.getPlacePredictions({
-    input: search
-  });
-  const {
-    value: [selected]
-  } = await chat.userInput({
-    type: "multiple-choice",
-    key: void 0,
+  const response = await chat.userInput({
+    type: "address",
+    key: node.data.key,
     config: {
-      options: predictions.slice(0, 4).map((p) => ({
-        label: p.description,
-        value: p.place_id
-      })).concat({
-        label: "None of these",
-        value: "none"
-      }),
-      maxSelected: 1,
-      minSelected: 1
+      optional: node.data.optional,
+      keys: node.data.keys,
+      placeholder: node.data.placeholder
     }
   });
-  if (!selected || selected === "none") {
-    return next(node.id);
-  }
-  const result = await new Promise((resolve, reject) => places.getDetails({
-    placeId: selected,
-    fields: ["address_components"]
-  }, (result2, status) => {
-    if (status !== google.maps.places.PlacesServiceStatus["OK"])
-      return reject(status);
-    if (result2 === null)
-      return reject("ZERO_RESULTS");
-    return resolve({
-      ok: true,
-      place: result2
-    });
-  })).catch(async (e) => {
-    logger.error("Failed to get address details", e);
-    return {
-      ok: false
-    };
-  });
-  if (result.ok === false) {
+  if (response.value === null) {
     await chat.sendMessage({
       type: "system",
-      variant: "error",
-      text: "Failed to get address details"
+      variant: "info",
+      text: "Skipped"
+    });
+  } else {
+    const addressMessage = Object.values(response.value).filter((line) => line && line.trim().length > 0).join(", ");
+    await chat.sendMessage({
+      author: "user",
+      type: "text",
+      text: addressMessage
     });
-    await askForAddress({});
-    return next(node.id);
   }
-  const addressComponents = result.place.address_components;
-  const autoFilledInputs = addressComponents ? fieldMapKeys.reduce((acc, key) => {
-    const componentTypes = keyToAddressComponnents[key];
-    const value = addressComponents.filter((component) => component.types.some((type) => componentTypes.includes(type))).map((component) => component.long_name).join(", ");
-    if (value) {
-      acc[key] = value;
-    }
-    return acc;
-  }, {}) : {};
-  await chat.sendMessage({
-    author: "bot",
-    type: "text",
-    text: "Please confirm or adjust your address:"
-  });
-  await askForAddress(autoFilledInputs);
   return next(node.nextId);
 }
 async function interpretQuestionFileNode({
@@ -743,7 +585,14 @@ const isIfBlockConditionMet = (ifBlock, submissions) => {
     answer: {
       type: "file"
     }
-  }, () => false).exhaustive();
+  }, () => false).with({
+    answer: {
+      type: "address",
+      value: index._.any
+    }
+  }, () => {
+    return false;
+  }).exhaustive();
 };
 const interpolateString = (str, context) => {
   const regex = /{{\s*([^}]+?)\s*(?:\|\s*([^}]+?)\s*)?}}/g;
@@ -766,6 +615,203 @@ const interpolateString = (str, context) => {
     }
   });
 };
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+function debounce(func, wait, immediate) {
+  var timeout, args, context, timestamp, result;
+  if (null == wait)
+    wait = 100;
+  function later() {
+    var last = Date.now() - timestamp;
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  }
+  var debounced = function() {
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout)
+      timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+    return result;
+  };
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  return debounced;
+}
+debounce.debounce = debounce;
+var debounce_1 = debounce;
+const createDebounce = /* @__PURE__ */ getDefaultExportFromCjs(debounce_1);
+function useMeasure(_temp) {
+  let {
+    debounce: debounce2,
+    scroll,
+    polyfill,
+    offsetSize
+  } = _temp === void 0 ? {
+    debounce: 0,
+    scroll: false,
+    offsetSize: false
+  } : _temp;
+  const ResizeObserver = polyfill || (typeof window === "undefined" ? class ResizeObserver {
+  } : window.ResizeObserver);
+  if (!ResizeObserver) {
+    throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
+  }
+  const [bounds, set2] = index.h({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0
+  });
+  const state = index._$1({
+    element: null,
+    scrollContainers: null,
+    resizeObserver: null,
+    lastBounds: bounds
+  });
+  const scrollDebounce = debounce2 ? typeof debounce2 === "number" ? debounce2 : debounce2.scroll : null;
+  const resizeDebounce = debounce2 ? typeof debounce2 === "number" ? debounce2 : debounce2.resize : null;
+  const mounted = index._$1(false);
+  index.p(() => {
+    mounted.current = true;
+    return () => void (mounted.current = false);
+  });
+  const [forceRefresh, resizeChange, scrollChange] = index.F(() => {
+    const callback = () => {
+      if (!state.current.element)
+        return;
+      const {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x,
+        y
+      } = state.current.element.getBoundingClientRect();
+      const size = {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x,
+        y
+      };
+      if (state.current.element instanceof HTMLElement && offsetSize) {
+        size.height = state.current.element.offsetHeight;
+        size.width = state.current.element.offsetWidth;
+      }
+      Object.freeze(size);
+      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size))
+        set2(state.current.lastBounds = size);
+    };
+    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];
+  }, [set2, offsetSize, scrollDebounce, resizeDebounce]);
+  function removeListeners() {
+    if (state.current.scrollContainers) {
+      state.current.scrollContainers.forEach((element) => element.removeEventListener("scroll", scrollChange, true));
+      state.current.scrollContainers = null;
+    }
+    if (state.current.resizeObserver) {
+      state.current.resizeObserver.disconnect();
+      state.current.resizeObserver = null;
+    }
+  }
+  function addListeners() {
+    if (!state.current.element)
+      return;
+    state.current.resizeObserver = new ResizeObserver(scrollChange);
+    state.current.resizeObserver.observe(state.current.element);
+    if (scroll && state.current.scrollContainers) {
+      state.current.scrollContainers.forEach((scrollContainer) => scrollContainer.addEventListener("scroll", scrollChange, {
+        capture: true,
+        passive: true
+      }));
+    }
+  }
+  const ref = (node) => {
+    if (!node || node === state.current.element)
+      return;
+    removeListeners();
+    state.current.element = node;
+    state.current.scrollContainers = findScrollContainers(node);
+    addListeners();
+  };
+  useOnWindowScroll(scrollChange, Boolean(scroll));
+  useOnWindowResize(resizeChange);
+  index.p(() => {
+    removeListeners();
+    addListeners();
+  }, [scroll, scrollChange, resizeChange]);
+  index.p(() => removeListeners, []);
+  return [ref, bounds, forceRefresh];
+}
+function useOnWindowResize(onWindowResize) {
+  index.p(() => {
+    const cb = onWindowResize;
+    window.addEventListener("resize", cb);
+    return () => void window.removeEventListener("resize", cb);
+  }, [onWindowResize]);
+}
+function useOnWindowScroll(onScroll, enabled) {
+  index.p(() => {
+    if (enabled) {
+      const cb = onScroll;
+      window.addEventListener("scroll", cb, {
+        capture: true,
+        passive: true
+      });
+      return () => void window.removeEventListener("scroll", cb, true);
+    }
+  }, [onScroll, enabled]);
+}
+function findScrollContainers(element) {
+  const result = [];
+  if (!element || element === document.body)
+    return result;
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = window.getComputedStyle(element);
+  if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+    result.push(element);
+  return [...result, ...findScrollContainers(element.parentElement)];
+}
+const keys = ["x", "y", "top", "bottom", "left", "right", "width", "height"];
+const areBoundsEqual = (a2, b) => keys.every((key) => a2[key] === b[key]);
 const SendButton = ({
   class: className,
   ...props
@@ -906,6 +952,344 @@ const SkipButton = ({
     })]
   }), "Skip"]
 });
+const keyToAddressComponents = {
+  line1: ["street_number", "floor", "room", "premise"],
+  line2: ["subpremise", "street_address", "route"],
+  line3: ["sublocality", "neighborhood"],
+  city: ["locality", "postal_town"],
+  state: ["administrative_area_level_1"],
+  postcode: ["postal_code"],
+  country: ["country"]
+};
+const fieldMapKeys = Object.keys(keyToAddressComponents);
+const addressComponentsToFields = (addressComponents) => {
+  return fieldMapKeys.reduce((acc, key) => {
+    const componentTypes = keyToAddressComponents[key];
+    const value = addressComponents.filter((component) => component.types.some((type) => componentTypes.includes(type))).map((component) => component.long_name).join(", ");
+    if (value) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+};
+const dummyDivBecauseGoogleRequiresIt = document.createElement("div");
+const useGooglePlaces = () => {
+  return index.F(() => {
+    const {
+      google
+    } = window;
+    if ("google" in window === false || "maps" in google === false || "places" in google.maps === false) {
+      return {
+        enabled: false
+      };
+    }
+    const autocomplete = new google.maps.places.AutocompleteService();
+    const places = new google.maps.places.PlacesService(dummyDivBecauseGoogleRequiresIt);
+    return {
+      enabled: true,
+      getPredictions: async (input) => {
+        const {
+          predictions
+        } = await autocomplete.getPlacePredictions({
+          input
+        });
+        return predictions.map((p) => ({
+          label: p.description,
+          value: p.place_id
+        }));
+      },
+      getPlaceDetails: async (placeId) => {
+        const result = await new Promise((resolve, reject) => places.getDetails({
+          placeId,
+          fields: ["address_components"]
+        }, (result2, status) => {
+          if (status !== google.maps.places.PlacesServiceStatus["OK"])
+            return reject(status);
+          if (result2 === null)
+            return reject("ZERO_RESULTS");
+          return resolve({
+            ok: true,
+            place: result2
+          });
+        })).catch(async (e) => {
+          console.error("Failed to get address details", e);
+          return {
+            ok: false
+          };
+        });
+        return result;
+      }
+    };
+  }, []);
+};
+const BackButton = (props) => {
+  return index.o("button", {
+    type: "button",
+    class: "text-neutral-10 hover:bg-neutral-4 hover:text-neutral-12 hover:border-neutral-5 flex items-center gap-1 rounded-[18px] border border-solid border-transparent px-3 py-1 pl-1.5 text-sm transition-colors",
+    ...props,
+    children: [index.o("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      stroke: "currentColor",
+      "stroke-width": "1.5",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: index.o("path", {
+        d: "M10 3L5 8L10 13"
+      })
+    }), index.o("span", {
+      children: "Back"
+    })]
+  });
+};
+const optionManual = {
+  label: "Fill in manually",
+  value: ""
+};
+const ChatInputAddress = ({
+  input,
+  onSubmitSuccess
+}) => {
+  const [query, setQuery] = index.h("");
+  const [addressFields, setAddressFields] = index.h();
+  const [suggestions, setSuggestions] = index.h([]);
+  const [placeId, setPlaceId] = index.h();
+  const {
+    enabled,
+    getPredictions,
+    getPlaceDetails
+  } = useGooglePlaces();
+  const [state, setState] = index.h(enabled ? "query" : "manual");
+  const debouncedQuery = index.F(() => index.debounce((query2) => {
+    index.invariant(enabled, "Query state should not be enabled if Google Places isn't available");
+    setQuery(query2);
+    if (query2 === "") {
+      setSuggestions([]);
+      return;
+    }
+    getPredictions(query2).then((predictions) => {
+      setSuggestions(predictions);
+    });
+  }, 500), [enabled, getPredictions]);
+  index.p(() => {
+    if (!enabled)
+      return;
+    if (placeId === void 0 || placeId === "")
+      return;
+    getPlaceDetails(placeId).then((result) => {
+      if (!result.ok || !result.place.address_components) {
+        setAddressFields({});
+        return;
+      }
+      const fields = addressComponentsToFields(result.place.address_components);
+      setAddressFields(fields);
+      setState("details");
+    });
+    return () => {
+      setAddressFields(void 0);
+    };
+  }, [placeId, getPlaceDetails, enabled]);
+  switch (state) {
+    case "query": {
+      index.invariant(enabled, "Query state should not be enabled if Google Places isn't available");
+      return index.o(ChatInputAddressQuery, {
+        input,
+        onSkip: () => onSubmitSuccess(null),
+        onAddressSelect: (e) => {
+          setPlaceId(e);
+          setState("loading");
+        },
+        onInputChange: debouncedQuery,
+        suggestions,
+        query
+      });
+    }
+    case "loading":
+      return index.o(ChatInputAddressDetails, {
+        input,
+        onSubmitSuccess,
+        addressFields: {},
+        actions: index.o(BackButton, {
+          onClick: () => {
+            setPlaceId(void 0);
+            setState("query");
+          }
+        })
+      });
+    case "details":
+      index.invariant(addressFields !== void 0);
+      return index.o(ChatInputAddressDetails, {
+        input,
+        onSubmitSuccess,
+        addressFields,
+        actions: index.o(BackButton, {
+          onClick: () => {
+            setPlaceId(void 0);
+            setState("query");
+          }
+        })
+      });
+    case "manual":
+      return index.o(ChatInputAddressDetails, {
+        input,
+        onSubmitSuccess,
+        addressFields: {},
+        actions: enabled ? index.o(BackButton, {
+          onClick: () => {
+            setPlaceId(void 0);
+            setState("query");
+          }
+        }) : void 0
+      });
+  }
+};
+const ChatInputAddressQuery = ({
+  input,
+  onSkip,
+  suggestions,
+  onAddressSelect,
+  query,
+  onInputChange
+}) => {
+  const ref = index._$1(null);
+  index.y(() => {
+    if (ref.current) {
+      ref.current.focus();
+      ref.current.select();
+    }
+  }, []);
+  return index.o(index.k, {
+    children: [index.o("form", {
+      noValidate: true,
+      onSubmit: (e) => {
+        e.preventDefault;
+      },
+      class: "flex flex-col justify-end gap-1 p-2.5",
+      children: [index.o("input", {
+        onChange: (e) => {
+          onInputChange(e.currentTarget.value);
+        },
+        ref,
+        name: "address",
+        id: "chat-address",
+        autocomplete: "on",
+        autoFocus: true,
+        class: "outline-divider ease-expo-out placeholder:text-neutral-10 text-neutral-12 focus-visible:outline-accent-7 caret-accent-9 bg-lowest w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all",
+        placeholder: input.config.placeholder || "Search an address",
+        defaultValue: query
+      }), !input.config.optional && index.o(SkipButton, {
+        class: "absolute right-3",
+        onClick: onSkip
+      })]
+    }), index.o("ul", {
+      children: [suggestions.map((suggestion) => index.o("li", {
+        children: index.o("button", {
+          class: "text-neutral-11 fr hover:bg-neutral-3 hover:text-neutral-12 border-b-neutral-3 flex w-full items-center border border-b border-solid border-transparent px-4 py-3 text-sm transition-colors duration-100",
+          onClick: () => {
+            onAddressSelect(suggestion.value);
+          },
+          children: [index.o("span", {
+            class: "flex-grow",
+            children: suggestion.label
+          }), index.o("svg", {
+            class: "flex-none",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            stroke: "currentColor",
+            "stroke-width": "1.5",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: index.o("path", {
+              d: "M6 3L11 8L6 13"
+            })
+          })]
+        })
+      }, suggestion.label)), index.o("li", {
+        children: index.o("button", {
+          class: "text-neutral-11 fr hover:bg-neutral-3 hover:text-neutral-12 border-b-neutral-3 flex w-full items-center border border-b border-solid border-transparent px-4 py-3 text-sm transition-colors duration-100",
+          onClick: () => {
+            onAddressSelect(optionManual.value);
+          },
+          children: index.o("span", {
+            class: "flex-grow",
+            children: optionManual.label
+          })
+        })
+      }, optionManual.label)]
+    })]
+  });
+};
+const addressKeyToLabel = {
+  line1: "Line 1",
+  line2: "Line 2",
+  line3: "Line 3",
+  city: "City",
+  state: "State",
+  postcode: "Postcode",
+  country: "Country"
+};
+const ChatInputAddressDetails = ({
+  addressFields,
+  onSubmitSuccess,
+  actions
+}) => {
+  const ref = index._$1(null);
+  index.y(() => {
+    if (ref.current) {
+      const firstInput = ref.current.querySelector("input");
+      if (firstInput) {
+        firstInput.focus();
+        firstInput.select();
+      }
+    }
+  }, []);
+  return index.o("form", {
+    class: "bg-neutral-1/90 flex flex-col justify-end gap-2 p-2",
+    onSubmit: (e) => {
+      const formData = new FormData(e.currentTarget);
+      const fields = Object.fromEntries(formData.entries());
+      onSubmitSuccess(fields);
+    },
+    children: [index.o("div", {
+      class: "bg-neutral-3 border-neutral-5 grid items-center gap-1.5 rounded-2xl border pb-2 pl-4 pr-3 pt-3 [grid-template-columns:min-content_1fr]",
+      ref,
+      children: fieldMapKeys.map((key, i2) => {
+        const labelId = `isdk_${key}`;
+        return index.o(index.k, {
+          children: [index.o("label", {
+            for: labelId,
+            class: "text-neutral-9 [&:has(+*>input:focus)]:text-neutral-11 w-24 pb-2 text-xs uppercase leading-3 tracking-widest transition-colors",
+            children: addressKeyToLabel[key]
+          }), index.o("div", {
+            class: "flex flex-col items-stretch gap-1.5",
+            children: [index.o("input", {
+              autoFocus: i2 === 0 ? true : void 0,
+              class: "text-neutral-12 hover:bg-neutral-4 placeholder:text-neutral-8 focus:bg-neutral-5 flex-1 rounded-lg border-solid bg-transparent px-3 py-1.5 text-base transition-colors focus:outline-none",
+              name: key,
+              id: labelId,
+              defaultValue: addressFields[key],
+              required: true
+            }), i2 !== fieldMapKeys.length - 1 && index.o("hr", {
+              class: "border-b-neutral-5 m-0 w-full border-b border-solid"
+            }), i2 === fieldMapKeys.length - 1 && index.o("hr", {
+              class: "m-0 w-full border-b border-b-transparent"
+            })]
+          })]
+        });
+      })
+    }), index.o("div", {
+      class: "flex w-full flex-1 ",
+      children: [index.o("div", {
+        class: "flex-grow",
+        children: actions
+      }), index.o(SendButton, {
+        class: "flex items-center justify-center"
+      })]
+    })]
+  });
+};
 const useFocusOnMount = () => {
   const focusRef = index._$1(null);
   index.p(() => {
@@ -919,11 +1303,9 @@ const AnswerSchema = index.picklist(options);
 const FIELD_NAME = "answer";
 const ChatInputBoolean = ({
   input,
-  onSubmitSuccess,
-  onHeightChange
+  onSubmitSuccess
 }) => {
   const focusRef = useFocusOnMount();
-  onHeightChange();
   return index.o("form", {
     noValidate: true,
     class: "",
@@ -967,14 +1349,8 @@ const ChatInputBoolean = ({
   });
 };
 const InputError = ({
-  error,
-  onAnimationComplete
+  error
 }) => {
-  index.y(() => {
-    if (error) {
-      onAnimationComplete();
-    }
-  }, [error, onAnimationComplete]);
   if (!error)
     return null;
   return index.o("div", {
@@ -1076,8 +1452,7 @@ const trimFileName = (fileName, maxLength) => {
 };
 const ChatInputFile = ({
   input,
-  onSubmitSuccess,
-  onHeightChange
+  onSubmitSuccess
 }) => {
   var _a;
   const submission = (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key];
@@ -1223,7 +1598,6 @@ const ChatInputFile = ({
         })]
       })]
     }), error && index.o(InputError, {
-      onAnimationComplete: onHeightChange,
       error
     })]
   });
@@ -1862,7 +2236,7 @@ function createFormControl(props = {}, flushRootRender) {
   const validationModeBeforeSubmit = getValidationModes(_options.mode);
   const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
   const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-  const debounce = (callback) => (wait) => {
+  const debounce2 = (callback) => (wait) => {
     clearTimeout(timer);
     timer = setTimeout(callback, wait);
   };
@@ -1956,7 +2330,7 @@ function createFormControl(props = {}, flushRootRender) {
     const previousFieldError = get(_formState.errors, name);
     const shouldUpdateValid = _proxyFormState.isValid && isBoolean(isValid) && _formState.isValid !== isValid;
     if (props.delayError && error) {
-      delayErrorCallback = debounce(() => updateErrors(name, error));
+      delayErrorCallback = debounce2(() => updateErrors(name, error));
       delayErrorCallback(props.delayError);
     } else {
       clearTimeout(timer);
@@ -2713,8 +3087,7 @@ const getResolver$1 = (config) => {
 };
 const ChatInputMultipleChoice = ({
   input,
-  onSubmitSuccess,
-  onHeightChange
+  onSubmitSuccess
 }) => {
   var _a, _b;
   const submission = input.key ? (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
@@ -2790,7 +3163,6 @@ const ChatInputMultipleChoice = ({
     }), index.o("div", {
       class: "px-1",
       children: index.o(InputError, {
-        onAnimationComplete: onHeightChange,
         error: (_b = errors2.checked) == null ? void 0 : _b.root
       })
     })]
@@ -2872,8 +3244,7 @@ const getResolver = (config) => {
 };
 const ChatInputText = ({
   input,
-  onSubmitSuccess,
-  onHeightChange
+  onSubmitSuccess
 }) => {
   var _a;
   const submission = input.key ? (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
@@ -2936,7 +3307,6 @@ const ChatInputText = ({
           })]
         }), index.o(SendButton, {})]
       }), index.o(InputError, {
-        onAnimationComplete: onHeightChange,
         error: errors2.text
       })]
     })
@@ -2945,16 +3315,9 @@ const ChatInputText = ({
 const ChatInput = () => {
   var _a;
   const input = (_a = index.store.current$.value.flow) == null ? void 0 : _a.data.currentInput;
+  const [inputContentRef, bounds] = useMeasure();
   const inputWrapperRef = index._$1(null);
-  const inputContentRef = index._$1(null);
-  const updateHeight = index.T(() => {
-    if (inputContentRef.current) {
-      index.store.inputHeight$.value = inputContentRef.current.getBoundingClientRect().height;
-    }
-  }, []);
-  index.p(() => {
-    updateHeight();
-  }, [input == null ? void 0 : input.type, updateHeight]);
+  index.store.inputHeight$.value = bounds.height;
   index.p(() => {
     const wrapper = inputWrapperRef.current;
     if (!wrapper)
@@ -2974,16 +3337,15 @@ const ChatInput = () => {
   });
   return index.o("div", {
     ref: inputWrapperRef,
+    class: "ease-expo-out absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-xl transition-all duration-700 will-change-[height]",
     style: {
-      height: index.store.inputHeight$.value
+      height: bounds.height
     },
-    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: inputContentRef,
-      class: "border-divider border-t",
+      class: "border-divider flex flex-col justify-end border-t",
       children: index.N({
-        input,
-        onHeightChange: updateHeight
+        input
       }).with({
         input: index._.nullish
       }, () => index.o("div", {
@@ -3033,6 +3395,13 @@ const ChatInput = () => {
       }, (props) => index.o(ChatInputSubmit, {
         onSubmitSuccess: handleSubmitSuccess(props.input.type),
         ...props
+      })).with({
+        input: {
+          type: "address"
+        }
+      }, (props) => index.o(ChatInputAddress, {
+        onSubmitSuccess: handleSubmitSuccess(props.input.type),
+        ...props
       })).exhaustive()
     })
   });