[Docs Site] Add DocsAI.tsx

package.json

@@ -43,6 +43,7 @@
 		"@iarna/toml": "2.2.5",
 		"@lottiefiles/dotlottie-react": "0.13.5",
 		"@marsidev/react-turnstile": "1.1.0",
+		"@microsoft/fetch-event-source": "2.0.1",
 		"@nanostores/react": "1.0.0",
 		"@octokit/webhooks-types": "7.6.1",
 		"@stoplight/json-schema-tree": "4.0.0",
@@ -77,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.12",
 		"mdast-util-from-markdown": "2.0.2",
@@ -108,6 +110,7 @@
 		"rehype-stringify": "10.0.1",
 		"rehype-title-figure": "0.1.2",
 		"remark": "15.0.1",
+		"remark-breaks": "4.0.0",
 		"remark-gfm": "4.0.1",
 		"remark-stringify": "11.0.0",
 		"sharp": "0.34.2",

src/components/SupportAI.tsx

@@ -0,0 +1,175 @@
+import { useState } from "react";
+import Markdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+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,
+	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={`${classes.base} ${message.role === "user" ? classes.user : classes.assistant}`}
+					>
+						<Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+							{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 },
+			{ role: "assistant", content: "" },
+		]);
+		setQuestion("");
+
+		const controller = new AbortController();
+		const { signal } = controller;
+
+		let chunkedAnswer = "";
+		let sources: Sources = [];
+
+		await fetchEventSource(
+			// "http://localhost:8010/proxy/devdocs/ask",
+			"https://support-ai.cloudflaresupport.workers.dev/devdocs/ask",
+			{
+				method: "POST",
+				body: JSON.stringify({
+					question,
+					threadId,
+				}),
+				signal,
+				openWhenHidden: true,
+				async onopen(response) {
+					if (!response.ok) {
+						throw new Error(response.status.toString());
+					}
+
+					return;
+				},
+				onerror(error) {
+					if (error instanceof Error) {
+						setLoading(false);
+						setMessages((messages) => [
+							...messages,
+							{
+								role: "assistant",
+								content:
+									"I'm unable to provide an answer to that at the moment. Please rephrase your query and I'll try again.",
+							},
+						]);
+						throw error;
+					}
+				},
+				onmessage(ev) {
+					if (ev.data === "[DONE]") {
+						controller.abort();
+
+						setMessages((messages) => {
+							const newMessages = [...messages];
+							newMessages[newMessages.length - 1].content += [
+								"\n\n",
+								"I used these sources to answer your question, please review them if you need more information:",
+								"\n\n",
+								sources
+									.map((source) => `- [${source.title}](${source.file_path})`)
+									.join("\n"),
+							].join("\n");
+
+							return newMessages;
+						});
+					}
+
+					const { threadId, response, botResponse } = JSON.parse(ev.data);
+
+					if (botResponse?.sources) {
+						sources = botResponse.sources;
+					}
+
+					if (threadId) {
+						setThreadId(threadId);
+					}
+
+					if (!response) return;
+
+					chunkedAnswer += response;
+
+					setLoading(false);
+					setMessages((messages) => {
+						const newMessages = [...messages];
+						newMessages[newMessages.length - 1].content = chunkedAnswer;
+						return newMessages;
+					});
+				},
+			},
+		);
+	}
+
+	return (
+		<div>
+			<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" && !loading) {
+							e.preventDefault();
+							await handleSubmit();
+						}
+					}}
+				/>
+			</div>
+			<p className="text-center text-xs">
+				Use of Support AI is subject to the Cloudflare Website and Online
+				Services{" "}
+				<a href="https://www.cloudflare.com/website-terms/">Terms of Use</a>.
+				You acknowledge and agree that the output generated by Support AI has
+				not been verified by Cloudflare for accuracy and does not represent
+				Cloudflare's views.
+			</p>
+		</div>
+	);
+}

src/content/docs/support/ai.mdx

@@ -0,0 +1,10 @@
+---
+title: Support AI
+tableOfContents: false
+sidebar:
+  order: 8
+---
+
+import SupportAI from "~/components/SupportAI.tsx";
+
+<SupportAI client:load />

src/content/docs/support/cloudflare-status.mdx

@@ -1,6 +1,8 @@
 ---
 pcx_content_type: concept
 title: Cloudflare Status
+sidebar:
+  order: 5
 ---
 
 Cloudflare provides updates on the status of our services and network at https://www.cloudflarestatus.com/, which you should check if you notice unexpected behavior with Cloudflare.

src/content/docs/support/customer-incident-management-policy.mdx

@@ -2,7 +2,8 @@
 pcx_content_type: troubleshooting
 source: https://support.cloudflare.com/hc/en-us/articles/230054288-Customer-Incident-Management-Policy
 title: Customer Incident Management Policy
-
+sidebar:
+  order: 6
 ---
 
 ## Purpose

src/content/docs/support/disruptive-maintenance.mdx

@@ -2,6 +2,8 @@
 pcx_content_type: troubleshooting
 source: https://support.cloudflare.com/hc/en-us/articles/360060050511-Disruptive-Maintenance-Windows
 title: Disruptive Maintenance
+sidebar:
+  order: 7
 ---
 
 import { AvailableNotifications, Render } from "~/components";