feat: allow set gpt model version

package.json

@@ -13,8 +13,8 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@graasp/apps-query-client": "^3.4.5",
-    "@graasp/sdk": "4.0.1",
+    "@graasp/apps-query-client": "https://github.com/graasp/graasp-apps-query-client.git#renovate/graasp-sdk-4.x",
+    "@graasp/sdk": "4.8.1",
     "@graasp/ui": "4.8.5",
     "@mui/icons-material": "5.15.16",
     "@mui/lab": "5.0.0-alpha.170",

src/config/appSetting.ts

@@ -1,4 +1,4 @@
-import { ChatBotMessage } from '@graasp/sdk';
+import { ChatBotMessage, GPTVersion } from '@graasp/sdk';
 
 export const SettingsKeys = {
   ChatbotPrompt: 'chatbot-prompt',
@@ -12,13 +12,14 @@ export enum ChatbotPromptSettingsKeys {
   InitialPrompt = 'initialPrompt',
   ChatbotCue = 'chatbotCue',
   ChatbotName = 'chatbotName',
+  GptVersion = 'gptVersion',
 }
 
 export type ChatbotPromptSettings = {
   [ChatbotPromptSettingsKeys.InitialPrompt]: ChatBotMessage[];
   [ChatbotPromptSettingsKeys.ChatbotCue]: string;
   [ChatbotPromptSettingsKeys.ChatbotName]: string;
-
+  [ChatbotPromptSettingsKeys.GptVersion]?: GPTVersion;
   // used to allow access using settings[settingKey] syntax
   // [key: string]: unknown;
 };

src/langs/en.json

@@ -48,6 +48,10 @@
         "NO_COMMENTS_PLACEHOLDER": "No comments",
         "ABOUT_TITLE": "About the Chatbot App",
         "ABOUT_DESCRIPTION": "The chatbot app uses OpenAI's ChatGPT model as a base to provide the chatbot integration. Users responses are transmitted to OpenAI trough their API to be processed and for responses to be generated. No other user data is transmitted. If users provide personal data in their messages there is nothing we can do to protect that data.",
-        "ABOUT_PRIVACY_POLICY_OPENAI": "See the <1>OpenAI Privacy Policy for EU users</1>."
+        "ABOUT_PRIVACY_POLICY_OPENAI": "See the <1>OpenAI Privacy Policy for EU users</1>.",
+        "MODEL_VERSION": "Model version",
+        "GPT_3_5_TURBO_DESCRIPTION" : "gpt-3.5-turbo-0125",
+        "GPT_4_DESCRIPTION" : "gpt-4",
+        "GPT_4_TURBO_DESCRIPTION" : "gpt-4-turbo"
     }
 }

src/mocks/db.ts

@@ -18,6 +18,7 @@ export const mockMembers: CompleteMember[] = [
     type: 'individual',
     createdAt: new Date('1996-09-08T19:00:00').toISOString(),
     updatedAt: new Date().toISOString(),
+    enableSaveActions: true,
   },
   {
     id: 'mock-member-id-2',
@@ -27,6 +28,7 @@ export const mockMembers: CompleteMember[] = [
     type: 'individual',
     createdAt: new Date('1995-02-02T15:00:00').toISOString(),
     updatedAt: new Date().toISOString(),
+    enableSaveActions: true,
   },
 ];
 
@@ -40,6 +42,7 @@ export const defaultMockContext: LocalContext = {
 
 export const mockItem: DiscriminatedItem = {
   id: defaultMockContext.itemId,
+  displayName: 'app-starter-ts-vite',
   name: 'app-starter-ts-vite',
   description: null,
   path: '',

src/modules/common/ChatbotPrompt.tsx

@@ -40,7 +40,6 @@ type Props = {
 const ChatbotPrompt = ({ id }: Props): JSX.Element | null => {
   const { t } = useTranslation();
   const { mutateAsync: postAppDataAsync } = mutations.usePostAppData();
-  const { mutateAsync: postChatBot } = mutations.usePostChatBot();
   const { data: appData } = hooks.useAppData<CommentData>();
   const {
     data: chatbotPrompts,
@@ -49,10 +48,15 @@ const ChatbotPrompt = ({ id }: Props): JSX.Element | null => {
   } = hooks.useAppSettings<ChatbotPromptSettings>({
     name: SettingsKeys.ChatbotPrompt,
   });
+  const chatbotPrompt = chatbotPrompts?.[0];
+
+  const { mutateAsync: postChatBot } = mutations.usePostChatBot(
+    chatbotPrompt?.data?.gptVersion,
+  );
+
   const { data: generalSettings } = hooks.useAppSettings<GeneralSettings>({
     name: SettingsKeys.General,
   });
-  const chatbotPrompt = chatbotPrompts?.[0];
   const generalSetting = generalSettings?.[0]?.data ?? DEFAULT_GENERAL_SETTINGS;
   let { memberId } = useLocalContext();
   if (id) {

src/modules/common/CommentThread.tsx

@@ -55,14 +55,18 @@ const CommentThread = ({ children }: Props): JSX.Element | null => {
   const { mutate: patchData } = mutations.usePatchAppData();
   const { mutateAsync: postAppDataAsync } = mutations.usePostAppData();
   const { mutate: postAction } = mutations.usePostAppAction();
-  const { mutateAsync: postChatbot, isLoading } = mutations.usePostChatBot();
   const { data: chatbotPrompts } = hooks.useAppSettings<ChatbotPromptSettings>({
     name: SettingsKeys.ChatbotPrompt,
   });
+  const chatbotPrompt = chatbotPrompts?.[0];
+
+  const { mutateAsync: postChatbot, isLoading } = mutations.usePostChatBot(
+    chatbotPrompt?.data?.gptVersion,
+  );
+
   const { data: generalSettings } = hooks.useAppSettings<GeneralSettings>({
     name: SettingsKeys.General,
   });
-  const chatbotPrompt = chatbotPrompts?.[0];
   const { maxThreadLength, maxCommentLength } = {
     ...DEFAULT_GENERAL_SETTINGS,
     ...generalSettings?.[0]?.data,

src/modules/settings/ChatbotSettings.tsx

@@ -12,14 +12,16 @@ import {
   CardContent,
   FormLabel,
   Link,
+  MenuItem,
+  Select,
   Stack,
   TextField,
   TextareaAutosize,
   Typography,
   styled,
 } from '@mui/material';
 
-import { ChatBotMessage } from '@graasp/sdk';
+import { ChatBotMessage, GPTVersion } from '@graasp/sdk';
 
 import { ChevronDown, Edit, Undo2 } from 'lucide-react';
 
@@ -69,11 +71,15 @@ const ChatbotSettings = (): JSX.Element => {
   const stringifiedJsonPrompt = JSON.stringify(initialPrompt, null, 2);
   const chatbotCue = chatbotPrompt?.data?.chatbotCue || '';
   const chatbotName = chatbotPrompt?.data?.chatbotName || DEFAULT_BOT_USERNAME;
+  const chatbotVersion =
+    chatbotPrompt?.data?.gptVersion || GPTVersion.GPT_3_5_TURBO;
+
   const [newChatbotPrompt, setNewChatbotPrompt] = useState(
     stringifiedJsonPrompt,
   );
   const [newChatbotCue, setNewChatbotCue] = useState(chatbotCue);
   const [newChatbotName, setNewChatbotName] = useState(chatbotName);
+  const [newChatbotVersion, setNewChatbotVersion] = useState(chatbotVersion);
 
   const doneEditing = (): void => {
     setIsEditing(false);
@@ -142,6 +148,7 @@ const ChatbotSettings = (): JSX.Element => {
         initialPrompt: jsonNewChatbotPrompt,
         chatbotCue: newChatbotCue,
         chatbotName: newChatbotName,
+        gptVersion: newChatbotVersion,
       };
       // setting does not exist
       if (!chatbotPrompt) {
@@ -275,6 +282,33 @@ const ChatbotSettings = (): JSX.Element => {
               </Accordion>
             </Stack>
           </Box>
+          <Box>
+            <Stack>
+              <FormLabel>{t('MODEL_VERSION')}</FormLabel>
+              <Typography variant="caption" color="text.secondary">
+                {t('CHATBOT_CUE_HELPER')}
+              </Typography>
+            </Stack>
+            <Select
+              value={newChatbotVersion}
+              label={t('MODEL_VERSION')}
+              onChange={(event) => {
+                setNewChatbotVersion(event.target.value as GPTVersion);
+                setUnsavedChanges(true);
+              }}
+              fullWidth
+              renderValue={(selected) => <Typography>{selected}</Typography>}
+            >
+              {Object.entries(GPTVersion).map(([key, v]) => (
+                <MenuItem key={v} value={v} sx={{ display: 'block' }}>
+                  <Typography>{v}</Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {t(`${key}_DESCRIPTION`)}
+                  </Typography>
+                </MenuItem>
+              ))}
+            </Select>
+          </Box>
           <Box>
             <Stack>
               <FormLabel>{t('CHATBOT_CUE_LABEL')}</FormLabel>
@@ -344,6 +378,28 @@ const ChatbotSettings = (): JSX.Element => {
                   </Typography>
                 )}
               </Stack>
+              <Stack direction="column">
+                <FormLabel> {t('MODEL_VERSION')}</FormLabel>
+                <Typography variant="caption" color="text.secondary">
+                  {t('CHATBOT_CUE_HELPER')}
+                </Typography>
+                <Typography>{newChatbotVersion}</Typography>
+              </Stack>
+              <Stack direction="column">
+                <Stack>
+                  <FormLabel>{t('CHATBOT_CUE_LABEL')}:</FormLabel>
+                  <Typography variant="caption" color="text.secondary">
+                    {t('CHATBOT_CUE_HELPER')}
+                  </Typography>
+                </Stack>
+                {chatbotCue ? (
+                  <Typography>{chatbotCue}</Typography>
+                ) : (
+                  <Typography color="text.disabled" fontStyle="italic">
+                    {t('CHATBOT_CUE_EMPTY_MESSAGE')}
+                  </Typography>
+                )}
+              </Stack>
             </Stack>
           </CardContent>
         </Card>