chore: address PR comments

johnstcn · johnstcn · commit 5fb99bd9f6c7 · 2025-05-13T16:45:59.000+01:00
diff --git a/site/src/contexts/useAgenticChat.ts b/site/src/contexts/useAgenticChat.ts
@@ -1,7 +1,6 @@
 import { experiments } from "api/queries/experiments";
 
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
-import { useEffect, useState } from "react";
 import { useQuery } from "react-query";
 
 interface AgenticChat {
@@ -11,13 +10,7 @@ interface AgenticChat {
 export const useAgenticChat = (): AgenticChat => {
 	const { metadata } = useEmbeddedMetadata();
 	const enabledExperimentsQuery = useQuery(experiments(metadata.experiments));
-
-	const [enabled, setEnabled] = useState<boolean>(false);
-	useEffect(() => {
-		if (enabledExperimentsQuery.data?.includes("agentic-chat")) {
-			setEnabled(true);
-		}
-	});
-
-	return { enabled };
+	return {
+		enabled: enabledExperimentsQuery.data?.includes("agentic-chat") ?? false,
+	};
 };
diff --git a/site/src/pages/ChatPage/ChatLanding.tsx b/site/src/pages/ChatPage/ChatLanding.tsx
@@ -27,33 +27,6 @@ const ChatLanding: FC = () => {
 	const queryClient = useQueryClient();
 	const createChatMutation = useMutation(createChat(queryClient));
 
-	const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		setInput(event.target.value);
-	};
-
-	// Placeholder submit handler
-	const handleFormSubmit = (e: FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		if (!input.trim()) return;
-		// Actual submission logic will go elsewhere
-		setInput(""); // Clear input after submit (optional)
-
-		createChatMutation.mutateAsync().then((chat) => {
-			navigate(`/chat/${chat.id}`, {
-				state: {
-					chat,
-					message: input,
-				},
-			});
-		});
-	};
-
-	// Placeholder suggestion handler
-	const handleSuggestionClick = (suggestion: string) => {
-		setInput(suggestion);
-		// Optionally trigger focus on the input field here
-	};
-
 	return (
 		<Margins>
 			<div
@@ -117,33 +90,37 @@ const ChatLanding: FC = () => {
 					>
 						<Button
 							variant="outlined"
-							onClick={() =>
-								handleSuggestionClick("Help me work on issue #...")
-							}
+							onClick={() => setInput("Help me work on issue #...")}
 						>
 							Work on Issue
 						</Button>
 						<Button
 							variant="outlined"
-							onClick={() =>
-								handleSuggestionClick("Help me build a template for...")
-							}
+							onClick={() => setInput("Help me build a template for...")}
 						>
 							Build a Template
 						</Button>
 						<Button
 							variant="outlined"
-							onClick={() =>
-								handleSuggestionClick("Help me start a new project using...")
-							}
+							onClick={() => setInput("Help me start a new project using...")}
 						>
 							Start a Project
 						</Button>
 					</Stack>
 					<LanguageModelSelector />
 					<Paper
 						component="form"
-						onSubmit={handleFormSubmit}
+						onSubmit={async (e: FormEvent<HTMLFormElement>) => {
+							e.preventDefault();
+							setInput("");
+							const chat = await createChatMutation.mutateAsync();
+							navigate(`/chat/${chat.id}`, {
+								state: {
+									chat,
+									message: input,
+								},
+							});
+						}}
 						elevation={2}
 						css={{
 							padding: "16px",
@@ -156,8 +133,11 @@ const ChatLanding: FC = () => {
 					>
 						<TextField
 							value={input}
-							onChange={handleInputChange}
+							onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+								setInput(event.target.value);
+							}}
 							placeholder="Ask Coder..."
+							required
 							fullWidth
 							variant="outlined"
 							multiline
diff --git a/site/src/pages/ChatPage/LanguageModelSelector.tsx b/site/src/pages/ChatPage/LanguageModelSelector.tsx
@@ -30,7 +30,14 @@ export const LanguageModelSelector: FC = () => {
 		);
 	}
 
-	const models = languageModelConfig.models ?? [];
+	const models = Array.from(languageModelConfig.models).toSorted((a, b) => {
+		// Sort by provider first, then by display name
+		const compareProvider = a.provider.localeCompare(b.provider);
+		if (compareProvider !== 0) {
+			return compareProvider;
+		}
+		return a.display_name.localeCompare(b.display_name);
+	});
 
 	if (models.length === 0) {
 		return (
