@inploi/plugin-chatbot 3.7.0 → 3.9.0

package/dist/interpreter.d.ts

@@ -1,6 +1,6 @@
 import { FlowNode } from '@inploi/core/flows';
 import { AnalyticsService, ApiClient, Logger } from '@inploi/sdk';
-import { ChatInput } from './ui/chat-input/chat-input';
+import { ChatInput } from './components/chat-input/chat-input';
 import { ApplicationSubmission, ChatMessage, KeyToSubmissionMap } from './chatbot.state';
 export declare const followNodes: ({ node, nodes, stopWhen, }: {
     node: FlowNode;
@@ -23,11 +23,11 @@ export type ChatService = {
         type: TType;
     }>>;
 };
-type ChatbotInterpreterParams = {
+type ChatbotInterpreterParams<TContext extends Record<string, unknown>> = {
     apiClient: ApiClient;
     analytics: AnalyticsService;
     logger: Logger;
-    context: Record<string, unknown>;
+    context: TContext;
     flow: FlowNode[];
     getSubmissions: () => KeyToSubmissionMap | undefined;
     chatService: ChatService;
@@ -38,8 +38,9 @@ type ChatbotInterpreterParams = {
     /** When node is interpreted */
     onInterpret?: (node: FlowNode, prevNode?: FlowNode) => void;
 };
-export declare const createFlowInterpreter: ({ flow, analytics, logger, context, apiClient, getSubmissions, chatService, onFlowEnd, onInterpret, }: ChatbotInterpreterParams) => {
+export declare const createFlowInterpreter: <TContext extends Record<string, unknown>>({ flow, analytics, logger, context, apiClient, getSubmissions, chatService, onFlowEnd, onInterpret, }: ChatbotInterpreterParams<TContext>) => {
     interpret: (startFromNodeId?: string) => Promise<void>;
     abort: () => void;
 };
+export declare const interpolateString: (str: string, context: KeyToSubmissionMap | undefined) => string;
 export {};

package/dist/{job-application-content-205c66b2.js → job-application-content-6683c944.js}

@@ -1,5 +1,6 @@
-import { _, N, i as invariant, o as o$1, c as clsx, a as _$1, p, b as parse, d as picklist, y, e as application, h, k, C as Cn, f as parseAsync, V as ValiError, g as object, t as transform, m as maxLength, j as minLength, r as record, l as boolean, s as string, n as email, u as url, q as regex, T, v as inputHeight, w as m, A as AnimatePresence, F, x as viewState, E as ERROR_MESSAGES } from "./index-1808db67.js";
+import { N, _, h as hasProp, i as invariant, o as o$1, c as clsx, a as _$1, p, b as parse, d as picklist, y, e as application, f as h, k, C as Cn, g as parseAsync, V as ValiError, j as object, t as transform, m as maxLength, l as minLength, r as record, n as boolean, s as string, q as email, u as url, v as regex, T, w as inputHeight, x as m, A as AnimatePresence, F, z as viewState, E as ERROR_MESSAGES } from "./index-6a43f107.js";
 import "@inploi/sdk";
+const kbToReadableSize = (kb) => N(kb).with(_.number.lte(1e3), () => `${Math.round(kb)}KB`).with(_.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)
@@ -233,8 +234,6 @@ async function interpretSubmitNode({
     method: "POST",
     body: JSON.stringify({
       ...context,
-      type: node.data.type,
-      ats: node.data.ats,
       integration_id: node.data.integrationId,
       anonymous_id: analytics.getAnonymousId(),
       submissions: getApplicationSubmissionsPayload(submissions || {})
@@ -285,12 +284,13 @@ async function interpretSubmitNode({
 async function interpretLinkNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     type: "link",
     href: node.data.href,
-    text: node.data.cta
+    text: interpolateString(node.data.cta, submissions)
   });
   next(node.nextId);
 }
@@ -305,12 +305,13 @@ async function interpretIfBlockNode({
 async function interpretTextNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.text
+    text: interpolateString(node.data.text, submissions)
   });
   next(node.nextId);
 }
@@ -331,12 +332,13 @@ async function interpretImageNode({
 async function interpretQuestionTextNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const reply = await chat.userInput({
     key: node.data.key,
@@ -365,12 +367,13 @@ async function interpretQuestionTextNode({
 async function interpretQuestionNumberNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const reply = await chat.userInput({
     key: node.data.key,
@@ -399,12 +402,13 @@ async function interpretQuestionNumberNode({
 async function interpretQuestionEnumNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const reply = await chat.userInput({
     key: node.data.key,
@@ -429,12 +433,13 @@ async function interpretQuestionEnumNode({
 async function interpretQuestionBooleanNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const input = await chat.userInput({
     key: node.data.key,
@@ -466,27 +471,205 @@ 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
+  node,
+  logger
 }) {
+  const {
+    google
+  } = window;
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: "Address questions are not implemented yet"
+    text: node.data.question
   });
-  next(node.nextId);
+  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) {
+      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 (!hasProp(window, "google") || !hasProp(window.google, "maps") || !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,
+    config: {
+      options: predictions.slice(0, 4).map((p2) => ({
+        label: p2.description,
+        value: p2.place_id
+      })).concat({
+        label: "None of these",
+        value: "none"
+      }),
+      maxSelected: 1,
+      minSelected: 1
+    }
+  });
+  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) {
+    await chat.sendMessage({
+      type: "system",
+      variant: "error",
+      text: "Failed to get address details"
+    });
+    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({
   node,
   chat,
-  next
+  next,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const files = await chat.userInput({
     key: node.data.key,
@@ -575,11 +758,33 @@ const isIfBlockConditionMet = (ifBlock, submissions) => {
     }
   }, () => false).exhaustive();
 };
+const interpolateString = (str, context) => {
+  const regex2 = /{{\s*([^}]+?)\s*(?:\|\s*([^}]+?)\s*)?}}/g;
+  return str.replace(regex2, (match2, key, defaultValue = "") => {
+    key = key.trim();
+    const submission = context == null ? void 0 : context[key];
+    if (!submission)
+      return defaultValue;
+    switch (submission.type) {
+      case "boolean":
+        return submission.value === "true" ? "true" : "false";
+      case "file":
+        if (!submission.value)
+          return "no files";
+        return submission.value.map((file) => `${file.name} (${kbToReadableSize(file.sizeKb)})`).join(", ");
+      case "multiple-choice":
+        return submission.value.join(", ");
+      default:
+        return submission.value || defaultValue;
+    }
+  });
+};
 const SendButton = ({
   class: className,
   ...props
 }) => o$1("button", {
-  class: clsx("bg-accent-7 active:bg-accent-10 active:text-accent-2 text-lowest pointer-coarse:touch-hitbox focus-visible:ring-accent-7/50 flex-shrink-0 rounded-full p-2 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className),
+  class: clsx("bg-accent-9 active:bg-accent-10 pointer-coarse:touch-hitbox fr flex-shrink-0 rounded-full p-2 text-white transition-all disabled:cursor-not-allowed disabled:opacity-50", className),
+  type: "submit",
   ...props,
   children: o$1("svg", {
     class: "block",
@@ -603,7 +808,8 @@ const SkipButton = ({
   class: className,
   ...props
 }) => o$1("button", {
-  class: clsx("focus-visible:ring-accent-7/50 text-neutral-9 flex flex-shrink-0 items-center justify-center gap-1 rounded-full py-[6px] pl-2 pr-3 text-sm underline-offset-2 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2", className),
+  type: "button",
+  class: clsx("fr text-neutral-9 flex flex-shrink-0 items-center justify-center gap-1 rounded-full py-[6px] pl-2 pr-3 text-sm underline-offset-2 transition-all", className),
   ...props,
   children: [o$1("svg", {
     class: "block",
@@ -666,7 +872,7 @@ const ChatInputBoolean = ({
           type: "submit",
           name: FIELD_NAME,
           value,
-          class: "bg-lowest ease-expo-out ring-neutral-12/5 text-neutral-12 active:ring-accent-7 active:bg-accent-2 active:text-accent-11 fr duration-snappy block flex-1 overflow-hidden rounded-2xl px-2.5 py-2.5 ring-2 transition-all selection:bg-transparent",
+          class: "bg-lowest ease-expo-out ring-divider text-neutral-12 active:ring-accent-7 active:bg-accent-2 active:text-accent-11 fr block flex-1 overflow-hidden rounded-2xl px-2.5 py-2.5 ring-2 transition-all selection:bg-transparent",
           children: o$1("p", {
             class: "truncate text-center text-base",
             children: input.config.labels[value]
@@ -698,7 +904,7 @@ const InputError = ({
     role: "alert",
     class: "text-error-11 flex max-w-full items-center gap-1 overflow-hidden rounded-full px-2 py-2",
     children: [o$1("svg", {
-      class: "text-error-10 h-4 w-4",
+      class: "text-error-9 h-4 w-4",
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -737,7 +943,6 @@ const toBase64 = (file) => new Promise((resolve, reject) => {
   };
   reader.onerror = reject;
 });
-const kbToReadableSize = (kb) => N(kb).with(_.number.lte(1e3), () => `${Math.round(kb)}KB`).with(_.number.lt(1e3 * 10), () => `${(kb / 1e3).toFixed(1)}MB`).otherwise(() => `${Math.round(kb / 1e3)}MB`);
 const addFileSizesKb = (files) => files.reduce((acc, cur) => acc + cur.sizeKb, 0);
 const isFileSubmission = isSubmissionOfType("file");
 const FILENAMES_TO_SHOW_QTY = 3;
@@ -749,7 +954,7 @@ const FileThumbnail = ({
   const extension = file.name.split(".").pop();
   const fileName = file.name.replace(new RegExp(`.${extension}$`), "");
   return o$1("div", {
-    class: clsx("bg-accent-1 outline-neutral-4 flex max-w-full gap-2 overflow-hidden rounded-lg px-3 py-2 text-sm outline", className),
+    class: clsx("bg-accent-1 outline-accent-4 flex max-w-full gap-2 overflow-hidden rounded-lg px-3 py-2 text-sm outline", className),
     ...props,
     children: [o$1("p", {
       "aria-label": "File name",
@@ -762,7 +967,7 @@ const FileThumbnail = ({
       })]
     }), o$1("p", {
       "aria-label": "File size",
-      class: "text-neutral-10",
+      class: "text-accent-11",
       children: kbToReadableSize(file.sizeKb)
     })]
   });
@@ -856,7 +1061,7 @@ const ChatInputFile = ({
                 d: "M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
               })
             }), o$1("p", {
-              class: "text-neutral-12 tracking-[-0.01em] dark:text-gray-400",
+              class: "text-neutral-12 tracking-[-0.01em]",
               children: [input.config.allowMultiple ? "Select files" : "Select a file", " to upload"]
             }), input.config.fileSizeLimitKib ? o$1("p", {
               class: "text-neutral-10 text-xs",
@@ -2422,7 +2627,7 @@ const ChatInputMultipleChoice = ({
     resolver: getResolver$1(input.config)
   });
   const focusRef = useFocusOnMount();
-  const isSingleChoice = input.config.minSelected === 1 && input.config.maxSelected === 1;
+  const isSingleChoice = (input.config.minSelected === 1 || input.config.minSelected === void 0) && input.config.maxSelected === 1;
   return o$1("form", {
     noValidate: true,
     class: "flex flex-col gap-1 pr-2.5",
@@ -2465,7 +2670,7 @@ const ChatInputMultipleChoice = ({
               class: "peer sr-only h-full",
               type: "checkbox"
             }), o$1("label", {
-              class: "bg-lowest peer-focus-visible:ring-accent-7 active:outline-neutral-10 ease-expo-out outline-neutral-12/5 text-neutral-11 peer-checked:outline-accent-7 peer-checked:bg-accent-2 peer-checked:text-accent-9 duration-snappy block rounded-2xl px-2.5 py-1 outline outline-2 ring-0 ring-transparent transition-all selection:bg-transparent peer-focus-visible:ring-4 peer-focus-visible:ring-offset-2",
+              class: "bg-lowest peer-focus-visible:ring-accent-7 active:outline-neutral-10 ease-expo-out outline-divider text-neutral-11 peer-checked:outline-accent-7 peer-checked:bg-accent-2 peer-checked:text-accent-9 block rounded-2xl px-2.5 py-1 outline outline-2 ring-0 ring-transparent transition-all selection:bg-transparent peer-focus-visible:ring-4 peer-focus-visible:ring-offset-2",
               htmlFor: id,
               children: option.label
             })]
@@ -2530,6 +2735,7 @@ const ChatInputText = ({
 }) => {
   var _a;
   const submission = input.key ? (_a = application.current$.value.application) == null ? void 0 : _a.data.submissions[input.key] : void 0;
+  const defaultValue = input.config.defaultValue;
   const {
     register,
     handleSubmit,
@@ -2538,7 +2744,7 @@ const ChatInputText = ({
     }
   } = useForm({
     defaultValues: {
-      text: isTextSubmission(submission) ? submission.value : ""
+      text: defaultValue ? defaultValue : isTextSubmission(submission) ? submission.value : ""
     },
     resolver: getResolver(input.config)
   });
@@ -2580,7 +2786,7 @@ const ChatInputText = ({
               }
               setRef(element);
             },
-            class: "outline-neutral-12/5 ease-expo-out placeholder:text-neutral-5 focus-visible:outline-accent-7 caret-accent-9 duration-snappy w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all",
+            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
           }), input.config.optional && o$1(SkipButton, {
             class: "absolute right-0 top-0",
@@ -2624,10 +2830,10 @@ const ChatInput = ({
       height: 0,
       opacity: 0
     },
-    class: "bg-neutral-2/80 absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-md backdrop-saturate-150",
+    class: "bg-statusbar absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-md backdrop-saturate-150",
     children: o$1("div", {
       ref: inputWrapperRef,
-      class: "border-neutral-12/5 border-t",
+      class: "border-divider border-t",
       children: N({
         application,
         input,
@@ -2639,7 +2845,7 @@ const ChatInput = ({
         children: [o$1("input", {
           "aria-hidden": "true",
           id: "chat-input",
-          class: "outline-neutral-12/5 placeholder:text-neutral-4 focus-visible:outline-accent-9 caret-accent-9 flex-grow rounded-full px-3 py-1 text-base outline outline-2",
+          class: "outline-divider flex-grow rounded-full bg-transparent px-3 py-1 text-base outline outline-2",
           disabled: true
         }), o$1(SendButton, {
           disabled: true,
@@ -2722,11 +2928,11 @@ 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-1 min-w-[2rem] text-md 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", {
   variants: {
     side: {
-      left: "bg-lowest text-neutral-12 shadow-surface-sm outline outline-1 outline-neutral-11/[.08] rounded-bl-md",
-      right: "ml-auto bg-accent-7 text-lowest rounded-br-md bubble-right"
+      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",
@@ -2789,7 +2995,7 @@ const TypingIndicator = ({
     children: Array.from({
       length: 3
     }, (_2, i2) => o$1("div", {
-      class: "bg-accent-7 h-1.5 w-1.5 animate-bounce rounded-full",
+      class: "bg-accent-9 h-1.5 w-1.5 animate-bounce rounded-full",
       style: {
         animationDelay: `${-i2 * 200}ms`
       }
@@ -2800,7 +3006,7 @@ const authorToSide = {
   bot: "left",
   user: "right"
 };
-const systemMessageStyle = cva("w-full select-none py-2 text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_white]", {
+const systemMessageStyle = cva("w-full select-none py-2 text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_var(--i-color-n-1)]", {
   variants: {
     variant: {
       info: "text-neutral-8",
@@ -2810,7 +3016,7 @@ const systemMessageStyle = cva("w-full select-none py-2 text-center text-[10px]
     }
   }
 });
-const JobApplicationMessages = ({
+const Conversation = ({
   messages,
   isBotTyping
 }) => {
@@ -2840,9 +3046,9 @@ const JobApplicationMessages = ({
           type: "link"
         }, (message2) => {
           return o$1("div", {
-            class: "bg-accent-8/5 flex w-full items-center justify-center overflow-hidden rounded-xl py-2",
+            class: "bg-accent-3 flex w-full items-center justify-center overflow-hidden rounded-xl py-2",
             children: o$1("a", {
-              class: "bg-lowest shadow-surface-sm ring-accent-8/20 hover:ring-accent-8 active:bg-accent-2 active:text-accent-10 text-accent-9 focus-visible:ring-accent-7/50 flex items-center gap-1.5 truncate rounded-full py-2 pl-4 pr-2.5 no-underline ring-1 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2",
+              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 flex items-center gap-1.5 truncate rounded-full py-2 pl-4 pr-2.5 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, o$1("svg", {
@@ -3064,7 +3270,7 @@ const JobApplicationContent = ({
         paddingBottom: inputHeight.value
       },
       children: o$1(AnimatePresence, {
-        children: o$1(JobApplicationMessages, {
+        children: o$1(Conversation, {
           isBotTyping,
           messages: currentApplication.data.messages
         })