@solostylist/ui-kit 1.0.145 → 1.0.146

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 (3) hide show
  1. package/dist/s-chat-message/s-chat-message.d.ts +1 -0
  2. package/dist/s-chat-message/s-chat-message.js +172 -120
  3. package/package.json +1 -1
package/dist/s-chat-message/s-chat-message.d.ts CHANGED
@@ -24,6 +24,7 @@ export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
24
24
  hasError?: boolean;
25
25
  errorMessage?: string;
26
26
  onRetry?: () => void;
27
+ loading?: boolean;
27
28
  }
28
29
  declare const SChatMessage: React.FC<SChatMessageProps>;
29
30
  export default SChatMessage;
package/dist/s-chat-message/s-chat-message.js CHANGED
@@ -1,76 +1,128 @@
1
- import { j as r } from "../jsx-runtime-OVHDjVDe.js";
2
- import { useState as I } from "react";
3
- import { Box as o, Typography as s, Paper as R, IconButton as b } from "@mui/material";
4
- import k from "../s-avatar/s-avatar.js";
5
- import V from "../s-image-modal/s-image-modal.js";
6
- import U from "../s-lazy-image/s-lazy-image.js";
7
- import { c as x } from "../createSvgIcon-Dq42_0tn.js";
8
- const A = x(/* @__PURE__ */ r.jsx("path", {
1
+ import { j as e } from "../jsx-runtime-OVHDjVDe.js";
2
+ import { useState as C } from "react";
3
+ import { Box as t, Typography as l, Paper as U, IconButton as T } from "@mui/material";
4
+ import W from "../s-avatar/s-avatar.js";
5
+ import P from "../s-image-modal/s-image-modal.js";
6
+ import E from "../s-lazy-image/s-lazy-image.js";
7
+ import o from "../s-skeleton/s-skeleton.js";
8
+ import { c as m } from "../createSvgIcon-Dq42_0tn.js";
9
+ const G = m(/* @__PURE__ */ e.jsx("path", {
9
10
  d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
10
- }), "Download"), P = x(/* @__PURE__ */ r.jsx("path", {
11
+ }), "Download"), K = m(/* @__PURE__ */ e.jsx("path", {
11
12
  d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
12
- }), "ErrorOutline"), E = x(/* @__PURE__ */ r.jsx("path", {
13
+ }), "ErrorOutline"), q = m(/* @__PURE__ */ e.jsx("path", {
13
14
  d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
14
- }), "InsertDriveFile"), G = x(/* @__PURE__ */ r.jsx("path", {
15
+ }), "InsertDriveFile"), A = m(/* @__PURE__ */ e.jsx("path", {
15
16
  d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"
16
- }), "Refresh"), _ = ({
17
- message: h,
18
- variant: w = "received",
19
- timestamp: g,
20
- avatar: u,
21
- senderName: l,
22
- showAvatar: j = !0,
23
- showTimestamp: M = !1,
24
- maxWidth: C = "70%",
25
- attachments: m = [],
26
- onAttachmentClick: t,
27
- onDownload: n,
28
- hasError: f = !1,
29
- errorMessage: T = "Failed to send message",
30
- onRetry: v,
31
- sx: B,
32
- ...F
17
+ }), "Refresh"), ee = ({
18
+ message: j,
19
+ variant: B = "received",
20
+ timestamp: u,
21
+ avatar: v,
22
+ senderName: s,
23
+ showAvatar: n = !0,
24
+ showTimestamp: y = !1,
25
+ maxWidth: S = "70%",
26
+ attachments: f = [],
27
+ onAttachmentClick: a,
28
+ onDownload: d,
29
+ hasError: g = !1,
30
+ errorMessage: F = "Failed to send message",
31
+ onRetry: z,
32
+ loading: D = !1,
33
+ sx: w,
34
+ ...I
33
35
  }) => {
34
- const [a, y] = I(null), [W, z] = I(!1), i = w === "sent", H = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
36
+ const [x, b] = C(null), [H, k] = C(!1), r = B === "sent", L = (i) => (typeof i == "string" ? new Date(i) : i).toLocaleTimeString("en-US", {
35
37
  hour: "2-digit",
36
38
  minute: "2-digit",
37
39
  hour12: !0
38
- }), L = (e) => {
39
- if (!e) return "";
40
- const d = ["Bytes", "KB", "MB", "GB"], p = Math.floor(Math.log(e) / Math.log(1024));
41
- return Math.round(e / Math.pow(1024, p) * 100) / 100 + " " + d[p];
42
- }, O = (e) => {
43
- t ? t(e) : (y(e), z(!0));
44
- }, D = (e) => {
45
- t ? t(e) : n && n(e);
46
- }, c = m.filter((e) => e.type === "image"), S = m.filter((e) => e.type === "file");
47
- return /* @__PURE__ */ r.jsxs(
48
- o,
40
+ }), O = (i) => {
41
+ if (!i) return "";
42
+ const h = ["Bytes", "KB", "MB", "GB"], p = Math.floor(Math.log(i) / Math.log(1024));
43
+ return Math.round(i / Math.pow(1024, p) * 100) / 100 + " " + h[p];
44
+ }, R = (i) => {
45
+ a ? a(i) : (b(i), k(!0));
46
+ }, V = (i) => {
47
+ a ? a(i) : d && d(i);
48
+ }, c = f.filter((i) => i.type === "image"), M = f.filter((i) => i.type === "file");
49
+ return D ? /* @__PURE__ */ e.jsxs(
50
+ t,
49
51
  {
50
52
  display: "flex",
51
- flexDirection: i ? "row-reverse" : "row",
53
+ flexDirection: r ? "row-reverse" : "row",
52
54
  alignItems: "flex-start",
53
55
  gap: 1,
54
56
  mb: 1,
55
57
  sx: {
56
- maxWidth: C,
57
- alignSelf: i ? "flex-end" : "flex-start",
58
- ...B
58
+ maxWidth: S,
59
+ alignSelf: r ? "flex-end" : "flex-start",
60
+ ...w
59
61
  },
60
- ...F,
62
+ ...I,
61
63
  children: [
62
- j && !i && /* @__PURE__ */ r.jsx(k, { avatar: u, name: l, size: 36 }),
63
- /* @__PURE__ */ r.jsxs(
64
- o,
64
+ n && !r && /* @__PURE__ */ e.jsx(o, { component: "rounded-avatar", width: 36, height: 36 }),
65
+ /* @__PURE__ */ e.jsxs(
66
+ t,
65
67
  {
66
68
  display: "flex",
67
69
  flexDirection: "column",
68
- alignItems: i ? "flex-end" : "flex-start",
70
+ alignItems: r ? "flex-end" : "flex-start",
69
71
  gap: 0.5,
70
72
  sx: { minWidth: 0 },
71
73
  children: [
72
- l && !i && /* @__PURE__ */ r.jsx(
73
- s,
74
+ s && !r && /* @__PURE__ */ e.jsx(o, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
75
+ /* @__PURE__ */ e.jsxs(
76
+ t,
77
+ {
78
+ sx: {
79
+ display: "inline-block",
80
+ width: "20rem",
81
+ maxWidth: "100%",
82
+ overflow: "hidden",
83
+ ml: 0.5
84
+ },
85
+ children: [
86
+ /* @__PURE__ */ e.jsx(o, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
87
+ /* @__PURE__ */ e.jsx(o, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
88
+ /* @__PURE__ */ e.jsx(o, { variant: "text", width: "70%", height: 16 })
89
+ ]
90
+ }
91
+ ),
92
+ y && /* @__PURE__ */ e.jsx(o, { variant: "text", width: 60, height: 10, sx: { ml: r ? 0 : 0.5, mr: r ? 0.5 : 0 } })
93
+ ]
94
+ }
95
+ ),
96
+ n && r && /* @__PURE__ */ e.jsx(o, { component: "rounded-avatar", width: 36, height: 36 })
97
+ ]
98
+ }
99
+ ) : /* @__PURE__ */ e.jsxs(
100
+ t,
101
+ {
102
+ display: "flex",
103
+ flexDirection: r ? "row-reverse" : "row",
104
+ alignItems: "flex-start",
105
+ gap: 1,
106
+ mb: 1,
107
+ sx: {
108
+ maxWidth: S,
109
+ alignSelf: r ? "flex-end" : "flex-start",
110
+ ...w
111
+ },
112
+ ...I,
113
+ children: [
114
+ n && !r && /* @__PURE__ */ e.jsx(W, { avatar: v, name: s, size: 36 }),
115
+ /* @__PURE__ */ e.jsxs(
116
+ t,
117
+ {
118
+ display: "flex",
119
+ flexDirection: "column",
120
+ alignItems: r ? "flex-end" : "flex-start",
121
+ gap: 0.5,
122
+ sx: { minWidth: 0 },
123
+ children: [
124
+ s && !r && /* @__PURE__ */ e.jsx(
125
+ l,
74
126
  {
75
127
  variant: "caption",
76
128
  sx: {
@@ -79,32 +131,32 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
79
131
  fontWeight: 500,
80
132
  ml: 0.5
81
133
  },
82
- children: l
134
+ children: s
83
135
  }
84
136
  ),
85
- /* @__PURE__ */ r.jsxs(
86
- o,
137
+ /* @__PURE__ */ e.jsxs(
138
+ t,
87
139
  {
88
140
  sx: {
89
141
  display: "inline-block",
90
142
  borderRadius: 2,
91
143
  wordBreak: "break-word",
92
144
  maxWidth: "100%",
93
- backgroundColor: i ? "primary.main" : "",
94
- color: i ? "primary.contrastText" : "text.primary",
95
- border: i ? "none" : "1px solid",
96
- borderColor: f ? "error.main" : "divider",
97
- ...i && {
145
+ backgroundColor: r ? "primary.main" : "",
146
+ color: r ? "primary.contrastText" : "text.primary",
147
+ border: r ? "none" : "1px solid",
148
+ borderColor: g ? "error.main" : "divider",
149
+ ...r && {
98
150
  backgroundColor: "primary.dark"
99
151
  },
100
- ...f && {
152
+ ...g && {
101
153
  opacity: 0.7
102
154
  },
103
155
  overflow: "hidden"
104
156
  },
105
157
  children: [
106
- c.length > 0 && /* @__PURE__ */ r.jsx(
107
- o,
158
+ c.length > 0 && /* @__PURE__ */ e.jsx(
159
+ t,
108
160
  {
109
161
  sx: {
110
162
  display: "grid",
@@ -113,8 +165,8 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
113
165
  p: 0.5
114
166
  },
115
167
  minWidth: 200,
116
- children: c.map((e) => /* @__PURE__ */ r.jsx(
117
- o,
168
+ children: c.map((i) => /* @__PURE__ */ e.jsx(
169
+ t,
118
170
  {
119
171
  sx: {
120
172
  position: "relative",
@@ -126,12 +178,12 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
126
178
  opacity: 0.9
127
179
  }
128
180
  },
129
- onClick: () => O(e),
130
- children: /* @__PURE__ */ r.jsx(
131
- U,
181
+ onClick: () => R(i),
182
+ children: /* @__PURE__ */ e.jsx(
183
+ E,
132
184
  {
133
- src: e.thumbnailUrl || e.url,
134
- alt: e.name || "Image",
185
+ src: i.thumbnailUrl || i.url,
186
+ alt: i.name || "Image",
135
187
  width: "100%",
136
188
  height: "100%",
137
189
  style: {
@@ -143,12 +195,12 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
143
195
  }
144
196
  )
145
197
  },
146
- e.id
198
+ i.id
147
199
  ))
148
200
  }
149
201
  ),
150
- S.length > 0 && /* @__PURE__ */ r.jsx(o, { sx: { p: 1.5 }, children: S.map((e, d) => /* @__PURE__ */ r.jsxs(
151
- R,
202
+ M.length > 0 && /* @__PURE__ */ e.jsx(t, { sx: { p: 1.5 }, children: M.map((i, h) => /* @__PURE__ */ e.jsxs(
203
+ U,
152
204
  {
153
205
  variant: "outlined",
154
206
  sx: {
@@ -156,27 +208,27 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
156
208
  alignItems: "center",
157
209
  gap: 1.5,
158
210
  p: 1,
159
- mt: d > 0 ? 1 : 0,
211
+ mt: h > 0 ? 1 : 0,
160
212
  cursor: "pointer",
161
- backgroundColor: i ? "blackAlpha.zero" : "background.paper",
213
+ backgroundColor: r ? "blackAlpha.zero" : "background.paper",
162
214
  "&:hover": {
163
- backgroundColor: i ? "blackAlpha.light" : "action.hover"
215
+ backgroundColor: r ? "blackAlpha.light" : "action.hover"
164
216
  }
165
217
  },
166
- onClick: () => D(e),
218
+ onClick: () => V(i),
167
219
  children: [
168
- /* @__PURE__ */ r.jsx(
169
- E,
220
+ /* @__PURE__ */ e.jsx(
221
+ q,
170
222
  {
171
223
  sx: {
172
224
  fontSize: 32,
173
- color: i ? "primary.contrastText" : "action.active"
225
+ color: r ? "primary.contrastText" : "action.active"
174
226
  }
175
227
  }
176
228
  ),
177
- /* @__PURE__ */ r.jsxs(o, { sx: { flex: 1, minWidth: 0 }, children: [
178
- /* @__PURE__ */ r.jsx(
179
- s,
229
+ /* @__PURE__ */ e.jsxs(t, { sx: { flex: 1, minWidth: 0 }, children: [
230
+ /* @__PURE__ */ e.jsx(
231
+ l,
180
232
  {
181
233
  variant: "body2",
182
234
  sx: {
@@ -185,42 +237,42 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
185
237
  overflow: "hidden",
186
238
  textOverflow: "ellipsis",
187
239
  whiteSpace: "nowrap",
188
- color: i ? "inherit" : "text.primary"
240
+ color: r ? "inherit" : "text.primary"
189
241
  },
190
- children: e.name || "Unnamed File"
242
+ children: i.name || "Unnamed File"
191
243
  }
192
244
  ),
193
- e.size && /* @__PURE__ */ r.jsx(
194
- s,
245
+ i.size && /* @__PURE__ */ e.jsx(
246
+ l,
195
247
  {
196
248
  variant: "caption",
197
249
  sx: {
198
250
  fontSize: "0.75rem",
199
- color: i ? "whiteAlpha.dark" : "text.secondary"
251
+ color: r ? "whiteAlpha.dark" : "text.secondary"
200
252
  },
201
- children: L(e.size)
253
+ children: O(i.size)
202
254
  }
203
255
  )
204
256
  ] }),
205
- n && /* @__PURE__ */ r.jsx(
206
- b,
257
+ d && /* @__PURE__ */ e.jsx(
258
+ T,
207
259
  {
208
260
  size: "small",
209
261
  onClick: (p) => {
210
- p.stopPropagation(), n(e);
262
+ p.stopPropagation(), d(i);
211
263
  },
212
264
  sx: {
213
- color: i ? "primary.contrastText" : "action.active"
265
+ color: r ? "primary.contrastText" : "action.active"
214
266
  },
215
- children: /* @__PURE__ */ r.jsx(A, { fontSize: "small" })
267
+ children: /* @__PURE__ */ e.jsx(G, { fontSize: "small" })
216
268
  }
217
269
  )
218
270
  ]
219
271
  },
220
- e.id
272
+ i.id
221
273
  )) }),
222
- h && /* @__PURE__ */ r.jsx(o, { sx: { px: 2, py: 1.5, pt: m.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ r.jsx(
223
- s,
274
+ j && /* @__PURE__ */ e.jsx(t, { sx: { px: 2, py: 1.5, pt: f.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
275
+ l,
224
276
  {
225
277
  variant: "body2",
226
278
  sx: {
@@ -228,69 +280,69 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
228
280
  lineHeight: 1.4,
229
281
  whiteSpace: "pre-wrap"
230
282
  },
231
- children: h
283
+ children: j
232
284
  }
233
285
  ) })
234
286
  ]
235
287
  }
236
288
  ),
237
- M && g && /* @__PURE__ */ r.jsx(
238
- s,
289
+ y && u && /* @__PURE__ */ e.jsx(
290
+ l,
239
291
  {
240
292
  variant: "caption",
241
293
  sx: {
242
294
  color: "text.secondary",
243
295
  fontSize: "0.7rem",
244
- ml: i ? 0 : 0.5,
245
- mr: i ? 0.5 : 0
296
+ ml: r ? 0 : 0.5,
297
+ mr: r ? 0.5 : 0
246
298
  },
247
- children: H(g)
299
+ children: L(u)
248
300
  }
249
301
  ),
250
- f && /* @__PURE__ */ r.jsxs(
251
- o,
302
+ g && /* @__PURE__ */ e.jsxs(
303
+ t,
252
304
  {
253
305
  display: "flex",
254
306
  alignItems: "center",
255
307
  gap: 0.5,
256
308
  sx: {
257
309
  color: "error.main",
258
- ml: i ? 0 : 0.5,
259
- mr: i ? 0.5 : 0
310
+ ml: r ? 0 : 0.5,
311
+ mr: r ? 0.5 : 0
260
312
  },
261
313
  children: [
262
- /* @__PURE__ */ r.jsx(P, { sx: { fontSize: "1rem" } }),
263
- /* @__PURE__ */ r.jsx(
264
- s,
314
+ /* @__PURE__ */ e.jsx(K, { sx: { fontSize: "1rem" } }),
315
+ /* @__PURE__ */ e.jsx(
316
+ l,
265
317
  {
266
318
  variant: "caption",
267
319
  sx: {
268
320
  fontSize: "0.875rem",
269
321
  fontWeight: 500
270
322
  },
271
- children: T
323
+ children: F
272
324
  }
273
325
  ),
274
- v && /* @__PURE__ */ r.jsx(b, { size: "small", onClick: v, children: /* @__PURE__ */ r.jsx(G, {}) })
326
+ z && /* @__PURE__ */ e.jsx(T, { size: "small", onClick: z, children: /* @__PURE__ */ e.jsx(A, {}) })
275
327
  ]
276
328
  }
277
329
  )
278
330
  ]
279
331
  }
280
332
  ),
281
- j && i && /* @__PURE__ */ r.jsx(k, { avatar: u, name: l, size: 36 }),
282
- a && /* @__PURE__ */ r.jsx(
283
- V,
333
+ n && r && /* @__PURE__ */ e.jsx(W, { avatar: v, name: s, size: 36 }),
334
+ x && /* @__PURE__ */ e.jsx(
335
+ P,
284
336
  {
285
- isOpen: W,
337
+ isOpen: H,
286
338
  onClose: () => {
287
- z(!1), y(null);
339
+ k(!1), b(null);
288
340
  },
289
341
  selectedItem: {
290
- id: a.id,
342
+ id: x.id,
291
343
  type: "image",
292
- url: a.url,
293
- title: a.name
344
+ url: x.url,
345
+ title: x.name
294
346
  },
295
347
  showNavigation: !1,
296
348
  showThumbnailDock: !1
@@ -301,5 +353,5 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
301
353
  );
302
354
  };
303
355
  export {
304
- _ as default
356
+ ee as default
305
357
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org"
5
5
  },
6
- "version": "1.0.145",
6
+ "version": "1.0.146",
7
7
  "description": "advanced ui kit for solostylist",
8
8
  "private": false,
9
9
  "type": "module",