[Docs Site] Add tracking events and hide footer elements on DocsAI

Author: KianNH

src/components/DocsAI.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useEffect, 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 { MdOutlineThumbUp, MdOutlineThumbDown } from "react-icons/md";
+import { track } from "~/util/zaraz";
 import "ldrs/react/Ring.css";
 
 type Messages = {
@@ -38,15 +39,46 @@ function Messages({
 	messages: Messages;
 	loading: boolean;
 }) {
+	const [listenersAdded, setListenersAdded] = useState<Set<string>>(new Set());
 	const [feedbackGiven, setFeedbackGiven] = useState<Set<string>>(new Set());
 
+	useEffect(() => {
+		const messages = document.querySelectorAll<HTMLDivElement>(
+			"[data-docs-ai-message]",
+		);
+
+		for (const message of messages) {
+			if (listenersAdded.has(message.dataset.queryId ?? "")) {
+				continue;
+			}
+
+			const links = message.querySelectorAll<HTMLAnchorElement>("a");
+
+			for (const link of links) {
+				link.addEventListener("click", () => {
+					track("click chat link", {
+						value: link.innerText,
+						href: link.href,
+					});
+				});
+			}
+
+			setListenersAdded((prev) =>
+				new Set(prev).add(message.dataset.queryId ?? ""),
+			);
+		}
+	}, [messages]);
+
 	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)",
 	};
 
 	const handleFeedback = async (queryId: string, positive: boolean) => {
+		track("submit chat feedback", {
+			value: positive.toString(),
+		});
 		await sendCSATFeedback(queryId, positive);
 		setFeedbackGiven((prev) => new Set(prev).add(queryId));
 	};
@@ -59,6 +91,8 @@ function Messages({
 					<div key={index} className="flex flex-col gap-2">
 						<div
 							className={`${classes.base} ${message.role === "user" ? classes.user : classes.assistant}`}
+							data-docs-ai-message={true}
+							data-query-id={message.queryId}
 						>
 							<Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>
 								{message.content}
@@ -71,7 +105,7 @@ function Messages({
 									</p>
 									<ul>
 										{message.sources.map((source) => (
-											<li>
+											<li key={source.file_path}>
 												<a href={source.file_path} target="_blank">
 													{source.title}
 												</a>
@@ -124,6 +158,10 @@ export default function SupportAI() {
 	const [messages, setMessages] = useState<Messages>([]);
 
 	async function handleSubmit() {
+		track("submit chat", {
+			value: question,
+		});
+
 		setLoading(true);
 		setMessages((messages) => [
 			...messages,

src/components/overrides/Footer.astro

@@ -70,6 +70,7 @@ const links = Object.entries({
 
 const homepage = Astro.locals.starlightRoute.entry.id === "";
 const splash = Astro.locals.starlightRoute.entry.data.template === "splash";
+const showFeedback = Astro.locals.starlightRoute.entry.data.feedback;
 
 let isProduction = false;
 
@@ -82,7 +83,7 @@ if (
 ---
 
 {
-	!homepage && (
+	!homepage && showFeedback && (
 		<div class="feedback-prompt">
 			<FeedbackPrompt client:idle />
 		</div>

src/components/overrides/Page.astro

@@ -39,8 +39,13 @@ if (props.hasSidebar) {
 			};
 		}
 
-		props.pagination.prev = prev;
-		props.pagination.next = next;
+		if (data.prev !== false) {
+			props.pagination.prev = prev;
+		}
+
+		if (data.next !== false) {
+			props.pagination.next = next;
+		}
 	}
 }
 

src/components/overrides/TableOfContents.astro

@@ -5,6 +5,7 @@ import { Icon } from "@astrojs/starlight/components";
 import FeedbackPrompt from "../FeedbackPrompt.tsx";
 
 const tags = Astro.locals.starlightRoute.entry.data.tags;
+const showFeedback = Astro.locals.starlightRoute.entry.data.feedback;
 ---
 
 <Default />
@@ -29,8 +30,14 @@ const tags = Astro.locals.starlightRoute.entry.data.tags;
 		</>
 	)
 }
-<br />
-<FeedbackPrompt client:idle />
+{
+	showFeedback && (
+		<>
+			<br />
+			<FeedbackPrompt client:idle />
+		</>
+	)
+}
 {
 	!Astro.url.pathname.startsWith("/support/") && (
 		<>

src/content/docs/support/ai.mdx

@@ -5,6 +5,9 @@ sidebar:
   order: 8
   label: Docs AI
   badge: Beta
+next: false
+prev: false
+feedback: false
 ---
 
 import DocsAI from "~/components/DocsAI.tsx";

src/schemas/base.ts

@@ -131,4 +131,8 @@ export const baseSchema = ({ image }: SchemaContext) =>
 			})
 			.optional(),
 		icon: SidebarIconSchema(),
+		feedback: z
+			.boolean()
+			.default(true)
+			.describe("Whether to hide the FeedbackPrompt component on a page"),
 	});

src/styles/tailwind.css

@@ -144,6 +144,10 @@
 }
 
 @layer base {
+	pre {
+		white-space: pre-wrap;
+	}
+
 	:root {
 		--blue-accent-200: rgb(15, 0, 107);
 		--blue-accent-600: rgb(46, 105, 255);