Gmail public messages (#907)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>

plugins/gmail-resources/src/components/Chats.svelte

@@ -30,29 +30,31 @@
   export let channel: Channel
   export let newMessage: boolean
 
+  const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/
+
   let messages: Message[] = []
-  let account: EmployeeAccount | undefined
+  let accounts: EmployeeAccount[] = []
   let enabled: boolean
   let selected: Set<Ref<SharedMessage>> = new Set<Ref<SharedMessage>>()
   let selectable = false
-  let me = ''
 
   const messagesQuery = createQuery()
-  const accauntQuery = createQuery()
+  const accauntsQuery = createQuery()
   const settingsQuery = createQuery()
   const accountId = getCurrentAccount()._id
 
   $: messagesQuery.query(
     gmail.class.Message,
-    { modifiedBy: accountId, attachedTo: channel._id },
+    { attachedTo: channel._id },
     (res) => {
       messages = res
     },
     { sort: { modifiedOn: SortingOrder.Descending } }
   )
 
-  $: accauntQuery.query(contact.class.EmployeeAccount, { _id: accountId as Ref<EmployeeAccount> }, (result) => {
-    account = result[0]
+  $: accountsIds = messages.map((p) => p.modifiedBy as Ref<EmployeeAccount>)
+  $: accauntsQuery.query(contact.class.EmployeeAccount, { _id: { $in: accountsIds }}, (result) => {
+    accounts = result
   })
 
   $: settingsQuery.query(
@@ -60,7 +62,6 @@
     { type: gmail.integrationType.Gmail, space: accountId as string as Ref<Space> },
     (res) => {
       enabled = res.length > 0
-      me = res[0].value
     }
   )
   const client = getClient()
@@ -68,7 +69,7 @@
   async function share (): Promise<void> {
     const selectedMessages = messages.filter((m) => selected.has(m._id as string as Ref<SharedMessage>))
     await client.addCollection(gmail.class.SharedMessages, object.space, object._id, object._class, 'gmailSharedMessages', {
-      messages: convertMessages(selectedMessages)
+      messages: convertMessages(selectedMessages, accounts)
     })
     clear()
   }
@@ -79,21 +80,27 @@
     selected = selected
   }
 
-  function convertMessages (messages: Message[]): SharedMessage[] {
+  function convertMessages (messages: Message[], accounts: EmployeeAccount[]): SharedMessage[] {
     return messages.map((m) => {
       return {
         ...m,
         _id: m._id as string as Ref<SharedMessage>,
-        sender: account ? getName(m, account, true) : '',
-        receiver: account ? getName(m, account, false) : ''
+        sender: getName(m, accounts, true),
+        receiver: getName(m, accounts, false)
       }
     })
   }
 
-  function getName (message: Message, account: EmployeeAccount, sender: boolean): string {
-    return message.incoming === sender
-      ? `${formatName(object.name)} (${channel.value})`
-      : `${formatName(account.name)} (${me})`
+
+  function getName (message: Message, accounts: EmployeeAccount[], sender: boolean): string {
+    if (message.incoming === sender) {
+      return `${formatName(object.name)} (${channel.value})`
+    } else {
+      const account = accounts.find((p) => p._id === message.modifiedBy)
+      const value = message.incoming ? message.to : message.from
+      const email = value.match(EMAIL_REGEX)
+      return account ? `${formatName(account.name)} (${email?.[0] ?? value})` : email?.[0] ?? value
+    }
   }
 </script>
 
@@ -157,7 +164,7 @@
 <div class="h-full right-content">
   <ScrollBox vertical stretch>
     {#if messages}
-      <Messages messages={convertMessages(messages)} {selectable} bind:selected on:select />
+      <Messages messages={convertMessages(messages, accounts)} {selectable} bind:selected on:select />
     {/if}
   </ScrollBox>
 </div>

plugins/gmail-resources/src/components/Message.svelte

@@ -15,7 +15,6 @@
 -->
 <script lang="ts">
   import type { SharedMessage } from '@anticrm/gmail'
-  import { formatName } from '@anticrm/contact'
   import { CheckBox } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import { getTime } from '../utils'
@@ -37,10 +36,11 @@
     <div class="mr-4"><CheckBox circle primary bind:checked={selected} /></div>
   {/if}
   <div class="flex-col message" class:selected>
-    <div class="flex-between text-sm mb-4">
-      <div class="content-trans-color overflow-label mr-4">From: <span class="content-accent-color">{formatName(message.sender)}</span></div>
+    <div class="flex-between text-sm mb-1">
+      <div class="content-trans-color overflow-label mr-4">From: <span class="content-accent-color">{message.sender}</span></div>
       <div class="content-trans-color">{getTime(message.modifiedOn)}</div>
     </div>
+    <div class="content-trans-color text-sm overflow-label mr-4 mb-4">To: <span class="content-accent-color">{message.receiver}</span></div>
     <div class="fs-title overflow-label mb-1">
       {message.subject}
     </div>
@@ -62,6 +62,7 @@
     background-color: var(--theme-incoming-msg);
     border-radius: .75rem;
     white-space: nowrap;
+    flex-grow: 1;
 
     &.selected { background-color: var(--primary-button-enabled); }
   }