coder · johnstcn · May 1, 2025 · May 1, 2025 · May 1, 2025 · May 2, 2025
diff --git a/site/package.json b/site/package.json
@@ -35,6 +35,8 @@
 		"update-emojis": "cp -rf ./node_modules/emoji-datasource-apple/img/apple/64/* ./static/emojis"
 	},
 	"dependencies": {
+		"@ai-sdk/provider-utils": "2.2.6",
+		"@ai-sdk/react": "1.2.6",
 		"@emoji-mart/data": "1.2.1",
 		"@emoji-mart/react": "1.1.1",
 		"@emotion/cache": "11.14.0",
@@ -111,6 +113,7 @@
 		"react-virtualized-auto-sizer": "1.0.24",
 		"react-window": "1.8.11",
 		"recharts": "2.15.0",
+		"rehype-raw": "7.0.0",
 		"remark-gfm": "4.0.0",
 		"resize-observer-polyfill": "1.5.1",
 		"rollup-plugin-visualizer": "5.14.0",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -827,6 +827,13 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getDeploymentLLMs = async (): Promise<TypesGen.LanguageModelConfig> => {
+		const response = await this.axios.get<TypesGen.LanguageModelConfig>(
+			"/api/v2/deployment/llms",
+		);
+		return response.data;
+	};
+
 	getOrganizationIdpSyncClaimFieldValues = async (
 		organization: string,
 		field: string,
@@ -2489,6 +2496,23 @@ class ApiMethods {
 	markAllInboxNotificationsAsRead = async () => {
 		await this.axios.put<void>("/api/v2/notifications/inbox/mark-all-as-read");
 	};
+
+	createChat = async () => {
+		const res = await this.axios.post<TypesGen.Chat>("/api/v2/chats");
+		return res.data;
+	};
+
+	getChats = async () => {
+		const res = await this.axios.get<TypesGen.Chat[]>("/api/v2/chats");
+		return res.data;
+	};
+
+	getChatMessages = async (chatId: string) => {
+		const res = await this.axios.get<TypesGen.ChatMessage[]>(
+			`/api/v2/chats/${chatId}/messages`,
+		);
+		return res.data;
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

diff --git a/site/src/api/queries/chats.ts b/site/src/api/queries/chats.ts
@@ -0,0 +1,25 @@
+import { API } from "api/api";
+import type { QueryClient } from "react-query";
+
+export const createChat = (queryClient: QueryClient) => {
+	return {
+		mutationFn: API.createChat,
+		onSuccess: async () => {
+			await queryClient.invalidateQueries(["chats"]);
+		},
+	};
+};
+
+export const getChats = () => {
+	return {
+		queryKey: ["chats"],
+		queryFn: API.getChats,
+	};
+};
+
+export const getChatMessages = (chatID: string) => {
+	return {
+		queryKey: ["chatMessages", chatID],
+		queryFn: () => API.getChatMessages(chatID),
+	};
+};
diff --git a/site/src/api/queries/deployment.ts b/site/src/api/queries/deployment.ts
@@ -36,3 +36,10 @@ export const deploymentIdpSyncFieldValues = (field: string) => {
 		queryFn: () => API.getDeploymentIdpSyncFieldValues(field),
 	};
 };
+
+export const deploymentLanguageModels = () => {
+	return {
+		queryKey: ["deployment", "llms"],
+		queryFn: API.getDeploymentLLMs,
+	};
+};
diff --git a/site/src/contexts/useAgenticChat.ts b/site/src/contexts/useAgenticChat.ts
@@ -0,0 +1,23 @@
+import { experiments } from "api/queries/experiments";
+
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
+import { useEffect, useState } from "react";
+import { useQuery } from "react-query";
+
+interface AgenticChat {
+	readonly enabled: boolean;
+}
+
+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 };
+};
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -4,6 +4,7 @@ import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import type { ProxyContextValue } from "contexts/ProxyContext";
+import { useAgenticChat } from "contexts/useAgenticChat";
 import { useWebpushNotifications } from "contexts/useWebpushNotifications";
 import { NotificationsInbox } from "modules/notifications/NotificationsInbox/NotificationsInbox";
 import type { FC } from "react";
@@ -45,8 +46,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	canViewAuditLog,
 	proxyContextValue,
 }) => {
-	const { subscribed, enabled, loading, subscribe, unsubscribe } =
-		useWebpushNotifications();
+	const webPush = useWebpushNotifications();
 
 	return (
 		<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
@@ -76,13 +76,21 @@ export const NavbarView: FC<NavbarViewProps> = ({
 					/>
 				</div>
 
-				{enabled ? (
-					subscribed ? (
-						<Button variant="outline" disabled={loading} onClick={unsubscribe}>
+				{webPush.enabled ? (
+					webPush.subscribed ? (
+						<Button
+							variant="outline"
+							disabled={webPush.loading}
+							onClick={webPush.unsubscribe}
+						>
 							Disable WebPush
 						</Button>
 					) : (
-						<Button variant="outline" disabled={loading} onClick={subscribe}>
+						<Button
+							variant="outline"
+							disabled={webPush.loading}
+							onClick={webPush.subscribe}
+						>
 							Enable WebPush
 						</Button>
 					)
@@ -132,6 +140,7 @@ interface NavItemsProps {
 
 const NavItems: FC<NavItemsProps> = ({ className }) => {
 	const location = useLocation();
+	const agenticChat = useAgenticChat();
 
 	return (
 		<nav className={cn("flex items-center gap-4 h-full", className)}>
@@ -154,6 +163,16 @@ const NavItems: FC<NavItemsProps> = ({ className }) => {
 			>
 				Templates
 			</NavLink>
+			{agenticChat.enabled ? (
+				<NavLink
+					className={({ isActive }) => {
+						return cn(linkStyles.default, isActive ? linkStyles.active : "");
+					}}
+					to="/chat"
+				>
+					Chat
+				</NavLink>
+			) : null}
 		</nav>
 	);
 };
diff --git a/site/src/pages/ChatPage/ChatLanding.tsx b/site/src/pages/ChatPage/ChatLanding.tsx
@@ -0,0 +1,184 @@
+import { useTheme } from "@emotion/react";
+import SendIcon from "@mui/icons-material/Send";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { createChat } from "api/queries/chats";
+import type { Chat } from "api/typesGenerated";
+import { Margins } from "components/Margins/Margins";
+import { useAuthenticated } from "hooks";
+import { type FC, type FormEvent, useState } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { useNavigate } from "react-router-dom";
+import { LanguageModelSelector } from "./LanguageModelSelector";
+
+export interface ChatLandingLocationState {
+	chat: Chat;
+	message: string;
+}
+
+const ChatLanding: FC = () => {
+	const { user } = useAuthenticated();
+	const theme = useTheme();
+	const [input, setInput] = useState("");
+	const navigate = useNavigate();
+	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
+				css={{
+					display: "flex",
+					flexDirection: "column",
+					marginTop: theme.spacing(24),
+					alignItems: "center",
+					paddingBottom: theme.spacing(4),
+				}}
+			>
+				{/* Initial Welcome Message Area */}
+				<div
+					css={{
+						flexGrow: 1,
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						alignItems: "center",
+						gap: theme.spacing(1),
+						padding: theme.spacing(1),
+						width: "100%",
+						maxWidth: "700px",
+						marginBottom: theme.spacing(4),
+					}}
+				>
+					<h1
+						css={{
+							fontSize: theme.typography.h4.fontSize,
+							fontWeight: theme.typography.h4.fontWeight,
+							lineHeight: theme.typography.h4.lineHeight,
+							marginBottom: theme.spacing(1),
+							textAlign: "center",
+						}}
+					>
+						Good evening, {user?.name.split(" ")[0]}
+					</h1>
+					<p
+						css={{
+							fontSize: theme.typography.h6.fontSize,
+							fontWeight: theme.typography.h6.fontWeight,
+							lineHeight: theme.typography.h6.lineHeight,
+							color: theme.palette.text.secondary,
+							textAlign: "center",
+							margin: 0,
+							maxWidth: "500px",
+							marginInline: "auto",
+						}}
+					>
+						How can I help you today?
+					</p>
+				</div>
+
+				{/* Input Form and Suggestions - Always Visible */}
+				<div css={{ width: "100%", maxWidth: "700px", marginTop: "auto" }}>
+					<Stack
+						direction="row"
+						spacing={2}
+						justifyContent="center"
+						sx={{ mb: 2 }}
+					>
+						<Button
+							variant="outlined"
+							onClick={() =>
+								handleSuggestionClick("Help me work on issue #...")
+							}
+						>
+							Work on Issue
+						</Button>
+						<Button
+							variant="outlined"
+							onClick={() =>
+								handleSuggestionClick("Help me build a template for...")
+							}
+						>
+							Build a Template
+						</Button>
+						<Button
+							variant="outlined"
+							onClick={() =>
+								handleSuggestionClick("Help me start a new project using...")
+							}
+						>
+							Start a Project
+						</Button>
+					</Stack>
+					<LanguageModelSelector />
+					<Paper
+						component="form"
+						onSubmit={handleFormSubmit}
+						elevation={2}
+						css={{
+							padding: "16px",
+							display: "flex",
+							alignItems: "center",
+							width: "100%",
+							borderRadius: "12px",
+							border: `1px solid ${theme.palette.divider}`,
+						}}
+					>
+						<TextField
+							value={input}
+							onChange={handleInputChange}
+							placeholder="Ask Coder..."
+							fullWidth
+							variant="outlined"
+							multiline
+							maxRows={5}
+							css={{
+								marginRight: theme.spacing(1),
+								"& .MuiOutlinedInput-root": {
+									borderRadius: "8px",
+									padding: "10px 14px",
+								},
+							}}
+							autoFocus
+						/>
+						<IconButton type="submit" color="primary" disabled={!input.trim()}>
+							<SendIcon />
+						</IconButton>
+					</Paper>
+				</div>
+			</div>
+		</Margins>
+	);
+};
+
+export default ChatLanding;