From 3538391736b9913187fccdb86c26265496dabcc0 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Thu, 7 Mar 2024 08:55:18 -0800
Subject: [PATCH] done

---
 .../components/ModelSelection/ModelSelection.tsx     | 12 ++++++++++--
 .../lib/components/ui/FieldHeader/FieldHeader.tsx    | 11 +++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.tsx b/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.tsx
index 219165b2f70c..498f81bafdea 100644
--- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.tsx
+++ b/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}
diff --git a/frontend/lib/components/ui/FieldHeader/FieldHeader.tsx b/frontend/lib/components/ui/FieldHeader/FieldHeader.tsx
index ab4bd96e72d2..df103ae67e45 100644
--- a/frontend/lib/components/ui/FieldHeader/FieldHeader.tsx
+++ b/frontend/lib/components/ui/FieldHeader/FieldHeader.tsx
@@ -1,3 +1,5 @@
+import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
+
 import styles from "./FieldHeader.module.scss";
 
 import { Icon } from "../Icon/Icon";
@@ -5,16 +7,25 @@ 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>
   );
 };