WIP: add features to persona list, and other style updates

Author: awesomerobot

app/controllers/discourse_ai/admin/ai_personas_controller.rb

@@ -8,16 +8,25 @@ class AiPersonasController < ::Admin::AdminController
       before_action :find_ai_persona, only: %i[edit update destroy create_user]
 
       def index
+        features_by_persona_id = DiscourseAi::Features.features.group_by { |f| f[:persona]&.id }
+
         ai_personas =
-          AiPersona.ordered.map do |persona|
-            # we use a special serializer here cause names and descriptions are
-            # localized for system personas
-            LocalizedAiPersonaSerializer.new(persona, root: false)
-          end
+          AiPersona
+            .ordered
+            .includes(:user, :uploads)
+            .map do |persona|
+              LocalizedAiPersonaSerializer.new(
+                persona,
+                root: false,
+                features_by_persona_id: features_by_persona_id,
+              )
+            end
+
         tools =
           DiscourseAi::Personas::Persona.all_available_tools.map do |tool|
             AiToolSerializer.new(tool, root: false)
           end
+
         AiTool
           .where(enabled: true)
           .each do |tool|
@@ -31,10 +40,12 @@ def index
                 ),
             }
           end
+
         llms =
           DiscourseAi::Configuration::LlmEnumerator.values_for_serialization(
             allowed_seeded_llm_ids: SiteSetting.ai_bot_allowed_seeded_models_map,
           )
+
         render json: {
                  ai_personas: ai_personas,
                  meta: {

app/serializers/localized_ai_persona_serializer.rb

@@ -3,6 +3,11 @@
 class LocalizedAiPersonaSerializer < ApplicationSerializer
   root "ai_persona"
 
+  def initialize(object, options = {})
+    @features_by_persona_id = options.delete(:features_by_persona_id)
+    super(object, options)
+  end
+
   attributes :id,
              :name,
              :description,
@@ -32,7 +37,8 @@ class LocalizedAiPersonaSerializer < ApplicationSerializer
              :allow_personal_messages,
              :force_default_llm,
              :response_format,
-             :examples
+             :examples,
+             :features
 
   has_one :user, serializer: BasicUserSerializer, embed: :object
   has_many :rag_uploads, serializer: UploadSerializer, embed: :object
@@ -48,4 +54,19 @@ def name
   def description
     object.class_instance.description
   end
+
+  def features
+    return [] unless @features_by_persona_id.is_a?(Hash)
+
+    Array(@features_by_persona_id[object.id]).map do |feature|
+      { id: feature[:id], name: feature[:name] }
+    end
+  rescue => e
+    Rails.logger.warn("Persona serializer error: #{e.class} - #{e.message}")
+    []
+  end
+
+  def include_features?
+    @features_by_persona_id.is_a?(Hash)
+  end
 end

assets/javascripts/discourse/components/ai-persona-list-editor.gjs

@@ -1,13 +1,12 @@
 import Component from "@glimmer/component";
-import { fn } from "@ember/helper";
-import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DButton from "discourse/components/d-button";
 import DPageSubheader from "discourse/components/d-page-subheader";
-import DToggleSwitch from "discourse/components/d-toggle-switch";
 import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { i18n } from "discourse-i18n";
 import AdminConfigAreaEmptyList from "admin/components/admin-config-area-empty-list";
@@ -61,37 +60,47 @@ export default class AiPersonaListEditor extends Component {
             <thead>
               <tr>
                 <th>{{i18n "discourse_ai.ai_persona.name"}}</th>
-                <th>{{i18n "discourse_ai.ai_persona.list.enabled"}}</th>
-                <th></th>
+                <th>{{i18n "discourse_ai.features.short_title"}}</th>
               </tr>
             </thead>
             <tbody>
               {{#each @personas as |persona|}}
+                {{log persona}}
                 <tr
                   data-persona-id={{persona.id}}
                   class={{concatClass
                     "ai-persona-list__row d-admin-row__content"
-                    (if persona.priority "priority")
+                    (if persona.priority "--priority")
+                    (if persona.enabled "--enabled")
                   }}
                 >
                   <td class="d-admin-row__overview">
                     <div class="ai-persona-list__name-with-description">
                       <div class="ai-persona-list__name">
                         <strong>
                           {{persona.name}}
+                          {{#if persona.enabled}}{{icon "check"}}{{/if}}
                         </strong>
                       </div>
                       <div class="ai-persona-list__description">
                         {{persona.description}}
                       </div>
                     </div>
                   </td>
-                  <td class="d-admin-row__detail">
-                    <DToggleSwitch
-                      @state={{persona.enabled}}
-                      {{on "click" (fn this.toggleEnabled persona)}}
-                    />
+
+                  <td class="d-admin-row__features">
+                    {{#each persona.features as |feature|}}
+                      {{log persona}}
+                      <DButton
+                        class="btn-flat btn-small ai-persona-list__row-item-feature"
+                        @translatedLabel={{feature.name}}
+                        @route="adminPlugins.show.discourse-ai-features.edit"
+                        @routeModels={{feature.id}}
+                      />
+                    {{/each}}
+
                   </td>
+
                   <td class="d-admin-row__controls">
                     <LinkTo
                       @route="adminPlugins.show.discourse-ai-personas.edit"

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

@@ -21,6 +21,31 @@
   li.disabled {
     opacity: 0.5;
   }
+
+  .ai-persona-list {
+    &__row-item-feature {
+      padding: 0;
+      margin-right: 0.5em;
+      text-align: left;
+    }
+
+    &__name {
+      .d-icon {
+        color: var(--success);
+        font-size: var(--font-down-1);
+      }
+    }
+
+    &__row {
+      &:hover {
+        background: transparent;
+      }
+
+      &__overview {
+        padding-left: var(--space-2);
+      }
+    }
+  }
 }
 
 .ai-persona-tool-option-editor {