@sero-ai/ui 0.1.0

package/src/components/ai-elements/persona.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import type { RiveParameters } from "@rive-app/react-webgl2";
+import type { FC, ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+import {
+  useRive,
+  useStateMachineInput,
+  useViewModel,
+  useViewModelInstance,
+  useViewModelInstanceColor,
+} from "@rive-app/react-webgl2";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+
+export type PersonaState =
+  | "idle"
+  | "listening"
+  | "thinking"
+  | "speaking"
+  | "asleep";
+
+interface PersonaProps {
+  state: PersonaState;
+  onLoad?: RiveParameters["onLoad"];
+  onLoadError?: RiveParameters["onLoadError"];
+  onReady?: () => void;
+  onPause?: RiveParameters["onPause"];
+  onPlay?: RiveParameters["onPlay"];
+  onStop?: RiveParameters["onStop"];
+  className?: string;
+  variant?: keyof typeof sources;
+}
+
+// The state machine name is always 'default' for Elements AI visuals
+const stateMachine = "default";
+
+const sources = {
+  command: {
+    dynamicColor: true,
+    hasModel: true,
+    source:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/command-2.0.riv",
+  },
+  glint: {
+    dynamicColor: true,
+    hasModel: true,
+    source:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/glint-2.0.riv",
+  },
+  halo: {
+    dynamicColor: true,
+    hasModel: true,
+    source:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/halo-2.0.riv",
+  },
+  mana: {
+    dynamicColor: false,
+    hasModel: true,
+    source:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/mana-2.0.riv",
+  },
+  obsidian: {
+    dynamicColor: true,
+    hasModel: true,
+    source:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/obsidian-2.0.riv",
+  },
+  opal: {
+    dynamicColor: false,
+    hasModel: false,
+    source:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/orb-1.2.riv",
+  },
+};
+
+const getCurrentTheme = (): "light" | "dark" => {
+  if (typeof window !== "undefined") {
+    if (document.documentElement.classList.contains("dark")) {
+      return "dark";
+    }
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+  }
+  return "light";
+};
+
+const useTheme = (enabled: boolean) => {
+  const [theme, setTheme] = useState<"light" | "dark">(getCurrentTheme);
+
+  useEffect(() => {
+    // Skip if not enabled (avoids unnecessary observers for non-dynamic-color variants)
+    if (!enabled) {
+      return;
+    }
+
+    // Watch for classList changes
+    const observer = new MutationObserver(() => {
+      setTheme(getCurrentTheme());
+    });
+
+    observer.observe(document.documentElement, {
+      attributeFilter: ["class"],
+      attributes: true,
+    });
+
+    // Watch for OS-level theme changes
+    let mql: MediaQueryList | null = null;
+    const handleMediaChange = () => {
+      setTheme(getCurrentTheme());
+    };
+
+    if (window.matchMedia) {
+      mql = window.matchMedia("(prefers-color-scheme: dark)");
+      mql.addEventListener("change", handleMediaChange);
+    }
+
+    return () => {
+      observer.disconnect();
+      if (mql) {
+        mql.removeEventListener("change", handleMediaChange);
+      }
+    };
+  }, [enabled]);
+
+  return theme;
+};
+
+interface PersonaWithModelProps {
+  rive: ReturnType<typeof useRive>["rive"];
+  source: (typeof sources)[keyof typeof sources];
+  children: React.ReactNode;
+}
+
+const PersonaWithModel = memo(
+  ({ rive, source, children }: PersonaWithModelProps) => {
+    const theme = useTheme(source.dynamicColor);
+    const viewModel = useViewModel(rive, { useDefault: true });
+    const viewModelInstance = useViewModelInstance(viewModel, {
+      rive,
+      useDefault: true,
+    });
+    const viewModelInstanceColor = useViewModelInstanceColor(
+      "color",
+      viewModelInstance
+    );
+
+    useEffect(() => {
+      if (!(viewModelInstanceColor && source.dynamicColor)) {
+        return;
+      }
+
+      const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
+      viewModelInstanceColor.setRgb(r, g, b);
+    }, [viewModelInstanceColor, theme, source.dynamicColor]);
+
+    return children;
+  }
+);
+
+PersonaWithModel.displayName = "PersonaWithModel";
+
+interface PersonaWithoutModelProps {
+  children: ReactNode;
+}
+
+const PersonaWithoutModel = memo(
+  ({ children }: PersonaWithoutModelProps) => children
+);
+
+PersonaWithoutModel.displayName = "PersonaWithoutModel";
+
+export const Persona: FC<PersonaProps> = memo(
+  ({
+    variant = "obsidian",
+    state = "idle",
+    onLoad,
+    onLoadError,
+    onReady,
+    onPause,
+    onPlay,
+    onStop,
+    className,
+  }) => {
+    const source = sources[variant];
+
+    if (!source) {
+      throw new Error(`Invalid variant: ${variant}`);
+    }
+
+    // Stabilize callbacks to prevent useRive from reinitializing
+    const callbacksRef = useRef({
+      onLoad,
+      onLoadError,
+      onPause,
+      onPlay,
+      onReady,
+      onStop,
+    });
+
+    useEffect(() => {
+      callbacksRef.current = {
+        onLoad,
+        onLoadError,
+        onPause,
+        onPlay,
+        onReady,
+        onStop,
+      };
+    }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);
+
+    const stableCallbacks = useMemo(
+      () => ({
+        onLoad: ((loadedRive) =>
+          callbacksRef.current.onLoad?.(
+            loadedRive
+          )) as RiveParameters["onLoad"],
+        onLoadError: ((err) =>
+          callbacksRef.current.onLoadError?.(
+            err
+          )) as RiveParameters["onLoadError"],
+        onPause: ((event) =>
+          callbacksRef.current.onPause?.(event)) as RiveParameters["onPause"],
+        onPlay: ((event) =>
+          callbacksRef.current.onPlay?.(event)) as RiveParameters["onPlay"],
+        onReady: () => callbacksRef.current.onReady?.(),
+        onStop: ((event) =>
+          callbacksRef.current.onStop?.(event)) as RiveParameters["onStop"],
+      }),
+      []
+    );
+
+    const { rive, RiveComponent } = useRive({
+      autoplay: true,
+      onLoad: stableCallbacks.onLoad,
+      onLoadError: stableCallbacks.onLoadError,
+      onPause: stableCallbacks.onPause,
+      onPlay: stableCallbacks.onPlay,
+      onRiveReady: stableCallbacks.onReady,
+      onStop: stableCallbacks.onStop,
+      src: source.source,
+      stateMachines: stateMachine,
+    });
+
+    const listeningInput = useStateMachineInput(
+      rive,
+      stateMachine,
+      "listening"
+    );
+    const thinkingInput = useStateMachineInput(rive, stateMachine, "thinking");
+    const speakingInput = useStateMachineInput(rive, stateMachine, "speaking");
+    const asleepInput = useStateMachineInput(rive, stateMachine, "asleep");
+
+    useEffect(() => {
+      if (listeningInput) {
+        listeningInput.value = state === "listening";
+      }
+      if (thinkingInput) {
+        thinkingInput.value = state === "thinking";
+      }
+      if (speakingInput) {
+        speakingInput.value = state === "speaking";
+      }
+      if (asleepInput) {
+        asleepInput.value = state === "asleep";
+      }
+    }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);
+
+    const Component = source.hasModel ? PersonaWithModel : PersonaWithoutModel;
+
+    return (
+      <Component rive={rive} source={source}>
+        <RiveComponent className={cn("size-16 shrink-0", className)} />
+      </Component>
+    );
+  }
+);
+
+Persona.displayName = "Persona";

package/src/components/ai-elements/plan.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { ChevronsUpDownIcon } from "lucide-react";
+import { createContext, useContext } from "react";
+
+import { Shimmer } from "./shimmer";
+
+interface PlanContextValue {
+  isStreaming: boolean;
+}
+
+const PlanContext = createContext<PlanContextValue | null>(null);
+
+const usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+
+export type PlanProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+};
+
+export const Plan = ({
+  className,
+  isStreaming = false,
+  children,
+  ...props
+}: PlanProps) => (
+  <PlanContext.Provider value={{ isStreaming }}>
+    <Collapsible asChild data-slot="plan" {...props}>
+      <Card className={cn("shadow-none", className)}>{children}</Card>
+    </Collapsible>
+  </PlanContext.Provider>
+);
+
+export type PlanHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (
+  <CardHeader
+    className={cn("flex items-start justify-between", className)}
+    data-slot="plan-header"
+    {...props}
+  />
+);
+
+export type PlanTitleProps = Omit<
+  ComponentProps<typeof CardTitle>,
+  "children"
+> & {
+  children: string;
+};
+
+export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardTitle data-slot="plan-title" {...props}>
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardTitle>
+  );
+};
+
+export type PlanDescriptionProps = Omit<
+  ComponentProps<typeof CardDescription>,
+  "children"
+> & {
+  children: string;
+};
+
+export const PlanDescription = ({
+  className,
+  children,
+  ...props
+}: PlanDescriptionProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardDescription
+      className={cn("text-balance", className)}
+      data-slot="plan-description"
+      {...props}
+    >
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardDescription>
+  );
+};
+
+export type PlanActionProps = ComponentProps<typeof CardAction>;
+
+export const PlanAction = (props: PlanActionProps) => (
+  <CardAction data-slot="plan-action" {...props} />
+);
+
+export type PlanContentProps = ComponentProps<typeof CardContent>;
+
+export const PlanContent = (props: PlanContentProps) => (
+  <CollapsibleContent asChild>
+    <CardContent data-slot="plan-content" {...props} />
+  </CollapsibleContent>
+);
+
+export type PlanFooterProps = ComponentProps<"div">;
+
+export const PlanFooter = (props: PlanFooterProps) => (
+  <CardFooter data-slot="plan-footer" {...props} />
+);
+
+export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <Button
+      className={cn("size-8", className)}
+      data-slot="plan-trigger"
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      <ChevronsUpDownIcon className="size-4" />
+      <span className="sr-only">Toggle plan</span>
+    </Button>
+  </CollapsibleTrigger>
+);