loading anim

Author: KianNH

package-lock.json

@@ -78,6 +78,7 @@
 		"hastscript": "9.0.1",
 		"he": "1.2.0",
 		"jsonc-parser": "3.3.1",
+		"ldrs": "1.1.7",
 		"lz-string": "1.5.0",
 		"marked": "15.0.11",
 		"mdast-util-from-markdown": "2.0.2",

package.json

@@ -1,34 +1,55 @@
 import { useState } from "react";
 import Markdown from "react-markdown";
 import { fetchEventSource } from "@microsoft/fetch-event-source";
+import { Ring } from "ldrs/react";
+import "ldrs/react/Ring.css";
 
 type Messages = { role: "user" | "assistant"; content: string }[];
 type Sources = { title: string; file_path: string }[];
 
-function Messages({ messages }: { messages: Messages }) {
+function Messages({
+	messages,
+	loading,
+}: {
+	messages: Messages;
+	loading: boolean;
+}) {
+	const classes = {
+		base: "w-fit max-w-3/4 rounded p-4",
+		user: "bg-cl1-brand-orange text-cl1-black self-end",
+		assistant: "self-start bg-(--sl-color-bg-nav)",
+	};
+
 	return (
 		<div className="flex flex-col justify-center gap-4">
 			{messages
 				.filter((message) => Boolean(message.content))
 				.map((message, index) => (
 					<div
 						key={index}
-						className={`w-fit max-w-3/4 rounded p-4 ${message.role === "user" ? "bg-cl1-brand-orange text-cl1-black self-end" : "self-start bg-(--sl-color-bg-nav)"}`}
+						className={`${classes.base} ${message.role === "user" ? classes.user : classes.assistant}`}
 					>
 						<Markdown>{message.content}</Markdown>
 					</div>
 				))}
+			{loading && (
+				<div className={`${classes.base} ${classes.assistant}`}>
+					<Ring size={16} speed={1} color="var(--color-cl1-brand-orange)" />
+				</div>
+			)}
 		</div>
 	);
 }
 
 export default function SupportAI() {
 	const [threadId, setThreadId] = useState<string | undefined>();
 	const [question, setQuestion] = useState<string>("");
+	const [loading, setLoading] = useState<boolean>(false);
 
 	const [messages, setMessages] = useState<Messages>([]);
 
 	async function handleSubmit() {
+		setLoading(true);
 		setMessages((messages) => [
 			...messages,
 			{ role: "user", content: question },
@@ -62,6 +83,7 @@ export default function SupportAI() {
 				},
 				onerror(error) {
 					if (error instanceof Error) {
+						setLoading(false);
 						setMessages((messages) => [
 							...messages,
 							{
@@ -104,6 +126,8 @@ export default function SupportAI() {
 					if (!response) return;
 
 					chunkedAnswer += response;
+
+					setLoading(false);
 					setMessages((messages) => {
 						const newMessages = [...messages];
 						newMessages[newMessages.length - 1].content = chunkedAnswer;
@@ -116,16 +140,17 @@ export default function SupportAI() {
 
 	return (
 		<div>
-			<Messages messages={messages} />
+			<Messages messages={messages} loading={loading} />
 			<div className="flex items-center justify-center gap-4">
 				<input
 					className="w-full rounded p-2"
 					type="text"
 					placeholder="Ask a question..."
 					value={question}
+					disabled={loading}
 					onChange={(e) => setQuestion(e.target.value)}
 					onKeyDown={async (e) => {
-						if (e.key === "Enter") {
+						if (e.key === "Enter" && !loading) {
 							e.preventDefault();
 							await handleSubmit();
 						}
@@ -140,12 +165,6 @@ export default function SupportAI() {
 				not been verified by Cloudflare for accuracy and does not represent
 				Cloudflare's views.
 			</p>
-			<div>
-				<strong>Debug:</strong>
-				<pre className="whitespace-pre-wrap">
-					{JSON.stringify({ threadId, messages, question }, null, 2)}
-				</pre>
-			</div>
 		</div>
 	);
 }