@dotss/tictoccroc 0.8.1 → 0.9.0

package/dist/index.mjs

@@ -80,26 +80,28 @@ import be from "./shared/components/Calendar/index.mjs";
 import xe from "./shared/components/ChatKit/Message/Message.fallback.mjs";
 import { getMessageLabel as Se, markMessageGroupBoundaries as Ce } from "./shared/components/ChatKit/Message/Message.utils.mjs";
 import we from "./shared/components/ChatKit/Message/index.mjs";
-import Te from "./shared/components/ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
-import { getSystemMessageLabel as Ee } from "./shared/components/ChatKit/SystemMessage/SystemMessage.utils.mjs";
-import De from "./shared/components/ChatKit/SystemMessage/index.mjs";
-import { getBotMessageLabel as Oe, getCtaButtonText as ke } from "./shared/components/ChatKit/BotMessage/BotMessage.utils.mjs";
-import Ae from "./shared/components/ChatKit/BotMessage/index.mjs";
-import je from "./shared/components/ChatKit/InputBar/InputBar.fallback.mjs";
-import Me from "./shared/components/ChatKit/InputBar/index.mjs";
-import Ne from "./shared/components/ChatKit/Seperator/index.mjs";
-import Pe from "./shared/components/ChatKit/UnreadMessagePill/index.mjs";
-import Fe from "./parent/b2b/components/TopLogo/index.mjs";
+import { getImageMessageLabel as Te, getPhotoAssetMessage as Ee } from "./shared/components/ChatKit/ImageMessage/ImageMessage.utils.mjs";
+import De from "./shared/components/ChatKit/ImageMessage/index.mjs";
+import Oe from "./shared/components/ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
+import { getSystemMessageLabel as ke } from "./shared/components/ChatKit/SystemMessage/SystemMessage.utils.mjs";
+import Ae from "./shared/components/ChatKit/SystemMessage/index.mjs";
+import { getBotMessageLabel as je, getCtaButtonText as Me } from "./shared/components/ChatKit/BotMessage/BotMessage.utils.mjs";
+import Ne from "./shared/components/ChatKit/BotMessage/index.mjs";
+import Pe from "./shared/components/ChatKit/InputBar/InputBar.fallback.mjs";
+import Fe from "./shared/components/ChatKit/InputBar/index.mjs";
+import Ie from "./shared/components/ChatKit/Seperator/index.mjs";
+import Le from "./shared/components/ChatKit/UnreadMessagePill/index.mjs";
+import Re from "./parent/b2b/components/TopLogo/index.mjs";
 import "./parent/b2b/components/index.mjs";
-import Ie from "./shared/utils/isAndroid/index.mjs";
-import Le from "./shared/utils/isIos/index.mjs";
-import Re from "./shared/utils/isApp/index.mjs";
-import ze from "./shared/utils/isDesktop/index.mjs";
-import Be from "./shared/utils/ageToBirthDate/index.mjs";
-import Ve from "./shared/utils/objectToQueryString/index.mjs";
-import He from "./shared/utils/getVimeoId/index.mjs";
-import Ue from "./shared/utils/parseQueryString/index.mjs";
-import We from "./shared/utils/share/index.mjs";
-import Ge from "./shared/utils/getCareTypeLabel/index.mjs";
+import ze from "./shared/utils/isAndroid/index.mjs";
+import Be from "./shared/utils/isIos/index.mjs";
+import Ve from "./shared/utils/isApp/index.mjs";
+import He from "./shared/utils/isDesktop/index.mjs";
+import Ue from "./shared/utils/ageToBirthDate/index.mjs";
+import We from "./shared/utils/objectToQueryString/index.mjs";
+import Ge from "./shared/utils/getVimeoId/index.mjs";
+import Ke from "./shared/utils/parseQueryString/index.mjs";
+import qe from "./shared/utils/share/index.mjs";
+import Je from "./shared/utils/getCareTypeLabel/index.mjs";
 import "./shared/utils/index.mjs";
-export { T as AbilityBadge, E as AbilityCollection, oe as ActionButtons, m as ActivityGallery, f as ActivityGalleryItem, P as AvailableScheduleSection, ne as BannerAccount, te as BannerAccountFallback, Ae as BotMessage, se as BottomNotes, be as Calendar, L as CareNote, z as CareNoteSection, _ as CareerItem, v as CareerSection, q as Carousel, Y as Carousel1Account, J as Carousel1AccountFallback, Z as Carousel2Account, X as Carousel2AccountFallback, K as CarouselSlide, h as CertificateItem, g as CertificateSection, Te as DirectTradeRiskInfoBottomSheet, y as EducationItem, b as EducationSection, le as EmployeeNumberField, a as Image, i as ImageError, Me as InputBar, je as InputBarFallback, U as LoadingAnnouncer, p as Masonry, l as MasonryBlock, $ as MediaBlock, ve as MediaDialog, he as MediaDialogContent, ge as MediaDialogFooter, _e as MediaDialogToolbar, we as Message, xe as MessageFallback, ue as NameField, ie as NotificationCard, V as ParentReviewCard, H as ParentReviewSection, pe as PhoneNumberField, x as PreferredActivityKeywordGroup, C as PreferredAgeGroup, o as ProfileSummary, R as Roller, F as RollerBlock, M as ScheduleBlock, D as ScheduleEvent, N as Scheduler, Ne as Seperator, s as StatBadge, c as StatBadgeCollection, ee as Swiper, Q as SwiperBlock, De as SystemMessage, G as TextAccount, W as TextAccountFallback, ce as TextField, ye as TimePicker, me as Title, Fe as TopLogo, Pe as UnreadMessagePill, Be as ageToBirthDate, I as birthDateToAge, u as combineRef, ae as convertMdToHtml, O as dayFlagToDay, w as getAbilityCollection, j as getAvailableDateRange, Oe as getBotMessageLabel, Ge as getCareTypeLabel, B as getChildLabel, ke as getCtaButtonText, k as getDateRange, r as getImageUrl, Se as getMessageLabel, S as getPreferredAgeKeywords, Ee as getSystemMessageLabel, A as getTimeRange, He as getVimeoId, Ie as isAndroid, Re as isApp, ze as isDesktop, Le as isIos, t as isServer, de as isSuccess, fe as isValid, Ce as markMessageGroupBoundaries, Ve as objectToQueryString, Ue as parseQueryString, re as sanitize, We as share, d as useCombineRef, e as useInView, n as useIsomorphicLayoutEffect };
+export { T as AbilityBadge, E as AbilityCollection, oe as ActionButtons, m as ActivityGallery, f as ActivityGalleryItem, P as AvailableScheduleSection, ne as BannerAccount, te as BannerAccountFallback, Ne as BotMessage, se as BottomNotes, be as Calendar, L as CareNote, z as CareNoteSection, _ as CareerItem, v as CareerSection, q as Carousel, Y as Carousel1Account, J as Carousel1AccountFallback, Z as Carousel2Account, X as Carousel2AccountFallback, K as CarouselSlide, h as CertificateItem, g as CertificateSection, Oe as DirectTradeRiskInfoBottomSheet, y as EducationItem, b as EducationSection, le as EmployeeNumberField, a as Image, i as ImageError, De as ImageMessage, Fe as InputBar, Pe as InputBarFallback, U as LoadingAnnouncer, p as Masonry, l as MasonryBlock, $ as MediaBlock, ve as MediaDialog, he as MediaDialogContent, ge as MediaDialogFooter, _e as MediaDialogToolbar, we as Message, xe as MessageFallback, ue as NameField, ie as NotificationCard, V as ParentReviewCard, H as ParentReviewSection, pe as PhoneNumberField, x as PreferredActivityKeywordGroup, C as PreferredAgeGroup, o as ProfileSummary, R as Roller, F as RollerBlock, M as ScheduleBlock, D as ScheduleEvent, N as Scheduler, Ie as Seperator, s as StatBadge, c as StatBadgeCollection, ee as Swiper, Q as SwiperBlock, Ae as SystemMessage, G as TextAccount, W as TextAccountFallback, ce as TextField, ye as TimePicker, me as Title, Re as TopLogo, Le as UnreadMessagePill, Ue as ageToBirthDate, I as birthDateToAge, u as combineRef, ae as convertMdToHtml, O as dayFlagToDay, w as getAbilityCollection, j as getAvailableDateRange, je as getBotMessageLabel, Je as getCareTypeLabel, B as getChildLabel, Me as getCtaButtonText, k as getDateRange, Te as getImageMessageLabel, r as getImageUrl, Se as getMessageLabel, Ee as getPhotoAssetMessage, S as getPreferredAgeKeywords, ke as getSystemMessageLabel, A as getTimeRange, Ge as getVimeoId, ze as isAndroid, Ve as isApp, He as isDesktop, Be as isIos, t as isServer, de as isSuccess, fe as isValid, Ce as markMessageGroupBoundaries, We as objectToQueryString, Ke as parseQueryString, re as sanitize, qe as share, d as useCombineRef, e as useInView, n as useIsomorphicLayoutEffect };

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

@@ -0,0 +1,30 @@
+import { MessageStatus } from '../Message';
+export type ImageMessageAssetState = 'NORMAL' | 'DELETED' | 'ERROR';
+export interface ImageMessageAsset {
+    id: number;
+    type: 'IMAGE';
+    source: string;
+    state?: ImageMessageAssetState;
+}
+export interface ImageMessageProps {
+    id: string | number;
+    assets: ImageMessageAsset[];
+    mine: boolean;
+    status: MessageStatus;
+    regDatetime?: string;
+    unreadUserCount?: number;
+    avatarUrl?: string;
+    showAvatar?: boolean;
+    showTime?: boolean;
+    openMenu?: boolean;
+    onClickAsset?: (index: number) => void;
+    onErrorAsset?: (index: number) => void;
+    onClickAvatar?: () => void;
+    onClickMenu?: () => void;
+    onCloseMenu?: () => void;
+    onResend?: () => void;
+    onDelete?: () => void;
+    onView?: () => void;
+}
+declare function ImageMessage({ id, assets, mine, status, regDatetime, unreadUserCount, avatarUrl, showAvatar, showTime, openMenu, onClickAsset, onErrorAsset, onClickAvatar, onClickMenu, onCloseMenu, onResend, onDelete, onView }: ImageMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ImageMessage;

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

@@ -0,0 +1,144 @@
+import e from "../../../hooks/useInView/index.mjs";
+import t from "../../Image/index.mjs";
+import n from "../MessageFailedActions/index.mjs";
+import { getPhotoAssetMessage as r } from "./ImageMessage.utils.mjs";
+import { useEffect as i, useRef as a } from "react";
+import { CircularProgressIndicator as o, Flexbox as s, Icon as c, Typography as l } from "@dotss/ui";
+import u from "@dotss/ui/core/useTheme";
+import d from "dayjs";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region shared/components/ChatKit/ImageMessage/ImageMessage.tsx
+var h = 2, g = 190, _ = 2, v = (g - _) / h, y = 190, b = 130, x = 32, S = (e) => e === 1 ? y : e === h ? b : v;
+function C({ id: y, assets: b, mine: C, status: w, regDatetime: T, unreadUserCount: E = 0, avatarUrl: D = "", showAvatar: O = !1, showTime: k = !1, openMenu: A, onClickAsset: j, onErrorAsset: M, onClickAvatar: N, onClickMenu: P, onCloseMenu: F, onResend: I, onDelete: L, onView: R }) {
+	let { palette: { grey: z, brand: B, etc: V }, spacing: H } = u(), U = a(null), { isInView: W } = e(U), G = w === "FAILED", K = S(b.length);
+	return i(() => {
+		W && R?.();
+	}, [W, R]), /* @__PURE__ */ m(s, {
+		ref: U,
+		gap: 1,
+		pl: 4,
+		pr: 4,
+		alignItems: "flex-end",
+		flexDirection: C ? "row-reverse" : "row",
+		"aria-busy": w === "PENDING",
+		inlineCSS: {
+			paddingTop: H.content(1),
+			overflowAnchor: "none"
+		},
+		children: [
+			!C && /* @__PURE__ */ p(s, {
+				tag: "button",
+				type: "button",
+				onClick: N,
+				"aria-label": "프로필 보기",
+				inlineCSS: {
+					width: x,
+					height: x,
+					padding: 0,
+					border: "none",
+					borderRadius: "50%",
+					overflow: "hidden",
+					background: "transparent",
+					visibility: O ? "visible" : "hidden",
+					flexShrink: 0
+				},
+				children: O && D && /* @__PURE__ */ p(t, {
+					src: D,
+					alt: "",
+					width: x,
+					height: x,
+					borderRadius: "50%",
+					enableFallback: !0
+				})
+			}),
+			/* @__PURE__ */ p(s, {
+				inlineCSS: {
+					display: "grid",
+					gridTemplateColumns: `repeat(${h}, 1fr)`,
+					gridAutoRows: K,
+					gap: _,
+					width: g,
+					borderRadius: 12,
+					overflow: "hidden"
+				},
+				children: b.map((e, n) => {
+					let i = b.length % h === 1 && n === b.length - 1, a = i ? g : v, o = e.state ?? "NORMAL", u = o === "NORMAL" ? void 0 : r(o);
+					return /* @__PURE__ */ p(s, {
+						tag: "button",
+						type: "button",
+						flexDirection: "column",
+						justifyContent: "center",
+						alignItems: "center",
+						gap: 1,
+						onClick: () => j?.(n),
+						"aria-label": o === "NORMAL" ? `${n + 1}번째 사진 보기` : `${n + 1}번째 사진, ${u}`,
+						inlineCSS: {
+							gridColumn: i ? "1 / -1" : void 0,
+							padding: 0,
+							border: "none",
+							background: z[20],
+							cursor: "pointer"
+						},
+						children: o === "NORMAL" ? /* @__PURE__ */ p(t, {
+							src: e.source,
+							alt: "",
+							width: a,
+							height: K,
+							lazy: !0,
+							style: { objectFit: "cover" },
+							enableErrorFallback: !1,
+							onError: () => M?.(n)
+						}) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(c, {
+							name: "InfoFill",
+							size: "small",
+							color: "etc.red"
+						}), b.length === 1 && /* @__PURE__ */ p(l, {
+							variant: "b5M",
+							inlineCSS: { color: V.red },
+							children: u
+						})] })
+					}, e.id);
+				})
+			}),
+			G && C && /* @__PURE__ */ p(n, {
+				id: y,
+				openMenu: A,
+				onClickMenu: P,
+				onCloseMenu: F,
+				onResend: I,
+				onDelete: L
+			}),
+			!G && /* @__PURE__ */ m(s, {
+				flexDirection: "column",
+				alignItems: C ? "flex-end" : "flex-start",
+				inlineCSS: { whiteSpace: "nowrap" },
+				children: [
+					C && E > 0 && w === "SUCCEEDED" && /* @__PURE__ */ p(l, {
+						tag: "span",
+						variant: "c5B",
+						"aria-hidden": !0,
+						inlineCSS: { color: B.primary.text },
+						children: E
+					}),
+					C && E > 0 && w === "PENDING" && /* @__PURE__ */ p(o, {
+						size: "small",
+						loop: !0,
+						inlineCSS: {
+							width: 12,
+							height: 12
+						}
+					}),
+					k && T && /* @__PURE__ */ p(l, {
+						tag: "span",
+						variant: "c5R",
+						color: "etc.dimmed01",
+						"aria-hidden": !0,
+						children: d(T).format("A h:mm")
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { C as default };

package/dist/shared/components/ChatKit/ImageMessage/ImageMessage.utils.d.ts

@@ -0,0 +1,12 @@
+import { ImageMessageAssetState } from '.';
+import { MessageStatus } from '../Message';
+interface ImageMessageLabelParams {
+    mine: boolean;
+    status: MessageStatus;
+    count: number;
+    unreadUserCount?: number;
+    regDatetime?: string;
+}
+export declare function getPhotoAssetMessage(state: Exclude<ImageMessageAssetState, 'NORMAL'>): "더 이상 볼 수 없는 사진이에요" | "사진을 불러올 수 없어요";
+export declare function getImageMessageLabel({ mine, status, count, unreadUserCount, regDatetime }: ImageMessageLabelParams): string;
+export {};

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

@@ -0,0 +1,21 @@
+import { getMessageLabel as e } from "../Message/Message.utils.mjs";
+//#region shared/components/ChatKit/ImageMessage/ImageMessage.utils.ts
+var t = {
+	deleted: "더 이상 볼 수 없는 사진이에요",
+	error: "사진을 불러올 수 없어요"
+};
+function n(e) {
+	return e === "DELETED" ? t.deleted : t.error;
+}
+function r({ mine: t, status: n, count: r, unreadUserCount: i, regDatetime: a }) {
+	let o = `사진 ${r}장`;
+	return n === "FAILED" ? `${t ? "나" : "상대방"}, ${o}, 전송 실패` : e({
+		mine: t,
+		status: n,
+		unreadUserCount: i,
+		content: o,
+		regDatetime: a
+	});
+}
+//#endregion
+export { r as getImageMessageLabel, n as getPhotoAssetMessage };

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

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

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

@@ -0,0 +1,4 @@
+import { default as ImageMessage, ImageMessageAsset, ImageMessageAssetState, ImageMessageProps } from './ImageMessage';
+export { getImageMessageLabel, getPhotoAssetMessage } from './ImageMessage.utils';
+export type { ImageMessageAsset, ImageMessageAssetState, ImageMessageProps };
+export default ImageMessage;

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

@@ -0,0 +1,6 @@
+import { getImageMessageLabel as e, getPhotoAssetMessage as t } from "./ImageMessage.utils.mjs";
+import n from "./ImageMessage.mjs";
+//#region shared/components/ChatKit/ImageMessage/index.ts
+var r = n;
+//#endregion
+export { r as default, e as getImageMessageLabel, t as getPhotoAssetMessage };

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

@@ -1,9 +1,10 @@
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 import { InlineCSS } from '@dotss/ui/typings/component';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export interface InputBarProps extends ComponentPropsWithRef<'textarea'>, InlineCSS {
     wrapperProps?: FlexboxProps;
+    startAdornment?: ReactNode;
     onSend?: () => void;
 }
-declare function InputBar({ wrapperProps, inlineCSS, onSend, value, ref, ...props }: InputBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function InputBar({ wrapperProps, startAdornment, inlineCSS, onSend, value, ref, ...props }: InputBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default InputBar;

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

@@ -4,19 +4,19 @@ import o from "@dotss/ui/core/useTheme";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region shared/components/ChatKit/InputBar/InputBar.tsx
 var l = 24;
-function u({ wrapperProps: u, inlineCSS: d, onSend: f, value: p, ref: m, ...h }) {
-	let { palette: { background: g, grey: _ }, spacing: v } = o(), [y, b] = r(l), x = n(null), S = n(null);
-	t(m, () => S.current);
-	let C = () => {
-		!p || h.disabled || f?.();
+function u({ wrapperProps: u, startAdornment: d, inlineCSS: f, onSend: p, value: m, ref: h, ...g }) {
+	let { palette: { background: _, grey: v }, spacing: y } = o(), [b, x] = r(l), S = n(null), C = n(null);
+	t(h, () => C.current);
+	let w = () => {
+		!m || g.disabled || p?.();
 	};
 	return e(() => {
-		if (x.current) {
-			x.current.style.height = `${l}px`;
-			let e = x.current.scrollHeight;
-			b(Math.min(e, l * 3));
+		if (S.current) {
+			S.current.style.height = `${l}px`;
+			let e = S.current.scrollHeight;
+			x(Math.min(e, l * 3));
 		}
-	}, [p]), /* @__PURE__ */ s(i, {
+	}, [m]), /* @__PURE__ */ c(i, {
 		pt: 2,
 		pb: 2,
 		pl: 4,
@@ -25,11 +25,11 @@ function u({ wrapperProps: u, inlineCSS: d, onSend: f, value: p, ref: m, ...h })
 		alignItems: "center",
 		...u,
 		inlineCSS: {
-			borderTop: `1px solid ${_[10]}`,
-			backgroundColor: _.white,
+			borderTop: `1px solid ${v[10]}`,
+			backgroundColor: v.white,
 			...u?.inlineCSS
 		},
-		children: /* @__PURE__ */ c(i, {
+		children: [d, /* @__PURE__ */ c(i, {
 			alignItems: "center",
 			pt: 2,
 			pb: 2,
@@ -38,41 +38,41 @@ function u({ wrapperProps: u, inlineCSS: d, onSend: f, value: p, ref: m, ...h })
 			inlineCSS: {
 				position: "relative",
 				maxWidth: "100%",
-				paddingRight: v.content(12),
-				border: `1px solid ${_[10]}`,
+				paddingRight: y.content(12),
+				border: `1px solid ${v[10]}`,
 				borderRadius: 20,
-				backgroundColor: g.primary
+				backgroundColor: _.primary
 			},
 			children: [
 				/* @__PURE__ */ s(i, {
-					ref: x,
+					ref: S,
 					tag: "textarea",
-					value: p,
-					maxLength: h.maxLength,
+					value: m,
+					maxLength: g.maxLength,
 					readOnly: !0,
 					"aria-hidden": !0,
 					inlineCSS: {
-						width: `calc(100% - ${v.content(16)}px)`,
+						width: `calc(100% - ${y.content(16)}px)`,
 						minHeight: l,
 						maxHeight: l,
 						lineHeight: `${l}px`,
 						border: "none",
 						outline: "none",
 						position: "absolute",
-						top: v.content(2),
-						left: v.content(4),
+						top: y.content(2),
+						left: y.content(4),
 						visibility: "hidden"
 					}
 				}),
 				/* @__PURE__ */ s(i, {
-					ref: S,
+					ref: C,
 					tag: "textarea",
 					flexGrow: 1,
-					value: p,
+					value: m,
 					"aria-label": "메시지 입력",
-					...h,
+					...g,
 					inlineCSS: {
-						height: y,
+						height: b,
 						lineHeight: `${l}px`,
 						border: "none",
 						outline: "none",
@@ -80,11 +80,11 @@ function u({ wrapperProps: u, inlineCSS: d, onSend: f, value: p, ref: m, ...h })
 						resize: "none",
 						scrollbarWidth: "none",
 						"&::-webkit-scrollbar": { display: "none" },
-						...d
+						...f
 					}
 				}),
 				/* @__PURE__ */ s("div", {
-					onClick: C,
+					onClick: w,
 					style: {
 						position: "absolute",
 						right: 0,
@@ -93,13 +93,13 @@ function u({ wrapperProps: u, inlineCSS: d, onSend: f, value: p, ref: m, ...h })
 					children: /* @__PURE__ */ s(a, {
 						name: "ArrowUpwardLine",
 						variant: "filled",
-						disabled: !p,
+						disabled: !m,
 						"aria-label": "전송",
 						inlineCSS: { pointerEvents: "none" }
 					})
 				})
 			]
-		})
+		})]
 	});
 }
 //#endregion

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/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 };

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

@@ -8,7 +8,7 @@ export { default as Image } from './Image';
 export { default as Calendar } from './Calendar';
 export { default as Masonry } from './Masonry';
 export { default as LoadingAnnouncer } from './LoadingAnnouncer';
-export { Message, SystemMessage, BotMessage, InputBar, Seperator, UnreadMessagePill } from './ChatKit';
+export { Message, ImageMessage, SystemMessage, BotMessage, InputBar, Seperator, UnreadMessagePill } from './ChatKit';
 export { default as TextField } from './TextField';
 export * from './Scheduler';
 export * from './MediaDialog';

package/dist/shared/components/index.mjs

@@ -24,13 +24,15 @@ import S from "./Calendar/index.mjs";
 import C from "./ChatKit/Message/Message.fallback.mjs";
 import { getMessageLabel as w, markMessageGroupBoundaries as T } from "./ChatKit/Message/Message.utils.mjs";
 import E from "./ChatKit/Message/index.mjs";
-import D from "./ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
-import { getSystemMessageLabel as O } from "./ChatKit/SystemMessage/SystemMessage.utils.mjs";
-import k from "./ChatKit/SystemMessage/index.mjs";
-import { getBotMessageLabel as A, getCtaButtonText as j } from "./ChatKit/BotMessage/BotMessage.utils.mjs";
-import M from "./ChatKit/BotMessage/index.mjs";
-import N from "./ChatKit/InputBar/InputBar.fallback.mjs";
-import P from "./ChatKit/InputBar/index.mjs";
-import F from "./ChatKit/Seperator/index.mjs";
-import I from "./ChatKit/UnreadMessagePill/index.mjs";
-export { M as BotMessage, S as Calendar, f as Carousel, d as CarouselSlide, D as DirectTradeRiskInfoBottomSheet, t as Image, e as ImageError, P as InputBar, N as InputBarFallback, u as LoadingAnnouncer, r as Masonry, n as MasonryBlock, m as MediaBlock, b as MediaDialog, _ as MediaDialogContent, v as MediaDialogFooter, y as MediaDialogToolbar, E as Message, C as MessageFallback, l as Roller, c as RollerBlock, o as ScheduleBlock, i as ScheduleEvent, s as Scheduler, F as Seperator, h as Swiper, p as SwiperBlock, k as SystemMessage, g as TextField, x as TimePicker, I as UnreadMessagePill, a as getAvailableDateRange, A as getBotMessageLabel, j as getCtaButtonText, w as getMessageLabel, O as getSystemMessageLabel, T as markMessageGroupBoundaries };
+import { getImageMessageLabel as D, getPhotoAssetMessage as O } from "./ChatKit/ImageMessage/ImageMessage.utils.mjs";
+import k from "./ChatKit/ImageMessage/index.mjs";
+import A from "./ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
+import { getSystemMessageLabel as j } from "./ChatKit/SystemMessage/SystemMessage.utils.mjs";
+import M from "./ChatKit/SystemMessage/index.mjs";
+import { getBotMessageLabel as N, getCtaButtonText as P } from "./ChatKit/BotMessage/BotMessage.utils.mjs";
+import F from "./ChatKit/BotMessage/index.mjs";
+import I from "./ChatKit/InputBar/InputBar.fallback.mjs";
+import L from "./ChatKit/InputBar/index.mjs";
+import R from "./ChatKit/Seperator/index.mjs";
+import z from "./ChatKit/UnreadMessagePill/index.mjs";
+export { F as BotMessage, S as Calendar, f as Carousel, d as CarouselSlide, A as DirectTradeRiskInfoBottomSheet, t as Image, e as ImageError, k as ImageMessage, L as InputBar, I as InputBarFallback, u as LoadingAnnouncer, r as Masonry, n as MasonryBlock, m as MediaBlock, b as MediaDialog, _ as MediaDialogContent, v as MediaDialogFooter, y as MediaDialogToolbar, E as Message, C as MessageFallback, l as Roller, c as RollerBlock, o as ScheduleBlock, i as ScheduleEvent, s as Scheduler, R as Seperator, h as Swiper, p as SwiperBlock, M as SystemMessage, g as TextField, x as TimePicker, z as UnreadMessagePill, a as getAvailableDateRange, N as getBotMessageLabel, P as getCtaButtonText, D as getImageMessageLabel, w as getMessageLabel, O as getPhotoAssetMessage, j as getSystemMessageLabel, T as markMessageGroupBoundaries };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",