@jrapps/my_tickets_chat_ui 0.0.5 → 0.1.0

package/dist/cjs/components/SiteChatComponent/index.js

@@ -36,186 +36,58 @@ module.exports = __toCommonJS(SiteChatComponent_exports);
 
 // src/components/SiteChatComponent/SiteChatComponent.tsx
 var import_react7 = __toESM(require("react"));
+var import_design_system9 = require("@wix/design-system");
+var import_styles_global = require("@wix/design-system/styles.global.css");
 
 // src/components/SiteChatComponent/useSiteChatComponent.ts
 function useSiteChatComponent() {
   return {};
 }
 
-// src/components/SiteChatComponent/Header/Header.tsx
+// src/components/SiteChatComponent/FabButton/FabButton.tsx
 var import_react = __toESM(require("react"));
 var import_design_system = require("@wix/design-system");
+var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Header = import_react.default.forwardRef(
+var FabButton = import_react.default.forwardRef(
   ({
     className,
     children,
-    title,
-    subtitle,
-    image,
-    onClose,
+    onClick,
+    type = "textIcon",
+    icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wix_ui_icons_common.WixChat, {}),
+    text,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: ["site-chat-header", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "site-chat-component-header-container", verticalAlign: "middle", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { width: "100%", direction: "horizontal", align: "center", gap: "10px", children: [
-      image && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "site-chat-component-header-image", width: "60px", height: "50px", borderRadius: "999px", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { direction: "vertical", className: "site-chat-component-header-text-section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "site-chat-component-header-top-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { className: "site-chat-component-header-top", verticalAlign: "middle", WebkitJustifyContent: "space-between", width: "100%", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "site-chat-component-header-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              onClick: onClose,
-              "aria-label": "Close",
-              className: "site-chat-component-header-close-button",
-              children: "\u2715"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "site-chat-component-header-bottom-section", children: subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "site-chat-component-header-subtitle", children: subtitle }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        className: "site-chat-component-fab",
+        onClick,
+        children: [
+          type === "textIcon" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { height: "100%", children: icon }) }) : null,
+          type === "textIcon" || type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-label", children: text }) }) : null,
+          type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { height: "100%", width: "max-content", children: icon }) }) : null
+        ]
+      }
+    ) });
   }
 );
-Header.displayName = "SiteChatComponent.Header";
+FabButton.displayName = "SiteChatComponent.FabButton";
 
-// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
+// src/components/SiteChatComponent/Footer/Footer.tsx
 var import_react3 = __toESM(require("react"));
 var import_design_system4 = require("@wix/design-system");
 
-// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
-var import_react2 = require("react");
-var import_design_system3 = require("@wix/design-system");
-
-// src/components/SiteChatComponent/MessageContainer/messages/attachment.tsx
-var import_design_system2 = require("@wix/design-system");
-var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
-var import_on_stage = require("@wix/wix-ui-icons-common/on-stage");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Attachment = ({ item }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { direction: "horizontal", maxWidth: "100%", boxSizing: "border-box", className: "site-chat-component-message-container-in-chat-file-item-wrapper-box", children: item && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "site-chat-component-message-container-in-chat-file-item-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wix_ui_icons_common.Page, { className: "site-chat-component-message-container-in-chat-file-icon", width: "20px", height: "20px" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "site-chat-component-message-container-in-chat-file-names-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "site-chat-component-message-container-in-chat-file-name", children: item.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "site-chat-component-message-container-in-chat-file-sub-name", children: "Attachment" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.TextButton, { size: "tiny", onClick: () => window.open(item.url, "_blank"), suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_on_stage.ArrowTopRight, { size: "tiny" }), children: "Open" })
-  ] }, item.id) });
-};
-var attachment_default = Attachment;
-
-// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
-var import_jsx_runtime3 = require("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 = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    if (wrapperRef.current) {
-      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
-    }
-  }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-messages-wrapper", ref: wrapperRef, children: messages.map(({ _id, message, attachment, timestamp, type, agentName }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `message-item ${type}`, children: type === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AgentMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp, agentName }) : type === "user" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UserMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SystemMessageWrapper, { message, timestamp }) }, _id || index)) });
-};
-var GetSystemMessage = ({ type }) => {
-  switch (type) {
-    case "AGENT_JOINED":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has joined the chat." });
-    case "AGENT_LEFT":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has left the chat." });
-    case "USER_JOINED":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has joined the chat." });
-    case "USER_LEFT":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has left the chat." });
-    case "CHAT_ENDED":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has ended." });
-    case "CHAT_REOPENED":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been reopened." });
-    case "CHAT_TRANSFERRED":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "Waiting for an agent to join the chat..." });
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "System message" });
-  }
-};
-var SystemMessageWrapper = ({ message, timestamp }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-system-message-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "site-chat-component-message-container-system-message", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: "dashed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GetSystemMessage, { type: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: "dashed" })
-  ] }) });
-};
-var AgentMessageWrapper = ({ message, attachment, timestamp, agentName }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: AGENT_MESSAGE_GAP }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Avatar, { size: "size24", className: "site-chat-component-message-container-agent-message-avatar", name: agentName }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: AGENT_MESSAGE_WIDTH, gap: AGENT_MESSAGE_INNER_GAP, display: "flex", flexDirection: "column" }, children: [
-      agentName && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "site-chat-component-message-container-agent-name-time-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-agent-name", children: agentName }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-agent-message-timestamp", children: formatTimestamp(timestamp) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `site-chat-component-message-container-agent-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "site-chat-component-message-container-agent-message", children: [
-        message && message,
-        attachment && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(attachment_default, { item: attachment })
-      ] }) })
-    ] })
-  ] });
-};
-var UserMessageWrapper = ({ message, attachment, timestamp }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
-    !attachment && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-chat-component-message-container-user-name", children: "Me" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `site-chat-component-message-container-user-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "site-chat-component-message-container-user-message", children: [
-      message && message,
-      attachment && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(attachment_default, { item: attachment })
-    ] }) })
-  ] });
-};
-var messages_wrapper_default = MessagesWrapper;
-
-// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MessageContainer = import_react3.default.forwardRef(
-  ({ className, children, messages, loading, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: ["site-chat-message-container", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system4.Box, { className: "site-chat-component-message-container-", children: [
-      loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Box, { className: "site-chat-component-message-container-loading-state", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Loading messages..." }) }),
-      messages.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Box, { className: "site-chat-component-message-container-empty-state", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "No messages yet. Start a conversation" }) }),
-      messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(messages_wrapper_default, { messages })
-    ] }) });
-  }
-);
-MessageContainer.displayName = "SiteChatComponent.MessageContainer";
-
-// src/components/SiteChatComponent/Footer/Footer.tsx
-var import_react5 = __toESM(require("react"));
-var import_design_system6 = require("@wix/design-system");
-
 // src/components/SiteChatComponent/Footer/send-button/send-button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var SendButton = ({
   text = "Send",
   className = "",
   onClick,
   disabled = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       className: `site-chat-component-footer-my-tickets-chat-widget-send-button ${className}`,
@@ -228,13 +100,13 @@ var SendButton = ({
 var send_button_default = SendButton;
 
 // src/components/SiteChatComponent/Footer/attachment-list/attachment-list.tsx
-var import_react4 = require("react");
-var import_design_system5 = require("@wix/design-system");
+var import_react2 = require("react");
+var import_design_system2 = require("@wix/design-system");
 var import_wix_ui_icons_common2 = require("@wix/wix-ui-icons-common");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
-  const [localItems, setLocalItems] = (0, import_react4.useState)(items);
-  (0, import_react4.useEffect)(() => {
+  const [localItems, setLocalItems] = (0, import_react2.useState)(items);
+  (0, import_react2.useEffect)(() => {
     setLocalItems(items);
   }, [items]);
   const handleOnRemove = (id) => {
@@ -249,60 +121,137 @@ var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
       setLocalItems([]);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { direction: "horizontal", gap: 2, maxWidth: "100%", minWidth: "100%", overflowY: "hidden", boxSizing: "border-box", scrollbarWidth: "thin", overflowX: "auto", children: localItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "site-chat-component-footer-file-item-container", onClick: () => onClick && onClick(item.id, item.url), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_wix_ui_icons_common2.Page, { size: "15px" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "site-chat-component-footer-file-name", children: item.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.IconButton, { size: "tiny", onClick: () => handleOnRemove(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_wix_ui_icons_common2.DismissSmall, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Box, { direction: "horizontal", gap: 2, maxWidth: "100%", minWidth: "100%", overflowY: "hidden", boxSizing: "border-box", scrollbarWidth: "thin", overflowX: "auto", children: localItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "site-chat-component-footer-file-item-container", onClick: () => onClick && onClick(item.id, item.url), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wix_ui_icons_common2.Page, { size: "15px" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "site-chat-component-footer-file-name", children: item.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.IconButton, { size: "tiny", onClick: () => handleOnRemove(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wix_ui_icons_common2.DismissSmall, {}) })
   ] }, item.id)) });
 };
 var attachment_list_default = AttachmentList;
 
 // src/components/SiteChatComponent/Footer/message-input/message-input.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_design_system3 = require("@wix/design-system");
+var import_wix_ui_icons_common3 = require("@wix/wix-ui-icons-common");
+
+// src/components/SiteChatComponent/Footer/message-input/open-file-picker.ts
+var import_essentials = require("@wix/essentials");
+var import_meta = {};
+var uploadFile = async (file) => {
+  var _a;
+  try {
+    const baseApiUrl = new URL(import_meta.url).origin;
+    const response = await import_essentials.httpClient.fetchWithAuth(`${baseApiUrl}/api/widget/chat/upload-attachment`, {
+      method: "POST",
+      headers: {
+        "Content-Type": file.type || "application/octet-stream",
+        "x-file-name": encodeURIComponent(file.name),
+        "x-file-type": file.type || "application/octet-stream"
+      },
+      body: file
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || "Failed to upload file");
+    }
+    if (!((_a = data.file) == null ? void 0 : _a.id) || !data.file.displayName || !data.file.url) {
+      throw new Error("Invalid response format from upload endpoint");
+    }
+    return data.file;
+  } catch (error) {
+    console.error("Error uploading file:", error);
+    return null;
+  }
+};
+var openFilePicker = async (options) => {
+  const win = window;
+  if (!win.showOpenFilePicker) {
+    console.error("File Picker API is not supported in this browser.");
+    return;
+  }
+  try {
+    const fileHandles = await win.showOpenFilePicker(options);
+    const fileHandle = fileHandles[0];
+    const file = await fileHandle.getFile();
+    const uploadedFile = await uploadFile(file);
+    if (!uploadedFile) {
+      console.error("Failed to upload file.");
+      return;
+    }
+    return {
+      id: uploadedFile.id,
+      name: uploadedFile.displayName,
+      url: uploadedFile.url
+    };
+  } catch (error) {
+    console.error("Error opening file picker:", error);
+    return null;
+  }
+};
+
+// src/components/SiteChatComponent/Footer/message-input/message-input.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var MessageInput = ({
   placeholder = "Type a message...",
   disabled = false,
   className = "",
-  suffix = null,
+  suffix,
   value = "",
   onChange,
   onKeyDown,
-  attachmentButton
+  onAttachmentAdded
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const handleAttachmentOnClick = async () => {
+    try {
+      await openFilePicker({ multiple: false }).then((file) => {
+        if (file && onAttachmentAdded) {
+          onAttachmentAdded(file);
+        }
+      });
+    } catch (error) {
+      console.error("Error opening file picker:", error);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
         name: "messageInput",
-        className: "chat-input",
+        className: "site-chat-component-footer-chat-input",
         placeholder,
         disabled,
         value,
         onChange,
-        onKeyDown,
-        readOnly: !onChange
+        onKeyDown
       }
     ),
-    suffix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("sub", { className: "suffix", children: attachmentButton })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sub", { className: "site-chat-component-footer-suffix", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.IconButton, { onClick: handleAttachmentOnClick, className: "attachment-icon-button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_wix_ui_icons_common3.AttachmentSmall, {}) }) })
   ] });
 };
 var message_input_default = MessageInput;
 
 // src/components/SiteChatComponent/Footer/Footer.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Footer = import_react5.default.forwardRef(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Footer = import_react3.default.forwardRef(
   ({
     className,
     children,
     sendButtonConfig,
     attachmentListConfig,
     messageInputConfig,
+    onAttachmentAdded,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: ["site-chat-footer", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_design_system6.Box, { className: "site-chat-component-footer-message-input-container", direction: "vertical", gap: 1, verticalAlign: "middle", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system6.Box, { width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsxs)(import_design_system6.Box, { alignContent: "bottom", width: "100%", direction: "horizontal", gap: 2, verticalAlign: "middle", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    const handleSendMessage = (text, messageType, attachment) => {
+      if (sendButtonConfig == null ? void 0 : sendButtonConfig.onClick) {
+        sendButtonConfig.onClick(text, messageType, attachment);
+      } else {
+        console.warn("handleSendMessage function is not provided in sendButtonConfig");
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system4.Box, { ref, className: "site-chat-component-footer-message-input-container", direction: "vertical", gap: 1, verticalAlign: "middle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system4.Box, { width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsxs)(import_design_system4.Box, { alignContent: "bottom", width: "100%", direction: "horizontal", gap: 2, verticalAlign: "middle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           message_input_default,
           {
             placeholder: (messageInputConfig == null ? void 0 : messageInputConfig.placeholder) || "Type your message here...",
@@ -311,56 +260,189 @@ var Footer = import_react5.default.forwardRef(
             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
+            onAttachmentAdded
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           send_button_default,
           {
-            onClick: sendButtonConfig == null ? void 0 : sendButtonConfig.onClick,
+            onClick: () => handleSendMessage((messageInputConfig == null ? void 0 : messageInputConfig.value) || "", (attachmentListConfig == null ? void 0 : attachmentListConfig.items) ? "ATTACHMENT" : "TEXT"),
             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
+// src/components/SiteChatComponent/Header/Header.tsx
+var import_react4 = __toESM(require("react"));
+var import_design_system5 = require("@wix/design-system");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Header = import_react4.default.forwardRef(
+  ({
+    className,
+    children,
+    title,
+    subtitle,
+    image,
+    onClose,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { ref, className: "site-chat-component-header-container", verticalAlign: "middle", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.Box, { width: "100%", direction: "horizontal", align: "center", gap: "10px", children: [
+      image && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { className: "site-chat-component-header-image", width: "60px", height: "50px", borderRadius: "999px", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { style: { borderRadius: "999px" }, width: "100%", height: "100%", src: String(image), alt: "Business Logo" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.Box, { direction: "vertical", className: "site-chat-component-header-text-section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { className: "site-chat-component-header-top-section", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.Box, { className: "site-chat-component-header-top", verticalAlign: "middle", WebkitJustifyContent: "space-between", width: "100%", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "site-chat-component-header-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              "aria-label": "Close",
+              className: "site-chat-component-header-close-button",
+              children: "\u2715"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { className: "site-chat-component-header-bottom-section", children: subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "site-chat-component-header-subtitle", children: subtitle }) })
+      ] })
+    ] }) });
+  }
+);
+Header.displayName = "SiteChatComponent.Header";
+
+// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
 var import_react6 = __toESM(require("react"));
+var import_design_system8 = require("@wix/design-system");
+
+// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
+var import_react5 = require("react");
 var import_design_system7 = require("@wix/design-system");
+
+// src/components/SiteChatComponent/MessageContainer/messages/attachment.tsx
+var import_design_system6 = require("@wix/design-system");
+var import_wix_ui_icons_common4 = require("@wix/wix-ui-icons-common");
+var import_on_stage = require("@wix/wix-ui-icons-common/on-stage");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Attachment = ({ item }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Box, { direction: "horizontal", maxWidth: "100%", boxSizing: "border-box", className: "site-chat-component-message-container-in-chat-file-item-wrapper-box", children: item && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "site-chat-component-message-container-in-chat-file-item-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_wix_ui_icons_common4.Page, { className: "site-chat-component-message-container-in-chat-file-icon", width: "20px", height: "20px" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "site-chat-component-message-container-in-chat-file-names-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "site-chat-component-message-container-in-chat-file-name", children: item.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "site-chat-component-message-container-in-chat-file-sub-name", children: "Attachment" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.TextButton, { size: "tiny", onClick: () => window.open(item.url, "_blank"), suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_on_stage.ArrowTopRight, { size: "tiny" }), children: "Open" })
+  ] }, item.id) });
+};
+var attachment_default = Attachment;
+
+// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
+var import_jsx_runtime8 = require("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 = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
+  }, [messages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-messages-wrapper", ref: wrapperRef, children: messages.map(({ _id, message, attachment, timestamp, type, agentName }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `message-item ${type}`, children: type === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AgentMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp, agentName }) : type === "user" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UserMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SystemMessageWrapper, { message, timestamp }) }, _id || index)) });
+};
+var GetSystemMessage = ({ type }) => {
+  switch (type) {
+    case "AGENT_JOINED":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has joined the chat." });
+    case "AGENT_LEFT":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has left the chat." });
+    case "USER_JOINED":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has joined the chat." });
+    case "USER_LEFT":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has left the chat." });
+    case "CHAT_ENDED":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has ended." });
+    case "CHAT_REOPENED":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been reopened." });
+    case "CHAT_TRANSFERRED":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "Waiting for an agent to join the chat..." });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "System message" });
+  }
+};
+var SystemMessageWrapper = ({ message, timestamp }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-system-message", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "dashed" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GetSystemMessage, { type: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "dashed" })
+  ] }) });
+};
+var AgentMessageWrapper = ({ message, attachment, timestamp, agentName }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: AGENT_MESSAGE_GAP }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Avatar, { size: "size24", className: "site-chat-component-message-container-agent-message-avatar", name: agentName }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { width: AGENT_MESSAGE_WIDTH, gap: AGENT_MESSAGE_INNER_GAP, display: "flex", flexDirection: "column" }, children: [
+      agentName && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-agent-name-time-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-agent-name", children: agentName }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-agent-message-timestamp", children: formatTimestamp(timestamp) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `site-chat-component-message-container-agent-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-agent-message", children: [
+        message && message,
+        attachment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(attachment_default, { item: attachment })
+      ] }) })
+    ] })
+  ] });
+};
+var UserMessageWrapper = ({ message, attachment, timestamp }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
+    !attachment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-user-name", children: "Me" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `site-chat-component-message-container-user-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-user-message", children: [
+      message && message,
+      attachment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(attachment_default, { item: attachment })
+    ] }) })
+  ] });
+};
+var messages_wrapper_default = MessagesWrapper;
+
+// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var FabButton = import_react6.default.forwardRef(
+var MessageContainer = import_react6.default.forwardRef(
   ({
     className,
     children,
-    onClick,
-    type,
-    icon,
-    text,
+    messages,
+    loading,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, className: ["site-chat-fab-button", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-      "button",
-      {
-        className: "site-chat-component-fab",
-        onClick,
-        children: [
-          type === "textIcon" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system7.Box, { height: "100%", children: icon }) }) : null,
-          type === "textIcon" || type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "site-chat-component-fab-fab-button-text", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "site-chat-component-fab-fab-button-label", children: text }) }) : null,
-          type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system7.Box, { height: "100%", width: "max-content", children: icon }) }) : null
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_design_system8.Box, { ref, className: "site-chat-component-message-container", children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system8.Box, { className: "site-chat-component-message-container-loading-state", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Loading messages..." }) }),
+      messages.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system8.Box, { className: "site-chat-component-message-container-empty-state", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "No messages yet. Start a conversation" }) }),
+      messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(messages_wrapper_default, { messages })
+    ] });
   }
 );
-FabButton.displayName = "SiteChatComponent.FabButton";
-
-// src/components/SiteChatComponent/SiteChatComponent.tsx
-var import_design_system8 = require("@wix/design-system");
-var import_styles_global = require("@wix/design-system/styles.global.css");
+MessageContainer.displayName = "SiteChatComponent.MessageContainer";
 
 // src/components/SiteChatComponent/SiteChatComponent.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c48ccde")) {
@@ -379,7 +461,7 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c
   border-top-left-radius: inherit;
 }
 
-.site-chat-component-header-container .text-section {
+.site-chat-component-header-container .site-chat-component-header-text-section {
   width: 100%;
 }
 
@@ -697,13 +779,13 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c
   gap: 0px;
 }
 
-.site-chat-component-message-container-user-message-wrapper-attachment .in-chat-file-item-wrapper-box {
+.site-chat-component-message-container-user-message-wrapper-attachment .site-chat-component-message-container-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 {
+.site-chat-component-message-container-agent-message-wrapper-attachment .site-chat-component-message-container-in-chat-file-item-wrapper-box {
   align-items: flex-start;
   display: flex;
   flex-direction: column;
@@ -883,59 +965,27 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var SiteChatComponentRoot = import_react7.default.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__ */ (0, import_jsx_runtime10.jsx)(import_design_system8.Box, { align: "center", verticalAlign: "middle", height: "100%", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system8.Text, { children: "Editor view mode detected but editorShowChatPanel prop is not provided" }) });
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system8.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FabButton, { onClick: handleToggle, text: buttonTextValue }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_design_system8.Box,
-            {
-              className: `site-chat-component-panel ${editorShowChatPanel ? "open" : ""}`,
-              children: children2
-            }
-          )
-        ] });
+    isOpen
+  }, _ref) => {
+    useSiteChatComponent();
+    if (viewMode === "Editor") {
+      if (typeof editorShowChatPanel === "undefined") {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Box, { align: "center", verticalAlign: "middle", height: "100%", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Text, { children: "Editor view mode detected but editorShowChatPanel prop is not provided" }) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system8.Box, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system9.Box, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FabButton, { onClick: handleToggle, text: buttonTextValue }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_design_system8.Box,
-          {
-            className: `site-chat-component-panel ${isOpen ? "open" : ""}`,
-            children: children2
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Box, { className: `site-chat-component-panel ${editorShowChatPanel ? "open" : ""}`, children })
       ] });
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "div",
-      {
-        ref,
-        className: ["site-chat-component", className].filter(Boolean).join(" "),
-        ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToRender, { children })
-      }
-    );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system9.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FabButton, { onClick: handleToggle, text: buttonTextValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Box, { className: `site-chat-component-panel ${isOpen ? "open" : ""}`, children })
+    ] });
   }
 );
 SiteChatComponentRoot.displayName = "SiteChatComponent";