@jrapps/my_tickets_chat_ui 0.0.5 → 0.0.6

package/dist/esm/chunks/{chunk-E5MBV2MX.js → chunk-P3P4FPSX.js}

@@ -1,187 +1,57 @@
 // src/components/SiteChatComponent/SiteChatComponent.tsx
 import React5 from "react";
+import { Box as Box7, Text } from "@wix/design-system";
+import "@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
 import React from "react";
 import { Box } from "@wix/design-system";
+import { WixChat } from "@wix/wix-ui-icons-common";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Header = React.forwardRef(
+var FabButton = React.forwardRef(
   ({
     className,
     children,
-    title,
-    subtitle,
-    image,
-    onClose,
+    onClick,
+    type = "textIcon",
+    icon = /* @__PURE__ */ jsx(WixChat, {}),
+    text,
     ...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 }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "site-chat-component-fab",
+        onClick,
+        children: [
+          type === "textIcon" ? /* @__PURE__ */ jsx("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ jsx(Box, { height: "100%", children: icon }) }) : null,
+          type === "textIcon" || type === "text" ? /* @__PURE__ */ jsx("span", { className: "site-chat-component-fab-fab-button-text", children: /* @__PURE__ */ jsx("span", { className: "site-chat-component-fab-fab-button-label", children: text }) }) : null,
+          type === "icon" ? /* @__PURE__ */ jsx("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ jsx(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
 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";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var SendButton = ({
   text = "Send",
   className = "",
   onClick,
   disabled = false
 }) => {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       className: `site-chat-component-footer-my-tickets-chat-widget-send-button ${className}`,
@@ -194,16 +64,16 @@ var SendButton = ({
 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 { useState, useEffect } from "react";
+import { IconButton, Box as Box2 } from "@wix/design-system";
 import {
-  Page as PageSmallIcon2,
+  Page as PageSmallIcon,
   DismissSmall as DismissIcon
 } from "@wix/wix-ui-icons-common";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
   const [localItems, setLocalItems] = useState(items);
-  useEffect2(() => {
+  useEffect(() => {
     setLocalItems(items);
   }, [items]);
   const handleOnRemove = (id) => {
@@ -218,60 +88,137 @@ var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
       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, {}) })
+  return /* @__PURE__ */ jsx3(Box2, { direction: "horizontal", gap: 2, maxWidth: "100%", minWidth: "100%", overflowY: "hidden", boxSizing: "border-box", scrollbarWidth: "thin", overflowX: "auto", children: localItems.map((item) => /* @__PURE__ */ jsxs2("div", { className: "site-chat-component-footer-file-item-container", onClick: () => onClick && onClick(item.id, item.url), children: [
+    /* @__PURE__ */ jsx3(PageSmallIcon, { size: "15px" }),
+    /* @__PURE__ */ jsx3("span", { className: "site-chat-component-footer-file-name", children: item.name }),
+    /* @__PURE__ */ jsx3(IconButton, { size: "tiny", onClick: () => handleOnRemove(item.id), children: /* @__PURE__ */ jsx3(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";
+import { IconButton as IconButton2 } from "@wix/design-system";
+import { AttachmentSmall } from "@wix/wix-ui-icons-common";
+
+// src/components/SiteChatComponent/Footer/message-input/open-file-picker.ts
+import { httpClient } from "@wix/essentials";
+var import_meta = {};
+var uploadFile = async (file) => {
+  var _a;
+  try {
+    const baseApiUrl = new URL(import_meta.url).origin;
+    const response = await 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
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MessageInput = ({
   placeholder = "Type a message...",
   disabled = false,
   className = "",
-  suffix = null,
+  suffix,
   value = "",
   onChange,
   onKeyDown,
-  attachmentButton
+  onAttachmentAdded
 }) => {
-  return /* @__PURE__ */ jsxs6("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
-    /* @__PURE__ */ jsx7(
+  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__ */ jsxs3("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
+    /* @__PURE__ */ jsx4(
       "input",
       {
         name: "messageInput",
-        className: "chat-input",
+        className: "site-chat-component-footer-chat-input",
         placeholder,
         disabled,
         value,
         onChange,
-        onKeyDown,
-        readOnly: !onChange
+        onKeyDown
       }
     ),
-    suffix && /* @__PURE__ */ jsx7("sub", { className: "suffix", children: attachmentButton })
+    /* @__PURE__ */ jsx4("sub", { className: "site-chat-component-footer-suffix", children: /* @__PURE__ */ jsx4(IconButton2, { onClick: handleAttachmentOnClick, className: "attachment-icon-button", children: /* @__PURE__ */ jsx4(AttachmentSmall, {}) }) })
   ] });
 };
 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(
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Footer = React2.forwardRef(
   ({
     className,
     children,
     sendButtonConfig,
     attachmentListConfig,
     messageInputConfig,
+    onAttachmentAdded,
     ...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(
+    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__ */ jsxs4(Box3, { ref, className: "site-chat-component-footer-message-input-container", direction: "vertical", gap: 1, verticalAlign: "middle", children: [
+      /* @__PURE__ */ jsx5(Box3, { width: "100%", children: /* @__PURE__ */ jsx5(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__ */ jsxs4(Box3, { alignContent: "bottom", width: "100%", direction: "horizontal", gap: 2, verticalAlign: "middle", children: [
+        /* @__PURE__ */ jsx5(
           message_input_default,
           {
             placeholder: (messageInputConfig == null ? void 0 : messageInputConfig.placeholder) || "Type your message here...",
@@ -280,56 +227,191 @@ var Footer = React3.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__ */ jsx8(
+        /* @__PURE__ */ jsx5(
           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
+import React3 from "react";
+import { Box as Box4 } from "@wix/design-system";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Header = React3.forwardRef(
+  ({
+    className,
+    children,
+    title,
+    subtitle,
+    image,
+    onClose,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx6(Box4, { ref, className: "site-chat-component-header-container", verticalAlign: "middle", children: /* @__PURE__ */ jsxs5(Box4, { width: "100%", direction: "horizontal", align: "center", gap: "10px", children: [
+      image && /* @__PURE__ */ jsx6(Box4, { className: "site-chat-component-header-image", width: "60px", height: "50px", borderRadius: "999px", children: /* @__PURE__ */ jsx6("img", { style: { borderRadius: "999px" }, width: "100%", height: "100%", src: String(image), alt: "Business Logo" }) }),
+      /* @__PURE__ */ jsxs5(Box4, { direction: "vertical", className: "site-chat-component-header-text-section", children: [
+        /* @__PURE__ */ jsx6(Box4, { className: "site-chat-component-header-top-section", children: /* @__PURE__ */ jsxs5(Box4, { className: "site-chat-component-header-top", verticalAlign: "middle", WebkitJustifyContent: "space-between", width: "100%", children: [
+          title && /* @__PURE__ */ jsx6("h2", { className: "site-chat-component-header-title", children: title }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: onClose,
+              "aria-label": "Close",
+              className: "site-chat-component-header-close-button",
+              children: "\u2715"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx6(Box4, { className: "site-chat-component-header-bottom-section", children: subtitle && /* @__PURE__ */ jsx6("h3", { className: "site-chat-component-header-subtitle", children: subtitle }) })
+      ] })
+    ] }) });
+  }
+);
+Header.displayName = "SiteChatComponent.Header";
+
+// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
 import React4 from "react";
 import { Box as Box6 } from "@wix/design-system";
+
+// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
+import { useRef, useEffect as useEffect2 } from "react";
+import { Avatar } from "@wix/design-system";
+
+// src/components/SiteChatComponent/MessageContainer/messages/attachment.tsx
+import { TextButton, Box as Box5 } from "@wix/design-system";
+import {
+  Page as PageSmallIcon2
+} from "@wix/wix-ui-icons-common";
+import { ArrowTopRight as ArrowTopRightIcon } from "@wix/wix-ui-icons-common/on-stage";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Attachment = ({ item }) => {
+  return /* @__PURE__ */ jsx7(Box5, { direction: "horizontal", maxWidth: "100%", boxSizing: "border-box", className: "site-chat-component-message-container-in-chat-file-item-wrapper-box", children: item && /* @__PURE__ */ jsxs6("div", { className: "site-chat-component-message-container-in-chat-file-item-container", children: [
+    /* @__PURE__ */ jsx7(PageSmallIcon2, { className: "site-chat-component-message-container-in-chat-file-icon", width: "20px", height: "20px" }),
+    /* @__PURE__ */ jsxs6("div", { className: "site-chat-component-message-container-in-chat-file-names-container", children: [
+      /* @__PURE__ */ jsx7("span", { className: "site-chat-component-message-container-in-chat-file-name", children: item.name }),
+      /* @__PURE__ */ jsx7("span", { className: "site-chat-component-message-container-in-chat-file-sub-name", children: "Attachment" })
+    ] }),
+    /* @__PURE__ */ jsx7(TextButton, { size: "tiny", onClick: () => window.open(item.url, "_blank"), suffixIcon: /* @__PURE__ */ jsx7(ArrowTopRightIcon, { size: "tiny" }), children: "Open" })
+  ] }, item.id) });
+};
+var attachment_default = Attachment;
+
+// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
+import { jsx as jsx8, jsxs as jsxs7 } 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);
+  useEffect2(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
+  }, [messages]);
+  return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-messages-wrapper", ref: wrapperRef, children: messages.map(({ _id, message, attachment, timestamp, type, agentName }, index) => /* @__PURE__ */ jsx8("div", { className: `message-item ${type}`, children: type === "agent" ? /* @__PURE__ */ jsx8(AgentMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp, agentName }) : type === "user" ? /* @__PURE__ */ jsx8(UserMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp }) : /* @__PURE__ */ jsx8(SystemMessageWrapper, { message, timestamp }) }, _id || index)) });
+};
+var GetSystemMessage = ({ type }) => {
+  switch (type) {
+    case "AGENT_JOINED":
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has joined the chat." });
+    case "AGENT_LEFT":
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has left the chat." });
+    case "USER_JOINED":
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has joined the chat." });
+    case "USER_LEFT":
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has left the chat." });
+    case "CHAT_ENDED":
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has ended." });
+    case "CHAT_REOPENED":
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been reopened." });
+    case "CHAT_TRANSFERRED":
+      return /* @__PURE__ */ jsx8("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__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "Waiting for an agent to join the chat..." });
+    default:
+      return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "System message" });
+  }
+};
+var SystemMessageWrapper = ({ message, timestamp }) => {
+  return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-wrapper", children: /* @__PURE__ */ jsxs7("div", { className: "site-chat-component-message-container-system-message", children: [
+    /* @__PURE__ */ jsx8("hr", { className: "dashed" }),
+    /* @__PURE__ */ jsx8(GetSystemMessage, { type: message }),
+    /* @__PURE__ */ jsx8("hr", { className: "dashed" })
+  ] }) });
+};
+var AgentMessageWrapper = ({ message, attachment, timestamp, agentName }) => {
+  return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "row", gap: AGENT_MESSAGE_GAP }, children: [
+    /* @__PURE__ */ jsx8(Avatar, { size: "size24", className: "site-chat-component-message-container-agent-message-avatar", name: agentName }),
+    /* @__PURE__ */ jsxs7("div", { style: { width: AGENT_MESSAGE_WIDTH, gap: AGENT_MESSAGE_INNER_GAP, display: "flex", flexDirection: "column" }, children: [
+      agentName && /* @__PURE__ */ jsxs7("div", { className: "site-chat-component-message-container-agent-name-time-container", children: [
+        /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-agent-name", children: agentName }),
+        /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-agent-message-timestamp", children: formatTimestamp(timestamp) })
+      ] }),
+      /* @__PURE__ */ jsx8("div", { className: `site-chat-component-message-container-agent-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "site-chat-component-message-container-agent-message", children: [
+        message && message,
+        attachment && /* @__PURE__ */ jsx8(attachment_default, { item: attachment })
+      ] }) })
+    ] })
+  ] });
+};
+var UserMessageWrapper = ({ message, attachment, timestamp }) => {
+  return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
+    !attachment && /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-user-name", children: "Me" }),
+    /* @__PURE__ */ jsx8("div", { className: `site-chat-component-message-container-user-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "site-chat-component-message-container-user-message", children: [
+      message && message,
+      attachment && /* @__PURE__ */ jsx8(attachment_default, { item: attachment })
+    ] }) })
+  ] });
+};
+var messages_wrapper_default = MessagesWrapper;
+
+// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var FabButton = React4.forwardRef(
+var MessageContainer = React4.forwardRef(
   ({
     className,
     children,
-    onClick,
-    type,
-    icon,
-    text,
+    messages,
+    loading,
     ...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
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ jsxs8(Box6, { ref, className: "site-chat-component-message-container", children: [
+      loading && /* @__PURE__ */ jsx9(Box6, { className: "site-chat-component-message-container-loading-state", children: /* @__PURE__ */ jsx9("p", { children: "Loading messages..." }) }),
+      messages.length === 0 && !loading && /* @__PURE__ */ jsx9(Box6, { className: "site-chat-component-message-container-empty-state", children: /* @__PURE__ */ jsx9("p", { children: "No messages yet. Start a conversation" }) }),
+      messages.length > 0 && /* @__PURE__ */ jsx9(messages_wrapper_default, { messages })
+    ] });
   }
 );
-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";
+MessageContainer.displayName = "SiteChatComponent.MessageContainer";
 
 // src/components/SiteChatComponent/SiteChatComponent.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c48ccde")) {
@@ -348,7 +430,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%;
 }
 
@@ -666,13 +748,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;
@@ -852,59 +934,27 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c
 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
-            }
-          )
-        ] });
+    isOpen
+  }, _ref) => {
+    useSiteChatComponent();
+    if (viewMode === "Editor") {
+      if (typeof editorShowChatPanel === "undefined") {
+        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 ${isOpen ? "open" : ""}`,
-            children: children2
-          }
-        )
+        /* @__PURE__ */ jsx10(Box7, { className: `site-chat-component-panel ${editorShowChatPanel ? "open" : ""}`, children })
       ] });
-    };
-    return /* @__PURE__ */ jsx10(
-      "div",
-      {
-        ref,
-        className: ["site-chat-component", className].filter(Boolean).join(" "),
-        ...rest,
-        children: /* @__PURE__ */ jsx10(ToRender, { children })
-      }
-    );
+    }
+    return /* @__PURE__ */ jsxs9(Box7, { children: [
+      /* @__PURE__ */ jsx10(FabButton, { onClick: handleToggle, text: buttonTextValue }),
+      /* @__PURE__ */ jsx10(Box7, { className: `site-chat-component-panel ${isOpen ? "open" : ""}`, children })
+    ] });
   }
 );
 SiteChatComponentRoot.displayName = "SiteChatComponent";
@@ -918,4 +968,4 @@ var SiteChatComponent = Object.assign(SiteChatComponentRoot, {
 export {
   SiteChatComponent
 };
-//# sourceMappingURL=chunk-E5MBV2MX.js.map
+//# sourceMappingURL=chunk-P3P4FPSX.js.map