@banbox/chat 1.0.1 → 1.0.2

package/src/ui/chat/ChatIdentity.tsx

@@ -1,145 +1,148 @@
-"use client";
-
-import { BlueBadgeIcon } from "../../icons";
-import { cn } from "../../utils/cn";
-
-/* =======================
-   Types
-======================= */
-
-type SubtitleVariant = "live" | "muted";
-// Variant = "avatar" | "initial" | "logo" — inferred from union props below
-
-type BaseProps = {
-  title: string;
-  subtitle?: string;
-  subtitleVariant?: SubtitleVariant;
-  online?: boolean;
-  verified?: boolean;
-  /** Circle size in px (default 46) */
-  size?: number;
-  className?: string;
-};
-
-type AvatarVariant = BaseProps & {
-  variant: "avatar";
-  src: string;
-};
-
-type InitialVariant = BaseProps & {
-  variant: "initial";
-  initial: string;
-  initialSrc?: string;
-  bg?: string;
-  textClassName?: string;
-};
-
-type LogoVariant = BaseProps & {
-  variant: "logo";
-  src: string;
-  ringColor?: string;
-};
-
-export type ChatIdentityProps = AvatarVariant | InitialVariant | LogoVariant;
-
-/* =======================
-   Component
-======================= */
-
-const ChatIdentity = (props: ChatIdentityProps) => {
-  const {
-    title,
-    subtitle,
-    subtitleVariant = "muted",
-    online = false,
-    verified = false,
-    size = 46,
-    className,
-  } = props;
-
-  const subtitleClass = cn(
-    "text-[10px] font-medium",
-    subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]",
-  );
-
-  return (
-    <div className={cn("flex items-start gap-3", className)}>
-      <div className="relative" style={{ width: size, height: size }}>
-        {/* Avatar */}
-        {props.variant === "avatar" ? (
-          <img
-            src={props.src}
-            alt={title}
-            className="h-full w-full rounded-xs object-cover border border-[#f1f1f1]"
-          />
-        ) : null}
-
-        {/* Initial */}
-        {props.variant === "initial" ? (
-          <div
-            className={cn(
-              "grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
-              props.textClassName,
-            )}
-            style={{ backgroundColor: props.bg ?? "#FFE5DA" }}
-          >
-            {props.initial}
-          </div>
-        ) : null}
-
-        {/* Logo */}
-        {props.variant === "logo" ? (
-          <div
-            className="grid h-full w-full place-items-center rounded-xs"
-            style={{ boxShadow: `0 0 0 1px ${props.ringColor ?? "#EDEDED"} inset` }}
-          >
-            <img src={props.src} alt={title} className="h-full w-full rounded-xs object-cover" />
-          </div>
-        ) : null}
-
-        {/* Online / Offline dot */}
-        <span
-          className={cn(
-            "absolute rounded-full ring-1 ring-white bottom-[-2px] right-[-2px]",
-            online ? "bg-[#328545]" : "bg-[#eb2127]",
-          )}
-          style={{
-            width: "15px",
-            height: "15px",
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </div>
-
-      <div>
-        <div className="flex items-start gap-1 text-[14px] font-medium text-black">
-          <span className="max-w-[300px] truncate">{title}</span>
-          {verified ? (
-            <span>
-              <BlueBadgeIcon />
-            </span>
-          ) : null}
-        </div>
-
-        {subtitle ? (
-          title.toLowerCase() === "banbox.com" ? (
-            <div className="flex items-center">
-              <img
-                src="/chat/globe.gif"
-                alt="globe"
-                className="h-[12px] w-auto shrink-0 object-contain"
-                style={{ mixBlendMode: "multiply" }}
-              />
-              <div className={subtitleClass}>{subtitle}</div>
-            </div>
-          ) : (
-            <div className={subtitleClass}>{subtitle}</div>
-          )
-        ) : null}
-      </div>
-    </div>
-  );
-};
-
-export default ChatIdentity;
+"use client";
+
+import clsx from "clsx";
+import Lottie from "lottie-react";
+import React from "react";
+import { BlueBadgeIcon } from "../../icons";
+import globe from "../../lottie/banbox-chat-globe.json";
+
+type SubtitleVariant = "live" | "muted";
+
+type BaseProps = {
+  title: string;
+  subtitle?: string;
+  subtitleVariant?: SubtitleVariant;
+  online?: boolean;
+  verified?: boolean;
+  /** Circle size in px (default 46) */
+  size?: number;
+  className?: string;
+};
+
+type AvatarVariant = BaseProps & {
+  variant: "avatar";
+  src: string; // person photo
+};
+
+type InitialVariant = BaseProps & {
+  variant: "initial";
+  initial: string; // e.g. "K"
+  initialSrc?: string;
+  bg?: string; // circle background
+  textClassName?: string;
+};
+
+type LogoVariant = BaseProps & {
+  variant: "logo";
+  src: string; // brand logo
+  ringColor?: string;
+};
+
+export type ChatIdentityProps = AvatarVariant | InitialVariant | LogoVariant;
+
+const ChatIdentity: React.FC<ChatIdentityProps> = (props) => {
+  const {
+    title,
+    subtitle,
+    subtitleVariant = "muted",
+    online = false,
+    verified = false,
+    size = 46,
+    className,
+  } = props;
+
+  const subtitleClass = clsx(
+    "text-[10px] font-medium",
+    subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]",
+  );
+
+  return (
+    <div className={clsx("flex items-start gap-3", className)}>
+      <div className="relative" style={{ width: size, height: size }}>
+        {/* Leading visual by variant */}
+        {props.variant === "avatar" && (
+          <img
+            src={props.src}
+            alt={title}
+            className="h-full w-full rounded-xs object-cover border border-[#f1f1f1]"
+          />
+        )}
+
+        {props.variant === "initial" && (
+          <div
+            className={clsx(
+              "grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
+              props.textClassName,
+            )}
+            style={{ backgroundColor: props.bg ?? "#FFE7DB" }}
+          >
+            {props.initial}
+          </div>
+        )}
+
+        {props.variant === "logo" && (
+          <div
+            className="grid h-full w-full place-items-center rounded-xs"
+            style={{ boxShadow: `0 0 0 1px ${props.ringColor ?? "#EDEDED"} inset` }}
+          >
+            <img
+              src={props.src}
+              alt={title}
+              className="h-full w-full rounded-xs object-cover"
+            />
+          </div>
+        )}
+
+        {/* Online dot — RIGHT SIDE */}
+        {online ? (
+          <span
+            className="absolute rounded-full bg-[#1E8E3E] ring-1 ring-white"
+            style={{
+              width: "15px",
+              height: "15px",
+              right: 0,
+              bottom: 0,
+            }}
+          />
+        ) : (
+          <span
+            className="absolute rounded-full bg-[#eb2127] ring-1 ring-white"
+            style={{
+              width: "15px",
+              height: "15px",
+              right: 0,
+              bottom: 0,
+            }}
+          />
+        )}
+      </div>
+
+      <div>
+        <div className="text-[16px] font-semibold text-[#2c2c2c] flex items-center gap-1">
+          <span className="max-w-[300px] truncate">{title}</span>
+          {verified && (
+            <span>
+              <BlueBadgeIcon />
+            </span>
+          )}
+        </div>
+        {subtitle &&
+          (title === "banbox.com" ? (
+            <div className="flex items-center -ml-[5px]">
+              <Lottie
+                animationData={globe}
+                loop={true}
+                autoplay={true}
+                style={{ width: "22px", marginBottom: "1.5px" }}
+              />
+              <div className={subtitleClass}>{subtitle}</div>
+            </div>
+          ) : (
+            <div className={subtitleClass}>{subtitle}</div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default ChatIdentity;

package/src/ui/chat/ChatListHeader.tsx

@@ -1,16 +1,10 @@
-// components/ui/chat/ChatListHeader.tsx
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+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";
-import { cn } from "../../utils/cn";
-
-/* =======================
-   Types
-======================= */
 
 type Props = {
   className?: string;
@@ -18,27 +12,27 @@ type Props = {
   onSearchChange?: (value: string) => void;
 };
 
-/* =======================
-   Component
-======================= */
-
-const ChatListHeader = ({ className, onClose, onSearchChange }: Props) => {
-  const [searching, setSearching] = useState(false);
-  const [q, setQ] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (searching) {
-      const timer = setTimeout(() => inputRef.current?.focus(), 200);
-      return () => clearTimeout(timer);
-    }
+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]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!searching) {
       return;
     }
-
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         setSearching(false);
@@ -46,48 +40,32 @@ const ChatListHeader = ({ className, onClose, onSearchChange }: Props) => {
         onSearchChange?.("");
       }
     };
-
     window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
   }, [searching, onSearchChange]);
 
-  // const clearInside = () => {
-  //   setQ("");
-  //   onSearchChange?.("");
-  //   inputRef.current?.focus();
-  // };
+  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] },
-    },
+    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={cn("h-[64px] border-b border-[#ededed]", className)}>
+    <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 header
-            ======================= */
+            // NORMAL (title) — appears from left when closing search
             <motion.div
               key="normal"
               className="flex w-full items-center justify-between"
@@ -97,36 +75,34 @@ const ChatListHeader = ({ className, onClose, onSearchChange }: Props) => {
               variants={variants}
             >
               <div className="flex items-center gap-3">
-                <div className="flex items-center gap-2 text-[#2c2c2c]">
-                  <MessageIcon className="h-6 w-6" />
-                  <span className="text-[22px] font-semibold">Messenger</span>
+                <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
-                  type="button"
                   title="Search"
                   onClick={() => setSearching(true)}
-                  className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
+                  className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center"
                 >
-                  <ChatSearchIcon className="h-6 w-6" />
+                  <ChatSearchIcon className="w-5 h-5" />
                 </button>
 
                 <button
-                  type="button"
                   title="Close"
                   onClick={onClose}
-                  className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
+                  className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center"
                 >
-                  <ChatXIcon className="h-6 w-6" />
+                  <ChatXIcon className="w-6 h-6" />
                 </button>
               </div>
             </motion.div>
           ) : (
-            /* =======================
-               Search header
-            ======================= */
+            // SEARCH — enters from right, exits to right
             <motion.div
               key="search"
               className="flex w-full items-center gap-3"
@@ -136,10 +112,10 @@ const ChatListHeader = ({ className, onClose, onSearchChange }: Props) => {
               variants={variants}
             >
               <div className="relative flex-1">
-                <div className="flex justify-between h-10 w-full items-center gap-1.5 rounded-full border border-[#6A6A6A] bg-white px-[4px]">
-                  <div className="ms-[12px] flex items-center">
-                    <span className="mr-2 grid h-6 w-6 shrink-0 place-items-center text-#929292]">
-                      <ChatSearchIcon className="h-5 w-5" />
+                <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
@@ -154,18 +130,19 @@ const ChatListHeader = ({ className, onClose, onSearchChange }: Props) => {
                     />
                   </div>
 
-                  <button
-                    type="button"
-                    title="Close search"
-                    onClick={() => {
-                      setSearching(false);
-                      setQ("");
-                      onSearchChange?.("");
-                    }}
-                    className="flex h-8! w-8! items-center justify-center rounded-full hover:bg-black/5"
-                  >
-                    <ChatXIcon className="h-5 w-5" />
-                  </button>
+                  <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>