4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tbe0,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import "@/components/ui/kakao/styles/kakao.css"; interface ChatRoomProps extends React.HTMLAttributes { /** Usually a ``. */ header?: React.ReactNode; /** Usually a ``. */ input?: React.ReactNode; /** Override the chat background (color or image), e.g. a custom theme. */ background?: string; /** * Keep the newest message in view: open at the bottom and follow new * messages, unless the reader has scrolled up. Defaults to `true`. */ stickToBottom?: boolean; } /** Within this many pixels of the bottom, new content keeps the log pinned. */ const STICK_THRESHOLD = 48; /** * Chat room shell: header, scrollable message area on the chat background, * and the input bar. Fills its parent's height. * * As in KakaoTalk on iOS 26, the header floats over the messages (they scroll * under its glass pills) and the input pill sits on the chat background. */ const ChatRoom = React.forwardRef( ({ className, header, input, background, stickToBottom = true, children, style, ...props }, ref) => { const logRef = React.useRef(null); const contentRef = React.useRef(null); const pinned = React.useRef(true); React.useEffect(() => { const log = logRef.current; const content = contentRef.current; if (!stickToBottom || !log || !content) return; const toBottom = () => { if (pinned.current) log.scrollTop = log.scrollHeight; }; const onScroll = () => { pinned.current = log.scrollHeight - log.scrollTop - log.clientHeight < STICK_THRESHOLD; }; toBottom(); // Follows new messages and late-loading images alike. const observer = new ResizeObserver(toBottom); observer.observe(content); log.addEventListener("scroll", onScroll, { passive: true }); return () => { observer.disconnect(); log.removeEventListener("scroll", onScroll); }; }, [stickToBottom]); return (

{header &&

{header}

}

{children}

{input &&

{input}

}

); } ); ChatRoom.displayName = "ChatRoom"; export { ChatRoom, type ChatRoomProps }; 51:T28b1,/* * Katok UI Design Tokens (unofficial) * * Reconstructed for KakaoTalk iOS 26.x. No official KakaoTalk design system is * public, so every value carries an evidence grade — see DESIGN.md: * O = official (developers.kakao.com) T = official theme-creation spec * C = clone approximation D = measured on device (iOS @3x) * S = measured from Kakao's own published imagery (App Store screenshots, * Kakao Business guide) M = pending on-device measurement * * Token names follow the KakaoTalk theme slots where one exists * (BackgroundStyle-ChatRoom, MessageCellStyle-Send/Receive, InputBarStyle-Chat, * MainViewStyle-Primary), so the library stays theme-compatible. */ @theme inline { /* === Brand === */ --color-kk-yellow: var(--kk-yellow); --color-kk-yellow-pressed: var(--kk-yellow-pressed); --color-kk-on-yellow: var(--kk-on-yellow); --color-kk-brown: var(--kk-brown); /* === Neutral === */ --color-kk-gray-50: var(--kk-gray-50); --color-kk-gray-100: var(--kk-gray-100); --color-kk-gray-200: var(--kk-gray-200); --color-kk-gray-300: var(--kk-gray-300); --color-kk-gray-400: var(--kk-gray-400); --color-kk-gray-500: var(--kk-gray-500); --color-kk-gray-600: var(--kk-gray-600); --color-kk-gray-700: var(--kk-gray-700); --color-kk-gray-800: var(--kk-gray-800); --color-kk-gray-900: var(--kk-gray-900); --color-kk-always-white: var(--kk-always-white); --color-kk-always-black: var(--kk-always-black); /* === Text === */ --color-kk-text-primary: var(--kk-text-primary); --color-kk-text-secondary: var(--kk-text-secondary); --color-kk-text-tertiary: var(--kk-text-tertiary); --color-kk-text-link: var(--kk-text-link); --color-kk-critical: var(--kk-critical); /* === Chat room (BackgroundStyle-ChatRoom) === */ --color-kk-chat-bg: var(--kk-chat-bg); --color-kk-chat-header-bg: var(--kk-chat-header-bg); --color-kk-chat-header-fg: var(--kk-chat-header-fg); --color-kk-chat-meta: var(--kk-chat-meta); --color-kk-chat-sender: var(--kk-chat-sender); --color-kk-chat-pill-bg: var(--kk-chat-pill-bg); --color-kk-chat-pill-fg: var(--kk-chat-pill-fg); --color-kk-glass-bg: var(--kk-glass-bg); --color-kk-glass-border: var(--kk-glass-border); /* === Bubbles (MessageCellStyle-Send / -Receive) === */ --color-kk-bubble-outgoing: var(--kk-bubble-outgoing); --color-kk-bubble-outgoing-fg: var(--kk-bubble-outgoing-fg); --color-kk-bubble-incoming: var(--kk-bubble-incoming); --color-kk-bubble-incoming-fg: var(--kk-bubble-incoming-fg); --color-kk-unread: var(--kk-unread); /* === Input bar (InputBarStyle-Chat) === */ --color-kk-input-bar-bg: var(--kk-input-bar-bg); --color-kk-input-icon: var(--kk-input-icon); --color-kk-input-placeholder: var(--kk-input-placeholder); --color-kk-input-border: var(--kk-input-border); --color-kk-input-button-bg: var(--kk-input-button-bg); --color-kk-input-emoji-bg: var(--kk-input-emoji-bg); --color-kk-send-bg: var(--kk-send-bg); --color-kk-send-fg: var(--kk-send-fg); /* === Lists (MainViewStyle-Primary) === */ --color-kk-list-bg: var(--kk-list-bg); --color-kk-list-title: var(--kk-list-title); --color-kk-list-description: var(--kk-list-description); --color-kk-list-meta: var(--kk-list-meta); --color-kk-list-pressed: var(--kk-list-pressed); --color-kk-badge: var(--kk-badge); --color-kk-badge-fg: var(--kk-badge-fg); --color-kk-divider: var(--kk-divider); /* === Biz Message === */ --color-kk-biz-band: var(--kk-biz-band); --color-kk-biz-band-fg: var(--kk-biz-band-fg); --color-kk-biz-surface: var(--kk-biz-surface); --color-kk-biz-button-bg: var(--kk-biz-button-bg); --color-kk-biz-button-fg: var(--kk-biz-button-fg); --color-kk-biz-emphasis: var(--kk-biz-emphasis); --color-kk-biz-muted: var(--kk-biz-muted); --color-kk-biz-coupon-bg: var(--kk-biz-coupon-bg); --color-kk-biz-coupon-accent: var(--kk-biz-coupon-accent); --color-kk-biz-coupon-border: var(--kk-biz-coupon-border); --color-kk-biz-opt-out: var(--kk-biz-opt-out); --color-kk-biz-badge: var(--kk-biz-badge); --color-kk-biz-badge-fg: var(--kk-biz-badge-fg); /* === Avatar placeholder === */ --color-kk-avatar-bg: var(--kk-avatar-bg); --color-kk-avatar-fg: var(--kk-avatar-fg); /* === Typography === */ --font-kk: var(--kk-font-family); } :root { /* Brand */ --kk-yellow: #fee500; /* O */ --kk-yellow-pressed: #f2d900; /* M */ --kk-on-yellow: rgba(0, 0, 0, 0.85); /* O — login label #000 85% */ --kk-brown: #3c1e1e; /* C */ /* Neutral */ --kk-gray-50: #f8f8f8; --kk-gray-100: #f2f2f2; --kk-gray-200: #e5e5e5; --kk-gray-300: #d4d4d4; --kk-gray-400: #b2b2b2; --kk-gray-500: #8e8e8e; --kk-gray-600: #6e6e6e; --kk-gray-700: #4c4c4c; --kk-gray-800: #2c2c2c; --kk-gray-900: #191919; /* T — Apeach -ios-button-text-color */ --kk-always-white: #ffffff; --kk-always-black: #000000; /* Text */ --kk-text-primary: #191919; /* T */ --kk-text-secondary: #6e6e6e; /* M */ --kk-text-tertiary: #a0a0a0; /* M */ --kk-text-link: #2b6bd6; /* M */ --kk-critical: #ff4b3e; /* M */ /* Chat room */ --kk-chat-bg: #abc1d1; /* S — App Store + Biz guide both render #abc1d1 */ --kk-chat-header-bg: transparent; /* S — iOS 26: header floats, only the pills are glass */ --kk-chat-header-fg: #191919; /* S */ --kk-chat-meta: rgba(0, 0, 0, 0.5); /* S — #535c63 on #abc1d1 */ --kk-chat-sender: rgba(0, 0, 0, 0.88); /* S — #1a1d1f on #abc1d1 */ --kk-chat-pill-bg: rgba(0, 0, 0, 0.15); /* C */ --kk-chat-pill-fg: #ffffff; /* C */ --kk-glass-bg: rgba(255, 255, 255, 0.22); /* S — #bdcedb over #abc1d1 */ --kk-glass-border: rgba(255, 255, 255, 0.55); /* S */ /* Bubbles */ --kk-bubble-outgoing: #fee500; /* O/C */ --kk-bubble-outgoing-fg: #191919; --kk-bubble-incoming: #ffffff; /* S */ --kk-bubble-incoming-fg: #191919; --kk-unread: #fee500; /* D (dark) — theme slot -ios-unread-text-color */ /* Input bar */ --kk-input-bar-bg: #d8e7ef; /* S — floating pill */ --kk-input-icon: #191919; /* S */ --kk-input-placeholder: #8c9599; /* S */ --kk-input-border: rgba(255, 255, 255, 0.5); /* S */ --kk-input-button-bg: #ffffff; /* S — + and # circles */ --kk-input-emoji-bg: rgba(0, 0, 0, 0.1); /* S — #c1ced5 on the pill */ --kk-send-bg: #fee500; --kk-send-fg: #191919; /* Lists */ --kk-list-bg: #ffffff; --kk-list-title: #191919; --kk-list-description: #767676; /* S */ --kk-list-meta: #767676; /* S */ --kk-list-pressed: rgba(0, 0, 0, 0.05); /* T */ --kk-badge: #f4551e; /* S */ --kk-badge-fg: #ffffff; --kk-divider: rgba(0, 0, 0, 0.09); /* T */ /* Biz Message */ --kk-biz-band: #fee500; /* S — "알림톡 도착" band */ --kk-biz-band-fg: #191919; --kk-biz-surface: #ffffff; --kk-biz-button-bg: #f5f5f5; /* S */ --kk-biz-button-fg: #191919; --kk-biz-emphasis: #191919; --kk-biz-muted: #8a8a8a; /* S */ --kk-biz-coupon-bg: #e6f1fb; /* S — download panel */ --kk-biz-coupon-accent: #0a73dc; /* S — download arrow + "COUPON" */ --kk-biz-coupon-border: #ebebeb; /* S */ --kk-biz-opt-out: rgba(0, 0, 0, 0.6); /* S — #444d54 on #abc1d1 */ --kk-biz-badge: #333333; /* S — round "kakao" mark on the corner */ --kk-biz-badge-fg: #ffffff; /* Avatar */ --kk-avatar-bg: #a9c3e6; /* C — default profile silhouette bg */ --kk-avatar-fg: #ffffff; /* Typography — iOS system stack (Apple SD Gothic Neo for Hangul) */ --kk-font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; /* Sizing */ --kk-text-message: 16px; /* D — default font size setting */ --kk-leading-message: 21px; /* D — 1-line bubble is 35px tall */ --kk-text-meta: 10px; /* C */ --kk-text-sender: 12px; --kk-text-pill: 11px; /* C */ --kk-radius-bubble: 13px; /* D */ --kk-radius-avatar: 40%; /* C — squircle */ --kk-radius-biz: 14px; --kk-avatar-chat: 34px; /* D */ --kk-avatar-list: 48px; /* C */ --kk-header-height: 60px; /* D — 44px glass pills + 8px above/below */ --kk-msg-max-width: min(70%, 264px); /* C */ --kk-biz-width: 268px; /* S — Biz guide renders at 1.9x: 510px card */ --kk-gap-grouped: 4px; /* C */ --kk-gap-meta: 4px; /* D */ --kk-gap-group: 12px; } .dark, [data-theme="dark"] { /* Brand stays yellow in dark mode */ --kk-yellow-pressed: #e6cf00; --kk-gray-50: #1c1c1e; --kk-gray-100: #232325; --kk-gray-200: #2c2c2e; --kk-gray-300: #3a3a3c; --kk-gray-400: #545456; --kk-gray-500: #7c7c80; --kk-gray-600: #a1a1a6; --kk-gray-700: #c7c7cc; --kk-gray-800: #e5e5ea; --kk-gray-900: #f2f2f7; --kk-text-primary: #f2f2f2; /* D */ --kk-text-secondary: #a1a1a6; --kk-text-tertiary: #7c7c80; --kk-text-link: #6aa5ff; --kk-critical: #ff6b5e; --kk-chat-bg: #080808; /* D */ --kk-chat-header-bg: transparent; --kk-chat-header-fg: #ededed; /* D */ --kk-chat-meta: #9c9c9c; /* D */ --kk-chat-sender: #cfcfcf; /* D */ --kk-chat-pill-bg: rgba(255, 255, 255, 0.12); --kk-chat-pill-fg: rgba(255, 255, 255, 0.85); --kk-glass-bg: rgba(255, 255, 255, 0.17); /* D — #333333 over #080808 */ --kk-glass-border: rgba(255, 255, 255, 0.2); /* D */ --kk-bubble-outgoing: #fee500; --kk-bubble-outgoing-fg: #191919; --kk-bubble-incoming: #282828; /* D */ --kk-bubble-incoming-fg: #f2f2f2; /* D */ --kk-unread: #fee500; /* D */ --kk-input-bar-bg: #141414; /* D */ --kk-input-icon: #f2f2f2; /* D */ --kk-input-placeholder: #6d6d6d; /* D */ --kk-input-border: rgba(255, 255, 255, 0.14); /* D — #353535 rim */ --kk-input-button-bg: #2e2e2e; /* D */ --kk-input-emoji-bg: rgba(255, 255, 255, 0.11); /* D — #2f2f2f */ --kk-list-bg: #1c1c1e; --kk-list-title: #ededed; --kk-list-description: #8e8e93; --kk-list-meta: #7c7c80; --kk-list-pressed: rgba(255, 255, 255, 0.06); --kk-divider: rgba(255, 255, 255, 0.1); --kk-biz-surface: #2c2c2e; --kk-biz-button-bg: #3a3a3c; --kk-biz-button-fg: #ededed; --kk-biz-emphasis: #ededed; --kk-biz-muted: #a1a1a6; --kk-biz-coupon-bg: #1e2a36; /* C */ --kk-biz-coupon-accent: #4ea1f5; /* C */ --kk-biz-coupon-border: rgba(255, 255, 255, 0.12); --kk-biz-opt-out: #9c9c9c; --kk-biz-badge: #4a4a4a; /* C */ --kk-avatar-bg: #4a5b70; } .font-kk { font-family: var(--kk-font-family); -webkit-font-smoothing: antialiased; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@katok-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ui/kakao/chat-room.tsx","content":"$50","type":"registry:component","target":"components/ui/kakao/chat-room.tsx"},{"path":"components/ui/kakao/styles/kakao.css","content":"$51","type":"registry:file","target":"components/ui/kakao/styles/kakao.css"}],"className":"h-[70svh] min-h-80"}]]}]