conditionally render the chat model selection

ScottLogic · Mar 12, 2024 · bb41919 · bb41919
1 parent 7d84f97
commit bb41919
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 42 deletions.
diff --git a/frontend/src/components/MainComponent/MainComponent.tsx b/frontend/src/components/MainComponent/MainComponent.tsx
@@ -182,7 +182,7 @@ function MainComponent({
  setDefences(defences);
 
  // we will only update the chatModel if it is defined in the backend response. It will only defined for the sandbox level.
- chatModel && setChatModel(chatModel);
+ setChatModel(chatModel);
  setMainBodyKey(MainBodyKey + 1);
  }
 

diff --git a/frontend/src/components/ModelBox/ModelSelection.tsx b/frontend/src/components/ModelBox/ModelSelection.tsx
@@ -56,50 +56,50 @@ function ModelSelection({
  <div className="model-selection-box">
  <fieldset className="model-selection-fieldset">
  <legend>Select Model</legend>
- <div className="model-selection-row">
- <div className="select-wrapper">
- <select
- aria-label="model-select"
- value={selectedModel ?? 0} // default to the first model
- onChange={(e) => {
- setSelectedModel(e.target.value);
- }}
- >
- {chatModelOptions.map((model) => (
- <option key={model} value={model}>
- {model}
- </option>
- ))}
- ;
- </select>
- <LoadingButton
- onClick={() => void submitSelectedModel()}
- isLoading={isSettingModel}
- loadingTooltip="Changing model..."
- >
- Choose
- </LoadingButton>
- </div>
- </div>
+ {chatModel ? (
+ <>
+ <div className="model-selection-row">
+ <div className="select-wrapper">
+ <select
+ aria-label="model-select"
+ value={selectedModel ?? 0} // default to the first model
+ onChange={(e) => {
+ setSelectedModel(e.target.value);
+ }}
+ >
+ {chatModelOptions.map((model) => (
+ <option key={model} value={model}>
+ {model}
+ </option>
+ ))}
+ ;
+ </select>
+ <LoadingButton
+ onClick={() => void submitSelectedModel()}
+ isLoading={isSettingModel}
+ loadingTooltip="Changing model..."
+ >
+ Choose
+ </LoadingButton>
+ </div>
+ </div>
 
- <div className="model-selection-info">
- {errorChangingModel ? (
- <p className="error-message" aria-live="polite">
- Error: Could not change model. You are still chatting to:
- <b> {chatModel?.id} </b>
- </p>
- ) : (
- <p>
- {chatModel ? (
- <>
- You are chatting to model: <b>{chatModel.id}</b>
- </>
+ <div className="model-selection-info">
+ {errorChangingModel ? (
+ <p className="error-message" aria-live="polite">
+ Error: Could not change model. You are still chatting to:
+ <b> {chatModel.id} </b>
+ </p>
  ) : (
- 'You are not connected to a model.'
+ <p>
+ You are chatting to model: <b>{chatModel.id}</b>
+ </p>
  )}
- </p>
- )}
- </div>
+ </div>
+ </>
+ ) : (
+ <p>Loading chatModel...</p>
+ )}
  </fieldset>
  </div>
  );