@customerhero/react 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -100,6 +100,27 @@ function useChat() {
     identify: (0, import_react2.useCallback)(
       (payload) => client.identify(payload),
       [client]
+    ),
+    setConsent: (0, import_react2.useCallback)(
+      (consent) => client.setConsent(consent),
+      [client]
+    ),
+    setTraits: (0, import_react2.useCallback)(
+      (traits) => client.setTraits(traits),
+      [client]
+    ),
+    submitPreChatForm: (0, import_react2.useCallback)(
+      (submission) => client.submitPreChatForm(submission),
+      [client]
+    ),
+    cancelPreChatForm: (0, import_react2.useCallback)(() => client.cancelPreChatForm(), [client]),
+    fireTrigger: (0, import_react2.useCallback)(
+      (triggerId) => client.fireTrigger(triggerId),
+      [client]
+    ),
+    consumePendingPrefill: (0, import_react2.useCallback)(
+      () => client.consumePendingPrefill(),
+      [client]
     )
   };
 }
@@ -1091,10 +1112,12 @@ function AnimatedMessage({
 }) {
   const [visible, setVisible] = (0, import_react7.useState)(!animate);
   (0, import_react7.useEffect)(() => {
-    if (animate && !reduced) {
-      const id = requestAnimationFrame(() => setVisible(true));
-      return () => cancelAnimationFrame(id);
+    if (!animate || reduced) {
+      setVisible(true);
+      return;
     }
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
   }, [animate, reduced]);
   const style = {
     alignSelf: isUser ? "flex-end" : "flex-start",
@@ -1455,7 +1478,15 @@ var import_js2 = require("@customerhero/js");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MAX_ATTACHMENTS = 3;
 function ChatInput() {
-  const { sendMessage, uploadAttachment, isLoading, config, t } = useChat();
+  const {
+    sendMessage,
+    uploadAttachment,
+    isLoading,
+    config,
+    t,
+    consumePendingPrefill,
+    pendingPrefill
+  } = useChat();
   const reduced = useReducedMotion();
   const [value, setValue] = (0, import_react8.useState)("");
   const [attachments, setAttachments] = (0, import_react8.useState)([]);
@@ -1463,6 +1494,11 @@ function ChatInput() {
   (0, import_react8.useEffect)(() => {
     setCaptureSupported((0, import_js2.canCaptureScreenshot)());
   }, []);
+  (0, import_react8.useEffect)(() => {
+    if (pendingPrefill === null) return;
+    const text = consumePendingPrefill();
+    if (text !== null) setValue(text);
+  }, [pendingPrefill, consumePendingPrefill]);
   (0, import_react8.useEffect)(() => {
     return () => {
       for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
@@ -1470,7 +1506,9 @@ function ChatInput() {
   }, []);
   const updateAttachment = (id, patch) => {
     setAttachments(
-      (current) => current.map((a) => a.id === id ? { ...a, ...patch } : a)
+      (current) => current.map(
+        (a) => a.id === id ? { ...a, ...patch } : a
+      )
     );
   };
   const startUpload = async (blob) => {
@@ -1506,10 +1544,15 @@ function ChatInput() {
       return current.filter((a) => a.id !== id);
     });
   };
-  const readyTokens = attachments.filter((a) => a.status === "ready").map((a) => a.token);
+  const readyTokens = attachments.filter(
+    (a) => a.status === "ready"
+  ).map((a) => a.token);
   const handleSend = () => {
     if (!value.trim() || isLoading) return;
-    sendMessage(value, readyTokens.length > 0 ? { attachmentTokens: readyTokens } : void 0);
+    sendMessage(
+      value,
+      readyTokens.length > 0 ? { attachmentTokens: readyTokens } : void 0
+    );
     for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
     setAttachments([]);
     setValue("");
@@ -1797,8 +1840,263 @@ function ConfigError({ message, title }) {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
   ] });
 }
+function fieldKey(field) {
+  if (field.kind === "name" || field.kind === "email" || field.kind === "phone") {
+    return field.kind;
+  }
+  return field.key;
+}
+function fieldLabel(field) {
+  if (field.kind === "name") return field.label ?? "Name";
+  if (field.kind === "email") return field.label ?? "Email";
+  if (field.kind === "phone") return field.label ?? "Phone";
+  return field.label;
+}
+function validateField(field, value) {
+  const required = "required" in field ? !!field.required : false;
+  if (required && (value === void 0 || value === "" || value === false)) {
+    return "Required";
+  }
+  if (field.kind === "email" && typeof value === "string" && value !== "") {
+    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value)) return "Invalid email";
+  }
+  return null;
+}
+function PreChatFormView() {
+  const { preChatForm, submitPreChatForm, cancelPreChatForm, config, t } = useChat();
+  const [values, setValues] = (0, import_react9.useState)({});
+  const [errors, setErrors] = (0, import_react9.useState)({});
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  if (!preChatForm) return null;
+  function setValue(key, value) {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => ({ ...prev, [key]: null }));
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!preChatForm) return;
+    const nextErrors = {};
+    let hasError = false;
+    for (const f of preChatForm.fields) {
+      const k = fieldKey(f);
+      const err = validateField(f, values[k]);
+      nextErrors[k] = err;
+      if (err) hasError = true;
+    }
+    setErrors(nextErrors);
+    if (hasError) return;
+    const submission = {};
+    const properties = {};
+    for (const f of preChatForm.fields) {
+      const k = fieldKey(f);
+      const v = values[k];
+      if (v === void 0 || v === "") continue;
+      if (f.kind === "name" && typeof v === "string") submission.name = v;
+      else if (f.kind === "email" && typeof v === "string")
+        submission.email = v;
+      else if (f.kind === "phone" && typeof v === "string")
+        submission.phone = v;
+      else if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+        properties[k] = v;
+      }
+    }
+    if (Object.keys(properties).length > 0) submission.properties = properties;
+    setSubmitting(true);
+    try {
+      await submitPreChatForm(submission);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const containerStyle = {
+    flex: 1,
+    overflowY: "auto",
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    background: config.backgroundColor,
+    color: config.textColor
+  };
+  const labelStyle = {
+    fontSize: 13,
+    fontWeight: 500,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  };
+  const inputStyle = {
+    width: "100%",
+    border: "1px solid #d4d4d8",
+    borderRadius: 8,
+    padding: "8px 10px",
+    fontSize: 14,
+    background: "white",
+    color: "#111",
+    boxSizing: "border-box"
+  };
+  const errorStyle = { color: "#dc2626", fontSize: 12 };
+  const buttonRowStyle = {
+    display: "flex",
+    gap: 8,
+    marginTop: 8
+  };
+  const submitStyle = {
+    flex: 1,
+    background: config.primaryColor,
+    color: "white",
+    border: "none",
+    borderRadius: 8,
+    padding: "10px 14px",
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: submitting ? "not-allowed" : "pointer",
+    opacity: submitting ? 0.7 : 1
+  };
+  const cancelStyle = {
+    background: "transparent",
+    color: config.textColor,
+    border: "1px solid #d4d4d8",
+    borderRadius: 8,
+    padding: "10px 14px",
+    fontSize: 14,
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "form",
+    {
+      style: containerStyle,
+      onSubmit: handleSubmit,
+      "data-customerhero-prechat-form": true,
+      children: [
+        preChatForm.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
+        preChatForm.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
+        preChatForm.fields.map((field) => {
+          const k = fieldKey(field);
+          const v = values[k];
+          const err = errors[k];
+          const required = "required" in field ? !!field.required : false;
+          const label = fieldLabel(field);
+          if (field.kind === "textarea") {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: labelStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                label,
+                required && " *"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "textarea",
+                {
+                  style: { ...inputStyle, minHeight: 80, resize: "vertical" },
+                  value: v ?? "",
+                  maxLength: field.maxLength,
+                  onChange: (e) => setValue(k, e.target.value)
+                }
+              ),
+              err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+            ] }, k);
+          }
+          if (field.kind === "select") {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: labelStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                label,
+                required && " *"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "select",
+                {
+                  style: inputStyle,
+                  value: v ?? "",
+                  onChange: (e) => setValue(k, e.target.value),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "\u2014" }),
+                    field.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                  ]
+                }
+              ),
+              err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+            ] }, k);
+          }
+          if (field.kind === "consent") {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "label",
+              {
+                style: {
+                  ...labelStyle,
+                  flexDirection: "row",
+                  alignItems: "flex-start",
+                  gap: 8
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: v === true,
+                      onChange: (e) => setValue(k, e.target.checked),
+                      style: { marginTop: 3 }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
+                    field.label,
+                    field.url && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "a",
+                        {
+                          href: field.url,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: { color: config.primaryColor },
+                          children: "\u2197"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+                ]
+              },
+              k
+            );
+          }
+          const inputType = field.kind === "email" ? "email" : field.kind === "phone" ? "tel" : "text";
+          const maxLength = field.kind === "text" ? field.maxLength : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: labelStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+              label,
+              required && " *"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                type: inputType,
+                style: inputStyle,
+                value: v ?? "",
+                maxLength,
+                onChange: (e) => setValue(k, e.target.value)
+              }
+            ),
+            err && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: errorStyle, children: err })
+          ] }, k);
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: buttonRowStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: cancelPreChatForm,
+              style: cancelStyle,
+              disabled: submitting,
+              children: t("action_cancel")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
+        ] })
+      ]
+    }
+  );
+}
 function ChatWindow() {
-  const { isOpen, config, configError, t, isRtl } = useChat();
+  const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
   const reduced = useReducedMotion();
   const [visible, setVisible] = (0, import_react9.useState)(false);
   const [shouldRender, setShouldRender] = (0, import_react9.useState)(false);
@@ -1853,7 +2151,7 @@ function ChatWindow() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatHeader, {}),
-    configError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfigError, { title: t("unable_to_load"), message: configError }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    configError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreChatFormView, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatMessages, {}),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatSuggestions, {}),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatInput, {})

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CustomerHeroChatConfig, IdentifyPayload, ActionConfirmationBlock, TranslateFn, ChatState, MessageRating } from '@customerhero/js';
+import { CustomerHeroChatConfig, IdentifyPayload, ActionConfirmationBlock, TranslateFn, ChatState, MessageRating, ConsentSettings, PreChatSubmission } from '@customerhero/js';
 export { ActionConfirmationBlock, IdentifyPayload } from '@customerhero/js';
 
 interface ChatWidgetProps extends CustomerHeroChatConfig {
@@ -38,6 +38,12 @@ interface UseChatReturn extends ChatState {
     close: () => void;
     reset: () => void;
     identify: (payload: IdentifyPayload) => void;
+    setConsent: (consent: Partial<ConsentSettings>) => void;
+    setTraits: (traits: Record<string, string | number | boolean>) => void;
+    submitPreChatForm: (submission: PreChatSubmission) => Promise<void>;
+    cancelPreChatForm: () => void;
+    fireTrigger: (triggerId: string) => void;
+    consumePendingPrefill: () => string | null;
 }
 declare function useChat(): UseChatReturn;
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CustomerHeroChatConfig, IdentifyPayload, ActionConfirmationBlock, TranslateFn, ChatState, MessageRating } from '@customerhero/js';
+import { CustomerHeroChatConfig, IdentifyPayload, ActionConfirmationBlock, TranslateFn, ChatState, MessageRating, ConsentSettings, PreChatSubmission } from '@customerhero/js';
 export { ActionConfirmationBlock, IdentifyPayload } from '@customerhero/js';
 
 interface ChatWidgetProps extends CustomerHeroChatConfig {
@@ -38,6 +38,12 @@ interface UseChatReturn extends ChatState {
     close: () => void;
     reset: () => void;
     identify: (payload: IdentifyPayload) => void;
+    setConsent: (consent: Partial<ConsentSettings>) => void;
+    setTraits: (traits: Record<string, string | number | boolean>) => void;
+    submitPreChatForm: (submission: PreChatSubmission) => Promise<void>;
+    cancelPreChatForm: () => void;
+    fireTrigger: (triggerId: string) => void;
+    consumePendingPrefill: () => string | null;
 }
 declare function useChat(): UseChatReturn;
 

package/dist/index.js

@@ -79,6 +79,27 @@ function useChat() {
     identify: useCallback(
       (payload) => client.identify(payload),
       [client]
+    ),
+    setConsent: useCallback(
+      (consent) => client.setConsent(consent),
+      [client]
+    ),
+    setTraits: useCallback(
+      (traits) => client.setTraits(traits),
+      [client]
+    ),
+    submitPreChatForm: useCallback(
+      (submission) => client.submitPreChatForm(submission),
+      [client]
+    ),
+    cancelPreChatForm: useCallback(() => client.cancelPreChatForm(), [client]),
+    fireTrigger: useCallback(
+      (triggerId) => client.fireTrigger(triggerId),
+      [client]
+    ),
+    consumePendingPrefill: useCallback(
+      () => client.consumePendingPrefill(),
+      [client]
     )
   };
 }
@@ -1070,10 +1091,12 @@ function AnimatedMessage({
 }) {
   const [visible, setVisible] = useState5(!animate);
   useEffect5(() => {
-    if (animate && !reduced) {
-      const id = requestAnimationFrame(() => setVisible(true));
-      return () => cancelAnimationFrame(id);
+    if (!animate || reduced) {
+      setVisible(true);
+      return;
     }
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
   }, [animate, reduced]);
   const style = {
     alignSelf: isUser ? "flex-end" : "flex-start",
@@ -1441,7 +1464,15 @@ import {
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var MAX_ATTACHMENTS = 3;
 function ChatInput() {
-  const { sendMessage, uploadAttachment, isLoading, config, t } = useChat();
+  const {
+    sendMessage,
+    uploadAttachment,
+    isLoading,
+    config,
+    t,
+    consumePendingPrefill,
+    pendingPrefill
+  } = useChat();
   const reduced = useReducedMotion();
   const [value, setValue] = useState6("");
   const [attachments, setAttachments] = useState6([]);
@@ -1449,6 +1480,11 @@ function ChatInput() {
   useEffect6(() => {
     setCaptureSupported(canCaptureScreenshot());
   }, []);
+  useEffect6(() => {
+    if (pendingPrefill === null) return;
+    const text = consumePendingPrefill();
+    if (text !== null) setValue(text);
+  }, [pendingPrefill, consumePendingPrefill]);
   useEffect6(() => {
     return () => {
       for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
@@ -1456,7 +1492,9 @@ function ChatInput() {
   }, []);
   const updateAttachment = (id, patch) => {
     setAttachments(
-      (current) => current.map((a) => a.id === id ? { ...a, ...patch } : a)
+      (current) => current.map(
+        (a) => a.id === id ? { ...a, ...patch } : a
+      )
     );
   };
   const startUpload = async (blob) => {
@@ -1492,10 +1530,15 @@ function ChatInput() {
       return current.filter((a) => a.id !== id);
     });
   };
-  const readyTokens = attachments.filter((a) => a.status === "ready").map((a) => a.token);
+  const readyTokens = attachments.filter(
+    (a) => a.status === "ready"
+  ).map((a) => a.token);
   const handleSend = () => {
     if (!value.trim() || isLoading) return;
-    sendMessage(value, readyTokens.length > 0 ? { attachmentTokens: readyTokens } : void 0);
+    sendMessage(
+      value,
+      readyTokens.length > 0 ? { attachmentTokens: readyTokens } : void 0
+    );
     for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
     setAttachments([]);
     setValue("");
@@ -1783,8 +1826,263 @@ function ConfigError({ message, title }) {
     /* @__PURE__ */ jsx9("p", { style: { fontSize: 12, color: "#999", margin: 0 }, children: message })
   ] });
 }
+function fieldKey(field) {
+  if (field.kind === "name" || field.kind === "email" || field.kind === "phone") {
+    return field.kind;
+  }
+  return field.key;
+}
+function fieldLabel(field) {
+  if (field.kind === "name") return field.label ?? "Name";
+  if (field.kind === "email") return field.label ?? "Email";
+  if (field.kind === "phone") return field.label ?? "Phone";
+  return field.label;
+}
+function validateField(field, value) {
+  const required = "required" in field ? !!field.required : false;
+  if (required && (value === void 0 || value === "" || value === false)) {
+    return "Required";
+  }
+  if (field.kind === "email" && typeof value === "string" && value !== "") {
+    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value)) return "Invalid email";
+  }
+  return null;
+}
+function PreChatFormView() {
+  const { preChatForm, submitPreChatForm, cancelPreChatForm, config, t } = useChat();
+  const [values, setValues] = useState7({});
+  const [errors, setErrors] = useState7({});
+  const [submitting, setSubmitting] = useState7(false);
+  if (!preChatForm) return null;
+  function setValue(key, value) {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => ({ ...prev, [key]: null }));
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!preChatForm) return;
+    const nextErrors = {};
+    let hasError = false;
+    for (const f of preChatForm.fields) {
+      const k = fieldKey(f);
+      const err = validateField(f, values[k]);
+      nextErrors[k] = err;
+      if (err) hasError = true;
+    }
+    setErrors(nextErrors);
+    if (hasError) return;
+    const submission = {};
+    const properties = {};
+    for (const f of preChatForm.fields) {
+      const k = fieldKey(f);
+      const v = values[k];
+      if (v === void 0 || v === "") continue;
+      if (f.kind === "name" && typeof v === "string") submission.name = v;
+      else if (f.kind === "email" && typeof v === "string")
+        submission.email = v;
+      else if (f.kind === "phone" && typeof v === "string")
+        submission.phone = v;
+      else if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+        properties[k] = v;
+      }
+    }
+    if (Object.keys(properties).length > 0) submission.properties = properties;
+    setSubmitting(true);
+    try {
+      await submitPreChatForm(submission);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const containerStyle = {
+    flex: 1,
+    overflowY: "auto",
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    background: config.backgroundColor,
+    color: config.textColor
+  };
+  const labelStyle = {
+    fontSize: 13,
+    fontWeight: 500,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  };
+  const inputStyle = {
+    width: "100%",
+    border: "1px solid #d4d4d8",
+    borderRadius: 8,
+    padding: "8px 10px",
+    fontSize: 14,
+    background: "white",
+    color: "#111",
+    boxSizing: "border-box"
+  };
+  const errorStyle = { color: "#dc2626", fontSize: 12 };
+  const buttonRowStyle = {
+    display: "flex",
+    gap: 8,
+    marginTop: 8
+  };
+  const submitStyle = {
+    flex: 1,
+    background: config.primaryColor,
+    color: "white",
+    border: "none",
+    borderRadius: 8,
+    padding: "10px 14px",
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: submitting ? "not-allowed" : "pointer",
+    opacity: submitting ? 0.7 : 1
+  };
+  const cancelStyle = {
+    background: "transparent",
+    color: config.textColor,
+    border: "1px solid #d4d4d8",
+    borderRadius: 8,
+    padding: "10px 14px",
+    fontSize: 14,
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsxs6(
+    "form",
+    {
+      style: containerStyle,
+      onSubmit: handleSubmit,
+      "data-customerhero-prechat-form": true,
+      children: [
+        preChatForm.title && /* @__PURE__ */ jsx9("h3", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: preChatForm.title }),
+        preChatForm.description && /* @__PURE__ */ jsx9("p", { style: { fontSize: 13, margin: 0, opacity: 0.8 }, children: preChatForm.description }),
+        preChatForm.fields.map((field) => {
+          const k = fieldKey(field);
+          const v = values[k];
+          const err = errors[k];
+          const required = "required" in field ? !!field.required : false;
+          const label = fieldLabel(field);
+          if (field.kind === "textarea") {
+            return /* @__PURE__ */ jsxs6("label", { style: labelStyle, children: [
+              /* @__PURE__ */ jsxs6("span", { children: [
+                label,
+                required && " *"
+              ] }),
+              /* @__PURE__ */ jsx9(
+                "textarea",
+                {
+                  style: { ...inputStyle, minHeight: 80, resize: "vertical" },
+                  value: v ?? "",
+                  maxLength: field.maxLength,
+                  onChange: (e) => setValue(k, e.target.value)
+                }
+              ),
+              err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+            ] }, k);
+          }
+          if (field.kind === "select") {
+            return /* @__PURE__ */ jsxs6("label", { style: labelStyle, children: [
+              /* @__PURE__ */ jsxs6("span", { children: [
+                label,
+                required && " *"
+              ] }),
+              /* @__PURE__ */ jsxs6(
+                "select",
+                {
+                  style: inputStyle,
+                  value: v ?? "",
+                  onChange: (e) => setValue(k, e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
+                    field.options.map((opt) => /* @__PURE__ */ jsx9("option", { value: opt.value, children: opt.label }, opt.value))
+                  ]
+                }
+              ),
+              err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+            ] }, k);
+          }
+          if (field.kind === "consent") {
+            return /* @__PURE__ */ jsxs6(
+              "label",
+              {
+                style: {
+                  ...labelStyle,
+                  flexDirection: "row",
+                  alignItems: "flex-start",
+                  gap: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsx9(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: v === true,
+                      onChange: (e) => setValue(k, e.target.checked),
+                      style: { marginTop: 3 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6("span", { style: { fontSize: 13, fontWeight: 400 }, children: [
+                    field.label,
+                    field.url && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+                      " ",
+                      /* @__PURE__ */ jsx9(
+                        "a",
+                        {
+                          href: field.url,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: { color: config.primaryColor },
+                          children: "\u2197"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+                ]
+              },
+              k
+            );
+          }
+          const inputType = field.kind === "email" ? "email" : field.kind === "phone" ? "tel" : "text";
+          const maxLength = field.kind === "text" ? field.maxLength : void 0;
+          return /* @__PURE__ */ jsxs6("label", { style: labelStyle, children: [
+            /* @__PURE__ */ jsxs6("span", { children: [
+              label,
+              required && " *"
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: inputType,
+                style: inputStyle,
+                value: v ?? "",
+                maxLength,
+                onChange: (e) => setValue(k, e.target.value)
+              }
+            ),
+            err && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: err })
+          ] }, k);
+        }),
+        /* @__PURE__ */ jsxs6("div", { style: buttonRowStyle, children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: cancelPreChatForm,
+              style: cancelStyle,
+              disabled: submitting,
+              children: t("action_cancel")
+            }
+          ),
+          /* @__PURE__ */ jsx9("button", { type: "submit", style: submitStyle, disabled: submitting, children: preChatForm.submitLabel })
+        ] })
+      ]
+    }
+  );
+}
 function ChatWindow() {
-  const { isOpen, config, configError, t, isRtl } = useChat();
+  const { isOpen, config, configError, t, isRtl, preChatFormVisible } = useChat();
   const reduced = useReducedMotion();
   const [visible, setVisible] = useState7(false);
   const [shouldRender, setShouldRender] = useState7(false);
@@ -1839,7 +2137,7 @@ function ChatWindow() {
   };
   return /* @__PURE__ */ jsxs6("div", { style, dir: isRtl ? "rtl" : "ltr", children: [
     /* @__PURE__ */ jsx9(ChatHeader, {}),
-    configError ? /* @__PURE__ */ jsx9(ConfigError, { title: t("unable_to_load"), message: configError }) : /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    configError ? /* @__PURE__ */ jsx9(ConfigError, { title: t("unable_to_load"), message: configError }) : preChatFormVisible ? /* @__PURE__ */ jsx9(PreChatFormView, {}) : /* @__PURE__ */ jsxs6(Fragment5, { children: [
       /* @__PURE__ */ jsx9(ChatMessages, {}),
       /* @__PURE__ */ jsx9(ChatSuggestions, {}),
       /* @__PURE__ */ jsx9(ChatInput, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customerhero/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "description": "React components for embedding the CustomerHero chat widget.",
   "keywords": [
@@ -54,11 +54,11 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@customerhero/js": "^1.0.0",
+    "@customerhero/js": "^2.0.0",
     "react": ">=18"
   },
   "devDependencies": {
-    "@customerhero/js": "^1.0.0",
+    "@customerhero/js": "^2.0.0",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",