Unofficial KakaoTalk (카카오톡) chat UI for React: chat bubbles, chat list, message input, and Kakao AlimTalk (알림톡) / Brand Message previews with API-shaped props. Tailwind CSS v4, light and dark.
AlimTalk (알림톡) preview mirroring the API fields — messageType BA/EX/AD/MI, emphasizeType NONE/TEXT/IMAGE/ITEM_LIST, buttons, quick replies, length limits.
Kakao Biz Message button using the API button codes (WL, AL, DS, BK, MD, BC, BT, AC, BF, TN, P1–P3).
Brand Message (브랜드메시지, FriendTalk successor) preview — TEXT, IMAGE, WIDE, CAROUSEL_FEED, coupons, (광고) prefix and opt-out footer.
KakaoTalk message bubble — yellow outgoing / white incoming, first-bubble tail, unread count "1", timestamp, edited flag.
Chat room header (back + unread total, title, member count, search, menu) and large-title tab header.
Chats tab row: squircle or group composite avatar, member count, 2-line preview, time, red unread badge, mute and pin.
Layout shell: header, scrollable message log on the chat background, input bar.
Translucent date pill between message days, with a KakaoTalk-format date helper.
Consecutive messages from one sender: squircle avatar + name on the first bubble, tail on the first, time on the last.
Compose bar: attach, auto-growing field, emoji, # search that turns into the yellow send button. IME-safe Enter.
KakaoTalk squircle profile picture with default silhouette and 2–4 member group-chat composites.
Centered notice for joins, leaves, invites and deleted messages, with optional action.