tailored content takes array of options, and default option

Author: ataibarkai

docs/components/coagents-features.tsx

@@ -9,7 +9,10 @@ import { FaQuestionCircle as AgentQAndAIcon } from "react-icons/fa";
 type FeatureMode = "generative-ui" | "stream-agent-state" | "share-agent-state" | "agent-q-and-a";
 
 const Toggle: React.FC<{ className?: string }> = ({ className }) => {
-  const { mode, setMode } = useTailoredContent();
+  const { mode, setMode } = useTailoredContent<FeatureMode>(
+    ["generative-ui", "stream-agent-state", "share-agent-state", "agent-q-and-a"],
+    "generative-ui"
+  );
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
@@ -78,7 +81,11 @@ const FeatureContent: React.FC<{
   className?: string;
   mode: FeatureMode;
 }> = ({ children, className, mode }) => {
-  const { mode: currentMode } = useTailoredContent();
+  const { mode: currentMode } = useTailoredContent<FeatureMode>(
+    ["generative-ui", "stream-agent-state", "share-agent-state", "agent-q-and-a"],
+    "generative-ui"
+  );
+  
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {

docs/components/copilot-cloud-or-self-hosting.tsx

@@ -4,8 +4,14 @@ import { useEffect, useState } from "react";
 import { BsFillCloudHaze2Fill as CloudIcon } from "react-icons/bs";
 import { FaServer as SelfHostIcon } from "react-icons/fa6";
 
+type FeatureMode = "cloud" | "self-host";
+
 function Toggle({ className }: { className?: string }) {
-  const { mode, setMode } = useTailoredContent();
+  const { mode, setMode } = useTailoredContent<FeatureMode>(
+    ["cloud", "self-host"],
+    "self-host"
+  );
+
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
@@ -64,7 +70,11 @@ function CloudContent({
   children: React.ReactNode;
   className?: string;
 }) {
-  const { mode } = useTailoredContent();
+  const { mode } = useTailoredContent(
+    ["cloud", "self-host"],
+    "self-host"
+  );
+
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
@@ -95,7 +105,10 @@ function SelfHostContent({
   children: React.ReactNode;
   className?: string;
 }) {
-  const { mode } = useTailoredContent();
+  const { mode } = useTailoredContent(
+    ["cloud", "self-host"],
+    "self-host"
+  );
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {

docs/lib/hooks/useTailoredContent.tsx

@@ -1,15 +1,25 @@
 import { createContext, useContext, useState, ReactNode } from "react";
 import { useLocalStorage } from "usehooks-ts";
 
-type TailordContextContextType = {
-  mode: "cloud" | "self-host";
-  setMode: (mode: "cloud" | "self-host") => void;
+type TailoredContentOption = string;
+
+type TailoredContentContextType<T extends TailoredContentOption> = {
+  mode: T;
+  setMode: (mode: T) => void;
 };
 
-const TailoredContentContext = createContext<TailordContextContextType | undefined>(undefined);
+const TailoredContentContext = createContext<TailoredContentContextType<TailoredContentOption> | undefined>(undefined);
 
-export const TailoredContentProvider = ({ children }: { children: ReactNode }) => {
-  const [mode, setMode] = useLocalStorage<"cloud" | "self-host">("copilotkit-cloud-or-self-hosting", "cloud");
+export const TailoredContentProvider = <T extends TailoredContentOption>({ 
+  children, 
+  options, 
+  defaultOption 
+}: { 
+  children: ReactNode; 
+  options: T[]; 
+  defaultOption: T;
+}) => {
+  const [mode, setMode] = useLocalStorage<T>("copilotkit-tailored-content", defaultOption);
 
   return (
     <TailoredContentContext.Provider
@@ -20,10 +30,13 @@ export const TailoredContentProvider = ({ children }: { children: ReactNode }) =
   );
 };
 
-export const useTailoredContent = () => {
+export const useTailoredContent = <T extends TailoredContentOption>(
+  options: T[],
+  defaultOption: T
+): TailoredContentContextType<T> => {
   const context = useContext(TailoredContentContext);
   if (context === undefined) {
     throw new Error("useTailoredContent must be used within a TailoredContentProvider");
   }
-  return context;
+  return context as TailoredContentContextType<T>;
 };

docs/pages/coagents/index.mdx

@@ -23,6 +23,8 @@ As an industry, we are quickly learning that **AI agents perform best when they
 
 <CoAgentsFeatures.Toggle />
 
+**Press one of the buttons above 👆**
+
 <CoAgentsFeatures.GenerativeUi>
   ### Generative UI