fix: allow users to disable platforms in the sdk selector

public/__redirects

@@ -338,7 +338,12 @@
 /realtime/pricing/ /realtime/sfu/pricing/ 302
 /realtime/changelog/ /realtime/sfu/changelog/ 302
 /realtime/realtimekit/get-started/ /realtime/realtimekit/quickstart/ 302
+/realtime/realtimekit/core/ai/ /realtime/realtimekit/ai/ 302
+/realtime/realtimekit/core/remote-participant/ /realtime/realtimekit/core/remote-participants/ 302
 /realtime/realtimekit/ui-kit/meeting-lifecycle/ realtime/realtimekit/ui-kit/state-management/ 302
+/realtime/realtimekit/core/video-background/ /realtime/realtimekit/core/video-effects/ 302
+/realtime/realtimekit/voice-meetings/ /realtime/realtimekit/audio-calls/ 302
+/realtime/realtimekit/core/manage-other-participants-in-a-session/ /realtime/realtimekit/core/manage-participants-in-a-session/ 302
 /realtime/realtimekit/getting-started/ /realtime/realtimekit/quickstart/ 302
 /realtime/introduction/ /realtime/realtimekit/introduction/ 302
 /realtime/concepts/ /realtime/realtimekit/concepts/ 302

src/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro

@@ -3,7 +3,7 @@ import { z } from "astro:schema";
 import CodeSnippet from "./RTKCodeSnippet";
 
 const props = z.object({
-	id: z.string(),
+	id: z.union([z.string(), z.array(z.string())]),
 });
 
 const { id } = props.parse(Astro.props);

src/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { useFramework } from "../hooks/useFramework";
 
 interface RTKCodeSnippetProps {
-	id: string; // e.g. "web-react"
+	id: string | string[]; // e.g. "web-react" or ["web-react", "web-vue"]
 	children: ReactNode; // MDX content
 }
 
@@ -12,6 +12,9 @@ export default function RTKCodeSnippet({ id, children }: RTKCodeSnippetProps) {
 	if (!framework) return null;
 
 	const activeId = `${platform}-${framework.id}`;
+	const ids = Array.isArray(id) ? id : [id];
 
-	return <div className={activeId === id ? "" : "hidden"}>{children}</div>;
+	return (
+		<div className={ids.includes(activeId) ? "" : "hidden"}>{children}</div>
+	);
 }

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro

@@ -1,5 +1,17 @@
 ---
+import { z } from "astro:schema";
 import SDKSelector from "./RTKSDKSelector";
+
+const platform = z.enum(["web", "mobile"]);
+
+const props = z.object({
+	disabledPlatforms: z
+		.union([platform, z.array(platform)])
+		.optional()
+		.transform((value) => (typeof value === "string" ? [value] : value)),
+});
+
+const { disabledPlatforms } = props.parse(Astro.props);
 ---
 
-<SDKSelector client:load />
+<SDKSelector client:load disabledPlatforms={disabledPlatforms} />

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx

@@ -6,7 +6,11 @@ import {
 	mobileFrameworks,
 } from "../hooks/useFramework";
 
-export default function SDKSelector() {
+interface SDKSelectorProps {
+	disabledPlatforms?: Platform[];
+}
+
+export default function SDKSelector({ disabledPlatforms }: SDKSelectorProps) {
 	const { platform, framework, setSelection } = useFramework();
 
 	const platforms: {
@@ -28,52 +32,77 @@ export default function SDKSelector() {
 		[platform],
 	);
 
+	const isPlatformDisabled = (p: Platform) =>
+		Boolean(disabledPlatforms?.includes(p));
+	const activePlatformDisabled = isPlatformDisabled(platform);
+
+	const disabledPlatformsString = disabledPlatforms?.join(", ");
+
 	return (
 		<>
-			<div className="my-5 flex flex-col gap-0 rounded-sm bg-blue-50 p-2 dark:bg-neutral-800">
-				<div className="flex w-full flex-row items-start justify-start gap-2">
-					{platforms.map((p) => (
-						<button
-							type="button"
-							className={`m-0 ${p.id === platform ? "rounded-t-md bg-white font-semibold text-blue-800 dark:bg-neutral-700 dark:text-blue-100" : "bg-blue-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300"} cursor-pointer px-2 py-1 font-medium`}
-							onClick={() => {
-								const nextPlatform = p.id;
-								const nextFramework =
-									nextPlatform === "web"
-										? webFrameworks[0]
-										: mobileFrameworks[0];
-
-								setSelection(nextPlatform, nextFramework);
-							}}
-							key={p.id}
-						>
-							{p.label}
-						</button>
-					))}
+			{disabledPlatforms && (
+				<div className="flex flex-row gap-1 rounded-md bg-blue-100 p-2 text-blue-900 dark:bg-neutral-800 dark:text-neutral-300">
+					This page is not available for the <b>{disabledPlatformsString}</b>
+					platform.
 				</div>
-				{frameworks.length < 1 && (
-					<div className="m-0 w-full rounded-r-md rounded-b-md bg-white p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
-						No frameworks available.
-					</div>
-				)}
-				<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-white p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
-					{frameworks.map((fw) => {
-						const handleClick = () => {
-							setSelection(platform, fw);
-						};
+			)}
+			<div className="my-5 flex flex-col gap-0 rounded-md bg-blue-100 p-2 dark:bg-neutral-800">
+				<div className="flex w-full flex-row items-start justify-start gap-2">
+					{platforms.map((p) => {
+						const disabled = isPlatformDisabled(p.id);
 
 						return (
 							<button
-								key={fw.id}
+								key={p.id}
 								type="button"
-								className={`m-0 flex ${framework?.id === fw.id ? "font-semibold text-blue-800 dark:text-blue-100" : ""} text-md cursor-pointer items-center rounded-md bg-white px-3 py-1 font-medium dark:bg-neutral-700`}
-								onClick={handleClick}
+								disabled={disabled}
+								className={`m-0 ${p.id === platform ? "rounded-t-md bg-neutral-50 text-blue-500 dark:bg-neutral-700" : "bg-blue-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"} ${disabled ? "cursor-not-allowed opacity-50" : ""} px-2 py-1 font-medium`}
+								onClick={() => {
+									if (disabled) return;
+									const nextPlatform = p.id;
+									const nextFramework =
+										nextPlatform === "web"
+											? webFrameworks[0]
+											: mobileFrameworks[0];
+
+									setSelection(nextPlatform, nextFramework);
+								}}
 							>
-								{fw.label}
+								{p.label}
 							</button>
 						);
 					})}
 				</div>
+				{activePlatformDisabled && (
+					<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-700 dark:bg-neutral-700 dark:text-gray-300">
+						This page is not available for the {platform} platform.
+					</div>
+				)}
+				{!activePlatformDisabled && frameworks.length < 1 && (
+					<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
+						No frameworks available.
+					</div>
+				)}
+				{!activePlatformDisabled && (
+					<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-neutral-50 p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
+						{frameworks.map((fw) => {
+							const handleClick = () => {
+								setSelection(platform, fw);
+							};
+
+							return (
+								<button
+									key={fw.id}
+									type="button"
+									className={`m-0 flex ${framework?.id === fw.id ? "text-blue-500 italic" : ""} text-md cursor-pointer items-center rounded-md bg-neutral-50 px-3 py-1 font-medium dark:bg-neutral-700`}
+									onClick={handleClick}
+								>
+									{fw.label}
+								</button>
+							);
+						})}
+					</div>
+				)}
 			</div>
 		</>
 	);

src/content/docs/realtime/realtimekit/core/ai.mdx → src/content/docs/realtime/realtimekit/ai.mdx

@@ -1,9 +1,8 @@
 ---
 pcx_content_type: how-to
 title: AI (Transcription and Summary)
-slug: realtime/realtimekit/core/ai
 sidebar:
-  order: 11
+  order: 10
 ---
 
 RealtimeKit provides AI-powered features to enhance your meetings, including real-time transcription and automatic meeting summaries. These features help you capture important discussions and generate concise overviews of your meetings.
@@ -127,7 +126,7 @@
 	"customParticipantId": "abc123xyz",
 	"transcript": "Hello?",
 	"isPartialTranscript": true,
 	"date": "Wed Aug 07 2024 10:15:30 GMT+0530 (India Standard Time)"
 }
 ```
 

src/content/docs/realtime/realtimekit/voice-meetings.mdx → src/content/docs/realtime/realtimekit/audio-calls.mdx

@@ -1,15 +1,14 @@
 ---
-title: Voice meetings
+title: Audio Only Calls
 pcx_content_type: concept
-slug: realtime/realtimekit/voice-meetings
 sidebar:
   order: 9
 ---
 
-RealtimeKit supports voice meetings, allowing you to build audio-only experiences such as audio rooms, support lines, or community hangouts.
+RealtimeKit supports voice calls, allowing you to build audio-only experiences such as audio rooms, support lines, or community hangouts.
 In these meetings, participants use their microphones and hear others, but cannot use their camera. Voice meetings reduce bandwidth requirements and focus on audio communication.
 
-## How voice meetings work
+## How Audio Calls Work
 
 A participant’s meeting experience is determined by the **Preset** applied to that participant.
 To run a voice meeting, ensure all participants join with a Preset that has meeting type set to `Voice`.
@@ -22,7 +21,7 @@ When a participant joins with a `Voice` meeting type Preset, they are considered
 
 For detailed pricing information, refer to [Pricing](/realtime/realtimekit/pricing/).
 
-## Building voice experiences
+## Building Audio Experiences
 
 You can build voice meeting experiences using either the UI Kit or the Core SDK.
 

src/content/docs/realtime/realtimekit/core/breakout-rooms.mdx

@@ -10,6 +10,8 @@ import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelect
 import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
 import { Render } from "~/components";
 
+<RTKSDKSelector />
+
 <Render file="realtimekit/web/breakout-room-preface" product="realtime" />
 
 ### Validate permissions
@@ -39,8 +41,6 @@ Before creating breakout rooms, validate the permissions of the current particip
 
 ### Create breakout rooms
 
-<RTKSDKSelector />
-
 <RTKCodeSnippet id="web-web-components">
 	<Render
 		file="realtimekit/web/breakout-room-creation-sdk-api"