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

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

models/activity/src/index.ts

@@ -13,14 +13,22 @@
 // limitations under the License.
 //
 
-import type { ActivityFilter, DisplayTx, ExtraActivityComponent, TxViewlet } from '@hcengineering/activity'
-import activity from './plugin'
+import type {
+  ActivityExtension,
+  ActivityExtensionKind,
+  ActivityFilter,
+  DisplayTx,
+  ExtraActivityComponent,
+  TxViewlet
+} from '@hcengineering/activity'
 import core, { Class, Doc, DocumentQuery, DOMAIN_MODEL, Ref, Tx } from '@hcengineering/core'
 import { Builder, Mixin, Model } from '@hcengineering/model'
 import { TClass, TDoc } from '@hcengineering/model-core'
 import type { Asset, IntlString, Resource } from '@hcengineering/platform'
 import { AnyComponent } from '@hcengineering/ui'
 
+import activity from './plugin'
+
 export { activityId } from '@hcengineering/activity'
 
 @Model(activity.class.TxViewlet, core.class.Doc, DOMAIN_MODEL)
@@ -44,13 +52,20 @@ export class TActivityFilter extends TDoc implements ActivityFilter {
   filter!: Resource<(tx: DisplayTx, _class?: Ref<Doc>) => boolean>
 }
 
+@Model(activity.class.ActivityExtension, core.class.Doc, DOMAIN_MODEL)
+export class TActivityExtension extends TDoc implements ActivityExtension {
+  ofClass!: Ref<Class<Doc>>
+  components?: Partial<Record<ActivityExtensionKind, AnyComponent>>
+  mentionClass?: Ref<Class<Doc>>
+}
+
 @Mixin(activity.mixin.ExtraActivityComponent, core.class.Class)
 export class TExtraActivityComponent extends TClass implements ExtraActivityComponent {
   component!: AnyComponent
 }
 
 export function createModel (builder: Builder): void {
-  builder.createModel(TTxViewlet, TActivityFilter, TExtraActivityComponent)
+  builder.createModel(TTxViewlet, TActivityFilter, TExtraActivityComponent, TActivityExtension)
 
   builder.createDoc(activity.class.ActivityFilter, core.space.Model, {
     label: activity.string.Attributes,

models/chunter/src/index.ts

@@ -150,6 +150,9 @@ export class TComment extends TAttachedDoc implements Comment {
 
   @Prop(Collection(attachment.class.Attachment), attachment.string.Attachments, { shortLabel: attachment.string.Files })
     attachments?: number
+
+  @Prop(Collection(chunter.class.Reaction), chunter.string.Reactions)
+    reactions?: number
 }
 
 @Model(chunter.class.Backlink, chunter.class.Comment)
@@ -737,6 +740,29 @@ export function createModel (builder: Builder, options = { addApplication: true
     chunter.ids.ChannelNotification
   )
 
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: chunter.class.Comment,
+      components: {
+        footer: chunter.component.CommentReactions,
+        action: chunter.component.ReactionsAction
+      }
+    },
+    chunter.ids.ActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: chunter.class.Backlink,
+      isMention: true
+    },
+    chunter.ids.BackLinkActivityExtension
+  )
+
   builder.createDoc(
     notification.class.NotificationType,
     core.space.Model,

models/chunter/src/plugin.ts

@@ -22,6 +22,7 @@ import type { IntlString, Resource } from '@hcengineering/platform'
 import { mergeIds } from '@hcengineering/platform'
 import type { AnyComponent, Location } from '@hcengineering/ui'
 import type { Action, ActionCategory, ViewAction, ViewletDescriptor } from '@hcengineering/view'
+import { ActivityExtension } from '@hcengineering/activity'
 
 export default mergeIds(chunterId, chunter, {
   component: {
@@ -32,7 +33,9 @@ export default mergeIds(chunterId, chunter, {
     DmPresenter: '' as AnyComponent,
     Threads: '' as AnyComponent,
     SavedMessages: '' as AnyComponent,
-    ChunterBrowser: '' as AnyComponent
+    ChunterBrowser: '' as AnyComponent,
+    CommentReactions: '' as AnyComponent,
+    ReactionsAction: '' as AnyComponent
   },
   action: {
     MarkCommentUnread: '' as Ref<Action>,
@@ -89,7 +92,9 @@ export default mergeIds(chunterId, chunter, {
     TxCommentRemove: '' as Ref<TxViewlet>,
     TxBacklinkRemove: '' as Ref<TxViewlet>,
     TxMessageCreate: '' as Ref<TxViewlet>,
-    ChunterNotificationGroup: '' as Ref<NotificationGroup>
+    ChunterNotificationGroup: '' as Ref<NotificationGroup>,
+    ActivityExtension: '' as Ref<ActivityExtension>,
+    BackLinkActivityExtension: '' as Ref<ActivityExtension>
   },
   activity: {
     TxCommentCreate: '' as AnyComponent,

models/contact/src/index.ts

@@ -916,6 +916,30 @@ export function createModel (builder: Builder): void {
     contact.templateField.ContactLastName
   )
 
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: contact.class.Person,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    contact.ids.PersonActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: contact.class.Organization,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    contact.ids.OrganizationActivityExtension
+  )
+
   builder.mixin(contact.class.Contact, core.class.Class, activity.mixin.ExtraActivityComponent, {
     component: contact.component.ActivityChannelMessage
   })

models/contact/src/plugin.ts

@@ -24,6 +24,7 @@ import { IntlString, mergeIds, Resource } from '@hcengineering/platform'
 import { TemplateFieldFunc } from '@hcengineering/templates'
 import type { AnyComponent } from '@hcengineering/ui'
 import { Action, ActionCategory, ViewAction } from '@hcengineering/view'
+import { ActivityExtension } from '@hcengineering/activity'
 
 export default mergeIds(contactId, contact, {
   activity: {
@@ -112,7 +113,9 @@ export default mergeIds(contactId, contact, {
   },
   ids: {
     OrganizationNotificationGroup: '' as Ref<NotificationGroup>,
-    PersonNotificationGroup: '' as Ref<NotificationGroup>
+    PersonNotificationGroup: '' as Ref<NotificationGroup>,
+    PersonActivityExtension: '' as Ref<ActivityExtension>,
+    OrganizationActivityExtension: '' as Ref<ActivityExtension>
   },
   action: {
     KickEmployee: '' as Ref<Action>,

models/inventory/package.json

@@ -24,6 +24,7 @@
     "prettier": "^2.7.1"
   },
   "dependencies": {
+    "@hcengineering/activity": "^0.6.0",
     "@hcengineering/core": "^0.6.27",
     "@hcengineering/model": "^0.6.6",
     "@hcengineering/model-workbench": "^0.6.1",
@@ -37,6 +38,7 @@
     "@hcengineering/view": "^0.6.8",
     "@hcengineering/setting": "^0.6.10",
     "@hcengineering/workbench": "^0.6.8",
-    "@hcengineering/model-view": "^0.6.0"
+    "@hcengineering/model-view": "^0.6.0",
+    "@hcengineering/model-chunter": "^0.6.0"
   }
 }

models/inventory/src/index.ts

@@ -14,6 +14,7 @@
 //
 
 import { Domain, IndexKind, Ref } from '@hcengineering/core'
+import activity from '@hcengineering/activity'
 import { Category, Product, Variant, inventoryId } from '@hcengineering/inventory'
 import { Builder, Collection, Index, Model, Prop, TypeRef, TypeString, UX } from '@hcengineering/model'
 import attachment from '@hcengineering/model-attachment'
@@ -22,6 +23,7 @@ import { createAction } from '@hcengineering/model-view'
 import workbench from '@hcengineering/model-workbench'
 import setting from '@hcengineering/setting'
 import view, { Viewlet } from '@hcengineering/view'
+import chunter from '@hcengineering/model-chunter'
 import inventory from './plugin'
 
 export { inventoryId } from '@hcengineering/inventory'
@@ -162,6 +164,30 @@ export function createModel (builder: Builder): void {
     inventory.category.Inventory
   )
 
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: inventory.class.Product,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    inventory.ids.ProductActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: inventory.class.Category,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    inventory.ids.CategoryActivityExtension
+  )
+
   createAction(builder, {
     label: inventory.string.CreateSubcategory,
     icon: inventory.icon.Categories,

models/inventory/src/plugin.ts

@@ -20,6 +20,7 @@ import inventory from '@hcengineering/inventory-resources/src/plugin'
 import { IntlString, mergeIds } from '@hcengineering/platform'
 import type { AnyComponent } from '@hcengineering/ui'
 import { Action, ActionCategory, ViewAction, Viewlet } from '@hcengineering/view'
+import { ActivityExtension } from '@hcengineering/activity'
 
 export default mergeIds(inventoryId, inventory, {
   action: {
@@ -47,5 +48,9 @@ export default mergeIds(inventoryId, inventory, {
   string: {
     ConfigLabel: '' as IntlString,
     ConfigDescription: '' as IntlString
+  },
+  ids: {
+    ProductActivityExtension: '' as Ref<ActivityExtension>,
+    CategoryActivityExtension: '' as Ref<ActivityExtension>
   }
 })

models/lead/package.json

@@ -24,6 +24,7 @@
     "prettier": "^2.7.1"
   },
   "dependencies": {
+    "@hcengineering/activity": "^0.6.0",
     "@hcengineering/core": "^0.6.27",
     "@hcengineering/model": "^0.6.6",
     "@hcengineering/ui": "^0.6.10",

models/lead/src/index.ts

@@ -43,6 +43,7 @@ import workbench from '@hcengineering/model-workbench'
 import notification from '@hcengineering/notification'
 import setting from '@hcengineering/setting'
 import { ViewOptionsModel } from '@hcengineering/view'
+import activity from '@hcengineering/activity'
 import lead from './plugin'
 
 export { leadId } from '@hcengineering/lead'
@@ -509,6 +510,18 @@ export function createModel (builder: Builder): void {
     lead.viewlet.DashboardLead
   )
 
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: lead.class.Lead,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    lead.ids.LeadActivityExtension
+  )
+
   builder.mixin(lead.class.Lead, core.class.Class, task.mixin.KanbanCard, {
     card: lead.component.KanbanCard
   })

models/lead/src/plugin.ts

@@ -23,6 +23,7 @@ import { mergeIds } from '@hcengineering/platform'
 import { ProjectType } from '@hcengineering/task'
 import type { AnyComponent } from '@hcengineering/ui'
 import { Action, ActionCategory, Viewlet } from '@hcengineering/view'
+import { ActivityExtension } from '@hcengineering/activity'
 
 export default mergeIds(leadId, lead, {
   string: {
@@ -69,6 +70,7 @@ export default mergeIds(leadId, lead, {
     CustomerNotificationGroup: '' as Ref<NotificationGroup>,
     FunnelNotificationGroup: '' as Ref<NotificationGroup>,
     LeadCreateNotification: '' as Ref<NotificationType>,
-    AssigneeNotification: '' as Ref<NotificationType>
+    AssigneeNotification: '' as Ref<NotificationType>,
+    LeadActivityExtension: '' as Ref<ActivityExtension>
   }
 })

models/recruit/package.json

@@ -24,6 +24,7 @@
     "prettier": "^2.7.1"
   },
   "dependencies": {
+    "@hcengineering/activity": "^0.6.0",
     "@hcengineering/core": "^0.6.27",
     "@hcengineering/model": "^0.6.6",
     "@hcengineering/ui": "^0.6.10",

models/recruit/src/index.ts

@@ -56,6 +56,7 @@ import {
 } from '@hcengineering/recruit'
 import setting from '@hcengineering/setting'
 import { KeyBinding, ViewOptionModel, ViewOptionsModel } from '@hcengineering/view'
+import activity from '@hcengineering/activity'
 import recruit from './plugin'
 import { createReviewModel, reviewTableConfig, reviewTableOptions } from './review'
 import { TOpinion, TReview } from './review-model'
@@ -1557,6 +1558,42 @@ export function createModel (builder: Builder): void {
     recruit.filter.None
   )
 
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: recruit.class.Vacancy,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    recruit.ids.VacancyActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: recruit.class.Applicant,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    recruit.ids.ApplicantActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: recruit.class.Review,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    recruit.ids.ReviewActivityExtension
+  )
+
   // Allow to use fuzzy search for mixins
   builder.mixin(recruit.class.Vacancy, core.class.Class, core.mixin.FullTextSearchContext, {
     fullTextSummary: true,

models/recruit/src/plugin.ts

@@ -22,6 +22,7 @@ import recruit from '@hcengineering/recruit-resources/src/plugin'
 import { ProjectType } from '@hcengineering/task'
 import type { AnyComponent, Location } from '@hcengineering/ui'
 import type { Action, ActionCategory, ViewAction, ViewQueryAction, Viewlet } from '@hcengineering/view'
+import { ActivityExtension } from '@hcengineering/activity'
 
 export default mergeIds(recruitId, recruit, {
   action: {
@@ -82,7 +83,10 @@ export default mergeIds(recruitId, recruit, {
     ApplicationNotificationGroup: '' as Ref<NotificationGroup>,
     AssigneeNotification: '' as Ref<NotificationType>,
     ApplicationCreateNotification: '' as Ref<NotificationType>,
-    ReviewCreateNotification: '' as Ref<NotificationType>
+    ReviewCreateNotification: '' as Ref<NotificationType>,
+    VacancyActivityExtension: '' as Ref<ActivityExtension>,
+    ApplicantActivityExtension: '' as Ref<ActivityExtension>,
+    ReviewActivityExtension: '' as Ref<ActivityExtension>
   },
   component: {
     CreateApplication: '' as AnyComponent,

models/tracker/src/index.ts

@@ -18,6 +18,7 @@ import { Builder } from '@hcengineering/model'
 import core from '@hcengineering/model-core'
 import task from '@hcengineering/model-task'
 import view from '@hcengineering/model-view'
+import chunter from '@hcengineering/model-chunter'
 import workbench from '@hcengineering/model-workbench'
 import notification from '@hcengineering/notification'
 import setting from '@hcengineering/setting'
@@ -521,6 +522,54 @@ export function createModel (builder: Builder): void {
     order: 4000
   })
 
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: tracker.class.Issue,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    tracker.ids.IssueActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: tracker.class.IssueTemplate,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    tracker.ids.IssueTemplateActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: tracker.class.Component,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    tracker.ids.ComponentActivityExtension
+  )
+
+  builder.createDoc(
+    activity.class.ActivityExtension,
+    core.space.Model,
+    {
+      ofClass: tracker.class.Milestone,
+      components: {
+        input: chunter.component.CommentInput
+      }
+    },
+    tracker.ids.MilestoneActivityExtension
+  )
+
   builder.createDoc(
     task.class.ProjectTypeCategory,
     core.space.Model,

models/tracker/src/plugin.ts

@@ -13,11 +13,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-
-import { TxViewlet } from '@hcengineering/activity'
 import { Doc, Ref } from '@hcengineering/core'
 import { ObjectSearchCategory, ObjectSearchFactory } from '@hcengineering/model-presentation'
-import { NotificationGroup, NotificationType } from '@hcengineering/notification'
 import { IntlString, Resource, mergeIds } from '@hcengineering/platform'
 import { ProjectType } from '@hcengineering/task'
 import { trackerId } from '@hcengineering/tracker'
@@ -25,6 +22,8 @@ import tracker from '@hcengineering/tracker-resources/src/plugin'
 import type { AnyComponent } from '@hcengineering/ui/src/types'
 import { Action, ViewAction, Viewlet } from '@hcengineering/view'
 import { Application } from '@hcengineering/workbench'
+import { ActivityExtension, TxViewlet } from '@hcengineering/activity'
+import { NotificationGroup, NotificationType } from '@hcengineering/notification'
 
 export default mergeIds(trackerId, tracker, {
   string: {
@@ -75,6 +74,10 @@ export default mergeIds(trackerId, tracker, {
     TxIssueCreated: '' as Ref<TxViewlet>,
     TrackerNotificationGroup: '' as Ref<NotificationGroup>,
     AssigneeNotification: '' as Ref<NotificationType>,
+    IssueActivityExtension: '' as Ref<ActivityExtension>,
+    IssueTemplateActivityExtension: '' as Ref<ActivityExtension>,
+    ComponentActivityExtension: '' as Ref<ActivityExtension>,
+    MilestoneActivityExtension: '' as Ref<ActivityExtension>,
     BaseProjectType: '' as Ref<ProjectType>
   },
   completion: {

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>>,