From 9a58a178d05fed0d683953b612a5d6dbb8eb5bd3 Mon Sep 17 00:00:00 2001
From: Gregor Adams <greg@pixelass.com>
Date: Sat, 15 Jul 2023 04:31:09 +0200
Subject: [PATCH] docs: improved UI for docs

---
 README.md                               |   4 +-
 docs-gui/components/bot.tsx             | 164 ++++++++++--------------
 docs-gui/components/chat-input.tsx      | 130 +++++++++++++------
 docs-gui/components/language-select.tsx |  75 ++++++-----
 docs-gui/components/layout.tsx          |  14 +-
 package-lock.json                       |  16 ---
 package.json                            |   1 -
 7 files changed, 212 insertions(+), 192 deletions(-)

diff --git a/README.md b/README.md
index d8b3773..3822081 100644
--- a/README.md
+++ b/README.md
@@ -46,10 +46,10 @@ const artist = new Agent(new DallEModelAdapter(), {
 });
 
 // Assign tasks
-const writerResult = writer.assign({
+const writerResult = await writer.assign({
     question: "Describe the future to an artist so that they can draw it",
 });
-const artistResult = artist.assign(writerResult.message);
+const artistResult = await artist.assign(writerResult.message);
 // Do something with the result
 console.log(artistResult.message.content);
 ```
diff --git a/docs-gui/components/bot.tsx b/docs-gui/components/bot.tsx
index 74c446d..1f8b664 100644
--- a/docs-gui/components/bot.tsx
+++ b/docs-gui/components/bot.tsx
@@ -7,8 +7,6 @@ import { DotLottiePlayer } from "@dotlottie/react-player";
 import { Box, Card, CardContent, Checkbox, Container, Modal } from "@mui/joy";
 import axios from "axios";
 import { useAtom } from "jotai";
-import { useEffect } from "react";
-import { Controller, FormProvider, useForm } from "react-hook-form";
 
 import {
 	answerAtom,
@@ -47,120 +45,88 @@ export function generateMarkdown(guides: Guide[]): string {
 
 export function Bot({
 	onAnswer,
+	onExpand,
 	onQuestion,
 }: {
+	onExpand?(): void;
 	onQuestion?(): void;
 	onAnswer?(data: { id: string; message: Record<string, any> }): void;
 }) {
 	const [loading, setLoading] = useAtom(loadingAtom);
-	const [question, setQuestion] = useAtom(questionAtom);
+
+	const [question] = useAtom(questionAtom);
 	const [search, setSearch] = useAtom(searchAtom);
 	const [guide, setGuide] = useAtom(guideAtom);
-	const [language, setLanguage] = useAtom(languageAtom);
-	const methods = useForm<{
-		question: string;
-		guide: boolean;
-		language: string;
-		search: boolean;
-	}>({
-		defaultValues: { question, guide, language, search },
-	});
-
-	const onSubmit = methods.handleSubmit(
-		async (formData: {
-			question: string;
-			guide?: boolean;
-			search?: boolean;
-			language: string;
-		}) => {
-			setLoading(true);
-			setQuestion(formData.question);
-			setSearch(formData.search);
-			setGuide(formData.guide);
-			setLanguage(formData.language);
-
-			if (onQuestion) {
-				onQuestion();
-			}
+	const [language] = useAtom(languageAtom);
 
-			try {
-				const { data } = formData.search
-					? await axios.post("/api/search", {
-							q: formData.question,
-					  })
-					: await axios.post("/api/ama", {
-							question: formData.question,
-							guide: formData.guide,
-							language: formData.language,
-					  });
-				if (onAnswer) {
-					if (formData.search) {
-						onAnswer({
-							id: "search",
-							message: {
-								answer: generateMarkdown(data),
-							},
-						});
-					} else {
-						onAnswer(data);
-					}
+	async function handleSubmit() {
+		setLoading(true);
+
+		if (onQuestion) {
+			onQuestion();
+		}
+
+		try {
+			const { data } = search
+				? await axios.post("/api/search", {
+						q: question,
+				  })
+				: await axios.post("/api/ama", {
+						question,
+						guide,
+						language,
+				  });
+			if (onAnswer) {
+				if (search) {
+					onAnswer({
+						id: "search",
+						message: {
+							answer: generateMarkdown(data),
+						},
+					});
+				} else {
+					onAnswer(data);
 				}
-			} catch (error) {
-				console.error(error);
-			} finally {
-				setLoading(false);
 			}
+		} catch (error) {
+			console.error(error);
+		} finally {
+			setLoading(false);
 		}
-	);
-
-	const { setValue } = methods;
-
-	useEffect(() => {
-		setValue("question", question);
-		setValue("language", language);
-		setValue("search", search);
-		setValue("guide", guide);
-	}, [setValue, guide, search, language, question]);
+	}
 
 	return (
 		<Box>
-			<FormProvider {...methods}>
-				<Box sx={{ maxWidth: { md: 600, lg: 600 }, mx: "auto" }}>
-					<Box component="form" sx={{ p: 1 }} onSubmit={onSubmit}>
-						<ChatInput loading={loading} onSubmit={onSubmit} />
-						<Box mt={1} sx={{ display: "flex", gap: 2, alignItems: "center" }}>
-							<Controller
-								name="search"
-								control={methods.control}
-								render={({ field: { value, ...field } }) => (
-									<Checkbox
-										{...field}
-										checked={value}
-										label="Search"
-										variant="soft"
-										sx={{ color: "inherit" }}
-									/>
-								)}
-							/>
-							<Controller
-								name="guide"
-								control={methods.control}
-								render={({ field: { value, ...field } }) => (
-									<Checkbox
-										{...field}
-										checked={value}
-										label="Guide"
-										variant="soft"
-										sx={{ color: "inherit" }}
-									/>
-								)}
-							/>
+			<Box sx={{ maxWidth: { md: 600, lg: 600 }, mx: "auto" }}>
+				<Box component="form" sx={{ p: 1 }} onSubmit={handleSubmit}>
+					<ChatInput loading={loading} onSubmit={handleSubmit} onExpand={onExpand} />
+					<Box mt={1} sx={{ display: "flex", gap: 2, alignItems: "center" }}>
+						<Checkbox
+							name="search"
+							checked={search}
+							onChange={() => {
+								setSearch(!search);
+							}}
+							label="Search"
+							variant="soft"
+							sx={{ color: "inherit" }}
+						/>
+
+						<Checkbox
+							name="guide"
+							checked={guide}
+							onChange={() => {
+								setGuide(!guide);
+							}}
+							label="Guide"
+							variant="soft"
+							sx={{ color: "inherit" }}
+						/>
 
-							<LanguageSelect />
-						</Box>
+						<LanguageSelect />
 					</Box>
 				</Box>
-			</FormProvider>
+			</Box>
 		</Box>
 	);
 }
@@ -190,7 +156,7 @@ export default function HyvSearch() {
 
 	return (
 		<Box>
-			<Bot onAnswer={handleAnswer} onQuestion={handleQuestion} />
+			<Bot onAnswer={handleAnswer} onQuestion={handleQuestion} onExpand={handleOpen} />
 			<Modal disableAutoFocus open={open} onClose={handleClose}>
 				<Container sx={{ height: "calc(100% - 6rem)", my: "3rem" }}>
 					<Card variant="plain" sx={{ boxShadow: "lg", height: "100%" }}>
diff --git a/docs-gui/components/chat-input.tsx b/docs-gui/components/chat-input.tsx
index 85bc1d0..f9bb1d0 100644
--- a/docs-gui/components/chat-input.tsx
+++ b/docs-gui/components/chat-input.tsx
@@ -1,58 +1,104 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+// @ts-ignore
 import SendIcon from "@mui/icons-material/Send";
-import { CircularProgress, IconButton, Textarea } from "@mui/joy";
-import { useFormContext } from "react-hook-form";
+import { Box, CircularProgress, IconButton, Textarea } from "@mui/joy";
+import { useAtom } from "jotai";
+import { useState } from "react";
+
+// @ts-ignore
+import { questionAtom } from "@/docs/atoms";
 /* eslint-enable @typescript-eslint/ban-ts-comment */
 
 export interface ChatInputProps {
 	loading: boolean;
 
 	onSubmit(): void;
+	onExpand?(): void;
 }
 
-export function ChatInput({ loading, onSubmit }: ChatInputProps) {
-	const { register } = useFormContext();
+export function ChatInput({ loading, onSubmit, onExpand }: ChatInputProps) {
+	const [question, setQuestion] = useAtom(questionAtom);
+	const [focus, setFocus] = useState(false);
 	return (
-		<Textarea
-			{...register("question", { required: true })}
-			placeholder="How can I get started with Hyv and gpt-4?"
-			aria-label="Write your question and press Enter to sumbit"
-			minRows={1}
-			maxRows={8}
-			variant="soft"
-			onKeyDown={event => {
-				if (event.key === "Enter" && !event.shiftKey) {
-					event.preventDefault();
-					if (!loading) {
-						onSubmit();
-					}
-				}
-			}}
-			endDecorator={
-				<IconButton
-					disabled={loading}
-					variant="solid"
-					aria-label="Submit"
-					tabIndex={-1}
-					onClick={() => {
-						onSubmit();
-					}}
-				>
-					{loading ? <CircularProgress size="sm" /> : <SendIcon />}
-				</IconButton>
-			}
+		<Box
 			sx={{
-				width: "100%",
-				".MuiTextarea-endDecorator": {
-					position: "absolute",
-					bottom: 4,
-					right: -4,
-				},
-				".MuiTextarea-textarea": {
-					pr: 5,
-				},
+				position: "relative",
+				zIndex: 2,
+				height: 40,
 			}}
-		/>
+		>
+			<Textarea
+				name="question"
+				placeholder="How can I get started with Hyv and gpt-4?"
+				aria-label="Write your question and press Enter to sumbit"
+				minRows={1}
+				maxRows={focus ? 20 : 1}
+				variant="soft"
+				value={question}
+				sx={{
+					width: "100%",
+					"&:focus-within": { boxShadow: "md" },
+					".MuiTextarea-endDecorator": {
+						position: "absolute",
+						bottom: 4,
+						right: -4,
+					},
+					".MuiTextarea-startDecorator": {
+						position: "absolute",
+						top: 4,
+						left: 8,
+					},
+					".MuiTextarea-textarea": {
+						pr: 5,
+						pl: onExpand ? 5 : undefined,
+					},
+				}}
+				startDecorator={
+					onExpand ? (
+						<IconButton
+							variant="solid"
+							aria-label="Expand"
+							onClick={() => {
+								onExpand();
+							}}
+						>
+							<FullscreenIcon />
+						</IconButton>
+					) : undefined
+				}
+				endDecorator={
+					<IconButton
+						disabled={loading}
+						variant="solid"
+						aria-label="Submit"
+						tabIndex={-1}
+						onClick={() => {
+							onSubmit();
+						}}
+					>
+						{loading ? <CircularProgress size="sm" /> : <SendIcon />}
+					</IconButton>
+				}
+				onFocus={() => {
+					setFocus(true);
+				}}
+				onBlur={() => {
+					setFocus(false);
+				}}
+				onKeyDown={event => {
+					if (event.key === "Enter" && !event.shiftKey) {
+						event.preventDefault();
+						if (!loading) {
+							onSubmit();
+						}
+					}
+				}}
+				onChange={event => {
+					setQuestion(event.target.value);
+				}}
+			/>
+		</Box>
 	);
 }
diff --git a/docs-gui/components/language-select.tsx b/docs-gui/components/language-select.tsx
index cb44f9f..18b1171 100644
--- a/docs-gui/components/language-select.tsx
+++ b/docs-gui/components/language-select.tsx
@@ -1,9 +1,11 @@
-import { Avatar, ListItemDecorator, Option, Select } from "@mui/joy";
-import type { ChangeEvent, SyntheticEvent } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { Avatar, ListItemDecorator, Option, Select, SelectOption } from "@mui/joy";
+import { useAtom } from "jotai";
+import type { SyntheticEvent } from "react";
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
+import { languageAtom } from "@/docs/atoms";
+// @ts-ignore
 import FlagCn from "@/docs/components/flags/cn";
 // @ts-ignore
 import FlagCz from "@/docs/components/flags/cz";
@@ -45,35 +47,46 @@ const options = [
 ];
 
 export function LanguageSelect() {
-	const { control } = useFormContext();
+	const [language, setLanguage] = useAtom(languageAtom);
+	function renderValue(option: SelectOption<string> | null) {
+		if (!option) {
+			return null;
+		}
+
+		return (
+			<>
+				<ListItemDecorator sx={{ mr: 1 }}>
+					<Avatar variant="outlined" size="sm">
+						{options.find(o => o.value === option.value)?.flag}
+					</Avatar>
+				</ListItemDecorator>
+				{option.label}
+			</>
+		);
+	}
+
 	return (
-		<Controller
+		<Select
 			name="language"
-			control={control}
-			render={({ field: { onChange, ...field } }) => (
-				<Select
-					{...field}
-					aria-label="Select a language"
-					variant="soft"
-					sx={{ flex: 1 }}
-					onChange={(event: SyntheticEvent, value) => {
-						onChange({
-							target: { value },
-						} as ChangeEvent<HTMLSelectElement>);
-					}}
-				>
-					{options.map(option => (
-						<Option key={option.id} value={option.value}>
-							<ListItemDecorator>
-								<Avatar variant="outlined" size="sm">
-									{option.flag}
-								</Avatar>
-							</ListItemDecorator>
-							{option.label}
-						</Option>
-					))}
-				</Select>
-			)}
-		/>
+			aria-label="Select a language"
+			variant="soft"
+			value={language}
+			sx={{ flex: 1 }}
+			renderValue={renderValue}
+			onChange={(event: SyntheticEvent, value) => {
+				setLanguage(value);
+			}}
+		>
+			{options.map(option => (
+				<Option key={option.id} value={option.value}>
+					<ListItemDecorator>
+						<Avatar variant="outlined" size="sm">
+							{option.flag}
+						</Avatar>
+					</ListItemDecorator>
+					{option.label}
+				</Option>
+			))}
+		</Select>
 	);
 }
diff --git a/docs-gui/components/layout.tsx b/docs-gui/components/layout.tsx
index b2094d1..dabedeb 100644
--- a/docs-gui/components/layout.tsx
+++ b/docs-gui/components/layout.tsx
@@ -2,6 +2,8 @@ import { MDXProvider } from "@mdx-js/react";
 import { ClickAwayListener } from "@mui/base";
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+// @ts-ignore
 import MenuIcon from "@mui/icons-material/Menu";
 // @ts-ignore
 import TocIcon from "@mui/icons-material/Toc";
@@ -12,6 +14,7 @@ import {
 	List,
 	ListItem,
 	ListItemButton,
+	ListItemDecorator,
 	Sheet,
 	Tooltip,
 	Typography,
@@ -77,12 +80,21 @@ export const tocComponents = {
 		);
 	},
 	a({ href, children }) {
+		const { asPath } = useRouter();
+		const [, hash] = asPath.split("#");
+		const selected = `#${hash}` === href;
 		return (
 			<NextLink passHref legacyBehavior href={href}>
 				<ListItemButton
+					selected={selected}
 					component="a"
 					target={href.startsWith("http") ? "_blank" : undefined}
 				>
+					{selected && (
+						<ListItemDecorator>
+							<ArrowRightIcon />
+						</ListItemDecorator>
+					)}
 					{children}
 				</ListItemButton>
 			</NextLink>
@@ -156,7 +168,7 @@ export function Layout({ children }: { children: ReactNode }) {
 									{pageData?.toc}
 								</ReactMarkdown>
 							}
-							sx={{ boxShadow: "md" }}
+							sx={{ boxShadow: "md", width: 300 }}
 						>
 							<IconButton
 								aria-label="Open table of contents"
diff --git a/package-lock.json b/package-lock.json
index fb909de..f0f002a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,7 +56,6 @@
         "prism-theme-vars": "^0.2.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-hook-form": "^7.45.1",
         "react-markdown": "^8.0.7",
         "react-syntax-highlighter": "^15.5.0",
         "remark-gfm": "^3.0.1",
@@ -13201,21 +13200,6 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-hook-form": {
-      "version": "7.45.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.1.tgz",
-      "integrity": "sha512-6dWoFJwycbuFfw/iKMcl+RdAOAOHDiF11KWYhNDRN/OkUt+Di5qsZHwA0OwsVnu9y135gkHpTw9DJA+WzCeR9w==",
-      "engines": {
-        "node": ">=12.22.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/react-hook-form"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18"
-      }
-    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "license": "MIT"
diff --git a/package.json b/package.json
index 8b4d00f..0852098 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,6 @@
     "prism-theme-vars": "^0.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.1",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",