This is all working now!

Author: SamSaffron

assets/javascripts/discourse/components/ai-llm-editor-form.gjs

@@ -18,18 +18,26 @@ import AdminUser from "admin/models/admin-user";
 import ComboBox from "select-kit/components/combo-box";
 import DTooltip from "float-kit/components/d-tooltip";
 import AiLlmQuotaEditor from "./ai-llm-quota-editor";
+import AiLlmQuotaModal from "./modal/ai-llm-quota-modal";
 
 export default class AiLlmEditorForm extends Component {
   @service toasts;
   @service router;
   @service dialog;
+  @service modal;
 
   @tracked isSaving = false;
 
   @tracked testRunning = false;
   @tracked testResult = null;
   @tracked testError = null;
   @tracked apiKeySecret = true;
+  @tracked quotaCount = 0;
+
+  constructor() {
+    super(...arguments);
+    this.updateQuotaCount();
+  }
 
   get selectedProviders() {
     const t = (provName) => {
@@ -86,6 +94,26 @@ export default class AiLlmEditorForm extends Component {
     });
   }
 
+  get showQuotas() {
+    return this.quotaCount > 0;
+  }
+
+  get showAddQuotaButton() {
+    return !this.showQuotas && !this.args.model.isNew;
+  }
+
+  @action
+  updateQuotaCount() {
+    this.quotaCount = this.args.model.llm_quotas.length;
+  }
+
+  @action
+  openAddQuotaModal() {
+    this.modal.show(AiLlmQuotaModal, {
+      model: { llm: this.args.model, onSave: this.updateQuotaCount },
+    });
+  }
+
   @computed("args.model.provider")
   get metaProviderParams() {
     return (
@@ -318,12 +346,16 @@ export default class AiLlmEditorForm extends Component {
           </div>
         {{/if}}
 
-        {{#unless @model.isNew}}
+        {{#if this.showQuotas}}
           <div class="control-group">
             <label>{{i18n "discourse_ai.llms.quotas.title"}}</label>
-            <AiLlmQuotaEditor @model={{@model}} @groups={{@groups}} />
+            <AiLlmQuotaEditor
+              @model={{@model}}
+              @groups={{@groups}}
+              @didUpdate={{this.updateQuotaCount}}
+            />
           </div>
-        {{/unless}}
+        {{/if}}
 
         <div class="control-group ai-llm-editor__action_panel">
           <DButton
@@ -332,7 +364,13 @@ export default class AiLlmEditorForm extends Component {
             @disabled={{this.testRunning}}
             @label="discourse_ai.llms.tests.title"
           />
-
+          {{#if this.showAddQuotaButton}}
+            <DButton
+              @action={{this.openAddQuotaModal}}
+              @label="discourse_ai.llms.quotas.add"
+              class="btn"
+            />
+          {{/if}}
           <DButton
             class="btn-primary ai-llm-editor__save"
             @action={{this.save}}

assets/javascripts/discourse/components/ai-llm-quota-editor.gjs

@@ -1,18 +1,19 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { fn, hash } from "@ember/helper";
+import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import I18n from "discourse-i18n";
-import GroupChooser from "select-kit/components/group-chooser";
 import DurationSelector from "./ai-quota-duration-selector";
+import AiLlmQuotaModal from "./modal/ai-llm-quota-modal";
 
 export default class AiLlmQuotaEditor extends Component {
   @service store;
   @service dialog;
   @service site;
+  @service modal;
 
   @tracked newQuotaGroupIds = null;
   @tracked newQuotaTokens = null;
@@ -34,6 +35,13 @@ export default class AiLlmQuotaEditor extends Component {
     quota.duration_seconds = value;
   }
 
+  @action
+  openAddQuotaModal() {
+    this.modal.show(AiLlmQuotaModal, {
+      model: { llm: this.args.model },
+    });
+  }
+
   get canAddQuota() {
     return (
       this.newQuotaGroupId &&
@@ -73,11 +81,17 @@ export default class AiLlmQuotaEditor extends Component {
       duration_seconds: this.newQuotaDuration,
     };
     this.args.model.llm_quotas.pushObject(quota);
+    if (this.args.didUpdate) {
+      this.args.didUpdate();
+    }
   }
 
   @action
   async deleteQuota(quota) {
     this.args.model.llm_quotas.removeObject(quota);
+    if (this.args.didUpdate) {
+      this.args.didUpdate();
+    }
   }
 
   <template>
@@ -139,52 +153,16 @@ export default class AiLlmQuotaEditor extends Component {
               </td>
             </tr>
           {{/each}}
-          <tr class="ai-llm-quotas__row ai-llm-quotas__row--new">
-            <td class="ai-llm-quotas__cell">
-              <GroupChooser
-                @value={{this.newQuotaGroupIds}}
-                @content={{this.site.groups}}
-                @onChange={{this.updateGroups}}
-                @options={{hash maximum=1}}
-              />
-            </td>
-            <td class="ai-llm-quotas__cell">
-              <input
-                type="number"
-                value={{this.newQuotaTokens}}
-                class="ai-llm-quotas__input"
-                {{on "input" this.updateQuotaTokens}}
-                min="1"
-              />
-            </td>
-            <td class="ai-llm-quotas__cell">
-              <input
-                type="number"
-                value={{this.newQuotaUsages}}
-                class="ai-llm-quotas__input"
-                {{on "input" this.updateQuotaUsages}}
-                min="1"
-              />
-            </td>
-            <td class="ai-llm-quotas__cell">
-              <input
-                type="number"
-                value={{this.newQuotaDuration}}
-                class="ai-llm-quotas__input"
-                {{on "input" this.updateQuotaDuration}}
-                min="1"
-              />
-            </td>
-            <td class="ai-llm-quotas__cell ai-llm-quotas__cell--actions">
-              <DButton
-                @action={{this.addQuota}}
-                @icon="plus"
-                class="btn-primary ai-llm-quotas__add-btn"
-              />
-            </td>
-          </tr>
         </tbody>
       </table>
+      <div class="ai-llm-quotas__actions">
+        <DButton
+          @action={{this.openAddQuotaModal}}
+          @icon="plus"
+          @label="discourse_ai.llms.quotas.add"
+          class="btn"
+        />
+      </div>
     </div>
   </template>
 }

assets/javascripts/discourse/components/modal/ai-llm-quota-modal.gjs

@@ -0,0 +1,134 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { not } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import I18n from "discourse-i18n";
+import GroupChooser from "select-kit/components/group-chooser";
+import DurationSelector from "../ai-quota-duration-selector";
+
+export default class AiLlmQuotaModal extends Component {
+  @service site;
+
+  @tracked groupIds = null;
+  @tracked maxTokens = null;
+  @tracked maxUsages = null;
+  @tracked duration = 86400; // Default 1 day
+
+  get canSave() {
+    return (
+      this.groupIds?.length > 0 &&
+      (this.maxTokens || this.maxUsages) &&
+      this.duration
+    );
+  }
+
+  @action
+  updateGroups(groups) {
+    this.groupIds = groups;
+  }
+
+  @action
+  updateDuration(value) {
+    this.duration = value;
+  }
+
+  @action
+  updateMaxTokens(event) {
+    this.maxTokens = event.target.value;
+  }
+
+  @action
+  updateMaxUsages(event) {
+    this.maxUsages = event.target.value;
+  }
+
+  @action
+  save() {
+    const quota = {
+      group_id: this.groupIds[0],
+      group_name: this.site.groups.findBy("id", this.groupIds[0]).name,
+      llm_model_id: this.args.model.id,
+      max_tokens: this.maxTokens,
+      max_usages: this.maxUsages,
+      duration_seconds: this.duration,
+    };
+
+    this.args.model.llm.llm_quotas.pushObject(quota);
+    this.args.closeModal();
+    if (this.args.model.onSave) {
+      this.args.model.onSave();
+    }
+  }
+
+  get availableGroups() {
+    const existingQuotaGroupIds =
+      this.args.model.llm.llm_quotas.map((q) => q.group_id) || [];
+
+    return this.site.groups.filter(
+      (group) => !existingQuotaGroupIds.includes(group.id) && group.id !== 0
+    );
+  }
+
+  <template>
+    <DModal
+      @title={{I18n.t "discourse_ai.llms.quotas.add_title"}}
+      @closeModal={{@closeModal}}
+    >
+      <:body>
+        <div class="control-group">
+          <label>{{I18n.t "discourse_ai.llms.quotas.group"}}</label>
+          <GroupChooser
+            @value={{this.groupIds}}
+            @content={{this.availableGroups}}
+            @onChange={{this.updateGroups}}
+            @options={{hash maximum=1}}
+          />
+        </div>
+
+        <div class="control-group">
+          <label>{{I18n.t "discourse_ai.llms.quotas.max_tokens"}}</label>
+          <input
+            type="number"
+            value={{this.maxTokens}}
+            class="input-large"
+            min="1"
+            {{on "input" this.updateMaxTokens}}
+          />
+        </div>
+
+        <div class="control-group">
+          <label>{{I18n.t "discourse_ai.llms.quotas.max_usages"}}</label>
+          <input
+            type="number"
+            value={{this.maxUsages}}
+            class="input-large"
+            min="1"
+            {{on "input" this.updateMaxUsages}}
+          />
+        </div>
+
+        <div class="control-group">
+          <label>{{I18n.t "discourse_ai.llms.quotas.duration"}}</label>
+          <DurationSelector
+            @value={{this.duration}}
+            @onChange={{this.updateDuration}}
+          />
+        </div>
+      </:body>
+
+      <:footer>
+        <DButton
+          @action={{this.save}}
+          @label="discourse_ai.llms.quotas.add"
+          @disabled={{not this.canSave}}
+          class="btn-primary"
+        />
+      </:footer>
+    </DModal>
+  </template>
+}

assets/stylesheets/modules/llms/common/ai-llm-quotas.scss

@@ -11,6 +11,16 @@
     background-color: var(--primary-very-low);
   }
 
+  .duration-selector {
+    .select-kit {
+      width: 150px;
+    }
+  }
+
+  .duration-selector__custom {
+    margin-top: 8px;
+  }
+
   &__header {
     text-align: left;
     padding: 0.5em;
@@ -24,26 +34,21 @@
 
   &__row {
     border-bottom: 1px solid var(--primary-low);
-
-    &--new {
-      background-color: var(--primary-very-low);
-    }
   }
 
   &__cell {
-    padding: 0.5em;
     vertical-align: middle;
+    align-items: center;
 
     &--actions {
       text-align: center;
     }
   }
 
-  &__input {
-    width: 100px;
+  &__input[type=number] {
+    width: 200px;
     padding: 0.5em;
-    border: 1px solid var(--primary-low);
-    border-radius: 3px;
+    margin-bottom: 0;
   }
 
   &__group-select {