@banbox/chat 1.0.3 → 1.0.5

package/src/ui/chat/ChatScroll.tsx

@@ -1,64 +1,52 @@
-"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;
+  bottomAlignWhenShort?: boolean;
+  scrollKey?: string | number;
+};
+
+const ChatScroll: React.FC<Props> = ({
+  top,
+  children,
+  className,
+  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;
+  }, []);
+
+  React.useEffect(() => {
+    scrollToBottom();
+    const id = window.setTimeout(scrollToBottom, 0);
+    return () => window.clearTimeout(id);
+  }, [scrollKey, scrollToBottom]);
+
+  return (
+    <div
+      ref={ref}
+      data-chat-scroll
+      className={`h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`}
+      style={style}
+    >
+      <div
+        className={`min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`}
+      >
+        {top}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ChatScroll;

package/src/ui/chat/TypingIndicator.tsx

@@ -6,44 +6,34 @@ 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";
 
-/* =======================
-   Types
-======================= */
-
 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;
 };
 
-/* =======================
-   Component
-======================= */
-
 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}
+      className={`relative flex items-end gap-[6px]${className ? ` ${className}` : ""}`}
+      style={style}
     >
       {/* Avatar */}
       <div
@@ -55,13 +45,12 @@ const TypingIndicator: React.FC<Props> = ({
           alt="avatar image"
           className="h-full w-full rounded-full object-cover"
         />
-
         {isOnline && (
-          <span className="absolute bottom-[0px] right-[0px] h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
+          <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
         )}
       </div>
 
-      {/* typing lottie at bottom-right */}
+      {/* Lottie typing dots */}
       <span className="absolute bottom-[-13px] left-[30px]">
         <Lottie
           animationData={dots}