@banbox/chat 1.0.0

package/src/ui/chat/message-items/ChatBusinessCard.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import clsx from "clsx";
+import React from "react";
+
+import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon } from "../../../icons";
+import type { BusinessCard } from "../types";
+
+// const AVATAR_SIZE = 60; // uncomment if avatar section is re-enabled
+
+type Props = {
+  mine: boolean;
+  card: BusinessCard;
+};
+
+const ChatBusinessCard: React.FC<Props> = ({ mine, card }) => {
+  // const avatarSrc = card.avatarSrc || "/images/avatar-fallback.png";
+
+  return (
+    <div
+      className={clsx(
+        "relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
+        "shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
+        mine ? "ml-auto" : "mr-auto",
+      )}
+      style={{ backgroundImage: "url('/chat/img/card_bg_raw.svg')" }}
+    >
+      <div className="flex h-full items-stretch justify-between gap-4 px-6 py-6">
+        {/* Left content */}
+        <div className="flex min-w-0 flex-1 flex-col justify-between">
+          {/* Name + country */}
+          <div>
+            <h3 className="text-xl font-semibold text-[#004F4F]">{card.name}</h3>
+
+            <div className="h-px w-[105px] bg-black" />
+
+            <div className="mt-[6px] flex items-center gap-2">
+              <img
+                src="https://flagcdn.com/bd.svg"
+                alt="Bangladesh flag"
+                width={24}
+                height={14}
+                className="h-[14px] w-6 rounded-xs object-cover"
+                loading="lazy"
+              />
+              <span className="text-xs font-medium text-[#636363]">
+                {card.country}
+              </span>
+            </div>
+          </div>
+
+          {/* Contact details */}
+          <div className="mt-4 mb-10 space-y-1.5 text-xs text-black">
+            <div className="flex items-center gap-3">
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]">
+                <BusinessInfoIcon className="h-3 w-3 text-[#EA580C]" />
+              </div>
+              <span className="truncate">{card.company}</span>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]">
+                <ChatMailIcon className="h-3 w-3 text-[#EA580C]" />
+              </div>
+              <span className="truncate">{card.email}</span>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]">
+                <ChatPhoneCallIcon className="h-3 w-3 text-[#EA580C]" />
+              </div>
+              <span className="truncate">{card.phone}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right avatar (kept commented as per original behavior) */}
+        {/* 
+        <div className="flex items-start">
+          <img
+            src={avatarSrc}
+            alt={`${card.name ?? "Contact"} avatar`}
+            width={AVATAR_SIZE}
+            height={AVATAR_SIZE}
+            className="rounded-sm border border-[#f1f1f1] object-cover"
+            loading={mine ? "eager" : "lazy"}
+          />
+        </div> 
+        */}
+      </div>
+    </div>
+  );
+};
+
+export default ChatBusinessCard;

package/src/ui/chat/scrollToMessage.ts

@@ -0,0 +1,61 @@
+// components/chat/ui/chat/scrollToMessage.ts
+export function scrollToMessageById(messageId: string) {
+  if (!messageId) {
+    return;
+  }
+
+  const target = document.querySelector<HTMLElement>(`[data-msg-id="${messageId}"]`);
+  if (!target) {
+    return;
+  }
+
+  const scroller = target.closest<HTMLElement>("[data-chat-scroll]");
+
+  // Smooth center scroll
+  if (scroller) {
+    const top = target.offsetTop - scroller.clientHeight / 2 + target.clientHeight / 2;
+    scroller.scrollTo({ top, behavior: "smooth" });
+  } else {
+    target.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+
+  // ── Soft background focus (black @ 5% opacity), no borders ────────────────
+  // We inject a transient absolutely-positioned overlay inside the target.
+  const cleanupId = `focus-overlay-${Date.now()}`;
+  const overlay = document.createElement("div");
+  overlay.id = cleanupId;
+  Object.assign(overlay.style, {
+    position: "absolute",
+    inset: "-4px", // tiny spread so it peeks outside rounded corners
+    borderRadius: "6px",
+    background: "rgba(0,0,0,0.05)", // black / 5% opacity
+    pointerEvents: "none",
+    zIndex: "1",
+    transition: "opacity 220ms ease",
+    opacity: "0",
+  });
+
+  // Ensure the target can host an absolutely positioned child
+  const prevPos = target.style.position;
+  if (getComputedStyle(target).position === "static") {
+    target.style.position = "relative";
+  }
+
+  target.appendChild(overlay);
+  // fade in
+  requestAnimationFrame(() => (overlay.style.opacity = "1"));
+
+  // Remove highlight after 1.2s with a quick fade-out
+  window.setTimeout(() => {
+    overlay.style.opacity = "0";
+    window.setTimeout(() => {
+      overlay.remove();
+      // restore inline position if we modified it
+      if (!prevPos) {
+        target.style.removeProperty("position");
+      } else {
+        target.style.position = prevPos;
+      }
+    }, 240);
+  }, 1200);
+}

package/src/ui/chat/types.ts

@@ -0,0 +1,37 @@
+// components/chat/ui/chat/types.ts
+import type { ChatAudio, ChatFile } from "./ChatMessageItem";
+
+export type MessageRef = {
+  id: string;
+  author: string | { name: string };
+  time?: string;
+  text?: string;
+  images?: string[];
+  files?: ChatFile[];
+  audio?: ChatAudio;
+};
+
+export type BusinessCard = {
+  avatarSrc: string;
+  name: string;
+  country: string; // e.g. "Bangladesh"
+  flag?: string; // emoji or small image URL; default 🏳️ if not given
+  company: string;
+  email: string;
+  phone: string;
+};
+
+export type AddressCard = {
+  name: string;
+  label?: "Home" | "Office";
+  businessName?: string;
+  mobileNumber: string;
+  country: string;
+  district?: string | null;
+  policeStation?: string | null;
+  state?: string | null;
+  city?: string | null;
+  postalCode?: string;
+  addressLine: string;
+  landMark?: string | null;
+};

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}