feat(frontend): add help tooltip for model selection

frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.tsx

@@ -31,7 +31,11 @@ export const ModelSelection = (props: ModelSelectionProps): JSX.Element => {
           value: accessibleModelOptions[0].value as Model,
         })}
       >
-        <FieldHeader label="Model" iconName="robot" />
+        <FieldHeader
+          label="Model"
+          iconName="robot"
+          help="Changing the model could make this brain smarter, understanding you better and giving you more helpful answers."
+        />
         <SingleSelector
           options={accessibleModelOptions}
           onChange={(option) => {
@@ -44,7 +48,11 @@ export const ModelSelection = (props: ModelSelectionProps): JSX.Element => {
         />
       </fieldset>
       <fieldset>
-        <FieldHeader label="Max tokens" iconName="hashtag" />
+        <FieldHeader
+          label="Max tokens"
+          iconName="hashtag"
+          help="Increasing the number of tokens this brain can use in its replies will give you more detailed answers"
+        />
         <div className={styles.max_tokens}>
           <input
             className={styles.slider}

frontend/lib/components/ui/FieldHeader/FieldHeader.tsx

@@ -1,20 +1,31 @@
+import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
+
 import styles from "./FieldHeader.module.scss";
 
 import { Icon } from "../Icon/Icon";
 
 type FieldHeaderProps = {
   iconName: string;
   label: string;
+  help?: string;
 };
 
 export const FieldHeader = ({
   iconName,
   label,
+  help,
 }: FieldHeaderProps): JSX.Element => {
   return (
     <div className={styles.field_header_wrapper}>
       <Icon name={iconName} color="black" size="small" />
       <label>{label}</label>
+      {help && (
+        <Tooltip tooltip={help}>
+          <div>
+            <Icon name="help" size="normal" color="black" handleHover={true} />
+          </div>
+        </Tooltip>
+      )}
     </div>
   );
 };