@shaimaababiker/embed 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AssistlyChatProps = {
+    chatbotId: number;
+    /** Origin of the Assistly deployment that hosts the chat API, e.g. https://chatbot-xi-rose-68.vercel.app */
+    origin: string;
+    /** Optional brand color for accents */
+    primaryColor?: string;
+    /** Fires when the chat panel has mounted and is ready to receive input */
+    onReady?: () => void;
+    /** Fires if the chat fails to mount */
+    onError?: (err: Error) => void;
+};
+/**
+ * Embeddable Assistly chat panel. Renders the full chat UI (intake form +
+ * active chat) inside whatever container the customer places it in. Talks
+ * directly to the Assistly API at `${origin}/api/...` — no iframe, no
+ * cross-origin cookie issues.
+ */
+declare function AssistlyChat({ chatbotId, origin, primaryColor, onReady, onError, }: AssistlyChatProps): react_jsx_runtime.JSX.Element | null;
+
+export { AssistlyChat, type AssistlyChatProps };

package/dist/index.js

@@ -0,0 +1,862 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/widget.tsx
+import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+import { ApolloProvider } from "@apollo/client";
+
+// src/ApolloProvider.tsx
+import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
+var defaultOptions = {
+  watchQuery: { fetchPolicy: "no-cache", errorPolicy: "all" },
+  query: { fetchPolicy: "no-cache", errorPolicy: "all" },
+  mutate: { fetchPolicy: "no-cache", errorPolicy: "all" }
+};
+function createApolloClient(origin) {
+  const baseUrl = origin.replace(/\/$/, "");
+  return new ApolloClient({
+    link: createHttpLink({ uri: `${baseUrl}/api/graphql` }),
+    cache: new InMemoryCache(),
+    defaultOptions
+  });
+}
+
+// src/ChatbotClient.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useQuery } from "@apollo/client";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+// src/lib/startNewChat.ts
+async function startNewChat(origin, guestName, guestEmail, chatbotId) {
+  var _a;
+  const baseUrl = origin.replace(/\/$/, "");
+  const response = await fetch(`${baseUrl}/api/start-chat`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      name: guestName,
+      email: guestEmail,
+      chatbot_id: chatbotId
+    })
+  });
+  if (!response.ok) {
+    const payload = await response.json().catch(() => null);
+    const message = (_a = payload == null ? void 0 : payload.error) != null ? _a : `Failed to start chat (${response.status})`;
+    throw new Error(message);
+  }
+  const data = await response.json();
+  if (typeof (data == null ? void 0 : data.chat_session_id) !== "number") {
+    throw new Error("Server returned an invalid response");
+  }
+  return data.chat_session_id;
+}
+var startNewChat_default = startNewChat;
+
+// src/graphql/queries.ts
+import { gql } from "@apollo/client";
+var GET_MESSEGES_BY_CHAT_SESSION_ID = gql`
+  query GetMessagesByChatSessionId($chat_session_id: Int!) {
+    chat_sessions(id: $chat_session_id) {
+      created_at
+      id
+      messages {
+        id
+        sender
+        content
+        created_at
+      }
+    }
+  }
+`;
+
+// src/ui/Avatar.tsx
+import { rings } from "@dicebear/collection";
+import { createAvatar } from "@dicebear/core";
+import { jsx } from "react/jsx-runtime";
+function utf8ToBase64(input) {
+  const bytes = new TextEncoder().encode(input);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+function Avatar({ seed, className }) {
+  const avatar = createAvatar(rings, { seed });
+  const svg = avatar.toString();
+  const dataUrl = `data:image/svg+xml;base64,${utf8ToBase64(svg)}`;
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { src: dataUrl, alt: "Avatar", width: 80, height: 80, className }) });
+}
+var Avatar_default = Avatar;
+
+// src/ui/Messages.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { UserCircle } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+// src/ui/ChatMotion.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function FourDotWave({ className = "" }) {
+  const dots = [
+    { color: "#8a2a2a", delay: "0s" },
+    // oxblood
+    { color: "#c89a5b", delay: "0.12s" },
+    // brass
+    { color: "#5a6b3b", delay: "0.24s" },
+    // moss
+    { color: "#2c5b5e", delay: "0.36s" }
+    // teal
+  ];
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 ${className}`, "aria-label": "Loading", children: [
+    dots.map((d, i) => /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "dot-wave",
+        style: { backgroundColor: d.color, animationDelay: d.delay }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx2("style", { children: `
+        .dot-wave {
+          display: inline-block;
+          width: 7px;
+          height: 7px;
+          border-radius: 9999px;
+          will-change: transform;
+          animation: dotBounce 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+        }
+        @keyframes dotBounce {
+          0%, 60%, 100% { transform: translate3d(0, 0, 0); }
+          30%           { transform: translate3d(0, -6px, 0); }
+        }
+      ` })
+  ] });
+}
+function AiBubble({
+  children,
+  className = "",
+  springIn = true,
+  style,
+  typing = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `ai-bubble ${springIn ? "ai-bubble-in" : ""} ${typing ? "ai-typing" : ""} ${className}`,
+      style,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2("style", { children: `
+        .ai-bubble {
+          position: relative;
+          transform-origin: bottom left;
+          color: #1e1e1e;
+          background: linear-gradient(
+            135deg,
+            #eef2ff 0%,
+            #f5f3ff 35%,
+            #ecfeff 70%,
+            #eef2ff 100%
+          );
+          background-size: 250% 250%;
+          will-change: transform, background-position, box-shadow;
+          transition: box-shadow 220ms ease, background 220ms ease;
+        }
+        .ai-bubble-in {
+          animation: aiSpring 620ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+        }
+        /* Typing state: vibrant purple gradient with glow */
+        .ai-typing {
+          background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 35%, #8b5cf6 70%, #7c3aed 100%);
+          background-size: 200% 200%;
+          animation: aiTypingShift 4.5s ease-in-out infinite;
+          box-shadow: 0 12px 36px rgba(124,58,237,0.20), 0 1px 0 rgba(255,255,255,0.05) inset;
+          color: #fff;
+          border-color: rgba(255,255,255,0.08);
+        }
+        @keyframes aiSpring {
+          0%   { transform: scale(0.4) translate3d(0, 12px, 0); opacity: 0; }
+          60%  { transform: scale(1.04) translate3d(0, -2px, 0); opacity: 1; }
+          100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
+        }
+        @keyframes aiTypingShift {
+          0%   { background-position:   0%  50%; filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
+          50%  { background-position: 100%  50%; filter: drop-shadow(0 18px 48px rgba(124,58,237,0.18)); }
+          100% { background-position:   0%  50%; filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function UserBubble({
+  children,
+  className = "",
+  springIn = true,
+  style
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `user-bubble ${springIn ? "user-bubble-in" : ""} ${className}`,
+      style,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2("style", { children: `
+        .user-bubble {
+          position: relative;
+          transform-origin: bottom right;
+          background: #111113;
+          color: #ffffff;
+          will-change: transform;
+        }
+        .user-bubble-in {
+          animation: userSpring 520ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+        }
+        @keyframes userSpring {
+          0%   { transform: scale(0.4) translate3d(0, 12px, 0); opacity: 0; }
+          60%  { transform: scale(1.04) translate3d(0, -2px, 0); opacity: 1; }
+          100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+
+// src/ui/Messages.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatTime(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch (e) {
+    return "";
+  }
+}
+function TypewriterMarkdown({ text, isFresh, components, onType }) {
+  const [displayedText, setDisplayedText] = useState("");
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    setDisplayedText("");
+    setIndex(0);
+  }, [text]);
+  useEffect(() => {
+    if (isFresh && text && index < text.length) {
+      const timeout = setTimeout(() => {
+        setDisplayedText((prev) => prev + text[index]);
+        setIndex((prev) => prev + 1);
+        if (onType) onType();
+      }, 15);
+      return () => clearTimeout(timeout);
+    } else if (!isFresh) {
+      setDisplayedText(text || "");
+    }
+  }, [index, text, isFresh]);
+  return /* @__PURE__ */ jsx3(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components,
+      children: isFresh ? displayedText : text
+    }
+  );
+}
+function Messages({ messages, chatbotName, logoUrl, isReviewPage = false }) {
+  const ref = useRef(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const scrollToBottom = (smooth = true) => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ behavior: smooth ? "smooth" : "auto", block: "end" });
+    }
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const markdownComponents = {
+    ul: (_a) => {
+      var _b = _a, { node } = _b, props = __objRest(_b, ["node"]);
+      return /* @__PURE__ */ jsx3("ul", __spreadValues({ className: "list-disc list-inside ml-5 mb-3" }, props));
+    },
+    ol: (_c) => {
+      var _d = _c, { node } = _d, props = __objRest(_d, ["node"]);
+      return /* @__PURE__ */ jsx3("ol", __spreadValues({ className: "list-decimal list-inside ml-5 mb-3" }, props));
+    },
+    h1: (_e) => {
+      var _f = _e, { node } = _f, props = __objRest(_f, ["node"]);
+      return /* @__PURE__ */ jsx3("h1", __spreadValues({ className: "text-2xl font-bold mb-3 font-display" }, props));
+    },
+    h2: (_g) => {
+      var _h = _g, { node } = _h, props = __objRest(_h, ["node"]);
+      return /* @__PURE__ */ jsx3("h2", __spreadValues({ className: "text-xl font-bold mb-3 font-display" }, props));
+    },
+    h3: (_i) => {
+      var _j = _i, { node } = _j, props = __objRest(_j, ["node"]);
+      return /* @__PURE__ */ jsx3("h3", __spreadValues({ className: "text-lg font-bold mb-3 font-display" }, props));
+    },
+    table: (_k) => {
+      var _l = _k, { node } = _l, props = __objRest(_l, ["node"]);
+      return /* @__PURE__ */ jsx3("table", __spreadValues({ className: "table-auto mb-3 w-full border-separate border-2 rounded-sm border-spacing-4", style: { borderColor: "rgba(26,20,15,0.18)" } }, props));
+    },
+    th: (_m) => {
+      var _n = _m, { node } = _n, props = __objRest(_n, ["node"]);
+      return /* @__PURE__ */ jsx3("th", __spreadValues({ className: "text-left underline" }, props));
+    },
+    p: (_o) => {
+      var _p = _o, { node } = _p, props = __objRest(_p, ["node"]);
+      return /* @__PURE__ */ jsx3("p", __spreadValues({ className: "whitespace-pre-wrap mb-3 last:mb-0 leading-relaxed" }, props));
+    },
+    a: (_q) => {
+      var _r = _q, { node } = _r, props = __objRest(_r, ["node"]);
+      return /* @__PURE__ */ jsx3("a", __spreadValues({ className: "hover:underline font-semibold", style: { color: "#c45d4f" }, rel: "noopener noreferrer", target: "_blank" }, props));
+    },
+    code: (_s) => {
+      var _t = _s, { node } = _t, props = __objRest(_t, ["node"]);
+      return /* @__PURE__ */ jsx3(
+        "code",
+        __spreadValues({
+          className: "px-1.5 py-0.5 rounded font-mono text-[13px]",
+          style: { background: "rgba(26,20,15,0.10)" }
+        }, props)
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col space-y-7 py-8 px-5 md:px-10 bg-transparent rounded-lg scroll-smooth ", children: [
+    messages.map((message, index) => {
+      const isSender = message.sender !== "user";
+      const isThinking = message.content === "" || message.content === "Thinking...";
+      const isFresh = index === messages.length - 1;
+      const showMeta = hoveredId === message.id || isReviewPage;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          onMouseEnter: () => setHoveredId(message.id),
+          onMouseLeave: () => setHoveredId(null),
+          className: `chat ${isSender ? "chat-start" : "chat-end"} relative group overflow-hidden`,
+          children: [
+            isReviewPage && /* @__PURE__ */ jsxs2("p", { className: "absolute -bottom-5 text-xs text-gray-300", children: [
+              "sent ",
+              new Date(message.created_at).toLocaleString()
+            ] }),
+            isFresh && /* @__PURE__ */ jsx3(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "ring-out pointer-events-none absolute -inset-2 rounded-[26px]"
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: `chat-image avatar w-10 ${!isSender && "mr-4"}`, children: logoUrl ? /* @__PURE__ */ jsx3(
+              "img",
+              {
+                src: logoUrl,
+                alt: chatbotName || "Chatbot logo",
+                width: 48,
+                height: 48,
+                className: "h-12 w-12 rounded-full border object-cover",
+                style: { borderColor: "var(--hairline)" }
+              }
+            ) : isSender ? /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "border h-12 w-12 rounded-full bg-white overflow-hidden",
+                style: { borderColor: "var(--hairline)" },
+                children: /* @__PURE__ */ jsx3(Avatar_default, { seed: chatbotName, className: "h-12 w-12" })
+              }
+            ) : /* @__PURE__ */ jsx3("div", { className: "h-12 w-12 rounded-full grid place-items-center", style: { background: "rgba(244,234,215,0.06)" }, children: /* @__PURE__ */ jsx3(UserCircle, { className: "text-[var(--brass-2)]" }) }) }),
+            isSender ? /* @__PURE__ */ jsx3(
+              AiBubble,
+              {
+                springIn: isFresh,
+                typing: isThinking,
+                className: "chat-bubble relative rounded-2xl px-4 py-3 max-w-[80%] font-body text-[15px] leading-relaxed",
+                style: isThinking ? {} : { border: "1px solid rgba(224,176,112,0.18)" },
+                children: isThinking ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 py-1", style: { color: "#1e1e1e" }, children: [
+                  /* @__PURE__ */ jsx3(FourDotWave, {}),
+                  /* @__PURE__ */ jsx3("span", { className: "font-mono text-[10px] uppercase tracking-[0.25em] opacity-70", children: "Thinking..." })
+                ] }) : /* @__PURE__ */ jsx3(
+                  TypewriterMarkdown,
+                  {
+                    text: message.content,
+                    isFresh,
+                    components: markdownComponents,
+                    onType: () => scrollToBottom(false)
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx3(
+              UserBubble,
+              {
+                springIn: isFresh,
+                className: "chat-bubble relative rounded-2xl px-4 py-3 max-w-[80%] font-body text-[15px] leading-relaxed",
+                style: {
+                  background: "#e9e3e3ff",
+                  color: "#1e1e1e",
+                  border: "1px solid rgba(231, 228, 224, 0.22)"
+                },
+                children: /* @__PURE__ */ jsx3(
+                  ReactMarkdown,
+                  {
+                    remarkPlugins: [remarkGfm],
+                    components: markdownComponents,
+                    children: message.content
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: `mt-1.5 px-1  flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.2em] transition-opacity duration-200 ${showMeta ? "opacity-100" : "opacity-0"}`,
+                style: { color: "var(--muted-2)" },
+                children: [
+                  /* @__PURE__ */ jsx3("span", { children: isSender ? chatbotName || "assistant" : "you" }),
+                  /* @__PURE__ */ jsx3("span", { className: "w-1 h-1 rounded-full", style: { background: "var(--muted-2)" } }),
+                  /* @__PURE__ */ jsx3("span", { children: formatTime(message.created_at) })
+                ]
+              }
+            )
+          ]
+        },
+        message.id || index
+      );
+    }),
+    /* @__PURE__ */ jsx3("div", { ref })
+  ] });
+}
+var Messages_default = Messages;
+
+// src/ui/form.tsx
+import * as React2 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState
+} from "react-hook-form";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/ui/form.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = React2.createContext(
+  {}
+);
+var FormField = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx5(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx5(Controller, __spreadValues({}, props)) });
+};
+var useFormField = () => {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return __spreadValues({
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`
+  }, fieldState);
+};
+var FormItemContext = React2.createContext(
+  {}
+);
+function FormItem(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const id = React2.useId();
+  return /* @__PURE__ */ jsx5(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx5(
+    "div",
+    __spreadValues({
+      "data-slot": "form-item",
+      className: cn("grid gap-2", className)
+    }, props)
+  ) });
+}
+function FormControl(_a) {
+  var props = __objRest(_a, []);
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx5(
+    Slot,
+    __spreadValues({
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error
+    }, props)
+  );
+}
+
+// src/ui/input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Input(_a) {
+  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsx6(
+    "input",
+    __spreadValues({
+      type,
+      "data-slot": "input",
+      className: cn(
+        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/ui/button.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-3",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button(_a) {
+  var _b = _a, {
+    className,
+    variant,
+    size,
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot2 : "button";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    __spreadValues({
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className }))
+    }, props)
+  );
+}
+
+// src/ChatbotClient.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var formSchema = z.object({
+  message: z.string().min(3, "Your Message is too short!")
+});
+function ChatbotClient({ id, chatbotName, origin }) {
+  const [name, setName] = useState2("");
+  const [email, setEmail] = useState2("");
+  const [onboardingStep, setOnboardingStep] = useState2(1);
+  const [chatId, setChatId] = useState2(0);
+  const [loading, setLoading] = useState2(false);
+  const [message, setMessage] = useState2([
+    {
+      id: -1,
+      content: `Hi there! I'm ${chatbotName}. I'd love to help you out, but first, could you tell me your name?`,
+      sender: "ai",
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      chat_session_id: 0
+    }
+  ]);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      message: ""
+    }
+  });
+  const { data } = useQuery(
+    GET_MESSEGES_BY_CHAT_SESSION_ID,
+    {
+      variables: { chat_session_id: chatId },
+      skip: !chatId
+    }
+  );
+  useEffect2(() => {
+    if (data && onboardingStep === 3) {
+      const chatSession = data.chat_sessions;
+      const dbMessages = chatSession.messages || [];
+      setMessage((prev) => {
+        const existingIds = new Set(prev.map((m) => m.id));
+        const newMessages = dbMessages.filter((m) => !existingIds.has(m.id));
+        return [...prev, ...newMessages];
+      });
+    }
+  }, [data, onboardingStep]);
+  async function onsubmit(values) {
+    const { message: formMessage } = values;
+    form.reset();
+    if (onboardingStep === 1) {
+      if (!formMessage.trim()) return;
+      const userMsg = {
+        id: Date.now(),
+        content: formMessage,
+        chat_session_id: 0,
+        sender: "user",
+        created_at: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      const aiMsg = {
+        id: Date.now() + 1,
+        content: `It's a pleasure to meet you, ${formMessage}! Just one more thing\u2014what's your email address so we can stay connected?`,
+        chat_session_id: 0,
+        sender: "ai",
+        created_at: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setName(formMessage);
+      setOnboardingStep(2);
+      setMessage((prev) => [...prev, userMsg, aiMsg]);
+      return;
+    }
+    if (onboardingStep === 2) {
+      if (!formMessage.trim()) return;
+      const isValidEmail = (email2) => {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email2);
+      };
+      if (!isValidEmail(formMessage.trim())) {
+        setMessage((prev) => [
+          ...prev,
+          {
+            id: Date.now() + 1,
+            content: "Please enter a valid email address so we can continue.",
+            chat_session_id: 0,
+            sender: "ai",
+            created_at: (/* @__PURE__ */ new Date()).toISOString()
+          }
+        ]);
+        return;
+      }
+      const userMsg = {
+        id: Date.now(),
+        content: formMessage,
+        chat_session_id: 0,
+        sender: "user",
+        created_at: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessage((prev) => [...prev, userMsg]);
+      setLoading(true);
+      try {
+        const finalEmail = formMessage;
+        setEmail(finalEmail);
+        const newChatId = await startNewChat_default(origin, name, finalEmail, Number(id));
+        setChatId(newChatId);
+        setOnboardingStep(3);
+      } catch (error) {
+        console.error("Error starting chat:", error);
+        setMessage((prev) => [...prev, {
+          id: Date.now() + 1,
+          content: "Sorry, I had trouble setting up your session. Could you please try entering your email again?",
+          chat_session_id: 0,
+          sender: "ai",
+          created_at: (/* @__PURE__ */ new Date()).toISOString()
+        }]);
+      } finally {
+        setLoading(false);
+      }
+      return;
+    }
+    if (!chatId) return;
+    const userMessage = {
+      id: Date.now(),
+      content: formMessage,
+      chat_session_id: chatId,
+      sender: "user",
+      created_at: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const loadingMessage = {
+      id: Date.now() + 1,
+      content: "Thinking...",
+      chat_session_id: chatId,
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      sender: "ai"
+    };
+    setMessage((prevMessages) => [...prevMessages, userMessage, loadingMessage]);
+    try {
+      const baseUrl = origin.replace(/\/$/, "");
+      const response = await fetch(`${baseUrl}/api/send-message`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+          chat_session_id: chatId,
+          chabot_id: Number(id),
+          content: formMessage,
+          created_at: (/* @__PURE__ */ new Date()).toISOString()
+        })
+      });
+      const result = await response.json();
+      setMessage(
+        (prevMessages) => prevMessages.map(
+          (msg) => msg.id === loadingMessage.id ? __spreadProps(__spreadValues({}, msg), { content: result.content, id: result.id }) : msg
+        )
+      );
+    } catch (error) {
+      console.error("Error Sending Message:", error);
+    }
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 flex flex-col bg-gray-50 text-slate-900 md:p-6 md:pb-0", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col w-full max-w-3xl mx-auto flex-1 overflow-hidden md:rounded-t-2xl border border-gray-200 bg-white relative", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "border-b border-gray-100 bg-white py-3 px-4 md:py-6 md:px-8 flex items-center justify-between shrink-0", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-3 md:space-x-4 min-w-0", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "relative shrink-0", children: [
+          /* @__PURE__ */ jsx8(
+            Avatar_default,
+            {
+              seed: chatbotName != null ? chatbotName : "default-seed",
+              className: "w-9 h-9 md:w-10 md:h-10 bg-gray-100 rounded-full border border-gray-200"
+            }
+          ),
+          /* @__PURE__ */ jsx8("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx8("h1", { className: "truncate text-sm md:text-base font-semibold text-slate-900", children: chatbotName || "Assistant" }),
+          /* @__PURE__ */ jsxs3("p", { className: "text-xs text-slate-400 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx8("span", { className: "w-2 h-2 bg-emerald-500 rounded-full" }),
+            "Online"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx8("div", { className: "hidden sm:block text-[11px] font-medium text-slate-400 bg-gray-50 px-2 py-1 rounded-md border border-gray-100", children: "Secure Session" })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "flex-1 relative bg-white pb-32 md:pb-36 overflow-y-auto", children: /* @__PURE__ */ jsx8(Messages_default, { messages: message, chatbotName: chatbotName || "" }) }),
+    /* @__PURE__ */ jsx8("div", { className: "absolute bottom-0 w-full bg-white p-3 md:p-6 border-t border-gray-100", children: /* @__PURE__ */ jsx8(Form, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsxs3(
+      "form",
+      {
+        className: "relative flex items-center gap-2 md:gap-3 max-w-4xl mx-auto",
+        onSubmit: form.handleSubmit(onsubmit),
+        children: [
+          /* @__PURE__ */ jsx8("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx8(
+            FormField,
+            {
+              control: form.control,
+              name: "message",
+              render: ({ field }) => /* @__PURE__ */ jsx8(FormItem, { className: "flex-1", children: /* @__PURE__ */ jsx8(FormControl, { children: /* @__PURE__ */ jsx8(
+                Input,
+                __spreadProps(__spreadValues({}, field), {
+                  placeholder: onboardingStep === 1 ? "Your name..." : onboardingStep === 2 ? "Your email..." : "Type a message...",
+                  className: "p-3 md:p-5 rounded-xl bg-gray-50 border-gray-200 text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-slate-200 focus:border-slate-300 transition-all"
+                })
+              ) }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx8(
+            Button,
+            {
+              type: "submit",
+              disabled: form.formState.isSubmitting || !form.formState.isValid || loading,
+              className: "h-12 w-12 md:h-16 md:w-16 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition-all shrink-0",
+              children: loading ? /* @__PURE__ */ jsx8("div", { className: "h-6 w-6 md:h-8 md:w-8 border-2 border-white border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsx8("p", { className: "cursor-pointer text-sm md:text-base", children: "Send" })
+            }
+          )
+        ]
+      }
+    ) })) })
+  ] }) });
+}
+var ChatbotClient_default = ChatbotClient;
+
+// src/widget.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function AssistlyChat({
+  chatbotId,
+  origin,
+  primaryColor,
+  onReady,
+  onError
+}) {
+  const client = useMemo(() => createApolloClient(origin), [origin]);
+  const [mounted, setMounted] = useState3(false);
+  useEffect3(() => {
+    setMounted(true);
+    onReady == null ? void 0 : onReady();
+    try {
+    } catch (err) {
+      onError == null ? void 0 : onError(err);
+    }
+  }, [onReady, onError]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx9(ApolloProvider, { client, children: /* @__PURE__ */ jsx9(
+    "div",
+    {
+      style: __spreadValues({
+        width: "100%",
+        height: "100%",
+        minHeight: 400,
+        display: "flex",
+        flexDirection: "column"
+      }, primaryColor ? { "--assistly-primary": primaryColor } : null),
+      children: /* @__PURE__ */ jsx9(ChatbotClient_default, { id: String(chatbotId), chatbotName: "Assistant", origin })
+    }
+  ) });
+}
+export {
+  AssistlyChat
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widget.tsx","../src/ApolloProvider.tsx","../src/ChatbotClient.tsx","../src/lib/startNewChat.ts","../src/graphql/queries.ts","../src/ui/Avatar.tsx","../src/ui/Messages.tsx","../src/ui/ChatMotion.tsx","../src/ui/form.tsx","../src/lib/utils.ts","../src/ui/label.tsx","../src/ui/input.tsx","../src/ui/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { ApolloProvider } from '@apollo/client';\nimport { createApolloClient } from './ApolloProvider';\nimport ChatbotClient from './ChatbotClient';\n\nexport type AssistlyChatProps = {\n  chatbotId: number;\n  /** Origin of the Assistly deployment that hosts the chat API, e.g. https://chatbot-xi-rose-68.vercel.app */\n  origin: string;\n  /** Optional brand color for accents */\n  primaryColor?: string;\n  /** Fires when the chat panel has mounted and is ready to receive input */\n  onReady?: () => void;\n  /** Fires if the chat fails to mount */\n  onError?: (err: Error) => void;\n};\n\n/**\n * Embeddable Assistly chat panel. Renders the full chat UI (intake form +\n * active chat) inside whatever container the customer places it in. Talks\n * directly to the Assistly API at `${origin}/api/...` — no iframe, no\n * cross-origin cookie issues.\n */\nexport default function AssistlyChat({\n  chatbotId,\n  origin,\n  primaryColor,\n  onReady,\n  onError,\n}: AssistlyChatProps) {\n  const client = useMemo(() => createApolloClient(origin), [origin]);\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n    onReady?.();\n    try {\n      // Reserved for future telemetry.\n    } catch (err) {\n      onError?.(err as Error);\n    }\n  }, [onReady, onError]);\n\n  if (!mounted) return null;\n\n  return (\n    <ApolloProvider client={client}>\n      <div\n        style={{\n          width: '100%',\n          height: '100%',\n          minHeight: 400,\n          display: 'flex',\n          flexDirection: 'column',\n          // CSS custom property so consumers can theme accents without prop-drilling.\n          ...(primaryColor ? ({ '--assistly-primary': primaryColor } as React.CSSProperties) : null),\n        }}\n      >\n        <ChatbotClient id={String(chatbotId)} chatbotName=\"Assistant\" origin={origin} />\n      </div>\n    </ApolloProvider>\n  );\n}\n","'use client';\n\nimport { ApolloClient, InMemoryCache, createHttpLink, type DefaultOptions } from '@apollo/client';\n\nconst defaultOptions: DefaultOptions = {\n  watchQuery: { fetchPolicy: 'no-cache', errorPolicy: 'all' },\n  query: { fetchPolicy: 'no-cache', errorPolicy: 'all' },\n  mutate: { fetchPolicy: 'no-cache', errorPolicy: 'all' },\n};\n\nexport function createApolloClient(origin: string): ApolloClient<unknown> {\n  const baseUrl = origin.replace(/\\/$/, '');\n  return new ApolloClient({\n    link: createHttpLink({ uri: `${baseUrl}/api/graphql` }),\n    cache: new InMemoryCache(),\n    defaultOptions,\n  });\n}\n","'use client';\n\nimport { useEffect, useState } from \"react\";\nimport { useQuery } from \"@apollo/client\";\nimport { z } from \"zod\";\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from '@hookform/resolvers/zod';\n\nimport {\n  Message,\n  MessagesbyChatSessionIdResponse,\n  MessagesbyChatSessionIdResponseVariables,\n} from \"./types\";\nimport startNewChat from \"./lib/startNewChat\";\nimport { GET_MESSEGES_BY_CHAT_SESSION_ID } from \"./graphql/queries\";\nimport Avatar from \"./ui/Avatar\";\nimport Messages from \"./ui/Messages\";\nimport { FormControl, FormField, FormItem, Form, } from \"./ui/form\";\nimport { Input } from \"./ui/input\";\nimport { Button } from \"./ui/button\";\n\ntype ChatbotClientProps = {\n  id: string;\n  chatbotName: string;\n  origin: string;\n};\n\nconst formSchema = z.object({\n  message: z.string().min(3, 'Your Message is too short!'),\n});\n\nfunction ChatbotClient({ id, chatbotName, origin }: ChatbotClientProps) {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [onboardingStep, setOnboardingStep] = useState(1);\n  const [chatId, setChatId] = useState(0);\n  const [loading, setLoading] = useState(false);\n  const [message, setMessage] = useState<Message[]>([\n    {\n      id: -1,\n      content: `Hi there! I'm ${chatbotName}. I'd love to help you out, but first, could you tell me your name?`,\n      sender: 'ai',\n      created_at: new Date().toISOString(),\n      chat_session_id: 0,\n    }\n  ]);\n\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      message: ''\n    }\n  });\n\n  const { data } = useQuery<MessagesbyChatSessionIdResponse, MessagesbyChatSessionIdResponseVariables>(\n    GET_MESSEGES_BY_CHAT_SESSION_ID,\n    {\n      variables: { chat_session_id: chatId },\n      skip: !chatId\n    }\n  );\n\n  useEffect(() => {\n    if (data && onboardingStep === 3) {\n      const chatSession = data.chat_sessions as any;\n      const dbMessages = chatSession.messages || [];\n      setMessage((prev) => {\n        const existingIds = new Set(prev.map((m) => m.id));\n        const newMessages = dbMessages.filter((m: Message) => !existingIds.has(m.id));\n        return [...prev, ...newMessages];\n      });\n    }\n  }, [data, onboardingStep]);\n\n  async function onsubmit(values: z.infer<typeof formSchema>) {\n    const { message: formMessage } = values;\n    form.reset();\n\n    if (onboardingStep === 1) {\n      if (!formMessage.trim()) return;\n\n      const userMsg: Message = {\n        id: Date.now(),\n        content: formMessage,\n        chat_session_id: 0,\n        sender: 'user',\n        created_at: new Date().toISOString(),\n      };\n\n      const aiMsg: Message = {\n        id: Date.now() + 1,\n        content: `It's a pleasure to meet you, ${formMessage}! Just one more thing—what's your email address so we can stay connected?`,\n        chat_session_id: 0,\n        sender: 'ai',\n        created_at: new Date().toISOString(),\n      };\n\n      setName(formMessage);\n      setOnboardingStep(2);\n      setMessage((prev) => [...prev, userMsg, aiMsg]);\n      return;\n    }\n\n    if (onboardingStep === 2) {\n      if (!formMessage.trim()) return;\n\n      const isValidEmail = (email: string) => {\n        return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n      };\n\n      if (!isValidEmail(formMessage.trim())) {\n        setMessage((prev) => [\n          ...prev,\n          {\n            id: Date.now() + 1,\n            content: \"Please enter a valid email address so we can continue.\",\n            chat_session_id: 0,\n            sender: 'ai',\n            created_at: new Date().toISOString(),\n          },\n        ]);\n        return;\n      }\n      const userMsg: Message = {\n        id: Date.now(),\n        content: formMessage,\n        chat_session_id: 0,\n        sender: 'user',\n        created_at: new Date().toISOString(),\n      };\n\n      setMessage((prev) => [...prev, userMsg]);\n      setLoading(true);\n\n      try {\n        const finalEmail = formMessage;\n        setEmail(finalEmail);\n        const newChatId = await startNewChat(origin, name, finalEmail, Number(id));\n        setChatId(newChatId);\n        setOnboardingStep(3);\n\n      } catch (error) {\n        console.error('Error starting chat:', error);\n        setMessage((prev) => [...prev, {\n          id: Date.now() + 1,\n          content: \"Sorry, I had trouble setting up your session. Could you please try entering your email again?\",\n          chat_session_id: 0,\n          sender: 'ai',\n          created_at: new Date().toISOString(),\n        }]);\n      } finally {\n        setLoading(false);\n      }\n      return;\n    }\n\n    if (!chatId) return;\n\n    const userMessage: Message = {\n      id: Date.now(),\n      content: formMessage,\n      chat_session_id: chatId,\n      sender: 'user',\n      created_at: new Date().toISOString(),\n    };\n\n    const loadingMessage: Message = {\n      id: Date.now() + 1,\n      content: 'Thinking...',\n      chat_session_id: chatId,\n      created_at: new Date().toISOString(),\n      sender: 'ai',\n    };\n    setMessage((prevMessages) => [...prevMessages, userMessage, loadingMessage]);\n\n    try {\n      const baseUrl = origin.replace(/\\/$/, '');\n      const response = await fetch(`${baseUrl}/api/send-message`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          name: name,\n          chat_session_id: chatId,\n          chabot_id: Number(id),\n          content: formMessage,\n          created_at: new Date().toISOString(),\n        })\n      });\n      const result = await response.json();\n      setMessage((prevMessages) =>\n        prevMessages.map((msg) =>\n          msg.id === loadingMessage.id ? { ...msg, content: result.content, id: result.id } : msg\n        )\n      );\n    } catch (error) {\n      console.error('Error Sending Message:', error);\n    }\n  }\n\n  return (\n    <div className=\"fixed inset-0 flex flex-col bg-gray-50 text-slate-900 md:p-6 md:pb-0\">\n      <div className=\"flex flex-col w-full max-w-3xl mx-auto flex-1 overflow-hidden md:rounded-t-2xl border border-gray-200 bg-white relative\">\n        <div className=\"border-b border-gray-100 bg-white py-3 px-4 md:py-6 md:px-8 flex items-center justify-between shrink-0\">\n          <div className=\"flex items-center space-x-3 md:space-x-4 min-w-0\">\n            <div className=\"relative shrink-0\">\n              <Avatar\n                seed={chatbotName ?? 'default-seed'}\n                className=\"w-9 h-9 md:w-10 md:h-10 bg-gray-100 rounded-full border border-gray-200\"\n              />\n              <div className=\"absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full\"></div>\n            </div>\n            <div className=\"min-w-0\">\n              <h1 className=\"truncate text-sm md:text-base font-semibold text-slate-900\">\n                {chatbotName || 'Assistant'}\n              </h1>\n              <p className=\"text-xs text-slate-400 flex items-center gap-1.5\">\n                <span className=\"w-2 h-2 bg-emerald-500 rounded-full\"></span>\n                Online\n              </p>\n            </div>\n          </div>\n          <div className=\"hidden sm:block text-[11px] font-medium text-slate-400 bg-gray-50 px-2 py-1 rounded-md border border-gray-100\">\n            Secure Session\n          </div>\n        </div>\n\n        <div className=\"flex-1 relative bg-white pb-32 md:pb-36 overflow-y-auto\">\n          <Messages messages={message} chatbotName={chatbotName || ''} />\n        </div>\n\n        <div className=\"absolute bottom-0 w-full bg-white p-3 md:p-6 border-t border-gray-100\">\n          <Form {...form}>\n            <form\n              className=\"relative flex items-center gap-2 md:gap-3 max-w-4xl mx-auto\"\n              onSubmit={form.handleSubmit(onsubmit)}\n            >\n              <div className=\"relative flex-1\">\n                <FormField\n                  control={form.control}\n                  name=\"message\"\n                  render={({ field }) => (\n                    <FormItem className=\"flex-1\">\n                      <FormControl>\n                        <Input\n                          {...field}\n                          placeholder={onboardingStep === 1 ? \"Your name...\" : onboardingStep === 2 ? \"Your email...\" : \"Type a message...\"}\n                          className=\"p-3 md:p-5 rounded-xl bg-gray-50 border-gray-200 text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-slate-200 focus:border-slate-300 transition-all\"\n                        />\n                      </FormControl>\n                    </FormItem>\n                  )}\n                />\n              </div>\n              <Button\n                type=\"submit\"\n                disabled={form.formState.isSubmitting || !form.formState.isValid || loading}\n                className=\"h-12 w-12 md:h-16 md:w-16 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition-all shrink-0\"\n              >\n                {loading ? (\n                  <div className=\"h-6 w-6 md:h-8 md:w-8 border-2 border-white border-t-transparent rounded-full animate-spin\" />\n                ) : (\n                  <p className=\"cursor-pointer text-sm md:text-base\">Send</p>)}\n              </Button>\n            </form>\n          </Form>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ChatbotClient;\n","async function startNewChat(\n  origin: string,\n  guestName: string,\n  guestEmail: string,\n  chatbotId: number,\n): Promise<number> {\n  const baseUrl = origin.replace(/\\/$/, '');\n  const response = await fetch(`${baseUrl}/api/start-chat`, {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      name: guestName,\n      email: guestEmail,\n      chatbot_id: chatbotId,\n    }),\n  });\n\n  if (!response.ok) {\n    const payload = await response.json().catch(() => null);\n    const message =\n      payload?.error ?? `Failed to start chat (${response.status})`;\n    throw new Error(message);\n  }\n\n  const data = await response.json();\n  if (typeof data?.chat_session_id !== 'number') {\n    throw new Error('Server returned an invalid response');\n  }\n  return data.chat_session_id;\n}\n\nexport default startNewChat;\n","import { gql } from \"@apollo/client\";\n\nexport const GET_MESSEGES_BY_CHAT_SESSION_ID = gql`\n  query GetMessagesByChatSessionId($chat_session_id: Int!) {\n    chat_sessions(id: $chat_session_id) {\n      created_at\n      id\n      messages {\n        id\n        sender\n        content\n        created_at\n      }\n    }\n  }\n`;\n","import React from 'react'\nimport { rings } from '@dicebear/collection'\nimport { createAvatar } from '@dicebear/core'\n\n/**\n * Browser-safe base64 encoder. Avoids `Buffer` because the embed is shipped\n * to non-Node consumers where `Buffer` is not defined.\n */\nfunction utf8ToBase64(input: string): string {\n  const bytes = new TextEncoder().encode(input);\n  let binary = '';\n  for (let i = 0; i < bytes.length; i++) {\n    binary += String.fromCharCode(bytes[i]);\n  }\n  return btoa(binary);\n}\n\nfunction Avatar({ seed, className }: { seed: string; className?: string }) {\n  const avatar = createAvatar(rings, { seed });\n  const svg = avatar.toString();\n  const dataUrl = `data:image/svg+xml;base64,${utf8ToBase64(svg)}`;\n\n  return (\n    <div>\n      <img src={dataUrl} alt=\"Avatar\" width={80} height={80} className={className} />\n    </div>\n  );\n}\n\nexport default Avatar;\n","'use client'\n\nimport { Message } from \"../types\"\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport Avatar from \"./Avatar\";\nimport { UserCircle } from \"lucide-react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { AiBubble, UserBubble, FourDotWave } from \"./ChatMotion\";\n\n/* -------------------------------------------------------------------------- */\n/*  Small helpers                                                              */\n/* -------------------------------------------------------------------------- */\n\nfunction formatTime(iso: string) {\n  try {\n    const d = new Date(iso);\n    return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n  } catch {\n    return \"\";\n  }\n}\n\nfunction TypewriterMarkdown({ text, isFresh, components, onType }: { text: string, isFresh: boolean, components: any, onType?: () => void }) {\n  const [displayedText, setDisplayedText] = useState(\"\");\n  const [index, setIndex] = useState(0);\n\n  useEffect(() => {\n    setDisplayedText(\"\");\n    setIndex(0);\n  }, [text]);\n\n  useEffect(() => {\n    if (isFresh && text && index < text.length) {\n      const timeout = setTimeout(() => {\n        setDisplayedText((prev) => prev + text[index]);\n        setIndex((prev) => prev + 1);\n        if (onType) onType();\n      }, 15);\n      return () => clearTimeout(timeout);\n    } else if (!isFresh) {\n      setDisplayedText(text || \"\");\n    }\n  }, [index, text, isFresh]);\n\n  return (\n    <ReactMarkdown\n      remarkPlugins={[remarkGfm]}\n      components={components}\n    >\n      {isFresh ? displayedText : text}\n    </ReactMarkdown>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Component                                                                  */\n/* -------------------------------------------------------------------------- */\n\nfunction Messages({ messages, chatbotName, logoUrl, isReviewPage = false }: { messages: Message[], chatbotName: string, logoUrl?: string, isReviewPage?: boolean }) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [hoveredId, setHoveredId] = useState<number | string | null>(null);\n\n  const scrollToBottom = (smooth = true) => {\n    if (ref.current) {\n      ref.current.scrollIntoView({ behavior: smooth ? \"smooth\" : \"auto\", block: \"end\" });\n    }\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages]);\n\n  const [isClient, setIsClient] = useState(false);\n\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  const markdownComponents = {\n    ul: ({ node, ...props }: any) => (<ul className=\"list-disc list-inside ml-5 mb-3\" {...props} />),\n    ol: ({ node, ...props }: any) => (<ol className=\"list-decimal list-inside ml-5 mb-3\" {...props} />),\n    h1: ({ node, ...props }: any) => (<h1 className=\"text-2xl font-bold mb-3 font-display\" {...props} />),\n    h2: ({ node, ...props }: any) => (<h2 className=\"text-xl font-bold mb-3 font-display\" {...props} />),\n    h3: ({ node, ...props }: any) => (<h3 className=\"text-lg font-bold mb-3 font-display\" {...props} />),\n    table: ({ node, ...props }: any) => (<table className=\"table-auto mb-3 w-full border-separate border-2 rounded-sm border-spacing-4\" style={{ borderColor: \"rgba(26,20,15,0.18)\" }} {...props} />),\n    th: ({ node, ...props }: any) => (<th className=\"text-left underline\" {...props} />),\n    p: ({ node, ...props }: any) => (<p className=\"whitespace-pre-wrap mb-3 last:mb-0 leading-relaxed\" {...props} />),\n    a: ({ node, ...props }: any) => (<a className=\"hover:underline font-semibold\" style={{ color: \"#c45d4f\" }} rel=\"noopener noreferrer\" target=\"_blank\" {...props} />),\n    code: ({ node, ...props }: any) => (\n      <code\n        className=\"px-1.5 py-0.5 rounded font-mono text-[13px]\"\n        style={{ background: \"rgba(26,20,15,0.10)\" }}\n        {...props}\n      />\n    ),\n  };\n\n  return (\n    <div className=\"flex flex-1 flex-col space-y-7 py-8 px-5 md:px-10 bg-transparent rounded-lg scroll-smooth \">\n      {messages.map((message, index) => {\n        const isSender = message.sender !== \"user\";\n        const isThinking = message.content === \"\" || message.content === \"Thinking...\";\n        const isFresh = index === messages.length - 1;\n        const showMeta = hoveredId === message.id || isReviewPage;\n\n        return (\n          <div\n            key={message.id || index}\n            onMouseEnter={() => setHoveredId(message.id)}\n            onMouseLeave={() => setHoveredId(null)}\n            className={`chat ${isSender ? \"chat-start\" : \"chat-end\"} relative group overflow-hidden`}\n          >\n            {isReviewPage && (\n              <p className=\"absolute -bottom-5 text-xs text-gray-300\">\n                sent {new Date(message.created_at).toLocaleString()}\n              </p>\n            )}\n\n            {isFresh && (\n              <span\n                aria-hidden\n                className=\"ring-out pointer-events-none absolute -inset-2 rounded-[26px]\"\n              />\n            )}\n\n            <div className={`chat-image avatar w-10 ${!isSender && \"mr-4\"}`}>\n              {logoUrl ? (\n                <img\n                  src={logoUrl}\n                  alt={chatbotName || \"Chatbot logo\"}\n                  width={48}\n                  height={48}\n                  className=\"h-12 w-12 rounded-full border object-cover\"\n                  style={{ borderColor: \"var(--hairline)\" }}\n                />\n              ) : isSender ? (\n                <div\n                  className=\"border h-12 w-12 rounded-full bg-white overflow-hidden\"\n                  style={{ borderColor: \"var(--hairline)\" }}\n                >\n                  <Avatar seed={chatbotName} className=\"h-12 w-12\" />\n                </div>\n              ) : (\n                <div className=\"h-12 w-12 rounded-full grid place-items-center\" style={{ background: \"rgba(244,234,215,0.06)\" }}>\n                  <UserCircle className=\"text-[var(--brass-2)]\" />\n                </div>\n              )}\n            </div>\n\n            {isSender ? (\n              <AiBubble\n                springIn={isFresh}\n                typing={isThinking}\n                className=\"chat-bubble relative rounded-2xl px-4 py-3 max-w-[80%] font-body text-[15px] leading-relaxed\"\n                style={isThinking ? {} : { border: \"1px solid rgba(224,176,112,0.18)\" }}\n              >\n                {isThinking ? (\n                  <div className=\"flex items-center gap-3 py-1\" style={{ color: \"#1e1e1e\" }}>\n                    <FourDotWave />\n                    <span className=\"font-mono text-[10px] uppercase tracking-[0.25em] opacity-70\">\n                      Thinking...\n                    </span>\n                  </div>\n                ) : (\n                  <TypewriterMarkdown\n                    text={message.content}\n                    isFresh={isFresh}\n                    components={markdownComponents}\n                    onType={() => scrollToBottom(false)}\n                  />\n                )}\n              </AiBubble>\n            ) : (\n              <UserBubble\n                springIn={isFresh}\n                className=\"chat-bubble relative rounded-2xl px-4 py-3 max-w-[80%] font-body text-[15px] leading-relaxed\"\n                style={{\n                  background: \"#e9e3e3ff\",\n                  color: \"#1e1e1e\",\n                  border: \"1px solid rgba(231, 228, 224, 0.22)\",\n                }}\n              >\n                <ReactMarkdown\n                  remarkPlugins={[remarkGfm]}\n                  components={markdownComponents}\n                >\n                  {message.content}\n                </ReactMarkdown>\n              </UserBubble>\n            )}\n\n            <div\n              className={`mt-1.5 px-1  flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.2em] transition-opacity duration-200 ${showMeta ? \"opacity-100\" : \"opacity-0\"\n                }`}\n              style={{ color: \"var(--muted-2)\" }}\n            >\n              <span>{isSender ? chatbotName || \"assistant\" : \"you\"}</span>\n              <span className=\"w-1 h-1 rounded-full\" style={{ background: \"var(--muted-2)\" }} />\n              <span>{formatTime(message.created_at)}</span>\n            </div>\n          </div>\n        );\n      })}\n      <div ref={ref} />\n    </div>\n  );\n}\n\nexport default Messages;\n","'use client';\n\n/**\n * Re-usable Google-inspired motion primitives for the chat surface.\n *\n * 1. <FluidAura />     — full-bleed Gemini-style gradient mesh + SVG turbulence.\n * 2. <FourDotWave />   — 4 colored dots bouncing in a wave.\n * 3. <AiBubble />      — springy entrance + slow-shifting gradient background.\n *\n * All animations are pure CSS; no external libraries.\n */\n\nimport React from \"react\";\n\n/* -------------------------------------------------------------------------- */\n/* 1. Fluid Aura                                                             */\n/* -------------------------------------------------------------------------- */\n\nexport function FluidAura({ className = \"\" }: { className?: string }) {\n  return (\n    <div\n      className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}\n      aria-hidden\n    >\n      {/* The moving gradient mesh. Two layers offset for parallax effect. */}\n      <div className=\"absolute inset-0 [filter:url(#auraDisplace)]\">\n        <div className=\"aura-mesh aura-mesh-a\" />\n        <div className=\"aura-mesh aura-mesh-b\" />\n      </div>\n\n      {/* SVG turbulence filter — gives the gradient the liquid ripple effect */}\n      <svg className=\"absolute h-0 w-0\" aria-hidden focusable=\"false\">\n        <defs>\n          <filter id=\"auraDisplace\">\n            <feTurbulence\n              type=\"fractalNoise\"\n              baseFrequency=\"0.012 0.018\"\n              numOctaves=\"2\"\n              seed=\"7\"\n            >\n              <animate\n                attributeName=\"baseFrequency\"\n                dur=\"22s\"\n                values=\"0.012 0.018; 0.022 0.028; 0.012 0.018\"\n                repeatCount=\"indefinite\"\n              />\n            </feTurbulence>\n            <feDisplacementMap in=\"SourceGraphic\" scale=\"120\" />\n          </filter>\n        </defs>\n      </svg>\n\n      {/* Local styles — kept here so the component is self-contained. */}\n      <style>{`\n        .aura-mesh {\n          position: absolute;\n          inset: -25%;\n          background: radial-gradient(\n              circle at 20% 30%,\n              rgba(66, 133, 244, 0.55) 0%,\n              transparent 45%\n            ),\n            radial-gradient(\n              circle at 80% 20%,\n              rgba(155, 81, 224, 0.5) 0%,\n              transparent 45%\n            ),\n            radial-gradient(\n              circle at 70% 80%,\n              rgba(234, 67, 53, 0.45) 0%,\n              transparent 45%\n            ),\n            radial-gradient(\n              circle at 25% 85%,\n              rgba(251, 188, 5, 0.45) 0%,\n              transparent 45%\n            );\n          will-change: transform;\n        }\n        .aura-mesh-a {\n          animation: auraDrift1 18s ease-in-out infinite alternate;\n        }\n        .aura-mesh-b {\n          animation: auraDrift2 24s ease-in-out infinite alternate;\n          mix-blend-mode: screen;\n          opacity: 0.7;\n        }\n        @keyframes auraDrift1 {\n          from { transform: translate3d(-4%, -3%, 0) scale(1.05); }\n          to   { transform: translate3d(6%,  4%, 0) scale(1.15); }\n        }\n        @keyframes auraDrift2 {\n          from { transform: translate3d(5%,  3%, 0) scale(1.10); }\n          to   { transform: translate3d(-5%, -4%, 0) scale(1.20); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* 2. Four-Dot Voice Wave                                                     */\n/* -------------------------------------------------------------------------- */\n\nexport function FourDotWave({ className = \"\" }: { className?: string }) {\n  const dots = [\n    { color: \"#8a2a2a\", delay: \"0s\" },   // oxblood\n    { color: \"#c89a5b\", delay: \"0.12s\" }, // brass\n    { color: \"#5a6b3b\", delay: \"0.24s\" }, // moss\n    { color: \"#2c5b5e\", delay: \"0.36s\" }, // teal\n  ];\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className}`} aria-label=\"Loading\">\n      {dots.map((d, i) => (\n        <span\n          key={i}\n          className=\"dot-wave\"\n          style={{ backgroundColor: d.color, animationDelay: d.delay }}\n        />\n      ))}\n      <style>{`\n        .dot-wave {\n          display: inline-block;\n          width: 7px;\n          height: 7px;\n          border-radius: 9999px;\n          will-change: transform;\n          animation: dotBounce 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;\n        }\n        @keyframes dotBounce {\n          0%, 60%, 100% { transform: translate3d(0, 0, 0); }\n          30%           { transform: translate3d(0, -6px, 0); }\n        }\n      `}</style>\n    </span>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* 3. Springy chat bubble with shifting gradient                             */\n/* -------------------------------------------------------------------------- */\n\nexport function AiBubble({\n  children,\n  className = \"\",\n  springIn = true,\n  style,\n  typing = false,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  springIn?: boolean;\n  style?: React.CSSProperties;\n  typing?: boolean;\n}) {\n  return (\n    <div\n      className={`ai-bubble ${springIn ? \"ai-bubble-in\" : \"\"} ${typing ? \"ai-typing\" : \"\"} ${className}`}\n      style={style}\n    >\n      {children}\n      <style>{`\n        .ai-bubble {\n          position: relative;\n          transform-origin: bottom left;\n          color: #1e1e1e;\n          background: linear-gradient(\n            135deg,\n            #eef2ff 0%,\n            #f5f3ff 35%,\n            #ecfeff 70%,\n            #eef2ff 100%\n          );\n          background-size: 250% 250%;\n          will-change: transform, background-position, box-shadow;\n          transition: box-shadow 220ms ease, background 220ms ease;\n        }\n        .ai-bubble-in {\n          animation: aiSpring 620ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n        }\n        /* Typing state: vibrant purple gradient with glow */\n        .ai-typing {\n          background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 35%, #8b5cf6 70%, #7c3aed 100%);\n          background-size: 200% 200%;\n          animation: aiTypingShift 4.5s ease-in-out infinite;\n          box-shadow: 0 12px 36px rgba(124,58,237,0.20), 0 1px 0 rgba(255,255,255,0.05) inset;\n          color: #fff;\n          border-color: rgba(255,255,255,0.08);\n        }\n        @keyframes aiSpring {\n          0%   { transform: scale(0.4) translate3d(0, 12px, 0); opacity: 0; }\n          60%  { transform: scale(1.04) translate3d(0, -2px, 0); opacity: 1; }\n          100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }\n        }\n        @keyframes aiTypingShift {\n          0%   { background-position:   0%  50%; filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }\n          50%  { background-position: 100%  50%; filter: drop-shadow(0 18px 48px rgba(124,58,237,0.18)); }\n          100% { background-position:   0%  50%; filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\nexport function UserBubble({\n  children,\n  className = \"\",\n  springIn = true,\n  style,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  springIn?: boolean;\n  style?: React.CSSProperties;\n}) {\n  return (\n    <div\n      className={`user-bubble ${springIn ? \"user-bubble-in\" : \"\"} ${className}`}\n      style={style}\n    >\n      {children}\n      <style>{`\n        .user-bubble {\n          position: relative;\n          transform-origin: bottom right;\n          background: #111113;\n          color: #ffffff;\n          will-change: transform;\n        }\n        .user-bubble-in {\n          animation: userSpring 520ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n        }\n        @keyframes userSpring {\n          0%   { transform: scale(0.4) translate3d(0, 12px, 0); opacity: 0; }\n          60%  { transform: scale(1.04) translate3d(0, -2px, 0); opacity: 1; }\n          100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }\n        }\n      `}</style>\n    </div>\n  );\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"../lib/utils\"\nimport { Label } from \"./label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-3\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":["useEffect","useState","useEffect","useState","jsx","jsx","jsx","jsxs","React","jsx","jsx","jsx","jsx","Slot","jsx","Slot","jsx","jsxs","useState","useEffect","email","jsx","useState","useEffect"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@shaimaababiker/embed",
+  "version": "0.1.3",
+  "description": "Embeddable Assistly chatbot as a React component. Drop-in replacement for the iframe-based embed.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "lucide-react": "^0.570.0",
+    "@dicebear/collection": "^9.3.1",
+    "@dicebear/core": "^9.3.1",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.1",
+    "react-hook-form": "^7.71.1",
+    "@hookform/resolvers": "^5.2.2",
+    "zod": "^4.3.6"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.8.10"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.3.5",
+    "typescript": "^5.9.3"
+  }
+}