@solostylist/ui-kit 1.0.202 → 1.0.204

package/dist/s-chat-input-j_4JZfmI.js

@@ -0,0 +1,283 @@
+import { t as e } from "./jsx-runtime-V-UOMaX1.js";
+import { t } from "./createSvgIcon-Bs2KOQvq.js";
+import { SIconButton as n } from "./s-icon-button/s-icon-button.js";
+import { t as r } from "./ArrowUpward-KYbUu0UZ.js";
+import { t as i } from "./Close-DD2G0QfM.js";
+import { t as a } from "./s-text-field-C2WdBxNO.js";
+import { SFileIcon as o } from "./s-file-icon/s-file-icon.js";
+import { forwardRef as s, useEffect as c, useId as l, useState as u } from "react";
+import { Box as d, ClickAwayListener as f, Popper as p, Typography as m, outlinedInputClasses as h } from "@mui/material";
+import g from "emoji-picker-react";
+//#region ../../node_modules/@mui/icons-material/esm/AttachFile.js
+var _ = e(), v = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6z" }), "AttachFile"), y = t(/* @__PURE__ */ (0, _.jsx)("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5" }), "EmojiEmotions"), b = s(({ onSubmit: e, onFileSelect: t, disabled: s, acceptedFileTypes: b, maxFileSize: x, hideEmojiPicker: S, hideFileAttachment: C, ...w }, T) => {
+	let [E, D] = u(""), [O, k] = u([]), [A, j] = u(/* @__PURE__ */ new Map()), [M, N] = u(!1), [P, F] = u(null), I = l(), L = (e) => e.type.startsWith("image/"), R = (e) => {
+		let t = `${e.name}-${e.size}-${e.lastModified}`;
+		if (A.has(t)) return A.get(t);
+		if (L(e)) {
+			let n = URL.createObjectURL(e);
+			return j((e) => new Map(e).set(t, n)), n;
+		}
+		return "";
+	}, z = (e) => {
+		D(e.target.value);
+	}, B = (e) => {
+		D((t) => t + e.emoji), N(!1), F(null);
+	}, V = (e) => {
+		F(e.currentTarget), N(!M);
+	}, H = () => {
+		s || E.trim().length === 0 && O.length === 0 || (e?.(E, O), D(""), A.forEach((e) => URL.revokeObjectURL(e)), j(/* @__PURE__ */ new Map()), k([]));
+	}, U = (e) => {
+		let n = Array.from(e.target.files ?? []).filter((e) => !(x && e.size > x));
+		k((e) => [...e, ...n]), t?.(n), e.target.value = "";
+	}, W = (e) => {
+		let t = O[e];
+		if (t && L(t)) {
+			let e = `${t.name}-${t.size}-${t.lastModified}`, n = A.get(e);
+			n && (URL.revokeObjectURL(n), j((t) => {
+				let n = new Map(t);
+				return n.delete(e), n;
+			}));
+		}
+		k((t) => t.filter((t, n) => n !== e));
+	};
+	return c(() => () => {
+		A.forEach((e) => URL.revokeObjectURL(e));
+	}, [A]), /* @__PURE__ */ (0, _.jsxs)(d, {
+		border: "1px solid",
+		borderColor: "divider",
+		borderRadius: 2,
+		padding: "8px 12px",
+		children: [
+			/* @__PURE__ */ (0, _.jsx)(a, {
+				placeholder: "Enter your message here...",
+				disabled: s,
+				value: E,
+				onChange: z,
+				onKeyDown: (e) => {
+					e.key === "Enter" && !e.shiftKey && (e.preventDefault(), H());
+				},
+				multiline: !0,
+				minRows: 1,
+				maxRows: 10,
+				variant: "outlined",
+				fullWidth: !0,
+				inputRef: T,
+				slotProps: { input: { sx: {
+					height: "100%",
+					backgroundColor: "transparent",
+					border: "none",
+					padding: 0,
+					[`&.${h.focused}`]: { outline: "none" },
+					"& fieldset": { border: "none" },
+					"&:hover fieldset": { border: "none" },
+					"&.Mui-focused fieldset": { border: "none" }
+				} } },
+				...w
+			}),
+			O.length > 0 && /* @__PURE__ */ (0, _.jsx)(d, {
+				mt: 1,
+				children: O.map((e, t) => {
+					let r = L(e), a = e.name.split(".").pop();
+					return /* @__PURE__ */ (0, _.jsxs)(d, {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						sx: {
+							bgcolor: "background.paper",
+							border: "1px solid",
+							borderColor: "divider",
+							borderRadius: 1,
+							p: 1,
+							mb: .5
+						},
+						children: [/* @__PURE__ */ (0, _.jsxs)(d, {
+							display: "flex",
+							alignItems: "center",
+							gap: 1,
+							children: [r ? /* @__PURE__ */ (0, _.jsx)(d, {
+								component: "img",
+								src: R(e),
+								alt: e.name,
+								sx: {
+									width: 40,
+									height: 40,
+									borderRadius: 1,
+									objectFit: "cover",
+									border: "1px solid",
+									borderColor: "divider"
+								}
+							}) : /* @__PURE__ */ (0, _.jsx)(o, { extension: a }), /* @__PURE__ */ (0, _.jsxs)(d, {
+								display: "flex",
+								flexDirection: "row",
+								alignItems: "center",
+								gap: 1,
+								children: [/* @__PURE__ */ (0, _.jsx)(m, {
+									variant: "subtitle2",
+									textOverflow: "ellipsis",
+									overflow: "hidden",
+									whiteSpace: "nowrap",
+									children: e.name
+								}), /* @__PURE__ */ (0, _.jsx)("div", { children: /* @__PURE__ */ (0, _.jsxs)(m, {
+									variant: "caption",
+									children: [
+										"(",
+										Math.round(e.size / 1024),
+										" KB)"
+									]
+								}) })]
+							})]
+						}), /* @__PURE__ */ (0, _.jsx)(n, {
+							onClick: () => W(t),
+							sx: {
+								minWidth: "auto",
+								p: .5
+							},
+							children: /* @__PURE__ */ (0, _.jsx)(i, {})
+						})]
+					}, `${e.name}-${t}`);
+				})
+			}),
+			/* @__PURE__ */ (0, _.jsxs)(d, {
+				display: "flex",
+				justifyContent: "space-between",
+				alignItems: "center",
+				mt: 1,
+				children: [/* @__PURE__ */ (0, _.jsxs)(d, {
+					display: "flex",
+					gap: 1,
+					children: [!C && /* @__PURE__ */ (0, _.jsxs)(_.Fragment, { children: [/* @__PURE__ */ (0, _.jsx)("input", {
+						type: "file",
+						multiple: !0,
+						accept: b,
+						onChange: U,
+						style: { display: "none" },
+						id: `file-attachment-input-${I}`,
+						disabled: s
+					}), /* @__PURE__ */ (0, _.jsx)("label", {
+						htmlFor: `file-attachment-input-${I}`,
+						children: /* @__PURE__ */ (0, _.jsx)(n, {
+							component: "span",
+							disabled: s,
+							sx: {
+								transition: "transform 0.3s ease",
+								"&:hover": { transform: "scale(1.1)" }
+							},
+							children: /* @__PURE__ */ (0, _.jsx)(v, {})
+						})
+					})] }), !S && /* @__PURE__ */ (0, _.jsx)(n, {
+						onClick: V,
+						disabled: s,
+						sx: {
+							transition: "transform 0.3s ease",
+							"&:hover": { transform: "scale(1.1)" }
+						},
+						children: /* @__PURE__ */ (0, _.jsx)(y, {})
+					})]
+				}), /* @__PURE__ */ (0, _.jsx)(n, {
+					onClick: H,
+					disabled: s,
+					sx: {
+						transition: "transform 0.3s ease",
+						"&:hover": { transform: "scale(1.2)" }
+					},
+					children: /* @__PURE__ */ (0, _.jsx)(r, {})
+				})]
+			}),
+			/* @__PURE__ */ (0, _.jsx)(p, {
+				open: M,
+				anchorEl: P,
+				placement: "top-start",
+				sx: { zIndex: 1300 },
+				children: /* @__PURE__ */ (0, _.jsx)(f, {
+					onClickAway: () => {
+						N(!1), F(null);
+					},
+					children: /* @__PURE__ */ (0, _.jsx)(d, {
+						sx: {
+							border: "1px solid",
+							borderColor: "divider",
+							borderRadius: 1,
+							overflow: "hidden",
+							"& .epr-main": {
+								backgroundColor: "background.paper",
+								border: "none"
+							},
+							"& .epr-header": { backgroundColor: "background.paper" },
+							"& .epr-search-container": { backgroundColor: "background.paper" },
+							"& .epr-search-container > .epr-icn-search": { display: "none" },
+							"& .epr-search-container > input": {
+								backgroundColor: "background.default",
+								border: "1px solid",
+								borderColor: "divider",
+								borderRadius: 1,
+								color: "text.primary",
+								padding: "8px 12px",
+								"&:focus": {
+									outline: "none",
+									borderColor: "primary.main"
+								},
+								"&::placeholder": { color: "divider" }
+							},
+							"& .epr-category-nav": {
+								backgroundColor: "background.paper",
+								borderBottom: "1px solid",
+								borderColor: "divider",
+								padding: "0px 8px 8px 8px"
+							},
+							"& .epr-cat-btn": {
+								backgroundColor: "transparent !important",
+								border: "none",
+								transition: "all 0.2s ease"
+							},
+							"& .epr-body": { backgroundColor: "background.paper" },
+							"& .epr-emoji-category-label": {
+								backgroundColor: "background.paper",
+								color: "text.primary",
+								fontSize: 12,
+								fontWeight: 600,
+								padding: "8px 16px 4px",
+								textTransform: "uppercase",
+								letterSpacing: "0.5px"
+							},
+							"& .epr-emoji-list": { backgroundColor: "background.paper" },
+							"& .epr-emoji": {
+								borderRadius: 1,
+								margin: "2px",
+								transition: "all 0.2s ease",
+								"&:hover": {
+									backgroundColor: "action.hover",
+									transform: "scale(1.1)"
+								},
+								"&:active": { transform: "scale(0.95)" }
+							},
+							"& .epr-skin-tones": {
+								backgroundColor: "background.paper",
+								border: "1px solid",
+								borderColor: "divider",
+								borderRadius: 1,
+								display: "none"
+							},
+							"& .epr-tone": {
+								border: "none",
+								borderRadius: 1,
+								transition: "all 0.2s ease",
+								"&:hover": { transform: "scale(1.1)" }
+							}
+						},
+						children: /* @__PURE__ */ (0, _.jsx)(g, {
+							onEmojiClick: B,
+							width: 300,
+							height: 400,
+							searchDisabled: !1,
+							skinTonesDisabled: !1,
+							previewConfig: { showPreview: !1 }
+						})
+					})
+				})
+			})
+		]
+	});
+});
+b.displayName = "SChatInput";
+//#endregion
+export { b as t };

package/dist/s-chat-message/index.js

@@ -1,4 +1,4 @@
-import { SChatMessage as s } from "./s-chat-message.js";
-export {
-  s as default
-};
+import "../createTheme-CMuiGmV-.js";
+import "../jsx-runtime-V-UOMaX1.js";
+import { t as e } from "../s-chat-message-DQk5XWSJ.js";
+export { e as default };

package/dist/s-chat-message/s-chat-message.d.ts

@@ -44,8 +44,5 @@ export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
     /** Whether to show skeleton loading state instead of content */
     loading?: boolean;
 }
-/**
- * A comprehensive chat message component for conversation interfaces with support for text, images, and file attachments.
- */
 export declare const SChatMessage: React.FC<SChatMessageProps>;
 export default SChatMessage;

package/dist/s-chat-message/s-chat-message.js

@@ -1,283 +1,4 @@
-import { j as e } from "../jsx-runtime-tc70JA_2.js";
-import { useState as k } from "react";
-import { Box as s, Typography as n, Paper as V, IconButton as M } from "@mui/material";
-import { SAvatar as F } from "../s-avatar/s-avatar.js";
-import { SImageModal as P } from "../s-image-modal/s-image-modal.js";
-import U from "../s-lazy-image/s-lazy-image.js";
-import { SSkeleton as t } from "../s-skeleton/s-skeleton.js";
-import { c as v } from "../createSvgIcon-BkbeLOhM.js";
-import { f as H, a as q } from "../utils-D1UMIV0b.js";
-import { D as E } from "../Download-BoRQUwCf.js";
-const G = v(/* @__PURE__ */ e.jsx("path", {
-  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"
-}), "ErrorOutline"), J = v(/* @__PURE__ */ e.jsx("path", {
-  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"
-}), "InsertDriveFile"), K = v(/* @__PURE__ */ e.jsx("path", {
-  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"
-}), "Refresh"), Q = ({ isSent: r, showAvatar: d, showTimestamp: x, senderName: p, maxWidth: l, sx: a, ...c }) => /* @__PURE__ */ e.jsxs(
-  s,
-  {
-    display: "flex",
-    flexDirection: r ? "row-reverse" : "row",
-    alignItems: "flex-start",
-    gap: 1,
-    mb: 1,
-    sx: {
-      maxWidth: l,
-      alignSelf: r ? "flex-end" : "flex-start",
-      ...a
-    },
-    ...c,
-    children: [
-      d && !r && /* @__PURE__ */ e.jsx(t, { component: "rounded-avatar", width: 36, height: 36 }),
-      /* @__PURE__ */ e.jsxs(
-        s,
-        {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: r ? "flex-end" : "flex-start",
-          gap: 0.5,
-          sx: { minWidth: 0 },
-          children: [
-            p && !r && /* @__PURE__ */ e.jsx(t, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
-            /* @__PURE__ */ e.jsxs(
-              s,
-              {
-                sx: {
-                  display: "inline-block",
-                  width: "20rem",
-                  maxWidth: "100%",
-                  overflow: "hidden",
-                  ml: 0.5
-                },
-                children: [
-                  /* @__PURE__ */ e.jsx(t, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-                  /* @__PURE__ */ e.jsx(t, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
-                  /* @__PURE__ */ e.jsx(t, { variant: "text", width: "70%", height: 16 })
-                ]
-              }
-            ),
-            x && /* @__PURE__ */ e.jsx(t, { variant: "text", width: 60, height: 10, sx: { ml: r ? 0 : 0.5, mr: r ? 0.5 : 0 } })
-          ]
-        }
-      ),
-      d && r && /* @__PURE__ */ e.jsx(t, { component: "rounded-avatar", width: 36, height: 36 })
-    ]
-  }
-), X = ({
-  message: r,
-  variant: d = "received",
-  timestamp: x,
-  avatar: p,
-  senderName: l,
-  showAvatar: a = !0,
-  showTimestamp: c = !1,
-  maxWidth: I = "70%",
-  attachments: u = [],
-  onAttachmentClick: f,
-  onDownload: h,
-  hasError: m = !1,
-  errorMessage: W = "Failed to send message",
-  onRetry: y,
-  loading: D = !1,
-  sx: w,
-  ...b
-}) => {
-  const [g, z] = k(null), [O, S] = k(!1), o = d === "sent", L = (i) => {
-    f ? f(i) : (z(i), S(!0));
-  }, R = (i) => {
-    f ? f(i) : h && h(i);
-  }, j = u.filter((i) => i.type === "image"), C = u.filter((i) => i.type === "file");
-  return D ? /* @__PURE__ */ e.jsx(
-    Q,
-    {
-      isSent: o,
-      showAvatar: a,
-      showTimestamp: c,
-      senderName: l,
-      maxWidth: I,
-      sx: w,
-      ...b
-    }
-  ) : /* @__PURE__ */ e.jsxs(
-    s,
-    {
-      display: "flex",
-      flexDirection: o ? "row-reverse" : "row",
-      alignItems: "flex-start",
-      gap: 1,
-      mb: 1,
-      sx: {
-        maxWidth: I,
-        alignSelf: o ? "flex-end" : "flex-start",
-        ...w
-      },
-      ...b,
-      children: [
-        a && !o && /* @__PURE__ */ e.jsx(F, { avatar: p, name: l, size: 36 }),
-        /* @__PURE__ */ e.jsxs(
-          s,
-          {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: o ? "flex-end" : "flex-start",
-            gap: 0.5,
-            sx: { minWidth: 0 },
-            children: [
-              l && !o && /* @__PURE__ */ e.jsx(n, { children: l }),
-              /* @__PURE__ */ e.jsxs(
-                s,
-                {
-                  sx: {
-                    display: "inline-block",
-                    borderRadius: 2,
-                    wordBreak: "break-word",
-                    maxWidth: "100%",
-                    border: "1px solid",
-                    borderColor: m ? "error.main" : "divider",
-                    ...m && {
-                      opacity: 0.7
-                    },
-                    overflow: "hidden"
-                  },
-                  children: [
-                    j.length > 0 && /* @__PURE__ */ e.jsx(
-                      s,
-                      {
-                        sx: {
-                          display: "grid",
-                          gridTemplateColumns: j.length === 1 ? "1fr" : "repeat(2, 1fr)",
-                          gap: 0.5,
-                          p: 0.5
-                        },
-                        minWidth: 200,
-                        children: j.map((i) => /* @__PURE__ */ e.jsx(
-                          s,
-                          {
-                            sx: {
-                              position: "relative",
-                              paddingTop: j.length === 1 ? "66.67%" : "100%",
-                              cursor: "pointer",
-                              borderRadius: 1.5,
-                              overflow: "hidden",
-                              "&:hover": {
-                                opacity: 0.9
-                              }
-                            },
-                            onClick: () => L(i),
-                            children: /* @__PURE__ */ e.jsx(
-                              U,
-                              {
-                                src: i.thumbnailUrl ?? i.url,
-                                alt: i.name ?? "Image",
-                                width: "100%",
-                                height: "100%",
-                                style: {
-                                  position: "absolute",
-                                  top: 0,
-                                  left: 0,
-                                  objectFit: "cover"
-                                }
-                              }
-                            )
-                          },
-                          i.id
-                        ))
-                      }
-                    ),
-                    C.length > 0 && /* @__PURE__ */ e.jsx(s, { sx: { p: 1.5 }, children: C.map((i, T) => /* @__PURE__ */ e.jsxs(
-                      V,
-                      {
-                        variant: "outlined",
-                        sx: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 1.5,
-                          p: 1,
-                          mt: T > 0 ? 1 : 0,
-                          cursor: "pointer"
-                        },
-                        onClick: () => R(i),
-                        children: [
-                          /* @__PURE__ */ e.jsx(J, { sx: { fontSize: 32 } }),
-                          /* @__PURE__ */ e.jsxs(s, { sx: { flex: 1, minWidth: 0 }, children: [
-                            /* @__PURE__ */ e.jsx(
-                              n,
-                              {
-                                variant: "body2",
-                                sx: {
-                                  fontSize: "0.875rem",
-                                  fontWeight: 500,
-                                  overflow: "hidden",
-                                  textOverflow: "ellipsis",
-                                  whiteSpace: "nowrap"
-                                },
-                                children: i.name ?? "Unnamed File"
-                              }
-                            ),
-                            i.size && /* @__PURE__ */ e.jsx(n, { variant: "caption", children: H(i.size) })
-                          ] }),
-                          h && /* @__PURE__ */ e.jsx(
-                            M,
-                            {
-                              onClick: (B) => {
-                                B.stopPropagation(), h(i);
-                              },
-                              children: /* @__PURE__ */ e.jsx(E, {})
-                            }
-                          )
-                        ]
-                      },
-                      i.id
-                    )) }),
-                    r && /* @__PURE__ */ e.jsx(s, { sx: { px: 2, py: 1.5, pt: u.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
-                      n,
-                      {
-                        variant: "body2",
-                        sx: {
-                          fontSize: "0.875rem",
-                          whiteSpace: "pre-wrap",
-                          color: m ? "error.main" : "inherit"
-                        },
-                        children: r
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              c && x && /* @__PURE__ */ e.jsx(n, { variant: "caption", children: q(x) }),
-              m && /* @__PURE__ */ e.jsxs(s, { display: "flex", alignItems: "center", gap: 0.5, color: "error.main", children: [
-                /* @__PURE__ */ e.jsx(G, { sx: { fontSize: "1rem" } }),
-                /* @__PURE__ */ e.jsx(n, { color: "inherit", children: W }),
-                y && /* @__PURE__ */ e.jsx(M, { onClick: y, children: /* @__PURE__ */ e.jsx(K, {}) })
-              ] })
-            ]
-          }
-        ),
-        a && o && /* @__PURE__ */ e.jsx(F, { avatar: p, name: l, size: 36 }),
-        g && /* @__PURE__ */ e.jsx(
-          P,
-          {
-            isOpen: O,
-            onClose: () => {
-              S(!1), z(null);
-            },
-            selectedItem: {
-              id: g.id,
-              type: "image",
-              url: g.url,
-              title: g.name
-            },
-            showNavigation: !1,
-            showThumbnailDock: !1
-          }
-        )
-      ]
-    }
-  );
-};
-X.displayName = "SChatMessage";
-export {
-  X as SChatMessage,
-  X as default
-};
+import "../createTheme-CMuiGmV-.js";
+import "../jsx-runtime-V-UOMaX1.js";
+import { t as e } from "../s-chat-message-DQk5XWSJ.js";
+export { e as SChatMessage, e as default };