@banbox/chat 1.0.4 → 1.0.5

package/src/ui/chat/ChatScroll.tsx

@@ -6,15 +6,14 @@ type Props = {
   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,
+  className,
   style,
   bottomAlignWhenShort = false,
   scrollKey,
@@ -23,13 +22,10 @@ const ChatScroll: React.FC<Props> = ({
 
   const scrollToBottom = React.useCallback(() => {
     const el = ref.current;
-    if (!el) {
-      return;
-    }
+    if (!el) return;
     el.scrollTop = el.scrollHeight;
   }, []);
 
-  // On mount & when scrollKey changes
   React.useEffect(() => {
     scrollToBottom();
     const id = window.setTimeout(scrollToBottom, 0);
@@ -40,26 +36,11 @@ const ChatScroll: React.FC<Props> = ({
     <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,
-      }}
+      className={`h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`}
+      style={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",
-        }}
+        className={`min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`}
       >
         {top}
         {children}

package/src/ui/chat/TypingIndicator.tsx

@@ -8,10 +8,6 @@ const Lottie = ((_Lottie as any).default ?? _Lottie) as typeof _Lottie;
 import React from "react";
 import dots from "../../lottie/typingdotanimation2.json";
 
-/* =======================
-   Types
-======================= */
-
 type Props = {
   size?: number;
   loop?: boolean;
@@ -22,13 +18,10 @@ type Props = {
   avatarSize?: number;
 };
 
-/* =======================
-   Component
-======================= */
-
 const TypingIndicator: React.FC<Props> = ({
   loop = true,
   autoplay = true,
+  className,
   ariaLabel = "Typing…",
   avatarSize = 40,
   style,
@@ -39,49 +32,26 @@ const TypingIndicator: React.FC<Props> = ({
     <div
       role="status"
       aria-label={ariaLabel}
-      style={{
-        position: "relative",
-        display: "flex",
-        alignItems: "flex-end",
-        gap: 6,
-        ...style,
-      }}
+      className={`relative flex items-end gap-[6px]${className ? ` ${className}` : ""}`}
+      style={style}
     >
       {/* Avatar */}
       <div
-        style={{
-          position: "relative",
-          flexShrink: 0,
-          borderRadius: "50%",
-          border: "1px solid #F1F1F1",
-          width: avatarSize,
-          height: avatarSize,
-        }}
+        className="relative shrink-0 rounded-full border border-[#F1F1F1]"
+        style={{ width: avatarSize, height: avatarSize }}
       >
         <img
           src="/chat/img/girl_support.png"
           alt="avatar image"
-          style={{ height: "100%", width: "100%", borderRadius: "50%", objectFit: "cover" }}
+          className="h-full w-full rounded-full object-cover"
         />
-
         {isOnline && (
-          <span
-            style={{
-              position: "absolute",
-              bottom: 0,
-              right: 0,
-              height: 11.25,
-              width: 11.25,
-              borderRadius: "50%",
-              backgroundColor: "#328545",
-              outline: "2px solid #fff",
-            }}
-          />
+          <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
         )}
       </div>
 
       {/* Lottie typing dots */}
-      <span style={{ position: "absolute", bottom: -13, left: 30 }}>
+      <span className="absolute bottom-[-13px] left-[30px]">
         <Lottie
           animationData={dots}
           loop={loop}