DEV: client side

Author: keegangeorge

assets/javascripts/discourse/components/ai-default-llm-selector.gjs

@@ -0,0 +1,46 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { ajax } from "discourse/lib/ajax";
+import { i18n } from "discourse-i18n";
+import SiteSettingComponent from "admin/components/site-setting";
+import SiteSetting from "admin/models/site-setting";
+
+export default class AiDefaultLlmSelector extends Component {
+  @tracked defaultLlmSetting = null;
+
+  constructor() {
+    super(...arguments);
+    this.#loadDefaultLlmSetting();
+  }
+
+  async #loadDefaultLlmSetting() {
+    const { site_settings } = await ajax("/admin/config/site_settings.json", {
+      data: {
+        plugin: "discourse-ai",
+        category: "discourse_ai",
+      },
+    });
+
+    const defaultLlmSetting = site_settings.find(
+      (setting) => setting.setting === "ai_default_llm_model"
+    );
+
+    this.defaultLlmSetting = SiteSetting.create(defaultLlmSetting);
+  }
+
+  <template>
+    <div class="ai-configure-default-llm">
+      <div class="ai-configure-default-llm__header">
+        <h3>{{i18n "discourse_ai.default_llm.title"}}</h3>
+        <p>{{i18n "discourse_ai.default_llm.description"}}</p>
+      </div>
+
+      {{#if this.defaultLlmSetting}}
+        <SiteSettingComponent
+          @setting={{this.defaultLlmSetting}}
+          class="ai-configure-default-llm__setting"
+        />
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -10,6 +10,7 @@ import DSelect from "discourse/components/d-select";
 import FilterInput from "discourse/components/filter-input";
 import { i18n } from "discourse-i18n";
 import AiFeaturesList from "./ai-features-list";
+import AiDefaultLlmSelector from "./ai-default-llm-selector";
 
 const ALL = "all";
 const CONFIGURED = "configured";
@@ -202,6 +203,8 @@ export default class AiFeatures extends Component {
         />
       </div>
 
+      <AiDefaultLlmSelector />
+
       {{#if this.filteredFeatures.length}}
         <AiFeaturesList @modules={{this.filteredFeatures}} />
       {{else}}

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

@@ -9,6 +9,7 @@ import I18n, { i18n } from "discourse-i18n";
 import AdminSectionLandingItem from "admin/components/admin-section-landing-item";
 import AdminSectionLandingWrapper from "admin/components/admin-section-landing-wrapper";
 import DTooltip from "float-kit/components/d-tooltip";
+import AiDefaultLlmSelector from "./ai-default-llm-selector";
 import AiLlmEditor from "./ai-llm-editor";
 
 function isPreseeded(llm) {
@@ -137,6 +138,9 @@ export default class AiLlmsListEditor extends Component {
           }}
           @learnMoreUrl="https://meta.discourse.org/t/discourse-ai-large-language-model-llm-settings-page/319903"
         />
+
+        <AiDefaultLlmSelector />
+
         {{#if this.hasLlmElements}}
           <section class="ai-llms-list-editor__configured">
             <DPageSubheader

assets/stylesheets/common/ai-features.scss

@@ -158,3 +158,47 @@
 .ai-expanded-list__toggle-button {
   padding: 0;
 }
+
+.ai-configure-default-llm {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+
+  &__header {
+    flex: 3;
+  }
+
+  &__setting {
+    flex: 2;
+
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    justify-content: center;
+  }
+  background: var(--primary-very-low);
+  padding: 1rem;
+  margin-block: 1rem;
+  border-radius: var(--d-border-radius);
+
+  h3 {
+    color: var(--primary);
+    font-size: var(--font-0);
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-top: 0;
+    font-size: var(--font-down-1);
+    color: var(--primary-high-or-secondary-low);
+  }
+
+  .select-kit,
+  .btn {
+    font-size: var(--font-down-1);
+  }
+  .setting-label,
+  .desc {
+    display: none;
+  }
+}

config/locales/client.en.yml

@@ -181,6 +181,10 @@ en:
     discourse_ai:
       title: "AI"
 
+      default_llm:
+        title: "Default LLM model"
+        description: "The default LLM model to use for all AI features. This will be used if no LLM is specified in the feature configuration or persona."
+
       features:
         short_title: "Features"
         description: "These are the AI features available to visitors on your site. These can be configured to use specific personas and LLMs, and can be access controlled by groups."