few form-kit improvements

discourse/discourse#31934

Author: jjaffeux

assets/javascripts/discourse/components/ai-persona-tool-options.gjs

@@ -35,71 +35,60 @@ export default class AiPersonaToolOptions extends Component {
 
   <template>
     {{#if this.showToolOptions}}
-      <@form.Container @title={{i18n "discourse_ai.ai_persona.tool_options"}}>
-        <div>
-          <@form.Object
-            @name="toolOptions"
-            @title={{i18n "discourse_ai.ai_persona.tool_options"}}
-            as |toolObj optsPerTool|
-          >
-            {{#each (this.formObjectKeys optsPerTool) as |toolId|}}
-              <div class="ai-persona-editor__tool-options">
-                {{#let (get this.toolsMetadata toolId) as |toolMeta|}}
-                  <div class="ai-persona-editor__tool-options-name">
-                    {{toolMeta.name}}
-                  </div>
-                  <toolObj.Object @name={{toolId}} as |optionsObj optionData|>
-                    {{#each (this.formObjectKeys optionData) as |optionName|}}
-                      <div class="ai-persona-editor__tool-option-options">
-                        <div class="control-group">
-                          {{#let (get toolMeta optionName) as |optionMeta|}}
-                            <optionsObj.Field
-                              @name={{optionName}}
-                              @title={{optionMeta.name}}
-                              as |field|
-                            >
-                              {{#if (eq optionMeta.type "enum")}}
-                                <field.Select
-                                  @includeNone={{false}}
-                                  as |select|
-                                >
-                                  {{#each optionsObj.values as |v|}}
-                                    <select.Option
-                                      @value={{v}}
-                                    >{{v}}</select.Option>
-                                  {{/each}}
-                                </field.Select>
-                              {{else if (eq optionMeta.type "llm")}}
-                                <field.Custom>
-                                  <AiLlmSelector
-                                    @value={{field.value}}
-                                    @llms={{@llms}}
-                                    @onChange={{field.set}}
-                                    @class="ai-persona-tool-option-editor__llms"
-                                  />
-                                </field.Custom>
-                              {{else if (eq optionMeta.type "boolean")}}
-                                <field.Checkbox />
-                              {{else}}
-                                <field.Input />
-                              {{/if}}
-
-                              <div
-                                class="ai-persona-tool-option-editor__instructions"
-                              >
-                                {{optionMeta.description}}
-                              </div>
-                            </optionsObj.Field>
-                          {{/let}}
-                        </div>
-                      </div>
-                    {{/each}}
-                  </toolObj.Object>
-                {{/let}}
-              </div>
-            {{/each}}
-          </@form.Object>
-        </div>
+      <@form.Container
+        @title={{i18n "discourse_ai.ai_persona.tool_options"}}
+        @direction="column"
+        @format="full"
+      >
+        <@form.Object
+          @name="toolOptions"
+          @title={{i18n "discourse_ai.ai_persona.tool_options"}}
+          as |toolObj optsPerTool|
+        >
+          {{#each (this.formObjectKeys optsPerTool) as |toolId|}}
+            <div class="ai-persona-editor__tool-options">
+              {{#let (get this.toolsMetadata toolId) as |toolMeta|}}
+                <div class="ai-persona-editor__tool-options-name">
+                  {{toolMeta.name}}
+                </div>
+                <toolObj.Object @name={{toolId}} as |optionsObj optionData|>
+                  {{#each (this.formObjectKeys optionData) as |optionName|}}
+                    {{#let (get toolMeta optionName) as |optionMeta|}}
+                      <optionsObj.Field
+                        @name={{optionName}}
+                        @title={{optionMeta.name}}
+                        @helpText={{optionMeta.description}}
+                        @format="full"
+                        as |field|
+                      >
+                        {{#if (eq optionMeta.type "enum")}}
+                          <field.Select @includeNone={{false}} as |select|>
+                            {{#each optionsObj.values as |v|}}
+                              <select.Option @value={{v}}>{{v}}</select.Option>
+                            {{/each}}
+                          </field.Select>
+                        {{else if (eq optionMeta.type "llm")}}
+                          <field.Custom>
+                            <AiLlmSelector
+                              @value={{field.value}}
+                              @llms={{@llms}}
+                              @onChange={{field.set}}
+                              @class="ai-persona-tool-option-editor__llms"
+                            />
+                          </field.Custom>
+                        {{else if (eq optionMeta.type "boolean")}}
+                          <field.Checkbox />
+                        {{else}}
+                          <field.Input />
+                        {{/if}}
+                      </optionsObj.Field>
+                    {{/let}}
+                  {{/each}}
+                </toolObj.Object>
+              {{/let}}
+            </div>
+          {{/each}}
+        </@form.Object>
       </@form.Container>
     {{/if}}
   </template>

assets/stylesheets/modules/ai-bot/common/ai-persona.scss

@@ -43,7 +43,7 @@
   padding-left: 0.5em;
 
   &__tool-options {
-    padding: 5px 10px 5px;
+    padding: 1em;
     border: 1px solid var(--primary-low-mid);
     width: 480px;
   }