@openchatwidget/sdk 0.1.0

package/dist/index.js

@@ -0,0 +1,1135 @@
+// widget/src/OpenChatWidget.tsx
+import * as React2 from "react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+
+// widget/src/components/ChatToggleButton.tsx
+import * as React from "react";
+
+// widget/src/theme.ts
+var HELPFUL_CHAT_LOGO_DATA_URI = "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_10_20)'%3E %3Cmask id='mask0_10_20' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='-20' y='0' width='240' height='200'%3E %3Cpath d='M220 0H-20V200H220V0Z' fill='white'/%3E %3Cpath d='M-20 76C0 64 20 88 40 76C60 64 80 88 100 76C120 64 140 88 160 76C180 64 200 88 220 76V102C200 114 180 90 160 102C140 114 120 90 100 102C80 114 60 90 40 102C20 114 0 90 -20 102V76Z' fill='black'/%3E %3C/mask%3E %3Cg mask='url(%23mask0_10_20)'%3E %3Cpath d='M100 156C143.078 156 178 125.555 178 88C178 50.4446 143.078 20 100 20C56.9218 20 22 50.4446 22 88C22 125.555 56.9218 156 100 156Z' fill='%2300E46A'/%3E %3Cpath d='M76 146L64 184L106 152L76 146Z' fill='%2300E46A'/%3E %3C/g%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0_10_20'%3E %3Crect width='200' height='200' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E";
+var OPENCHAT_THEME_SCOPE = "[data-openchatwidget-root]";
+function buildOpenChatWidgetThemeCss(scopeSelector = OPENCHAT_THEME_SCOPE) {
+  return `
+@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Space+Grotesk:wght@400;500;700&display=swap");
+
+${scopeSelector},
+${scopeSelector} *,
+${scopeSelector} *::before,
+${scopeSelector} *::after {
+  box-sizing: border-box;
+}
+
+${scopeSelector} {
+  color: #1b1d22;
+  font-size: 16px;
+  line-height: 1.4;
+  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+${scopeSelector} button,
+${scopeSelector} input,
+${scopeSelector} select,
+${scopeSelector} textarea {
+  font: inherit;
+  color: inherit;
+}
+
+@keyframes helpfulChatDotPulse {
+  0%, 100% {
+    opacity: 0.2;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes helpfulChatEmptyFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+}
+
+// widget/src/components/ChatToggleButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LOGO_SRC = HELPFUL_CHAT_LOGO_DATA_URI;
+var BUTTON_SIZE_PX = 68;
+var ICON_SIZE_PX = 54;
+var CLOSE_ICON_SIZE_PX = 22;
+var MOBILE_BUTTON_SIZE_PX = 56;
+var MOBILE_ICON_SIZE_PX = 42;
+var MOBILE_CLOSE_ICON_SIZE_PX = 18;
+function CloseIcon({ size }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      "aria-hidden": "true",
+      style: { display: "block" },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 6l12 12M18 6 6 18",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+var ChatToggleButton = React.forwardRef(function ChatToggleButton2({
+  isOpen,
+  onToggle,
+  isMobile = false,
+  logoSrc = DEFAULT_LOGO_SRC,
+  unreadCount = 0
+}, ref) {
+  const [logoLoadFailed, setLogoLoadFailed] = React.useState(false);
+  const buttonSize = isMobile ? MOBILE_BUTTON_SIZE_PX : BUTTON_SIZE_PX;
+  const iconSize = isMobile ? MOBILE_ICON_SIZE_PX : ICON_SIZE_PX;
+  const closeIconSize = isMobile ? MOBILE_CLOSE_ICON_SIZE_PX : CLOSE_ICON_SIZE_PX;
+  const offset = isMobile ? "12px" : "16px";
+  const hasUnread = !isOpen && unreadCount > 0;
+  const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: onToggle,
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      style: {
+        position: "fixed",
+        right: offset,
+        bottom: offset,
+        borderRadius: "9999px",
+        border: "none",
+        width: `${buttonSize}px`,
+        height: `${buttonSize}px`,
+        padding: "0",
+        background: isOpen ? "#111827" : "#00E46A",
+        color: "#ffffff",
+        cursor: "pointer",
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        hasUnread ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-label": `${unreadCount} unread support message${unreadCount === 1 ? "" : "s"}`,
+            style: {
+              position: "absolute",
+              top: isMobile ? "-2px" : "0px",
+              right: isMobile ? "-2px" : "0px",
+              minWidth: isMobile ? "18px" : "20px",
+              height: isMobile ? "18px" : "20px",
+              borderRadius: "9999px",
+              padding: "0 5px",
+              background: "#ef4444",
+              color: "#ffffff",
+              fontSize: isMobile ? "10px" : "11px",
+              fontWeight: 700,
+              lineHeight: 1,
+              border: "1.5px solid #ffffff",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: unreadLabel
+          }
+        ) : null,
+        isOpen ? /* @__PURE__ */ jsx(CloseIcon, { size: closeIconSize }) : !logoLoadFailed ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: logoSrc,
+            alt: "",
+            "aria-hidden": "true",
+            width: iconSize,
+            height: iconSize,
+            onError: () => setLogoLoadFailed(true),
+            style: {
+              display: "block",
+              filter: "brightness(0) invert(1)"
+            }
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: "24px", lineHeight: 1 }, children: "+" })
+      ]
+    }
+  );
+});
+
+// widget/src/components/WidgetPanel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_LOGO_SRC2 = HELPFUL_CHAT_LOGO_DATA_URI;
+function WidgetPanel({
+  isOpen,
+  isMobileViewport,
+  title,
+  onClose,
+  panelStyle,
+  panelRef,
+  logoSrc = DEFAULT_LOGO_SRC2,
+  activeSupport,
+  children
+}) {
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2("section", { ref: panelRef, style: panelStyle, "aria-label": title, children: [
+    /* @__PURE__ */ jsxs2(
+      "header",
+      {
+        style: {
+          padding: isMobileViewport ? "calc(8px + env(safe-area-inset-top, 0px)) 14px 8px" : "14px 16px 8px",
+          display: "grid",
+          gridTemplateColumns: "36px minmax(0, 1fr) 36px",
+          alignItems: "center",
+          gap: "10px"
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: logoSrc,
+              alt: "",
+              "aria-hidden": "true",
+              width: 36,
+              height: 36,
+              style: { display: "block" }
+            }
+          ),
+          activeSupport ? /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px",
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      width: "30px",
+                      height: "30px",
+                      borderRadius: "9999px",
+                      overflow: "hidden",
+                      background: "#e2e8f0",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#334155",
+                      fontSize: "11px",
+                      fontWeight: 600,
+                      flexShrink: 0
+                    },
+                    children: [
+                      activeSupport.pictureUrl ? /* @__PURE__ */ jsx2(
+                        "img",
+                        {
+                          src: activeSupport.pictureUrl,
+                          alt: "",
+                          "aria-hidden": "true",
+                          width: 30,
+                          height: 30,
+                          style: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
+                        }
+                      ) : /* @__PURE__ */ jsx2("span", { children: activeSupport.name.slice(0, 1).toUpperCase() }),
+                      activeSupport.isOnline ? /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            position: "absolute",
+                            right: "1px",
+                            bottom: "1px",
+                            width: "8px",
+                            height: "8px",
+                            borderRadius: "9999px",
+                            background: "#22c55e",
+                            border: "1.5px solid #ffffff"
+                          }
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      minWidth: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2(
+                        "p",
+                        {
+                          style: {
+                            margin: 0,
+                            fontSize: isMobileViewport ? "12px" : "13px",
+                            lineHeight: 1.2,
+                            color: "#0f172a",
+                            fontWeight: 600,
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis"
+                          },
+                          children: activeSupport.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "p",
+                        {
+                          style: {
+                            margin: "1px 0 0",
+                            fontSize: "11px",
+                            lineHeight: 1.2,
+                            color: activeSupport.isOnline ? "#166534" : "#64748b",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis"
+                          },
+                          children: activeSupport.statusLabel ?? (activeSupport.isOnline ? "Online now" : "Offline")
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsx2("div", {}),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close chat",
+              style: {
+                width: isMobileViewport ? "36px" : "32px",
+                height: isMobileViewport ? "36px" : "32px",
+                borderRadius: "9999px",
+                border: "none",
+                background: "transparent",
+                color: "#4b5563",
+                cursor: "pointer",
+                fontSize: "20px",
+                lineHeight: 1
+              },
+              children: "x"
+            }
+          )
+        ]
+      }
+    ),
+    children
+  ] });
+}
+
+// widget/src/components/MessageList.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function getAvatarFallback(label) {
+  if (!label || label.trim().length === 0) {
+    return "S";
+  }
+  const words = label.trim().split(/\s+/).filter((value) => value.length > 0).slice(0, 2);
+  if (words.length === 0) {
+    return "S";
+  }
+  return words.map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+function MessageList({
+  messages,
+  isGenerating,
+  error,
+  messageContainerRef,
+  isMobileViewport,
+  getMessageText,
+  renderMarkdown,
+  messageDecorations,
+  hasApiKey = true,
+  emptyState
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: messageContainerRef,
+      style: {
+        padding: isMobileViewport ? "10px 14px 12px" : "8px 18px 14px",
+        overflowY: "auto",
+        WebkitOverflowScrolling: "touch",
+        overscrollBehaviorY: "contain",
+        display: "flex",
+        flexDirection: "column",
+        gap: isMobileViewport ? "16px" : "14px",
+        flex: 1
+      },
+      children: [
+        messages.length === 0 ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              padding: isMobileViewport ? "4px 2px 2px" : "2px 2px 4px",
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%"
+            },
+            children: emptyState ?? null
+          }
+        ) : null,
+        messages.map((message) => {
+          const text = getMessageText(message.parts);
+          if (!text.trim()) {
+            return null;
+          }
+          const decoration = messageDecorations?.[message.id];
+          const isUser = message.role === "user";
+          const isSystem = Boolean(decoration?.isSystem);
+          const messageTimestampLabel = decoration?.messageTimestampLabel;
+          const showAssistantAvatar = !isUser && !isSystem && Boolean(decoration?.avatarUrl || decoration?.assistantBubble);
+          const article = /* @__PURE__ */ jsx3(
+            "article",
+            {
+              style: {
+                alignSelf: isSystem ? "center" : isUser ? "flex-end" : "flex-start",
+                background: isSystem ? "transparent" : isUser ? "#f3f4f6" : "transparent",
+                border: "none",
+                borderRadius: isSystem ? "0" : isUser ? "20px" : "0",
+                padding: isSystem ? "0" : isUser ? isMobileViewport ? "11px 14px" : "10px 14px" : "0",
+                maxWidth: isSystem ? "92%" : isUser ? isMobileViewport ? "90%" : "86%" : showAssistantAvatar ? isMobileViewport ? "88%" : "84%" : "100%",
+                color: isSystem ? "#64748b" : "#111827",
+                fontStyle: isSystem ? "italic" : "normal",
+                fontSize: isSystem ? "13px" : isMobileViewport ? "16px" : "15px",
+                lineHeight: 1.5,
+                boxShadow: "none"
+              },
+              children: renderMarkdown(text)
+            }
+          );
+          const messageBody = showAssistantAvatar ? /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                alignSelf: "flex-start",
+                display: "flex",
+                alignItems: "flex-start",
+                gap: "8px",
+                maxWidth: "100%"
+              },
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      width: "26px",
+                      height: "26px",
+                      borderRadius: "9999px",
+                      background: "#e2e8f0",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#334155",
+                      fontSize: "11px",
+                      fontWeight: 600
+                    },
+                    children: decoration?.avatarUrl ? /* @__PURE__ */ jsx3(
+                      "img",
+                      {
+                        src: decoration.avatarUrl,
+                        alt: "",
+                        "aria-hidden": "true",
+                        width: 26,
+                        height: 26,
+                        style: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
+                      }
+                    ) : /* @__PURE__ */ jsx3("span", { children: getAvatarFallback(decoration?.avatarFallbackLabel) })
+                  }
+                ),
+                article
+              ]
+            }
+          ) : article;
+          return /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: messageTimestampLabel ? "3px" : "0"
+              },
+              children: [
+                messageBody,
+                messageTimestampLabel ? /* @__PURE__ */ jsx3(
+                  "p",
+                  {
+                    style: {
+                      margin: 0,
+                      alignSelf: isSystem ? "center" : isUser ? "flex-end" : "flex-start",
+                      marginLeft: !isSystem && !isUser && showAssistantAvatar ? "34px" : "0",
+                      fontSize: "10px",
+                      lineHeight: 1.2,
+                      color: "#94a3b8",
+                      letterSpacing: "0.01em"
+                    },
+                    children: messageTimestampLabel
+                  }
+                ) : null
+              ]
+            },
+            message.id
+          );
+        }),
+        isGenerating ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-label": "Assistant is responding",
+            style: {
+              alignSelf: "flex-start",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "18px"
+            },
+            children: /* @__PURE__ */ jsx3(
+              "span",
+              {
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "9999px",
+                  background: "#9ca3af",
+                  animation: "helpfulChatDotPulse 1.1s ease-in-out infinite"
+                }
+              }
+            )
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b91c1c", fontSize: "14px" }, children: error.message }) : null,
+        !hasApiKey ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b91c1c", fontSize: "14px" }, children: "Missing apiKey prop." }) : null
+      ]
+    }
+  );
+}
+
+// widget/src/components/Composer.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var POWERED_BY_LOGO_SRC = HELPFUL_CHAT_LOGO_DATA_URI;
+function SendIcon() {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "17",
+      height: "17",
+      fill: "none",
+      "aria-hidden": "true",
+      style: { display: "block" },
+      children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          d: "M12 19V5m0 0-5 5m5-5 5 5",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        display: "block",
+        width: "10px",
+        height: "10px",
+        background: "currentColor",
+        borderRadius: "2px"
+      }
+    }
+  );
+}
+function Composer({
+  input,
+  setInput,
+  placeholder,
+  isGenerating,
+  canSend,
+  isMobileViewport,
+  isInputFocused,
+  textareaRef,
+  onSubmit,
+  onStop,
+  onInputKeyDown,
+  onFocus,
+  onBlur,
+  logoSrc = POWERED_BY_LOGO_SRC
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "form",
+    {
+      onSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        padding: isMobileViewport ? "8px 12px calc(10px + env(safe-area-inset-bottom, 0px))" : "0 16px 16px",
+        background: "#ffffff",
+        gap: "6px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              flex: 1,
+              borderRadius: "9999px",
+              border: isInputFocused ? "1px solid #cbd5e1" : "1px solid #e5e7eb",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: isMobileViewport ? "4px 6px 4px 16px" : "4px 6px 4px 14px",
+              background: "#ffffff",
+              minHeight: isMobileViewport ? "52px" : "44px",
+              boxShadow: isInputFocused ? "0 0 0 3px rgba(15, 23, 42, 0.06)" : "none",
+              transition: "box-shadow 120ms ease, border-color 120ms ease"
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: input,
+                  onChange: (event) => setInput(event.target.value),
+                  onKeyDown: onInputKeyDown,
+                  onFocus,
+                  onBlur,
+                  placeholder,
+                  rows: 1,
+                  enterKeyHint: "send",
+                  style: {
+                    flex: 1,
+                    border: "none",
+                    background: "transparent",
+                    outline: "none",
+                    padding: isMobileViewport ? "12px 0 11px" : "10px 0 9px",
+                    fontSize: isMobileViewport ? "16px" : "15px",
+                    lineHeight: 1.4,
+                    color: "#111827",
+                    resize: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: isGenerating ? "button" : "submit",
+                  onClick: isGenerating ? onStop : void 0,
+                  disabled: isGenerating ? false : !canSend,
+                  "aria-label": isGenerating ? "Stop generating response" : "Send message",
+                  style: {
+                    width: isMobileViewport ? "38px" : "36px",
+                    height: isMobileViewport ? "38px" : "36px",
+                    borderRadius: "9999px",
+                    border: "none",
+                    background: isGenerating ? "#111827" : canSend ? "#111827" : "#d1d5db",
+                    color: "#ffffff",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: "pointer"
+                  },
+                  children: isGenerating ? /* @__PURE__ */ jsx4(StopIcon, {}) : /* @__PURE__ */ jsx4(SendIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "a",
+          {
+            href: "https://helpfulchatapp.com",
+            target: "_blank",
+            rel: "noreferrer",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "5px",
+              color: "#9ca3af",
+              fontSize: "10px",
+              lineHeight: 1.2,
+              userSelect: "none",
+              textDecoration: "none",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "img",
+                {
+                  src: logoSrc,
+                  alt: "",
+                  width: 10,
+                  height: 10,
+                  style: {
+                    display: "block",
+                    opacity: 0.5
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx4("span", { children: "Powered by HelpfulChat" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// widget/src/components/MarkdownMessage.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function MarkdownMessage({ text }) {
+  return /* @__PURE__ */ jsx5(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        p: ({ children }) => /* @__PURE__ */ jsx5("p", { style: { margin: "0 0 10px", lineHeight: 1.5 }, children }),
+        h1: ({ children }) => /* @__PURE__ */ jsx5("h1", { style: { margin: "0 0 10px", fontSize: "1.2rem", lineHeight: 1.3 }, children }),
+        h2: ({ children }) => /* @__PURE__ */ jsx5("h2", { style: { margin: "0 0 10px", fontSize: "1.1rem", lineHeight: 1.3 }, children }),
+        h3: ({ children }) => /* @__PURE__ */ jsx5("h3", { style: { margin: "0 0 10px", fontSize: "1rem", lineHeight: 1.3 }, children }),
+        ul: ({ children }) => /* @__PURE__ */ jsx5("ul", { style: { margin: "0 0 10px", paddingLeft: "20px" }, children }),
+        ol: ({ children }) => /* @__PURE__ */ jsx5("ol", { style: { margin: "0 0 10px", paddingLeft: "20px" }, children }),
+        li: ({ children }) => /* @__PURE__ */ jsx5("li", { style: { marginBottom: "6px" }, children }),
+        a: ({ href, children }) => /* @__PURE__ */ jsx5("a", { href, style: { color: "#0f172a", textDecoration: "underline" }, target: "_blank", rel: "noreferrer", children }),
+        code: ({ children }) => /* @__PURE__ */ jsx5(
+          "code",
+          {
+            style: {
+              background: "#f3f4f6",
+              borderRadius: "6px",
+              padding: "2px 6px",
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+              fontSize: "0.9em"
+            },
+            children
+          }
+        ),
+        pre: ({ children }) => /* @__PURE__ */ jsx5(
+          "pre",
+          {
+            style: {
+              margin: "0 0 10px",
+              background: "#f9fafb",
+              borderRadius: "10px",
+              border: "1px solid #e5e7eb",
+              padding: "10px 12px",
+              overflowX: "auto"
+            },
+            children
+          }
+        ),
+        blockquote: ({ children }) => /* @__PURE__ */ jsx5(
+          "blockquote",
+          {
+            style: {
+              margin: "0 0 10px",
+              paddingLeft: "12px",
+              borderLeft: "2px solid #e5e7eb",
+              color: "#374151"
+            },
+            children
+          }
+        )
+      },
+      children: text
+    }
+  );
+}
+
+// widget/src/components/EmptyState.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function EmptyState({ isMobileViewport, children }) {
+  return /* @__PURE__ */ jsx6(
+    "section",
+    {
+      "aria-label": "Conversation introduction",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: isMobileViewport ? "110px" : "124px"
+      },
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "12px",
+            width: "100%",
+            animation: "helpfulChatEmptyFadeIn 240ms ease-out both"
+          },
+          children: [
+            /* @__PURE__ */ jsx6(
+              "h2",
+              {
+                style: {
+                  margin: 0,
+                  color: "#0f172a",
+                  fontSize: isMobileViewport ? "17px" : "18px",
+                  lineHeight: 1.25,
+                  fontWeight: 500,
+                  letterSpacing: "-0.005em",
+                  textAlign: "center"
+                },
+                children: "What can I help you with today?"
+              }
+            ),
+            children ? /* @__PURE__ */ jsx6("div", { style: { width: "100%" }, children }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// widget/src/utils/chat.ts
+function extractMessageText(message) {
+  if (typeof message?.content === "string") {
+    return message.content;
+  }
+  if (!Array.isArray(message.parts)) {
+    return "";
+  }
+  const textChunks = message.parts.map((part) => {
+    if (!part || typeof part !== "object") {
+      return "";
+    }
+    const typedPart = part;
+    if (typedPart.type !== "text" || typeof typedPart.text !== "string") {
+      return "";
+    }
+    return typedPart.text;
+  }).filter(Boolean);
+  return textChunks.join("");
+}
+
+// widget/src/OpenChatWidget.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var MOBILE_BREAKPOINT_PX = 768;
+var DEFAULT_TITLE = "Helpful Chat";
+var DEFAULT_PLACEHOLDER = "Ask a question...";
+function OpenChatWidget({ url }) {
+  const [input, setInput] = React2.useState("");
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const [isInputFocused, setIsInputFocused] = React2.useState(false);
+  const [isMobileViewport, setIsMobileViewport] = React2.useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.innerWidth <= MOBILE_BREAKPOINT_PX;
+  });
+  const [visualViewportHeight, setVisualViewportHeight] = React2.useState(() => {
+    if (typeof window === "undefined") {
+      return 0;
+    }
+    return window.visualViewport?.height ?? window.innerHeight;
+  });
+  const [visualViewportOffsetTop, setVisualViewportOffsetTop] = React2.useState(() => {
+    if (typeof window === "undefined") {
+      return 0;
+    }
+    return window.visualViewport?.offsetTop ?? 0;
+  });
+  const messageListRef = React2.useRef(null);
+  const textareaRef = React2.useRef(null);
+  const panelRef = React2.useRef(null);
+  const toggleRef = React2.useRef(null);
+  const transport = React2.useMemo(
+    () => new DefaultChatTransport({
+      api: url
+    }),
+    [url]
+  );
+  const themeCss = React2.useMemo(() => buildOpenChatWidgetThemeCss(), []);
+  const {
+    messages,
+    sendMessage,
+    status,
+    error,
+    stop
+  } = useChat({
+    transport
+  });
+  const isGenerating = status === "submitted" || status === "streaming";
+  const canSend = input.trim().length > 0 && !isGenerating;
+  React2.useEffect(() => {
+    const handleResize = () => {
+      setIsMobileViewport(window.innerWidth <= MOBILE_BREAKPOINT_PX);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  React2.useEffect(() => {
+    const handleViewportChange = () => {
+      if (typeof window === "undefined") {
+        return;
+      }
+      setVisualViewportHeight(window.visualViewport?.height ?? window.innerHeight);
+      setVisualViewportOffsetTop(window.visualViewport?.offsetTop ?? 0);
+    };
+    handleViewportChange();
+    window.addEventListener("resize", handleViewportChange);
+    window.visualViewport?.addEventListener("resize", handleViewportChange);
+    window.visualViewport?.addEventListener("scroll", handleViewportChange);
+    return () => {
+      window.removeEventListener("resize", handleViewportChange);
+      window.visualViewport?.removeEventListener("resize", handleViewportChange);
+      window.visualViewport?.removeEventListener("scroll", handleViewportChange);
+    };
+  }, []);
+  React2.useEffect(() => {
+    if (!isMobileViewport || !isOpen || typeof document === "undefined") {
+      return;
+    }
+    const { body } = document;
+    const previousOverflow = body.style.overflow;
+    const previousOverscroll = body.style.overscrollBehavior;
+    body.style.overflow = "hidden";
+    body.style.overscrollBehavior = "none";
+    return () => {
+      body.style.overflow = previousOverflow;
+      body.style.overscrollBehavior = previousOverscroll;
+    };
+  }, [isMobileViewport, isOpen]);
+  React2.useEffect(() => {
+    const scrollToBottom = () => {
+      const container = messageListRef.current;
+      if (!container) {
+        return;
+      }
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: isGenerating ? "auto" : "smooth"
+      });
+    };
+    scrollToBottom();
+  }, [messages, isGenerating]);
+  React2.useEffect(() => {
+    if (!isOpen || typeof document === "undefined") {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      const clickedPanel = panelRef.current?.contains(target) ?? false;
+      const clickedToggle = toggleRef.current?.contains(target) ?? false;
+      if (!clickedPanel && !clickedToggle) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [isOpen]);
+  const toggleOpen = React2.useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const closeChat = React2.useCallback(() => {
+    textareaRef.current?.blur();
+    setIsOpen(false);
+  }, []);
+  const submitMessage = React2.useCallback(() => {
+    const nextInput = input.trim();
+    if (!nextInput || isGenerating) {
+      return;
+    }
+    void sendMessage({
+      text: nextInput
+    });
+    setInput("");
+    textareaRef.current?.focus();
+  }, [sendMessage, input, isGenerating, setInput]);
+  const handleSubmit = React2.useCallback(
+    (event) => {
+      event.preventDefault();
+      submitMessage();
+    },
+    [submitMessage]
+  );
+  const handleInputKeyDown = React2.useCallback(
+    (event) => {
+      if (event.key !== "Enter") {
+        return;
+      }
+      if (event.shiftKey || event.nativeEvent.isComposing) {
+        return;
+      }
+      event.preventDefault();
+      submitMessage();
+    },
+    [submitMessage]
+  );
+  const handleFocusInput = React2.useCallback(() => {
+    setIsInputFocused(true);
+  }, []);
+  const handleBlurInput = React2.useCallback(() => {
+    setIsInputFocused(false);
+  }, []);
+  const mobilePanelHeight = visualViewportHeight > 0 ? `${Math.round(visualViewportHeight)}px` : "100dvh";
+  const mobilePanelTop = visualViewportOffsetTop > 0 ? `${Math.round(visualViewportOffsetTop)}px` : "0px";
+  const panelStyle = isMobileViewport ? {
+    position: "fixed",
+    top: mobilePanelTop,
+    left: "0",
+    right: "0",
+    width: "100vw",
+    height: mobilePanelHeight,
+    borderRadius: "0",
+    background: "#ffffff",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 1001
+  } : {
+    position: "fixed",
+    right: "16px",
+    bottom: "96px",
+    width: "min(700px, calc(100vw - 20px))",
+    height: "min(820px, calc(100vh - 116px))",
+    borderRadius: "20px",
+    background: "#ffffff",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 1e3,
+    boxShadow: "0 20px 48px rgba(15, 23, 42, 0.16), 0 3px 10px rgba(15, 23, 42, 0.08)"
+  };
+  const emptyState = /* @__PURE__ */ jsx7(EmptyState, { isMobileViewport });
+  return /* @__PURE__ */ jsxs6("div", { "data-openchatwidget-root": "", children: [
+    /* @__PURE__ */ jsx7("style", { children: themeCss }),
+    /* @__PURE__ */ jsx7(
+      ChatToggleButton,
+      {
+        ref: toggleRef,
+        isOpen,
+        isMobile: isMobileViewport,
+        onToggle: toggleOpen,
+        unreadCount: 0,
+        logoSrc: HELPFUL_CHAT_LOGO_DATA_URI
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      WidgetPanel,
+      {
+        isOpen,
+        isMobileViewport,
+        title: DEFAULT_TITLE,
+        onClose: closeChat,
+        panelStyle,
+        panelRef,
+        logoSrc: HELPFUL_CHAT_LOGO_DATA_URI,
+        children: /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minHeight: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx7(
+                MessageList,
+                {
+                  messages,
+                  isGenerating,
+                  error,
+                  isMobileViewport,
+                  messageContainerRef: messageListRef,
+                  getMessageText: (parts) => extractMessageText({ parts }),
+                  renderMarkdown: (text) => /* @__PURE__ */ jsx7(MarkdownMessage, { text }),
+                  emptyState,
+                  hasApiKey: true
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                Composer,
+                {
+                  input,
+                  setInput,
+                  placeholder: DEFAULT_PLACEHOLDER,
+                  isGenerating,
+                  canSend,
+                  isMobileViewport,
+                  isInputFocused,
+                  textareaRef,
+                  onSubmit: handleSubmit,
+                  onStop: () => void stop(),
+                  onInputKeyDown: handleInputKeyDown,
+                  onFocus: handleFocusInput,
+                  onBlur: handleBlurInput,
+                  logoSrc: HELPFUL_CHAT_LOGO_DATA_URI
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// widget/src/index.ts
+import { createOpenAI } from "@ai-sdk/openai";
+import { convertToModelMessages, streamText } from "ai";
+export {
+  OpenChatWidget,
+  convertToModelMessages,
+  createOpenAI,
+  streamText
+};
+//# sourceMappingURL=index.js.map