Fix threads and attachments overflow for large messages (#9950)

* Fix large message display

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* Clean up

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* Clean up

Signed-off-by: Artem Savchenko <armisav@gmail.com>

---------

Signed-off-by: Artem Savchenko <armisav@gmail.com>

packages/ui/src/components/ShowMore.svelte

@@ -21,9 +21,9 @@
   export let limit: number = 240
   export let ignore: boolean = false
   export let fixed: boolean = false
+  export let bigger: boolean = false
 
   let cHeight: number
-  let bigger: boolean = false
   let crop: boolean = false
 
   const toggle = (): void => {

plugins/communication-resources/src/components/message/MessageBody.svelte

@@ -35,6 +35,10 @@
   export let hideAvatar: boolean = false
   export let hideHeader: boolean = false
   export let showThreads: boolean = true
+  export let collapsible: boolean = true
+  export let maxHeight: string = '30rem'
+
+  let isShowMoreActive: boolean = false
 
   function formatDate (date: Date): string {
     return date.toLocaleTimeString('default', {
@@ -58,8 +62,8 @@
 
     <div class="message__content">
       {#if !isEditing && message.content !== ''}
-        <div class="message__text">
-          <MessageContentViewer {message} {card} {author} />
+        <div class="message__text" class:with-showmore={isShowMoreActive}>
+          <MessageContentViewer {message} {card} {author} {collapsible} {maxHeight} bind:isShowMoreActive />
         </div>
       {:else if isEditing}
         <MessageInput
@@ -114,8 +118,8 @@
         {/if}
       </div>
       {#if !isEditing}
-        <div class="message__text">
-          <MessageContentViewer {message} {card} {author} />
+        <div class="message__text" class:with-showmore={isShowMoreActive}>
+          <MessageContentViewer {message} {card} {author} {collapsible} {maxHeight} bind:isShowMoreActive />
         </div>
       {:else if isEditing}
         <MessageInput
@@ -219,6 +223,11 @@
     max-width: 100%;
     user-select: text;
     flex: 1;
+
+    &.with-showmore {
+      position: relative; // This ensures ShowMore button positions relative to this container
+      margin-bottom: 1rem;
+    }
   }
 
   .time-container {

plugins/communication-resources/src/components/message/MessageContentViewer.svelte

@@ -17,20 +17,22 @@
   import { MessageViewer as MarkupMessageViewer } from '@hcengineering/presentation'
   import { Markdown, Message, MessageID } from '@hcengineering/communication-types'
   import { Card } from '@hcengineering/card'
-  import { Label } from '@hcengineering/ui'
   import { Person } from '@hcengineering/contact'
   import { Markup } from '@hcengineering/core'
+  import { ShowMore } from '@hcengineering/ui'
 
   import ActivityMessageViewer from './ActivityMessageViewer.svelte'
   import { toMarkup } from '../../utils'
   import { isActivityMessage } from '../../activity'
-  import communication from '../../plugin'
   import { isShownTranslatedMessage, TranslateMessagesStatus, translateMessagesStore } from '../../stores'
   import { translateMessage } from '../../actions'
 
   export let card: Card
   export let message: Message
   export let author: Person | undefined
+  export let collapsible: boolean = true
+  export let maxHeight: string = '30rem'
+  export let isShowMoreActive: boolean = false
 
   let displayMarkup: Markup = toMarkup(message.content)
   let prevContent: Markdown | undefined = undefined
@@ -57,16 +59,20 @@
       })
     }
   }
+
+  function getMaxSize (maxHeight: string): number {
+    const remValue = parseFloat(maxHeight.replace('rem', ''))
+    if (isNaN(remValue) || remValue <= 0) {
+      return 480 // 30rem * 16px
+    }
+    return remValue * 16
+  }
 </script>
 
-{#if isActivityMessage(message)}
-  <ActivityMessageViewer {message} {card} {author} />
-{:else}
-  <MarkupMessageViewer message={displayMarkup} />
-{/if}
-
-<style lang="scss">
-  .removed-label {
-    color: var(--theme-text-placeholder-color);
-  }
-</style>
+<ShowMore limit={getMaxSize(maxHeight)} ignore={!collapsible} bind:bigger={isShowMoreActive}>
+  {#if isActivityMessage(message)}
+    <ActivityMessageViewer {message} {card} {author} />
+  {:else}
+    <MarkupMessageViewer message={displayMarkup} />
+  {/if}
+</ShowMore>

plugins/communication-resources/src/components/message/MessagePresenter.svelte

@@ -17,7 +17,7 @@
   import { Person } from '@hcengineering/contact'
   import { employeeByPersonIdStore, getPersonByPersonId } from '@hcengineering/contact-resources'
   import { Card } from '@hcengineering/card'
-  import { getEventPositionElement, showPopup, Action, Menu, ShowMore } from '@hcengineering/ui'
+  import { getEventPositionElement, showPopup, Action, Menu } from '@hcengineering/ui'
   import type { MessageID, SocialID } from '@hcengineering/communication-types'
   import { Message, MessageType } from '@hcengineering/communication-types'
   import { getResource } from '@hcengineering/platform'
@@ -151,22 +151,22 @@
   class:noHover={readonly}
   style:padding
 >
-  <ShowMore limit={parseFloat(maxHeight.replace('rem', '')) * 16} ignore={!collapsible}>
-    {#if message.type === MessageType.Activity}
-      <OneRowMessageBody {message} {card} {author} {hideAvatar} {hideHeader} />
-    {:else}
-      <MessageBody
-        {message}
-        {card}
-        {author}
-        {isEditing}
-        compact={compact && message.threads.length === 0}
-        {hideAvatar}
-        {hideHeader}
-        {showThreads}
-      />
-    {/if}
-  </ShowMore>
+  {#if message.type === MessageType.Activity}
+    <OneRowMessageBody {message} {card} {author} {hideAvatar} {hideHeader} />
+  {:else}
+    <MessageBody
+      {message}
+      {card}
+      {author}
+      {isEditing}
+      compact={compact && message.threads.length === 0}
+      {hideAvatar}
+      {hideHeader}
+      {showThreads}
+      {collapsible}
+      {maxHeight}
+    />
+  {/if}
 
   {#if showActions}
     <div class="message__actions" class:opened={isActionsPanelOpened}>