Improve chat loading (#4627)

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

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

@@ -34,6 +34,7 @@
   export let withFlatActions: boolean = true
   export let hoverable = true
   export let hoverStyles: 'borderedHover' | 'filledHover' = 'borderedHover'
+  export let withShowMore: boolean = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -62,6 +63,7 @@
       withFlatActions,
       hoverable,
       hoverStyles,
+      withShowMore,
       onClick,
       onReply
     }}

plugins/activity-resources/src/components/reactions/ReactionsPresenter.svelte

@@ -37,8 +37,8 @@
   }
 </script>
 
-{#if object !== undefined && reactions.length > 0}
-  <div class="footer flex-col p-inline contrast mt-2">
+{#if object?.reactions && object.reactions > 0}
+  <div class="footer flex-col p-inline contrast mt-2 min-h-6">
     <Reactions {reactions} {object} on:click={handleClick} />
   </div>
 {/if}

plugins/attachment-resources/src/components/AttachmentDocList.svelte

@@ -21,16 +21,22 @@
   import AttachmentList from './AttachmentList.svelte'
 
   export let value: Doc & { attachments?: number }
+  export let attachments: Attachment[] | undefined = []
 
   const query = createQuery()
   const savedAttachmentsQuery = createQuery()
 
   let savedAttachmentsIds: Ref<Attachment>[] = []
-  let attachments: Attachment[] = []
+  let resAttachments: Attachment[] = []
 
-  $: updateQuery(value)
+  $: updateQuery(value, attachments)
+
+  function updateQuery (value: Doc & { attachments?: number }, attachments?: Attachment[]): void {
+    if (attachments !== undefined) {
+      resAttachments = attachments
+      return
+    }
 
-  function updateQuery (value: Doc & { attachments?: number }): void {
     if (value && value.attachments && value.attachments > 0) {
       query.query(
         attachment.class.Attachment,
@@ -38,11 +44,11 @@
           attachedTo: value._id
         },
         (res) => {
-          attachments = res
+          resAttachments = res
         }
       )
     } else {
-      attachments = []
+      resAttachments = []
     }
   }
 
@@ -51,4 +57,4 @@
   })
 </script>
 
-<AttachmentList {attachments} {savedAttachmentsIds} />
+<AttachmentList attachments={resAttachments} {savedAttachmentsIds} />

plugins/attachment-resources/src/components/AttachmentPresenter.svelte

@@ -20,7 +20,7 @@
   import presentation, { PDFViewer, getFileUrl } from '@hcengineering/presentation'
   import filesize from 'filesize'
 
-  export let value: Attachment
+  export let value: Attachment | undefined
   export let removable: boolean = false
   export let showPreview = false
 
@@ -47,6 +47,8 @@
   }
 
   function clickHandler (e: MouseEvent): void {
+    if (value === undefined) return
+
     if (!openEmbedded(value.type)) return
     e.preventDefault()
     e.stopPropagation()
@@ -71,8 +73,13 @@
 
   let download: HTMLAnchorElement
 
-  $: imgStyle = isImage(value.type)
-    ? `background-image: url(${getFileUrl(value.file, 'large')});
+  $: imgStyle = getImageStyle(value)
+
+  function getImageStyle (value?: Attachment): string {
+    if (value === undefined) return ''
+
+    return isImage(value.type)
+      ? `background-image: url(${getFileUrl(value.file, 'large')});
        background-image: -webkit-image-set(
         ${getFileUrl(value.file, 'large')} 1x,
         ${getFileUrl(value.file, getIconSize2x('large'))} 2x
@@ -81,82 +88,87 @@
         ${getFileUrl(value.file, 'large')} 1x,
         ${getFileUrl(value.file, getIconSize2x('large'))} 2x
       );`
-    : ''
+      : ''
+  }
+
   function dragStart (event: DragEvent): void {
+    if (value === undefined) return
     event.dataTransfer?.setData('application/contentType', value.type)
   }
 </script>
 
 <div class="flex-row-center attachment-container">
-  <a
-    class="no-line"
-    style:flex-shrink={0}
-    href={getFileUrl(value.file, 'full', value.name)}
-    download={value.name}
-    on:click={clickHandler}
-    on:mousedown={middleClickHandler}
-    on:dragstart={dragStart}
-  >
-    {#if showPreview}
-      <div
-        class="flex-center icon"
-        class:svg={value.type === 'image/svg+xml'}
-        class:image={isImage(value.type)}
-        style={imgStyle}
-      >
-        {#if progress}
-          <div class="flex p-3">
-            <Loading />
-          </div>
-        {:else if !isImage(value.type)}{iconLabel(value.name)}{/if}
-      </div>
-    {:else}
-      <div class="flex-center icon">
-        {iconLabel(value.name)}
-      </div>
-    {/if}
-  </a>
-  <div class="flex-col info-container">
-    <div class="name">
-      <a
-        href={getFileUrl(value.file, 'full', value.name)}
-        download={value.name}
-        on:click={clickHandler}
-        on:mousedown={middleClickHandler}
-      >
-        {trimFilename(value.name)}
-      </a>
-    </div>
-    <div class="info-content flex-row-center">
-      {filesize(value.size, { spacer: '' })}
-      <span class="actions inline-flex clear-mins ml-1 gap-1">
-        <span>•</span>
+  {#if value}
+    <a
+      class="no-line"
+      style:flex-shrink={0}
+      href={getFileUrl(value.file, 'full', value.name)}
+      download={value.name}
+      on:click={clickHandler}
+      on:mousedown={middleClickHandler}
+      on:dragstart={dragStart}
+    >
+      {#if showPreview}
+        <div
+          class="flex-center icon"
+          class:svg={value.type === 'image/svg+xml'}
+          class:image={isImage(value.type)}
+          style={imgStyle}
+        >
+          {#if progress}
+            <div class="flex p-3">
+              <Loading />
+            </div>
+          {:else if !isImage(value.type)}{iconLabel(value.name)}{/if}
+        </div>
+      {:else}
+        <div class="flex-center icon">
+          {iconLabel(value.name)}
+        </div>
+      {/if}
+    </a>
+    <div class="flex-col info-container">
+      <div class="name">
         <a
-          class="no-line colorInherit"
           href={getFileUrl(value.file, 'full', value.name)}
           download={value.name}
-          bind:this={download}
+          on:click={clickHandler}
+          on:mousedown={middleClickHandler}
         >
-          <Label label={presentation.string.Download} />
+          {trimFilename(value.name)}
         </a>
-        {#if removable && value.readonly !== true}
+      </div>
+      <div class="info-content flex-row-center">
+        {filesize(value.size, { spacer: '' })}
+        <span class="actions inline-flex clear-mins ml-1 gap-1">
           <span>•</span>
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <span
-            class="remove-link"
-            on:click={(ev) => {
-              ev.stopPropagation()
-              ev.preventDefault()
-              dispatch('remove', value)
-            }}
+          <a
+            class="no-line colorInherit"
+            href={getFileUrl(value.file, 'full', value.name)}
+            download={value.name}
+            bind:this={download}
           >
-            <Label label={presentation.string.Delete} />
-          </span>
-        {/if}
-      </span>
+            <Label label={presentation.string.Download} />
+          </a>
+          {#if removable && value.readonly !== true}
+            <span>•</span>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <span
+              class="remove-link"
+              on:click={(ev) => {
+                ev.stopPropagation()
+                ev.preventDefault()
+                dispatch('remove', value)
+              }}
+            >
+              <Label label={presentation.string.Delete} />
+            </span>
+          {/if}
+        </span>
+      </div>
     </div>
-  </div>
+  {/if}
 </div>
 
 <style lang="scss">

plugins/attachment-resources/src/components/activity/AttachmentsUpdatedMessage.svelte

@@ -35,10 +35,10 @@
     })
 </script>
 
-{#if value}
-  {#if message.action === 'remove'}
+{#if message.action === 'remove'}
+  {#if value}
     <RemovedAttachmentPresenter {value} />
-  {:else}
-    <AttachmentPresenter {value} />
   {/if}
+{:else}
+  <AttachmentPresenter {value} />
 {/if}

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

@@ -384,6 +384,7 @@
           hoverStyles="filledHover"
           isHighlighted={isSelected}
           shouldScroll={isSelected}
+          withShowMore={false}
         />
       </div>
     {/each}

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

@@ -20,6 +20,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { combineActivityMessages } from '@hcengineering/activity-resources'
   import { Channel } from '@hcengineering/chunter'
+  import attachment from '@hcengineering/attachment'
 
   import ChannelComponent from './Channel.svelte'
   import ChannelHeader from './ChannelHeader.svelte'
@@ -38,8 +39,8 @@
 
   let activityMessages: ActivityMessage[] = []
   let isThreadOpened = false
-  let isAsideShown = true
-  let isLoading = false
+  let isAsideShown = false
+  let isLoading = true
 
   let filters: Ref<ActivityMessagesFilter>[] = []
 
@@ -69,7 +70,12 @@
           })
         }
       },
-      { sort: { createdOn: SortingOrder.Ascending } }
+      {
+        sort: { createdOn: SortingOrder.Ascending },
+        lookup: {
+          _id: { attachments: attachment.class.Attachment }
+        }
+      }
     )
 
     if (!res) {
@@ -112,7 +118,7 @@
         <ChannelComponent {context} {object} {filters} messages={activityMessages} />
       </div>
 
-      {#if withAside && isAsideShown}
+      {#if withAside && isAsideShown && !isLoading}
         <Separator name="aside" float={false} index={0} />
         <div class="popupPanel-body__aside" class:float={false} class:shown={withAside && isAsideShown}>
           <Separator name="aside" float index={0} />

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

@@ -22,6 +22,7 @@
 
   export let value: DirectMessage
   export let disabled = false
+  export let shouldShowAvatar = true
 
   const client = getClient()
 </script>
@@ -30,7 +31,9 @@
   {#await getDmName(client, value) then name}
     <NavLink app={chunterId} space={value._id} {disabled}>
       <div class="flex-presenter">
-        <DirectIcon {value} />
+        {#if shouldShowAvatar}
+          <DirectIcon {value} />
+        {/if}
         <span class="label">{name}</span>
       </div>
     </NavLink>

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

@@ -139,6 +139,7 @@
     border-radius: 0.5rem;
     padding: 0.25rem 0.5rem;
     width: fit-content;
+    height: 2.125rem;
     margin-left: -0.5rem;
 
     .plus {

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Person, PersonAccount } from '@hcengineering/contact'
   import { personByIdStore } from '@hcengineering/contact-resources'
-  import { Account, Class, Doc, getCurrentAccount, Ref } from '@hcengineering/core'
+  import { Account, Class, Doc, getCurrentAccount, Ref, WithLookup } from '@hcengineering/core'
   import { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
   import core from '@hcengineering/core/lib/component'
   import { AttachmentDocList } from '@hcengineering/attachment-resources'
@@ -25,11 +25,12 @@
   import activity, { DisplayActivityMessage } from '@hcengineering/activity'
   import { ActivityDocLink, ActivityMessageTemplate } from '@hcengineering/activity-resources'
   import chunter, { ChatMessage, ChatMessageViewlet } from '@hcengineering/chunter'
+  import { Attachment } from '@hcengineering/attachment'
 
   import ChatMessageHeader from './ChatMessageHeader.svelte'
   import ChatMessageInput from './ChatMessageInput.svelte'
 
-  export let value: ChatMessage | undefined
+  export let value: WithLookup<ChatMessage> | undefined
   export let showNotify: boolean = false
   export let isHighlighted: boolean = false
   export let isSelected: boolean = false
@@ -45,6 +46,7 @@
   export let hoverable = true
   export let inline = false
   export let hoverStyles: 'borderedHover' | 'filledHover' = 'borderedHover'
+  export let withShowMore: boolean = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -52,7 +54,6 @@
   const hierarchy = client.getHierarchy()
 
   const userQuery = createQuery()
-
   const currentAccount = getCurrentAccount()
 
   let user: PersonAccount | undefined = undefined
@@ -62,6 +63,8 @@
   let parentObject: Doc | undefined
   let object: Doc | undefined
 
+  let refInput: ChatMessageInput
+
   let viewlet: ChatMessageViewlet | undefined
   ;[viewlet] = value
     ? client.getModel().findAllSync(chunter.class.ChatMessageViewlet, {
@@ -145,7 +148,8 @@
     ...actions
   ]
 
-  let refInput: ChatMessageInput
+  let attachments: Attachment[] | undefined = undefined
+  $: attachments = value?.$lookup?.attachments as Attachment[] | undefined
 </script>
 
 {#if inline && object}
@@ -184,15 +188,25 @@
     </svelte:fragment>
     <svelte:fragment slot="content">
       {#if !isEditing}
-        <ShowMore>
+        {#if withShowMore}
+          <ShowMore>
+            <div class="clear-mins">
+              <MessageViewer message={value.message} />
+              <AttachmentDocList {value} {attachments} />
+              {#each links as link}
+                <LinkPresenter {link} />
+              {/each}
+            </div>
+          </ShowMore>
+        {:else}
           <div class="clear-mins">
             <MessageViewer message={value.message} />
-            <AttachmentDocList {value} />
+            <AttachmentDocList {value} {attachments} />
             {#each links as link}
               <LinkPresenter {link} />
             {/each}
           </div>
-        </ShowMore>
+        {/if}
       {:else if object}
         <ChatMessageInput
           bind:this={refInput}

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

@@ -36,6 +36,7 @@
   export let excludedActions: string[] = []
   export let hoverable = true
   export let inline = false
+  export let withShowMore: boolean = true
   export let hoverStyles: 'borderedHover' | 'filledHover' = 'borderedHover'
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
@@ -71,6 +72,7 @@
     {actions}
     {hoverable}
     {hoverStyles}
+    {withShowMore}
     {onClick}
     {onReply}
   />

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

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

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

@@ -51,7 +51,7 @@
 <div class="body h-full w-full">
   <Scroller padding="0.75rem 0.5rem">
     {#each threads as thread}
-      <ActivityMessagePresenter value={thread} onClick={() => openMessageFromSpecial(thread)} />
+      <ActivityMessagePresenter value={thread} onClick={() => openMessageFromSpecial(thread)} withShowMore={false} />
     {/each}
   </Scroller>
 </div>