feat(#677): turn settings into a separate page #731

Jshen123 · 2023-06-06T21:44:56Z

Resolves #677

Description:

created new unstyled input component
added config options in new settings page
use zustand to manage settings state (including localstorage)
- settings will now save automatically (without the need to click save)
- reset function is built (button is not included in this PR)

Future TODO:

replace useSettings with modelSettingsStore

vercel · 2023-06-06T21:45:06Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agent-gpt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2023 0:33am
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2023 0:33am

asim-shrestha · 2023-06-06T22:12:57Z

next/src/types/modelSettings.ts

+export const [GPT_35_TURBO, GPT_4] = ["gpt-3.5-turbo" as const, "gpt-4" as const];
+export const GPT_MODEL_NAMES = [GPT_35_TURBO, GPT_4];
+export type GPTModelNames = typeof GPT_35_TURBO | typeof GPT_4;


export type GPTModelNames = "gpt-3.5-turbo" | "gpt-4"

I think something like this is a bit standard, then you just use the string literals directly (And typing is handled by Typescript)

I can do that. I wanted to minimize duplicating "gpt-3.5-turbo"

yeah it feels a bit weird but just they way typescript land works typically

+1 to Asim's approach :)

I think export type GPTModelNames = "gpt-3.5-turbo" | "gpt-4" is just frankly cleaner

awtkns · 2023-06-07T01:07:19Z

This is looking good! Like the generics!

Jshen123 · 2023-06-08T01:03:50Z

next/src/pages/settings.tsx

    </SidebarLayout>
  );
 };

 export default SettingsPage;
+
+export const getStaticProps: GetStaticProps = async ({ locale = "en" }) => {


had to include this to get translation working. let me know if there's a better way to handle this

@Cs4K1Sr4C any thoughts here?

awtkns

Looking good, just some minor things. Let me know if you wanna sync

awtkns · 2023-06-08T01:30:00Z

next/src/pages/settings.tsx

+        helpText={`${t("CONTROL_MAXIMUM_OF_TOKENS_DESCRIPTION", {
+          ns: "settings",
+        })}`}


Since this already returns a string, we don't need to wrap this in a paramaterized string:

Suggested change

helpText={`${t("CONTROL_MAXIMUM_OF_TOKENS_DESCRIPTION", {

ns: "settings",

})}`}

helpText={t("CONTROL_MAXIMUM_OF_TOKENS_DESCRIPTION", { ns: "settings"})}

awtkns · 2023-06-08T01:30:18Z

next/src/pages/settings.tsx

+        })}`}
+      />
+      <Input
+        label={`${t("LOOP", { ns: "settings" })}`}


see comment below :)

awtkns · 2023-06-08T01:30:26Z

next/src/pages/settings.tsx

+          max: 1,
+          step: 0.01
+        }}
+        helpText={`${t("HIGHER_VALUES_MAKE_OUTPUT_MORE_RANDOM", {


see coment below :)

awtkns · 2023-06-08T01:30:41Z

next/src/pages/settings.tsx

+
+      <h1 className="mt-6">Advanced Settings</h1>
+      <Input
+        label={`${t("TEMPERATURE", { ns: "settings" })}`}


see comment below :)

awtkns · 2023-06-08T01:31:04Z

next/src/pages/settings.tsx

+        })}`}
+      />
+      <Input
+        label={`${t("TOKENS", { ns: "settings" })}`}


see comment below :)

awtkns · 2023-06-08T01:34:00Z

next/src/ui/input.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {useTranslation} from "next-i18next";


This import looks unused, let me know if you need help setting up prettier. Installing the prettier plugin will help with formatting 🎨

awtkns · 2023-06-08T01:34:40Z

next/src/ui/input.tsx

+          {...props.attributes}
+        />
+      </div>
+      {props.helpText && (<p className="mt-2 text-sm text-gray-500" id={`${props.name}-description`}>


Might be som formatting issues here that prettier will solve

awtkns · 2023-06-08T01:37:57Z

next/src/types/modelSettings.ts

+  'language' as const, 'customModelName' as const, 'customTemperature' as const, 'customMaxLoops' as const, 'maxTokens' as const
+];
+
+export interface ModelSettings {


@Jshen123 can we chat about this one?

Note quite sure of the benefit ohh this compared to:

export type ModelSettings = { language?: string; customModelName?: string; customTemperature?: number; customMaxLoops?: number; maxTokens?: number; };

awtkns · 2023-06-08T01:38:17Z

next/src/stores/modelSettingsStore.ts

+        name: "agentgpt-settings-storage",
+        storage: createJSONStorage(() => localStorage),
+        partialize: (state) => ({
+          [SETTINGS_LANGUAGE]: state[SETTINGS_LANGUAGE],


see comment below about model settings

awtkns · 2023-06-08T01:39:13Z

next/src/pages/settings.tsx


 const SettingsPage = () => {
-  const [language, setLanguage] = useState<Language>(ENGLISH);
+  const [t] = useTranslation();


If you add the settings namescape here as default it can be removed from the rest of your translations

Jshen123 · 2023-06-08T02:36:12Z

Hi @awtkns @asim-shrestha, what's the preference on how we are passing in props? :)

awtkns · 2023-06-08T04:55:05Z

Hi @awtkns @asim-shrestha, what's the preference on how we are passing in props? :)

@Jshen123 it depends on the context. Option two is probably better here as i think each prop is only used once

Jshen123 · 2023-06-09T00:30:06Z

next/src/layout/sidebar.tsx

@@ -25,7 +33,7 @@ const links = [
 ];

 interface Props extends PropsWithChildren {
-  settings: SettingModel;


making it optional since it's no longer needed for the new settings component

Jshen123 · 2023-06-09T00:30:59Z

next/src/layout/sidebar.tsx

Other than the commented change, all changes here are from Prettier

add combobox for model names

6d2e36c

Jshen123 marked this pull request as draft June 6, 2023 21:45

vercel bot deployed to Preview – agent-gpt June 6, 2023 21:45 View deployment

asim-shrestha reviewed Jun 6, 2023

View reviewed changes

Jshen123 added 2 commits June 6, 2023 16:06

add unstyled input element and implement slider for temperature

7bf16ab

import react in input component

7c74e3f

vercel bot temporarily deployed to Preview – docs June 6, 2023 23:10 Inactive

vercel bot deployed to Preview – agent-gpt June 6, 2023 23:11 View deployment

add slider settings

975921e

vercel bot deployed to Preview – agent-gpt June 7, 2023 02:57 View deployment

vercel bot temporarily deployed to Preview – docs June 7, 2023 02:57 Inactive

implement zustand state for modelsettings

f68b4c5

Jshen123 changed the title ~~feat(#677): add combobox for model names~~ feat(#677): turn settings into a separate page Jun 8, 2023

vercel bot deployed to Preview – agent-gpt June 8, 2023 01:03 View deployment

vercel bot temporarily deployed to Preview – docs June 8, 2023 01:03 Inactive

Jshen123 commented Jun 8, 2023

View reviewed changes

Jshen123 marked this pull request as ready for review June 8, 2023 01:07

Jshen123 requested review from awtkns and asim-shrestha June 8, 2023 01:07

awtkns reviewed Jun 8, 2023

View reviewed changes

config prettier and update formatting

e906716

vercel bot deployed to Preview – agent-gpt June 8, 2023 02:29 View deployment

vercel bot temporarily deployed to Preview – docs June 8, 2023 02:29 Inactive

remove <T> from input component

c3f4b74

address PR feedbacks

2e1b87c

vercel bot temporarily deployed to Preview – docs June 8, 2023 23:48 Inactive

vercel bot deployed to Preview – agent-gpt June 8, 2023 23:49 View deployment

resolve merge conflicts

bb0d646

vercel bot temporarily deployed to Preview – docs June 9, 2023 00:29 Inactive

Jshen123 commented Jun 9, 2023

View reviewed changes

vercel bot deployed to Preview – agent-gpt June 9, 2023 00:30 View deployment

Jshen123 commented Jun 9, 2023

View reviewed changes

next/src/layout/sidebar.tsx

Copy link

Contributor Author

Jshen123 Jun 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than the commented change, all changes here are from Prettier

remove comment

667947a

Jshen123 requested a review from awtkns June 9, 2023 00:33

vercel bot deployed to Preview – agent-gpt June 9, 2023 00:33 View deployment

vercel bot temporarily deployed to Preview – docs June 9, 2023 00:33 Inactive

awtkns approved these changes Jun 9, 2023

View reviewed changes

awtkns merged commit c44b757 into main Jun 9, 2023
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(#677): turn settings into a separate page #731

feat(#677): turn settings into a separate page #731

Jshen123 commented Jun 6, 2023 •

edited

vercel bot commented Jun 6, 2023 •

edited

asim-shrestha Jun 6, 2023

Jshen123 Jun 6, 2023

asim-shrestha Jun 6, 2023

awtkns Jun 8, 2023

awtkns commented Jun 7, 2023

Jshen123 Jun 8, 2023

awtkns Jun 8, 2023

awtkns left a comment

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

awtkns Jun 8, 2023

Jshen123 commented Jun 8, 2023

awtkns commented Jun 8, 2023

Jshen123 Jun 9, 2023

Jshen123 Jun 9, 2023

		@@ -0,0 +1,42 @@
		import React from "react";
		import {useTranslation} from "next-i18next";

feat(#677): turn settings into a separate page #731

feat(#677): turn settings into a separate page #731

Conversation

Jshen123 commented Jun 6, 2023 • edited

vercel bot commented Jun 6, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

awtkns commented Jun 7, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

awtkns left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jshen123 commented Jun 8, 2023

awtkns commented Jun 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jshen123 commented Jun 6, 2023 •

edited

vercel bot commented Jun 6, 2023 •

edited