UI basically functioning now

Author: SamSaffron

assets/javascripts/discourse/components/ai-spam.gjs

@@ -7,13 +7,16 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import DToggleSwitch from "discourse/components/d-toggle-switch";
 import DTooltip from "discourse/components/d-tooltip";
+import withEventValue from "discourse/helpers/with-event-value";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import i18n from "discourse-common/helpers/i18n";
 import ComboBox from "select-kit/components/combo-box";
 
 export default class AiSpam extends Component {
   @service siteSettings;
+  @service toasts;
+
   @tracked
   stats = {
     scanned_count: 0,
@@ -35,7 +38,7 @@ export default class AiSpam extends Component {
   initializeFromModel() {
     const model = this.args.model;
     this.isEnabled = model.is_enabled;
-    this.selectedLLM = model.selected_llm;
+    this.selectedLLM = "custom:" + model.llm_id;
     this.customInstructions = model.custom_instructions;
     this.stats = model.stats;
   }
@@ -50,13 +53,12 @@ export default class AiSpam extends Component {
   @action
   async toggleEnabled() {
     try {
-      const response = await ajax(
-        "/admin/plugins/discourse-ai/ai-spam/toggle",
-        {
-          type: "PUT",
-          data: { enabled: !this.isEnabled },
-        }
-      );
+      // so UI responds immediately
+      this.isEnabled = !this.isEnabled;
+      const response = await ajax("/admin/plugins/discourse-ai/ai-spam.json", {
+        type: "PUT",
+        data: { is_enabled: this.isEnabled },
+      });
       this.isEnabled = response.is_enabled;
     } catch (error) {
       popupAjaxError(error);
@@ -69,11 +71,19 @@ export default class AiSpam extends Component {
   }
 
   @action
-  async saveInstructions() {
+  async save() {
+    const llmId = this.selectedLLM.toString().split(":")[1];
     try {
-      await ajax("/admin/plugins/discourse-ai/ai-spam/instructions", {
+      await ajax("/admin/plugins/discourse-ai/ai-spam.json", {
         type: "PUT",
-        data: { instructions: this.customInstructions },
+        data: {
+          llm_model_id: llmId,
+          custom_instructions: this.customInstructions,
+        },
+      });
+      this.toasts.success({
+        data: { message: i18n("discourse_ai.spam.settings_saved") },
+        duration: 2000,
       });
     } catch (error) {
       popupAjaxError(error);
@@ -87,10 +97,10 @@ export default class AiSpam extends Component {
             "discourse_ai.spam.title"
           }}</h3>
 
-        <div class="control-group ai-persona-editor__priority">
+        <div class="control-group ai-spam__enabled">
           <DToggleSwitch
             class="ai-spam__toggle"
-            @state={{this.enabled}}
+            @state={{this.isEnabled}}
             @label="discourse_ai.spam.enable"
             {{on "click" this.toggleEnabled}}
           />
@@ -125,13 +135,10 @@ export default class AiSpam extends Component {
             placeholder={{i18n
               "discourse_ai.spam.custom_instructions_placeholder"
             }}
-            {{on
-              "input"
-              (fn (mut this.customInstructions) value="target.value")
-            }}
+            {{on "input" (withEventValue (fn (mut this.customInstructions)))}}
           >{{this.customInstructions}}</textarea>
           <DButton
-            @action={{this.saveInstructions}}
+            @action={{this.save}}
             @label="save"
             class="ai-spam__instructions-save btn-primary"
           />
@@ -180,26 +187,6 @@ export default class AiSpam extends Component {
               >{{this.stats.false_negatives}}</span>
             </div>
           </div>
-
-          <div class="ai-spam__reports">
-            <h3 class="ai-spam__reports-title">{{i18n
-                "discourse_ai.spam.reports"
-              }}</h3>
-            <div class="ai-spam__reports-links">
-              <a
-                href="/review?status=false_positive"
-                class="ai-spam__reports-link"
-              >
-                {{i18n "discourse_ai.spam.view_false_positives"}}
-              </a>
-              <a
-                href="/review?status=missed_spam"
-                class="ai-spam__reports-link"
-              >
-                {{i18n "discourse_ai.spam.view_missed_spam"}}
-              </a>
-            </div>
-          </div>
         {{/if}}
       </section>
     </div>

assets/stylesheets/modules/llms/common/spam.scss

@@ -8,6 +8,18 @@
     margin-bottom: 2em;
   }
 
+  &__enabled {
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    margin-bottom: 1em;
+
+    .fk-d-tooltip__trigger {
+      color: var(--primary-high);
+
+    }
+  }
+
   &__settings-title {
     margin-bottom: 1em;
   }
@@ -40,16 +52,6 @@
     margin-bottom: 1em;
   }
 
-  &__loading {
-    width: 32px;
-    height: 32px;
-    margin: 2em auto;
-    border: 3px solid var(--primary-low);
-    border-top-color: var(--tertiary);
-    border-radius: 50%;
-    animation: ai-spam-loading 1s infinite linear;
-  }
-
   &__metrics {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -73,30 +75,4 @@
   &__metrics-value {
     font-size: var(--font-up-2);
   }
-
-  &__reports {
-    margin-top: 2em;
-  }
-
-  &__reports-title {
-    margin-bottom: 1em;
-  }
-
-  &__reports-links {
-    display: flex;
-    gap: 1em;
-  }
-
-  &__reports-link {
-    @extend .btn;
-  }
-}
-
-@keyframes ai-spam-loading {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

config/locales/client.en.yml

@@ -137,12 +137,10 @@ en:
         false_positives: "Incorrectly flagged"
         false_negatives: "Missed spam"
         spam_detected: "Spam detected"
-        reports: "Reports"
-        view_false_positives: "View false positives"
-        view_missed_spam: "View missed spam"
         custom_instructions_placeholder: "Site-specific instructions for the AI to help identify spam more accurately."
         enable: "Enable"
         spam_tip: "AI spam detection will scan the first 3 posts by all new users on public topics. It will flag them for review and block users if they are likely spam."
+        settings_saved: "Settings saved"
 
       usage:
         short_title: "Usage"