TSK-1046 Gmail/telegram messages collaborators TSK-1097 Inbox scroll (#2928)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/contact-resources/src/components/ChannelPanel.svelte

@@ -0,0 +1,45 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import contact, { Channel } from '@hcengineering/contact'
+  import { Class, Ref } from '@hcengineering/core'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { AnyComponent, Component } from '@hcengineering/ui'
+
+  export let _id: Ref<Channel>
+  export let _class: Ref<Class<Channel>>
+  export let embedded = false
+
+  const client = getClient()
+
+  let channel: Channel | undefined = undefined
+
+  const query = createQuery()
+  $: query.query(_class, { _id }, (res) => {
+    ;[channel] = res
+  })
+
+  async function getPresenter (channel: Channel | undefined): Promise<AnyComponent | undefined> {
+    if (channel === undefined) return
+    const provider = await client.findOne(contact.class.ChannelProvider, { _id: channel.provider })
+    return provider?.presenter
+  }
+</script>
+
+{#await getPresenter(channel) then presenter}
+  {#if presenter}
+    <Component is={presenter} props={{ embedded, _id: channel?.attachedTo, _class: channel?.attachedToClass }} />
+  {/if}
+{/await}

plugins/contact-resources/src/components/activity/ActivityChannelPresenter.svelte

@@ -0,0 +1,43 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import contact, { Channel, ChannelProvider, Contact, getName } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { createQuery } from '@hcengineering/presentation'
+  import { CircleButton, tooltip } from '@hcengineering/ui'
+  import { DocNavLink } from '@hcengineering/view-resources'
+
+  export let value: Channel
+  let provider: ChannelProvider | undefined
+  const providerQuery = createQuery()
+  $: providerQuery.query(contact.class.ChannelProvider, { _id: value.provider }, (res) => ([provider] = res))
+  let target: Contact | undefined
+  const query = createQuery()
+  $: query.query(contact.class.Contact, { _id: value.attachedTo as Ref<Contact> }, (res) => ([target] = res))
+</script>
+
+<div class="flex-row-center" use:tooltip={{ label: getEmbeddedLabel(value.value) }}>
+  {#if provider}
+    <CircleButton icon={provider.icon} size={'small'} />
+  {/if}
+  {#if target}
+    <div class="ml-1">
+      <DocNavLink object={target}>
+        {getName(target)}
+      </DocNavLink>
+    </div>
+  {/if}
+</div>