From bb419193f3c7bdbcb7707714e427cc4d3ab320ea Mon Sep 17 00:00:00 2001
From: Peter Marsh <pmarsh@scottlogic.com>
Date: Tue, 12 Mar 2024 13:20:59 +0000
Subject: [PATCH] conditionally render the chat model selection

---
 .../MainComponent/MainComponent.tsx           |  2 +-
 .../components/ModelBox/ModelSelection.tsx    | 82 +++++++++----------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/MainComponent/MainComponent.tsx b/frontend/src/components/MainComponent/MainComponent.tsx
index cde215d45..fcdeed5e7 100644
--- 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
index f78e2ebe0..019a6418c 100644
--- 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>
 	);