@dotss/tictoccroc 0.8.1 → 0.9.1

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,145 @@
+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), d = !!j, _ = o === "NORMAL" ? `${n + 1}번째 사진` : `${n + 1}번째 사진, ${u}`;
+					return /* @__PURE__ */ p(s, {
+						tag: d ? "button" : "div",
+						type: d ? "button" : void 0,
+						role: d ? void 0 : "img",
+						flexDirection: "column",
+						justifyContent: "center",
+						alignItems: "center",
+						gap: 1,
+						onClick: d ? () => j(n) : void 0,
+						"aria-label": d && o === "NORMAL" ? `${_} 보기` : _,
+						inlineCSS: {
+							gridColumn: i ? "1 / -1" : void 0,
+							padding: 0,
+							border: "none",
+							background: z[20],
+							cursor: d ? "pointer" : "default"
+						},
+						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