created a quota selector

Author: SamSaffron

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

@@ -7,6 +7,7 @@ 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";
 
 export default class AiLlmQuotaEditor extends Component {
   @service store;
@@ -29,8 +30,8 @@ export default class AiLlmQuotaEditor extends Component {
   }
 
   @action
-  updateExistingQuotaDuration(quota, event) {
-    quota.duration_seconds = event.target.value;
+  updateExistingQuotaDuration(quota, value) {
+    quota.duration_seconds = value;
   }
 
   get canAddQuota() {
@@ -124,12 +125,9 @@ export default class AiLlmQuotaEditor extends Component {
                 />
               </td>
               <td class="ai-llm-quotas__cell">
-                <input
-                  type="number"
-                  value={{quota.duration_seconds}}
-                  class="ai-llm-quotas__input"
-                  min="1"
-                  {{on "input" (fn this.updateExistingQuotaDuration quota)}}
+                <DurationSelector
+                  @value={{quota.duration_seconds}}
+                  @onChange={{fn this.updateExistingQuotaDuration quota}}
                 />
               </td>
               <td class="ai-llm-quotas__cell ai-llm-quotas__cell--actions">

assets/javascripts/discourse/components/ai-quota-duration-selector.gjs

@@ -0,0 +1,111 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import I18n from "discourse-i18n";
+import ComboBox from "select-kit/components/combo-box";
+
+const DURATION_PRESETS = [
+  {
+    id: "3600",
+    seconds: 3600,
+    nameKey: "discourse_ai.llms.quotas.durations.hour",
+  },
+  {
+    id: "21600",
+    seconds: 21600,
+    nameKey: "discourse_ai.llms.quotas.durations.six_hours",
+  },
+  {
+    id: "86400",
+    seconds: 86400,
+    nameKey: "discourse_ai.llms.quotas.durations.day",
+  },
+  {
+    id: "604800",
+    seconds: 604800,
+    nameKey: "discourse_ai.llms.quotas.durations.week",
+  },
+  { id: "custom", nameKey: "discourse_ai.llms.quotas.durations.custom" },
+];
+
+export default class DurationSelector extends Component {
+  @tracked selectedPresetId = "86400"; // Default to 1 day
+  @tracked customHours = null;
+
+  constructor() {
+    super(...arguments);
+    const seconds = this.args.value;
+    const preset = DURATION_PRESETS.find((p) => p.seconds === seconds);
+    if (preset) {
+      this.selectedPresetId = preset.id;
+    } else {
+      this.selectedPresetId = "custom";
+      this.customHours = Math.round(seconds / 3600);
+    }
+  }
+
+  get presetOptions() {
+    return DURATION_PRESETS.map((preset) => ({
+      id: preset.id,
+      name: I18n.t(preset.nameKey),
+      seconds: preset.seconds,
+    }));
+  }
+
+  get isCustom() {
+    return this.selectedPresetId === "custom";
+  }
+
+  get currentDurationSeconds() {
+    if (this.isCustom) {
+      return this.customHours ? this.customHours * 3600 : 0;
+    } else {
+      return parseInt(this.selectedPresetId, 10);
+    }
+  }
+
+  @action
+  onPresetChange(value) {
+    this.selectedPresetId = value;
+    this.updateValue();
+  }
+
+  @action
+  onCustomHoursChange(event) {
+    this.customHours = parseInt(event.target.value, 10);
+    this.updateValue();
+  }
+
+  updateValue() {
+    if (this.args.onChange) {
+      this.args.onChange(this.currentDurationSeconds);
+    }
+  }
+
+  <template>
+    <div class="duration-selector">
+      <ComboBox
+        @content={{this.presetOptions}}
+        @value={{this.selectedPresetId}}
+        @onChange={{this.onPresetChange}}
+        class="duration-selector__preset"
+      />
+
+      {{#if this.isCustom}}
+        <div class="duration-selector__custom">
+          <input
+            type="number"
+            value={{this.customHours}}
+            class="duration-selector__hours-input"
+            min="1"
+            {{on "input" this.onCustomHoursChange}}
+          />
+          <span class="duration-selector__hours-label">
+            {{I18n.t "discourse_ai.llms.quotas.hours"}}
+          </span>
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}

config/locales/client.en.yml

@@ -342,8 +342,15 @@ en:
           group: "Group"
           max_tokens: "Max Tokens"
           max_usages: "Max Uses"
-          duration: "Duration (seconds)"
+          duration: "Duration"
           confirm_delete: "Are you sure you want to delete this quota?"
+          durations:
+            hour: "1 hour"
+            six_hours: "6 hours"
+            day: "24 hours"
+            week: "7 days"
+            custom: "Custom..."
+          hours: "hours"
         usage:
           ai_bot: "AI bot"
           ai_helper: "Helper"