UX: disabled preseeded edit button, add description (#1038)

Author: awesomerobot

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

@@ -1,16 +1,23 @@
 import Component from "@glimmer/component";
 import { concat, fn } from "@ember/helper";
 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 i18n from "discourse-common/helpers/i18n";
 import I18n from "discourse-i18n";
 import AdminSectionLandingItem from "admin/components/admin-section-landing-item";
 import AdminSectionLandingWrapper from "admin/components/admin-section-landing-wrapper";
+import DTooltip from "float-kit/components/d-tooltip";
 import AiLlmEditor from "./ai-llm-editor";
 
+function isPreseeded(llm) {
+  if (llm.id < 0) {
+    return true;
+  }
+}
+
 export default class AiLlmsListEditor extends Component {
   @service adminPluginNavManager;
   @service router;
@@ -36,6 +43,15 @@ export default class AiLlmsListEditor extends Component {
     return "";
   }
 
+  @action
+  preseededDescription(llm) {
+    if (isPreseeded(llm)) {
+      return i18n("discourse_ai.llms.preseeded_model_description", {
+        model: llm.name,
+      });
+    }
+  }
+
   sanitizedTranslationKey(id) {
     return id.replace(/\./g, "-");
   }
@@ -146,13 +162,15 @@ export default class AiLlmsListEditor extends Component {
                     class="ai-llm-list__row d-admin-row__content"
                   >
                     <td class="d-admin-row__overview">
+
                       <div class="ai-llm-list__name">
                         <strong>
                           {{llm.display_name}}
                         </strong>
                       </div>
                       <div class="ai-llm-list__description">
                         {{this.modelDescription llm}}
+                        {{this.preseededDescription llm}}
                       </div>
                       {{#if llm.used_by}}
                         <ul class="ai-llm-list-editor__usages">
@@ -171,15 +189,26 @@ export default class AiLlmsListEditor extends Component {
                       }}
                     </td>
                     <td class="d-admin-row__controls">
-                      <LinkTo
-                        @route="adminPlugins.show.discourse-ai-llms.edit"
-                        class="btn btn-default btn-small ai-llm-list__edit-button"
-                        @model={{llm.id}}
-                      >
-                        <div class="d-button-label">
-                          {{i18n "discourse_ai.llms.edit"}}
-                        </div>
-                      </LinkTo>
+                      {{#if (isPreseeded llm)}}
+                        <DTooltip class="ai-llm-list__edit-disabled-tooltip">
+                          <:trigger>
+                            <DButton
+                              class="btn btn-default btn-small disabled"
+                              @label="discourse_ai.llms.edit"
+                            />
+                          </:trigger>
+                          <:content>
+                            {{i18n "discourse_ai.llms.seeded_warning"}}
+                          </:content>
+                        </DTooltip>
+                      {{else}}
+                        <DButton
+                          class="btn btn-default btn-small ai-llm-list__delete-button"
+                          @label="discourse_ai.llms.edit"
+                          @route="adminPlugins.show.discourse-ai-llms.edit"
+                          @routeModels={{llm.id}}
+                        />
+                      {{/if}}
                     </td>
                   </tr>
                 {{/each}}

assets/stylesheets/modules/llms/common/ai-llms-editor.scss

@@ -87,16 +87,18 @@
     tr:hover {
       background: inherit;
     }
-    th,
-    td {
-      &:first-child {
-        padding-left: 0;
+    @include breakpoint("tablet", min-width) {
+      th,
+      td {
+        &:first-child {
+          padding-left: 0;
+        }
       }
-    }
-    th,
-    td {
-      &:last-child {
-        padding-right: 0;
+      th,
+      td {
+        &:last-child {
+          padding-right: 0;
+        }
       }
     }
   }
@@ -158,3 +160,14 @@
     margin-right: 0.5em;
   }
 }
+
+.ai-llm-list__seeded-model {
+  color: var(--primary-high);
+  font-size: var(--font-down-1);
+}
+
+@include breakpoint("tablet") {
+  .ai-llm-list__description {
+    max-width: 80%;
+  }
+}

config/locales/client.en.yml

@@ -365,6 +365,8 @@ en:
           mistral-mistral-large-latest: "Mistral's most powerful model"
           mistral-pixtral-large-latest: "Mistral's most powerful vision capable model"
 
+        preseeded_model_description: "Pre-configured open-source model utilizing %{model}"
+
         configured:
           title: "Configured LLMs"
         preconfigured_llms: "Select your LLM"

spec/system/llms/ai_llm_spec.rb

@@ -84,21 +84,20 @@
       )
     end
 
-    it "shows an info alert to the user about the seeded LLM" do
+    it "seeded LLM has a description" do
       visit "/admin/plugins/discourse-ai/ai-llms"
-      find("[data-llm-id='#{llm_model.name}'] .ai-llm-list__edit-button").click()
+
+      desc = I18n.t("js.discourse_ai.llms.preseeded_model_description", model: llm_model.name)
+
       expect(page).to have_css(
-        ".alert.alert-info",
-        text: I18n.t("js.discourse_ai.llms.seeded_warning"),
+        "[data-llm-id='#{llm_model.name}'] .ai-llm-list__description",
+        text: desc,
       )
     end
 
-    it "limits and shows disabled inputs for the seeded LLM" do
+    it "seeded LLM has a disabled edit button" do
       visit "/admin/plugins/discourse-ai/ai-llms"
-      find("[data-llm-id='cdck-hosted'] .ai-llm-list__edit-button").click()
-      expect(page).to have_css(".ai-llm-editor__display-name[disabled]")
-      expect(page).to have_css(".ai-llm-editor__name[disabled]")
-      expect(page).to have_css(".ai-llm-editor__provider.is-disabled")
+      expect(page).to have_css("[data-llm-id='cdck-hosted'] .ai-llm-list__edit-disabled-tooltip")
     end
   end
 end