From d8ebed8fb547c0dad1bc2f3d8739ae873e7fc294 Mon Sep 17 00:00:00 2001
From: Roman Rizzi <roman@discourse.org>
Date: Thu, 16 May 2024 14:28:57 -0300
Subject: [PATCH] UX: Follow plugin user interface UI guidelines. (#628)

---
 .../discourse/components/ai-llm-editor.gjs    |  5 +
 .../components/ai-llms-list-editor.gjs        | 93 ++++++++++---------
 .../modules/ai-bot/common/ai-persona.scss     |  2 +
 .../modules/llms/common/ai-llms-editor.scss   | 27 ++----
 config/locales/client.en.yml                  | 16 ++--
 5 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-llm-editor.gjs b/assets/javascripts/discourse/components/ai-llm-editor.gjs
index 025456a8..5fa79aef 100644
--- a/assets/javascripts/discourse/components/ai-llm-editor.gjs
+++ b/assets/javascripts/discourse/components/ai-llm-editor.gjs
@@ -4,6 +4,7 @@ import { Input } from "@ember/component";
 import { action } from "@ember/object";
 import { later } from "@ember/runloop";
 import { inject as service } from "@ember/service";
+import BackButton from "discourse/components/back-button";
 import DButton from "discourse/components/d-button";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import i18n from "discourse-common/helpers/i18n";
@@ -59,6 +60,10 @@ export default class AiLlmEditor extends Component {
   }
 
   <template>
+    <BackButton
+      @route="adminPlugins.show.discourse-ai-llms"
+      @label="discourse_ai.llms.back"
+    />
     <form class="form-horizontal ai-llm-editor">
       <div class="control-group">
         <label>{{i18n "discourse_ai.llms.display_name"}}</label>
diff --git a/assets/javascripts/discourse/components/ai-llms-list-editor.gjs b/assets/javascripts/discourse/components/ai-llms-list-editor.gjs
index 73ba310e..13b00bce 100644
--- a/assets/javascripts/discourse/components/ai-llms-list-editor.gjs
+++ b/assets/javascripts/discourse/components/ai-llms-list-editor.gjs
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
 import { LinkTo } from "@ember/routing";
 import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
@@ -6,56 +7,58 @@ import I18n from "discourse-i18n";
 import AiLlmEditor from "./ai-llm-editor";
 
 export default class AiLlmsListEditor extends Component {
-  get hasNoLLMElements() {
-    this.args.llms.length !== 0;
+  get hasLLMElements() {
+    return this.args.llms.length !== 0;
   }
 
   <template>
     <section class="ai-llms-list-editor admin-detail pull-left">
-
-      <div class="ai-llms-list-editor__header">
-        <h3>{{i18n "discourse_ai.llms.short_title"}}</h3>
-        {{#unless @currentLlm.isNew}}
-          <LinkTo
-            @route="adminPlugins.show.discourse-ai-llms.new"
-            class="btn btn-small btn-primary"
-          >
-            {{icon "plus"}}
-            <span>{{I18n.t "discourse_ai.llms.new"}}</span>
-          </LinkTo>
-        {{/unless}}
-      </div>
-
-      <div class="ai-llms-list-editor__container">
-        {{#if this.hasNoLLMElements}}
-          <div class="ai-llms-list-editor__empty_list">
-            {{icon "robot"}}
-            {{i18n "discourse_ai.llms.no_llms"}}
-          </div>
-        {{else}}
-          <div class="content-list ai-llms-list-editor__content_list">
-            <ul>
-              {{#each @llms as |llm|}}
-                <li>
-                  <LinkTo
-                    @route="adminPlugins.show.discourse-ai-llms.show"
-                    current-when="true"
-                    @model={{llm}}
-                  >
-                    {{llm.display_name}}
-                  </LinkTo>
-                </li>
-              {{/each}}
-            </ul>
-          </div>
-        {{/if}}
-
-        <div class="ai-llms-list-editor__current">
-          {{#if @currentLlm}}
-            <AiLlmEditor @model={{@currentLlm}} @llms={{@llms}} />
-          {{/if}}
+      {{#if @currentLlm}}
+        <AiLlmEditor @model={{@currentLlm}} @llms={{@llms}} />
+      {{else}}
+        <div class="ai-llms-list-editor__header">
+          <h3>{{i18n "discourse_ai.llms.short_title"}}</h3>
+          {{#unless @currentLlm.isNew}}
+            <LinkTo
+              @route="adminPlugins.show.discourse-ai-llms.new"
+              class="btn btn-small btn-primary"
+            >
+              {{icon "plus"}}
+              <span>{{I18n.t "discourse_ai.llms.new"}}</span>
+            </LinkTo>
+          {{/unless}}
         </div>
-      </div>
+
+        {{#if this.hasLLMElements}}
+          <table class="content-list ai-persona-list-editor">
+            <thead>
+              <tr>
+                <th>{{i18n "discourse_ai.llms.display_name"}}</th>
+                <th>{{i18n "discourse_ai.llms.provider"}}</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each @llms as |llm|}}
+                <tr data-persona-id={{llm.id}} class="ai-llm-list__row">
+                  <td><strong>{{llm.display_name}}</strong></td>
+                  <td>{{i18n
+                      (concat "discourse_ai.llms.providers." llm.provider)
+                    }}</td>
+                  <td>
+                    <LinkTo
+                      @route="adminPlugins.show.discourse-ai-llms.show"
+                      current-when="true"
+                      class="btn btn-text btn-small"
+                      @model={{llm}}
+                    >{{i18n "discourse_ai.llms.edit"}}</LinkTo>
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        {{/if}}
+      {{/if}}
     </section>
   </template>
 }
diff --git a/assets/stylesheets/modules/ai-bot/common/ai-persona.scss b/assets/stylesheets/modules/ai-bot/common/ai-persona.scss
index d6b32943..c7d14a9d 100644
--- a/assets/stylesheets/modules/ai-bot/common/ai-persona.scss
+++ b/assets/stylesheets/modules/ai-bot/common/ai-persona.scss
@@ -40,6 +40,8 @@
 }
 
 .ai-persona-editor {
+  padding-left: 0.5em;
+
   .fk-d-tooltip__icon {
     padding-left: 0.25em;
     color: var(--primary-medium);
diff --git a/assets/stylesheets/modules/llms/common/ai-llms-editor.scss b/assets/stylesheets/modules/llms/common/ai-llms-editor.scss
index cb52e1a6..f2c30a07 100644
--- a/assets/stylesheets/modules/llms/common/ai-llms-editor.scss
+++ b/assets/stylesheets/modules/llms/common/ai-llms-editor.scss
@@ -9,28 +9,17 @@
       margin: 0;
     }
   }
+}
 
-  &__container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 20px;
-    width: 100%;
-    align-items: stretch;
-  }
-
-  &__empty_list,
-  &__content_list {
-    min-width: 300px;
-  }
-
-  &__empty_list {
-    align-content: center;
-    text-align: center;
-    font-size: var(--font-up-1);
-  }
+.ai-llm-editor {
+  padding-left: 0.5em;
 
   .ai-llm-editor-input {
     width: 350px;
   }
+
+  .fk-d-tooltip__icon {
+    padding-left: 0.25em;
+    color: var(--primary-medium);
+  }
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 03ddab24..e29668d6 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -199,15 +199,17 @@ en:
         short_title: "LLMs"
         no_llms: "No LLMs yet"
         new: "New Model"
-        display_name: "Name to display:"
-        name: "Model name:"
-        provider: "Service hosting the model:"
-        tokenizer: "Tokenizer:"
-        max_prompt_tokens: "Number of tokens for the prompt:"
-        url: "URL of the service hosting the model:"
-        api_key: "API Key of the service hosting the model:"
+        display_name: "Name to display"
+        name: "Model name"
+        provider: "Service hosting the model"
+        tokenizer: "Tokenizer"
+        max_prompt_tokens: "Number of tokens for the prompt"
+        url: "URL of the service hosting the model"
+        api_key: "API Key of the service hosting the model"
         save: "Save"
+        edit: "Edit"
         saved: "LLM Model Saved"
+        back: "Back"
 
         hints:
           max_prompt_tokens: "Max numbers of tokens for the prompt. As a rule of thumb, this should be 50% of the model's context window."