feat: dropdown to adjust conversational history limits

frontend/src/settings/General.tsx

@@ -8,6 +8,8 @@ import {
   setPrompt,
   setChunks,
   selectChunks,
+  setTokenLimit,
+  selectTokenLimit,
   setModalStateDeleteConv,
 } from '../preferences/preferenceSlice';
 
@@ -17,10 +19,19 @@ const General: React.FC = () => {
   const themes = ['Light', 'Dark'];
   const languages = ['English'];
   const chunks = ['0', '2', '4', '6', '8', '10'];
+  const token_limits = new Map([
+    [0, 'None'],
+    [100, 'Low'],
+    [1000, 'Medium'],
+    [2000, 'Default'],
+    [4000, 'High'],
+    [1e9, 'Unlimited'],
+  ]);
   const [prompts, setPrompts] = React.useState<
     { name: string; id: string; type: string }[]
   >([]);
   const selectedChunks = useSelector(selectChunks);
+  const selectedTokenLimit = useSelector(selectTokenLimit);
   const [isDarkTheme, toggleTheme] = useDarkTheme();
   const [selectedTheme, setSelectedTheme] = React.useState(
     isDarkTheme ? 'Dark' : 'Light',
@@ -87,6 +98,31 @@ const General: React.FC = () => {
           border="border"
         />
       </div>
+      <div className="mb-5">
+        <p className="mb-2 font-bold text-jet dark:text-bright-gray">
+          Conversational history
+        </p>
+        <Dropdown
+          options={Array.from(token_limits, ([value, desc]) => ({
+            value: value,
+            description: desc,
+          }))}
+          selectedValue={{
+            value: selectedTokenLimit,
+            description: token_limits.get(selectedTokenLimit) as string,
+          }}
+          onSelect={({
+            value,
+            description,
+          }: {
+            value: number;
+            description: string;
+          }) => dispatch(setTokenLimit(value))}
+          size="w-56"
+          rounded="3xl"
+          border="border"
+        />
+      </div>
       <div className="mb-5">
         <Prompts
           prompts={prompts}