FEATURE: add participants and invite button to AI conversations (#1354)

Author: awesomerobot

assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-trigger.gjs

@@ -7,6 +7,10 @@ import AiSummaryModal from "../../components/modal/ai-summary-modal";
 export default class AiSummaryTrigger extends Component {
   @service modal;
 
+  get isAiConversation() {
+    return this.args.outletArgs.topic.is_bot_pm;
+  }
+
   @action
   openAiSummaryModal() {
     this.modal.show(AiSummaryModal, {
@@ -18,15 +22,17 @@ export default class AiSummaryTrigger extends Component {
   }
 
   <template>
-    {{#if @outletArgs.topic.summarizable}}
-      <section class="topic-map__additional-contents toggle-summary">
-        <DButton
-          @label="summary.buttons.generate"
-          @icon="discourse-sparkles"
-          @action={{this.openAiSummaryModal}}
-          class="btn-default ai-summarization-button"
-        />
-      </section>
-    {{/if}}
+    {{#unless this.isAiConversation}}
+      {{#if @outletArgs.topic.summarizable}}
+        <section class="topic-map__additional-contents toggle-summary">
+          <DButton
+            @label="summary.buttons.generate"
+            @icon="discourse-sparkles"
+            @action={{this.openAiSummaryModal}}
+            class="btn-default ai-summarization-button"
+          />
+        </section>
+      {{/if}}
+    {{/unless}}
   </template>
 }

assets/javascripts/discourse/connectors/topic-map-participants-after/ai-conversation-invite.gjs

@@ -0,0 +1,55 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { or } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import Participant from "discourse/components/header/topic/participant";
+import AddPmParticipants from "discourse/components/modal/add-pm-participants";
+
+export default class AiConversationInvite extends Component {
+  static shouldRender(args) {
+    return args.topic.is_bot_pm;
+  }
+
+  @service site;
+  @service modal;
+  @service header;
+  @service sidebarState;
+
+  get participants() {
+    const participants = [
+      ...this.header.topicInfo.details.allowed_users,
+      ...this.header.topicInfo.details.allowed_groups,
+    ];
+    return participants;
+  }
+
+  @action
+  showInvite() {
+    this.modal.show(AddPmParticipants, {
+      model: {
+        title: "discourse_ai.ai_bot.invite_ai_conversation.title",
+        inviteModel: this.args.outletArgs.topic,
+      },
+    });
+  }
+
+  <template>
+    <div class="ai-conversation__participants">
+      <DButton
+        @icon="user-plus"
+        @label="discourse_ai.ai_bot.invite_ai_conversation.button"
+        @action={{this.showInvite}}
+        class="btn-default ai-conversations__invite-button"
+      />
+      {{#each this.participants as |participant|}}
+        <Participant
+          @user={{participant}}
+          @type={{if participant.username "user" "group"}}
+          @username={{or participant.username participant.name}}
+          @avatarSize="medium"
+        />
+      {{/each}}
+    </div>
+  </template>
+}

assets/stylesheets/modules/ai-bot-conversations/common.scss

@@ -78,7 +78,6 @@ body.has-ai-conversations-sidebar {
   .private-message-glyph-wrapper,
   .topic-header-participants,
   .topic-above-footer-buttons-outlet,
-  .topic-map,
   #topic-footer-buttons .topic-footer-main-buttons details {
     display: none;
   }
@@ -455,4 +454,82 @@ body.has-ai-conversations-sidebar {
       display: none;
     }
   }
+
+  .topic-map {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 auto;
+    padding-block: 0.5em;
+
+    .topic-map__views-trigger,
+    .topic-map__likes-trigger,
+    .summarization-button,
+    &__private-message-map,
+    .topic-map__users-list {
+      display: none;
+    }
+
+    &.--bottom {
+      padding-top: 0;
+    }
+
+    section {
+      background: transparent;
+      border-block: 1px solid var(--primary-low);
+    }
+
+    &__contents {
+      padding: 0.5em 1.25em;
+
+      @include viewport.from(sm) {
+        padding: 0.5em 0.5em 0.5em 1.9em;
+      }
+    }
+
+    &__stats {
+      height: 100%;
+      flex-wrap: nowrap;
+      gap: 1em;
+    }
+
+    .ai-conversation__participants {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5em 0.25em;
+      align-items: center;
+
+      .avatar {
+        width: 2em;
+        height: 2em;
+      }
+
+      .trigger-group-card {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--primary-low);
+        border-radius: var(--d-button-border-radius);
+        padding: 0.25em 0.5em;
+        font-size: var(--font-down-1);
+
+        span {
+          position: relative;
+          top: -1px;
+        }
+
+        .d-icon {
+          position: relative;
+          top: 1px;
+        }
+
+        a {
+          color: var(--primary-medium);
+        }
+      }
+
+      .btn {
+        font-size: var(--font-down-1);
+        margin-right: 0.5em;
+      }
+    }
+  }
 }

config/locales/client.en.yml

@@ -712,6 +712,10 @@ en:
           name: "Share AI conversation"
           title: "Share this AI conversation publicly"
 
+        invite_ai_conversation:
+          button: "Invite"
+          title: "Invite to AI conversation"
+
         ai_label: "AI"
         ai_title: "Conversation with AI"