@banbox/chat 1.0.3 → 1.0.4

package/src/chat/SinglePopup.tsx

@@ -13,12 +13,11 @@ import ChatMessageItem from "../ui/chat/ChatMessageItem";
 import ChatScroll from "../ui/chat/ChatScroll";
 import TypingIndicator from "../ui/chat/TypingIndicator";
 
-import type { Thread, Message, MessageRef, Reference } from "../types";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
+import type { Message, MessageRef, Reference, Thread } from "../types";
 
-/* ─────────────────────────────────────────────────────────────
-   Helpers
-────────────────────────────────────────────────────────────── */
+const GRADIENT_BORDER =
+  "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
 
 function coalesceThreadId(reference: Reference | undefined, threads: Thread[]): string {
   const referenceId = reference?.id;
@@ -45,21 +44,11 @@ function toRef(m: Message): MessageRef {
   };
 }
 
-/* ─────────────────────────────────────────────────────────────
-   Props
-────────────────────────────────────────────────────────────── */
-
 export type SinglePopupProps = {
-  /** The unified data adapter */
   adapter: ChatAdapter;
-  /** UI-level callbacks (toast, navigation) */
   uiCallbacks?: ChatUICallbacks;
 };
 
-/* ─────────────────────────────────────────────────────────────
-   Component
-────────────────────────────────────────────────────────────── */
-
 const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
   const { close, reference } = useChatUI();
 
@@ -86,14 +75,12 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
   const online = meta.online ?? activeThread?.online ?? true;
   const subtitle = meta.subtitle ?? "Customer";
 
-  /* ─── Messages ─── */
   const [messages, setMessages] = React.useState<Message[]>(() =>
     activeId ? adapter.messages.list(activeId) : [],
   );
   const [scrollKey, setScrollKey] = React.useState<number>(Date.now());
   const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(undefined);
 
-  // Subscribe to real-time updates
   React.useEffect(() => {
     if (!activeId || !adapter.messages.subscribe) return;
     const unsub = adapter.messages.subscribe(activeId, () => {
@@ -109,46 +96,54 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
     setReplyTo(undefined);
   }, [activeId, adapter]);
 
-  const statusText = activeThread?.status?.kind === "seen" ? "Seen" : "Delivered";
-
-  /* ─── Unused callbacks acknowledged ─── */
   void uiCallbacks;
 
   return (
-    <div className="fixed bottom-4 right-4 z-[10002]">
+    <div style={{ position: "fixed", bottom: 16, right: 16, zIndex: 10002 }}>
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        className="fixed inset-0 cursor-auto!"
+        style={{ position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ type: "tween", duration: 0.25 }}
       />
 
-      {/* Outer gradient wrapper */}
+      {/* Outer gradient border */}
       <motion.div
         role="dialog"
         aria-modal="true"
-        className="relative h-[650px] w-[450px] rounded-[20px] p-[2px]"
         style={{
+          position: "relative",
+          height: 650,
+          width: 450,
+          borderRadius: 20,
+          padding: 2,
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background:
-            "linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%)",
+          background: GRADIENT_BORDER,
         }}
         initial={{ x: "110%" }}
         animate={{ x: 0 }}
         exit={{ x: "110%" }}
         transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
-        {/* Inner card */}
+        {/* Inner white card */}
         <div
-          className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
-          style={{ overscrollBehavior: "contain" }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: 18,
+            backgroundColor: "#fff",
+            overscrollBehavior: "contain",
+          }}
         >
-          {/* Header */}
-          <div className="h-[64px] shrink-0">
+          {/* Header — 64px */}
+          <div style={{ height: 64, flexShrink: 0 }}>
             <ChatHeader
               left={
                 <ChatIdentity
@@ -165,7 +160,19 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
                 <button
                   type="button"
                   onClick={close}
-                  className="flex h-[34px] w-[34px] items-center justify-center rounded-full bg-white text-black shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5 hover:text-[#ff5301] cursor-pointer"
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: 34,
+                    width: 34,
+                    borderRadius: "50%",
+                    backgroundColor: "#fff",
+                    color: "#000",
+                    border: "none",
+                    boxShadow: "0px 2px 4px 0px #A5A3AE4D",
+                    cursor: "pointer",
+                  }}
                 >
                   <ChatXIcon className="h-6 w-6" />
                 </button>
@@ -173,9 +180,13 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
             />
           </div>
 
-          {/* Messages */}
-          <div className="flex-1 min-h-0">
-            <ChatScroll className="h-full" bottomAlignWhenShort={false} scrollKey={scrollKey}>
+          {/* Messages — flex-1 */}
+          <div style={{ flex: 1, minHeight: 0, position: "relative" }}>
+            <ChatScroll
+              bottomAlignWhenShort={false}
+              scrollKey={scrollKey}
+              style={{ height: "100%", overflowY: "auto" }}
+            >
               {messages.map((m, idx) => {
                 const mine = m.author === "you";
                 const isLast = idx === messages.length - 1;
@@ -187,29 +198,33 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
                     time={m.time ?? ""}
                     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={statusText}
+                    status={activeThread?.status?.kind === "seen" ? "Seen" : "Delivered"}
                     onReply={() => setReplyTo(toRef(m))}
                   />
                 );
               })}
 
-              {/* Typing */}
-              <div className="flex items-center justify-start">
+              {/* Typing indicator */}
+              <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-start" }}>
                 <TypingIndicator />
               </div>
             </ChatScroll>
           </div>
 
           {/* Footer */}
-          <div className="shrink-0">
+          <div style={{ flexShrink: 0 }}>
             <ChatFooter
               variant="single"
               replyTo={replyTo}

package/src/ui/chat/ChatHeader.tsx

@@ -1,24 +1,32 @@
-"use client";
-import clsx from "clsx";
-import React from "react";
-
-type Props = {
-  left: React.ReactNode; // header left content (avatar/title)
-  right?: React.ReactNode; // header right content (icons/actions)
-  below?: React.ReactNode; // optional bar below the header (e.g., Inquiry ID)
-  className?: string;
-};
-
-export default function ChatHeader({ left, right, below, className }: Props) {
-  return (
-    <div>
-      <div className={clsx("border-b border-[#e1e1e1] h-[64px]", className)}>
-        <div className="flex items-start justify-between px-4 pt-2.5">
-          <div className="flex items-start gap-3">{left}</div>
-          {right}
-        </div>
-      </div>
-      {below && <>{below}</>}
-    </div>
-  );
-}
+"use client";
+import React from "react";
+
+type Props = {
+  left: React.ReactNode;
+  right?: React.ReactNode;
+  below?: React.ReactNode;
+  className?: string;
+};
+
+export default function ChatHeader({ left, right, below }: Props) {
+  return (
+    <div>
+      <div
+        style={{
+          borderBottom: "1px solid #e1e1e1",
+          height: 64,
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 10,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>{left}</div>
+        {right}
+      </div>
+      {below && <>{below}</>}
+    </div>
+  );
+}

package/src/ui/chat/ChatListHeader.tsx

@@ -1,156 +1,157 @@
-"use client";
-
-import clsx from "clsx";
-import type { Variants } from "framer-motion";
-import { AnimatePresence, motion } from "framer-motion";
-import React from "react";
-import { MessageIcon, ChatSearchIcon, ChatXIcon } from "../../icons";
-
-type Props = {
-  className?: string;
-  onClose?: () => void;
-  onSearchChange?: (value: string) => void;
-};
-
-const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange }) => {
-  const [searching, setSearching] = React.useState(false);
-  const [q, setQ] = React.useState("");
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  React.useEffect(() => {
-    // AnimatePresence mode="wait" delays mounting; wait for enter animation
-    const timer = searching
-      ? setTimeout(() => {
-          inputRef.current?.focus();
-        }, 220)
-      : undefined;
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [searching]);
-
-  React.useEffect(() => {
-    if (!searching) {
-      return;
-    }
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setSearching(false);
-        setQ("");
-        onSearchChange?.("");
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => {
-      window.removeEventListener("keydown", onKey);
-    };
-  }, [searching, onSearchChange]);
-
-  const _clearInside = () => {
-    setQ("");
-    onSearchChange?.("");
-    inputRef.current?.focus();
-  };
-
-  // Use cubic-bezier tuples to satisfy the Transition type
-  const variants: Variants = {
-    inFromRight: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
-    outToLeft: { opacity: 0, x: -24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
-    inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
-    outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
-  };
-
-  return (
-    <div className={clsx("h-[64px] border-b border-[#ededed]", className)}>
-      <div className="flex h-full items-center px-[20px]">
-        <AnimatePresence initial={false} mode="wait">
-          {!searching ? (
-            // NORMAL (title) — appears from left when closing search
-            <motion.div
-              key="normal"
-              className="flex w-full items-center justify-between"
-              initial={{ opacity: 0, x: -24 }}
-              animate="inFromLeft"
-              exit="outToLeft"
-              variants={variants}
-            >
-              <div className="flex items-center gap-3">
-                <div className="text-[#2c2c2c] flex items-center gap-2">
-                  <MessageIcon className="w-6 h-6" />
-                  <span className="text-[22px] font-semibold">
-                    Messenger
-                  </span>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <button
-                  title="Search"
-                  onClick={() => setSearching(true)}
-                  className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center"
-                >
-                  <ChatSearchIcon className="w-5 h-5" />
-                </button>
-
-                <button
-                  title="Close"
-                  onClick={onClose}
-                  className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center"
-                >
-                  <ChatXIcon className="w-6 h-6" />
-                </button>
-              </div>
-            </motion.div>
-          ) : (
-            // SEARCH — enters from right, exits to right
-            <motion.div
-              key="search"
-              className="flex w-full items-center gap-3"
-              initial={{ opacity: 0, x: 24 }}
-              animate="inFromRight"
-              exit="outToRight"
-              variants={variants}
-            >
-              <div className="relative flex-1">
-                <div className="flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5">
-                  <div className="flex items-center ms-[12px] w-full">
-                    <span className="mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]">
-                      <ChatSearchIcon className="w-5 h-5" />
-                    </span>
-                    <span className="mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" />
-                    <input
-                      ref={inputRef}
-                      value={q}
-                      onChange={(e) => {
-                        setQ(e.target.value);
-                        onSearchChange?.(e.target.value);
-                      }}
-                      placeholder="Search"
-                      className="h-full w-full flex-1 bg-transparent text-[15px] outline-none placeholder:text-[#9C9C9C]"
-                    />
-                  </div>
-
-                  <div>
-                    <button
-                      title="Close search"
-                      onClick={() => {
-                        setSearching(false);
-                        setQ("");
-                        onSearchChange?.("");
-                      }}
-                      className="grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5"
-                    >
-                      <ChatXIcon className="w-5 h-5" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-};
-
-export default ChatListHeader;
+"use client";
+
+import type { Variants } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+import React from "react";
+import { ChatSearchIcon, ChatXIcon, MessageIcon } from "../../icons";
+
+type Props = {
+  className?: string;
+  onClose?: () => void;
+  onSearchChange?: (value: string) => void;
+};
+
+const ChatListHeader: React.FC<Props> = ({ onClose, onSearchChange }) => {
+  const [searching, setSearching] = React.useState(false);
+  const [q, setQ] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    const timer = searching
+      ? setTimeout(() => { inputRef.current?.focus(); }, 220)
+      : undefined;
+    return () => { clearTimeout(timer); };
+  }, [searching]);
+
+  React.useEffect(() => {
+    if (!searching) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setSearching(false);
+        setQ("");
+        onSearchChange?.("");
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => { window.removeEventListener("keydown", onKey); };
+  }, [searching, onSearchChange]);
+
+  const variants: Variants = {
+    inFromRight: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
+    outToLeft:   { opacity: 0, x: -24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
+    inFromLeft:  { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
+    outToRight:  { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
+  };
+
+  const btnStyle: React.CSSProperties = {
+    height: 36,
+    width: 36,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+  };
+
+  return (
+    <div
+      style={{
+        height: 64,
+        borderBottom: "1px solid #ededed",
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: 20,
+        paddingRight: 20,
+      }}
+    >
+      <AnimatePresence initial={false} mode="wait">
+        {!searching ? (
+          <motion.div
+            key="normal"
+            style={{ display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between" }}
+            initial={{ opacity: 0, x: -24 }}
+            animate="inFromLeft"
+            exit="outToLeft"
+            variants={variants}
+          >
+            {/* Title */}
+            <div style={{ display: "flex", alignItems: "center", gap: 8, color: "#2c2c2c" }}>
+              <MessageIcon className="w-6 h-6" />
+              <span style={{ fontSize: 22, fontWeight: 600 }}>Messenger</span>
+            </div>
+
+            {/* Actions */}
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <button title="Search" onClick={() => setSearching(true)} style={btnStyle}>
+                <ChatSearchIcon className="w-5 h-5" />
+              </button>
+              <button title="Close" onClick={onClose} style={btnStyle}>
+                <ChatXIcon className="w-6 h-6" />
+              </button>
+            </div>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="search"
+            style={{ display: "flex", width: "100%", alignItems: "center", gap: 12 }}
+            initial={{ opacity: 0, x: 24 }}
+            animate="inFromRight"
+            exit="outToRight"
+            variants={variants}
+          >
+            <div
+              style={{
+                display: "flex",
+                flex: 1,
+                height: 40,
+                alignItems: "center",
+                borderRadius: 9999,
+                border: "1px solid #6A6A6A",
+                backgroundColor: "#fff",
+                padding: "0 4px",
+                gap: 6,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", flex: 1, marginLeft: 12 }}>
+                <span style={{ marginRight: 8, color: "#929292", flexShrink: 0 }}>
+                  <ChatSearchIcon className="w-5 h-5" />
+                </span>
+                <span style={{ marginRight: 8, height: 24, width: 1, flexShrink: 0, backgroundColor: "#e1e1e1" }} />
+                <input
+                  ref={inputRef}
+                  value={q}
+                  onChange={(e) => {
+                    setQ(e.target.value);
+                    onSearchChange?.(e.target.value);
+                  }}
+                  placeholder="Search"
+                  style={{
+                    flex: 1,
+                    height: "100%",
+                    background: "transparent",
+                    fontSize: 15,
+                    outline: "none",
+                    border: "none",
+                    color: "#2c2c2c",
+                  }}
+                />
+              </div>
+
+              <button
+                title="Close search"
+                onClick={() => { setSearching(false); setQ(""); onSearchChange?.(""); }}
+                style={{ ...btnStyle, height: 32, width: 32 }}
+              >
+                <ChatXIcon className="w-5 h-5" />
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default ChatListHeader;