Fix message rerender on new message create (#6025)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte

@@ -36,7 +36,6 @@
   export let withShowMore: boolean = true
   export let attachmentImageSize: 'x-large' | undefined = undefined
   export let type: ActivityMessageViewType = 'default'
-  export let showLinksPreview = true
   export let videoPreload = true
   export let hideLink = false
   export let compact = false
@@ -69,7 +68,6 @@
       hoverStyles,
       withShowMore,
       attachmentImageSize,
-      showLinksPreview,
       videoPreload,
       hideLink,
       type,

plugins/chunter-resources/src/components/ChannelScrollView.svelte

@@ -26,7 +26,7 @@
   } from '@hcengineering/activity-resources'
   import { Class, Doc, getDay, Ref, Timestamp } from '@hcengineering/core'
   import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
-  import { getEmbeddedLabel, getResource } from '@hcengineering/platform'
+  import { getResource } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { Loading, Scroller, ScrollParams } from '@hcengineering/ui'
   import { afterUpdate, beforeUpdate, onDestroy, onMount, tick } from 'svelte'
@@ -61,6 +61,8 @@
   export let loadMoreAllowed = true
   export let isAsideOpened = false
 
+  const doc = object
+
   const dateSelectorHeight = 30
   const headerHeight = 52
   const minMsgHeightRem = 2
@@ -668,7 +670,7 @@
         {/if}
 
         <ActivityMessagePresenter
-          doc={object}
+          {doc}
           value={message}
           skipLabel={skipLabels}
           {showEmbedded}
@@ -677,7 +679,6 @@
           shouldScroll={isSelected}
           withShowMore={false}
           attachmentImageSize="x-large"
-          showLinksPreview={false}
           type={canGroup ? 'short' : 'default'}
           hideLink
         />

plugins/chunter-resources/src/components/chat-message/ChatMessageHeader.svelte

@@ -13,44 +13,19 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc } from '@hcengineering/core'
   import { Label } from '@hcengineering/ui'
-  import { Person } from '@hcengineering/contact'
-  import { ChatMessage, ChatMessageViewlet } from '@hcengineering/chunter'
-  import { getLinkData, LinkData, ActivityDocLink } from '@hcengineering/activity-resources'
   import notification from '@hcengineering/notification'
+  import { IntlString } from '@hcengineering/platform'
+  import { Timestamp } from '@hcengineering/core'
 
-  import chunter from '../../plugin'
-
-  export let message: ChatMessage
-  export let person: Person | undefined
-  export let viewlet: ChatMessageViewlet | undefined
-  export let object: Doc | undefined
-  export let parentObject: Doc | undefined
-  export let skipLabel = false
-  export let hideLink = false
-
-  let linkData: LinkData | undefined = undefined
-
-  $: !hideLink &&
-    getLinkData(message, object, parentObject, person).then((data) => {
-      linkData = data
-    })
+  export let editedOn: Timestamp | undefined
+  export let label: IntlString | undefined
 </script>
 
-{#if !skipLabel}
-  <span class="text-sm lower"> <Label label={viewlet?.label ?? chunter.string.SentMessage} /></span>
-
-  {#if linkData}
-    <ActivityDocLink
-      preposition={linkData.preposition}
-      object={linkData.object}
-      panelComponent={linkData.panelComponent}
-      title={linkData.title}
-    />
-  {/if}
+{#if label}
+  <span class="text-sm lower"> <Label {label} /></span>
 {/if}
-{#if message.editedOn}
+{#if editedOn}
   <span class="text-sm lower"><Label label={notification.string.Edited} /></span>
 {/if}
 

plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte

@@ -14,14 +14,14 @@
 -->
 <script lang="ts">
   import { Person, PersonAccount } from '@hcengineering/contact'
-  import { personByIdStore } from '@hcengineering/contact-resources'
-  import core, { Account, Class, Doc, getCurrentAccount, Ref, WithLookup } from '@hcengineering/core'
-  import { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
+  import { personAccountByIdStore, personByIdStore } from '@hcengineering/contact-resources'
+  import { Class, Doc, getCurrentAccount, Ref, WithLookup } from '@hcengineering/core'
+  import { getClient, MessageViewer } from '@hcengineering/presentation'
   import { AttachmentDocList, AttachmentImageSize } from '@hcengineering/attachment-resources'
-  import { getDocLinkTitle, LinkPresenter } from '@hcengineering/view-resources'
+  import { getDocLinkTitle } from '@hcengineering/view-resources'
   import { Action, Button, IconEdit, ShowMore } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import activity, { ActivityMessageViewType, DisplayActivityMessage } from '@hcengineering/activity'
+  import activity, { ActivityMessage, ActivityMessageViewType, DisplayActivityMessage } from '@hcengineering/activity'
   import { ActivityDocLink, ActivityMessageTemplate } from '@hcengineering/activity-resources'
   import chunter, { ChatMessage, ChatMessageViewlet } from '@hcengineering/chunter'
   import { Attachment } from '@hcengineering/attachment'
@@ -46,7 +46,6 @@
   export let hoverStyles: 'borderedHover' | 'filledHover' = 'borderedHover'
   export let withShowMore: boolean = true
   export let attachmentImageSize: AttachmentImageSize = 'auto'
-  export let showLinksPreview = true
   export let videoPreload = true
   export let hideLink = false
   export let compact = false
@@ -57,53 +56,42 @@
   const { pendingCreatedDocs } = client
   const hierarchy = client.getHierarchy()
   const STALE_TIMEOUT_MS = 5000
-  const userQuery = createQuery()
   const currentAccount = getCurrentAccount()
 
-  let user: PersonAccount | undefined = undefined
+  let account: PersonAccount | undefined = undefined
   let person: Person | undefined = undefined
 
   let parentMessage: DisplayActivityMessage | undefined = undefined
-  let parentObject: Doc | undefined
   let object: Doc | undefined
 
   let refInput: ChatMessageInput
 
   let viewlet: ChatMessageViewlet | undefined
-  ;[viewlet] = value
-    ? client.getModel().findAllSync(chunter.class.ChatMessageViewlet, {
-      objectClass: value.attachedToClass,
-      messageClass: value._class
-    })
-    : []
+  ;[viewlet] =
+    value !== undefined
+      ? client.getModel().findAllSync(chunter.class.ChatMessageViewlet, {
+        objectClass: value.attachedToClass,
+        messageClass: value._class
+      })
+      : []
 
-  $: value &&
-    userQuery.query(core.class.Account, { _id: value.createdBy }, (res: Account[]) => {
-      user = res[0] as PersonAccount
-    })
+  $: accountId = value?.createdBy
+  $: account = accountId !== undefined ? $personAccountByIdStore.get(accountId as Ref<PersonAccount>) : undefined
+  $: person = account?.person !== undefined ? $personByIdStore.get(account.person) : undefined
 
-  $: person = user?.person && $personByIdStore.get(user.person)
-
-  $: value &&
+  $: value !== undefined &&
     getParentMessage(value.attachedToClass, value.attachedTo).then((res) => {
       parentMessage = res as DisplayActivityMessage
     })
 
-  $: if (doc && value?.attachedTo === doc._id) {
+  $: if (doc !== undefined && value?.attachedTo === doc._id) {
     object = doc
-  } else if (value) {
+  } else if (value !== undefined) {
     void client.findOne(value.attachedToClass, { _id: value.attachedTo }).then((result) => {
       object = result
     })
   }
 
-  $: parentMessage &&
-    client.findOne(parentMessage.attachedToClass, { _id: parentMessage.attachedTo }).then((result) => {
-      parentObject = result
-    })
-
-  $: links = showLinksPreview ? getLinks(value?.message) : []
-
   let stale = false
   let markStaleId: NodeJS.Timeout | undefined
   $: pending = value?._id !== undefined && $pendingCreatedDocs[value._id]
@@ -119,42 +107,20 @@
     stale = false
   }
 
-  function getLinks (content?: string): HTMLLinkElement[] {
-    if (!content) {
-      return []
-    }
-    const parser = new DOMParser()
-    const parent = parser.parseFromString(content, 'text/html').firstChild?.childNodes[1] as HTMLElement
-    return parseLinks(parent.childNodes)
-  }
-
-  function parseLinks (nodes: NodeListOf<ChildNode>): HTMLLinkElement[] {
-    const res: HTMLLinkElement[] = []
-    nodes.forEach((node) => {
-      if (node.nodeType !== Node.TEXT_NODE) {
-        if (node.nodeName === 'A') {
-          res.push(node as HTMLLinkElement)
-        }
-        res.push(...parseLinks(node.childNodes))
-      }
-    })
-    return res
-  }
-
-  async function getParentMessage (_class: Ref<Class<Doc>>, _id: Ref<Doc>) {
+  async function getParentMessage (_class: Ref<Class<Doc>>, _id: Ref<Doc>): Promise<ActivityMessage | undefined> {
     if (hierarchy.isDerived(_class, activity.class.ActivityMessage)) {
-      return await client.findOne(_class, { _id })
+      return await client.findOne<ActivityMessage>(_class, { _id: _id as Ref<ActivityMessage> })
     }
   }
 
-  async function handleEditAction () {
+  async function handleEditAction (): Promise<void> {
     isEditing = true
   }
 
   let isEditing = false
   let additionalActions: Action[] = []
 
-  $: isOwn = user !== undefined && user._id === currentAccount._id
+  $: isOwn = account !== undefined && account._id === currentAccount._id
 
   $: additionalActions = [
     ...(isOwn
@@ -208,7 +174,7 @@
     {onClick}
   >
     <svelte:fragment slot="header">
-      <ChatMessageHeader {object} {parentObject} message={value} {viewlet} {person} {skipLabel} {hideLink} />
+      <ChatMessageHeader editedOn={value.editedOn} label={skipLabel ? undefined : viewlet?.label} />
     </svelte:fragment>
     <svelte:fragment slot="content">
       {#if !isEditing}
@@ -217,18 +183,12 @@
             <div class="clear-mins">
               <MessageViewer message={value.message} />
               <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} {videoPreload} />
-              {#each links as link}
-                <LinkPresenter {link} />
-              {/each}
             </div>
           </ShowMore>
         {:else}
           <div class="clear-mins">
             <MessageViewer message={value.message} />
             <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} {videoPreload} />
-            {#each links as link}
-              <LinkPresenter {link} />
-            {/each}
           </div>
         {/if}
       {:else if object}

plugins/chunter-resources/src/components/threads/ThreadMessagePresenter.svelte

@@ -73,7 +73,6 @@
     {withShowMore}
     {attachmentImageSize}
     {videoPreload}
-    showLinksPreview={false}
     {onClick}
   />
 {/if}

plugins/chunter-resources/src/components/threads/ThreadParentPresenter.svelte

@@ -19,11 +19,4 @@
   export let message: ActivityMessage
 </script>
 
-<ActivityMessagePresenter
-  value={message}
-  hideFooter
-  hoverStyles="filledHover"
-  withShowMore={false}
-  skipLabel
-  showLinksPreview={false}
-/>
+<ActivityMessagePresenter value={message} hideFooter hoverStyles="filledHover" withShowMore={false} skipLabel />