UBERF-18: add reactions for comments (#3899)

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

plugins/activity-resources/package.json

@@ -40,7 +40,6 @@
     "@hcengineering/presentation": "^0.6.2",
     "@hcengineering/activity": "^0.6.0",
     "svelte": "3.55.1",
-    "@hcengineering/chunter": "^0.6.11",
     "@hcengineering/text-editor": "^0.6.0",
     "@hcengineering/contact": "^0.6.19",
     "@hcengineering/notification": "^0.6.15",

plugins/activity-resources/src/components/Activity.svelte

@@ -13,17 +13,17 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import activity, { DisplayTx, TxViewlet } from '@hcengineering/activity'
-  import chunter from '@hcengineering/chunter'
+  import activity, { ActivityExtension, DisplayTx, TxViewlet } from '@hcengineering/activity'
   import core, { Class, Doc, Ref, SortingOrder } from '@hcengineering/core'
   import notification, { DocUpdateTx, DocUpdates, Writable } from '@hcengineering/notification'
   import { getResource } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Component, Grid, Label, Lazy, Spinner } from '@hcengineering/ui'
+  import { Grid, Label, Lazy, Spinner } from '@hcengineering/ui'
   import { ActivityKey, activityKey, newActivity } from '../activity'
-  import { filterCollectionTxes } from '../utils'
+  import { filterCollectionTxes, getExtensions } from '../utils'
   import ActivityFilter from './ActivityFilter.svelte'
   import TxView from './TxView.svelte'
+  import ActivityExtensionComponent from './ActivityExtensionComponent.svelte'
 
   export let object: Doc
   export let showCommenInput: boolean = true
@@ -32,6 +32,14 @@
   export let focusIndex: number = -1
   export let boundary: HTMLElement | undefined = undefined
 
+  let extensions: ActivityExtension[] = []
+
+  $: if (object) {
+    getExtensions(client, object._class).then((res?: ActivityExtension[]) => {
+      extensions = res || []
+    })
+  }
+
   getResource(notification.function.GetNotificationClient).then((res) => {
     updatesStore = res().docUpdatesStore
   })
@@ -166,7 +174,7 @@
 </div>
 {#if showCommenInput}
   <div class="ref-input">
-    <Component is={chunter.component.CommentInput} props={{ object, focusIndex, boundary }} />
+    <ActivityExtensionComponent {extensions} kind="input" props={{ object, focusIndex, boundary }} />
   </div>
 {/if}
 

plugins/activity-resources/src/components/ActivityExtensionComponent.svelte

@@ -0,0 +1,29 @@
+<!--
+// 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 { Component } from '@hcengineering/ui'
+  import { ActivityExtension, ActivityExtensionKind } from '@hcengineering/activity'
+
+  export let kind: ActivityExtensionKind
+  export let extensions: ActivityExtension[] = []
+  export let props: Record<string, any> = {}
+</script>
+
+{#each extensions as extension}
+  {@const component = extension.components?.[kind]}
+  {#if component}
+    <Component is={component} {props} />
+  {/if}
+{/each}

plugins/activity-resources/src/components/TxView.svelte

@@ -14,11 +14,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { DisplayTx, TxViewlet } from '@hcengineering/activity'
+  import { tick } from 'svelte'
+  import type { ActivityExtension, DisplayTx, TxViewlet } from '@hcengineering/activity'
   import attachment from '@hcengineering/attachment'
-  import chunter from '@hcengineering/chunter'
   import contact, { Person, PersonAccount, getName } from '@hcengineering/contact'
-  import core, { AnyAttribute, Class, Doc, Ref, TxCUD, getCurrentAccount } from '@hcengineering/core'
+  import core, { AnyAttribute, Doc, Ref, TxCUD, getCurrentAccount } from '@hcengineering/core'
   import { Asset } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import ui, {
@@ -36,11 +36,13 @@
   } from '@hcengineering/ui'
   import type { AttributeModel } from '@hcengineering/view'
   import { Menu, ObjectPresenter } from '@hcengineering/view-resources'
-  import { tick } from 'svelte'
+
+  import TxViewTx from './TxViewTx.svelte'
+  import ActivityExtensionComponent from './ActivityExtensionComponent.svelte'
+
   import { ActivityKey } from '../activity'
   import activity from '../plugin'
-  import { TxDisplayViewlet, getPrevValue, getValue, updateViewlet } from '../utils'
-  import TxViewTx from './TxViewTx.svelte'
+  import { TxDisplayViewlet, getPrevValue, getValue, updateViewlet, getExtensions } from '../utils'
 
   export let tx: DisplayTx
   export let viewlets: Map<ActivityKey, TxViewlet[]>
@@ -61,12 +63,19 @@
   let model: AttributeModel[] = []
   let modelIcon: Asset | undefined = undefined
   let iconComponent: AnyComponent | undefined = undefined
+  let extensions: ActivityExtension[] = []
 
   let edit: boolean = false
   let showDiff: boolean = false
 
   const currentAccount = getCurrentAccount() as PersonAccount
 
+  $: if (tx.doc?._class) {
+    getExtensions(client, tx.doc._class).then((res?: ActivityExtension[]) => {
+      extensions = res || []
+    })
+  }
+
   $: if (tx.tx._id !== ptx?.tx._id) {
     if (tx.tx.modifiedBy !== account?._id) {
       account = undefined
@@ -141,14 +150,17 @@
     edit = false
     props = getProps(props, edit)
   }
+
   function isMessageType (attr?: AnyAttribute): boolean {
     return attr?.type._class === core.class.TypeMarkup
   }
+
   function isAttachment (tx: TxCUD<Doc>): boolean {
     return tx.objectClass === attachment.class.Attachment && tx._class === core.class.TxCreateDoc
   }
-  function isMention (_class?: Ref<Class<Doc>>): boolean {
-    return _class === chunter.class.Backlink
+
+  function isMention (extensions: ActivityExtension[]): boolean {
+    return extensions.some(({ isMention }) => !!isMention)
   }
 
   async function updateMessageType (model: AttributeModel[], tx: DisplayTx): Promise<boolean> {
@@ -163,13 +175,14 @@
     }
     return false
   }
+
   let hasMessageType = false
   $: updateMessageType(model, tx).then((res) => {
     hasMessageType = res
   })
   $: isComment = viewlet && viewlet?.editable
   $: isAttached = isAttachment(tx.tx)
-  $: isMentioned = isMention(tx.tx.objectClass)
+  $: isMentioned = isMention(extensions)
   $: withAvatar = isComment || isMentioned || isAttached
   $: isEmphasized = viewlet?.display === 'emphasized' || model.every((m) => isMessageType(m.attribute))
   $: isColumn = isComment || isEmphasized || hasMessageType
@@ -327,6 +340,7 @@
         </div>
         {#if isComment}
           <div class="buttons-group">
+            <ActivityExtensionComponent {extensions} kind="action" props={{ object: tx.doc }} />
             <!-- <Like /> -->
             {#if account?.person === currentAccount?.person}
               <ActionIcon icon={IconMoreH} size={'small'} action={showMenu} />
@@ -369,6 +383,7 @@
           </div>
         {/await}
       {/if}
+      <ActivityExtensionComponent {extensions} kind="footer" props={{ object: tx.doc }} />
     </div>
   </div>
 {/if}
@@ -390,9 +405,11 @@
       min-width: 2.25rem;
       color: var(--theme-darker-color);
     }
+
     .msgactivity-icon {
       height: 1.75rem;
     }
+
     .msgactivity-avatar {
       height: 2.25rem;
       // background-color: var(--theme-darker-color);
@@ -414,6 +431,7 @@
         flex-grow: 1;
         min-width: 0;
       }
+
       .msgactivity-content__title {
         display: inline-flex;
         align-items: center;
@@ -425,11 +443,13 @@
         flex-direction: column;
         padding-bottom: 0.25rem;
       }
+
       &:not(.comment) {
         .msgactivity-content__header {
           min-height: 1.75rem;
         }
       }
+
       &:not(.content) {
         align-items: center;
 
@@ -449,47 +469,45 @@
       background-color: var(--divider-trans-color);
       z-index: 1;
     }
+
     &.isNew {
       &::before {
         background-color: var(--highlight-red);
       }
+
       .icon {
         border: 1px solid var(--highlight-red);
       }
     }
+
     &.isNextNew {
       &::after {
         background-color: var(--highlight-red);
       }
     }
+
     &::before {
       top: -0.75rem;
       height: 0.75rem;
     }
+
     &.withAvatar::after {
       content: '';
       top: 2.25rem;
       bottom: 0;
     }
+
     &:not(.withAvatar)::after {
       content: '';
       top: 1.75rem;
       bottom: 0;
     }
   }
+
   :global(.msgactivity-container + .msgactivity-container::before) {
     content: '';
   }
 
-  .menuOptions {
-    margin-left: 0.5rem;
-    opacity: 0.8;
-    cursor: pointer;
-    &:hover {
-      opacity: 1;
-    }
-  }
-
   .time {
     font-size: 0.75rem;
     color: var(--theme-trans-color);
@@ -499,15 +517,12 @@
     }
   }
 
-  .message {
-    flex-basis: 100%;
-  }
-
   .activity-content {
     visibility: visible;
     min-width: 0;
     max-height: max-content;
     opacity: 1;
+    position: relative;
     transition-property: max-height, opacity;
     transition-timing-function: ease-in-out;
     transition-duration: 0.15s;
@@ -519,6 +534,7 @@
       max-height: 0;
       opacity: 0;
     }
+
     &.indent {
       margin-top: 0.5rem;
     }
@@ -527,9 +543,11 @@
   .show-diff {
     color: var(--theme-content-color);
     cursor: pointer;
+
     &:hover {
       color: var(--theme-caption-color);
     }
+
     &:active {
       color: var(--theme-content-color);
     }

plugins/activity-resources/src/utils.ts

@@ -1,4 +1,4 @@
-import type { DisplayTx, TxViewlet } from '@hcengineering/activity'
+import type { ActivityExtension, DisplayTx, TxViewlet } from '@hcengineering/activity'
 import core, {
   AttachedDoc,
   Class,
@@ -426,3 +426,7 @@ function filterCollectionTx (tx: DisplayTx): DisplayTx | undefined {
   }
   return ctx
 }
+
+export async function getExtensions (client: Client, ofClass: Ref<Class<Doc>>): Promise<ActivityExtension[]> {
+  return await client.findAll(activity.class.ActivityExtension, { ofClass })
+}

plugins/activity/src/index.ts

@@ -116,6 +116,25 @@ export interface ExtraActivityComponent extends Class<Doc> {
  */
 export const activityId = 'activity' as Plugin
 
+/**
+ * @public
+ */
+export type ActivityExtensionKind = 'footer' | 'action' | 'input'
+
+/**
+ * @public
+ */
+export interface ActivityExtension extends Doc {
+  ofClass: Ref<Class<Doc>>
+  components?: Partial<Record<ActivityExtensionKind, AnyComponent>>
+  isMention?: boolean
+}
+
+/**
+ * @public
+ */
+export interface TxMention extends Class<Doc> {}
+
 export default plugin(activityId, {
   icon: {
     Activity: '' as Asset
@@ -137,7 +156,8 @@ export default plugin(activityId, {
   },
   class: {
     TxViewlet: '' as Ref<Class<TxViewlet>>,
-    ActivityFilter: '' as Ref<Class<ActivityFilter>>
+    ActivityFilter: '' as Ref<Class<ActivityFilter>>,
+    ActivityExtension: '' as Ref<Class<ActivityExtension>>
   },
   component: {
     Activity: '' as AnyComponent

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

@@ -0,0 +1,47 @@
+<!--
+// 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 { createQuery, getClient } from '@hcengineering/presentation'
+  import { Reaction } from '@hcengineering/chunter'
+  import { Doc } from '@hcengineering/core'
+
+  import Reactions from './Reactions.svelte'
+
+  import { updateDocReactions } from '../utils'
+  import chunter from '../plugin'
+
+  export let object: Doc | undefined = undefined
+
+  const client = getClient()
+  const reactionsQuery = createQuery()
+
+  let reactions: Reaction[] = []
+
+  $: if (object) {
+    reactionsQuery.query(chunter.class.Reaction, { attachedTo: object._id }, (res?: Reaction[]) => {
+      reactions = res || []
+    })
+  }
+
+  const handleClick = (ev: CustomEvent) => {
+    updateDocReactions(client, reactions, object, ev.detail)
+  }
+</script>
+
+{#if reactions.length}
+  <div class="footer flex-col p-inline contrast mt-2">
+    <Reactions {reactions} on:click={handleClick} />
+  </div>
+{/if}

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

@@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import { Attachment } from '@hcengineering/attachment'
   import { AttachmentList, AttachmentRefInput } from '@hcengineering/attachment-resources'
   import type { ChunterMessage, ChunterMessageExtension, Message, Reaction } from '@hcengineering/chunter'
@@ -24,18 +25,18 @@
   import ui, { ActionIcon, Button, EmojiPopup, IconMoreV, Label, showPopup, tooltip } from '@hcengineering/ui'
   import { Action } from '@hcengineering/view'
   import { LinkPresenter, Menu, ObjectPresenter } from '@hcengineering/view-resources'
-  import { createEventDispatcher } from 'svelte'
-  import { AddMessageToSaved, DeleteMessageFromSaved, UnpinMessage } from '../index'
-  import chunter from '../plugin'
-  import { getLinks, getTime } from '../utils'
-  // import Share from './icons/Share.svelte'
   import notification, { Collaborators } from '@hcengineering/notification'
+
   import Bookmark from './icons/Bookmark.svelte'
   import Emoji from './icons/Emoji.svelte'
   import Thread from './icons/Thread.svelte'
   import Reactions from './Reactions.svelte'
   import Replies from './Replies.svelte'
 
+  import { AddMessageToSaved, DeleteMessageFromSaved, UnpinMessage } from '../index'
+  import chunter from '../plugin'
+  import { getLinks, getTime, updateDocReactions } from '../utils'
+
   export let message: WithLookup<ChunterMessage>
   export let savedAttachmentsIds: Ref<Attachment>[]
   export let thread: boolean = false
@@ -162,47 +163,12 @@
     else AddMessageToSaved(message)
   }
 
-  function openEmojiPalette (ev: Event) {
-    showPopup(
-      EmojiPopup,
-      {},
-      ev.target as HTMLElement,
-      async (emoji) => {
-        if (!emoji) return
-        const me = getCurrentAccount()._id
-
-        const reaction = reactions?.find((r) => r.emoji === emoji && r.createBy === me)
-        if (!reaction) {
-          await client.addCollection(
-            chunter.class.Reaction,
-            message.space,
-            message._id,
-            chunter.class.ChunterMessage,
-            'reactions',
-            {
-              emoji,
-              createBy: me
-            }
-          )
-        } else {
-          await client.removeDoc(chunter.class.Reaction, message.space, reaction._id)
-        }
-      },
-      () => {}
-    )
+  function updateReactions (emoji?: string) {
+    updateDocReactions(client, reactions || [], message, emoji)
   }
 
-  async function removeReaction (ev: CustomEvent) {
-    if (!ev.detail) return
-    const me = getCurrentAccount()._id
-    const reaction = await client.findOne(chunter.class.Reaction, {
-      attachedTo: message._id,
-      emoji: ev.detail,
-      createBy: me
-    })
-    if (reaction?._id) {
-      client.removeDoc(chunter.class.Reaction, reaction.space, reaction._id)
-    }
+  function openEmojiPalette (ev: Event) {
+    showPopup(EmojiPopup, {}, ev.target as HTMLElement, updateReactions, () => {})
   }
 
   $: parentMessage = message as Message
@@ -257,7 +223,7 @@
     {/if}
     {#if reactions?.length || (!thread && hasReplies)}
       <div class="footer flex-col">
-        {#if reactions?.length}<Reactions {reactions} on:remove={removeReaction} />{/if}
+        {#if reactions?.length}<Reactions {reactions} on:click={(ev) => updateReactions(ev.detail)} />{/if}
         {#if !thread && hasReplies}
           <Replies message={parentMessage} on:click={openThread} />
         {/if}

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

@@ -42,7 +42,7 @@
         class="flex-row-center"
         use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
         on:click={() => {
-          dispatch('remove', emoji)
+          dispatch('click', emoji)
         }}
       >
         <div>{emoji}</div>
@@ -55,13 +55,13 @@
 <style lang="scss">
   .container {
     display: flex;
+    flex-wrap: wrap;
     user-select: none;
+    column-gap: 1rem;
+    row-gap: 0.25rem;
 
     .counter {
       margin-left: 0.25rem;
     }
-    .reaction + .reaction {
-      margin-left: 1rem;
-    }
   }
 </style>

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

@@ -0,0 +1,48 @@
+<!--
+// 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 { ActionIcon, EmojiPopup, IconEmoji, showPopup } from '@hcengineering/ui'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { Reaction } from '@hcengineering/chunter'
+  import { Doc } from '@hcengineering/core'
+
+  import chunter from '../plugin'
+  import { updateDocReactions } from '../utils'
+
+  export let object: Doc | undefined = undefined
+
+  const client = getClient()
+
+  const reactionsQuery = createQuery()
+  let reactions: Reaction[] = []
+
+  $: if (object) {
+    reactionsQuery.query(chunter.class.Reaction, { attachedTo: object._id }, (res?: Reaction[]) => {
+      reactions = res || []
+    })
+  }
+
+  function openEmojiPalette (ev: Event) {
+    showPopup(
+      EmojiPopup,
+      {},
+      ev.target as HTMLElement,
+      (emoji: string) => updateDocReactions(client, reactions, object, emoji),
+      () => {}
+    )
+  }
+</script>
+
+<ActionIcon icon={IconEmoji} size="medium" action={openEmojiPalette} />

plugins/chunter-resources/src/index.ts

@@ -38,6 +38,7 @@ import CommentInput from './components/CommentInput.svelte'
 import CommentPopup from './components/CommentPopup.svelte'
 import CommentPresenter from './components/CommentPresenter.svelte'
 import CommentsPresenter from './components/CommentsPresenter.svelte'
+import Reactions from './components/Reactions.svelte'
 import CommentPanel from './components/CommentPanel.svelte'
 import ConvertDmToPrivateChannelModal from './components/ConvertDmToPrivateChannel.svelte'
 import CreateChannel from './components/CreateChannel.svelte'
@@ -60,6 +61,8 @@ import TxBacklinkCreate from './components/activity/TxBacklinkCreate.svelte'
 import TxBacklinkReference from './components/activity/TxBacklinkReference.svelte'
 import TxCommentCreate from './components/activity/TxCommentCreate.svelte'
 import TxMessageCreate from './components/activity/TxMessageCreate.svelte'
+import ReactionsAction from './components/ReactionsAction.svelte'
+import CommentReactions from './components/CommentReactions.svelte'
 
 import notification from '@hcengineering/notification'
 import { writable } from 'svelte/store'
@@ -282,6 +285,7 @@ export default async (): Promise<Resources> => ({
     ChannelViewPanel,
     CommentPresenter,
     CommentsPresenter,
+    Reactions,
     ChannelPresenter,
     DirectMessagePresenter,
     MessagePresenter,
@@ -296,7 +300,9 @@ export default async (): Promise<Resources> => ({
     Threads,
     ThreadView,
     SavedMessages,
-    CommentPanel
+    CommentPanel,
+    ReactionsAction,
+    CommentReactions
   },
   function: {
     GetDmName: getDmName,

plugins/chunter-resources/src/utils.ts

@@ -1,7 +1,18 @@
-import { chunterId, ChunterMessage, Comment, ThreadMessage } from '@hcengineering/chunter'
+import { chunterId, ChunterMessage, Comment, Reaction, ThreadMessage } from '@hcengineering/chunter'
 import contact, { Employee, PersonAccount, getName } from '@hcengineering/contact'
 import { employeeByIdStore } from '@hcengineering/contact-resources'
-import { Class, Client, Doc, getCurrentAccount, IdMap, Obj, Ref, Space, Timestamp } from '@hcengineering/core'
+import {
+  Class,
+  Client,
+  Doc,
+  getCurrentAccount,
+  IdMap,
+  Obj,
+  Ref,
+  Space,
+  Timestamp,
+  TxOperations
+} from '@hcengineering/core'
 import { Asset } from '@hcengineering/platform'
 import { getClient } from '@hcengineering/presentation'
 import {
@@ -279,3 +290,27 @@ function parseLinks (nodes: NodeListOf<ChildNode>): HTMLLinkElement[] {
   })
   return res
 }
+
+export async function updateDocReactions (
+  client: TxOperations,
+  reactions: Reaction[],
+  object?: Doc,
+  emoji?: string
+): Promise<void> {
+  if (emoji === undefined || object === undefined) {
+    return
+  }
+
+  const currentAccount = getCurrentAccount()
+
+  const reaction = reactions.find((r) => r.emoji === emoji && r.createBy === currentAccount._id)
+
+  if (reaction == null) {
+    await client.addCollection(chunter.class.Reaction, object.space, object._id, object._class, 'reactions', {
+      emoji,
+      createBy: currentAccount._id
+    })
+  } else {
+    await client.remove(reaction)
+  }
+}

plugins/chunter/src/index.ts

@@ -92,8 +92,8 @@ export interface Message extends ChunterMessage {
 export interface Reaction extends AttachedDoc {
   emoji: string
   createBy: Ref<Account>
-  attachedTo: Ref<ChunterMessage>
-  attachedToClass: Ref<Class<ChunterMessage>>
+  attachedTo: Ref<Doc>
+  attachedToClass: Ref<Class<Doc>>
 }
 
 /**
@@ -102,6 +102,7 @@ export interface Reaction extends AttachedDoc {
 export interface Comment extends AttachedDoc {
   message: string
   attachments?: number
+  reactions?: number
 }
 
 /**
@@ -157,7 +158,8 @@ export default plugin(chunterId, {
     ChannelView: '' as AnyComponent,
     ThreadView: '' as AnyComponent,
     Thread: '' as AnyComponent,
-    CommentsPresenter: '' as AnyComponent
+    CommentsPresenter: '' as AnyComponent,
+    Reactions: '' as AnyComponent
   },
   class: {
     Message: '' as Ref<Class<Message>>,