@dotss/tictoccroc 0.8.1 → 0.9.1

package/dist/shared/components/ChatKit/Message/Message.mjs

@@ -1,63 +1,55 @@
 import e from "../../../hooks/useInView/index.mjs";
 import t from "../../Image/index.mjs";
-import { useEffect as n, useImperativeHandle as r, useRef as i } from "react";
-import { Button as a, CircularProgressIndicator as o, Flexbox as s, Icon as c, Menu as l, MenuBlock as u, Typography as d } from "@dotss/ui";
-import f from "@dotss/ui/core/useTheme";
-import p from "dayjs";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useCheckHoverPossible as _ } from "@dotss/ui/hooks";
-import { MenuButton as v } from "@dotss/ui/Menu";
+import n from "../MessageFailedActions/index.mjs";
+import { useEffect as r, useImperativeHandle as i, useRef as a } from "react";
+import { Button as o, CircularProgressIndicator as s, Flexbox as c, Icon as l, Typography as u } from "@dotss/ui";
+import d from "@dotss/ui/core/useTheme";
+import f from "dayjs";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useCheckHoverPossible as h } from "@dotss/ui/hooks";
 //#region shared/components/ChatKit/Message/Message.tsx
-function y({ id: y, content: b = "", mine: x = !1, avatarUrl: S = "", unreadUserCount: C = 0, regDatetime: w, status: T, onView: E, openMenu: D, onClickAvatar: O, onCloseMenu: k, onClickMenu: A, onResend: j, onDelete: M, onViewAll: N, showAvatar: P, showTime: F, ref: I, inlineCSS: L, ...R }) {
-	let { palette: { brand: z, grey: B, etc: V }, spacing: H } = f(), { isHoverPossible: U } = _(), W = i(null), G = i(null), K = i(null);
-	r(I, () => W.current);
-	let q = e(W), J = T === "FAILED", Y = b.length > 300, X = (e) => {
-		e === "resend" ? (k?.(), K.current = setTimeout(() => {
-			j?.();
-		}, 200)) : e === "delete" && (k?.(), K.current = setTimeout(() => {
-			M?.();
-		}, 200));
-	}, Z = (e) => {
+function g({ id: g, content: _ = "", mine: v = !1, avatarUrl: y = "", unreadUserCount: b = 0, regDatetime: x, status: S, onView: C, openMenu: w, onClickAvatar: T, onCloseMenu: E, onClickMenu: D, onResend: O, onDelete: k, onViewAll: A, showAvatar: j, showTime: M, ref: N, inlineCSS: P, ...F }) {
+	let { palette: { brand: I, grey: L } } = d(), { isHoverPossible: R } = h(), z = a(null);
+	i(N, () => z.current);
+	let B = e(z), V = S === "FAILED", H = _.length > 300, U = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
 	};
-	return n(() => {
-		q && E?.();
-	}, [q, E]), n(() => {
-		J && W?.current?.scrollIntoView();
-	}, [J]), n(() => () => {
-		K.current && clearTimeout(K.current);
-	}, []), /* @__PURE__ */ g(s, {
-		ref: W,
+	return r(() => {
+		B && C?.();
+	}, [B, C]), r(() => {
+		V && z?.current?.scrollIntoView();
+	}, [V]), /* @__PURE__ */ m(c, {
+		ref: z,
 		alignItems: "flex-end",
-		flexDirection: x ? "row-reverse" : "row",
+		flexDirection: v ? "row-reverse" : "row",
 		pl: 4,
 		pr: 4,
 		gap: 1,
-		"aria-busy": T === "PENDING",
-		...R,
+		"aria-busy": S === "PENDING",
+		...F,
 		inlineCSS: {
-			cursor: T === "PENDING" ? "wait" : "default",
+			cursor: S === "PENDING" ? "wait" : "default",
 			overflowAnchor: "none",
-			...L
+			...P
 		},
 		children: [
-			/* @__PURE__ */ g(s, {
+			/* @__PURE__ */ m(c, {
 				alignItems: "flex-start",
 				gap: 2.5,
-				children: [!x && P && S && /* @__PURE__ */ h(s, {
-					role: typeof O == "function" ? "button" : void 0,
-					tabIndex: typeof O == "function" ? 0 : -1,
-					onClick: O,
-					onKeyDown: Z,
-					"aria-label": typeof O == "function" ? "선생님 프로필 보기" : void 0,
+				children: [!v && j && y && /* @__PURE__ */ p(c, {
+					role: typeof T == "function" ? "button" : void 0,
+					tabIndex: typeof T == "function" ? 0 : -1,
+					onClick: T,
+					onKeyDown: U,
+					"aria-label": typeof T == "function" ? "선생님 프로필 보기" : void 0,
 					inlineCSS: {
 						position: "relative",
 						overflow: "hidden",
 						minWidth: 32,
-						cursor: typeof O == "function" ? "pointer" : void 0
+						cursor: typeof T == "function" ? "pointer" : void 0
 					},
-					children: /* @__PURE__ */ h(t, {
-						src: S,
+					children: /* @__PURE__ */ p(t, {
+						src: y,
 						width: 32,
 						height: 32,
 						borderRadius: "50%",
@@ -66,19 +58,19 @@ function y({ id: y, content: b = "", mine: x = !1, avatarUrl: S = "", unreadUser
 						enableFallback: !0,
 						style: { objectFit: "cover" }
 					})
-				}), /* @__PURE__ */ g(s, {
+				}), /* @__PURE__ */ m(c, {
 					pt: 2,
 					pb: 2,
 					pl: 3,
 					pr: 3,
-					ml: !x && !P && S ? 10.5 : void 0,
+					ml: !v && !j && y ? 10.5 : void 0,
 					flexDirection: "column",
 					gap: 2.5,
 					inlineCSS: {
 						borderRadius: 12,
-						backgroundColor: x ? z.primary.pageControl : B[10]
+						backgroundColor: v ? I.primary.pageControl : L[10]
 					},
-					children: [/* @__PURE__ */ h(d, {
+					children: [/* @__PURE__ */ p(u, {
 						tag: "p",
 						variant: "b3R",
 						inlineCSS: {
@@ -87,76 +79,42 @@ function y({ id: y, content: b = "", mine: x = !1, avatarUrl: S = "", unreadUser
 							userSelect: "text",
 							"& *": { userSelect: "text" }
 						},
-						children: Y ? b.slice(0, 300) + "..." : b
-					}), Y && /* @__PURE__ */ h(a, {
+						children: H ? _.slice(0, 300) + "..." : _
+					}), H && /* @__PURE__ */ p(o, {
 						variant: "text",
 						size: "xSmall",
-						endAdornment: /* @__PURE__ */ h(c, { name: "ChevronRightLine" }),
-						onClick: N,
+						endAdornment: /* @__PURE__ */ p(l, { name: "ChevronRightLine" }),
+						onClick: A,
 						inlineCSS: {
 							marginLeft: "auto",
-							"&:active:not([aria-disabled=\"true\"])": { backgroundColor: z.primary.main },
-							...U && { "&:hover:not([aria-disabled=\"true\"])": { backgroundColor: z.primary.main } }
+							"&:active:not([aria-disabled=\"true\"])": { backgroundColor: I.primary.main },
+							...R && { "&:hover:not([aria-disabled=\"true\"])": { backgroundColor: I.primary.main } }
 						},
 						children: "전체보기"
 					})]
 				})]
 			}),
-			J && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g(v, {
-				ref: G,
-				isMenuOpen: !!D,
-				menuId: `message-${y}-menu`,
-				onClick: A,
-				size: "xSmall",
-				inlineCSS: {
-					padding: H.content(.5),
-					gap: H.content(.5),
-					borderRadius: 200,
-					backgroundColor: D ? B[10] : "transparent",
-					cursor: "pointer",
-					...U && { "&:hover": { backgroundColor: `${B[10]} !important` } },
-					"&:active": { backgroundColor: `${B[10]} !important` }
-				},
-				children: [/* @__PURE__ */ h(c, {
-					name: "ResetLine",
-					size: "xSmall",
-					color: "grey.70",
-					inlineCSS: { color: `${B[70]} !important` }
-				}), /* @__PURE__ */ h(c, {
-					name: "CloseLine",
-					size: "xSmall",
-					color: "etc.red",
-					inlineCSS: { color: `${V.red} !important` }
-				})]
-			}), /* @__PURE__ */ g(l, {
-				id: `message-${y}-menu`,
-				anchorRef: G,
-				open: D,
-				onClose: k,
-				onChange: X,
-				width: 160,
-				placement: "bottom-left",
-				children: [/* @__PURE__ */ h(u, {
-					value: "resend",
-					children: "재전송"
-				}), /* @__PURE__ */ h(u, {
-					value: "delete",
-					children: "삭제"
-				})]
-			})] }),
-			!J && /* @__PURE__ */ g(s, {
+			V && /* @__PURE__ */ p(n, {
+				id: g,
+				openMenu: w,
+				onClickMenu: D,
+				onCloseMenu: E,
+				onResend: O,
+				onDelete: k
+			}),
+			!V && /* @__PURE__ */ m(c, {
 				flexDirection: "column",
-				alignItems: x ? "flex-end" : "flex-start",
+				alignItems: v ? "flex-end" : "flex-start",
 				inlineCSS: { whiteSpace: "nowrap" },
 				children: [
-					x && C > 0 && T === "SUCCEEDED" && /* @__PURE__ */ h(d, {
+					v && b > 0 && S === "SUCCEEDED" && /* @__PURE__ */ p(u, {
 						tag: "span",
 						variant: "c5B",
 						"aria-hidden": !0,
-						inlineCSS: { color: z.primary.text },
-						children: C
+						inlineCSS: { color: I.primary.text },
+						children: b
 					}),
-					x && C > 0 && T === "PENDING" && /* @__PURE__ */ h(o, {
+					v && b > 0 && S === "PENDING" && /* @__PURE__ */ p(s, {
 						size: "small",
 						loop: !0,
 						inlineCSS: {
@@ -164,12 +122,12 @@ function y({ id: y, content: b = "", mine: x = !1, avatarUrl: S = "", unreadUser
 							height: 12
 						}
 					}),
-					/* @__PURE__ */ h(d, {
+					/* @__PURE__ */ p(u, {
 						tag: "span",
 						variant: "c5R",
 						color: "etc.dimmed01",
-						inlineCSS: { display: F ? void 0 : "none" },
-						children: p(w).format("A h:mm")
+						inlineCSS: { display: M ? void 0 : "none" },
+						children: f(x).format("A h:mm")
 					})
 				]
 			})
@@ -177,4 +135,4 @@ function y({ id: y, content: b = "", mine: x = !1, avatarUrl: S = "", unreadUser
 	});
 }
 //#endregion
-export { y as default };
+export { g as default };

package/dist/shared/components/ChatKit/Message/Message.utils.mjs

@@ -15,8 +15,20 @@ function t(e) {
 		}))];
 	});
 }
-function n({ mine: t, status: n, unreadUserCount: r, content: i, regDatetime: a }) {
-	return `${t ? "나" : "상대방"}, ${i}, ${r && r > 0 ? "읽지 않음" : "읽음"}, ${n === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${e(a).format("YYYY년 MM월 DD일 A h:mm")}`;
+var n = {
+	SUCCEEDED: "전송됨",
+	FAILED: "전송 실패",
+	PENDING: "전송 중"
+};
+function r({ mine: t, status: r, unreadUserCount: i, content: a, regDatetime: o }) {
+	let s = n[r];
+	return [
+		t ? "나" : "상대방",
+		a,
+		i && i > 0 ? "읽지 않음" : "읽음",
+		s,
+		e(o).format("YYYY년 MM월 DD일 A h:mm")
+	].join(", ");
 }
 //#endregion
-export { n as getMessageLabel, t as markMessageGroupBoundaries };
+export { r as getMessageLabel, t as markMessageGroupBoundaries };

package/dist/shared/components/ChatKit/Message/Message.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/components/ChatKit/MessageFailedActions/MessageFailedActions.d.ts

@@ -0,0 +1,10 @@
+export interface MessageFailedActionsProps {
+    id: string | number;
+    openMenu?: boolean;
+    onClickMenu?: () => void;
+    onCloseMenu?: () => void;
+    onResend?: () => void;
+    onDelete?: () => void;
+}
+declare function MessageFailedActions({ id, openMenu, onClickMenu, onCloseMenu, onResend, onDelete }: MessageFailedActionsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default MessageFailedActions;

package/dist/shared/components/ChatKit/MessageFailedActions/MessageFailedActions.mjs

@@ -0,0 +1,65 @@
+import { useEffect as e, useRef as t } from "react";
+import { Icon as n, Menu as r, MenuBlock as i } from "@dotss/ui";
+import a from "@dotss/ui/core/useTheme";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCheckHoverPossible as l } from "@dotss/ui/hooks";
+import { MenuButton as u } from "@dotss/ui/Menu";
+//#region shared/components/ChatKit/MessageFailedActions/MessageFailedActions.tsx
+var d = 200;
+function f({ id: f, openMenu: p, onClickMenu: m, onCloseMenu: h, onResend: g, onDelete: _ }) {
+	let { palette: { grey: v, etc: y }, spacing: b } = a(), { isHoverPossible: x } = l(), S = t(null), C = t(null), w = (e) => {
+		if (e !== "resend" && e !== "delete") return;
+		let t = e === "resend" ? g : _;
+		C.current && clearTimeout(C.current), C.current = setTimeout(() => {
+			t?.();
+		}, d);
+	};
+	return e(() => () => {
+		C.current && clearTimeout(C.current);
+	}, []), /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c(u, {
+		ref: S,
+		isMenuOpen: !!p,
+		menuId: `message-${f}-menu`,
+		onClick: () => m?.(),
+		size: "xSmall",
+		"aria-label": "전송 실패 메뉴 열기",
+		inlineCSS: {
+			padding: b.content(.5),
+			gap: b.content(.5),
+			borderRadius: 200,
+			backgroundColor: p ? v[10] : "transparent",
+			cursor: "pointer",
+			...x && { "&:hover": { backgroundColor: `${v[10]} !important` } },
+			"&:active": { backgroundColor: `${v[10]} !important` }
+		},
+		children: [/* @__PURE__ */ s(n, {
+			name: "ResetLine",
+			size: "xSmall",
+			color: "grey.70",
+			inlineCSS: { color: `${v[70]} !important` }
+		}), /* @__PURE__ */ s(n, {
+			name: "CloseLine",
+			size: "xSmall",
+			color: "etc.red",
+			inlineCSS: { color: `${y.red} !important` }
+		})]
+	}), /* @__PURE__ */ c(r, {
+		id: `message-${f}-menu`,
+		anchorRef: S,
+		open: p,
+		onClose: h,
+		onChange: w,
+		transitionDuration: d,
+		width: 160,
+		placement: "bottom-left",
+		children: [/* @__PURE__ */ s(i, {
+			value: "resend",
+			children: "재전송"
+		}), /* @__PURE__ */ s(i, {
+			value: "delete",
+			children: "삭제"
+		})]
+	})] });
+}
+//#endregion
+export { f as default };

package/dist/shared/components/ChatKit/MessageFailedActions/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MessageFailedActions, MessageFailedActionsProps } from './MessageFailedActions';
+export type { MessageFailedActionsProps };
+export default MessageFailedActions;

package/dist/shared/components/ChatKit/MessageFailedActions/index.mjs

@@ -0,0 +1,5 @@
+import e from "./MessageFailedActions.mjs";
+//#region shared/components/ChatKit/MessageFailedActions/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/shared/components/ChatKit/index.d.ts

@@ -1,10 +1,12 @@
 export { default as Message } from './Message';
+export { default as ImageMessage } from './ImageMessage';
 export { default as SystemMessage } from './SystemMessage';
 export { default as BotMessage } from './BotMessage';
 export { default as InputBar } from './InputBar';
 export { default as Seperator } from './Seperator';
 export { default as UnreadMessagePill } from './UnreadMessagePill';
 export * from './Message';
+export * from './ImageMessage';
 export * from './SystemMessage';
 export * from './BotMessage';
 export * from './InputBar';

package/dist/shared/components/ChatKit/index.mjs

@@ -1,13 +1,15 @@
 import e from "./Message/Message.fallback.mjs";
 import { getMessageLabel as t, markMessageGroupBoundaries as n } from "./Message/Message.utils.mjs";
 import r from "./Message/index.mjs";
-import i from "./SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
-import { getSystemMessageLabel as a } from "./SystemMessage/SystemMessage.utils.mjs";
-import o from "./SystemMessage/index.mjs";
-import { getBotMessageLabel as s, getCtaButtonText as c } from "./BotMessage/BotMessage.utils.mjs";
-import l from "./BotMessage/index.mjs";
-import u from "./InputBar/InputBar.fallback.mjs";
-import d from "./InputBar/index.mjs";
-import f from "./Seperator/index.mjs";
-import p from "./UnreadMessagePill/index.mjs";
-export { l as BotMessage, i as DirectTradeRiskInfoBottomSheet, d as InputBar, u as InputBarFallback, r as Message, e as MessageFallback, f as Seperator, o as SystemMessage, p as UnreadMessagePill, s as getBotMessageLabel, c as getCtaButtonText, t as getMessageLabel, a as getSystemMessageLabel, n as markMessageGroupBoundaries };
+import { getImageMessageLabel as i, getPhotoAssetMessage as a } from "./ImageMessage/ImageMessage.utils.mjs";
+import o from "./ImageMessage/index.mjs";
+import s from "./SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
+import { getSystemMessageLabel as c } from "./SystemMessage/SystemMessage.utils.mjs";
+import l from "./SystemMessage/index.mjs";
+import { getBotMessageLabel as u, getCtaButtonText as d } from "./BotMessage/BotMessage.utils.mjs";
+import f from "./BotMessage/index.mjs";
+import p from "./InputBar/InputBar.fallback.mjs";
+import m from "./InputBar/index.mjs";
+import h from "./Seperator/index.mjs";
+import g from "./UnreadMessagePill/index.mjs";
+export { f as BotMessage, s as DirectTradeRiskInfoBottomSheet, o as ImageMessage, m as InputBar, p as InputBarFallback, r as Message, e as MessageFallback, h as Seperator, l as SystemMessage, g as UnreadMessagePill, u as getBotMessageLabel, d as getCtaButtonText, i as getImageMessageLabel, t as getMessageLabel, a as getPhotoAssetMessage, c as getSystemMessageLabel, n as markMessageGroupBoundaries };