From 376baccadb741217e860a8667763c089ab054a7d Mon Sep 17 00:00:00 2001
From: Ryan Chen <ryan@torrtle.co>
Date: Fri, 10 Oct 2025 23:28:41 -0400
Subject: [PATCH] message-style frontend

---
 raggr-frontend/src/.App.tsx.swp | Bin 12288 -> 20480 bytes
 raggr-frontend/src/App.tsx      | 154 ++++++++++++++++++++++----------
 2 files changed, 109 insertions(+), 45 deletions(-)

diff --git a/raggr-frontend/src/.App.tsx.swp b/raggr-frontend/src/.App.tsx.swp
index 5462516c3acd0a6f814d736c7d2e4ea233e71743..421db9567a765187902681060ad9a2e1ad0ab68f 100644
GIT binary patch
literal 20480
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
Y08v_66R%~c0&A5JQN@hEwqY9o0pQrWQvd(}

delta 1019
zcmZ|MUr19?90%~<%&Bwglx31)UZ>HfcDI_>f4kdMf)dn4WhIDt&1;V4oosiSh$+7H
zR{kC$LiDYtP!o!XqCZ3+6xmBpSp-VagAYCRkNWP9AVLQ|+{5qu&hMP_yVDDX>AvEA
z*V(oXp;0_S82Lon(5E5S%c7jl$IHcEEJX&ILOd<Lh|!h&kYS}e|BmIxQuC~kp4*#F
zv}(i(c6V`st88l6LL`F;-sTZ8%)$vc4&{&so4G`5a1FYk0kYw54$&`o4=>;m+y)i=
z-~lUqHxq5a1}uUOb!OZ+3zI+DL{DH5=AaL}AVC#;GZC#r7+OJuLr@H6Ab6fdbRQN#
zfo^DlIyeX$nMC(s6q?{L{LE;^!5Ks|5Q89GfF{TRf*<JD7Hq<2_z3F|@8cWeiXpux
zod-MJ)s9Ir#fR)12#)%abCY~ZRW9lsO62lDcuez6C|Yz(jd0krkBxExUzf6Z-ebxz
zIfN#`&hwpxyjq*fnQ|$A^^_vT!w->mQnvA{+I+;zcwR0+yd2+Z#48Z9B+B@`mHSN-
zp|CO#)Gi5r!JfE5>N5PgvviNsM_e5!HVAAC*wQA6+X5w-a!?zI>BI)9HFG=pX`s+{
zI@UiN)RV8+evCdoqIzx7#EOmhfavCPP8*Mk?OAevOxMF2@iV92y1NUBgPjf}OBJ?M
zW0JLW^@^T~$nm)nQI$ju^Nt$4R(q6<l9wMy`H83YN&>%g@8zYY3@($bd{@fi?7E)w
z;$ToyLZNZH-642=LR8h;lkKn%Dxs+AaCqW}i~5kN+3gWE8Vl*$i7ko$k_w6gimr%A
z7zu0fZT!2gx?o2&JrYwL9<HpfuR`=pa99n;^#2`NBe*4(3+W%~=PbL5u->rD6OG5L
Ssoz$!<Ia4m@g~psul@r(&-OO}

diff --git a/raggr-frontend/src/App.tsx b/raggr-frontend/src/App.tsx
index f335937..1bbb1dc 100644
--- a/raggr-frontend/src/App.tsx
+++ b/raggr-frontend/src/App.tsx
@@ -4,83 +4,147 @@ import ReactMarkdown from "react-markdown";
 
 import "./App.css";
 
+type QuestionAnswer = {
+	question: string;
+	answer: string;
+};
+
+type QuestionBubbleProps = {
+	text: string;
+};
+
+type AnswerBubbleProps = {
+	text: string;
+	loading: string;
+};
+
+type QuestionAnswerPairProps = {
+	question: string;
+	answer: string;
+	loading: boolean;
+};
+
+const QuestionBubble = ({ text }: QuestionBubbleProps) => {
+	return <div className="rounded-md bg-stone-200 p-3">🤦: {text}</div>;
+};
+
+const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
+	return (
+		<div className="rounded-md bg-orange-100 p-3">
+			{loading ? (
+				<div className="flex flex-col w-full animate-pulse gap-2">
+					<div className="flex flex-row gap-2 w-full">
+						<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
+						<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
+					</div>
+					<div className="flex flex-row gap-2 w-full">
+						<div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
+						<div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
+					</div>
+				</div>
+			) : (
+				<div className="flex flex-col">
+					<ReactMarkdown>{"🐈: " + text}</ReactMarkdown>
+				</div>
+			)}
+		</div>
+	);
+};
+
+const QuestionAnswerPair = ({
+	question,
+	answer,
+	loading,
+}: QuestionAnswerPairProps) => {
+	return (
+		<div className="flex flex-col gap-4">
+			<QuestionBubble text={question} />
+			<AnswerBubble text={answer} loading={loading} />
+		</div>
+	);
+};
+
 const App = () => {
 	const [query, setQuery] = useState<string>("");
 	const [answer, setAnswer] = useState<string>("");
-	const [loading, setLoading] = useState<boolean>(false);
 	const [simbaMode, setSimbaMode] = useState<boolean>(false);
+	const [questionsAnswers, setQuestionsAnswers] = useState<QuestionAnswer[]>(
+		[]
+	);
 
 	const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
 
 	const handleQuestionSubmit = () => {
 		if (simbaMode) {
 			console.log("simba mode activated");
-			setLoading(true);
 			const randomIndex = Math.floor(Math.random() * simbaAnswers.length);
 			const randomElement = simbaAnswers[randomIndex];
 			setAnswer(randomElement);
-			setTimeout(() => setLoading(false), 3500);
+			setQuestionsAnswers(
+				questionsAnswers.concat([
+					{
+						question: query,
+						answer: randomElement,
+					},
+				])
+			);
 			return;
 		}
 		const payload = { query: query };
-		setLoading(true);
 		axios
 			.post("/api/query", payload)
-			.then((result) => setAnswer(result.data.response))
-			.finally(() => setLoading(false));
+			.then((result) =>
+				setQuestionsAnswers(
+					questionsAnswers.concat([
+						{ question: query, answer: result.data.response },
+					])
+				)
+			);
 	};
 	const handleQueryChange = (event) => {
 		setQuery(event.target.value);
 	};
 	return (
-		<div className="bg-[url('./simba_cute.jpeg')] bg-cover bg-center bg-no-repeat h-screen bg-opacity-20">
+		<div className="h-screen bg-opacity-20">
 			<div className="bg-white/85 h-screen">
 				<div className="flex flex-row justify-center py-4">
 					<div className="flex flex-col gap-4 min-w-xl max-w-xl">
 						<div className="flex flex-row justify-center gap-2 grow">
 							<h1 className="text-3xl">ask simba!</h1>
 						</div>
-						<div className="flex flex-row justify-between gap-2 grow">
-							<textarea
-								type="text"
-								className="p-4 border border-blue-200 rounded-md grow bg-white"
-								onChange={handleQueryChange}
+						{questionsAnswers.map((qa) => (
+							<QuestionAnswerPair
+								question={qa.question}
+								answer={qa.answer}
 							/>
-						</div>
-						<div className="flex flex-row justify-between gap-2 grow">
-							<button
-								className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow"
-								onClick={() => handleQuestionSubmit()}
-								type="submit"
-							>
-								Submit
-							</button>
-						</div>
-						<div className="flex flex-row justify-center gap-2 grow">
-							<input
-								type="checkbox"
-								onChange={(event) =>
-									setSimbaMode(event.target.checked)
-								}
-							/>
-							<p>simba mode?</p>
-						</div>
-						{loading ? (
-							<div className="flex flex-col w-full animate-pulse gap-2">
-								<div className="flex flex-row gap-2 w-full">
-									<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-									<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-								</div>
-								<div className="flex flex-row gap-2 w-full">
-									<div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
-									<div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
-								</div>
+						))}
+						<footer className="flex flex-col gap-2 sticky bottom-0">
+							<div className="flex flex-row justify-between gap-2 grow">
+								<textarea
+									type="text"
+									className="p-4 border border-blue-200 rounded-md grow bg-white"
+									onChange={handleQueryChange}
+								/>
 							</div>
-						) : (
-							<div className="flex flex-col">
-								<ReactMarkdown>{answer}</ReactMarkdown>
+							<div className="flex flex-row justify-between gap-2 grow">
+								<button
+									className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow"
+									onClick={() => handleQuestionSubmit()}
+									type="submit"
+								>
+									Submit
+								</button>
 							</div>
-						)}
+							<div className="flex flex-row justify-center gap-2 grow">
+								<input
+									type="checkbox"
+									onChange={(event) =>
+										setSimbaMode(event.target.checked)
+									}
+								/>
+								<p>simba mode?</p>
+							</div>
+						</footer>
 					</div>
 				</div>
 			</div>