demo: sample streaming request to API and documents extract

.env.sample

@@ -0,0 +1 @@
+VITE_X_API_KEY=...

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

src/App.tsx

@@ -1,3 +1,12 @@
+import { ChatExample } from "./ChatExample";
+import { DocumentExtractExample } from "./DocumentExtractExample";
+
 export function App() {
-	return <h1>BärGPT - KI Testumgebung</h1>;
+	return (
+		<div className="items-left mx-auto flex w-full max-w-[800px] flex-col gap-8">
+			<h1>BärGPT - KI Testumgebung</h1>
+			<ChatExample></ChatExample>
+			<DocumentExtractExample></DocumentExtractExample>
+		</div>
+	);
 }

src/ChatExample.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+
+export function ChatExample() {
+	const [chatMessage, setChatMessage] = useState("");
+
+	async function streamToString(body: ReadableStream<Uint8Array>) {
+		setChatMessage("");
+		const reader = body?.pipeThrough(new TextDecoderStream()).getReader();
+		while (reader) {
+			const stream = await reader.read();
+			if (stream.done) {
+				break;
+			}
+			const chunks = stream.value
+				.toString()
+				.replace(/^data: /gm, "")
+				.split("\n")
+				.filter((c: string) => Boolean(c.length) && c !== "[DONE]")
+				.map((c: string) => JSON.parse(c));
+			if (chunks) {
+				for (const chunk of chunks) {
+					const content = chunk.choices[0].delta.content;
+					if (!content) {
+						continue;
+					}
+					setChatMessage((prev) => prev + content);
+				}
+			}
+		}
+	}
+
+	return (
+		<div>
+			<button
+				className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+				onClick={async () => {
+					setChatMessage("");
+					try {
+						const response = await fetch(
+							`https://ber-gpt-backend.onrender.com/chat`,
+							{
+								method: "POST",
+								headers: {
+									"Content-Type": "application/json",
+									"x-api-key": import.meta.env.VITE_X_API_KEY,
+									llm: "azure",
+								},
+								body: JSON.stringify({
+									messages: [
+										{
+											role: "user",
+											content: "Wer bist du? Antworte ausführlich.",
+										},
+									],
+								}),
+							},
+						);
+
+						if (!response.body) {
+							throw new Error("Response body is empty");
+						}
+						streamToString(response.body);
+					} catch (err) {
+						console.error(err);
+					}
+				}}
+			>
+				Example API Call to /chat
+			</button>
+			{chatMessage && (
+				<p className="mt-8 rounded-md bg-red-100 p-2">{chatMessage}</p>
+			)}
+		</div>
+	);
+}

src/DocumentExtractExample.tsx

@@ -0,0 +1,50 @@
+import { FormEvent, useState } from "react";
+
+export function DocumentExtractExample() {
+	const [extractedText, setExtractedText] = useState("");
+
+	const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+
+		const formData = new FormData();
+		formData.append("file", event.currentTarget.file.files[0]);
+
+		const response = await fetch(
+			"https://ber-gpt-backend.onrender.com/documents/extract",
+			{
+				method: "POST",
+				headers: {
+					"x-api-key": import.meta.env.VITE_X_API_KEY,
+				},
+				body: formData,
+			},
+		);
+
+		if (response.ok) {
+			const data = await response.json();
+			setExtractedText(data.content);
+		} else {
+			console.error("Failed to extract text from document");
+		}
+	};
+
+	return (
+		<div>
+			<form
+				onSubmit={handleSubmit}
+				className="flex flex-row items-center gap-4"
+			>
+				<button
+					type="submit"
+					className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+				>
+					Example API Call to /documents/extract
+				</button>
+				<input type="file" name="file" />
+			</form>
+			{extractedText && (
+				<p className="mt-8 rounded-md bg-green-100 p-2">{extractedText}</p>
+			)}
+		</div>
+	);
+}