@jrapps/my_tickets_chat_ui 0.0.4 → 0.0.5

package/dist/esm/chunks/chunk-E5MBV2MX.js

@@ -0,0 +1,921 @@
+// src/components/SiteChatComponent/SiteChatComponent.tsx
+import React5 from "react";
+
+// src/components/SiteChatComponent/useSiteChatComponent.ts
+function useSiteChatComponent() {
+  return {};
+}
+
+// src/components/SiteChatComponent/Header/Header.tsx
+import React from "react";
+import { Box } from "@wix/design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Header = React.forwardRef(
+  ({
+    className,
+    children,
+    title,
+    subtitle,
+    image,
+    onClose,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: ["site-chat-header", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsx(Box, { className: "site-chat-component-header-container", verticalAlign: "middle", children: /* @__PURE__ */ jsxs(Box, { width: "100%", direction: "horizontal", align: "center", gap: "10px", children: [
+      image && /* @__PURE__ */ jsx(Box, { className: "site-chat-component-header-image", width: "60px", height: "50px", borderRadius: "999px", children: /* @__PURE__ */ jsx("img", { style: { borderRadius: "999px" }, width: "100%", height: "100%", src: "https://www.techsmith.com/wp-content/uploads/2023/08/What-are-High-Resolution-Images.png", alt: "Business Logo" }) }),
+      /* @__PURE__ */ jsxs(Box, { direction: "vertical", className: "site-chat-component-header-text-section", children: [
+        /* @__PURE__ */ jsx(Box, { className: "site-chat-component-header-top-section", children: /* @__PURE__ */ jsxs(Box, { className: "site-chat-component-header-top", verticalAlign: "middle", WebkitJustifyContent: "space-between", width: "100%", children: [
+          title && /* @__PURE__ */ jsx("h2", { className: "site-chat-component-header-title", children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              "aria-label": "Close",
+              className: "site-chat-component-header-close-button",
+              children: "\u2715"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Box, { className: "site-chat-component-header-bottom-section", children: subtitle && /* @__PURE__ */ jsx("h3", { className: "site-chat-component-header-subtitle", children: subtitle }) })
+      ] })
+    ] }) }) });
+  }
+);
+Header.displayName = "SiteChatComponent.Header";
+
+// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
+import React2 from "react";
+import { Box as Box3 } from "@wix/design-system";
+
+// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
+import { useRef, useEffect } from "react";
+import { Avatar } from "@wix/design-system";
+
+// src/components/SiteChatComponent/MessageContainer/messages/attachment.tsx
+import { TextButton, Box as Box2 } from "@wix/design-system";
+import {
+  Page as PageSmallIcon
+} from "@wix/wix-ui-icons-common";
+import { ArrowTopRight as ArrowTopRightIcon } from "@wix/wix-ui-icons-common/on-stage";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Attachment = ({ item }) => {
+  return /* @__PURE__ */ jsx2(Box2, { direction: "horizontal", maxWidth: "100%", boxSizing: "border-box", className: "site-chat-component-message-container-in-chat-file-item-wrapper-box", children: item && /* @__PURE__ */ jsxs2("div", { className: "site-chat-component-message-container-in-chat-file-item-container", children: [
+    /* @__PURE__ */ jsx2(PageSmallIcon, { className: "site-chat-component-message-container-in-chat-file-icon", width: "20px", height: "20px" }),
+    /* @__PURE__ */ jsxs2("div", { className: "site-chat-component-message-container-in-chat-file-names-container", children: [
+      /* @__PURE__ */ jsx2("span", { className: "site-chat-component-message-container-in-chat-file-name", children: item.name }),
+      /* @__PURE__ */ jsx2("span", { className: "site-chat-component-message-container-in-chat-file-sub-name", children: "Attachment" })
+    ] }),
+    /* @__PURE__ */ jsx2(TextButton, { size: "tiny", onClick: () => window.open(item.url, "_blank"), suffixIcon: /* @__PURE__ */ jsx2(ArrowTopRightIcon, { size: "tiny" }), children: "Open" })
+  ] }, item.id) });
+};
+var attachment_default = Attachment;
+
+// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var AGENT_MESSAGE_GAP = "10px";
+var AGENT_MESSAGE_WIDTH = "75%";
+var AGENT_MESSAGE_INNER_GAP = "4px";
+var ONE_MINUTE_MS = 6e4;
+var ONE_DAY_MS = 864e5;
+var DAYS_IN_WEEK = 7;
+var formatTimestamp = (timestamp) => {
+  if (!timestamp) return "";
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  if (now.getTime() - date.getTime() < ONE_MINUTE_MS) return "Just now";
+  const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const diffDays = Math.floor((startOfToday.getTime() - startOfDay.getTime()) / ONE_DAY_MS);
+  if (diffDays === 0) return `Today at ${time}`;
+  if (diffDays === 1) return `Yesterday at ${time}`;
+  if (diffDays < DAYS_IN_WEEK && date.getDay() < now.getDay())
+    return `${date.toLocaleDateString([], { weekday: "short" })} at ${time}`;
+  return `${date.toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" })} at ${time}`;
+};
+var MessagesWrapper = ({ messages = [] }) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
+  }, [messages]);
+  return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-messages-wrapper", ref: wrapperRef, children: messages.map(({ _id, message, attachment, timestamp, type, agentName }, index) => /* @__PURE__ */ jsx3("div", { className: `message-item ${type}`, children: type === "agent" ? /* @__PURE__ */ jsx3(AgentMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp, agentName }) : type === "user" ? /* @__PURE__ */ jsx3(UserMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp }) : /* @__PURE__ */ jsx3(SystemMessageWrapper, { message, timestamp }) }, _id || index)) });
+};
+var GetSystemMessage = ({ type }) => {
+  switch (type) {
+    case "AGENT_JOINED":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has joined the chat." });
+    case "AGENT_LEFT":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has left the chat." });
+    case "USER_JOINED":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has joined the chat." });
+    case "USER_LEFT":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has left the chat." });
+    case "CHAT_ENDED":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has ended." });
+    case "CHAT_REOPENED":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been reopened." });
+    case "CHAT_TRANSFERRED":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been transferred to another agent." });
+    case "WAITING_FOR_AGENT":
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "Waiting for an agent to join the chat..." });
+    default:
+      return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-message", children: "System message" });
+  }
+};
+var SystemMessageWrapper = ({ message, timestamp }) => {
+  return /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-system-message-wrapper", children: /* @__PURE__ */ jsxs3("div", { className: "site-chat-component-message-container-system-message", children: [
+    /* @__PURE__ */ jsx3("hr", { className: "dashed" }),
+    /* @__PURE__ */ jsx3(GetSystemMessage, { type: message }),
+    /* @__PURE__ */ jsx3("hr", { className: "dashed" })
+  ] }) });
+};
+var AgentMessageWrapper = ({ message, attachment, timestamp, agentName }) => {
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "row", gap: AGENT_MESSAGE_GAP }, children: [
+    /* @__PURE__ */ jsx3(Avatar, { size: "size24", className: "site-chat-component-message-container-agent-message-avatar", name: agentName }),
+    /* @__PURE__ */ jsxs3("div", { style: { width: AGENT_MESSAGE_WIDTH, gap: AGENT_MESSAGE_INNER_GAP, display: "flex", flexDirection: "column" }, children: [
+      agentName && /* @__PURE__ */ jsxs3("div", { className: "site-chat-component-message-container-agent-name-time-container", children: [
+        /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-agent-name", children: agentName }),
+        /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-agent-message-timestamp", children: formatTimestamp(timestamp) })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: `site-chat-component-message-container-agent-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ jsxs3("div", { className: "site-chat-component-message-container-agent-message", children: [
+        message && message,
+        attachment && /* @__PURE__ */ jsx3(attachment_default, { item: attachment })
+      ] }) })
+    ] })
+  ] });
+};
+var UserMessageWrapper = ({ message, attachment, timestamp }) => {
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
+    !attachment && /* @__PURE__ */ jsx3("div", { className: "site-chat-component-message-container-user-name", children: "Me" }),
+    /* @__PURE__ */ jsx3("div", { className: `site-chat-component-message-container-user-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ jsxs3("div", { className: "site-chat-component-message-container-user-message", children: [
+      message && message,
+      attachment && /* @__PURE__ */ jsx3(attachment_default, { item: attachment })
+    ] }) })
+  ] });
+};
+var messages_wrapper_default = MessagesWrapper;
+
+// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var MessageContainer = React2.forwardRef(
+  ({ className, children, messages, loading, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx4("div", { ref, className: ["site-chat-message-container", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsxs4(Box3, { className: "site-chat-component-message-container-", children: [
+      loading && /* @__PURE__ */ jsx4(Box3, { className: "site-chat-component-message-container-loading-state", children: /* @__PURE__ */ jsx4("p", { children: "Loading messages..." }) }),
+      messages.length === 0 && !loading && /* @__PURE__ */ jsx4(Box3, { className: "site-chat-component-message-container-empty-state", children: /* @__PURE__ */ jsx4("p", { children: "No messages yet. Start a conversation" }) }),
+      messages.length > 0 && /* @__PURE__ */ jsx4(messages_wrapper_default, { messages })
+    ] }) });
+  }
+);
+MessageContainer.displayName = "SiteChatComponent.MessageContainer";
+
+// src/components/SiteChatComponent/Footer/Footer.tsx
+import React3 from "react";
+import { Box as Box5 } from "@wix/design-system";
+
+// src/components/SiteChatComponent/Footer/send-button/send-button.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SendButton = ({
+  text = "Send",
+  className = "",
+  onClick,
+  disabled = false
+}) => {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      className: `site-chat-component-footer-my-tickets-chat-widget-send-button ${className}`,
+      onClick,
+      disabled,
+      children: text
+    }
+  );
+};
+var send_button_default = SendButton;
+
+// src/components/SiteChatComponent/Footer/attachment-list/attachment-list.tsx
+import { useState, useEffect as useEffect2 } from "react";
+import { IconButton, Box as Box4 } from "@wix/design-system";
+import {
+  Page as PageSmallIcon2,
+  DismissSmall as DismissIcon
+} from "@wix/wix-ui-icons-common";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
+  const [localItems, setLocalItems] = useState(items);
+  useEffect2(() => {
+    setLocalItems(items);
+  }, [items]);
+  const handleOnRemove = (id) => {
+    if (onRemove) {
+      onRemove(id);
+    }
+    setLocalItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  const handleSendFiles = () => {
+    if (onFilesSent && localItems.length > 0) {
+      onFilesSent(localItems);
+      setLocalItems([]);
+    }
+  };
+  return /* @__PURE__ */ jsx6(Box4, { direction: "horizontal", gap: 2, maxWidth: "100%", minWidth: "100%", overflowY: "hidden", boxSizing: "border-box", scrollbarWidth: "thin", overflowX: "auto", children: localItems.map((item) => /* @__PURE__ */ jsxs5("div", { className: "site-chat-component-footer-file-item-container", onClick: () => onClick && onClick(item.id, item.url), children: [
+    /* @__PURE__ */ jsx6(PageSmallIcon2, { size: "15px" }),
+    /* @__PURE__ */ jsx6("span", { className: "site-chat-component-footer-file-name", children: item.name }),
+    /* @__PURE__ */ jsx6(IconButton, { size: "tiny", onClick: () => handleOnRemove(item.id), children: /* @__PURE__ */ jsx6(DismissIcon, {}) })
+  ] }, item.id)) });
+};
+var attachment_list_default = AttachmentList;
+
+// src/components/SiteChatComponent/Footer/message-input/message-input.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var MessageInput = ({
+  placeholder = "Type a message...",
+  disabled = false,
+  className = "",
+  suffix = null,
+  value = "",
+  onChange,
+  onKeyDown,
+  attachmentButton
+}) => {
+  return /* @__PURE__ */ jsxs6("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        name: "messageInput",
+        className: "chat-input",
+        placeholder,
+        disabled,
+        value,
+        onChange,
+        onKeyDown,
+        readOnly: !onChange
+      }
+    ),
+    suffix && /* @__PURE__ */ jsx7("sub", { className: "suffix", children: attachmentButton })
+  ] });
+};
+var message_input_default = MessageInput;
+
+// src/components/SiteChatComponent/Footer/Footer.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Footer = React3.forwardRef(
+  ({
+    className,
+    children,
+    sendButtonConfig,
+    attachmentListConfig,
+    messageInputConfig,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx8("div", { ref, className: ["site-chat-footer", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsxs7(Box5, { className: "site-chat-component-footer-message-input-container", direction: "vertical", gap: 1, verticalAlign: "middle", children: [
+      /* @__PURE__ */ jsx8(Box5, { width: "100%", children: /* @__PURE__ */ jsx8(attachment_list_default, { items: (attachmentListConfig == null ? void 0 : attachmentListConfig.items) || [], onRemove: attachmentListConfig == null ? void 0 : attachmentListConfig.onRemove, onClick: attachmentListConfig == null ? void 0 : attachmentListConfig.onClick, onFilesSent: attachmentListConfig == null ? void 0 : attachmentListConfig.onFilesSent }) }),
+      /* @__PURE__ */ jsxs7(Box5, { alignContent: "bottom", width: "100%", direction: "horizontal", gap: 2, verticalAlign: "middle", children: [
+        /* @__PURE__ */ jsx8(
+          message_input_default,
+          {
+            placeholder: (messageInputConfig == null ? void 0 : messageInputConfig.placeholder) || "Type your message here...",
+            className: (messageInputConfig == null ? void 0 : messageInputConfig.className) || "message-input",
+            value: (messageInputConfig == null ? void 0 : messageInputConfig.value) || "",
+            onChange: messageInputConfig == null ? void 0 : messageInputConfig.onChange,
+            onKeyDown: messageInputConfig == null ? void 0 : messageInputConfig.onKeyDown,
+            disabled: messageInputConfig == null ? void 0 : messageInputConfig.disabled,
+            attachmentButton: messageInputConfig == null ? void 0 : messageInputConfig.attachmentButton
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          send_button_default,
+          {
+            onClick: sendButtonConfig == null ? void 0 : sendButtonConfig.onClick,
+            disabled: sendButtonConfig == null ? void 0 : sendButtonConfig.disabled,
+            text: (sendButtonConfig == null ? void 0 : sendButtonConfig.buttonText) || "Send"
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
+Footer.displayName = "SiteChatComponent.Footer";
+
+// src/components/SiteChatComponent/FabButton/FabButton.tsx
+import React4 from "react";
+import { Box as Box6 } from "@wix/design-system";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var FabButton = React4.forwardRef(
+  ({
+    className,
+    children,
+    onClick,
+    type,
+    icon,
+    text,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx9("div", { ref, className: ["site-chat-fab-button", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        className: "site-chat-component-fab",
+        onClick,
+        children: [
+          type === "textIcon" ? /* @__PURE__ */ jsx9("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ jsx9(Box6, { height: "100%", children: icon }) }) : null,
+          type === "textIcon" || type === "text" ? /* @__PURE__ */ jsx9("span", { className: "site-chat-component-fab-fab-button-text", children: /* @__PURE__ */ jsx9("span", { className: "site-chat-component-fab-fab-button-label", children: text }) }) : null,
+          type === "icon" ? /* @__PURE__ */ jsx9("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ jsx9(Box6, { height: "100%", width: "max-content", children: icon }) }) : null
+        ]
+      }
+    ) });
+  }
+);
+FabButton.displayName = "SiteChatComponent.FabButton";
+
+// src/components/SiteChatComponent/SiteChatComponent.tsx
+import { Box as Box7, Text } from "@wix/design-system";
+import "@wix/design-system/styles.global.css";
+
+// src/components/SiteChatComponent/SiteChatComponent.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c48ccde")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-3c48ccde";
+  s.textContent = `.site-chat-component {
+  /* SiteChatComponent base styles */
+}
+
+/* ---------- Header styles ---------- */
+
+.site-chat-component-header-container {
+  background: var(--my-tickets-chat-widget-panel-header-background-color);
+  padding: 10px;
+  border-top-right-radius: inherit;
+  border-top-left-radius: inherit;
+}
+
+.site-chat-component-header-container .text-section {
+  width: 100%;
+}
+
+.site-chat-component-header-title {
+  font-style: var(--my-tickets-chat-widget-panel-header-title-font-style);
+  margin-bottom: 0 !important;
+  color: var(--my-tickets-chat-widget-panel-header-title-color);
+}
+
+.site-chat-component-header-subtitle {
+  font-style: var(--my-tickets-chat-widget-panel-header-subtitle-font-style);
+  font-weight: normal !important;
+  margin-top: 0 !important;
+  color: var(--my-tickets-chat-widget-panel-header-subtitle-color);
+}
+
+.site-chat-component-header-close-button {
+  cursor: pointer !important;
+  background: none;
+  border: none;
+  padding: 4px;
+  color: var(--my-tickets-chat-widget-panel-header-button-color);
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 4px;
+  transition: opacity 0.15s;
+}
+
+.site-chat-component-header-close-button:hover {
+  opacity: 0.8;
+}
+
+/* ---------- Footer styles ---------- */
+
+.site-chat-component-footer-message-input-container {
+  padding: var(--cw-space-md, 16px);
+  background: var(--my-tickets-chat-widget-panel-footer-background-color);
+  font-family: var(--cw-font, sans-serif);
+  border-radius: 0 0 var(--cw-radius-panel, 16px) var(--cw-radius-panel, 16px);
+}
+
+.site-chat-component-footer-attachment-icon-button {
+  width: 20px;
+  height: 20px;
+}
+
+.site-chat-component-footer-my-tickets-chat-widget-send-button {
+  background: var(--my-tickets-chat-widget-panel-footer-button-color);
+  border: 1px solid var(--my-tickets-chat-widget-panel-footer-button-border-color);
+  color: var(--my-tickets-chat-widget-panel-footer-button-text-color);
+  padding: 6px;
+  border-radius: 4px;
+  width: 80px;
+  cursor: pointer;
+}
+
+.site-chat-component-footer-my-tickets-chat-widget-send-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.site-chat-component-footer-file-item-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
+  background-color: var(--wds-color-surface, var(--wsr-color-surface, #FFFFFF));
+  border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
+  box-sizing: border-box;
+}
+
+.site-chat-component-footer-file-name {
+  font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "\\30E1\\30A4\\30EA\\30AA", "meiryo", "\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4   pro w3", "hiragino kaku gothic pro", sans-serif));
+  font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
+  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
+  line-height: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 20px));
+  letter-spacing: var(--wds-font-letter-spacing-0, unset);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 115px;
+}
+
+.site-chat-component-footer-input-wrapper {
+  padding: 5px;
+  box-sizing: border-box;
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  gap: 10px;
+  border-radius: 4px;
+  background: var(--my-tickets-chat-widget-panel-footer-input-background-color);
+  border: 2px solid var(--my-tickets-chat-widget-panel-footer-input-border-color);
+  color: var(--my-tickets-chat-widget-panel-footer-input-text-color);
+  font-size: var(--my-tickets-chat-widget-panel-footer-input-text-size);
+  font-family: 'Arial', sans-serif;
+}
+
+.site-chat-component-footer-suffix {
+  background: inherit;
+  width: max-content;
+  min-height: 100%;
+  max-height: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  font-size: inherit;
+  padding: 0px;
+  margin: 0px;
+  font-family: inherit;
+  color: inherit;
+  box-sizing: border-box;
+}
+
+.site-chat-component-footer-chat-input {
+  background: inherit;
+  border: none;
+  font-size: inherit;
+  font-family: inherit;
+  color: inherit;
+  width: inherit;
+}
+
+.site-chat-component-footer-chat-input::placeholder {
+  background: inherit;
+  border: none;
+  font-size: inherit;
+  font-family: inherit;
+  color: inherit;
+  opacity: 0.5;
+}
+
+.site-chat-component-footer-chat-input:focus {
+  outline: none;
+}
+
+/* ---------- Messages styles ---------- */
+/* Message Container */
+.site-chat-component-message-container {
+  display: flex !important;
+  flex-direction: column !important;
+  padding: var(--cw-space-md, 16px) !important;
+  background: var(--my-tickets-chat-widget-panel-messages-background-color) !important;
+  flex: 1 !important;
+  min-height: 0;
+  overflow-y: auto !important;
+}
+
+.site-chat-component-message-container-messages-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cw-space-sm, 8px);
+}
+
+.site-chat-component-message-container-agent-message-wrapper,
+.site-chat-component-message-container-user-message-wrapper {
+  display: flex;
+  padding: 10px 14px;
+  border-radius: var(--cw-radius-bubble, 12px);
+  width: max-content;
+  max-width: 80%;
+  font-family: var(--cw-font, sans-serif);
+}
+
+.site-chat-component-message-container-agent-name {
+  color: var(--my-tickets-chat-widget-panel-messages-agent-name-text-color);
+  font-size: var(--my-tickets-chat-widget-panel-messages-agent-name-text-size);
+  font-weight: 500;
+}
+
+.site-chat-component-message-container-user-name {
+  color: var(--my-tickets-chat-widget-panel-messages-user-name-text-color);
+  font-size: var(--my-tickets-chat-widget-panel-messages-user-name-text-size);
+  font-weight: 500;
+  display: var(--my-tickets-chat-widget-panel-messages-user-name-text-visible);
+}
+
+.site-chat-component-message-container-agent-message-avatar {
+  margin-top: 20px;
+  display: var(--my-tickets-chat-widget-panel-messages-agent-icon-visible);
+}
+
+.site-chat-component-message-container-user-message,
+.site-chat-component-message-container-agent-message {
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.site-chat-component-message-container-agent-message {
+  font-size: var(--my-tickets-chat-widget-panel-messages-agent-text-size);
+}
+
+.site-chat-component-message-container-user-message {
+  font-size: var(--my-tickets-chat-widget-panel-messages-user-text-size);
+}
+
+.site-chat-component-message-container-agent-message-wrapper {
+  justify-content: flex-start;
+  align-self: flex-start;
+  background-color: var(--my-tickets-chat-widget-panel-messages-agent-bubble-color);
+  color: var(--my-tickets-chat-widget-panel-messages-agent-text-color);
+}
+
+.site-chat-component-message-container-user-message-wrapper {
+  justify-content: flex-end;
+  align-self: flex-end;
+  margin-left: auto;
+  background-color: var(--my-tickets-chat-widget-panel-messages-user-bubble-color);
+  color: var(--my-tickets-chat-widget-panel-messages-user-text-color);
+}
+
+.site-chat-component-message-container-agent-name-time-container {
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  font-family: 'Madefor';
+  font-size: 13px;
+}
+
+/* System Messages */
+
+.site-chat-component-message-container-system-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: var(--cw-space-sm, 8px);
+}
+
+.site-chat-component-message-container-system-message .dashed {
+  flex: 1;
+  border: none;
+  border-top: 1px dashed var(--my-tickets-chat-widget-panel-messages-system-color);
+  margin: 0;
+}
+
+.site-chat-component-message-container-system-message-message {
+  color: var(--my-tickets-chat-widget-panel-messages-system-color);
+  font-family: var(--cw-font, sans-serif);
+  font-size: var(--my-tickets-chat-widget-panel-messages-system-size);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* Empty and Loading States */
+
+.site-chat-component-message-container-empty-state {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.site-chat-component-message-container-empty-state p {
+  font-family: var(--cw-font, sans-serif);
+  font-size: 14px;
+  color: var(--my-tickets-chat-widget-panel-messages-system-color);
+}
+
+.site-chat-component-message-container-loading-state {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.site-chat-component-message-container-loading-state p {
+  font-family: var(--cw-font, sans-serif);
+  font-size: 14px;
+  color: var(--my-tickets-chat-widget-panel-messages-system-color);
+}
+
+.site-chat-component-message-container-in-chat-file-item-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
+  background-color: var(--wds-color-surface, var(--wsr-color-surface, #FFFFFF));
+  border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
+  box-sizing: border-box;
+}
+
+.site-chat-component-message-container-in-chat-file-name {
+  font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "\\30E1\\30A4\\30EA\\30AA", "meiryo", "\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4   pro w3", "hiragino kaku gothic pro", sans-serif));
+  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 10px));
+  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
+  line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 12px));
+  letter-spacing: var(--wds-font-letter-spacing-0, unset);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  color: black;
+}
+
+.site-chat-component-message-container-in-chat-file-sub-name {
+  font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "\\30E1\\30A4\\30EA\\30AA", "meiryo", "\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4   pro w3", "hiragino kaku gothic pro", sans-serif));
+  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 10px));
+  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
+  line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 12px));
+  letter-spacing: var(--wds-font-letter-spacing-0, unset);
+  color: var(--wds-color-text-secondary, var(--wsr-color-text-secondary, #6B6B6B));
+}
+
+.site-chat-component-message-container-in-chat-file-icon {
+  fill: black !important;
+}
+
+.site-chat-component-message-container-in-chat-file-names-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}
+
+.site-chat-component-message-container-user-message-wrapper-attachment .in-chat-file-item-wrapper-box {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+}
+
+.site-chat-component-message-container-agent-message-wrapper-attachment .in-chat-file-item-wrapper-box {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+}
+
+/* FAB */
+.site-chat-component-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  gap: 4.5px;
+  cursor: pointer;
+  z-index: 100;
+  user-select: none;
+  border-radius: 99px;
+  padding: 9px 25px;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+
+  font-size: var(--my-tickets-chat-widget-button-text-size) !important;
+  background-color: var(--my-tickets-chat-widget-button-color);
+  border: 1px solid var(--my-tickets-chat-widget-button-border-color);
+  color: var(--my-tickets-chat-widget-button-text-color);
+  font: var(--my-tickets-chat-widget-button-text-font);
+}
+
+.site-chat-component-fab-fab-button-label {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.site-chat-component-fab-fab-button-icon,
+.site-chat-component-fab-fab-button-text {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+
+.site-chat-component-fab-fab-button-icon svg {
+  width: var(--my-tickets-chat-widget-button-icon-size);
+  height: var(--my-tickets-chat-widget-button-icon-size);
+  font-weight: inherit;
+}
+
+/* \u2500\u2500 Design Tokens \u2500\u2500 */
+:host {
+  --cw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+  /* Primary palette */
+  --cw-primary: #3B82F6;
+  --cw-primary-hover: #2563EB;
+  --cw-primary-light: #EFF6FF;
+  --cw-primary-shadow: rgba(59, 130, 246, 0.35);
+  --cw-primary-shadow-hover: rgba(59, 130, 246, 0.5);
+
+  /* Neutrals */
+  --cw-bg: #F8FAFC;
+  --cw-surface: #FFFFFF;
+  --cw-border: #E2E8F0;
+
+  /* Text */
+  --cw-text: #1E293B;
+  --cw-text-muted: #64748B;
+  --cw-text-inverse: #FFFFFF;
+
+  /* Message bubbles */
+  --cw-bubble-user: var(--cw-primary);
+  --cw-bubble-user-text: var(--cw-text-inverse);
+  --cw-bubble-agent: #F1F5F9;
+  --cw-bubble-agent-text: var(--cw-text);
+
+  /* Radii */
+  --cw-radius-panel: 16px;
+  --cw-radius-bubble: 12px;
+  --cw-radius-pill: 50px;
+
+  /* Spacing */
+  --cw-space-xs: 4px;
+  --cw-space-sm: 8px;
+  --cw-space-md: 16px;
+  --cw-space-lg: 24px;
+
+  /* Shadows */
+  --cw-shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.05);
+  --cw-shadow-fab: 0 8px 24px var(--cw-primary-shadow);
+  --cw-shadow-fab-hover: 0 12px 32px var(--cw-primary-shadow-hover);
+}
+
+/* \u2500\u2500 Hide toggle \u2500\u2500 */
+#site-chat-component-chat-toggle {
+  display: none;
+}
+
+/* \u2500\u2500 Panel \u2500\u2500 */
+.site-chat-component-panel {
+  position: fixed !important;
+  bottom: 60px;
+  right: 30px;
+  width: min(340px, 100vw);
+  max-height: 50vh;
+  max-height: 50dvh;
+  background: var(--cw-surface);
+  border-radius: var(--cw-radius-panel, 16px) !important;
+  box-shadow: var(--cw-shadow-panel);
+  transform: scale(0.85) translateY(16px);
+  transform-origin: bottom right;
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 0.3s cubic-bezier(.175, .885, .32, 1.275), opacity 0.25s ease;
+  z-index: 99;
+  display: flex !important;
+  flex-direction: column !important;
+  min-height: 450px;
+  font-family: var(--cw-font);
+  overflow: hidden;
+  border: 0px solid var(--wst-color-line);
+  box-shadow: 0 2px 6px var(--wst-color-line), 0 0 0 1px var(--wst-color-line);
+}
+
+.site-chat-component-panel.open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+  pointer-events: all;
+  z-index: 101;
+  bottom: 10px;
+}
+
+/* \u2500\u2500 Mobile: fill screen \u2500\u2500 */
+@media (max-width: 480px) {
+  .site-chat-component-panel {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    min-height: 0;
+    max-height: none;
+    bottom: 0;
+    right: 0;
+  }
+
+  .site-chat-component-panel.open {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+/* \u2500\u2500 Small tablets \u2500\u2500 */
+@media (min-width: 481px) and (max-width: 768px) {
+  .site-chat-component-panel {
+    width: min(380px, calc(100vw - 24px));
+    max-height: 70vh;
+    max-height: 70dvh;
+  }
+}
+
+/* \u2500\u2500 Large screens \u2500\u2500 */
+@media (min-width: 1200px) {
+  .site-chat-component-panel {
+    width: 350px;
+    max-height: 70vh;
+    max-height: 70dvh;
+  }
+}
+`;
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponent/SiteChatComponent.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var SiteChatComponentRoot = React5.forwardRef(
+  ({
+    className,
+    children,
+    viewMode,
+    editorShowChatPanel,
+    handleToggle,
+    handleClose,
+    buttonTextValue,
+    demoMessages,
+    loading,
+    messages,
+    handleSendMessage,
+    isOpen,
+    ...rest
+  }, ref) => {
+    const {} = useSiteChatComponent();
+    const ToRender = ({ children: children2 }) => {
+      if (viewMode === "Editor") {
+        editorShowChatPanel = true;
+        if (typeof editorShowChatPanel === "undefined") {
+          console.error("Editor view mode detected but editorShowChatPanel prop is not provided. Please provide editorShowChatPanel prop to control the chat panel visibility in Editor mode.");
+          return /* @__PURE__ */ jsx10(Box7, { align: "center", verticalAlign: "middle", height: "100%", width: "100%", children: /* @__PURE__ */ jsx10(Text, { children: "Editor view mode detected but editorShowChatPanel prop is not provided" }) });
+        }
+        return /* @__PURE__ */ jsxs9(Box7, { children: [
+          /* @__PURE__ */ jsx10(FabButton, { onClick: handleToggle, text: buttonTextValue }),
+          /* @__PURE__ */ jsx10(
+            Box7,
+            {
+              className: `site-chat-component-panel ${editorShowChatPanel ? "open" : ""}`,
+              children: children2
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsxs9(Box7, { children: [
+        /* @__PURE__ */ jsx10(FabButton, { onClick: handleToggle, text: buttonTextValue }),
+        /* @__PURE__ */ jsx10(
+          Box7,
+          {
+            className: `site-chat-component-panel ${isOpen ? "open" : ""}`,
+            children: children2
+          }
+        )
+      ] });
+    };
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: ["site-chat-component", className].filter(Boolean).join(" "),
+        ...rest,
+        children: /* @__PURE__ */ jsx10(ToRender, { children })
+      }
+    );
+  }
+);
+SiteChatComponentRoot.displayName = "SiteChatComponent";
+var SiteChatComponent = Object.assign(SiteChatComponentRoot, {
+  Header,
+  MessageContainer,
+  Footer,
+  FabButton
+});
+
+export {
+  SiteChatComponent
+};
+//# sourceMappingURL=chunk-E5MBV2MX.js.map