@banbox/chat 1.0.3 → 1.0.4

package/src/ui/chat/ChatScroll.tsx

@@ -1,64 +1,71 @@
-"use client";
-import clsx from "clsx";
-import React from "react";
-
-type Props = {
-  top?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  /** set true if you want short threads anchored at the bottom */
-  bottomAlignWhenShort?: boolean;
-  /** when this value changes, we auto-scroll to the bottom */
-  scrollKey?: string | number;
-};
-
-const ChatScroll: React.FC<Props> = ({
-  top,
-  children,
-  className,
-  bottomAlignWhenShort = false,
-  scrollKey,
-}) => {
-  const ref = React.useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = React.useCallback(() => {
-    const el = ref.current;
-    if (!el) {
-      return;
-    }
-    el.scrollTop = el.scrollHeight;
-  }, []);
-
-  // On mount & when scrollKey changes
-  React.useEffect(() => {
-    // immediate
-    scrollToBottom();
-    // nudge after paint/layout (covers images)
-    const id = window.setTimeout(scrollToBottom, 0);
-    return () => window.clearTimeout(id);
-  }, [scrollKey, scrollToBottom]);
-
-  return (
-    <div
-      ref={ref}
-      data-chat-scroll
-      className={clsx(
-        "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
-        className,
-      )}
-    >
-      {/* This wrapper ensures content is at least as tall as the scroll area */}
-      <div
-        className={clsx(
-          "min-h-full flex flex-col",
-          bottomAlignWhenShort ? "justify-end" : "justify-start",
-        )}
-      >
-        {top}
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default ChatScroll;
+"use client";
+import React from "react";
+
+type Props = {
+  top?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  /** set true if you want short threads anchored at the bottom */
+  bottomAlignWhenShort?: boolean;
+  /** when this value changes, we auto-scroll to the bottom */
+  scrollKey?: string | number;
+};
+
+const ChatScroll: React.FC<Props> = ({
+  top,
+  children,
+  style,
+  bottomAlignWhenShort = false,
+  scrollKey,
+}) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    el.scrollTop = el.scrollHeight;
+  }, []);
+
+  // On mount & when scrollKey changes
+  React.useEffect(() => {
+    scrollToBottom();
+    const id = window.setTimeout(scrollToBottom, 0);
+    return () => window.clearTimeout(id);
+  }, [scrollKey, scrollToBottom]);
+
+  return (
+    <div
+      ref={ref}
+      data-chat-scroll
+      style={{
+        height: "100%",
+        minHeight: 0,
+        overflowY: "auto",
+        backgroundColor: "#fff",
+        padding: 16,
+        // custom scrollbar — hide track for clean look
+        scrollbarWidth: "thin",
+        scrollbarColor: "#d1d5db transparent",
+        ...style,
+      }}
+    >
+      {/* Ensures content is at least as tall as the scroll area */}
+      <div
+        style={{
+          minHeight: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: bottomAlignWhenShort ? "flex-end" : "flex-start",
+        }}
+      >
+        {top}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ChatScroll;

package/src/ui/chat/TypingIndicator.tsx

@@ -6,7 +6,6 @@ import _Lottie from "lottie-react";
 const Lottie = ((_Lottie as any).default ?? _Lottie) as typeof _Lottie;
 
 import React from "react";
-import { cn } from "../../utils/cn";
 import dots from "../../lottie/typingdotanimation2.json";
 
 /* =======================
@@ -14,15 +13,13 @@ import dots from "../../lottie/typingdotanimation2.json";
 ======================= */
 
 type Props = {
-  /** Pixel box for the animation area */
-  size?: number; // default 18 (inside badge)
-  loop?: boolean; // default true
-  autoplay?: boolean; // default true
+  size?: number;
+  loop?: boolean;
+  autoplay?: boolean;
   className?: string;
+  style?: React.CSSProperties;
   ariaLabel?: string;
-
-  /** Avatar size in px */
-  avatarSize?: number; // default 40
+  avatarSize?: number;
 };
 
 /* =======================
@@ -30,39 +27,61 @@ type Props = {
 ======================= */
 
 const TypingIndicator: React.FC<Props> = ({
-  size = 18,
   loop = true,
   autoplay = true,
-  className,
   ariaLabel = "Typing…",
   avatarSize = 40,
+  style,
 }) => {
   const isOnline = true;
 
   return (
     <div
-      className={cn("relative flex items-end gap-[6px]", className)}
       role="status"
       aria-label={ariaLabel}
+      style={{
+        position: "relative",
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 6,
+        ...style,
+      }}
     >
       {/* Avatar */}
       <div
-        className="relative shrink-0 rounded-full border border-[#F1F1F1]"
-        style={{ width: avatarSize, height: avatarSize }}
+        style={{
+          position: "relative",
+          flexShrink: 0,
+          borderRadius: "50%",
+          border: "1px solid #F1F1F1",
+          width: avatarSize,
+          height: avatarSize,
+        }}
       >
         <img
           src="/chat/img/girl_support.png"
           alt="avatar image"
-          className="h-full w-full rounded-full object-cover"
+          style={{ height: "100%", width: "100%", borderRadius: "50%", objectFit: "cover" }}
         />
 
         {isOnline && (
-          <span className="absolute bottom-[0px] right-[0px] h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
+          <span
+            style={{
+              position: "absolute",
+              bottom: 0,
+              right: 0,
+              height: 11.25,
+              width: 11.25,
+              borderRadius: "50%",
+              backgroundColor: "#328545",
+              outline: "2px solid #fff",
+            }}
+          />
         )}
       </div>
 
-      {/* typing lottie at bottom-right */}
-      <span className="absolute bottom-[-13px] left-[30px]">
+      {/* Lottie typing dots */}
+      <span style={{ position: "absolute", bottom: -13, left: 30 }}>
         <Lottie
           animationData={dots}
           loop={loop}