@banbox/chat 1.0.1 → 1.0.2

package/src/ui/chat/ChatMessageItem.tsx

@@ -1,214 +1,193 @@
-"use client";
-
-import { useMemo, useState } from "react";
-
-import ChatAddressCard from "./message-items/ChatAddressCard";
-import ChatBubbleAudio from "./message-items/ChatBubbleAudio";
-import ChatBubbleFiles from "./message-items/ChatBubbleFiles";
-import ChatBubbleImages from "./message-items/ChatBubbleImages";
-import ChatBubbleText from "./message-items/ChatBubbleText";
-import ChatBusinessCard from "./message-items/ChatBusinessCard";
-import MessageHoverActions from "./MessageHoverActions";
-import ReplyCard from "./ReplyCard";
-import type { AddressCard, BusinessCard, MessageRef } from "./types";
-import { cn } from "../../utils/cn";
-
-/* =======================
-   Demo translator
-======================= */
-
-const toBanglaDemo = (s: string): string => {
-  const map: Record<string, string> = {
-    Hi: "হাই",
-    "Do you have a freight forwarder in China?": "আপনার কি চীনে কোনো ফ্রেইট ফরওয়ার্ডার আছে?",
-    "This conversation is empty. Say hi 👋": "এই কথোপকথনটি খালি । হাই হাই হাই বলুন 👋",
-    "Can we schedule a call for tomorrow?": "আমরা কি আগামীকাল একটি কল নির্ধারণ করতে পারি?",
-    "Sure, what time suits you?": "অবশ্যই, আপনার জন্য কোন সময়টি সুবিধাজনক?",
-    "Welcome to Global Marketplace": "গ্লোবাল মার্কেটপ্লেসে আপনাকে স্বাগতম 🎉",
-    "Happy to be here!": "এখানে থাকতে পেরে আনন্দিত!",
-  };
-
-  if (map[s]) {
-    return map[s];
-  }
-
-  return `বাংলা ${s}`;
-};
-
-/* =======================
-   Types
-======================= */
-
-export type ChatAudio = {
-  src?: string;
-  duration?: string;
-};
-
-export type ChatFile = {
-  name: string;
-  sizeMB: number;
-  ext: string;
-  href?: string;
-  downloadName?: string;
-};
-
-export type ChatMessageItemProps = {
-  id: string;
-  mine?: boolean;
-  time: string;
-  authorInitial?: string;
-  avatarBg?: string;
-
-  text?: string;
-  businessCard?: BusinessCard;
-  addressCard?: AddressCard;
-  images?: string[];
-  files?: ChatFile[];
-  audio?: ChatAudio;
-
-  replyTo?: MessageRef;
-  showStatus?: boolean;
-  status?: string;
-  className?: string;
-
-  onReply?: () => void;
-  onTranslate?: () => void;
-
-  initialSrc?: string;
-};
-
-/* =======================
-   Component
-======================= */
-
-const ChatMessageItem = ({
-  id,
-  mine = false,
-  time,
-  authorInitial = "U",
-  avatarBg = "#ffffff",
-  text,
-  businessCard,
-  addressCard,
-  images,
-  files,
-  audio,
-  replyTo,
-  showStatus = false,
-  status = "Seen",
-  className,
-  onReply,
-  onTranslate,
-  initialSrc,
-}: ChatMessageItemProps) => {
-  const originalText = useMemo(() => text ?? "", [text]);
-  const [translated, setTranslated] = useState(false);
-
-  const displayText = translated ? toBanglaDemo(originalText) : originalText;
-
-  const handleTranslateClick = () => {
-    setTranslated((v) => !v);
-    onTranslate?.();
-  };
-
-  const isOnline = true;
-
-  return (
-    <div className={cn("mb-4", className)} data-msg-id={id}>
-      <div className={cn("flex items-end gap-3", mine && "justify-end")}>
-        {!mine ? (
-          <div className={cn(showStatus ? "mb-5" : "mb-0")}>
-            {initialSrc ? (
-              <div className="relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]">
-                <img
-                  src={initialSrc}
-                  alt="avatar image"
-                  className="h-full w-full rounded-full object-cover"
-                />
-
-                {isOnline ? (
-                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
-                ) : null}
-              </div>
-            ) : (
-              <div
-                className="relative grid h-10 w-10 shrink-0 place-items-center rounded-full border border-[#f1f1f1] font-semibold text-[#2c2c2c]"
-                style={{ backgroundColor: avatarBg }}
-              >
-                {authorInitial}
-
-                {isOnline ? (
-                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
-                ) : null}
-              </div>
-            )}
-          </div>
-        ) : null}
-
-        <div className="flex w-full flex-col gap-1">
-          <div
-            className={cn(
-              "text-xs font-light text-[#636363]",
-              mine ? "text-right" : "text-left",
-            )}
-          >
-            {time}
-          </div>
-
-          <div className={cn("flex w-full flex-col gap-1", mine ? "items-end" : "items-start")}>
-            {/* Reply preview */}
-            <div className={cn("flex w-full", mine ? "justify-end" : "justify-start")}>
-              {replyTo ? <ReplyCard jumpOnClick refMsg={replyTo} compact className="mb-1" /> : null}
-            </div>
-
-            {businessCard ? <ChatBusinessCard mine={mine} card={businessCard} /> : null}
-            {addressCard ? <ChatAddressCard mine={mine} card={addressCard} /> : null}
-
-            {files?.length ? (
-              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
-                <ChatBubbleFiles files={files} />
-              </MessageHoverActions>
-            ) : null}
-
-            {images?.length ? (
-              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
-                <ChatBubbleImages images={images} />
-              </MessageHoverActions>
-            ) : null}
-
-            {audio ? (
-              <MessageHoverActions
-                mine={mine}
-                onReply={onReply}
-                onTranslate={onTranslate}
-                isItemButton={["replay", "translate"]}
-              >
-                <ChatBubbleAudio mine={mine} audio={audio} />
-              </MessageHoverActions>
-            ) : null}
-
-            {typeof text === "string" && text.length > 0 ? (
-              <MessageHoverActions
-                mine={mine}
-                onReply={onReply}
-                onTranslate={handleTranslateClick}
-                isItemButton={["replay", "translate"]}
-                activeButtons={translated ? ["translate"] : []}
-              >
-                <ChatBubbleText mine={mine} text={displayText} />
-              </MessageHoverActions>
-            ) : null}
-
-            {showStatus ? (
-              <div className={cn("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left")}>
-                {status}
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ChatMessageItem;
+// components/ui/chat/ChatMessageItem.tsx
+"use client";
+
+import clsx from "clsx";
+import React from "react";
+import ChatAddressCard from "./message-items/ChatAddressCard";
+import ChatBubbleAudio from "./message-items/ChatBubbleAudio";
+import ChatBubbleFiles from "./message-items/ChatBubbleFiles";
+import ChatBubbleImages from "./message-items/ChatBubbleImages";
+import ChatBubbleText from "./message-items/ChatBubbleText";
+import ChatBusinessCard from "./message-items/ChatBusinessCard";
+import MessageHoverActions from "./MessageHoverActions";
+import ReplyCard from "./ReplyCard";
+import type { AddressCard, BusinessCard, MessageRef } from "./types";
+
+/** super-simple demo translator for your seed data */
+const toBanglaDemo = (s: string) => {
+  const map: Record<string, string> = {
+    Hi: "হাই",
+    "Do you have a freight forwarder in China?": "আপনার কি চীনে কোনো ফ্রেইট ফরওয়ার্ডার আছে?",
+    "This conversation is empty. Say hi 👋": "এই কথোপকথনটি খালি । হাই হাই হাই বলুন 👋",
+    "Can we schedule a call for tomorrow?": "আমরা কি আগামীকাল একটি কল নির্ধারণ করতে পারি?",
+    "Sure, what time suits you?": "অবশ্যই, আপনার জন্য কোন সময়টি সুবিধাজনক?",
+    "Welcome to Global Marketplace": "গ্লোবাল মার্কেটপ্লেসে আপনাকে স্বাগতম 🎉",
+    "Happy to be here!": "এখানে থাকতে পেরে আনন্দিত!",
+  };
+  if (map[s]) {
+    return map[s];
+  }
+  return `বাংলা ${s}`;
+};
+
+export type ChatAudio = { src?: string; duration?: string };
+export type ChatFile = {
+  name: string;
+  sizeMB: number;
+  ext: string;
+  href?: string;
+  downloadName?: string;
+};
+
+export type ChatMessageItemProps = {
+  id: string;
+  mine?: boolean;
+  time: string;
+  authorInitial?: string;
+  avatarBg?: string;
+
+  text?: string;
+  businessCard?: BusinessCard;
+  addressCard?: AddressCard;
+  images?: string[];
+  files?: ChatFile[];
+  audio?: ChatAudio;
+
+  replyTo?: MessageRef;
+  showStatus?: boolean;
+  status?: string;
+  className?: string;
+
+  onReply?: () => void;
+  onTranslate?: () => void; // optional external hook
+
+  initialSrc?: string;
+};
+
+const ChatMessageItem: React.FC<ChatMessageItemProps> = ({
+  id,
+  mine = false,
+  time,
+  authorInitial = "U",
+  avatarBg = "#ffffff",
+  text,
+  businessCard,
+  addressCard,
+  images,
+  files,
+  audio,
+  replyTo,
+  showStatus = false,
+  status = "Seen",
+  className,
+  onReply,
+  onTranslate,
+  initialSrc,
+}) => {
+  // translation state only affects the text bubble
+  const originalTextRef = React.useRef(text ?? "");
+  const [translated, setTranslated] = React.useState(false);
+  const displayText = translated ? toBanglaDemo(originalTextRef.current) : originalTextRef.current;
+
+  const handleTranslateClick = () => {
+    setTranslated((v) => !v); // toggle EN ⇄ BN
+    onTranslate?.(); // still let parent know if needed
+  };
+
+  const isOnline = true;
+
+  return (
+    <div className={clsx("mb-4", className)} data-msg-id={id}>
+      <div className={clsx("flex items-end gap-3", mine && "justify-end")}>
+        {!mine && (
+          <div className={`${showStatus ? "mb-5" : "mb-0"}`}>
+            {initialSrc ? (
+              <div className="relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]">
+                <img
+                  src={initialSrc}
+                  alt="avatar image"
+                  className="h-full w-full rounded-full object-cover"
+                />
+
+                {isOnline && (
+                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
+                )}
+              </div>
+            ) : (
+              <div
+                className="relative grid h-10 w-10 shrink-0 place-items-center rounded-full border border-[#f1f1f1] font-semibold text-[#2c2c2c]"
+                style={{ backgroundColor: avatarBg }}
+              >
+                {authorInitial}
+
+                {isOnline && (
+                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className={clsx("flex flex-col gap-1 w-full")}>
+          <div
+            className={clsx(
+              " text-xs font-light text-[#636363]",
+              mine ? "text-right" : "text-left",
+            )}
+          >
+            {time}
+          </div>
+
+          <div className={clsx("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start")}>
+            {/* reply-to preview */}
+            <div className={clsx("flex w-full", mine ? "justify-end" : "justify-start")}>
+              {replyTo && <ReplyCard jumpOnClick refMsg={replyTo} compact className="mb-1" />}
+            </div>
+
+            {businessCard ? <ChatBusinessCard mine={mine} card={businessCard} /> : null}
+            {addressCard ? <ChatAddressCard mine={mine} card={addressCard} /> : null}
+
+            {images?.length ? (
+              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
+                <ChatBubbleImages images={images} />
+              </MessageHoverActions>
+            ) : null}
+
+            {files?.length ? (
+              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
+                <ChatBubbleFiles files={files} />
+              </MessageHoverActions>
+            ) : null}
+
+            {audio ? (
+              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
+                <ChatBubbleAudio mine={mine} audio={audio} />
+              </MessageHoverActions>
+            ) : null}
+
+            {typeof text === "string" && text.length > 0 ? (
+              <MessageHoverActions
+                mine={mine}
+                onReply={onReply}
+                onTranslate={handleTranslateClick}
+                // show both buttons for text; mark Translate active when toggled
+                isItemButton={["replay", "translate"]}
+                activeButtons={translated ? ["translate"] : []}
+              >
+                <ChatBubbleText mine={mine} text={displayText} />
+              </MessageHoverActions>
+            ) : null}
+
+            {showStatus && (
+              <div className={clsx("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left")}>
+                {status}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatMessageItem;