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}
+{#if object?.reactions && object.reactions > 0}
-  <div class="footer flex-col p-inline contrast mt-2">
+  <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,7 +73,12 @@
 
   let download: HTMLAnchorElement
 
-  $: imgStyle = isImage(value.type)
+  $: 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,
@@ -82,12 +89,16 @@
         ${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">
+  {#if value}
     <a
       class="no-line"
       style:flex-shrink={0}
@@ -157,6 +168,7 @@
         </span>
       </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 value}
     <RemovedAttachmentPresenter {value} />
+  {/if}
 {:else}
   <AttachmentPresenter {value} />
 {/if}
-{/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 isAsideShown = false
-  let isLoading = 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">
+        {#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}
+        {#if withShowMore}
           <ShowMore>
             <div class="clear-mins">
               <MessageViewer message={value.message} />
-            <AttachmentDocList {value} />
+              <AttachmentDocList {value} {attachments} />
               {#each links as link}
                 <LinkPresenter {link} />
               {/each}
             </div>
           </ShowMore>
+        {:else}
+          <div class="clear-mins">
+            <MessageViewer message={value.message} />
+            <AttachmentDocList {value} {attachments} />
+            {#each links as link}
+              <LinkPresenter {link} />
+            {/each}
+          </div>
+        {/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>