copilotkit__copilotkit/docs/components/react/coagents/coagents-features.tsx

"use client";

import { useTailoredContent } from "@/lib/hooks/use-tailored-content";
import cn from "classnames";
import { useEffect, useState } from "react";
import { AiOutlineRobot as GenerativeUiIcon } from "react-icons/ai";
import { TbActivityHeartbeat as StreamAgentStateIcon } from "react-icons/tb";
import { IoShareSocialOutline as ShareAgentStateIcon } from "react-icons/io5";
import { FaQuestionCircle as AgentQAndAIcon } from "react-icons/fa";

type FeatureMode =
  | "generative-ui"
  | "stream-agent-state"
  | "share-agent-state"
  | "agent-q-and-a";

export const CoAgentsFeatureToggle: React.FC<{ className?: string }> = ({
  className,
}) => {
  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(() => {
    setIsClient(true);
  }, []);

  if (!isClient) {
    return null;
  }

  const itemCn =
    "border dark:text-white dark:bg-neutral-800 p-4 rounded-md flex-1 flex flex-col items-center justify-center cursor-pointer bg-white relative overflow-hidden group transition-all";
  const selectedCn =
    "ring-1 dark:text-black ring-indigo-400 selected bg-gradient-to-r from-indigo-100/80 to-purple-200 dark:from-indigo-500 dark:to-purple-500 shadow-lg";
  const iconCn =
    "w-7 h-7 mb-2 opacity-20 group-[.selected]:text-indigo-500 group-[.selected]:opacity-60  dark:group-[.selected]:text-indigo-100 transition-all";

  const features: {
    id: FeatureMode;
    title: string;
    description: string;
    Icon: React.FC<React.SVGProps<SVGSVGElement>>;
  }[] = [
    {
      id: "generative-ui",
      title: "Generative UI",
      description:
        "Create dynamic user interfaces with AI-generated components.",
      Icon: GenerativeUiIcon,
    },
    {
      id: "stream-agent-state",
      title: "Stream Agent State",
      description:
        "Real-time updates on agent activities and decision-making processes.",
      Icon: StreamAgentStateIcon,
    },
    {
      id: "share-agent-state",
      title: "Share Agent State",
      description:
        "Collaborate and share agent states across different sessions or users.",
      Icon: ShareAgentStateIcon,
    },
    {
      id: "agent-q-and-a",
      title: "Agent Q&A",
      description: "Interactive question and answer sessions with AI agents.",
      Icon: AgentQAndAIcon,
    },
  ];

  return (
    <div className={cn("coagents-features-wrapper mt-4", className)}>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 my-2 w-full">
        {features.map((feature) => (
          <div
            key={feature.id}
            className={cn(itemCn, mode === feature.id && selectedCn)}
            onClick={() => setMode(feature.id)}
          >
            <feature.Icon
              className={cn(iconCn, mode === feature.id && "text-indigo-500")}
            />
            <p className="font-semibold text-sm md:text-base text-center">
              {feature.title}
            </p>
            <p className="text-xs text-center hidden md:block">
              {feature.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

const FeatureContent: React.FC<{
  children: React.ReactNode;
  className?: string;
  mode: FeatureMode;
}> = ({ children, className, mode }) => {
  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(() => {
    setIsClient(true);
  }, []);

  if (!isClient) {
    return null;
  }

  return (
    <div
      className={cn(
        "feature-content mt-6",
        currentMode !== mode && "hidden",
        className,
      )}
    >
      {children}
    </div>
  );
};

export const CoAgentsFeatureRender: React.FC<{
  children: React.ReactNode;
  className?: string;
  feature:
    | "generative-ui"
    | "stream-agent-state"
    | "share-agent-state"
    | "agent-q-and-a";
}> = (props) => <FeatureContent {...props} mode={props.feature} />;