@banbox/chat 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.17",
+  "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

@@ -18,14 +18,17 @@ interface ChatImagePreviewModalProps {
 /* =======================
    Slide direction variants
 ======================= */
+// Percentage-based so the slide distance always matches the container width exactly.
+// Both exit and enter run simultaneously (no mode="wait"), giving a natural
+// cross-slide feel without the jerk caused by a sequential pause.
 const slideVariants = {
   enter: (dir: number) => ({
-    x: dir > 0 ? 300 : -300,
+    x: dir > 0 ? "100%" : "-100%",
     opacity: 0,
   }),
   center: { x: 0, opacity: 1 },
   exit: (dir: number) => ({
-    x: dir > 0 ? -300 : 300,
+    x: dir > 0 ? "-100%" : "100%",
     opacity: 0,
   }),
 };
@@ -80,7 +83,7 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
       <AnimatePresence>
         {isOpen && total > 0 && (
           <motion.div
-            className="fixed inset-0 z-999 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)" }}
@@ -96,13 +99,13 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
               transition={{ duration: 0.25, ease: "easeInOut" }}
               onClick={(e) => e.stopPropagation()}
             >
-              {/* Fixed 850×850 frame */}
+              {/* Fixed 953×679 frame — image adapts dynamically inside */}
               <div
                 className="relative flex items-center justify-center overflow-hidden rounded-[6px] bg-white"
-                style={{ width: 850, height: 850 }}
+                style={{ width: 953, height: 679 }}
               >
-                {/* Sliding image */}
-                <AnimatePresence mode="wait" initial={false} custom={direction}>
+                {/* Sliding image — both exit and enter animate together (no mode="wait") */}
+                <AnimatePresence initial={false} custom={direction}>
                   <motion.img
                     key={current}
                     custom={direction}
@@ -110,53 +113,58 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
                     initial="enter"
                     animate="center"
                     exit="exit"
-                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                    transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
                     src={currentImage?.url}
                     alt={currentImage?.altText ?? `Image ${current + 1}`}
-                    className="w-full rounded-[6px] object-contain"
+                    className="absolute inset-0 w-full h-full rounded-[6px] object-contain"
                     draggable={false}
                   />
                 </AnimatePresence>
 
-                {/* Left arrow — always visible, disabled when no prev */}
-                <button
-                  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"}`}
-                  style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
-                  aria-label="Previous image"
-                >
-                  <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M15 18L9 12L15 6"
-                      stroke="#2C2C2C"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </button>
+                {/* Arrows — only shown when there are multiple images */}
+                {total > 1 && (
+                  <>
+                    {/* Left arrow */}
+                    <button
+                      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-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"
+                    >
+                      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+                        <path
+                          d="M15 18L9 12L15 6"
+                          stroke="#2C2C2C"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
 
-                {/* Right arrow — always visible, disabled when no next */}
-                <button
-                  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"}`}
-                  style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
-                  aria-label="Next image"
-                >
-                  <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M9 18L15 12L9 6"
-                      stroke="#2C2C2C"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </button>
+                    {/* Right arrow */}
+                    <button
+                      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-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"
+                    >
+                      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+                        <path
+                          d="M9 18L15 12L9 6"
+                          stroke="#2C2C2C"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </>
+                )}
               </div>
 
               {/* Close button — top-right outside the 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",
@@ -190,9 +221,12 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
         exit={{ x: "110%" }}
         transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
-        {/* Inner white card */}
+        {/* Inner white card — `relative` is required so that ChatTranslateSettingsModal's
+            `absolute inset-0` overlay is contained here rather than escaping to an outer
+            positioned ancestor. Combined with `overflow-hidden` this clips the backdrop
+            to the rounded corners of the popup. */}
         <div
-          className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
+          className="relative flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
           style={{ overscrollBehavior: "contain" }}
         >
           {/* Header — 64px */}
@@ -250,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/modals/ChatTranslateSettingsModal.tsx

@@ -97,7 +97,7 @@ const ChatTranslateSettingsModal: React.FC<Props> = ({
       }}
     >
       {/* Semi-transparent backdrop over the chat panel */}
-      <div className="absolute inset-0 bg-black/30 rounded-[inherit]" />
+      <div className="absolute inset-0 bg-black/30 rounded-[inherit] overflow-hidden" />
 
       {/* Modal card */}
       <div
@@ -107,7 +107,7 @@ const ChatTranslateSettingsModal: React.FC<Props> = ({
         onClick={(e) => e.stopPropagation()}
         className={clsx(
           "relative w-[460px] max-w-[95%]",
-          "overflow-clip rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
+          "rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
           className,
         )}
       >

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

@@ -225,13 +225,23 @@ const ChatFooter: React.FC<Props> = ({
   const previewFilesToPayload = (files: PreviewFile[]) =>
     files.map((f) => ({ name: f.name, sizeMB: f.sizeMB, ext: f.ext, href: f.href, downloadName: f.downloadName }));
 
-  const clearAttachments = () => {
+  // Used by the preview strip's ✕ / remove buttons — safe to revoke because
+  // the user is cancelling the attachment (it will never appear in a message).
+  const cancelAttachments = () => {
     imgPreviews.forEach((u) => u.startsWith("blob:") && URL.revokeObjectURL(u));
     filePreviews.forEach((f) => f.href?.startsWith("blob:") && URL.revokeObjectURL(f.href));
     setImgPreviews([]);
     setFilePreviews([]);
   };
 
+  // Used after a successful send — do NOT revoke blobs here.
+  // The sent message object already holds these blob URLs and ChatMessageItem
+  // needs them to render the image. Revoking immediately makes <img src> fail.
+  const dismissAttachments = () => {
+    setImgPreviews([]);
+    setFilePreviews([]);
+  };
+
   /* ─────── Send handlers — all delegate to the single onSend prop ─────── */
 
   const sendText = async () => {
@@ -248,7 +258,7 @@ const ChatFooter: React.FC<Props> = ({
         images: imgPreviews,
         replyTo,
       });
-      clearAttachments();
+      dismissAttachments(); // ← do NOT revoke — blob URLs are now in the message
     } else {
       onSend({ type: "text", text: t, replyTo });
     }
@@ -268,7 +278,7 @@ const ChatFooter: React.FC<Props> = ({
       files: previewFilesToPayload(filePreviews),
       replyTo,
     });
-    clearAttachments();
+    dismissAttachments(); // ← do NOT revoke — blob URLs are now in the message
     clearReply?.();
     onAfterSend?.();
   };
@@ -368,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>
@@ -378,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>
@@ -388,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>
@@ -399,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>
@@ -408,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>
@@ -432,9 +442,9 @@ const ChatFooter: React.FC<Props> = ({
       </div>
 
       {micError && (
-        <div className="mb-2 flex items-start gap-2 rounded-sm bg-[#f8f8f8] px-2 py-1.5 text-xs text-[#ff5301]">
-          <span><ChatInfoIcon className="mt-0.5 h-3.5 w-3.5" /></span>
-          <span>{micError}</span>
+        <div className="mb-2 flex items-center gap-2 rounded-sm bg-[#f8f8f8] px-2 py-1.5 text-xs text-[#ff5301]">
+          <span><ChatInfoIcon className="h-3.5 w-3.5 shrink-0" /></span>
+          <span className="flex-1">{micError}</span>
           <span className="pointer flex cursor-pointer items-center justify-center rounded-full p-1 hover:bg-black/10" onClick={() => setMicError("")}>
             <ChatXIcon className="h-3.5 w-3.5" />
           </span>

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,
       )}