@banbox/chat 1.0.1 → 1.0.3

package/src/ui/chat/AttachmentPreviewStrip.tsx

@@ -1,16 +1,11 @@
+// components/chat/ui/chat/AttachmentPreviewStrip.tsx
 "use client";
-
-import type { FC } from "react";
+import clsx from "clsx";
+import React from "react";
 import { FileIcon, ChatXIcon } from "../../icons";
-import { cn } from "../../utils/cn";
-
-/* =======================
-   Helpers
-======================= */
 
-const extColor = (ext: string): string => {
+const extColor = (ext: string) => {
   const e = ext.toLowerCase();
-
   if (e === "pdf") {
     return "text-[#D93025]";
   }
@@ -20,143 +15,99 @@ const extColor = (ext: string): string => {
   if (e === "doc" || e === "docx") {
     return "text-[#2B579A]";
   }
-
   return "text-[#6B7280]";
 };
 
-/* =======================
-   Types
-======================= */
-
-export type FilePreview = {
+export const FilePreviewChip: React.FC<{
   name: string;
   sizeMB: number;
   ext: string;
-  href: string;
-  downloadName?: string;
-};
+  onRemove: () => void;
+}> = ({ name, sizeMB, ext, onRemove }) => (
+  <div className="mr-2 inline-flex items-center gap-3 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]">
+    <div className="flex min-w-0 items-center gap-2">
+      <div className="min-w-0">
+        <div className="flex items-center gap-1">
+          <FileIcon className={clsx("h-[18px] w-[18px]", extColor(ext))} />{" "}
+          <div className="truncate text-sm font-normal text-black">{name}</div>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-[#636363] mt-2">
+          <span>{sizeMB.toFixed(1)} MB</span>
+          <span className="h-3 w-px bg-[#e1e1e1]" />
+          <span className="uppercase">{ext}</span>
+        </div>
+      </div>
+    </div>
+    <button
+      type="button"
+      onClick={onRemove}
+      className="grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5"
+      title="Remove"
+      aria-label="Remove file"
+    >
+      <ChatXIcon className="h-[18px] w-[18px]" />
+    </button>
+  </div>
+);
+
+const ImageThumb: React.FC<{ url: string; onRemove: () => void }> = ({ url, onRemove }) => (
+  <div className="relative mr-2 inline-block h-[65px] w-[65px] rounded-sm border border-[#e1e1e1] bg-[#F7F7F7]">
+    <img src={url} alt="" className="h-full w-full object-cover rounded-sm" />
+    <button
+      type="button"
+      onClick={onRemove}
+      className="absolute left-1/2 top-1/2 z-10 grid h-6 w-6 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-black/30 text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D]"
+      aria-label="Remove image"
+      title="Remove image"
+    >
+      <ChatXIcon className="h-4 w-4 text-white" />
+    </button>
+  </div>
+);
 
-type FilePreviewChipProps = {
+export type FilePreview = {
   name: string;
   sizeMB: number;
   ext: string;
-  onRemove: () => void;
-};
-
-type ImageThumbProps = {
-  url: string;
-  onRemove: () => void;
+  href: string;
+  downloadName?: string;
 };
 
-type AttachmentPreviewStripProps = {
+type Props = {
   imgPreviews: string[];
   filePreviews: FilePreview[];
   onRemoveImage: (index: number) => void;
   onRemoveFile: (index: number) => void;
 };
 
-/* =======================
-   Sub Components
-======================= */
-
-export const FilePreviewChip: FC<FilePreviewChipProps> = ({ name, sizeMB, ext, onRemove }) => {
-  return (
-    <div
-      className={cn(
-        "mr-2 inline-flex h-[65px] max-w-[185px] items-center gap-3 whitespace-nowrap rounded-sm",
-        "border border-[#e1e1e1] bg-white px-3 py-2",
-      )}
-    >
-      <div className="flex min-w-0 items-center gap-2">
-        <div className="min-w-0">
-          <div className="flex items-center gap-1">
-            <FileIcon className={cn("h-[18px] w-[18px]", extColor(ext))} />
-            <div className="truncate text-[13px] font-normal text-black">{name}</div>
-          </div>
-
-          <div className="mt-2 flex items-center gap-2 text-xs text-[#636363]">
-            <span>{sizeMB.toFixed(1)} MB</span>
-            <span className="h-3 w-px bg-[#e1e1e1]" />
-            <span className="uppercase">{ext}</span>
-          </div>
-        </div>
-      </div>
-
-      <button
-        type="button"
-        onClick={onRemove}
-        title="Remove"
-        aria-label="Remove file"
-        className={cn(
-          "grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D]",
-          "shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5",
-        )}
-      >
-        <ChatXIcon className="h-[18px] w-[18px]" />
-      </button>
-    </div>
-  );
-};
-
-const ImageThumb: FC<ImageThumbProps> = ({ url, onRemove }) => {
-  return (
-    <div
-      className={cn(
-        "relative mr-2 inline-block h-[65px] w-[65px] rounded-sm",
-        "border border-[#e1e1e1] bg-[#F7F7F7]",
-      )}
-    >
-      <img src={url} alt="" className="h-full w-full rounded-sm object-cover" loading="lazy" />
-
-      <button
-        type="button"
-        onClick={onRemove}
-        aria-label="Remove image"
-        title="Remove image"
-        className={cn(
-          "absolute left-1/2 top-1/2 z-10 grid h-6 w-6 -translate-x-1/2 -translate-y-1/2 place-items-center",
-          "rounded-full bg-black/30 text-white",
-          "shadow-[0px_2px_4px_0px_#A5A3AE4D]",
-        )}
-      >
-        <ChatXIcon className="h-4 w-4 text-white" />
-      </button>
-    </div>
-  );
-};
-
-/* =======================
-   Component
-======================= */
-
 /** Single-row, horizontally scrollable preview strip */
-const AttachmentPreviewStrip: FC<AttachmentPreviewStripProps> = ({
+const AttachmentPreviewStrip: React.FC<Props> = ({
   imgPreviews,
   filePreviews,
   onRemoveFile,
   onRemoveImage,
 }) => {
   const has = imgPreviews.length > 0 || filePreviews.length > 0;
-
   if (!has) {
     return null;
   }
 
   return (
-    <div className={cn("mx-auto mb-2 max-w-[410px] overflow-x-auto custom-scroll")}>
+    <div className="mb-2 max-w-[410px] mx-auto overflow-x-auto custom-scroll">
       <div className="flex items-start whitespace-nowrap">
-        {filePreviews.map((file, index) => (
+        {filePreviews.map((f, i) => (
           <FilePreviewChip
-            key={`${file.name}-${index}`}
-            name={file.name}
-            sizeMB={file.sizeMB}
-            ext={file.ext}
-            onRemove={() => onRemoveFile(index)}
+            key={`${f.name}-${i}`}
+            name={f.name}
+            sizeMB={f.sizeMB}
+            ext={f.ext}
+            onRemove={() => onRemoveFile(i)}
           />
         ))}
-
-        {imgPreviews.map((url, index) => (
-          <ImageThumb key={`${url}-${index}`} url={url} onRemove={() => onRemoveImage(index)} />
+        {imgPreviews.map((u, i) => (
+          <div key={`${u}-${i}`}>
+            <ImageThumb url={u} onRemove={() => onRemoveImage(i)} />
+          </div>
         ))}
       </div>
     </div>

package/src/ui/chat/ChatComposerBar.tsx

@@ -1,15 +1,11 @@
+// components/chat/ui/chat/ChatComposerBar.tsx
 "use client";
 
-import { useRef, useState } from "react";
-
+import clsx from "clsx";
+import React, { useRef, useState } from "react";
 import { ArrowSendAngleIcon, ArrowSendIcon, RecordMicIcon, ChatXIcon } from "../../icons";
-import { cn } from "../../utils/cn";
-
-/* =======================
-   Types
-======================= */
 
-type ChatComposerBarProps = {
+type Props = {
   recording: boolean;
   seconds: number;
 
@@ -34,21 +30,14 @@ type ChatComposerBarProps = {
   fmtTime: (s: number) => string;
 };
 
-/* =======================
-   Gradients
-======================= */
-
+// gradients
 const idleGradient =
   "linear-gradient(90.85deg, rgba(51, 201, 212, 0.5) 0%, rgba(39, 83, 251, 0.5) 29.98%, rgba(39, 83, 251, 0.5) 49.97%, rgba(39, 83, 251, 0.5) 64.96%, rgba(235, 67, 255, 0.5) 99.94%)";
 
 const activeGradient =
   "linear-gradient(90.85deg, #33C9D4 0%, #2753FB 29.98%, #2753FB 49.97%, #2753FB 64.96%, #EB43FF 99.94%)";
 
-/* =======================
-   Component
-======================= */
-
-const ChatComposerBar = ({
+const ChatComposerBar: React.FC<Props> = ({
   recording,
   seconds,
   isTyping,
@@ -63,10 +52,11 @@ const ChatComposerBar = ({
   sendText,
   sendAttachments,
   fmtTime,
-}: ChatComposerBarProps) => {
+}) => {
   const composingRef = useRef(false);
   const [isFocused, setIsFocused] = useState(false);
 
+  // active border when focused or recording
   const isActiveBorder = isFocused || recording;
 
   if (!recording) {
@@ -84,7 +74,7 @@ const ChatComposerBar = ({
                 <button
                   type="button"
                   onClick={startRecording}
-                  className="grid h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
+                  className="grid h-[44px] w-[44px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
                   title="Record voice"
                   aria-label="Record voice"
                 >
@@ -95,9 +85,9 @@ const ChatComposerBar = ({
               <textarea
                 ref={textRef}
                 rows={1}
-                autoFocus
-                placeholder="Type a message"
-                className="custom-scroll-hidden max-h-[200px] flex-1 resize-none bg-transparent px-3 py-2 outline-none placeholder:text-[#777]"
+                placeholder="Type a message…"
+                autoFocus={true}
+                className="max-h-[200px] flex-1 resize-none bg-transparent px-3 py-2 outline-none custom-scroll-hidden"
                 value={text}
                 onChange={(e) => onTextChange(e.target.value)}
                 onInput={onAutoGrow}
@@ -127,9 +117,7 @@ const ChatComposerBar = ({
               />
             </div>
 
-            {!canSendArrow ? (
-              <div className="grid h-full w-px place-items-center bg-[#E7E7E7]" />
-            ) : null}
+            {!canSendArrow && <div className="grid h-full w-px place-items-center bg-[#E7E7E7]" />}
 
             <div className="px-2">
               {isTyping ? (
@@ -138,9 +126,8 @@ const ChatComposerBar = ({
                   <button
                     type="button"
                     onClick={sendText}
-                    className={cn(
-                      "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full",
-                      "text-[#ff5301] hover:bg-[#f8f8f8]",
+                    className={clsx(
+                      "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]",
                     )}
                     title={hasAttachments ? "Send attachments" : "Send"}
                     aria-label="Send"
@@ -155,7 +142,7 @@ const ChatComposerBar = ({
                     type="button"
                     onClick={sendAttachments}
                     disabled={!hasAttachments}
-                    className={cn(
+                    className={clsx(
                       "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
                       hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]",
                     )}
@@ -173,22 +160,19 @@ const ChatComposerBar = ({
     );
   }
 
-  /* =======================
-     Recording state UI
-  ======================= */
-
+  // Recording state UI
   return (
     <div className="flex w-full items-stretch gap-2">
       <div className="w-full rounded-sm p-px" style={{ background: activeGradient }}>
-        <div className="flex h-[52px] w-full items-center justify-between rounded-[3px] bg-white">
+        <div className="flex min-h-[50px] w-full items-center justify-between rounded-[3px] bg-white">
           <button
             type="button"
-            className="ms-[3px] grid h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
+            className="grid ms-[3px] h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
             aria-label="Recording"
             title="Recording"
           >
             <RecordMicIcon
-              className={cn(
+              className={clsx(
                 "h-6 w-6",
                 seconds % 2 === 0
                   ? "text-[#929292]"
@@ -197,7 +181,7 @@ const ChatComposerBar = ({
             />
           </button>
 
-          <div className="px-3 text-[13px]">{fmtTime(seconds)}</div>
+          <div className="px-3 text-sm">{fmtTime(seconds)}</div>
 
           <div className="ml-auto flex items-center gap-3 pr-2">
             <button
@@ -216,7 +200,7 @@ const ChatComposerBar = ({
               type="button"
               onClick={() => stopRecording(true)}
               className="grid h-10 w-[40px] place-items-center rounded-full text-[#ff5301]"
-              title={hasAttachments ? "Send attachments" : "Send"}
+              title="Send"
               aria-label="Send"
             >
               <ArrowSendAngleIcon className="h-6 w-6" />

package/src/ui/chat/ChatFooter.tsx

@@ -11,7 +11,7 @@ import ChatComposerBar from "./ChatComposerBar";
 import BusinessCardDropup from "./drop-up/BusinessCardDropup";
 import EmojiDropup from "./drop-up/EmojiDropup";
 import ReplyCard from "./ReplyCard";
-import type { MessageRef } from "../../types";
+import type { MessageRef } from "./types";
 import type { SendPayload } from "../../types";
 
 /* Simple tooltip wrapper */