828 streamline chat model configuration info message network call

backend/src/controller/modelController.ts

@@ -27,8 +27,6 @@ function handleConfigureModel(req: OpenAiConfigureModelRequest, res: Response) {
  const configId = req.body.configId as MODEL_CONFIG_ID | undefined;
  const value = req.body.value;
 
- const maxValue = configId === 'topP' ? 1 : 2;
-
  if (!configId) {
  sendErrorResponse(res, 400, 'Missing configId');
  return;
@@ -44,6 +42,8 @@ function handleConfigureModel(req: OpenAiConfigureModelRequest, res: Response) {
  return;
  }
 
+ const maxValue = configId === 'topP' ? 1 : 2;
+
  if (value < 0 || value > maxValue) {
  sendErrorResponse(
  res,
@@ -55,17 +55,17 @@ function handleConfigureModel(req: OpenAiConfigureModelRequest, res: Response) {
 
  req.session.chatModel.configuration[configId] = value;
 
- const resultingChatInfoMessage = {
+ const chatInfoMessage = {
  infoMessage: `changed ${configId} to ${value}`,
  chatMessageType: 'GENERIC_INFO',
  } as ChatInfoMessage;
  req.session.levelState[LEVEL_NAMES.SANDBOX].chatHistory =
  pushMessageToHistory(
  req.session.levelState[LEVEL_NAMES.SANDBOX].chatHistory,
- resultingChatInfoMessage
+ chatInfoMessage
  );
 
- res.status(200).send({ resultingChatInfoMessage });
+ res.status(200).send({ chatInfoMessage });
 }
 
 export { handleSetModel, handleConfigureModel };

backend/src/models/api/OpenAiConfigureModelRequest.ts

@@ -4,7 +4,7 @@ import { ChatMessage } from '@src/models/chatMessage';
 
 export type OpenAiConfigureModelRequest = Request<
  never,
- null | { resultingChatInfoMessage: ChatMessage },
+ null | { chatInfoMessage: ChatMessage },
  {
  configId?: string;
  value?: number;

backend/src/models/chat.ts

@@ -19,17 +19,9 @@ enum CHAT_MODELS {
 
 type ChatModel = {
  id: CHAT_MODELS;
- configuration: ChatModelConfiguration;
+ configuration: ChatModelConfigurations;
 };
 
-type ChatModelConfiguration = {
- temperature: number;
- topP: number;
- frequencyPenalty: number;
- presencePenalty: number;
-};
-
-// these must match the above type because they are used for indexing
 const modelConfigIds = [
  'temperature',
  'topP',
@@ -39,6 +31,10 @@ const modelConfigIds = [
 
 type MODEL_CONFIG_ID = (typeof modelConfigIds)[number];
 
+type ChatModelConfigurations = {
+ [key in MODEL_CONFIG_ID]: number;
+};
+
 interface DefenceReport {
  blockedReason: string | null;
  isBlocked: boolean;
@@ -125,7 +121,7 @@ export type {
  ChatGptReply,
  ChatMalicious,
  ChatModel,
- ChatModelConfiguration,
+ ChatModelConfigurations as ChatModelConfiguration,
  ChatResponse,
  LevelHandlerResponse,
  ChatHttpResponse,

backend/test/unit/controller/modelController.test.ts

@@ -48,7 +48,7 @@ describe('handleConfigureModel', () => {
  req.session.levelState[LEVEL_NAMES.SANDBOX].chatHistory.at(-1)
  ).toEqual(expectedInfoMessage);
  expect(res.send).toHaveBeenCalledWith({
- resultingChatInfoMessage: expectedInfoMessage,
+ chatInfoMessage: expectedInfoMessage,
  });
  });
 

frontend/src/components/ControlPanel/ControlPanel.tsx

@@ -2,6 +2,7 @@ import { DEFENCES_HIDDEN_LEVEL3_IDS, MODEL_DEFENCES } from '@src/Defences';
 import DefenceBox from '@src/components/DefenceBox/DefenceBox';
 import DocumentViewButton from '@src/components/DocumentViewer/DocumentViewButton';
 import ModelBox from '@src/components/ModelBox/ModelBox';
+import DetailElement from '@src/components/ThemedButtons/DetailElement';
 import { ChatMessage, ChatModel } from '@src/models/chat';
 import {
  DEFENCE_ID,
@@ -70,42 +71,18 @@ function ControlPanel({
  {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
  currentLevel === LEVEL_NAMES.SANDBOX) && (
  <>
- <h2 className="visually-hidden">ScottBrew System Access</h2>
- <details className="control-collapsible-section">
- <summary className="control-collapsible-section-header">
- Defence Configuration
- </summary>
- <DefenceBox
- currentLevel={currentLevel}
- defences={nonModelDefences}
- showConfigurations={showConfigurations}
- resetDefenceConfiguration={resetDefenceConfiguration}
- toggleDefence={toggleDefence}
- setDefenceConfiguration={setDefenceConfiguration}
- />
- </details>
-
- <details className="control-collapsible-section">
- <summary className="control-collapsible-section-header">
- Model Configuration
- </summary>
- <DefenceBox
- currentLevel={currentLevel}
- defences={modelDefences}
- showConfigurations={showConfigurations}
- toggleDefence={toggleDefence}
- resetDefenceConfiguration={resetDefenceConfiguration}
- setDefenceConfiguration={setDefenceConfiguration}
- />
-
- {/* only show model box in sandbox mode */}
- {showConfigurations && (
- <ModelBox
- chatModel={chatModel}
- setChatModelId={setChatModelId}
- chatModelOptions={chatModelOptions}
- addInfoMessage={addInfoMessage}
- addChatMessage={addChatMessage}
+ <h2 className="visually-hidden">
+ ScottBrewBot Security Configuration
+ </h2>
+ <div className="config-container">
+ <DetailElement useIcon={true} buttonText={'Defence Configuration'}>
+ <DefenceBox
+ currentLevel={currentLevel}
+ defences={nonModelDefences}
+ showConfigurations={showConfigurations}
+ resetDefenceConfiguration={resetDefenceConfiguration}
+ toggleDefence={toggleDefence}
+ setDefenceConfiguration={setDefenceConfiguration}
  />
  </DetailElement>
  </div>
@@ -125,6 +102,7 @@ function ControlPanel({
  setChatModelId={setChatModelId}
  chatModelOptions={chatModelOptions}
  addInfoMessage={addInfoMessage}
+ addChatMessage={addChatMessage}
  />
  )}
  </DetailElement>

frontend/src/components/ModelBox/ModelConfiguration.tsx

@@ -78,15 +78,13 @@ function ModelConfiguration({
 
  setCustomChatModelByID(id, newValue);
 
- void chatService
- .configureGptModel(id, newValue)
- .then((resultingChatInfoMessage) => {
- if (resultingChatInfoMessage) {
- addChatMessage(resultingChatInfoMessage);
- } else {
- setCustomChatModelByID(id, prevValue);
- }
- });
+ void chatService.configureGptModel(id, newValue).then((chatInfoMessage) => {
+ if (chatInfoMessage) {
+ addChatMessage(chatInfoMessage);
+ } else {
+ setCustomChatModelByID(id, prevValue);
+ }
+ });
  }
 
  useEffect(() => {

frontend/src/components/ModelBox/ModelConfigurationSlider.tsx

@@ -1,6 +1,7 @@
 import { Slider } from '@mui/material';
 import { useEffect, useState } from 'react';
 
+import DetailElement from '@src/components/ThemedButtons/DetailElement';
 import {
  CustomChatModelConfiguration,
  MODEL_CONFIG_ID,

frontend/src/models/chat.ts

@@ -20,14 +20,6 @@ type ChatModel = {
  configuration: ChatModelConfigurations;
 };
 
-type ChatModelConfigurations = {
- temperature: number;
- topP: number;
- frequencyPenalty: number;
- presencePenalty: number;
-};
-
-// these must match the above type because they are used for indexing
 const modelConfigIds = [
  'temperature',
  'topP',
@@ -37,6 +29,10 @@ const modelConfigIds = [
 
 type MODEL_CONFIG_ID = (typeof modelConfigIds)[number];
 
+type ChatModelConfigurations = {
+ [key in MODEL_CONFIG_ID]: number;
+};
+
 interface CustomChatModelConfiguration {
  id: MODEL_CONFIG_ID;
  name: string;

frontend/src/models/combined.ts

@@ -20,7 +20,7 @@ type LoadLevelResponse = {
 };
 
 type ConfigureGptModelResponse = {
- resultingChatInfoMessage: ChatMessageDTO;
+ chatInfoMessage: ChatMessageDTO;
 };
 
 export type { StartReponse, LoadLevelResponse, ConfigureGptModelResponse };

frontend/src/service/chatService.ts

@@ -84,11 +84,13 @@ async function configureGptModel(
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ configId, value }),
  });
- const { resultingChatInfoMessage } =
- (await response.json()) as ConfigureGptModelResponse;
- return response.status === 200
- ? makeChatMessageFromDTO(resultingChatInfoMessage)
- : null;
+
+ if (response.status !== 200) return null;
+ else {
+ const { chatInfoMessage } =
+ (await response.json()) as ConfigureGptModelResponse;
+ return makeChatMessageFromDTO(chatInfoMessage);
+ }
 }
 
 async function addInfoMessageToChatHistory(