diff --git a/src/pages/instance/Chat/index.tsx b/src/pages/instance/Chat/index.tsx index a5584c4..0c5782f 100644 --- a/src/pages/instance/Chat/index.tsx +++ b/src/pages/instance/Chat/index.tsx @@ -1,4 +1,5 @@ import "./style.css"; +import { useTranslation } from "react-i18next"; import { User, MessageCircle, PlusIcon } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; import { Link, useNavigate, useParams } from "react-router-dom"; @@ -28,6 +29,7 @@ const formatJid = (remoteJid: string): string => { }; function Chat() { + const { t } = useTranslation(); const isMD = useMediaQuery("(min-width: 768px)"); const lastMessageRef = useRef(null); const [textareaHeight] = useState("auto"); @@ -49,7 +51,7 @@ function Chat() { const chatMap = new Map(); // First add all chats from React Query - chats.forEach((chat) => chatMap.set(chat.remoteJid, chat)); + chats.forEach((chat: { remoteJid: any; }) => chatMap.set(chat.remoteJid, chat)); // Then add/update with real-time chats realtimeChats.forEach((chat) => { @@ -181,19 +183,19 @@ function Chat() {
-
Chat
+
{t("chat.title")}
- Contatos - Grupos + {t("chat.contacts")} + {t("chat.groups")}
-
Contatos
+
{t("chat.contacts")}
{chats?.map( (chat: ChatType) => chat.remoteJid.includes("@s.whatsapp.net") && ( diff --git a/src/pages/instance/Chat/messages.tsx b/src/pages/instance/Chat/messages.tsx index e7eee2a..d820a61 100644 --- a/src/pages/instance/Chat/messages.tsx +++ b/src/pages/instance/Chat/messages.tsx @@ -1,3 +1,5 @@ +import { useTranslation } from "react-i18next"; + import { DropdownMenu, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"; import { ArrowRightIcon, ChevronDownIcon, SparkleIcon, User, ZapIcon } from "lucide-react"; import { RefObject, useEffect, useMemo, useState } from "react"; @@ -32,7 +34,7 @@ type MessagesProps = { }; // Utility function to format dates like WhatsApp -const formatDateSeparator = (date: Date): string => { +const formatDateSeparator = (date: Date, t: any): string => { const today = new Date(); const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1); @@ -41,22 +43,22 @@ const formatDateSeparator = (date: Date): string => { // Check if it's today if (messageDate.toDateString() === today.toDateString()) { - return "Hoje"; + return t("chat.date.today"); } // Check if it's yesterday if (messageDate.toDateString() === yesterday.toDateString()) { - return "Ontem"; + return t("chat.date.yesterday"); } // Check if it's within the last week const daysDiff = Math.floor((today.getTime() - messageDate.getTime()) / (1000 * 60 * 60 * 24)); if (daysDiff < 7) { - return messageDate.toLocaleDateString("pt-BR", { weekday: "long" }); + return messageDate.toLocaleDateString(t("chat.date.location"), { weekday: "long" }); } // For older dates, show the full date - return messageDate.toLocaleDateString("pt-BR", { + return messageDate.toLocaleDateString(t("chat.date.location"), { day: "2-digit", month: "2-digit", year: "numeric", @@ -139,6 +141,8 @@ const getMessageText = (messageObj: any): string => { // Component to render different message types based on messageType const MessageContent = ({ message }: { message: Message }) => { + const { t } = useTranslation(); + const messageType = message.messageType as string; switch (messageType) { @@ -149,10 +153,10 @@ const MessageContent = ({ message }: { message: Message }) => {
👤
- Contact + {t("chat.contact")}
{contactMsg.displayName &&

{contactMsg.displayName}

} - {contactMsg.vcard &&

Contact card

} + {contactMsg.vcard &&

{t("chat.contactCard")}

}
); } @@ -163,7 +167,7 @@ const MessageContent = ({ message }: { message: Message }) => {
📍
- Location + {t("chat.messageType.location.title")}
{locationMsg.name &&

{locationMsg.name}

} {locationMsg.address &&

{locationMsg.address}

} @@ -173,7 +177,7 @@ const MessageContent = ({ message }: { message: Message }) => { target="_blank" rel="noopener noreferrer" className="text-primary hover:underline text-sm mt-1 inline-block"> - View on Maps + {t("chat.messageType.location.viewOnMaps")} )}
@@ -207,8 +211,8 @@ const MessageContent = ({ message }: { message: Message }) => { /> ) : (
-

Image couldn't be loaded

-

Missing base64 data and mediaUrl

+

{t("chat.messageType.image.notFound")}

+

{t("chat.media.missingData")}

)} {message.message.imageMessage?.caption &&

{message.message.imageMessage.caption}

} @@ -235,8 +239,8 @@ const MessageContent = ({ message }: { message: Message }) => { /> ) : (
-

Video couldn't be loaded

-

Missing base64 data and mediaUrl

+

{t("chat.messageType.video.notFound")}

+

{t("chat.media.missingData")}

)} {message.message.videoMessage?.caption &&

{message.message.videoMessage.caption}

} @@ -252,12 +256,12 @@ const MessageContent = ({ message }: { message: Message }) => { return audioSrc ? ( ) : (
-

Audio couldn't be loaded

-

Missing base64 data and mediaUrl

+

{t("chat.messageType.audio.notFound")}

+

{t("chat.media.missingData")}

); @@ -280,7 +284,7 @@ const MessageContent = ({ message }: { message: Message }) => { return (
- Unknown message type: {messageType} + {t("chat.messageType.unknownMessage")}: {messageType}
{JSON.stringify(message.message, null, 2)}
@@ -289,6 +293,7 @@ const MessageContent = ({ message }: { message: Message }) => { }; function Messages({ textareaRef, handleTextareaChange, textareaHeight, lastMessageRef, scrollToBottom }: MessagesProps) { + const { t } = useTranslation(); const { instance } = useInstance(); const [messageText, setMessageText] = useState(""); const [isSending, setIsSending] = useState(false); @@ -416,7 +421,7 @@ function Messages({ textareaRef, handleTextareaChange, textareaHeight, lastMessa const messageMap = new Map(); // First add all messages from React Query - messages.forEach((message) => messageMap.set(message.key.id, message)); + messages.forEach((message: { key: { id: any; }; }) => messageMap.set(message.key.id, message)); // Then add/update with real-time messages realtimeMessages.forEach((message) => { @@ -523,7 +528,7 @@ function Messages({ textareaRef, handleTextareaChange, textareaHeight, lastMessa if (dateString !== currentDate) { if (currentGroup.length > 0) { grouped.push({ - date: formatDateSeparator(new Date(currentDate)), + date: formatDateSeparator(new Date(currentDate), t), messages: currentGroup, }); } @@ -536,7 +541,7 @@ function Messages({ textareaRef, handleTextareaChange, textareaHeight, lastMessa if (currentGroup.length > 0) { grouped.push({ - date: formatDateSeparator(new Date(currentDate)), + date: formatDateSeparator(new Date(currentDate), t), messages: currentGroup, }); } @@ -651,7 +656,7 @@ function Messages({ textareaRef, handleTextareaChange, textareaHeight, lastMessa
{instance && }