MessengerWidget translate LanguageKey

api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json

@@ -19465,6 +19465,174 @@
             "key": "ListForms.ListForm.Workflow.UndefinedUser",
             "en": "Undefined",
             "tr": "Tanımsız"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Title",
+            "en": "Messenger",
+            "tr": "Messenger"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Connected",
+            "en": "Connected",
+            "tr": "Bağlı"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Connecting",
+            "en": "Connecting",
+            "tr": "Bağlanıyor"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Minimize",
+            "en": "Minimize",
+            "tr": "Küçült"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Maximize",
+            "en": "Maximize",
+            "tr": "Büyüt"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.SearchPerson",
+            "en": "Search person",
+            "tr": "Kişi ara"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.MultiSelect",
+            "en": "Multi-select",
+            "tr": "Çoklu seçim"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.MultiSelectEnabled",
+            "en": "Multi-select enabled",
+            "tr": "Çoklu seçim açık"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Online",
+            "en": "Online",
+            "tr": "Online"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Offline",
+            "en": "Offline",
+            "tr": "Offline"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.PeopleSelected",
+            "en": "people selected",
+            "tr": "kişi seçildi"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Chat",
+            "en": "Chat",
+            "tr": "Sohbet"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.GroupMessage",
+            "en": "Group message",
+            "tr": "Toplu mesaj"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.OfflineUserSelected",
+            "en": "Offline user selected",
+            "tr": "Offline kullanıcı seçili"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.SelectPersonToSendMessage",
+            "en": "Select a person to send a message",
+            "tr": "Mesaj göndermek için kişi seçin"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.NoMessagesYet",
+            "en": "No messages yet",
+            "tr": "Henüz mesaj yok"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Me",
+            "en": "Me",
+            "tr": "Ben"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.DeleteMessage",
+            "en": "Delete message",
+            "tr": "Mesajı sil"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.AddFile",
+            "en": "Add file",
+            "tr": "Dosya ekle"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.Emoji",
+            "en": "Emoji",
+            "tr": "Emoji"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.WriteMessage",
+            "en": "Write a message",
+            "tr": "Mesaj yazın"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.OfflineUsersCannotReceiveMessages",
+            "en": "Messages cannot be sent to offline users",
+            "tr": "Offline kullanıcılara mesaj gönderilemez"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.FileSizeLimitExceeded",
+            "en": "File cannot exceed the 10 MB limit",
+            "tr": "Dosya 10 MB sınırını aşamaz"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.FileUploadFailed",
+            "en": "File could not be uploaded",
+            "tr": "Dosya yüklenemedi"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.OnlyOnlineUsersCanReceiveMessages",
+            "en": "You can only send messages to online users",
+            "tr": "Sadece online kullanıcılara mesaj gönderebilirsiniz"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.MessageSendFailed",
+            "en": "Message could not be sent",
+            "tr": "Mesaj gönderilemedi"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.DeleteMessageConfirmation",
+            "en": "Delete message?",
+            "tr": "Mesaj silinsin mi?"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "MessengerWidget.MessageDeleteFailed",
+            "en": "Message could not be deleted",
+            "tr": "Mesaj silinemedi"
         }
     ]
 }

ui/src/components/template/MessengerWidget.tsx

@@ -29,6 +29,7 @@ import {
   FaTrash,
 } from 'react-icons/fa'
 import { IoCheckmarkDone, IoChatbubbleEllipsesOutline, IoSend } from 'react-icons/io5'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 
 const MAX_UPLOAD_SIZE = 10 * 1024 * 1024
 const CONTACT_REFRESH_INTERVAL = 30000
@@ -47,6 +48,7 @@ const MessengerWidget = () => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const messageInputRef = useRef<HTMLTextAreaElement>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
+  const { translate } = useLocalization()
 
   const [open, setOpen] = useState(false)
   const [contacts, setContacts] = useState<MessengerContactDto[]>([])
@@ -71,7 +73,9 @@ const MessengerWidget = () => {
     if (!auth.session.signedIn) return
 
     const unsubscribeMessage = messengerSignalR.onMessage((message) => {
-      setMessages((prev) => (prev.some((item) => item.id === message.id) ? prev : [...prev, message]))
+      setMessages((prev) =>
+        prev.some((item) => item.id === message.id) ? prev : [...prev, message],
+      )
       if (message.senderId !== auth.user.id && (!open || !selectedIds.includes(message.senderId))) {
         setUnreadByContact((current) => ({
           ...current,
@@ -161,16 +165,25 @@ const MessengerWidget = () => {
     return messages.filter((message) => {
       const isOwn = message.senderId === auth.user.id
       const participants = new Set([message.senderId, ...message.recipientIds])
-      return selectedIds.some((id) => participants.has(id)) && (isOwn || selectedIds.includes(message.senderId))
+      return (
+        selectedIds.some((id) => participants.has(id)) &&
+        (isOwn || selectedIds.includes(message.senderId))
+      )
     })
   }, [auth.user.id, messages, selectedIds])
 
   const toggleContact = (id: string) => {
     const contact = contacts.find((item) => item.id === id)
     if (!contact?.isOnline) {
-      toast.push(<Notification title="Offline kullanıcılara mesaj gönderilemez" type="warning" />, {
+      toast.push(
+        <Notification
+          title={translate('::MessengerWidget.OfflineUsersCannotReceiveMessages')}
+          type="warning"
+        />,
+        {
           placement: 'top-end',
-      })
+        },
+      )
       return
     }
 
@@ -187,7 +200,9 @@ const MessengerWidget = () => {
       return
     }
 
-    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
+    )
   }
 
   const toggleMultiSelect = () => {
@@ -215,9 +230,15 @@ const MessengerWidget = () => {
     const nextFiles = Array.from(files)
     const tooLarge = nextFiles.find((file) => file.size > MAX_UPLOAD_SIZE)
     if (tooLarge) {
-      toast.push(<Notification title="Dosya 10 MB sınırını aşamaz" type="warning" />, {
+      toast.push(
+        <Notification
+          title={translate('::MessengerWidget.FileSizeLimitExceeded')}
+          type="warning"
+        />,
+        {
           placement: 'top-end',
-      })
+        },
+      )
       return
     }
 
@@ -228,7 +249,10 @@ const MessengerWidget = () => {
       )
       setAttachments((prev) => [...prev, ...uploaded])
     } catch {
-      toast.push(<Notification title="Dosya yüklenemedi" type="danger" />, { placement: 'top-end' })
+      toast.push(
+        <Notification title={translate('::MessengerWidget.FileUploadFailed')} type="danger" />,
+        { placement: 'top-end' },
+      )
     } finally {
       setUploading(false)
       if (fileInputRef.current) fileInputRef.current.value = ''
@@ -239,9 +263,15 @@ const MessengerWidget = () => {
     const trimmedText = text.trim()
     if (selectedIds.length === 0 || (!trimmedText && attachments.length === 0)) return
     if (!canSendToSelectedContacts) {
-      toast.push(<Notification title="Sadece online kullanıcılara mesaj gönderebilirsiniz" type="warning" />, {
+      toast.push(
+        <Notification
+          title={translate('::MessengerWidget.OnlyOnlineUsersCanReceiveMessages')}
+          type="warning"
+        />,
+        {
           placement: 'top-end',
-      })
+        },
+      )
       return
     }
 
@@ -258,17 +288,23 @@ const MessengerWidget = () => {
         messageInputRef.current?.focus()
       }, 0)
     } catch {
-      toast.push(<Notification title="Mesaj gönderilemedi" type="danger" />, { placement: 'top-end' })
+      toast.push(
+        <Notification title={translate('::MessengerWidget.MessageSendFailed')} type="danger" />,
+        { placement: 'top-end' },
+      )
     }
   }
 
   const deleteMessage = async (messageId: string) => {
-    if (!window.confirm('Mesaj silinsin mi?')) return
+    if (!window.confirm(translate('::MessengerWidget.DeleteMessageConfirmation'))) return
 
     try {
       await messengerSignalR.deleteMessage(messageId)
     } catch {
-      toast.push(<Notification title="Mesaj silinemedi" type="danger" />, { placement: 'top-end' })
+      toast.push(
+        <Notification title={translate('::MessengerWidget.MessageDeleteFailed')} type="danger" />,
+        { placement: 'top-end' },
+      )
     }
   }
 
@@ -294,19 +330,33 @@ const MessengerWidget = () => {
             >
               <div className="flex h-16 items-center justify-between border-b border-gray-200 px-4 dark:border-gray-700">
                 <div className="flex min-w-0 items-center gap-3">
-                  <Avatar size={36} shape="circle" src={auth.user.avatar || AVATAR_URL(auth.user.id, tenantId)} />
+                  <Avatar
+                    size={36}
+                    shape="circle"
+                    src={auth.user.avatar || AVATAR_URL(auth.user.id, tenantId)}
+                  />
                   <div className="min-w-0">
                     <div className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
-                      {auth.user.name || auth.user.userName || 'Messenger'}
+                      {auth.user.name || auth.user.userName || translate('::MessengerWidget.Title')}
                     </div>
                     <div className="flex items-center gap-1 text-xs text-gray-500">
-                      <span className={`h-2 w-2 rounded-full ${connected ? 'bg-emerald-500' : 'bg-gray-400'}`} />
+                      <span
-                      {connected ? 'Bağlı' : 'Bağlanıyor'}
+                        className={`h-2 w-2 rounded-full ${connected ? 'bg-emerald-500' : 'bg-gray-400'}`}
+                      />
+                      {connected
+                        ? translate('::MessengerWidget.Connected')
+                        : translate('::MessengerWidget.Connecting')}
                     </div>
                   </div>
                 </div>
                 <div className="flex shrink-0 items-center gap-1 sm:hidden">
-                  <Tooltip title={maximized ? 'Küçült' : 'Büyüt'}>
+                  <Tooltip
+                    title={
+                      maximized
+                        ? translate('::MessengerWidget.Minimize')
+                        : translate('::MessengerWidget.Maximize')
+                    }
+                  >
                     <Button
                       size="xs"
                       variant="plain"
@@ -323,7 +373,7 @@ const MessengerWidget = () => {
                   size="sm"
                   value={filter}
                   prefix={<FaSearch />}
-                  placeholder="Kişi ara"
+                  placeholder={translate('::MessengerWidget.SearchPerson')}
                   onChange={(event) => setFilter(event.target.value)}
                 />
                 <Button
@@ -332,7 +382,9 @@ const MessengerWidget = () => {
                   block
                   onClick={toggleMultiSelect}
                 >
-                  {multiSelect ? 'Çoklu seçim açık' : 'Çoklu seçim'}
+                  {multiSelect
+                    ? translate('::MessengerWidget.MultiSelectEnabled')
+                    : translate('::MessengerWidget.MultiSelect')}
                 </Button>
               </div>
 
@@ -354,9 +406,15 @@ const MessengerWidget = () => {
                             : 'cursor-not-allowed opacity-60'
                       }`}
                     >
-                      <Avatar size={36} shape="circle" src={AVATAR_URL(contact.id, contact.tenantId || tenantId)} />
+                      <Avatar
+                        size={36}
+                        shape="circle"
+                        src={AVATAR_URL(contact.id, contact.tenantId || tenantId)}
+                      />
                       <span className="min-w-0 flex-1">
-                        <span className="block truncate text-sm font-medium">{contact.fullName}</span>
+                        <span className="block truncate text-sm font-medium">
+                          {contact.fullName}
+                        </span>
                         <span
                           className={`mt-1 inline-flex items-center gap-1 text-xs font-medium ${
                             contact.isOnline ? 'text-emerald-600' : 'text-red-500'
@@ -367,7 +425,9 @@ const MessengerWidget = () => {
                               contact.isOnline ? 'bg-emerald-500' : 'bg-red-500'
                             }`}
                           />
-                          {contact.isOnline ? 'Online' : 'Offline'}
+                          {contact.isOnline
+                            ? translate('::MessengerWidget.Online')
+                            : translate('::MessengerWidget.Offline')}
                         </span>
                       </span>
                       {contactUnread > 0 && (
@@ -375,7 +435,9 @@ const MessengerWidget = () => {
                           {contactUnread > 99 ? '99+' : contactUnread}
                         </span>
                       )}
-                      {active && contactUnread === 0 && <IoCheckmarkDone className="shrink-0 text-lg" />}
+                      {active && contactUnread === 0 && (
+                        <IoCheckmarkDone className="shrink-0 text-lg" />
+                      )}
                     </button>
                   )
                 })}
@@ -400,7 +462,10 @@ const MessengerWidget = () => {
                     <Avatar
                       size={36}
                       shape="circle"
-                      src={AVATAR_URL(selectedContacts[0].id, selectedContacts[0].tenantId || tenantId)}
+                      src={AVATAR_URL(
+                        selectedContacts[0].id,
+                        selectedContacts[0].tenantId || tenantId,
+                      )}
                     />
                   )}
                   {selectedContacts.length > 1 && (
@@ -413,24 +478,30 @@ const MessengerWidget = () => {
                       {selectedContacts.length === 1
                         ? selectedContacts[0].fullName
                         : selectedContacts.length > 1
-                          ? `${selectedContacts.length} kişi seçildi`
+                          ? `${selectedContacts.length} ${translate('::MessengerWidget.PeopleSelected')}`
-                          : 'Sohbet'}
+                          : translate('::MessengerWidget.Chat')}
                     </div>
                     <div className="truncate text-xs text-gray-500">
                       {selectedContacts.length === 1
-                        ? `${selectedContacts[0].isOnline ? 'Online' : 'Offline'} - ${
+                        ? `${selectedContacts[0].isOnline ? translate('::MessengerWidget.Online') : translate('::MessengerWidget.Offline')} - ${
                             selectedContacts[0].email || selectedContacts[0].userName
                           }`
                         : selectedContacts.length > 1
                           ? canSendToSelectedContacts
-                            ? 'Toplu mesaj'
+                            ? translate('::MessengerWidget.GroupMessage')
-                            : 'Offline kullanici secili'
+                            : translate('::MessengerWidget.OfflineUserSelected')
-                          : 'Mesaj göndermek için kişi seçin'}
+                          : translate('::MessengerWidget.SelectPersonToSendMessage')}
                     </div>
                   </div>
                 </div>
                 <div className="flex shrink-0 items-center gap-1">
-                  <Tooltip title={maximized ? 'Küçült' : 'Büyüt'}>
+                  <Tooltip
+                    title={
+                      maximized
+                        ? translate('::MessengerWidget.Minimize')
+                        : translate('::MessengerWidget.Maximize')
+                    }
+                  >
                     <Button
                       size="xs"
                       variant="plain"
@@ -445,7 +516,7 @@ const MessengerWidget = () => {
               <div className="flex-1 overflow-y-auto bg-white px-4 py-3 dark:bg-gray-800">
                 {visibleMessages.length === 0 && (
                   <div className="flex h-full items-center justify-center text-sm text-gray-400">
-                    Henüz mesaj yok
+                    {translate('::MessengerWidget.NoMessagesYet')}
                   </div>
                 )}
 
@@ -453,8 +524,13 @@ const MessengerWidget = () => {
                   const own = message.senderId === auth.user.id
                   const deletable = canDeleteMessage(message, auth.user.id)
                   return (
-                    <div key={message.id} className={`mb-3 flex ${own ? 'justify-end' : 'justify-start'}`}>
+                    <div
-                      <div className={`group flex max-w-[76%] items-start gap-1.5 ${own ? 'flex-row-reverse' : ''}`}>
+                      key={message.id}
+                      className={`mb-3 flex ${own ? 'justify-end' : 'justify-start'}`}
+                    >
+                      <div
+                        className={`group flex max-w-[76%] items-start gap-1.5 ${own ? 'flex-row-reverse' : ''}`}
+                      >
                         <div
                           className={`rounded-lg px-3 py-2 shadow-sm ${
                             own
@@ -473,10 +549,18 @@ const MessengerWidget = () => {
                               }
                             />
                             <span className="max-w-[160px] truncate">
-                            {own ? auth.user.name || auth.user.userName || 'Ben' : message.senderName}
+                              {own
+                                ? auth.user.name ||
+                                  auth.user.userName ||
+                                  translate('::MessengerWidget.Me')
+                                : message.senderName}
                             </span>
                           </div>
-                        {message.text && <div className="whitespace-pre-wrap text-sm leading-5">{message.text}</div>}
+                          {message.text && (
+                            <div className="whitespace-pre-wrap text-sm leading-5">
+                              {message.text}
+                            </div>
+                          )}
                           {message.attachments.length > 0 && (
                             <div className="mt-2 space-y-1">
                               {message.attachments.map((file) => (
@@ -486,11 +570,15 @@ const MessengerWidget = () => {
                                   target="_blank"
                                   rel="noreferrer"
                                   className={`block rounded-md px-2 py-1 text-xs ${
-                                  own ? 'bg-emerald-700 text-white' : 'bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-100'
+                                    own
+                                      ? 'bg-emerald-700 text-white'
+                                      : 'bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-100'
                                   }`}
                                 >
                                   <span className="block truncate">{file.fileName}</span>
-                                <span className="opacity-75">{formatFileSize(file.fileSize)}</span>
+                                  <span className="opacity-75">
+                                    {formatFileSize(file.fileSize)}
+                                  </span>
                                 </a>
                               ))}
                             </div>
@@ -506,7 +594,7 @@ const MessengerWidget = () => {
                         {own && deletable && (
                           <button
                             type="button"
-                            title="Mesaji sil"
+                            title={translate('::MessengerWidget.DeleteMessage')}
                             className="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] text-gray-400 opacity-0 transition hover:bg-red-500 hover:text-white group-hover:opacity-100 focus:opacity-100"
                             onClick={() => deleteMessage(message.id)}
                           >
@@ -562,7 +650,7 @@ const MessengerWidget = () => {
                       className="hidden"
                       onChange={(event) => handleFiles(event.target.files)}
                     />
-                    <Tooltip title="Dosya ekle">
+                    <Tooltip title={translate('::MessengerWidget.AddFile')}>
                       <Button
                         type="button"
                         size="sm"
@@ -574,7 +662,7 @@ const MessengerWidget = () => {
                         onClick={() => fileInputRef.current?.click()}
                       />
                     </Tooltip>
-                    <Tooltip title="Emoji">
+                    <Tooltip title={translate('::MessengerWidget.Emoji')}>
                       <Button
                         type="button"
                         size="sm"
@@ -587,7 +675,7 @@ const MessengerWidget = () => {
                     <textarea
                       ref={messageInputRef}
                       value={text}
-                      placeholder="Mesaj yazın"
+                      placeholder={translate('::MessengerWidget.WriteMessage')}
                       rows={1}
                       autoFocus
                       disabled={!canSendToSelectedContacts}
@@ -606,7 +694,9 @@ const MessengerWidget = () => {
                       variant="solid"
                       icon={<IoSend />}
                       className="shrink-0"
-                      disabled={!canSendToSelectedContacts || (!text.trim() && attachments.length === 0)}
+                      disabled={
+                        !canSendToSelectedContacts || (!text.trim() && attachments.length === 0)
+                      }
                       onClick={sendMessage}
                     />
                   </div>
@@ -617,7 +707,7 @@ const MessengerWidget = () => {
         </div>
       )}
 
-      <Tooltip title="Messenger">
+      <Tooltip title={translate('::MessengerWidget.Title')}>
         <button
           type="button"
           onClick={() => (open ? closeWidget() : setOpen(true))}