@banbox/chat 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/chat/ChatImagePreviewModal.tsx

@@ -83,7 +83,7 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
       <AnimatePresence>
         {isOpen && total > 0 && (
           <motion.div
-            className="fixed inset-0 z-[10010] flex items-center justify-center"
+            className="fixed inset-0 z-10010 flex items-center justify-center"
             initial={{ opacity: 0, backgroundColor: "rgba(0,0,0,0)" }}
             animate={{ opacity: 1, backgroundColor: "rgba(0,0,0,0.55)" }}
             exit={{ opacity: 0, backgroundColor: "rgba(0,0,0,0)" }}
@@ -129,7 +129,7 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
                       type="button"
                       onClick={goPrev}
                       disabled={!hasPrev}
-                      className={`absolute left-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tr-[3px] rounded-br-[3px] p-[7px] backdrop-blur-[2px] shadow-[3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasPrev ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`}
+                      className={`absolute left-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tr-[3px] rounded-br-[3px] p-[7px] backdrop-blur-[2px] shadow-[3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-all duration-200 ${hasPrev ? "cursor-pointer opacity-100 hover:bg-white hover:shadow-[3px_0px_10px_0px_rgba(0,0,0,0.18)]" : "cursor-default opacity-30"}`}
                       style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
                       aria-label="Previous image"
                     >
@@ -149,7 +149,7 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
                       type="button"
                       onClick={goNext}
                       disabled={!hasNext}
-                      className={`absolute right-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tl-[3px] rounded-bl-[3px] p-[7px] backdrop-blur-[2px] shadow-[-3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasNext ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`}
+                      className={`absolute right-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tl-[3px] rounded-bl-[3px] p-[7px] backdrop-blur-[2px] shadow-[-3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-all duration-200 ${hasNext ? "cursor-pointer opacity-100 hover:bg-white hover:shadow-[-3px_0px_10px_0px_rgba(0,0,0,0.18)]" : "cursor-default opacity-30"}`}
                       style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
                       aria-label="Next image"
                     >

package/src/chat/SinglePopup.tsx

@@ -22,9 +22,10 @@ import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
 import type { Message, MessageRef, Reference, Thread } from "../types";
 import type { ChatTheme } from "./InboxPopup";
 
-
-
-function coalesceThreadId(reference: Reference | undefined, threads: Thread[]): string {
+function coalesceThreadId(
+  reference: Reference | undefined,
+  threads: Thread[],
+): string {
   if (!reference?.id) return threads[0]?.id ?? "";
   const refId = reference.id;
   // Priority: exact thread.id match → orderId match → inquiryId match → first thread
@@ -51,16 +52,34 @@ function toRef(m: Message): MessageRef {
 
 /** Maps the first letter of a name to a deterministic background colour. */
 const avatarBgByInitial: Record<string, string> = {
-  a: "#FFE4E4", b: "#E4F0FF", c: "#E4FFE9", d: "#FFF4E4", e: "#F4E4FF",
-  f: "#FFE4F4", g: "#E4FFFF", h: "#FFFFE4", i: "#E4E4FF", j: "#FFE9E4",
-  k: "#E4FFE4", l: "#FFE4EA", m: "#E8E4FF", n: "#E4F8FF", o: "#FFF0E4",
-  p: "#F0FFE4", q: "#FFE4F8", r: "#E4FFEC", s: "#FFEEE4", t: "#E4EAFF",
-  u: "#F8FFE4", v: "#FFE4EE", w: "#E4FFFA", x: "#FFF8E4", y: "#EAE4FF",
+  a: "#FFE4E4",
+  b: "#E4F0FF",
+  c: "#E4FFE9",
+  d: "#FFF4E4",
+  e: "#F4E4FF",
+  f: "#FFE4F4",
+  g: "#E4FFFF",
+  h: "#FFFFE4",
+  i: "#E4E4FF",
+  j: "#FFE9E4",
+  k: "#E4FFE4",
+  l: "#FFE4EA",
+  m: "#E8E4FF",
+  n: "#E4F8FF",
+  o: "#FFF0E4",
+  p: "#F0FFE4",
+  q: "#FFE4F8",
+  r: "#E4FFEC",
+  s: "#FFEEE4",
+  t: "#E4EAFF",
+  u: "#F8FFE4",
+  v: "#FFE4EE",
+  w: "#E4FFFA",
+  x: "#FFF8E4",
+  y: "#EAE4FF",
   z: "#E4FFF0",
 };
 
-
-
 export type SinglePopupProps = {
   adapter: ChatAdapter;
   uiCallbacks?: ChatUICallbacks;
@@ -75,12 +94,19 @@ export type SinglePopupProps = {
 /* ══════════════════════════════════════════════════
    Component
 ══════════════════════════════════════════════════ */
-const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme, footerActions }) => {
+const SinglePopup: React.FC<SinglePopupProps> = ({
+  adapter,
+  uiCallbacks,
+  theme,
+  footerActions,
+}) => {
   const { close, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
 
   // ── Threads — subscribed so real-API updates (new msg, pin, delete) are reflected
-  const [threads, setThreads] = React.useState<Thread[]>(() => adapter.threads.list(reference));
+  const [threads, setThreads] = React.useState<Thread[]>(() =>
+    adapter.threads.list(reference),
+  );
   React.useEffect(() => {
     // Refresh once on mount (covers any gap between render and subscribe)
     setThreads(adapter.threads.list(reference));
@@ -97,7 +123,9 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
   );
   const [activeId] = React.useState<string>(initialThreadId);
 
-  const activeThread: Thread | undefined = threads.find((t) => t.id === activeId);
+  const activeThread: Thread | undefined = threads.find(
+    (t) => t.id === activeId,
+  );
   const isVerified = activeThread?.badge === true;
 
   const meta = (reference?.meta ?? {}) as {
@@ -114,13 +142,11 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
   const avatarSrc: string | undefined =
     meta.avatarSrc ?? activeThread?.avatarSrc;
 
-  const initial = (
+  const initial =
     meta.initial ??
     activeThread?.avatarText ??
-    (activeThread?.title ?? meta.title ?? "?").charAt(0).toUpperCase()
-  );
-  const avatarBg =
-    avatarBgByInitial[initial.toLowerCase()] ?? "#E4F0FF";
+    (activeThread?.title ?? meta.title ?? "?").charAt(0).toUpperCase();
+  const avatarBg = avatarBgByInitial[initial.toLowerCase()] ?? "#E4F0FF";
 
   const title = meta.title ?? activeThread?.title ?? "Unknown";
   const online = meta.online ?? activeThread?.online ?? false;
@@ -130,7 +156,9 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
     activeId ? adapter.messages.list(activeId) : [],
   );
   const [scrollKey, setScrollKey] = React.useState<number>(Date.now());
-  const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(undefined);
+  const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(
+    undefined,
+  );
   const [showDelete, setShowDelete] = React.useState(false);
 
   React.useEffect(() => {
@@ -149,7 +177,10 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
   }, [activeId, adapter]);
 
   const handleConfirmDelete = React.useCallback(() => {
-    if (!activeId) { setShowDelete(false); return; }
+    if (!activeId) {
+      setShowDelete(false);
+      return;
+    }
     adapter.threads.delete(activeId);
     uiCallbacks?.showToast?.({
       type: "success",
@@ -253,29 +284,45 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
                     id={m.id}
                     mine={mine}
                     time={m.time ?? ""}
-                    authorInitial={typeof m.author === "string" ? m.author : "U"}
+                    authorInitial={
+                      typeof m.author === "string" ? m.author : "U"
+                    }
                     text={m.text ?? m.content}
-                    businessCard={m.businessCard as Parameters<typeof ChatMessageItem>[0]["businessCard"]}
-                    addressCard={m.addressCard as Parameters<typeof ChatMessageItem>[0]["addressCard"]}
+                    businessCard={
+                      m.businessCard as Parameters<
+                        typeof ChatMessageItem
+                      >[0]["businessCard"]
+                    }
+                    addressCard={
+                      m.addressCard as Parameters<
+                        typeof ChatMessageItem
+                      >[0]["addressCard"]
+                    }
                     images={m.images}
                     files={m.files}
                     audio={m.audio}
                     replyTo={m.replyTo}
                     initialSrc={m.avatarSrc}
                     showStatus={isLast}
-                    status={activeThread?.status?.kind === "seen" ? "Seen" : "Delivered"}
+                    status={
+                      activeThread?.status?.kind === "seen"
+                        ? "Seen"
+                        : "Delivered"
+                    }
                     onReply={() => setReplyTo(toRef(m))}
                   />
                 );
               })}
-
-              {/* Typing indicator */}
-              <div className="flex items-center justify-start">
-                <TypingIndicator />
-              </div>
             </ChatScroll>
           </div>
 
+          {/* Typing indicator — sticky above footer */}
+          <div className="shrink-0">
+            <div className="flex items-center justify-start py-2 px-[16px]">
+              <TypingIndicator />
+            </div>
+          </div>
+
           {/* Footer */}
           <div className="shrink-0">
             <ChatFooter

package/src/ui/AttachmentPreviewStrip.tsx

@@ -24,7 +24,7 @@ export const FilePreviewChip: React.FC<{
   ext: string;
   onRemove: () => void;
 }> = ({ name, sizeMB, ext, onRemove }) => (
-  <div className="mr-2 inline-flex items-center gap-3 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]">
+  <div className="mr-2 inline-flex items-center gap-2 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]">
     <div className="flex min-w-0 items-center gap-2">
       <div className="min-w-0">
         <div className="flex items-center gap-1">
@@ -38,25 +38,30 @@ export const FilePreviewChip: React.FC<{
         </div>
       </div>
     </div>
-    <button
-      type="button"
-      onClick={onRemove}
-      className="grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5"
-      title="Remove"
-      aria-label="Remove file"
-    >
-      <ChatXIcon className="h-[18px] w-[18px]" />
-    </button>
+    <span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="grid h-[24px] w-[24px] cursor-pointer place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5"
+        title="Remove"
+        aria-label="Remove file"
+      >
+        <ChatXIcon className="h-[18px] w-[18px]" />
+      </button>
+    </span>
   </div>
 );
 
-const ImageThumb: React.FC<{ url: string; onRemove: () => void }> = ({ url, onRemove }) => (
+const ImageThumb: React.FC<{ url: string; onRemove: () => void }> = ({
+  url,
+  onRemove,
+}) => (
   <div className="relative mr-2 inline-block h-[65px] w-[65px] rounded-sm border border-[#e1e1e1] bg-[#F7F7F7]">
     <img src={url} alt="" className="h-full w-full object-cover rounded-sm" />
     <button
       type="button"
       onClick={onRemove}
-      className="absolute left-1/2 top-1/2 z-10 grid h-6 w-6 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-black/30 text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D]"
+      className="absolute left-1/2 top-1/2 z-10 grid h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer place-items-center rounded-full bg-black/30 text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D]"
       aria-label="Remove image"
       title="Remove image"
     >

package/src/ui/ChatComposerBar.tsx

@@ -3,7 +3,12 @@
 
 import clsx from "clsx";
 import React, { useRef, useState } from "react";
-import { ArrowSendAngleIcon, ArrowSendIcon, RecordMicIcon, ChatXIcon } from "../icons";
+import {
+  ArrowSendAngleIcon,
+  ArrowSendIcon,
+  RecordMicIcon,
+  ChatXIcon,
+} from "../icons";
 
 type Props = {
   recording: boolean;
@@ -63,18 +68,18 @@ const ChatComposerBar: React.FC<Props> = ({
     return (
       <div className="flex w-full items-stretch gap-2">
         <div
-          className="w-full rounded-sm p-px transition-[background] duration-200"
+          className="w-full rounded-[6px] p-px transition-[background] duration-200"
           style={{
             background: isActiveBorder ? activeGradient : idleGradient,
           }}
         >
-          <div className="flex min-h-[50px] w-full items-center justify-between rounded-[3px] bg-white">
+          <div className="flex min-h-[50px] w-full items-center justify-between rounded-[5px] bg-white">
             <div className="flex w-full items-center justify-between p-[3px]">
               {!isTyping ? (
                 <button
                   type="button"
                   onClick={startRecording}
-                  className="grid h-[44px] w-[44px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
+                  className="grid h-[44px] w-[44px] cursor-pointer place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
                   title="Record voice"
                   aria-label="Record voice"
                 >
@@ -117,7 +122,9 @@ const ChatComposerBar: React.FC<Props> = ({
               />
             </div>
 
-            {!canSendArrow && <div className="grid h-full w-px place-items-center bg-[#E7E7E7]" />}
+            {!canSendArrow && (
+              <div className="grid h-full w-px place-items-center bg-[#E7E7E7]" />
+            )}
 
             <div className="px-2">
               {isTyping ? (
@@ -127,7 +134,7 @@ const ChatComposerBar: React.FC<Props> = ({
                     type="button"
                     onClick={sendText}
                     className={clsx(
-                      "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]",
+                      "ms-1 grid h-[40px] w-[40px] cursor-pointer place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]",
                     )}
                     title={hasAttachments ? "Send attachments" : "Send"}
                     aria-label="Send"
@@ -144,7 +151,7 @@ const ChatComposerBar: React.FC<Props> = ({
                     disabled={!hasAttachments}
                     className={clsx(
                       "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
-                      hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]",
+                      hasAttachments ? "text-[#ff5301] cursor-pointer" : "text-[#B9C3D4] cursor-not-allowed",
                     )}
                     title={hasAttachments ? "Send attachments" : "Send"}
                     aria-label="Send"
@@ -163,7 +170,10 @@ const ChatComposerBar: React.FC<Props> = ({
   // Recording state UI
   return (
     <div className="flex w-full items-stretch gap-2">
-      <div className="w-full rounded-sm p-px" style={{ background: activeGradient }}>
+      <div
+        className="w-full rounded-sm p-px"
+        style={{ background: activeGradient }}
+      >
         <div className="flex min-h-[50px] w-full items-center justify-between rounded-[3px] bg-white">
           <button
             type="button"
@@ -174,9 +184,7 @@ const ChatComposerBar: React.FC<Props> = ({
             <RecordMicIcon
               className={clsx(
                 "h-6 w-6",
-                seconds % 2 === 0
-                  ? "text-[#929292]"
-                  : "text-[#ff5301]",
+                seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]",
               )}
             />
           </button>
@@ -187,7 +195,7 @@ const ChatComposerBar: React.FC<Props> = ({
             <button
               type="button"
               onClick={() => stopRecording(false)}
-              className="grid h-8 w-8 place-items-center rounded-full text-[#3D3D3D] hover:bg-black/5"
+              className="grid h-8 w-8 cursor-pointer place-items-center rounded-full text-[#3D3D3D] hover:bg-black/5"
               title="Discard"
               aria-label="Discard recording"
             >
@@ -199,7 +207,7 @@ const ChatComposerBar: React.FC<Props> = ({
             <button
               type="button"
               onClick={() => stopRecording(true)}
-              className="grid h-10 w-[40px] place-items-center rounded-full text-[#ff5301]"
+              className="grid h-10 w-[40px] cursor-pointer place-items-center rounded-full text-[#ff5301]"
               title="Send"
               aria-label="Send"
             >

package/src/ui/ChatFooter.tsx

@@ -378,7 +378,7 @@ const ChatFooter: React.FC<Props> = ({
             return (
               <span key={a.key} className="relative inline-flex">
                 <Tooltip text={a.title}>
-                  <button ref={emojiBtnRef} type="button" onClick={() => setShowEmoji((v) => !v)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                  <button ref={emojiBtnRef} type="button" onClick={() => setShowEmoji(true)} className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
                     <span>{a.icon}</span>
                   </button>
                 </Tooltip>
@@ -388,7 +388,7 @@ const ChatFooter: React.FC<Props> = ({
           if (isTranslate) {
             return (
               <Tooltip key={a.key} text={a.title}>
-                <button type="button" onClick={() => setShowTranslate(true)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                <button type="button" onClick={() => setShowTranslate(true)} className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
                   <span>{a.icon}</span>
                 </button>
               </Tooltip>
@@ -398,7 +398,7 @@ const ChatFooter: React.FC<Props> = ({
             return (
               <span key={a.key} className="relative inline-flex">
                 <Tooltip text={a.title}>
-                  <button ref={bizBtnRef} type="button" onClick={() => setShowBiz((v) => !v)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                  <button ref={bizBtnRef} type="button" onClick={() => setShowBiz((v) => !v)} className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
                     <span>{a.icon}</span>
                   </button>
                 </Tooltip>
@@ -409,7 +409,7 @@ const ChatFooter: React.FC<Props> = ({
             return (
               <span key={a.key} className="relative inline-flex">
                 <Tooltip text={a.title}>
-                  <button ref={addrBtnRef} type="button" onClick={() => setShowAddress(true)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                  <button ref={addrBtnRef} type="button" onClick={() => setShowAddress(true)} className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
                     <span>{a.icon}</span>
                   </button>
                 </Tooltip>
@@ -418,7 +418,7 @@ const ChatFooter: React.FC<Props> = ({
           }
           return (
             <Tooltip key={a.key} text={a.title}>
-              <button type="button" onClick={isAttach ? () => fileInputRef.current?.click() : a.onClick} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+              <button type="button" onClick={isAttach ? () => fileInputRef.current?.click() : a.onClick} className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
                 <span>{a.icon}</span>
               </button>
             </Tooltip>

package/src/ui/ChatInquiryBar.tsx

@@ -33,7 +33,7 @@ const ChatInquiryBar: React.FC<Props> = ({ id, onView, className, label, buttonL
       <button
         type="button"
         onClick={onView}
-        className="group relative inline-flex w-fit items-center justify-end text-xs font-medium text-black"
+        className="group relative inline-flex w-fit cursor-pointer items-center justify-end text-xs font-medium text-black"
       >
         <span className="flex items-center transition-opacity duration-300 ease-in-out group-hover:opacity-0">
           <span>{buttonLabel}</span>

package/src/ui/ChatThreadItem.tsx

@@ -63,7 +63,7 @@ const ChatThreadItem: React.FC<Props> = ({
     <button
       onClick={onClick}
       className={clsx(
-        "relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
+        "relative w-full cursor-pointer text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
         active && "bg-[#f8f8f8]",
         className,
       )}

package/src/ui/MessageHoverActions.tsx

@@ -87,7 +87,7 @@ const MessageHoverActions: React.FC<Props> = ({
                     onReply?.();
                   }}
                   className={clsx(
-                    "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
+                    "inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
                     isActive("replay") && "bg-[#636363] text-white",
                   )}
                 >
@@ -118,7 +118,7 @@ const MessageHoverActions: React.FC<Props> = ({
                     onTranslate?.();
                   }}
                   className={clsx(
-                    "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
+                    "inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
                     isActive("translate") && "bg-[#636363]! text-white",
                   )}
                 >

package/src/ui/ReplyCard.tsx

@@ -129,7 +129,7 @@ const ReplyCard: React.FC<Props> = ({ refMsg, onClose, compact, className, jumpO
           <button
             type="button"
             onClick={onClose}
-            className="absolute right-3 top-1/2 -translate-y-1/2 grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D]  hover:text-[#FF5300]"
+            className="absolute right-3 top-1/2 -translate-y-1/2 grid h-8 w-8 cursor-pointer place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D]  hover:text-[#FF5300]"
             title="Remove"
             aria-label="Remove"
           >

package/src/ui/Select.tsx

@@ -37,6 +37,7 @@ const Select: React.FC<Props> = ({ options, value, onChange, placeholder = "Sele
         className={cn(
           "flex w-full items-center justify-between rounded-[4px] border border-[#cacaca] bg-white px-3 text-[13px] text-left",
           disabled && "cursor-not-allowed opacity-50",
+          !disabled && "cursor-pointer",
         )}
         style={{ height: size }}
       >
@@ -54,7 +55,7 @@ const Select: React.FC<Props> = ({ options, value, onChange, placeholder = "Sele
               key={opt.value}
               type="button"
               className={cn(
-                "flex w-full items-center px-3 py-2 text-[13px] text-left hover:bg-black/5",
+                "flex w-full cursor-pointer items-center px-3 py-2 text-[13px] text-left hover:bg-black/5",
                 opt.value === value && "bg-black/5 font-medium",
               )}
               onClick={() => {

package/src/ui/drop-up/BusinessCardDropup.tsx

@@ -171,7 +171,7 @@ const BusinessCardDropup = ({
           type="button"
           onClick={onClose}
           aria-label="Close"
-          className="grid h-8 w-8 place-items-center rounded-full hover:bg-black/5"
+          className="grid h-8 w-8 cursor-pointer place-items-center rounded-full hover:bg-black/5"
         >
           <ChatXIcon className="h-6 w-6" />
         </button>

package/src/ui/drop-up/EmojiDropup.tsx

@@ -74,7 +74,8 @@ const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, clas
       return;
     }
     const onDoc = (e: MouseEvent) => {
-      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+      const target = e.target as Node;
+      if (panelRef.current && !panelRef.current.contains(target) && (!anchorRef?.current || !anchorRef.current.contains(target))) {
         onClose();
       }
     };
@@ -111,10 +112,9 @@ const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, clas
             <button
               key={i}
               type="button"
-              className="emoji-dropup__item"
+              className="emoji-dropup__item cursor-pointer"
               onClick={() => {
                 onSelect(e);
-                onClose();
               }}
               aria-label={`Insert ${e}`}
             >

package/src/ui/message-items/ChatBubbleAudio.tsx

@@ -153,7 +153,7 @@ const ChatBubbleAudio: React.FC<{ mine: boolean; audio: ChatAudio }> = ({ mine,
           aria-label={playing ? "Pause" : "Play"}
           onClick={toggle}
           className={clsx(
-            "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
+            "grid h-7 w-[34px] cursor-pointer place-items-center rounded-md transition-colors",
             mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]",
           )}
         >

package/src/ui/message-items/ChatBubbleFiles.tsx

@@ -34,8 +34,14 @@ const FileChip: React.FC<{ file: ChatFile }> = ({ file }) => (
     <div className="flex min-w-0 items-center gap-2">
       <div className="min-w-0">
         <div className="flex items-center gap-1">
-          <FileIcon className={clsx("h-[18px] w-[18px]", extColor(file.ext))} />{" "}
-          <div className="truncate text-xs font-normal text-black">{file.name}</div>
+          <span>
+            <FileIcon
+              className={clsx("h-[18px] w-[18px]", extColor(file.ext))}
+            />
+          </span>{" "}
+          <div className="truncate text-xs font-normal text-black">
+            {file.name}
+          </div>
         </div>
         <div className="flex items-center gap-2 text-[10px] text-[#636363] mt-2">
           <span>{file.sizeMB.toFixed(1)} MB</span>