DEV: Select tool presets via DMenu instead

admin/assets/javascripts/discourse/routes/admin-plugins-show-discourse-ai-tools-new.js

@@ -1,6 +1,10 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
 export default class DiscourseAiToolsNewRoute extends DiscourseRoute {
+  beforeModel(transition) {
+    this.preset = transition.to.queryParams.presetId || "empty_tool";
+  }
+
   async model() {
     return this.store.createRecord("ai-tool");
   }
@@ -8,10 +12,10 @@ export default class DiscourseAiToolsNewRoute extends DiscourseRoute {
   setupController(controller) {
     super.setupController(...arguments);
     const toolsModel = this.modelFor("adminPlugins.show.discourse-ai-tools");
-
     controller.set("allTools", toolsModel);
     controller.set("presets", toolsModel.resultSetMeta.presets);
     controller.set("llms", toolsModel.resultSetMeta.llms);
     controller.set("settings", toolsModel.resultSetMeta.settings);
+    controller.set("selectedPreset", this.preset);
   }
 }

admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-ai-tools/new.hbs

@@ -5,5 +5,6 @@
     @presets={{this.presets}}
     @llms={{this.llms}}
     @settings={{this.settings}}
+    @selectedPreset={{this.selectedPreset}}
   />
 </section>

assets/javascripts/discourse/components/ai-tool-editor.gjs

@@ -13,7 +13,6 @@ import DTooltip from "discourse/components/d-tooltip";
 import withEventValue from "discourse/helpers/with-event-value";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { i18n } from "discourse-i18n";
-import ComboBox from "select-kit/components/combo-box";
 import AiToolParameterEditor from "./ai-tool-parameter-editor";
 import AiToolTestModal from "./modal/ai-tool-test-modal";
 import RagOptions from "./rag-options";
@@ -33,34 +32,26 @@ export default class AiToolEditor extends Component {
   @tracked isSaving = false;
   @tracked editingModel = null;
   @tracked showDelete = false;
-  @tracked selectedPreset = null;
 
-  get presets() {
+  get selectedPreset() {
-    return this.args.presets.map((preset) => {
+    if (!this.args.selectedPreset) {
-      return {
+      return null;
-        name: preset.preset_name,
-        id: preset.preset_id,
-      };
-    });
     }
 
-  get showPresets() {
+    return this.args.presets.findBy("preset_id", this.args.selectedPreset);
-    return !this.selectedPreset && this.args.model.isNew;
   }
 
   @action
   updateModel() {
-    this.editingModel = this.args.model.workingCopy();
+    if (this.args.model.isNew) {
-    this.showDelete = !this.args.model.isNew;
-  }
-
-  @action
-  configurePreset() {
-    this.selectedPreset = this.args.presets.findBy("preset_id", this.presetId);
       this.editingModel = this.store
         .createRecord("ai-tool", this.selectedPreset)
         .workingCopy();
       this.showDelete = false;
+    } else {
+      this.editingModel = this.args.model.workingCopy();
+      this.showDelete = !this.args.model.isNew;
+    }
   }
 
   @action
@@ -148,24 +139,6 @@ export default class AiToolEditor extends Component {
       {{didUpdate this.updateModel @model.id}}
       class="form-horizontal ai-tool-editor"
     >
-      {{#if this.showPresets}}
-        <div class="control-group">
-          <label>{{i18n "discourse_ai.tools.presets"}}</label>
-          <ComboBox
-            @value={{this.presetId}}
-            @content={{this.presets}}
-            class="ai-tool-editor__presets"
-          />
-        </div>
-
-        <div class="control-group ai-llm-editor__action_panel">
-          <DButton
-            @action={{this.configurePreset}}
-            @label="discourse_ai.tools.next.title"
-            class="ai-tool-editor__next"
-          />
-        </div>
-      {{else}}
       <div class="control-group">
         <label>{{i18n "discourse_ai.tools.name"}}</label>
         <input
@@ -183,10 +156,7 @@ export default class AiToolEditor extends Component {
       <div class="control-group">
         <label>{{i18n "discourse_ai.tools.tool_name"}}</label>
         <input
-            {{on
+          {{on "input" (withEventValue (fn (mut this.editingModel.tool_name)))}}
-              "input"
-              (withEventValue (fn (mut this.editingModel.tool_name)))
-            }}
           value={{this.editingModel.tool_name}}
           type="text"
           class="ai-tool-editor__tool_name"
@@ -279,7 +249,6 @@ export default class AiToolEditor extends Component {
           />
         {{/if}}
       </div>
-      {{/if}}
     </form>
   </template>
 }

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

@@ -1,6 +1,9 @@
 import Component from "@glimmer/component";
+import { array, fn } from "@ember/helper";
+import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
+import { eq } from "truth-helpers";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
 import DButton from "discourse/components/d-button";
 import DPageSubheader from "discourse/components/d-page-subheader";
@@ -11,6 +14,23 @@ import DMenu from "float-kit/components/d-menu";
 
 export default class AiToolListEditor extends Component {
   @service adminPluginNavManager;
+  @service router;
+
+  get lastIndexOfPresets() {
+    return this.args.tools.resultSetMeta.presets.length - 1;
+  }
+
+  @action
+  routeToNewTool(preset) {
+    return this.router.transitionTo(
+      "adminPlugins.show.discourse-ai-tools.new",
+      {
+        queryParams: {
+          presetId: preset.preset_id,
+        },
+      }
+    );
+  }
 
   <template>
     <DBreadcrumbsItem
@@ -28,19 +48,25 @@ export default class AiToolListEditor extends Component {
             @triggerClass="btn-primary btn-small"
             @label={{i18n "discourse_ai.tools.new"}}
             @icon="plus"
+            @placement="bottom-end"
           >
             <:content>
-              {{! TODO add action to dropdown button that prefills editor }}
               <DropdownMenu as |dropdown|>
-                {{#each @tools.resultSetMeta.presets as |preset|}}
+                {{#each @tools.resultSetMeta.presets as |preset index|}}
+                  {{#if (eq index this.lastIndexOfPresets)}}
+                    <dropdown.divider />
+                  {{/if}}
+
                   <dropdown.item>
                     <DButton
                       @translatedLabel={{preset.preset_name}}
+                      @action={{fn this.routeToNewTool preset}}
                       class="btn-transparent"
                     />
                   </dropdown.item>
                 {{/each}}
               </DropdownMenu>
+
             </:content>
           </DMenu>
         </:actions>

config/locales/client.en.yml

@@ -327,10 +327,7 @@ en:
         test: "Run test"
         delete: "Delete"
         saved: "Tool saved"
-        presets: "Select a preset..."
         confirm_delete: "Are you sure you want to delete this tool?"
-        next:
-          title: "Next"
         test_modal:
           title: "Test AI tool"
           run: "Run test"