[Docs Site] Add tracking events and hide footer elements on DocsAI (#22998)

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

* use a custom component rather than dom

* fix desc

Author: KianNH

src/components/DocsAI.tsx

@@ -5,6 +5,7 @@ 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 = {
@@ -31,6 +32,29 @@ async function sendCSATFeedback(queryId: string, positive: boolean) {
 	}
 }
 
+function TrackedLink({
+	href,
+	children,
+}: {
+	href?: string;
+	children?: React.ReactNode;
+}) {
+	return (
+		<a
+			href={href}
+			target="_blank"
+			onClick={() =>
+				track("click chat link", {
+					value: children?.toString() ?? "",
+					href,
+				})
+			}
+		>
+			{children}
+		</a>
+	);
+}
+
 function Messages({
 	messages,
 	loading,
@@ -47,6 +71,9 @@ function Messages({
 	};
 
 	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));
 	};
@@ -60,7 +87,12 @@ function Messages({
 						<div
 							className={`${classes.base} ${message.role === "user" ? classes.user : classes.assistant}`}
 						>
-							<Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+							<Markdown
+								remarkPlugins={[remarkGfm, remarkBreaks]}
+								components={{
+									a: TrackedLink,
+								}}
+							>
 								{message.content}
 							</Markdown>
 							{message.sources && (
@@ -71,10 +103,10 @@ function Messages({
 									</p>
 									<ul>
 										{message.sources.map((source) => (
-											<li>
-												<a href={source.file_path} target="_blank">
+											<li key={source.file_path}>
+												<TrackedLink href={source.file_path}>
 													{source.title}
-												</a>
+												</TrackedLink>
 											</li>
 										))}
 									</ul>
@@ -124,6 +156,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,10 @@ export const baseSchema = ({ image }: SchemaContext) =>
 			})
 			.optional(),
 		icon: SidebarIconSchema(),
+		feedback: z
+			.boolean()
+			.default(true)
+			.describe(
+				"Whether to show the FeedbackPrompt on the page, defaults to true",
+			),
 	});

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);