@banbox/chat 1.0.8 → 1.0.9

package/src/ui/{chat/drop-up → drop-up}/BusinessCardDropup.tsx

@@ -3,9 +3,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon, ChatXIcon } from "../../../icons";
+import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon, ChatXIcon } from "../../icons";
 
-import { cn } from "../../../utils/cn";
+import { cn } from "../../utils/cn";
 import type { BusinessCard } from "../types";
 
 /* =======================
@@ -19,6 +19,8 @@ type BusinessCardDropupProps = {
   /** Position against this button (like EmojiDropup) */
   anchorRef?: React.RefObject<HTMLElement | null>;
   className?: string;
+  /** Called when the Edit button is clicked — opens business info modal */
+  onEdit?: () => void;
 };
 
 /* =======================
@@ -49,6 +51,7 @@ const BusinessCardDropup = ({
   onSend,
   anchorRef,
   className,
+  onEdit,
 }: BusinessCardDropupProps) => {
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
@@ -233,7 +236,16 @@ const BusinessCardDropup = ({
 
       {/* Footer actions */}
       <div className="mt-3 flex justify-end gap-2">
-
+        <button
+          type="button"
+          onClick={() => {
+            onClose();
+            onEdit?.();
+          }}
+          className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+        >
+          Edit
+        </button>
         <button
           type="button"
           disabled={disabled}

package/src/ui/{chat/drop-up → drop-up}/EmojiDropup.tsx

@@ -98,7 +98,7 @@ const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, clas
       aria-label="Emoji picker"
       className={clsx("emoji-dropup", className)}
       style={{
-        zIndex: "9999",
+        zIndex: 99999, // Must be above chat panel z-index (10002)
         width: WIDTH,
         left: pos?.left ?? -9999,
         top: pos?.top ?? -9999,

package/src/ui/{chat/message-items → message-items}/ChatAddressCard.tsx

@@ -1,12 +1,12 @@
-// components/ui/chat/message-items/ChatAddressCard.tsx
+// ui/message-items/ChatAddressCard.tsx
 "use client";
 
 import clsx from "clsx";
 import React from "react";
 
-import { ChatPhoneCallIcon, BadgeHomeIcon, MapPinIcon } from "../../../icons";
-import { BadgeOfficeIcon } from "../../../icons";
-import { cn } from "../../../utils/cn";
+import { ChatPhoneCallIcon, BadgeHomeIcon, MapPinIcon } from "../../icons";
+import { BadgeOfficeIcon } from "../../icons";
+import { cn } from "../../utils/cn";
 import type { AddressCard } from "../types";
 
 type Props = {

package/src/ui/{chat/message-items → message-items}/ChatBubbleFiles.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import React from "react";
-import { FileDownloadIcon, FileIcon } from "../../../icons";
+import { FileDownloadIcon, FileIcon } from "../../icons";
 
 export type ChatFile = {
   /** Visible filename */

package/src/ui/{chat/message-items → message-items}/ChatBubbleImages.tsx

@@ -1,9 +1,9 @@
-// components/ui/chat/message-items/ChatBubbleImages.tsx
+// ui/message-items/ChatBubbleImages.tsx
 "use client";
 
 import React from "react";
 
-import { useGallery } from "../../../contexts/GalleryContext";
+import { useGallery } from "../../contexts/GalleryContext";
 
 type ImgTileProps = {
   src: string;

package/src/ui/{chat/message-items → message-items}/ChatBusinessCard.tsx

@@ -3,7 +3,7 @@
 import clsx from "clsx";
 import React from "react";
 
-import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon } from "../../../icons";
+import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon } from "../../icons";
 import type { BusinessCard } from "../types";
 
 // const AVATAR_SIZE = 60; // uncomment if avatar section is re-enabled

package/src/ui/{chat/scrollToMessage.ts → scrollToMessage.ts}

@@ -1,4 +1,4 @@
-// components/chat/ui/chat/scrollToMessage.ts
+// ui/scrollToMessage.ts
 export function scrollToMessageById(messageId: string) {
   if (!messageId) {
     return;

package/src/ui/{chat/types.ts → types.ts}

@@ -1,5 +1,5 @@
-// components/chat/ui/chat/types.ts
-import type { MessageAudio, MessageFile } from "../../types";
+// ui/types.ts
+import type { MessageAudio, MessageFile } from "../types";
 
 // Re-export global types so UI components can import from this local file
 export type { MessageAudio as ChatAudio, MessageFile as ChatFile };

package/src/modals/chat/ChatTranslateSettingsModal.tsx

@@ -1,180 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import React, { useState } from "react";
-import { createPortal } from "react-dom";
-
-import { ChatInfoIcon } from "../../icons";
-import Button from "../../ui/Button";
-import Select from "../../ui/Select";
-
-/* ───────── Types ───────── */
-
-export type TranslateSettings = {
-  incomingTarget?: string;
-  autoIncoming: boolean;
-  enableOutgoing: boolean;
-  outgoingFrom: string;
-  outgoingTo: string;
-};
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  onSave: (settings: TranslateSettings) => void;
-  initial?: Partial<TranslateSettings>;
-  className?: string;
-  /** Controls layout / placement */
-  variant?: "single" | "group";
-};
-
-/* Language options */
-const LANG_OPTIONS = [
-  "English",
-  "Bangla",
-  "Arabic",
-  "Chinese",
-  "French",
-  "German",
-  "Hindi",
-  "Italian",
-  "Japanese",
-  "Korean",
-  "Portuguese",
-  "Russian",
-  "Spanish",
-  "Turkish",
-  "Urdu",
-].map((l) => ({ label: l, value: l }));
-
-const ChatTranslateSettingsModal: React.FC<Props> = ({
-  open,
-  onClose,
-  onSave,
-  initial,
-  className,
-  variant = "group",
-}) => {
-  const [incomingTarget, setIncomingTarget] = useState(
-    initial?.incomingTarget ?? "",
-  );
-
-  // ESC to close
-  React.useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  const isSingle = variant === "single";
-
-  const handleSave = () => {
-    onSave({
-      incomingTarget,
-      autoIncoming: true,
-      enableOutgoing: false,
-      outgoingFrom: "English",
-      outgoingTo: "Bangla",
-    });
-  };
-
-  const content = (
-    <div
-      className={clsx(
-        isSingle
-          ? "fixed inset-0 z-9999 flex"
-          : "absolute inset-0 z-50 flex items-center justify-center",
-      )}
-      onClick={() => onClose()}
-    >
-      {/* Backdrop */}
-      <div className={isSingle ? "fixed inset-0 bg-black/30" : "absolute inset-0 bg-black/30"} />
-
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="translate-settings-title"
-        onClick={(e) => e.stopPropagation()}
-        className={clsx(
-          isSingle
-            ? "fixed bottom-6 right-6 w-[500px] max-w-[95vw]"
-            : "relative w-[500px] max-w-[95vw]",
-          "z-10000 overflow-visible rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
-          className,
-        )}
-      >
-        {/* Header */}
-        <div className="flex h-[44px] w-full items-center rounded-t-md bg-[#f8f8f8] px-6 py-[7px] shadow-[0px_2px_2px_rgba(47,47,47,0.08)]">
-          <h2
-            id="translate-settings-title"
-            className="w-full text-[20px] font-semibold text-black"
-          >
-            Translation Settings
-          </h2>
-        </div>
-
-        {/* Body */}
-        <div className="p-4">
-          <div className="grid gap-2">
-            <span className="text-[12px] font-medium text-black">
-              Translate message into
-            </span>
-
-            <Select
-              options={LANG_OPTIONS}
-              value={incomingTarget}
-              onChange={setIncomingTarget}
-              placeholder="Select Language"
-              size={36}
-            />
-          </div>
-
-          <div className="mt-6 flex items-start gap-1.5 text-[#FF5300]">
-            <ChatInfoIcon className="h-4 w-4 shrink-0" />
-            <p className="text-xs leading-relaxed">
-              Automatically translate incoming messages. The language you save
-              here will be used to display all incoming messages. You can choose
-              from Spanish, Russian, French, Arabic, Portuguese, Turkish, Bangla,
-              and among others.
-            </p>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex h-[52px] items-center justify-end rounded-b-md bg-[#f8f8f8] px-6">
-          <div className="flex items-center gap-3">
-            <Button
-              onClick={onClose}
-              variant="outlined"
-              color="black"
-              size="34"
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleSave}
-              variant="filled"
-              color="black"
-              size="34"
-            >
-              Update
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  if (isSingle) {
-    return createPortal(content, document.body);
-  }
-
-  return content;
-};
-
-export default ChatTranslateSettingsModal;