From 9aefcce171d3ca49433c124dcde31b694cea02eb Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 18:15:57 -0400
Subject: [PATCH 1/7] feat: add related topics feature and integrate with main
 page

---
 app/api/getRelatedTopics/route.ts |  13 ++
 app/page.tsx                      | 322 +++++++++++++++---------------
 components/RelatedTopics.tsx      |  67 +++++++
 3 files changed, 246 insertions(+), 156 deletions(-)
 create mode 100644 app/api/getRelatedTopics/route.ts
 create mode 100644 components/RelatedTopics.tsx

diff --git a/app/api/getRelatedTopics/route.ts b/app/api/getRelatedTopics/route.ts
new file mode 100644
index 0000000..a4417e2
--- /dev/null
+++ b/app/api/getRelatedTopics/route.ts
@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+	const { topic } = await request.json();
+	try {
+		const relatedTopics = [`${topic} 1`, `${topic} 2`];
+		return NextResponse.json({ topics: relatedTopics });
+	} catch (e) {
+		return new Response("Error. Failed to generate related topics.", {
+			status: 202,
+		});
+	}
+}
diff --git a/app/page.tsx b/app/page.tsx
index 32279ca..40897ea 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,165 +6,175 @@ import Hero from "@/components/Hero";
 import Sources from "@/components/Sources";
 import { useState } from "react";
 import {
-  createParser,
-  ParsedEvent,
-  ReconnectInterval,
+	createParser,
+	type ParsedEvent,
+	type ReconnectInterval,
 } from "eventsource-parser";
 import { getSystemPrompt } from "@/utils/utils";
 import Chat from "@/components/Chat";
+import RelatedTopics from "@/components/RelatedTopics";
 
 export default function Home() {
-  const [inputValue, setInputValue] = useState("");
-  const [topic, setTopic] = useState("");
-  const [showResult, setShowResult] = useState(false);
-  const [sources, setSources] = useState<{ name: string; url: string }[]>([]);
-  const [isLoadingSources, setIsLoadingSources] = useState(false);
-  const [messages, setMessages] = useState<{ role: string; content: string }[]>(
-    [],
-  );
-  const [loading, setLoading] = useState(false);
-  const [ageGroup, setAgeGroup] = useState("Middle School");
-
-  const handleInitialChat = async () => {
-    setShowResult(true);
-    setLoading(true);
-    setTopic(inputValue);
-    setInputValue("");
-
-    await handleSourcesAndChat(inputValue);
-
-    setLoading(false);
-  };
-
-  const handleChat = async (messages?: { role: string; content: string }[]) => {
-    setLoading(true);
-    const chatRes = await fetch("/api/getChat", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ messages }),
-    });
-
-    if (!chatRes.ok) {
-      throw new Error(chatRes.statusText);
-    }
-
-    // This data is a ReadableStream
-    const data = chatRes.body;
-    if (!data) {
-      return;
-    }
-    let fullAnswer = "";
-
-    const onParse = (event: ParsedEvent | ReconnectInterval) => {
-      if (event.type === "event") {
-        const data = event.data;
-        try {
-          const text = JSON.parse(data).text ?? "";
-          fullAnswer += text;
-          // Update messages with each chunk
-          setMessages((prev) => {
-            const lastMessage = prev[prev.length - 1];
-            if (lastMessage.role === "assistant") {
-              return [
-                ...prev.slice(0, -1),
-                { ...lastMessage, content: lastMessage.content + text },
-              ];
-            } else {
-              return [...prev, { role: "assistant", content: text }];
-            }
-          });
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    };
-
-    // https://web.dev/streams/#the-getreader-and-read-methods
-    const reader = data.getReader();
-    const decoder = new TextDecoder();
-    const parser = createParser(onParse);
-    let done = false;
-
-    while (!done) {
-      const { value, done: doneReading } = await reader.read();
-      done = doneReading;
-      const chunkValue = decoder.decode(value);
-      parser.feed(chunkValue);
-    }
-    setLoading(false);
-  };
-
-  async function handleSourcesAndChat(question: string) {
-    setIsLoadingSources(true);
-    let sourcesResponse = await fetch("/api/getSources", {
-      method: "POST",
-      body: JSON.stringify({ question }),
-    });
-    let sources;
-    if (sourcesResponse.ok) {
-      sources = await sourcesResponse.json();
-
-      setSources(sources);
-    } else {
-      setSources([]);
-    }
-    setIsLoadingSources(false);
-
-    const parsedSourcesRes = await fetch("/api/getParsedSources", {
-      method: "POST",
-      body: JSON.stringify({ sources }),
-    });
-    let parsedSources;
-    if (parsedSourcesRes.ok) {
-      parsedSources = await parsedSourcesRes.json();
-    }
-
-    const initialMessage = [
-      { role: "system", content: getSystemPrompt(parsedSources, ageGroup) },
-      { role: "user", content: `${question}` },
-    ];
-    setMessages(initialMessage);
-    await handleChat(initialMessage);
-  }
-
-  return (
-    <>
-      <Header />
-
-      <main
-        className={`flex grow flex-col px-4 pb-4 ${showResult ? "overflow-hidden" : ""}`}
-      >
-        {showResult ? (
-          <div className="mt-2 flex w-full grow flex-col justify-between overflow-hidden">
-            <div className="flex w-full grow flex-col space-y-2 overflow-hidden">
-              <div className="mx-auto flex w-full max-w-7xl grow flex-col gap-4 overflow-hidden lg:flex-row lg:gap-10">
-                <Chat
-                  messages={messages}
-                  disabled={loading}
-                  promptValue={inputValue}
-                  setPromptValue={setInputValue}
-                  setMessages={setMessages}
-                  handleChat={handleChat}
-                  topic={topic}
-                />
-                <Sources sources={sources} isLoading={isLoadingSources} />
-              </div>
-            </div>
-          </div>
-        ) : (
-          <Hero
-            promptValue={inputValue}
-            setPromptValue={setInputValue}
-            handleChat={handleChat}
-            ageGroup={ageGroup}
-            setAgeGroup={setAgeGroup}
-            handleInitialChat={handleInitialChat}
-          />
-        )}
-      </main>
-      {/* <Footer /> */}
-    </>
-  );
+	const [inputValue, setInputValue] = useState("");
+	const [topic, setTopic] = useState("");
+	const [showResult, setShowResult] = useState(false);
+	const [sources, setSources] = useState<{ name: string; url: string }[]>([]);
+	const [isLoadingSources, setIsLoadingSources] = useState(false);
+	const [messages, setMessages] = useState<{ role: string; content: string }[]>(
+		[],
+	);
+	const [loading, setLoading] = useState(false);
+	const [ageGroup, setAgeGroup] = useState("Middle School");
+
+	const handleInitialChat = async () => {
+		setShowResult(true);
+		setLoading(true);
+		setTopic(inputValue);
+		setInputValue("");
+
+		await handleSourcesAndChat(inputValue);
+
+		setLoading(false);
+	};
+
+	const handleChat = async (messages?: { role: string; content: string }[]) => {
+		setLoading(true);
+		const chatRes = await fetch("/api/getChat", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ messages }),
+		});
+
+		if (!chatRes.ok) {
+			throw new Error(chatRes.statusText);
+		}
+
+		// This data is a ReadableStream
+		const data = chatRes.body;
+		if (!data) {
+			return;
+		}
+		let fullAnswer = "";
+
+		const onParse = (event: ParsedEvent | ReconnectInterval) => {
+			if (event.type === "event") {
+				const data = event.data;
+				try {
+					const text = JSON.parse(data).text ?? "";
+					fullAnswer += text;
+					// Update messages with each chunk
+					setMessages((prev) => {
+						const lastMessage = prev[prev.length - 1];
+						if (lastMessage.role === "assistant") {
+							return [
+								...prev.slice(0, -1),
+								{ ...lastMessage, content: lastMessage.content + text },
+							];
+						} else {
+							return [...prev, { role: "assistant", content: text }];
+						}
+					});
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		};
+
+		// https://web.dev/streams/#the-getreader-and-read-methods
+		const reader = data.getReader();
+		const decoder = new TextDecoder();
+		const parser = createParser(onParse);
+		let done = false;
+
+		while (!done) {
+			const { value, done: doneReading } = await reader.read();
+			done = doneReading;
+			const chunkValue = decoder.decode(value);
+			parser.feed(chunkValue);
+		}
+		setLoading(false);
+	};
+
+	async function handleSourcesAndChat(question: string) {
+		setIsLoadingSources(true);
+		let sourcesResponse = await fetch("/api/getSources", {
+			method: "POST",
+			body: JSON.stringify({ question }),
+		});
+		let sources;
+		if (sourcesResponse.ok) {
+			sources = await sourcesResponse.json();
+
+			setSources(sources);
+		} else {
+			setSources([]);
+		}
+		setIsLoadingSources(false);
+
+		const parsedSourcesRes = await fetch("/api/getParsedSources", {
+			method: "POST",
+			body: JSON.stringify({ sources }),
+		});
+		let parsedSources;
+		if (parsedSourcesRes.ok) {
+			parsedSources = await parsedSourcesRes.json();
+		}
+
+		const initialMessage = [
+			{ role: "system", content: getSystemPrompt(parsedSources, ageGroup) },
+			{ role: "user", content: `${question}` },
+		];
+		setMessages(initialMessage);
+		await handleChat(initialMessage);
+	}
+
+	return (
+		<>
+			<Header />
+
+			<main
+				className={`flex grow flex-col px-4 pb-4 ${
+					showResult ? "overflow-hidden" : ""
+				}`}
+			>
+				{showResult ? (
+					<div className="mt-2 flex w-full grow flex-col justify-between overflow-hidden">
+						<div className="flex w-full grow flex-col space-y-2 overflow-hidden">
+							<div className="mx-auto flex w-full max-w-7xl grow flex-col gap-4 overflow-hidden lg:flex-row lg:gap-10">
+								<Chat
+									messages={messages}
+									disabled={loading}
+									promptValue={inputValue}
+									setPromptValue={setInputValue}
+									setMessages={setMessages}
+									handleChat={handleChat}
+									topic={topic}
+								/>
+								<div className="flex flex-row">
+									<Sources sources={sources} isLoading={isLoadingSources} />
+									<RelatedTopics
+										topic={topic}
+										setInputValue={setInputValue}
+										handleSourcesAndChat={handleSourcesAndChat}
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				) : (
+					<Hero
+						promptValue={inputValue}
+						setPromptValue={setInputValue}
+						handleChat={handleChat}
+						ageGroup={ageGroup}
+						setAgeGroup={setAgeGroup}
+						handleInitialChat={handleInitialChat}
+					/>
+				)}
+			</main>
+			{/* <Footer /> */}
+		</>
+	);
 }
diff --git a/components/RelatedTopics.tsx b/components/RelatedTopics.tsx
new file mode 100644
index 0000000..62e15ea
--- /dev/null
+++ b/components/RelatedTopics.tsx
@@ -0,0 +1,67 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+type RelatedTopicsProps = {
+	topic: string;
+	setInputValue: React.Dispatch<React.SetStateAction<string>>;
+	handleSourcesAndChat: (question: string) => Promise<void>;
+};
+
+const RelatedTopics: React.FC<RelatedTopicsProps> = ({
+	topic,
+	setInputValue,
+	handleSourcesAndChat,
+}) => {
+	const [relatedTopics, setRelatedTopics] = useState<string[]>([]);
+	const [loading, setLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		const fetchRelatedTopics = async () => {
+			setLoading(true);
+			const response = await fetch("/api/getRelatedTopics", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ topic }),
+			});
+
+			if (response.ok) {
+				const data = await response.json();
+				setRelatedTopics(data.topics);
+			}
+			setLoading(false);
+		};
+
+		if (topic) {
+			fetchRelatedTopics();
+		}
+	}, [topic]);
+
+	const handleTopicClick = (relatedTopic: string) => {
+		setInputValue(relatedTopic);
+		handleSourcesAndChat(relatedTopic);
+	};
+
+	return (
+		<div className="related-topics">
+			<h3>Related Topics</h3>
+			{loading ? (
+				<p>Loading...</p>
+			) : (
+				<ul>
+					{relatedTopics.map((relatedTopic) => (
+						<li
+							key={relatedTopic}
+							onClick={() => handleTopicClick(relatedTopic)}
+						>
+							{relatedTopic}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};
+
+export default RelatedTopics;

From 720af9bd4a59f93e5725348cdf1aaf8de55c65cc Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 19:51:50 -0400
Subject: [PATCH 2/7] refactor: update RelatedTopics component to improve
 structure and styling

---
 components/RelatedTopics.tsx | 57 +++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/components/RelatedTopics.tsx b/components/RelatedTopics.tsx
index 62e15ea..434eec8 100644
--- a/components/RelatedTopics.tsx
+++ b/components/RelatedTopics.tsx
@@ -1,17 +1,15 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 
-type RelatedTopicsProps = {
-	topic: string;
-	setInputValue: React.Dispatch<React.SetStateAction<string>>;
-	handleSourcesAndChat: (question: string) => Promise<void>;
-};
-
-const RelatedTopics: React.FC<RelatedTopicsProps> = ({
+export default function RelatedTopics({
 	topic,
-	setInputValue,
-	handleSourcesAndChat,
-}) => {
+	setPromptValue,
+	handleInitialChat,
+}: {
+	topic: string;
+	setPromptValue: React.Dispatch<React.SetStateAction<string>>;
+	handleInitialChat: (newTopic?: string) => Promise<void>;
+}) {
 	const [relatedTopics, setRelatedTopics] = useState<string[]>([]);
 	const [loading, setLoading] = useState<boolean>(false);
 
@@ -39,29 +37,34 @@ const RelatedTopics: React.FC<RelatedTopicsProps> = ({
 	}, [topic]);
 
 	const handleTopicClick = (relatedTopic: string) => {
-		setInputValue(relatedTopic);
-		handleSourcesAndChat(relatedTopic);
+		setPromptValue(relatedTopic);
+		handleInitialChat(relatedTopic);
 	};
 
 	return (
-		<div className="related-topics">
-			<h3>Related Topics</h3>
+		<div className="flex gap-2 lg:px-4">
+			<h3 className="text-base font-bold uppercase leading-[152.5%] text-black text-nowrap">
+				Related Topics:{" "}
+			</h3>
 			{loading ? (
 				<p>Loading...</p>
-			) : (
-				<ul>
-					{relatedTopics.map((relatedTopic) => (
-						<li
-							key={relatedTopic}
-							onClick={() => handleTopicClick(relatedTopic)}
-						>
-							{relatedTopic}
-						</li>
+			) : relatedTopics.length > 0 ? (
+				<ul className="flex gap-4 lg:pl-2 overflow-x-scroll text-nowrap">
+					{relatedTopics.slice(0, 3).map((relatedTopic, index) => (
+						<Fragment key={relatedTopic}>
+							{index > 0 && " | "}
+							<li
+								onClick={() => handleTopicClick(relatedTopic)}
+								className="text-blue-500 hover:cursor-pointer"
+							>
+								{relatedTopic}
+							</li>
+						</Fragment>
 					))}
 				</ul>
+			) : (
+				<></>
 			)}
 		</div>
 	);
-};
-
-export default RelatedTopics;
+}

From 01ac7706394ecea9730adabe33bf5054c4bf6888 Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 19:51:59 -0400
Subject: [PATCH 3/7] feat(api): enhance related topics generation with
 external API integration

---
 app/api/getRelatedTopics/route.ts | 52 +++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/app/api/getRelatedTopics/route.ts b/app/api/getRelatedTopics/route.ts
index a4417e2..1078506 100644
--- a/app/api/getRelatedTopics/route.ts
+++ b/app/api/getRelatedTopics/route.ts
@@ -1,13 +1,45 @@
 import { NextResponse } from "next/server";
 
 export async function POST(request: Request) {
-	const { topic } = await request.json();
-	try {
-		const relatedTopics = [`${topic} 1`, `${topic} 2`];
-		return NextResponse.json({ topics: relatedTopics });
-	} catch (e) {
-		return new Response("Error. Failed to generate related topics.", {
-			status: 202,
-		});
-	}
-}
+  const { topic } = await request.json();
+  try {
+    const prompt = `Fill in this template with appropriate values: { "topic": "${topic}", "related_topics": [FILL_TOPIC1,FILL_TOPIC2, FILL_TOPIC3] }`
+    const model = "meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo";
+
+    // Make the call to generate topics
+    const res = await fetch("https://together.helicone.ai/v1/completions", {
+      headers: {
+        "Content-Type": "application/json",
+        "Helicone-Auth": `Bearer ${process.env.HELICONE_API_KEY}`,
+        Authorization: `Bearer ${process.env.TOGETHER_API_KEY ?? ""}`,
+      },
+      method: "POST",
+      body: JSON.stringify({prompt, model}),
+    });
+    const data = await res.json();
+    const choices = data.choices;
+    let topics = [];
+    if (choices && choices.length > 0 && choices[0].text) {
+      const text = choices[0].text;
+      // Use a regular expression to find JSON-like content
+      const jsonMatch = text.match(/\{[^]*\}/);
+      
+      if (jsonMatch) {
+        try {
+          const jsonContent = JSON.parse(jsonMatch[0]);
+          if (jsonContent.related_topics && Array.isArray(jsonContent.related_topics)) {
+            topics = jsonContent.related_topics;
+          }
+        } catch (parseError) {
+          console.error("Failed to parse JSON:", parseError);
+        }
+      }
+    }
+    return NextResponse.json({ topics });
+  } catch (e) {
+    console.error(e);
+    return new Response("Error. Failed to generate related topics.", {
+      status: 500,
+    });
+  }
+}
\ No newline at end of file

From 0d247ee136c79e0ae031f2cfde2eb999c139bbb9 Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 19:52:38 -0400
Subject: [PATCH 4/7] refactor: update Chat component to include RelatedTopics
 and modify handleInitialChat logic

---
 app/page.tsx           |  18 ++--
 components/Chat.tsx    | 221 +++++++++++++++++++++--------------------
 components/Sources.tsx | 118 +++++++++++-----------
 3 files changed, 181 insertions(+), 176 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 40897ea..13733fd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,7 +12,6 @@ import {
 } from "eventsource-parser";
 import { getSystemPrompt } from "@/utils/utils";
 import Chat from "@/components/Chat";
-import RelatedTopics from "@/components/RelatedTopics";
 
 export default function Home() {
 	const [inputValue, setInputValue] = useState("");
@@ -26,13 +25,14 @@ export default function Home() {
 	const [loading, setLoading] = useState(false);
 	const [ageGroup, setAgeGroup] = useState("Middle School");
 
-	const handleInitialChat = async () => {
+	const handleInitialChat = async (newTopic?: string) => {
 		setShowResult(true);
 		setLoading(true);
-		setTopic(inputValue);
+		setMessages([]);
+		setTopic(newTopic ?? inputValue);
 		setInputValue("");
 
-		await handleSourcesAndChat(inputValue);
+		await handleSourcesAndChat(newTopic ?? inputValue);
 
 		setLoading(false);
 	};
@@ -150,16 +150,10 @@ export default function Home() {
 									setPromptValue={setInputValue}
 									setMessages={setMessages}
 									handleChat={handleChat}
+									handleInitialChat={handleInitialChat}
 									topic={topic}
 								/>
-								<div className="flex flex-row">
-									<Sources sources={sources} isLoading={isLoadingSources} />
-									<RelatedTopics
-										topic={topic}
-										setInputValue={setInputValue}
-										handleSourcesAndChat={handleSourcesAndChat}
-									/>
-								</div>
+								<Sources sources={sources} isLoading={isLoadingSources} />
 							</div>
 						</div>
 					</div>
diff --git a/components/Chat.tsx b/components/Chat.tsx
index 6aa7bc3..8aa7a88 100644
--- a/components/Chat.tsx
+++ b/components/Chat.tsx
@@ -3,121 +3,132 @@ import FinalInputArea from "./FinalInputArea";
 import { useEffect, useRef, useState } from "react";
 import simpleLogo from "../public/simple-logo.png";
 import Image from "next/image";
+import RelatedTopics from "./RelatedTopics";
 
 export default function Chat({
-  messages,
-  disabled,
-  promptValue,
-  setPromptValue,
-  setMessages,
-  handleChat,
-  topic,
+	messages,
+	disabled,
+	promptValue,
+	setPromptValue,
+	setMessages,
+	handleChat,
+	topic,
+	handleInitialChat,
 }: {
-  messages: { role: string; content: string }[];
-  disabled: boolean;
-  promptValue: string;
-  setPromptValue: React.Dispatch<React.SetStateAction<string>>;
-  setMessages: React.Dispatch<
-    React.SetStateAction<{ role: string; content: string }[]>
-  >;
-  handleChat: () => void;
-  topic: string;
+	messages: { role: string; content: string }[];
+	disabled: boolean;
+	promptValue: string;
+	setPromptValue: React.Dispatch<React.SetStateAction<string>>;
+	setMessages: React.Dispatch<
+		React.SetStateAction<{ role: string; content: string }[]>
+	>;
+	handleChat: () => void;
+	topic: string;
+	handleInitialChat: () => Promise<void>;
 }) {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollableContainerRef = useRef<HTMLDivElement>(null);
-  const [didScrollToBottom, setDidScrollToBottom] = useState(true);
+	const messagesEndRef = useRef<HTMLDivElement>(null);
+	const scrollableContainerRef = useRef<HTMLDivElement>(null);
+	const [didScrollToBottom, setDidScrollToBottom] = useState(true);
 
-  function scrollToBottom() {
-    messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
-  }
+	function scrollToBottom() {
+		messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
+	}
 
-  useEffect(() => {
-    if (didScrollToBottom) {
-      scrollToBottom();
-    }
-  }, [didScrollToBottom, messages]);
+	useEffect(() => {
+		if (didScrollToBottom) {
+			scrollToBottom();
+		}
+	}, [didScrollToBottom, messages]);
 
-  useEffect(() => {
-    let el = scrollableContainerRef.current;
-    if (!el) {
-      return;
-    }
+	useEffect(() => {
+		let el = scrollableContainerRef.current;
+		if (!el) {
+			return;
+		}
 
-    function handleScroll() {
-      if (scrollableContainerRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } =
-          scrollableContainerRef.current;
-        setDidScrollToBottom(scrollTop + clientHeight >= scrollHeight);
-      }
-    }
+		function handleScroll() {
+			if (scrollableContainerRef.current) {
+				const { scrollTop, scrollHeight, clientHeight } =
+					scrollableContainerRef.current;
+				setDidScrollToBottom(scrollTop + clientHeight >= scrollHeight);
+			}
+		}
 
-    el.addEventListener("scroll", handleScroll);
+		el.addEventListener("scroll", handleScroll);
 
-    return () => {
-      el.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
+		return () => {
+			el.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
 
-  return (
-    <div className="flex grow flex-col gap-4 overflow-hidden">
-      <div className="flex grow flex-col overflow-hidden lg:p-4">
-        <p className="uppercase text-gray-900">
-          <b>Topic: </b>
-          {topic}
-        </p>
-        <div
-          ref={scrollableContainerRef}
-          className="mt-2 overflow-y-scroll rounded-lg border border-solid border-[#C2C2C2] bg-white px-5 lg:p-7"
-        >
-          {messages.length > 2 ? (
-            <div className="prose-sm max-w-5xl lg:prose lg:max-w-full">
-              {messages.slice(2).map((message, index) =>
-                message.role === "assistant" ? (
-                  <div className="relative w-full" key={index}>
-                    <Image
-                      src={simpleLogo}
-                      alt=""
-                      className="absolute left-0 top-0 !my-0 size-7"
-                    />
-                    <ReactMarkdown className="w-full pl-10">
-                      {message.content}
-                    </ReactMarkdown>
-                  </div>
-                ) : (
-                  <p
-                    key={index}
-                    className="ml-auto w-fit rounded-xl bg-blue-500 p-4 font-medium text-white"
-                  >
-                    {message.content}
-                  </p>
-                ),
-              )}
-              <div ref={messagesEndRef} />
-            </div>
-          ) : (
-            <div className="flex w-full flex-col gap-4 py-5">
-              {Array.from(Array(10).keys()).map((i) => (
-                <div
-                  key={i}
-                  className={`${i < 5 && "hidden sm:block"} h-10 animate-pulse rounded-md bg-gray-300`}
-                  style={{ animationDelay: `${i * 0.05}s` }}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
+	return (
+		<div className="flex grow flex-col gap-4 overflow-hidden">
+			<div className="flex grow flex-col overflow-hidden lg:px-4">
+				<p className="uppercase text-gray-900">
+					<b>Topic: </b>
+					{topic}
+				</p>
+				<div
+					ref={scrollableContainerRef}
+					className="mt-2 overflow-y-scroll rounded-lg border border-solid border-[#C2C2C2] bg-white px-5 lg:p-7"
+				>
+					{messages.length > 2 ? (
+						<div className="prose-sm max-w-5xl lg:prose lg:max-w-full">
+							{messages.slice(2).map((message, index) =>
+								message.role === "assistant" ? (
+									<div className="relative w-full" key={index}>
+										<Image
+											src={simpleLogo}
+											alt=""
+											className="absolute left-0 top-0 !my-0 size-7"
+										/>
+										<ReactMarkdown className="w-full pl-10">
+											{message.content}
+										</ReactMarkdown>
+									</div>
+								) : (
+									<p
+										key={index}
+										className="ml-auto w-fit rounded-xl bg-blue-500 p-4 font-medium text-white"
+									>
+										{message.content}
+									</p>
+								),
+							)}
+							<div ref={messagesEndRef} />
+						</div>
+					) : (
+						<div className="flex w-full flex-col gap-4 py-5">
+							{Array.from(Array(10).keys()).map((i) => (
+								<div
+									key={i}
+									className={`${
+										i < 5 && "hidden sm:block"
+									} h-10 animate-pulse rounded-md bg-gray-300`}
+									style={{ animationDelay: `${i * 0.05}s` }}
+								/>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
 
-      <div className="bg-white lg:p-4">
-        <FinalInputArea
-          disabled={disabled}
-          promptValue={promptValue}
-          setPromptValue={setPromptValue}
-          handleChat={handleChat}
-          messages={messages}
-          setMessages={setMessages}
-        />
-      </div>
-    </div>
-  );
+			<RelatedTopics
+				topic={topic}
+				setPromptValue={setPromptValue}
+				handleInitialChat={handleInitialChat}
+			/>
+
+			<div className="bg-white lg:px-4">
+				<FinalInputArea
+					disabled={disabled}
+					promptValue={promptValue}
+					setPromptValue={setPromptValue}
+					handleChat={handleChat}
+					messages={messages}
+					setMessages={setMessages}
+				/>
+			</div>
+		</div>
+	);
 }
diff --git a/components/Sources.tsx b/components/Sources.tsx
index c3e7322..0cc2f29 100644
--- a/components/Sources.tsx
+++ b/components/Sources.tsx
@@ -1,68 +1,68 @@
 import Image from "next/image";
 
 export default function Sources({
-  sources,
-  isLoading,
+	sources,
+	isLoading,
 }: {
-  sources: { name: string; url: string }[];
-  isLoading: boolean;
+	sources: { name: string; url: string }[];
+	isLoading: boolean;
 }) {
-  return (
-    <div className="bg-white max-lg:-order-1 lg:flex lg:w-full lg:max-w-[300px] lg:flex-col">
-      <div className="flex items-start gap-4 pb-3 lg:pb-3.5">
-        <h3 className="text-base font-bold uppercase leading-[152.5%] text-black">
-          sources:{" "}
-        </h3>
-      </div>
-      <div className="flex w-full items-center gap-6 pb-4 max-lg:overflow-x-scroll lg:grow lg:flex-col lg:gap-4 lg:overflow-y-scroll lg:pb-0">
-        {isLoading ? (
-          <>
-            <div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
-            <div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-          </>
-        ) : sources.length > 0 ? (
-          sources.map((source) => (
-            <SourceCard source={source} key={source.url} />
-          ))
-        ) : (
-          <div>Could not fetch sources.</div>
-        )}
-      </div>
-    </div>
-  );
+	return (
+		<div className="bg-white max-lg:-order-1 lg:flex lg:w-full lg:max-w-[300px] lg:flex-col">
+			<div className="flex items-start gap-4 pb-3 lg:pb-3.5">
+				<h3 className="text-base font-bold uppercase leading-[152.5%] text-black">
+					sources:{" "}
+				</h3>
+			</div>
+			<div className="flex w-full items-center gap-6 pb-4 max-lg:overflow-x-scroll lg:grow lg:flex-col lg:gap-4 lg:overflow-y-scroll lg:pb-0">
+				{isLoading ? (
+					<>
+						<div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
+						<div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+					</>
+				) : sources.length > 0 ? (
+					sources.map((source) => (
+						<SourceCard source={source} key={source.url} />
+					))
+				) : (
+					<div>Could not fetch sources.</div>
+				)}
+			</div>
+		</div>
+	);
 }
 
 const SourceCard = ({ source }: { source: { name: string; url: string } }) => {
-  return (
-    <div className="flex h-[79px] w-full items-center gap-2.5 rounded-lg border border-gray-100 px-1.5 py-1 shadow-md">
-      <div className="shrink-0">
-        <Image
-          unoptimized
-          src={`https://www.google.com/s2/favicons?domain=${source.url}&sz=128`}
-          alt={source.url}
-          className="rounded-full p-1"
-          width={36}
-          height={36}
-        />
-      </div>
-      <div className="flex min-w-0 max-w-[192px] flex-col justify-center gap-1">
-        <h6 className="line-clamp-2 text-xs font-light">{source.name}</h6>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href={source.url}
-          className="truncate text-xs font-light text-[#1B1B16]/30"
-        >
-          {source.url}
-        </a>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex h-[79px] w-full items-center gap-2.5 rounded-lg border border-gray-100 px-1.5 py-1 shadow-md">
+			<div className="shrink-0">
+				<Image
+					unoptimized
+					src={`https://www.google.com/s2/favicons?domain=${source.url}&sz=128`}
+					alt={source.url}
+					className="rounded-full p-1"
+					width={36}
+					height={36}
+				/>
+			</div>
+			<div className="flex min-w-0 max-w-[192px] flex-col justify-center gap-1">
+				<h6 className="line-clamp-2 text-xs font-light">{source.name}</h6>
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					href={source.url}
+					className="truncate text-xs font-light text-[#1B1B16]/30"
+				>
+					{source.url}
+				</a>
+			</div>
+		</div>
+	);
 };

From f615cfcc1f17025cae5410d1954658dde20fd0e7 Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 20:00:26 -0400
Subject: [PATCH 5/7] refactor(api, components): add comments and improve error
 handling in getRelatedTopics API and RelatedTopics component

---
 app/api/getRelatedTopics/route.ts |  9 +++++--
 components/RelatedTopics.tsx      | 41 +++++++++++++++++--------------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/app/api/getRelatedTopics/route.ts b/app/api/getRelatedTopics/route.ts
index 1078506..bef1981 100644
--- a/app/api/getRelatedTopics/route.ts
+++ b/app/api/getRelatedTopics/route.ts
@@ -3,7 +3,8 @@ import { NextResponse } from "next/server";
 export async function POST(request: Request) {
   const { topic } = await request.json();
   try {
-    const prompt = `Fill in this template with appropriate values: { "topic": "${topic}", "related_topics": [FILL_TOPIC1,FILL_TOPIC2, FILL_TOPIC3] }`
+    // Create a prompt for the model to generate related topics
+    const prompt = `Fill in this template with appropriate values: { "topic": "${topic}", "related_topics": [FILL_TOPIC1,FILL_TOPIC2, FILL_TOPIC3] }`;
     const model = "meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo";
 
     // Make the call to generate topics
@@ -14,11 +15,14 @@ export async function POST(request: Request) {
         Authorization: `Bearer ${process.env.TOGETHER_API_KEY ?? ""}`,
       },
       method: "POST",
-      body: JSON.stringify({prompt, model}),
+      body: JSON.stringify({ prompt, model }),
     });
+
     const data = await res.json();
     const choices = data.choices;
     let topics = [];
+
+    // Check if there are choices and extract related topics
     if (choices && choices.length > 0 && choices[0].text) {
       const text = choices[0].text;
       // Use a regular expression to find JSON-like content
@@ -27,6 +31,7 @@ export async function POST(request: Request) {
       if (jsonMatch) {
         try {
           const jsonContent = JSON.parse(jsonMatch[0]);
+          // Ensure related_topics is an array before assigning
           if (jsonContent.related_topics && Array.isArray(jsonContent.related_topics)) {
             topics = jsonContent.related_topics;
           }
diff --git a/components/RelatedTopics.tsx b/components/RelatedTopics.tsx
index 434eec8..0267425 100644
--- a/components/RelatedTopics.tsx
+++ b/components/RelatedTopics.tsx
@@ -14,37 +14,44 @@ export default function RelatedTopics({
 	const [loading, setLoading] = useState<boolean>(false);
 
 	useEffect(() => {
+		// Function to fetch related topics from the API
 		const fetchRelatedTopics = async () => {
 			setLoading(true);
-			const response = await fetch("/api/getRelatedTopics", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({ topic }),
-			});
+			try {
+				const response = await fetch("/api/getRelatedTopics", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ topic }),
+				});
 
-			if (response.ok) {
-				const data = await response.json();
-				setRelatedTopics(data.topics);
+				if (response.ok) {
+					const data = await response.json();
+					setRelatedTopics(data.topics);
+				}
+			} catch (error) {
+				console.error("Failed to fetch related topics:", error);
+			} finally {
+				setLoading(false);
 			}
-			setLoading(false);
 		};
 
 		if (topic) {
-			fetchRelatedTopics();
+			fetchRelatedTopics(); // Fetch topics if a topic is provided
 		}
 	}, [topic]);
 
+	// Function to handle click on a related topic
 	const handleTopicClick = (relatedTopic: string) => {
-		setPromptValue(relatedTopic);
-		handleInitialChat(relatedTopic);
+		setPromptValue(relatedTopic); // Set the prompt value to the clicked topic
+		handleInitialChat(relatedTopic); // Initiate chat with the clicked topic
 	};
 
 	return (
 		<div className="flex gap-2 lg:px-4">
 			<h3 className="text-base font-bold uppercase leading-[152.5%] text-black text-nowrap">
-				Related Topics:{" "}
+				Related Topics:
 			</h3>
 			{loading ? (
 				<p>Loading...</p>
@@ -62,9 +69,7 @@ export default function RelatedTopics({
 						</Fragment>
 					))}
 				</ul>
-			) : (
-				<></>
-			)}
+			) : null}
 		</div>
 	);
 }

From 7a254e02f54a87bc3d6f4cf4f8996f65bfb0e44a Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 20:04:55 -0400
Subject: [PATCH 6/7] fix: limit related topics to a maximum of 3 in API
 response

---
 app/api/getRelatedTopics/route.ts | 2 +-
 components/RelatedTopics.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/api/getRelatedTopics/route.ts b/app/api/getRelatedTopics/route.ts
index bef1981..fc6825c 100644
--- a/app/api/getRelatedTopics/route.ts
+++ b/app/api/getRelatedTopics/route.ts
@@ -33,7 +33,7 @@ export async function POST(request: Request) {
           const jsonContent = JSON.parse(jsonMatch[0]);
           // Ensure related_topics is an array before assigning
           if (jsonContent.related_topics && Array.isArray(jsonContent.related_topics)) {
-            topics = jsonContent.related_topics;
+            topics = jsonContent.related_topics.slice(0, 3); // Limit to a maximum of 3 related topics
           }
         } catch (parseError) {
           console.error("Failed to parse JSON:", parseError);
diff --git a/components/RelatedTopics.tsx b/components/RelatedTopics.tsx
index 0267425..d925769 100644
--- a/components/RelatedTopics.tsx
+++ b/components/RelatedTopics.tsx
@@ -57,9 +57,9 @@ export default function RelatedTopics({
 				<p>Loading...</p>
 			) : relatedTopics.length > 0 ? (
 				<ul className="flex gap-4 lg:pl-2 overflow-x-scroll text-nowrap">
-					{relatedTopics.slice(0, 3).map((relatedTopic, index) => (
+					{relatedTopics.map((relatedTopic, index) => (
 						<Fragment key={relatedTopic}>
-							{index > 0 && " | "}
+							{index > 0 && "|"}
 							<li
 								onClick={() => handleTopicClick(relatedTopic)}
 								className="text-blue-500 hover:cursor-pointer"

From 2a90645dd3797317841b7d7e53c54b74c138762c Mon Sep 17 00:00:00 2001
From: Kevin Kidd <harrison.kevin@protonmail.com>
Date: Tue, 23 Jul 2024 20:38:20 -0400
Subject: [PATCH 7/7] style: adjust indentation in multiple files for
 consistent formatting

---
 app/page.tsx           | 320 ++++++++++++++++++++---------------------
 components/Chat.tsx    | 228 ++++++++++++++---------------
 components/Sources.tsx | 118 +++++++--------
 3 files changed, 333 insertions(+), 333 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 13733fd..44e6830 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,169 +6,169 @@ import Hero from "@/components/Hero";
 import Sources from "@/components/Sources";
 import { useState } from "react";
 import {
-	createParser,
-	type ParsedEvent,
-	type ReconnectInterval,
+  createParser,
+  type ParsedEvent,
+  type ReconnectInterval,
 } from "eventsource-parser";
 import { getSystemPrompt } from "@/utils/utils";
 import Chat from "@/components/Chat";
 
 export default function Home() {
-	const [inputValue, setInputValue] = useState("");
-	const [topic, setTopic] = useState("");
-	const [showResult, setShowResult] = useState(false);
-	const [sources, setSources] = useState<{ name: string; url: string }[]>([]);
-	const [isLoadingSources, setIsLoadingSources] = useState(false);
-	const [messages, setMessages] = useState<{ role: string; content: string }[]>(
-		[],
-	);
-	const [loading, setLoading] = useState(false);
-	const [ageGroup, setAgeGroup] = useState("Middle School");
-
-	const handleInitialChat = async (newTopic?: string) => {
-		setShowResult(true);
-		setLoading(true);
-		setMessages([]);
-		setTopic(newTopic ?? inputValue);
-		setInputValue("");
-
-		await handleSourcesAndChat(newTopic ?? inputValue);
-
-		setLoading(false);
-	};
-
-	const handleChat = async (messages?: { role: string; content: string }[]) => {
-		setLoading(true);
-		const chatRes = await fetch("/api/getChat", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({ messages }),
-		});
-
-		if (!chatRes.ok) {
-			throw new Error(chatRes.statusText);
-		}
-
-		// This data is a ReadableStream
-		const data = chatRes.body;
-		if (!data) {
-			return;
-		}
-		let fullAnswer = "";
-
-		const onParse = (event: ParsedEvent | ReconnectInterval) => {
-			if (event.type === "event") {
-				const data = event.data;
-				try {
-					const text = JSON.parse(data).text ?? "";
-					fullAnswer += text;
-					// Update messages with each chunk
-					setMessages((prev) => {
-						const lastMessage = prev[prev.length - 1];
-						if (lastMessage.role === "assistant") {
-							return [
-								...prev.slice(0, -1),
-								{ ...lastMessage, content: lastMessage.content + text },
-							];
-						} else {
-							return [...prev, { role: "assistant", content: text }];
-						}
-					});
-				} catch (e) {
-					console.error(e);
-				}
-			}
-		};
-
-		// https://web.dev/streams/#the-getreader-and-read-methods
-		const reader = data.getReader();
-		const decoder = new TextDecoder();
-		const parser = createParser(onParse);
-		let done = false;
-
-		while (!done) {
-			const { value, done: doneReading } = await reader.read();
-			done = doneReading;
-			const chunkValue = decoder.decode(value);
-			parser.feed(chunkValue);
-		}
-		setLoading(false);
-	};
-
-	async function handleSourcesAndChat(question: string) {
-		setIsLoadingSources(true);
-		let sourcesResponse = await fetch("/api/getSources", {
-			method: "POST",
-			body: JSON.stringify({ question }),
-		});
-		let sources;
-		if (sourcesResponse.ok) {
-			sources = await sourcesResponse.json();
-
-			setSources(sources);
-		} else {
-			setSources([]);
-		}
-		setIsLoadingSources(false);
-
-		const parsedSourcesRes = await fetch("/api/getParsedSources", {
-			method: "POST",
-			body: JSON.stringify({ sources }),
-		});
-		let parsedSources;
-		if (parsedSourcesRes.ok) {
-			parsedSources = await parsedSourcesRes.json();
-		}
-
-		const initialMessage = [
-			{ role: "system", content: getSystemPrompt(parsedSources, ageGroup) },
-			{ role: "user", content: `${question}` },
-		];
-		setMessages(initialMessage);
-		await handleChat(initialMessage);
-	}
-
-	return (
-		<>
-			<Header />
-
-			<main
-				className={`flex grow flex-col px-4 pb-4 ${
-					showResult ? "overflow-hidden" : ""
-				}`}
-			>
-				{showResult ? (
-					<div className="mt-2 flex w-full grow flex-col justify-between overflow-hidden">
-						<div className="flex w-full grow flex-col space-y-2 overflow-hidden">
-							<div className="mx-auto flex w-full max-w-7xl grow flex-col gap-4 overflow-hidden lg:flex-row lg:gap-10">
-								<Chat
-									messages={messages}
-									disabled={loading}
-									promptValue={inputValue}
-									setPromptValue={setInputValue}
-									setMessages={setMessages}
-									handleChat={handleChat}
-									handleInitialChat={handleInitialChat}
-									topic={topic}
-								/>
-								<Sources sources={sources} isLoading={isLoadingSources} />
-							</div>
-						</div>
-					</div>
-				) : (
-					<Hero
-						promptValue={inputValue}
-						setPromptValue={setInputValue}
-						handleChat={handleChat}
-						ageGroup={ageGroup}
-						setAgeGroup={setAgeGroup}
-						handleInitialChat={handleInitialChat}
-					/>
-				)}
-			</main>
-			{/* <Footer /> */}
-		</>
-	);
+  const [inputValue, setInputValue] = useState("");
+  const [topic, setTopic] = useState("");
+  const [showResult, setShowResult] = useState(false);
+  const [sources, setSources] = useState<{ name: string; url: string }[]>([]);
+  const [isLoadingSources, setIsLoadingSources] = useState(false);
+  const [messages, setMessages] = useState<{ role: string; content: string }[]>(
+    [],
+  );
+  const [loading, setLoading] = useState(false);
+  const [ageGroup, setAgeGroup] = useState("Middle School");
+
+  const handleInitialChat = async (newTopic?: string) => {
+    setShowResult(true);
+    setLoading(true);
+    setMessages([]);
+    setTopic(newTopic ?? inputValue);
+    setInputValue("");
+
+    await handleSourcesAndChat(newTopic ?? inputValue);
+
+    setLoading(false);
+  };
+
+  const handleChat = async (messages?: { role: string; content: string }[]) => {
+    setLoading(true);
+    const chatRes = await fetch("/api/getChat", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ messages }),
+    });
+
+    if (!chatRes.ok) {
+      throw new Error(chatRes.statusText);
+    }
+
+    // This data is a ReadableStream
+    const data = chatRes.body;
+    if (!data) {
+      return;
+    }
+    let fullAnswer = "";
+
+    const onParse = (event: ParsedEvent | ReconnectInterval) => {
+      if (event.type === "event") {
+        const data = event.data;
+        try {
+          const text = JSON.parse(data).text ?? "";
+          fullAnswer += text;
+          // Update messages with each chunk
+          setMessages((prev) => {
+            const lastMessage = prev[prev.length - 1];
+            if (lastMessage.role === "assistant") {
+              return [
+                ...prev.slice(0, -1),
+                { ...lastMessage, content: lastMessage.content + text },
+              ];
+            } else {
+              return [...prev, { role: "assistant", content: text }];
+            }
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    };
+
+    // https://web.dev/streams/#the-getreader-and-read-methods
+    const reader = data.getReader();
+    const decoder = new TextDecoder();
+    const parser = createParser(onParse);
+    let done = false;
+
+    while (!done) {
+      const { value, done: doneReading } = await reader.read();
+      done = doneReading;
+      const chunkValue = decoder.decode(value);
+      parser.feed(chunkValue);
+    }
+    setLoading(false);
+  };
+
+  async function handleSourcesAndChat(question: string) {
+    setIsLoadingSources(true);
+    let sourcesResponse = await fetch("/api/getSources", {
+      method: "POST",
+      body: JSON.stringify({ question }),
+    });
+    let sources;
+    if (sourcesResponse.ok) {
+      sources = await sourcesResponse.json();
+
+      setSources(sources);
+    } else {
+      setSources([]);
+    }
+    setIsLoadingSources(false);
+
+    const parsedSourcesRes = await fetch("/api/getParsedSources", {
+      method: "POST",
+      body: JSON.stringify({ sources }),
+    });
+    let parsedSources;
+    if (parsedSourcesRes.ok) {
+      parsedSources = await parsedSourcesRes.json();
+    }
+
+    const initialMessage = [
+      { role: "system", content: getSystemPrompt(parsedSources, ageGroup) },
+      { role: "user", content: `${question}` },
+    ];
+    setMessages(initialMessage);
+    await handleChat(initialMessage);
+  }
+
+  return (
+    <>
+      <Header />
+
+      <main
+        className={`flex grow flex-col px-4 pb-4 ${
+          showResult ? "overflow-hidden" : ""
+        }`}
+      >
+        {showResult ? (
+          <div className="mt-2 flex w-full grow flex-col justify-between overflow-hidden">
+            <div className="flex w-full grow flex-col space-y-2 overflow-hidden">
+              <div className="mx-auto flex w-full max-w-7xl grow flex-col gap-4 overflow-hidden lg:flex-row lg:gap-10">
+                <Chat
+                  messages={messages}
+                  disabled={loading}
+                  promptValue={inputValue}
+                  setPromptValue={setInputValue}
+                  setMessages={setMessages}
+                  handleChat={handleChat}
+                  handleInitialChat={handleInitialChat}
+                  topic={topic}
+                />
+                <Sources sources={sources} isLoading={isLoadingSources} />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <Hero
+            promptValue={inputValue}
+            setPromptValue={setInputValue}
+            handleChat={handleChat}
+            ageGroup={ageGroup}
+            setAgeGroup={setAgeGroup}
+            handleInitialChat={handleInitialChat}
+          />
+        )}
+      </main>
+      {/* <Footer /> */}
+    </>
+  );
 }
diff --git a/components/Chat.tsx b/components/Chat.tsx
index 8aa7a88..1253c7e 100644
--- a/components/Chat.tsx
+++ b/components/Chat.tsx
@@ -6,129 +6,129 @@ import Image from "next/image";
 import RelatedTopics from "./RelatedTopics";
 
 export default function Chat({
-	messages,
-	disabled,
-	promptValue,
-	setPromptValue,
-	setMessages,
-	handleChat,
-	topic,
-	handleInitialChat,
+  messages,
+  disabled,
+  promptValue,
+  setPromptValue,
+  setMessages,
+  handleChat,
+  topic,
+  handleInitialChat,
 }: {
-	messages: { role: string; content: string }[];
-	disabled: boolean;
-	promptValue: string;
-	setPromptValue: React.Dispatch<React.SetStateAction<string>>;
-	setMessages: React.Dispatch<
-		React.SetStateAction<{ role: string; content: string }[]>
-	>;
-	handleChat: () => void;
-	topic: string;
-	handleInitialChat: () => Promise<void>;
+  messages: { role: string; content: string }[];
+  disabled: boolean;
+  promptValue: string;
+  setPromptValue: React.Dispatch<React.SetStateAction<string>>;
+  setMessages: React.Dispatch<
+    React.SetStateAction<{ role: string; content: string }[]>
+  >;
+  handleChat: () => void;
+  topic: string;
+  handleInitialChat: () => Promise<void>;
 }) {
-	const messagesEndRef = useRef<HTMLDivElement>(null);
-	const scrollableContainerRef = useRef<HTMLDivElement>(null);
-	const [didScrollToBottom, setDidScrollToBottom] = useState(true);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+  const [didScrollToBottom, setDidScrollToBottom] = useState(true);
 
-	function scrollToBottom() {
-		messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
-	}
+  function scrollToBottom() {
+    messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
+  }
 
-	useEffect(() => {
-		if (didScrollToBottom) {
-			scrollToBottom();
-		}
-	}, [didScrollToBottom, messages]);
+  useEffect(() => {
+    if (didScrollToBottom) {
+      scrollToBottom();
+    }
+  }, [didScrollToBottom, messages]);
 
-	useEffect(() => {
-		let el = scrollableContainerRef.current;
-		if (!el) {
-			return;
-		}
+  useEffect(() => {
+    let el = scrollableContainerRef.current;
+    if (!el) {
+      return;
+    }
 
-		function handleScroll() {
-			if (scrollableContainerRef.current) {
-				const { scrollTop, scrollHeight, clientHeight } =
-					scrollableContainerRef.current;
-				setDidScrollToBottom(scrollTop + clientHeight >= scrollHeight);
-			}
-		}
+    function handleScroll() {
+      if (scrollableContainerRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } =
+          scrollableContainerRef.current;
+        setDidScrollToBottom(scrollTop + clientHeight >= scrollHeight);
+      }
+    }
 
-		el.addEventListener("scroll", handleScroll);
+    el.addEventListener("scroll", handleScroll);
 
-		return () => {
-			el.removeEventListener("scroll", handleScroll);
-		};
-	}, []);
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
 
-	return (
-		<div className="flex grow flex-col gap-4 overflow-hidden">
-			<div className="flex grow flex-col overflow-hidden lg:px-4">
-				<p className="uppercase text-gray-900">
-					<b>Topic: </b>
-					{topic}
-				</p>
-				<div
-					ref={scrollableContainerRef}
-					className="mt-2 overflow-y-scroll rounded-lg border border-solid border-[#C2C2C2] bg-white px-5 lg:p-7"
-				>
-					{messages.length > 2 ? (
-						<div className="prose-sm max-w-5xl lg:prose lg:max-w-full">
-							{messages.slice(2).map((message, index) =>
-								message.role === "assistant" ? (
-									<div className="relative w-full" key={index}>
-										<Image
-											src={simpleLogo}
-											alt=""
-											className="absolute left-0 top-0 !my-0 size-7"
-										/>
-										<ReactMarkdown className="w-full pl-10">
-											{message.content}
-										</ReactMarkdown>
-									</div>
-								) : (
-									<p
-										key={index}
-										className="ml-auto w-fit rounded-xl bg-blue-500 p-4 font-medium text-white"
-									>
-										{message.content}
-									</p>
-								),
-							)}
-							<div ref={messagesEndRef} />
-						</div>
-					) : (
-						<div className="flex w-full flex-col gap-4 py-5">
-							{Array.from(Array(10).keys()).map((i) => (
-								<div
-									key={i}
-									className={`${
-										i < 5 && "hidden sm:block"
-									} h-10 animate-pulse rounded-md bg-gray-300`}
-									style={{ animationDelay: `${i * 0.05}s` }}
-								/>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
+  return (
+    <div className="flex grow flex-col gap-4 overflow-hidden">
+      <div className="flex grow flex-col overflow-hidden lg:px-4">
+        <p className="uppercase text-gray-900">
+          <b>Topic: </b>
+          {topic}
+        </p>
+        <div
+          ref={scrollableContainerRef}
+          className="mt-2 overflow-y-scroll rounded-lg border border-solid border-[#C2C2C2] bg-white px-5 lg:p-7"
+        >
+          {messages.length > 2 ? (
+            <div className="prose-sm max-w-5xl lg:prose lg:max-w-full">
+              {messages.slice(2).map((message, index) =>
+                message.role === "assistant" ? (
+                  <div className="relative w-full" key={index}>
+                    <Image
+                      src={simpleLogo}
+                      alt=""
+                      className="absolute left-0 top-0 !my-0 size-7"
+                    />
+                    <ReactMarkdown className="w-full pl-10">
+                      {message.content}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  <p
+                    key={index}
+                    className="ml-auto w-fit rounded-xl bg-blue-500 p-4 font-medium text-white"
+                  >
+                    {message.content}
+                  </p>
+                ),
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+          ) : (
+            <div className="flex w-full flex-col gap-4 py-5">
+              {Array.from(Array(10).keys()).map((i) => (
+                <div
+                  key={i}
+                  className={`${
+                    i < 5 && "hidden sm:block"
+                  } h-10 animate-pulse rounded-md bg-gray-300`}
+                  style={{ animationDelay: `${i * 0.05}s` }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
 
-			<RelatedTopics
-				topic={topic}
-				setPromptValue={setPromptValue}
-				handleInitialChat={handleInitialChat}
-			/>
+      <RelatedTopics
+        topic={topic}
+        setPromptValue={setPromptValue}
+        handleInitialChat={handleInitialChat}
+      />
 
-			<div className="bg-white lg:px-4">
-				<FinalInputArea
-					disabled={disabled}
-					promptValue={promptValue}
-					setPromptValue={setPromptValue}
-					handleChat={handleChat}
-					messages={messages}
-					setMessages={setMessages}
-				/>
-			</div>
-		</div>
-	);
+      <div className="bg-white lg:px-4">
+        <FinalInputArea
+          disabled={disabled}
+          promptValue={promptValue}
+          setPromptValue={setPromptValue}
+          handleChat={handleChat}
+          messages={messages}
+          setMessages={setMessages}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/components/Sources.tsx b/components/Sources.tsx
index 0cc2f29..c3e7322 100644
--- a/components/Sources.tsx
+++ b/components/Sources.tsx
@@ -1,68 +1,68 @@
 import Image from "next/image";
 
 export default function Sources({
-	sources,
-	isLoading,
+  sources,
+  isLoading,
 }: {
-	sources: { name: string; url: string }[];
-	isLoading: boolean;
+  sources: { name: string; url: string }[];
+  isLoading: boolean;
 }) {
-	return (
-		<div className="bg-white max-lg:-order-1 lg:flex lg:w-full lg:max-w-[300px] lg:flex-col">
-			<div className="flex items-start gap-4 pb-3 lg:pb-3.5">
-				<h3 className="text-base font-bold uppercase leading-[152.5%] text-black">
-					sources:{" "}
-				</h3>
-			</div>
-			<div className="flex w-full items-center gap-6 pb-4 max-lg:overflow-x-scroll lg:grow lg:flex-col lg:gap-4 lg:overflow-y-scroll lg:pb-0">
-				{isLoading ? (
-					<>
-						<div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
-						<div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-						<div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
-					</>
-				) : sources.length > 0 ? (
-					sources.map((source) => (
-						<SourceCard source={source} key={source.url} />
-					))
-				) : (
-					<div>Could not fetch sources.</div>
-				)}
-			</div>
-		</div>
-	);
+  return (
+    <div className="bg-white max-lg:-order-1 lg:flex lg:w-full lg:max-w-[300px] lg:flex-col">
+      <div className="flex items-start gap-4 pb-3 lg:pb-3.5">
+        <h3 className="text-base font-bold uppercase leading-[152.5%] text-black">
+          sources:{" "}
+        </h3>
+      </div>
+      <div className="flex w-full items-center gap-6 pb-4 max-lg:overflow-x-scroll lg:grow lg:flex-col lg:gap-4 lg:overflow-y-scroll lg:pb-0">
+        {isLoading ? (
+          <>
+            <div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
+            <div className="h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 sm:block" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+            <div className="hidden h-20 w-[260px] max-w-sm animate-pulse rounded-md bg-gray-300 lg:block" />
+          </>
+        ) : sources.length > 0 ? (
+          sources.map((source) => (
+            <SourceCard source={source} key={source.url} />
+          ))
+        ) : (
+          <div>Could not fetch sources.</div>
+        )}
+      </div>
+    </div>
+  );
 }
 
 const SourceCard = ({ source }: { source: { name: string; url: string } }) => {
-	return (
-		<div className="flex h-[79px] w-full items-center gap-2.5 rounded-lg border border-gray-100 px-1.5 py-1 shadow-md">
-			<div className="shrink-0">
-				<Image
-					unoptimized
-					src={`https://www.google.com/s2/favicons?domain=${source.url}&sz=128`}
-					alt={source.url}
-					className="rounded-full p-1"
-					width={36}
-					height={36}
-				/>
-			</div>
-			<div className="flex min-w-0 max-w-[192px] flex-col justify-center gap-1">
-				<h6 className="line-clamp-2 text-xs font-light">{source.name}</h6>
-				<a
-					target="_blank"
-					rel="noopener noreferrer"
-					href={source.url}
-					className="truncate text-xs font-light text-[#1B1B16]/30"
-				>
-					{source.url}
-				</a>
-			</div>
-		</div>
-	);
+  return (
+    <div className="flex h-[79px] w-full items-center gap-2.5 rounded-lg border border-gray-100 px-1.5 py-1 shadow-md">
+      <div className="shrink-0">
+        <Image
+          unoptimized
+          src={`https://www.google.com/s2/favicons?domain=${source.url}&sz=128`}
+          alt={source.url}
+          className="rounded-full p-1"
+          width={36}
+          height={36}
+        />
+      </div>
+      <div className="flex min-w-0 max-w-[192px] flex-col justify-center gap-1">
+        <h6 className="line-clamp-2 text-xs font-light">{source.name}</h6>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={source.url}
+          className="truncate text-xs font-light text-[#1B1B16]/30"
+        >
+          {source.url}
+        </a>
+      </div>
+    </div>
+  );
 };