@jrapps/my_tickets_chat_ui 0.2.3 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/dist/cjs/components/SiteChatComponentNewErc/index.js +1334 -0
  2. package/dist/cjs/components/SiteChatComponentNewErc/index.js.map +7 -0
  3. package/dist/cjs/index.js +1505 -1169
  4. package/dist/cjs/index.js.map +4 -4
  5. package/dist/esm/chunks/chunk-364KVRPG.mjs +1302 -0
  6. package/dist/esm/chunks/chunk-364KVRPG.mjs.map +7 -0
  7. package/dist/esm/chunks/{chunk-QGWQSJDB.js → chunk-54X5DYPJ.mjs} +1 -1
  8. package/dist/esm/components/SiteChatComponentNew/{index.js → index.mjs} +2 -2
  9. package/dist/esm/components/SiteChatComponentNewErc/index.mjs +9 -0
  10. package/dist/esm/index.mjs +15 -0
  11. package/dist/types/components/SiteChatComponentNewErc/Footer/Footer.d.ts +6 -0
  12. package/dist/types/components/SiteChatComponentNewErc/Footer/Footer.d.ts.map +1 -0
  13. package/dist/types/components/SiteChatComponentNewErc/Footer/index.d.ts +2 -0
  14. package/dist/types/components/SiteChatComponentNewErc/Footer/index.d.ts.map +1 -0
  15. package/dist/types/components/SiteChatComponentNewErc/Header/Header.d.ts +6 -0
  16. package/dist/types/components/SiteChatComponentNewErc/Header/Header.d.ts.map +1 -0
  17. package/dist/types/components/SiteChatComponentNewErc/Header/index.d.ts +2 -0
  18. package/dist/types/components/SiteChatComponentNewErc/Header/index.d.ts.map +1 -0
  19. package/dist/types/components/SiteChatComponentNewErc/Messages/AgentMessage.d.ts +10 -0
  20. package/dist/types/components/SiteChatComponentNewErc/Messages/AgentMessage.d.ts.map +1 -0
  21. package/dist/types/components/SiteChatComponentNewErc/Messages/AttachmentMessage.d.ts +9 -0
  22. package/dist/types/components/SiteChatComponentNewErc/Messages/AttachmentMessage.d.ts.map +1 -0
  23. package/dist/types/components/SiteChatComponentNewErc/Messages/MessageList.d.ts +10 -0
  24. package/dist/types/components/SiteChatComponentNewErc/Messages/MessageList.d.ts.map +1 -0
  25. package/dist/types/components/SiteChatComponentNewErc/Messages/MessageRenderer.d.ts +9 -0
  26. package/dist/types/components/SiteChatComponentNewErc/Messages/MessageRenderer.d.ts.map +1 -0
  27. package/dist/types/components/SiteChatComponentNewErc/Messages/SystemMessage.d.ts +10 -0
  28. package/dist/types/components/SiteChatComponentNewErc/Messages/SystemMessage.d.ts.map +1 -0
  29. package/dist/types/components/SiteChatComponentNewErc/Messages/TypingIndicator.d.ts +5 -0
  30. package/dist/types/components/SiteChatComponentNewErc/Messages/TypingIndicator.d.ts.map +1 -0
  31. package/dist/types/components/SiteChatComponentNewErc/Messages/UserMessage.d.ts +10 -0
  32. package/dist/types/components/SiteChatComponentNewErc/Messages/UserMessage.d.ts.map +1 -0
  33. package/dist/types/components/SiteChatComponentNewErc/Messages/index.d.ts +8 -0
  34. package/dist/types/components/SiteChatComponentNewErc/Messages/index.d.ts.map +1 -0
  35. package/dist/types/components/SiteChatComponentNewErc/OfflineForm/OfflineForm.d.ts +10 -0
  36. package/dist/types/components/SiteChatComponentNewErc/OfflineForm/OfflineForm.d.ts.map +1 -0
  37. package/dist/types/components/SiteChatComponentNewErc/OfflineForm/index.d.ts +2 -0
  38. package/dist/types/components/SiteChatComponentNewErc/OfflineForm/index.d.ts.map +1 -0
  39. package/dist/types/components/SiteChatComponentNewErc/Shared/Avatar.d.ts +10 -0
  40. package/dist/types/components/SiteChatComponentNewErc/Shared/Avatar.d.ts.map +1 -0
  41. package/dist/types/components/SiteChatComponentNewErc/Shared/Button.d.ts +14 -0
  42. package/dist/types/components/SiteChatComponentNewErc/Shared/Button.d.ts.map +1 -0
  43. package/dist/types/components/SiteChatComponentNewErc/Shared/index.d.ts +3 -0
  44. package/dist/types/components/SiteChatComponentNewErc/Shared/index.d.ts.map +1 -0
  45. package/dist/types/components/SiteChatComponentNewErc/SiteChatComponentNewErc.d.ts +5 -0
  46. package/dist/types/components/SiteChatComponentNewErc/SiteChatComponentNewErc.d.ts.map +1 -0
  47. package/dist/types/components/SiteChatComponentNewErc/SiteChatComponentNewErc.types.d.ts +146 -0
  48. package/dist/types/components/SiteChatComponentNewErc/SiteChatComponentNewErc.types.d.ts.map +1 -0
  49. package/dist/types/components/SiteChatComponentNewErc/States/ChatEndedState.d.ts +5 -0
  50. package/dist/types/components/SiteChatComponentNewErc/States/ChatEndedState.d.ts.map +1 -0
  51. package/dist/types/components/SiteChatComponentNewErc/States/LoadingState.d.ts +5 -0
  52. package/dist/types/components/SiteChatComponentNewErc/States/LoadingState.d.ts.map +1 -0
  53. package/dist/types/components/SiteChatComponentNewErc/States/OfflineState.d.ts +10 -0
  54. package/dist/types/components/SiteChatComponentNewErc/States/OfflineState.d.ts.map +1 -0
  55. package/dist/types/components/SiteChatComponentNewErc/States/StartChatState.d.ts +11 -0
  56. package/dist/types/components/SiteChatComponentNewErc/States/StartChatState.d.ts.map +1 -0
  57. package/dist/types/components/SiteChatComponentNewErc/States/index.d.ts +5 -0
  58. package/dist/types/components/SiteChatComponentNewErc/States/index.d.ts.map +1 -0
  59. package/dist/types/components/SiteChatComponentNewErc/hooks/index.d.ts +3 -0
  60. package/dist/types/components/SiteChatComponentNewErc/hooks/index.d.ts.map +1 -0
  61. package/dist/types/components/SiteChatComponentNewErc/hooks/useAutoScroll.d.ts +15 -0
  62. package/dist/types/components/SiteChatComponentNewErc/hooks/useAutoScroll.d.ts.map +1 -0
  63. package/dist/types/components/SiteChatComponentNewErc/hooks/useOfflineForm.d.ts +12 -0
  64. package/dist/types/components/SiteChatComponentNewErc/hooks/useOfflineForm.d.ts.map +1 -0
  65. package/dist/types/components/SiteChatComponentNewErc/index.d.ts +4 -0
  66. package/dist/types/components/SiteChatComponentNewErc/index.d.ts.map +1 -0
  67. package/dist/types/components/SiteChatComponentNewErc/useSiteChatComponentNewErc.d.ts +3 -0
  68. package/dist/types/components/SiteChatComponentNewErc/useSiteChatComponentNewErc.d.ts.map +1 -0
  69. package/dist/types/components/SiteChatComponentNewErc/utils/classNames.d.ts +28 -0
  70. package/dist/types/components/SiteChatComponentNewErc/utils/classNames.d.ts.map +1 -0
  71. package/dist/types/components/SiteChatComponentNewErc/utils/format.d.ts +9 -0
  72. package/dist/types/components/SiteChatComponentNewErc/utils/format.d.ts.map +1 -0
  73. package/dist/types/components/SiteChatComponentNewErc/utils/index.d.ts +4 -0
  74. package/dist/types/components/SiteChatComponentNewErc/utils/index.d.ts.map +1 -0
  75. package/dist/types/components/SiteChatComponentNewErc/utils/systemMessages.d.ts +4 -0
  76. package/dist/types/components/SiteChatComponentNewErc/utils/systemMessages.d.ts.map +1 -0
  77. package/dist/types/components/SiteChatComponentNewErc/utils/theme.d.ts +8 -0
  78. package/dist/types/components/SiteChatComponentNewErc/utils/theme.d.ts.map +1 -0
  79. package/dist/types/components/index.d.ts +1 -1
  80. package/dist/types/components/index.d.ts.map +1 -1
  81. package/package.json +4 -7
  82. package/dist/cjs/components/SiteChatComponent/index.js +0 -998
  83. package/dist/cjs/components/SiteChatComponent/index.js.map +0 -7
  84. package/dist/esm/chunks/chunk-QPJPV2T3.js +0 -971
  85. package/dist/esm/chunks/chunk-QPJPV2T3.js.map +0 -7
  86. package/dist/esm/components/SiteChatComponent/index.js +0 -7
  87. package/dist/esm/index.js +0 -13
  88. package/dist/types/components/SiteChatComponent/FabButton/FabButton.d.ts +0 -4
  89. package/dist/types/components/SiteChatComponent/FabButton/FabButton.d.ts.map +0 -1
  90. package/dist/types/components/SiteChatComponent/FabButton/FabButton.types.d.ts +0 -8
  91. package/dist/types/components/SiteChatComponent/FabButton/FabButton.types.d.ts.map +0 -1
  92. package/dist/types/components/SiteChatComponent/Footer/Footer.d.ts +0 -4
  93. package/dist/types/components/SiteChatComponent/Footer/Footer.d.ts.map +0 -1
  94. package/dist/types/components/SiteChatComponent/Footer/Footer.types.d.ts +0 -45
  95. package/dist/types/components/SiteChatComponent/Footer/Footer.types.d.ts.map +0 -1
  96. package/dist/types/components/SiteChatComponent/Footer/attachment-list/attachment-list.d.ts +0 -5
  97. package/dist/types/components/SiteChatComponent/Footer/attachment-list/attachment-list.d.ts.map +0 -1
  98. package/dist/types/components/SiteChatComponent/Footer/message-input/message-input.d.ts +0 -18
  99. package/dist/types/components/SiteChatComponent/Footer/message-input/message-input.d.ts.map +0 -1
  100. package/dist/types/components/SiteChatComponent/Footer/message-input/open-file-picker.d.ts +0 -10
  101. package/dist/types/components/SiteChatComponent/Footer/message-input/open-file-picker.d.ts.map +0 -1
  102. package/dist/types/components/SiteChatComponent/Footer/send-button/send-button.d.ts +0 -10
  103. package/dist/types/components/SiteChatComponent/Footer/send-button/send-button.d.ts.map +0 -1
  104. package/dist/types/components/SiteChatComponent/Header/Header.d.ts +0 -4
  105. package/dist/types/components/SiteChatComponent/Header/Header.d.ts.map +0 -1
  106. package/dist/types/components/SiteChatComponent/Header/Header.types.d.ts +0 -8
  107. package/dist/types/components/SiteChatComponent/Header/Header.types.d.ts.map +0 -1
  108. package/dist/types/components/SiteChatComponent/MessageContainer/MessageContainer.d.ts +0 -4
  109. package/dist/types/components/SiteChatComponent/MessageContainer/MessageContainer.d.ts.map +0 -1
  110. package/dist/types/components/SiteChatComponent/MessageContainer/MessageContainer.types.d.ts +0 -7
  111. package/dist/types/components/SiteChatComponent/MessageContainer/MessageContainer.types.d.ts.map +0 -1
  112. package/dist/types/components/SiteChatComponent/MessageContainer/messages/attachment.d.ts +0 -5
  113. package/dist/types/components/SiteChatComponent/MessageContainer/messages/attachment.d.ts.map +0 -1
  114. package/dist/types/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.d.ts +0 -5
  115. package/dist/types/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.d.ts.map +0 -1
  116. package/dist/types/components/SiteChatComponent/SiteChatComponent.d.ts +0 -11
  117. package/dist/types/components/SiteChatComponent/SiteChatComponent.d.ts.map +0 -1
  118. package/dist/types/components/SiteChatComponent/SiteChatComponent.types.d.ts +0 -10
  119. package/dist/types/components/SiteChatComponent/SiteChatComponent.types.d.ts.map +0 -1
  120. package/dist/types/components/SiteChatComponent/index.d.ts +0 -6
  121. package/dist/types/components/SiteChatComponent/index.d.ts.map +0 -1
  122. package/dist/types/components/SiteChatComponent/useSiteChatComponent.d.ts +0 -8
  123. package/dist/types/components/SiteChatComponent/useSiteChatComponent.d.ts.map +0 -1
  124. package/dist/types/test/test.d.ts +0 -8
  125. package/dist/types/test/test.d.ts.map +0 -1
  126. /package/dist/esm/chunks/{chunk-QGWQSJDB.js.map → chunk-54X5DYPJ.mjs.map} +0 -0
  127. /package/dist/esm/components/{SiteChatComponent/index.js.map → SiteChatComponentNew/index.mjs.map} +0 -0
  128. /package/dist/esm/components/{SiteChatComponentNew/index.js.map → SiteChatComponentNewErc/index.mjs.map} +0 -0
  129. /package/dist/esm/{index.js.map → index.mjs.map} +0 -0
@@ -1,971 +0,0 @@
1
- // src/components/SiteChatComponent/SiteChatComponent.tsx
2
- import React5 from "react";
3
- import { Box as Box7, Text } from "@wix/design-system";
4
- import "@wix/design-system/styles.global.css";
5
-
6
- // src/components/SiteChatComponent/useSiteChatComponent.ts
7
- function useSiteChatComponent() {
8
- return {};
9
- }
10
-
11
- // src/components/SiteChatComponent/FabButton/FabButton.tsx
12
- import React from "react";
13
- import { Box } from "@wix/design-system";
14
- import { WixChat } from "@wix/wix-ui-icons-common";
15
- import { jsx, jsxs } from "react/jsx-runtime";
16
- var FabButton = React.forwardRef(
17
- ({
18
- className,
19
- children,
20
- onClick,
21
- type = "textIcon",
22
- icon = /* @__PURE__ */ jsx(WixChat, {}),
23
- text,
24
- ...rest
25
- }, ref) => {
26
- return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsxs(
27
- "button",
28
- {
29
- className: "site-chat-component-fab",
30
- onClick,
31
- children: [
32
- type === "textIcon" ? /* @__PURE__ */ jsx("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ jsx(Box, { height: "100%", children: icon }) }) : null,
33
- 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,
34
- 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
35
- ]
36
- }
37
- ) });
38
- }
39
- );
40
- FabButton.displayName = "SiteChatComponent.FabButton";
41
-
42
- // src/components/SiteChatComponent/Footer/Footer.tsx
43
- import React2 from "react";
44
- import { Box as Box3 } from "@wix/design-system";
45
-
46
- // src/components/SiteChatComponent/Footer/send-button/send-button.tsx
47
- import { jsx as jsx2 } from "react/jsx-runtime";
48
- var SendButton = ({
49
- text = "Send",
50
- className = "",
51
- onClick,
52
- disabled = false
53
- }) => {
54
- return /* @__PURE__ */ jsx2(
55
- "button",
56
- {
57
- className: `site-chat-component-footer-my-tickets-chat-widget-send-button ${className}`,
58
- onClick,
59
- disabled,
60
- children: text
61
- }
62
- );
63
- };
64
- var send_button_default = SendButton;
65
-
66
- // src/components/SiteChatComponent/Footer/attachment-list/attachment-list.tsx
67
- import { useState, useEffect } from "react";
68
- import { IconButton, Box as Box2 } from "@wix/design-system";
69
- import {
70
- Page as PageSmallIcon,
71
- DismissSmall as DismissIcon
72
- } from "@wix/wix-ui-icons-common";
73
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
74
- var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
75
- const [localItems, setLocalItems] = useState(items);
76
- useEffect(() => {
77
- setLocalItems(items);
78
- }, [items]);
79
- const handleOnRemove = (id) => {
80
- if (onRemove) {
81
- onRemove(id);
82
- }
83
- setLocalItems((prev) => prev.filter((item) => item.id !== id));
84
- };
85
- const handleSendFiles = () => {
86
- if (onFilesSent && localItems.length > 0) {
87
- onFilesSent(localItems);
88
- setLocalItems([]);
89
- }
90
- };
91
- 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: [
92
- /* @__PURE__ */ jsx3(PageSmallIcon, { size: "15px" }),
93
- /* @__PURE__ */ jsx3("span", { className: "site-chat-component-footer-file-name", children: item.name }),
94
- /* @__PURE__ */ jsx3(IconButton, { size: "tiny", onClick: () => handleOnRemove(item.id), children: /* @__PURE__ */ jsx3(DismissIcon, {}) })
95
- ] }, item.id)) });
96
- };
97
- var attachment_list_default = AttachmentList;
98
-
99
- // src/components/SiteChatComponent/Footer/message-input/message-input.tsx
100
- import { IconButton as IconButton2 } from "@wix/design-system";
101
- import { AttachmentSmall } from "@wix/wix-ui-icons-common";
102
-
103
- // src/components/SiteChatComponent/Footer/message-input/open-file-picker.ts
104
- import { httpClient } from "@wix/essentials";
105
- var import_meta = {};
106
- var uploadFile = async (file) => {
107
- var _a;
108
- try {
109
- const baseApiUrl = new URL(import_meta.url).origin;
110
- const response = await httpClient.fetchWithAuth(`${baseApiUrl}/api/widget/chat/upload-attachment`, {
111
- method: "POST",
112
- headers: {
113
- "Content-Type": file.type || "application/octet-stream",
114
- "x-file-name": encodeURIComponent(file.name),
115
- "x-file-type": file.type || "application/octet-stream"
116
- },
117
- body: file
118
- });
119
- const data = await response.json();
120
- if (!response.ok) {
121
- throw new Error(data.error || "Failed to upload file");
122
- }
123
- if (!((_a = data.file) == null ? void 0 : _a.id) || !data.file.displayName || !data.file.url) {
124
- throw new Error("Invalid response format from upload endpoint");
125
- }
126
- return data.file;
127
- } catch (error) {
128
- console.error("Error uploading file:", error);
129
- return null;
130
- }
131
- };
132
- var openFilePicker = async (options) => {
133
- const win = window;
134
- if (!win.showOpenFilePicker) {
135
- console.error("File Picker API is not supported in this browser.");
136
- return;
137
- }
138
- try {
139
- const fileHandles = await win.showOpenFilePicker(options);
140
- const fileHandle = fileHandles[0];
141
- const file = await fileHandle.getFile();
142
- const uploadedFile = await uploadFile(file);
143
- if (!uploadedFile) {
144
- console.error("Failed to upload file.");
145
- return;
146
- }
147
- return {
148
- id: uploadedFile.id,
149
- name: uploadedFile.displayName,
150
- url: uploadedFile.url
151
- };
152
- } catch (error) {
153
- console.error("Error opening file picker:", error);
154
- return null;
155
- }
156
- };
157
-
158
- // src/components/SiteChatComponent/Footer/message-input/message-input.tsx
159
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
160
- var MessageInput = ({
161
- placeholder = "Type a message...",
162
- disabled = false,
163
- className = "",
164
- suffix,
165
- value = "",
166
- onChange,
167
- onKeyDown,
168
- onAttachmentAdded
169
- }) => {
170
- const handleAttachmentOnClick = async () => {
171
- try {
172
- await openFilePicker({ multiple: false }).then((file) => {
173
- if (file && onAttachmentAdded) {
174
- onAttachmentAdded(file);
175
- }
176
- });
177
- } catch (error) {
178
- console.error("Error opening file picker:", error);
179
- }
180
- };
181
- return /* @__PURE__ */ jsxs3("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
182
- /* @__PURE__ */ jsx4(
183
- "input",
184
- {
185
- name: "messageInput",
186
- className: "site-chat-component-footer-chat-input",
187
- placeholder,
188
- disabled,
189
- value,
190
- onChange,
191
- onKeyDown
192
- }
193
- ),
194
- /* @__PURE__ */ jsx4("sub", { className: "site-chat-component-footer-suffix", children: /* @__PURE__ */ jsx4(IconButton2, { onClick: handleAttachmentOnClick, className: "attachment-icon-button", children: /* @__PURE__ */ jsx4(AttachmentSmall, {}) }) })
195
- ] });
196
- };
197
- var message_input_default = MessageInput;
198
-
199
- // src/components/SiteChatComponent/Footer/Footer.tsx
200
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
201
- var Footer = React2.forwardRef(
202
- ({
203
- className,
204
- children,
205
- sendButtonConfig,
206
- attachmentListConfig,
207
- messageInputConfig,
208
- onAttachmentAdded,
209
- ...rest
210
- }, ref) => {
211
- const handleSendMessage = (text, messageType, attachment) => {
212
- if (sendButtonConfig == null ? void 0 : sendButtonConfig.onClick) {
213
- sendButtonConfig.onClick(text, messageType, attachment);
214
- } else {
215
- console.warn("handleSendMessage function is not provided in sendButtonConfig");
216
- }
217
- };
218
- return /* @__PURE__ */ jsxs4(Box3, { ref, className: "site-chat-component-footer-message-input-container", direction: "vertical", gap: 1, verticalAlign: "middle", children: [
219
- /* @__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 }) }),
220
- /* @__PURE__ */ jsxs4(Box3, { alignContent: "bottom", width: "100%", direction: "horizontal", gap: 2, verticalAlign: "middle", children: [
221
- /* @__PURE__ */ jsx5(
222
- message_input_default,
223
- {
224
- placeholder: (messageInputConfig == null ? void 0 : messageInputConfig.placeholder) || "Type your message here...",
225
- className: (messageInputConfig == null ? void 0 : messageInputConfig.className) || "message-input",
226
- value: (messageInputConfig == null ? void 0 : messageInputConfig.value) || "",
227
- onChange: messageInputConfig == null ? void 0 : messageInputConfig.onChange,
228
- onKeyDown: messageInputConfig == null ? void 0 : messageInputConfig.onKeyDown,
229
- disabled: messageInputConfig == null ? void 0 : messageInputConfig.disabled,
230
- onAttachmentAdded
231
- }
232
- ),
233
- /* @__PURE__ */ jsx5(
234
- send_button_default,
235
- {
236
- onClick: () => handleSendMessage((messageInputConfig == null ? void 0 : messageInputConfig.value) || "", (attachmentListConfig == null ? void 0 : attachmentListConfig.items) ? "ATTACHMENT" : "TEXT"),
237
- disabled: sendButtonConfig == null ? void 0 : sendButtonConfig.disabled,
238
- text: (sendButtonConfig == null ? void 0 : sendButtonConfig.buttonText) || "Send"
239
- }
240
- )
241
- ] })
242
- ] });
243
- }
244
- );
245
- Footer.displayName = "SiteChatComponent.Footer";
246
-
247
- // src/components/SiteChatComponent/Header/Header.tsx
248
- import React3 from "react";
249
- import { Box as Box4 } from "@wix/design-system";
250
- import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
251
- var Header = React3.forwardRef(
252
- ({
253
- className,
254
- children,
255
- title,
256
- subtitle,
257
- image,
258
- onClose,
259
- ...rest
260
- }, ref) => {
261
- 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: [
262
- 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" }) }),
263
- /* @__PURE__ */ jsxs5(Box4, { direction: "vertical", className: "site-chat-component-header-text-section", children: [
264
- /* @__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: [
265
- title && /* @__PURE__ */ jsx6("h2", { className: "site-chat-component-header-title", children: title }),
266
- /* @__PURE__ */ jsx6(
267
- "button",
268
- {
269
- onClick: onClose,
270
- "aria-label": "Close",
271
- className: "site-chat-component-header-close-button",
272
- children: "\u2715"
273
- }
274
- )
275
- ] }) }),
276
- /* @__PURE__ */ jsx6(Box4, { className: "site-chat-component-header-bottom-section", children: subtitle && /* @__PURE__ */ jsx6("h3", { className: "site-chat-component-header-subtitle", children: subtitle }) })
277
- ] })
278
- ] }) });
279
- }
280
- );
281
- Header.displayName = "SiteChatComponent.Header";
282
-
283
- // src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
284
- import React4 from "react";
285
- import { Box as Box6 } from "@wix/design-system";
286
-
287
- // src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
288
- import { useRef, useEffect as useEffect2 } from "react";
289
- import { Avatar } from "@wix/design-system";
290
-
291
- // src/components/SiteChatComponent/MessageContainer/messages/attachment.tsx
292
- import { TextButton, Box as Box5 } from "@wix/design-system";
293
- import {
294
- Page as PageSmallIcon2
295
- } from "@wix/wix-ui-icons-common";
296
- import { ArrowTopRight as ArrowTopRightIcon } from "@wix/wix-ui-icons-common/on-stage";
297
- import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
298
- var Attachment = ({ item }) => {
299
- 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: [
300
- /* @__PURE__ */ jsx7(PageSmallIcon2, { className: "site-chat-component-message-container-in-chat-file-icon", width: "20px", height: "20px" }),
301
- /* @__PURE__ */ jsxs6("div", { className: "site-chat-component-message-container-in-chat-file-names-container", children: [
302
- /* @__PURE__ */ jsx7("span", { className: "site-chat-component-message-container-in-chat-file-name", children: item.name }),
303
- /* @__PURE__ */ jsx7("span", { className: "site-chat-component-message-container-in-chat-file-sub-name", children: "Attachment" })
304
- ] }),
305
- /* @__PURE__ */ jsx7(TextButton, { size: "tiny", onClick: () => window.open(item.url, "_blank"), suffixIcon: /* @__PURE__ */ jsx7(ArrowTopRightIcon, { size: "tiny" }), children: "Open" })
306
- ] }, item.id) });
307
- };
308
- var attachment_default = Attachment;
309
-
310
- // src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
311
- import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
312
- var AGENT_MESSAGE_GAP = "10px";
313
- var AGENT_MESSAGE_WIDTH = "75%";
314
- var AGENT_MESSAGE_INNER_GAP = "4px";
315
- var ONE_MINUTE_MS = 6e4;
316
- var ONE_DAY_MS = 864e5;
317
- var DAYS_IN_WEEK = 7;
318
- var formatTimestamp = (timestamp) => {
319
- if (!timestamp) return "";
320
- const date = new Date(timestamp);
321
- const now = /* @__PURE__ */ new Date();
322
- if (now.getTime() - date.getTime() < ONE_MINUTE_MS) return "Just now";
323
- const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
324
- const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
325
- const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
326
- const diffDays = Math.floor((startOfToday.getTime() - startOfDay.getTime()) / ONE_DAY_MS);
327
- if (diffDays === 0) return `Today at ${time}`;
328
- if (diffDays === 1) return `Yesterday at ${time}`;
329
- if (diffDays < DAYS_IN_WEEK && date.getDay() < now.getDay())
330
- return `${date.toLocaleDateString([], { weekday: "short" })} at ${time}`;
331
- return `${date.toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" })} at ${time}`;
332
- };
333
- var MessagesWrapper = ({ messages = [] }) => {
334
- const wrapperRef = useRef(null);
335
- useEffect2(() => {
336
- if (wrapperRef.current) {
337
- wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
338
- }
339
- }, [messages]);
340
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-messages-wrapper", ref: wrapperRef, children: messages.map(({ _id, message, attachment, timestamp, senderType, senderName }, index) => /* @__PURE__ */ jsx8("div", { className: `message-item ${senderType}`, children: senderType === "agent" ? /* @__PURE__ */ jsx8(AgentMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp, agentName: senderName }) : senderType === "user" ? /* @__PURE__ */ jsx8(UserMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp }) : /* @__PURE__ */ jsx8(SystemMessageWrapper, { message, timestamp }) }, _id || index)) });
341
- };
342
- var GetSystemMessage = ({ type }) => {
343
- switch (type) {
344
- case "AGENT_JOINED":
345
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has joined the chat." });
346
- case "AGENT_LEFT":
347
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has left the chat." });
348
- case "USER_JOINED":
349
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has joined the chat." });
350
- case "USER_LEFT":
351
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has left the chat." });
352
- case "CHAT_ENDED":
353
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has ended." });
354
- case "CHAT_REOPENED":
355
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been reopened." });
356
- case "CHAT_TRANSFERRED":
357
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been transferred to another agent." });
358
- case "WAITING_FOR_AGENT":
359
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "Waiting for an agent to join the chat..." });
360
- default:
361
- return /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-system-message-message", children: "System message" });
362
- }
363
- };
364
- var SystemMessageWrapper = ({ message, timestamp }) => {
365
- 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: [
366
- /* @__PURE__ */ jsx8("hr", { className: "dashed" }),
367
- /* @__PURE__ */ jsx8(GetSystemMessage, { type: message }),
368
- /* @__PURE__ */ jsx8("hr", { className: "dashed" })
369
- ] }) });
370
- };
371
- var AgentMessageWrapper = ({ message, attachment, timestamp, agentName }) => {
372
- return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "row", gap: AGENT_MESSAGE_GAP }, children: [
373
- /* @__PURE__ */ jsx8(Avatar, { size: "size24", className: "site-chat-component-message-container-agent-message-avatar", name: agentName }),
374
- /* @__PURE__ */ jsxs7("div", { style: { width: AGENT_MESSAGE_WIDTH, gap: AGENT_MESSAGE_INNER_GAP, display: "flex", flexDirection: "column" }, children: [
375
- agentName && /* @__PURE__ */ jsxs7("div", { className: "site-chat-component-message-container-agent-name-time-container", children: [
376
- /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-agent-name", children: agentName }),
377
- /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-agent-message-timestamp", children: formatTimestamp(timestamp) })
378
- ] }),
379
- /* @__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: [
380
- message && message,
381
- attachment && /* @__PURE__ */ jsx8(attachment_default, { item: attachment })
382
- ] }) })
383
- ] })
384
- ] });
385
- };
386
- var UserMessageWrapper = ({ message, attachment, timestamp }) => {
387
- return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
388
- !attachment && /* @__PURE__ */ jsx8("div", { className: "site-chat-component-message-container-user-name", children: "Me" }),
389
- /* @__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: [
390
- message && message,
391
- attachment && /* @__PURE__ */ jsx8(attachment_default, { item: attachment })
392
- ] }) })
393
- ] });
394
- };
395
- var messages_wrapper_default = MessagesWrapper;
396
-
397
- // src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
398
- import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
399
- var MessageContainer = React4.forwardRef(
400
- ({
401
- className,
402
- children,
403
- messages,
404
- loading,
405
- ...rest
406
- }, ref) => {
407
- return /* @__PURE__ */ jsxs8(Box6, { ref, className: "site-chat-component-message-container", children: [
408
- loading && /* @__PURE__ */ jsx9(Box6, { className: "site-chat-component-message-container-loading-state", children: /* @__PURE__ */ jsx9("p", { children: "Loading messages..." }) }),
409
- 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" }) }),
410
- messages.length > 0 && /* @__PURE__ */ jsx9(messages_wrapper_default, { messages })
411
- ] });
412
- }
413
- );
414
- MessageContainer.displayName = "SiteChatComponent.MessageContainer";
415
-
416
- // src/components/SiteChatComponent/SiteChatComponent.css
417
- if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c48ccde")) {
418
- const s = document.createElement("style");
419
- s.id = "jrapps-style-3c48ccde";
420
- s.textContent = `.site-chat-component {
421
- /* SiteChatComponent base styles */
422
- }
423
-
424
- /* ---------- Header styles ---------- */
425
-
426
- .site-chat-component-header-container {
427
- background: var(--my-tickets-chat-widget-panel-header-background-color);
428
- padding: 10px;
429
- border-top-right-radius: inherit;
430
- border-top-left-radius: inherit;
431
- }
432
-
433
- .site-chat-component-header-container .site-chat-component-header-text-section {
434
- width: 100%;
435
- }
436
-
437
- .site-chat-component-header-title {
438
- font-style: var(--my-tickets-chat-widget-panel-header-title-font-style);
439
- margin-bottom: 0 !important;
440
- color: var(--my-tickets-chat-widget-panel-header-title-color);
441
- }
442
-
443
- .site-chat-component-header-subtitle {
444
- font-style: var(--my-tickets-chat-widget-panel-header-subtitle-font-style);
445
- font-weight: normal !important;
446
- margin-top: 0 !important;
447
- color: var(--my-tickets-chat-widget-panel-header-subtitle-color);
448
- }
449
-
450
- .site-chat-component-header-close-button {
451
- cursor: pointer !important;
452
- background: none;
453
- border: none;
454
- padding: 4px;
455
- color: var(--my-tickets-chat-widget-panel-header-button-color);
456
- font-size: 1.25rem;
457
- line-height: 1;
458
- border-radius: 4px;
459
- transition: opacity 0.15s;
460
- }
461
-
462
- .site-chat-component-header-close-button:hover {
463
- opacity: 0.8;
464
- }
465
-
466
- /* ---------- Footer styles ---------- */
467
-
468
- .site-chat-component-footer-message-input-container {
469
- padding: var(--cw-space-md, 16px);
470
- background: var(--my-tickets-chat-widget-panel-footer-background-color);
471
- font-family: var(--cw-font, sans-serif);
472
- border-radius: 0 0 var(--cw-radius-panel, 16px) var(--cw-radius-panel, 16px);
473
- }
474
-
475
- .site-chat-component-footer-attachment-icon-button {
476
- width: 20px;
477
- height: 20px;
478
- }
479
-
480
- .site-chat-component-footer-my-tickets-chat-widget-send-button {
481
- background: var(--my-tickets-chat-widget-panel-footer-button-color);
482
- border: 1px solid var(--my-tickets-chat-widget-panel-footer-button-border-color);
483
- color: var(--my-tickets-chat-widget-panel-footer-button-text-color);
484
- padding: 6px;
485
- border-radius: 4px;
486
- width: 80px;
487
- cursor: pointer;
488
- }
489
-
490
- .site-chat-component-footer-my-tickets-chat-widget-send-button:disabled {
491
- opacity: 0.5;
492
- cursor: default;
493
- }
494
-
495
- .site-chat-component-footer-file-item-container {
496
- display: flex;
497
- align-items: center;
498
- gap: 8px;
499
- padding: 2px 4px;
500
- border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
501
- background-color: var(--wds-color-surface, var(--wsr-color-surface, #FFFFFF));
502
- border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
503
- box-sizing: border-box;
504
- }
505
-
506
- .site-chat-component-footer-file-name {
507
- 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));
508
- font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
509
- font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
510
- line-height: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 20px));
511
- letter-spacing: var(--wds-font-letter-spacing-0, unset);
512
- white-space: nowrap;
513
- overflow: hidden;
514
- text-overflow: ellipsis;
515
- max-width: 115px;
516
- }
517
-
518
- .site-chat-component-footer-input-wrapper {
519
- padding: 5px;
520
- box-sizing: border-box;
521
- width: inherit;
522
- display: flex;
523
- justify-content: center;
524
- flex-direction: row;
525
- gap: 10px;
526
- border-radius: 4px;
527
- background: var(--my-tickets-chat-widget-panel-footer-input-background-color);
528
- border: 2px solid var(--my-tickets-chat-widget-panel-footer-input-border-color);
529
- color: var(--my-tickets-chat-widget-panel-footer-input-text-color);
530
- font-size: var(--my-tickets-chat-widget-panel-footer-input-text-size);
531
- font-family: 'Arial', sans-serif;
532
- }
533
-
534
- .site-chat-component-footer-suffix {
535
- background: inherit;
536
- width: max-content;
537
- min-height: 100%;
538
- max-height: 100%;
539
- align-items: center;
540
- justify-content: center;
541
- display: flex;
542
- font-size: inherit;
543
- padding: 0px;
544
- margin: 0px;
545
- font-family: inherit;
546
- color: inherit;
547
- box-sizing: border-box;
548
- }
549
-
550
- .site-chat-component-footer-chat-input {
551
- background: inherit;
552
- border: none;
553
- font-size: inherit;
554
- font-family: inherit;
555
- color: inherit;
556
- width: inherit;
557
- }
558
-
559
- .site-chat-component-footer-chat-input::placeholder {
560
- background: inherit;
561
- border: none;
562
- font-size: inherit;
563
- font-family: inherit;
564
- color: inherit;
565
- opacity: 0.5;
566
- }
567
-
568
- .site-chat-component-footer-chat-input:focus {
569
- outline: none;
570
- }
571
-
572
- /* ---------- Messages styles ---------- */
573
- /* Message Container */
574
- .site-chat-component-message-container {
575
- display: flex !important;
576
- flex-direction: column !important;
577
- padding: var(--cw-space-md, 16px) !important;
578
- background: var(--my-tickets-chat-widget-panel-messages-background-color) !important;
579
- flex: 1 !important;
580
- min-height: 0;
581
- overflow-y: auto !important;
582
- }
583
-
584
- .site-chat-component-message-container-messages-wrapper {
585
- display: flex;
586
- flex-direction: column;
587
- gap: var(--cw-space-sm, 8px);
588
- }
589
-
590
- .site-chat-component-message-container-agent-message-wrapper,
591
- .site-chat-component-message-container-user-message-wrapper {
592
- display: flex;
593
- padding: 10px 14px;
594
- border-radius: var(--cw-radius-bubble, 12px);
595
- width: max-content;
596
- max-width: 80%;
597
- font-family: var(--cw-font, sans-serif);
598
- }
599
-
600
- .site-chat-component-message-container-agent-name {
601
- color: var(--my-tickets-chat-widget-panel-messages-agent-name-text-color);
602
- font-size: var(--my-tickets-chat-widget-panel-messages-agent-name-text-size);
603
- font-weight: 500;
604
- }
605
-
606
- .site-chat-component-message-container-user-name {
607
- color: var(--my-tickets-chat-widget-panel-messages-user-name-text-color);
608
- font-size: var(--my-tickets-chat-widget-panel-messages-user-name-text-size);
609
- font-weight: 500;
610
- display: var(--my-tickets-chat-widget-panel-messages-user-name-text-visible);
611
- }
612
-
613
- .site-chat-component-message-container-agent-message-avatar {
614
- margin-top: 20px;
615
- display: var(--my-tickets-chat-widget-panel-messages-agent-icon-visible);
616
- }
617
-
618
- .site-chat-component-message-container-user-message,
619
- .site-chat-component-message-container-agent-message {
620
- line-height: 1.5;
621
- word-wrap: break-word;
622
- }
623
-
624
- .site-chat-component-message-container-agent-message {
625
- font-size: var(--my-tickets-chat-widget-panel-messages-agent-text-size);
626
- }
627
-
628
- .site-chat-component-message-container-user-message {
629
- font-size: var(--my-tickets-chat-widget-panel-messages-user-text-size);
630
- }
631
-
632
- .site-chat-component-message-container-agent-message-wrapper {
633
- justify-content: flex-start;
634
- align-self: flex-start;
635
- background-color: var(--my-tickets-chat-widget-panel-messages-agent-bubble-color);
636
- color: var(--my-tickets-chat-widget-panel-messages-agent-text-color);
637
- }
638
-
639
- .site-chat-component-message-container-user-message-wrapper {
640
- justify-content: flex-end;
641
- align-self: flex-end;
642
- margin-left: auto;
643
- background-color: var(--my-tickets-chat-widget-panel-messages-user-bubble-color);
644
- color: var(--my-tickets-chat-widget-panel-messages-user-text-color);
645
- }
646
-
647
- .site-chat-component-message-container-agent-name-time-container {
648
- gap: 8px;
649
- display: flex;
650
- align-items: center;
651
- font-family: 'Madefor';
652
- font-size: 13px;
653
- }
654
-
655
- /* System Messages */
656
-
657
- .site-chat-component-message-container-system-message {
658
- display: flex;
659
- justify-content: center;
660
- align-items: center;
661
- width: 100%;
662
- gap: var(--cw-space-sm, 8px);
663
- }
664
-
665
- .site-chat-component-message-container-system-message .dashed {
666
- flex: 1;
667
- border: none;
668
- border-top: 1px dashed var(--my-tickets-chat-widget-panel-messages-system-color);
669
- margin: 0;
670
- }
671
-
672
- .site-chat-component-message-container-system-message-message {
673
- color: var(--my-tickets-chat-widget-panel-messages-system-color);
674
- font-family: var(--cw-font, sans-serif);
675
- font-size: var(--my-tickets-chat-widget-panel-messages-system-size);
676
- font-weight: 500;
677
- white-space: nowrap;
678
- }
679
-
680
- /* Empty and Loading States */
681
-
682
- .site-chat-component-message-container-empty-state {
683
- display: flex;
684
- flex: 1;
685
- align-items: center;
686
- justify-content: center;
687
- }
688
-
689
- .site-chat-component-message-container-empty-state p {
690
- font-family: var(--cw-font, sans-serif);
691
- font-size: 14px;
692
- color: var(--my-tickets-chat-widget-panel-messages-system-color);
693
- }
694
-
695
- .site-chat-component-message-container-loading-state {
696
- display: flex;
697
- flex: 1;
698
- align-items: center;
699
- justify-content: center;
700
- }
701
-
702
- .site-chat-component-message-container-loading-state p {
703
- font-family: var(--cw-font, sans-serif);
704
- font-size: 14px;
705
- color: var(--my-tickets-chat-widget-panel-messages-system-color);
706
- }
707
-
708
- .site-chat-component-message-container-in-chat-file-item-container {
709
- display: flex;
710
- align-items: center;
711
- gap: 8px;
712
- padding: 4px 8px;
713
- border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
714
- background-color: var(--wds-color-surface, var(--wsr-color-surface, #FFFFFF));
715
- border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
716
- box-sizing: border-box;
717
- }
718
-
719
- .site-chat-component-message-container-in-chat-file-name {
720
- 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));
721
- font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 10px));
722
- font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
723
- line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 12px));
724
- letter-spacing: var(--wds-font-letter-spacing-0, unset);
725
- white-space: nowrap;
726
- overflow: hidden;
727
- text-overflow: ellipsis;
728
- max-width: 150px;
729
- color: black;
730
- }
731
-
732
- .site-chat-component-message-container-in-chat-file-sub-name {
733
- 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));
734
- font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 10px));
735
- font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
736
- line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 12px));
737
- letter-spacing: var(--wds-font-letter-spacing-0, unset);
738
- color: var(--wds-color-text-secondary, var(--wsr-color-text-secondary, #6B6B6B));
739
- }
740
-
741
- .site-chat-component-message-container-in-chat-file-icon {
742
- fill: black !important;
743
- }
744
-
745
- .site-chat-component-message-container-in-chat-file-names-container {
746
- display: flex;
747
- flex-direction: column;
748
- gap: 0px;
749
- }
750
-
751
- .site-chat-component-message-container-user-message-wrapper-attachment .site-chat-component-message-container-in-chat-file-item-wrapper-box {
752
- align-items: flex-end;
753
- display: flex;
754
- flex-direction: column;
755
- }
756
-
757
- .site-chat-component-message-container-agent-message-wrapper-attachment .site-chat-component-message-container-in-chat-file-item-wrapper-box {
758
- align-items: flex-start;
759
- display: flex;
760
- flex-direction: column;
761
- }
762
-
763
- /* FAB */
764
- .site-chat-component-fab {
765
- position: fixed;
766
- bottom: 24px;
767
- right: 24px;
768
- gap: 4.5px;
769
- cursor: pointer;
770
- z-index: 100;
771
- user-select: none;
772
- border-radius: 99px;
773
- padding: 9px 25px;
774
- transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
775
- display: flex;
776
- justify-content: center;
777
- align-items: center;
778
- flex-direction: row;
779
-
780
- font-size: var(--my-tickets-chat-widget-button-text-size) !important;
781
- background-color: var(--my-tickets-chat-widget-button-color);
782
- border: 1px solid var(--my-tickets-chat-widget-button-border-color);
783
- color: var(--my-tickets-chat-widget-button-text-color);
784
- font: var(--my-tickets-chat-widget-button-text-font);
785
- }
786
-
787
- .site-chat-component-fab-fab-button-label {
788
- margin: 0;
789
- padding: 0;
790
- line-height: 1;
791
- display: inline-flex;
792
- align-items: center;
793
- margin-top: 2px;
794
- }
795
-
796
- .site-chat-component-fab-fab-button-icon,
797
- .site-chat-component-fab-fab-button-text {
798
- display: inline-flex;
799
- align-items: center;
800
- height: 100%;
801
- }
802
-
803
- .site-chat-component-fab-fab-button-icon svg {
804
- width: var(--my-tickets-chat-widget-button-icon-size);
805
- height: var(--my-tickets-chat-widget-button-icon-size);
806
- font-weight: inherit;
807
- }
808
-
809
- /* \u2500\u2500 Design Tokens \u2500\u2500 */
810
- :host {
811
- --cw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
812
-
813
- /* Primary palette */
814
- --cw-primary: #3B82F6;
815
- --cw-primary-hover: #2563EB;
816
- --cw-primary-light: #EFF6FF;
817
- --cw-primary-shadow: rgba(59, 130, 246, 0.35);
818
- --cw-primary-shadow-hover: rgba(59, 130, 246, 0.5);
819
-
820
- /* Neutrals */
821
- --cw-bg: #F8FAFC;
822
- --cw-surface: #FFFFFF;
823
- --cw-border: #E2E8F0;
824
-
825
- /* Text */
826
- --cw-text: #1E293B;
827
- --cw-text-muted: #64748B;
828
- --cw-text-inverse: #FFFFFF;
829
-
830
- /* Message bubbles */
831
- --cw-bubble-user: var(--cw-primary);
832
- --cw-bubble-user-text: var(--cw-text-inverse);
833
- --cw-bubble-agent: #F1F5F9;
834
- --cw-bubble-agent-text: var(--cw-text);
835
-
836
- /* Radii */
837
- --cw-radius-panel: 16px;
838
- --cw-radius-bubble: 12px;
839
- --cw-radius-pill: 50px;
840
-
841
- /* Spacing */
842
- --cw-space-xs: 4px;
843
- --cw-space-sm: 8px;
844
- --cw-space-md: 16px;
845
- --cw-space-lg: 24px;
846
-
847
- /* Shadows */
848
- --cw-shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.05);
849
- --cw-shadow-fab: 0 8px 24px var(--cw-primary-shadow);
850
- --cw-shadow-fab-hover: 0 12px 32px var(--cw-primary-shadow-hover);
851
- }
852
-
853
- /* \u2500\u2500 Hide toggle \u2500\u2500 */
854
- #site-chat-component-chat-toggle {
855
- display: none;
856
- }
857
-
858
- /* \u2500\u2500 Panel \u2500\u2500 */
859
- .site-chat-component-panel {
860
- position: fixed !important;
861
- bottom: 60px;
862
- right: 30px;
863
- width: min(340px, 100vw);
864
- max-height: 50vh;
865
- max-height: 50dvh;
866
- background: var(--cw-surface);
867
- border-radius: var(--cw-radius-panel, 16px) !important;
868
- box-shadow: var(--cw-shadow-panel);
869
- transform: scale(0.85) translateY(16px);
870
- transform-origin: bottom right;
871
- opacity: 0;
872
- pointer-events: none;
873
- transition: transform 0.3s cubic-bezier(.175, .885, .32, 1.275), opacity 0.25s ease;
874
- z-index: 99;
875
- display: flex !important;
876
- flex-direction: column !important;
877
- min-height: 450px;
878
- font-family: var(--cw-font);
879
- overflow: hidden;
880
- border: 0px solid var(--wst-color-line);
881
- box-shadow: 0 2px 6px var(--wst-color-line), 0 0 0 1px var(--wst-color-line);
882
- }
883
-
884
- .site-chat-component-panel.open {
885
- transform: scale(1) translateY(0);
886
- opacity: 1;
887
- pointer-events: all;
888
- z-index: 101;
889
- bottom: 10px;
890
- }
891
-
892
- /* \u2500\u2500 Mobile: fill screen \u2500\u2500 */
893
- @media (max-width: 480px) {
894
- .site-chat-component-panel {
895
- width: 100vw;
896
- height: 100vh;
897
- height: 100dvh;
898
- min-height: 0;
899
- max-height: none;
900
- bottom: 0;
901
- right: 0;
902
- }
903
-
904
- .site-chat-component-panel.open {
905
- top: 0;
906
- left: 0;
907
- right: 0;
908
- bottom: 0;
909
- }
910
- }
911
-
912
- /* \u2500\u2500 Small tablets \u2500\u2500 */
913
- @media (min-width: 481px) and (max-width: 768px) {
914
- .site-chat-component-panel {
915
- width: min(380px, calc(100vw - 24px));
916
- max-height: 70vh;
917
- max-height: 70dvh;
918
- }
919
- }
920
-
921
- /* \u2500\u2500 Large screens \u2500\u2500 */
922
- @media (min-width: 1200px) {
923
- .site-chat-component-panel {
924
- width: 350px;
925
- max-height: 70vh;
926
- max-height: 70dvh;
927
- }
928
- }
929
- `;
930
- document.head.appendChild(s);
931
- }
932
-
933
- // src/components/SiteChatComponent/SiteChatComponent.tsx
934
- import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
935
- var SiteChatComponentRoot = React5.forwardRef(
936
- ({
937
- children,
938
- viewMode,
939
- editorShowChatPanel,
940
- handleToggle,
941
- buttonTextValue,
942
- isOpen
943
- }, _ref) => {
944
- useSiteChatComponent();
945
- if (viewMode === "Editor") {
946
- if (typeof editorShowChatPanel === "undefined") {
947
- 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" }) });
948
- }
949
- return /* @__PURE__ */ jsxs9(Box7, { children: [
950
- /* @__PURE__ */ jsx10(FabButton, { onClick: handleToggle, text: buttonTextValue }),
951
- /* @__PURE__ */ jsx10(Box7, { className: `site-chat-component-panel ${editorShowChatPanel ? "open" : ""}`, children })
952
- ] });
953
- }
954
- return /* @__PURE__ */ jsxs9(Box7, { children: [
955
- /* @__PURE__ */ jsx10(FabButton, { onClick: handleToggle, text: buttonTextValue }),
956
- /* @__PURE__ */ jsx10(Box7, { className: `site-chat-component-panel ${isOpen ? "open" : ""}`, children })
957
- ] });
958
- }
959
- );
960
- SiteChatComponentRoot.displayName = "SiteChatComponent";
961
- var SiteChatComponent = Object.assign(SiteChatComponentRoot, {
962
- Header,
963
- MessageContainer,
964
- Footer,
965
- FabButton
966
- });
967
-
968
- export {
969
- SiteChatComponent
970
- };
971
- //# sourceMappingURL=chunk-QPJPV2T3.js.map