@cloudbase/agent-react-ui 1.0.1-alpha.32

package/src/components/ai-elements/audio-player.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
+import { cn } from "@/lib/utils";
+import type { Experimental_SpeechResult as SpeechResult } from "ai";
+import {
+  MediaControlBar,
+  MediaController,
+  MediaDurationDisplay,
+  MediaMuteButton,
+  MediaPlayButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaTimeDisplay,
+  MediaTimeRange,
+  MediaVolumeRange,
+} from "media-chrome/react";
+import type { ComponentProps, CSSProperties } from "react";
+
+export type AudioPlayerProps = Omit<
+  ComponentProps<typeof MediaController>,
+  "audio"
+>;
+
+export const AudioPlayer = ({
+  className,
+  children,
+  style,
+  ...props
+}: AudioPlayerProps) => (
+  <MediaController
+    audio
+    data-slot="audio-player"
+    style={
+      {
+        "--media-button-icon-width": "1rem",
+        "--media-button-icon-height": "1rem",
+        "--media-icon-color": "currentColor",
+        "--media-font": "var(--font-sans)",
+        "--media-font-size": "10px",
+        "--media-control-background": "transparent",
+        "--media-control-hover-background": "var(--color-accent)",
+        "--media-control-padding": "0",
+        "--media-background-color": "transparent",
+        "--media-primary-color": "var(--color-primary)",
+        "--media-secondary-color": "var(--color-secondary)",
+        "--media-text-color": "var(--color-foreground)",
+        "--media-tooltip-background": "var(--color-background)",
+        "--media-range-bar-color": "var(--color-primary)",
+        "--media-tooltip-arrow-display": "none",
+        "--media-tooltip-border-radius": "var(--radius-md)",
+        "--media-preview-time-text-shadow": "none",
+        "--media-preview-time-background": "var(--color-background)",
+        "--media-preview-time-border-radius": "var(--radius-md)",
+        "--media-range-track-background": "var(--color-secondary)",
+        ...style,
+      } as CSSProperties
+    }
+    {...props}
+  >
+    {children}
+  </MediaController>
+);
+
+export type AudioPlayerElementProps = Omit<ComponentProps<"audio">, "src"> &
+  (
+    | {
+        data: SpeechResult["audio"];
+      }
+    | {
+        src: string;
+      }
+  );
+
+export const AudioPlayerElement = ({ ...props }: AudioPlayerElementProps) => (
+  <audio
+    data-slot="audio-player-element"
+    slot="media"
+    src={
+      "src" in props
+        ? props.src
+        : `data:${props.data.mediaType};base64,${props.data.base64}`
+    }
+    {...props}
+  />
+);
+
+export type AudioPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
+
+export const AudioPlayerControlBar = ({
+  children,
+  ...props
+}: AudioPlayerControlBarProps) => (
+  <MediaControlBar data-slot="audio-player-control-bar" {...props}>
+    <ButtonGroup orientation="horizontal">{children}</ButtonGroup>
+  </MediaControlBar>
+);
+
+export type AudioPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
+
+export const AudioPlayerPlayButton = ({
+  className,
+  ...props
+}: AudioPlayerPlayButtonProps) => (
+  <Button asChild size="icon-sm" variant="outline">
+    <MediaPlayButton
+      className={cn("bg-transparent", className)}
+      data-slot="audio-player-play-button"
+      {...props}
+    />
+  </Button>
+);
+
+export type AudioPlayerSeekBackwardButtonProps = ComponentProps<
+  typeof MediaSeekBackwardButton
+>;
+
+export const AudioPlayerSeekBackwardButton = ({
+  seekOffset = 10,
+  ...props
+}: AudioPlayerSeekBackwardButtonProps) => (
+  <Button asChild size="icon-sm" variant="outline">
+    <MediaSeekBackwardButton
+      data-slot="audio-player-seek-backward-button"
+      seekOffset={seekOffset}
+      {...props}
+    />
+  </Button>
+);
+
+export type AudioPlayerSeekForwardButtonProps = ComponentProps<
+  typeof MediaSeekForwardButton
+>;
+
+export const AudioPlayerSeekForwardButton = ({
+  seekOffset = 10,
+  ...props
+}: AudioPlayerSeekForwardButtonProps) => (
+  <Button asChild size="icon-sm" variant="outline">
+    <MediaSeekForwardButton
+      data-slot="audio-player-seek-forward-button"
+      seekOffset={seekOffset}
+      {...props}
+    />
+  </Button>
+);
+
+export type AudioPlayerTimeDisplayProps = ComponentProps<
+  typeof MediaTimeDisplay
+>;
+
+export const AudioPlayerTimeDisplay = ({
+  className,
+  ...props
+}: AudioPlayerTimeDisplayProps) => (
+  <ButtonGroupText asChild className="bg-transparent">
+    <MediaTimeDisplay
+      className={cn("tabular-nums", className)}
+      data-slot="audio-player-time-display"
+      {...props}
+    />
+  </ButtonGroupText>
+);
+
+export type AudioPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
+
+export const AudioPlayerTimeRange = ({
+  className,
+  ...props
+}: AudioPlayerTimeRangeProps) => (
+  <ButtonGroupText asChild className="bg-transparent">
+    <MediaTimeRange
+      className={cn("", className)}
+      data-slot="audio-player-time-range"
+      {...props}
+    />
+  </ButtonGroupText>
+);
+
+export type AudioPlayerDurationDisplayProps = ComponentProps<
+  typeof MediaDurationDisplay
+>;
+
+export const AudioPlayerDurationDisplay = ({
+  className,
+  ...props
+}: AudioPlayerDurationDisplayProps) => (
+  <ButtonGroupText asChild className="bg-transparent">
+    <MediaDurationDisplay
+      className={cn("tabular-nums", className)}
+      data-slot="audio-player-duration-display"
+      {...props}
+    />
+  </ButtonGroupText>
+);
+
+export type AudioPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;
+
+export const AudioPlayerMuteButton = ({
+  className,
+  ...props
+}: AudioPlayerMuteButtonProps) => (
+  <ButtonGroupText asChild className="bg-transparent">
+    <MediaMuteButton
+      className={cn("", className)}
+      data-slot="audio-player-mute-button"
+      {...props}
+    />
+  </ButtonGroupText>
+);
+
+export type AudioPlayerVolumeRangeProps = ComponentProps<
+  typeof MediaVolumeRange
+>;
+
+export const AudioPlayerVolumeRange = ({
+  className,
+  ...props
+}: AudioPlayerVolumeRangeProps) => (
+  <ButtonGroupText asChild className="bg-transparent">
+    <MediaVolumeRange
+      className={cn("", className)}
+      data-slot="audio-player-volume-range"
+      {...props}
+    />
+  </ButtonGroupText>
+);

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

@@ -0,0 +1,22 @@
+import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
+import type { ReactNode } from "react";
+import "@xyflow/react/dist/style.css";
+
+type CanvasProps = ReactFlowProps & {
+  children?: ReactNode;
+};
+
+export const Canvas = ({ children, ...props }: CanvasProps) => (
+  <ReactFlow
+    deleteKeyCode={["Backspace", "Delete"]}
+    fitView
+    panOnDrag={false}
+    panOnScroll
+    selectionOnDrag={true}
+    zoomOnDoubleClick={false}
+    {...props}
+  >
+    <Background bgColor="var(--sidebar)" />
+    {children}
+  </ReactFlow>
+);

package/src/components/ai-elements/chain-of-thought.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  DotIcon,
+  type LucideIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
+
+interface ChainOfThoughtContextValue {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null
+);
+
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  }
+  return context;
+};
+
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }: ChainOfThoughtProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+
+    return (
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+        <div className={cn("not-prose w-full space-y-4", className)} {...props}>
+          {children}
+        </div>
+      </ChainOfThoughtContext.Provider>
+    );
+  }
+);
+
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+>;
+
+export const ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+
+    return (
+      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+        <CollapsibleTrigger
+          className={cn(
+            "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+            className
+          )}
+          {...props}
+        >
+          <BrainIcon className="size-4" />
+          <span className="flex-1 text-left">
+            {children ?? "Chain of Thought"}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 transition-transform",
+              isOpen ? "rotate-180" : "rotate-0"
+            )}
+          />
+        </CollapsibleTrigger>
+      </Collapsible>
+    );
+  }
+);
+
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+  icon?: LucideIcon;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+
+export const ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }: ChainOfThoughtStepProps) => {
+    const statusStyles = {
+      complete: "text-muted-foreground",
+      active: "text-foreground",
+      pending: "text-muted-foreground/50",
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex gap-2 text-sm",
+          statusStyles[status],
+          "fade-in-0 slide-in-from-top-2 animate-in",
+          className
+        )}
+        {...props}
+      >
+        <div className="relative mt-0.5">
+          <Icon className="size-4" />
+          <div className="absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" />
+        </div>
+        <div className="flex-1 space-y-2 overflow-hidden">
+          <div>{label}</div>
+          {description && (
+            <div className="text-muted-foreground text-xs">{description}</div>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+    <div
+      className={cn("flex flex-wrap items-center gap-2", className)}
+      {...props}
+    />
+  )
+);
+
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+
+export const ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
+    <Badge
+      className={cn("gap-1 px-2 py-0.5 font-normal text-xs", className)}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Badge>
+  )
+);
+
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const ChainOfThoughtContent = memo(
+  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
+    const { isOpen } = useChainOfThought();
+
+    return (
+      <Collapsible open={isOpen}>
+        <CollapsibleContent
+          className={cn(
+            "mt-2 space-y-3",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+);
+
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+  caption?: string;
+};
+
+export const ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
+      <div className="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
+        {children}
+      </div>
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
+    </div>
+  )
+);
+
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { BookmarkIcon, type LucideProps } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+
+export const Checkpoint = ({
+  className,
+  children,
+  ...props
+}: CheckpointProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-0.5 overflow-hidden text-muted-foreground",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Separator />
+  </div>
+);
+
+export type CheckpointIconProps = LucideProps;
+
+export const CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}: CheckpointIconProps) =>
+  children ?? (
+    <BookmarkIcon className={cn("size-4 shrink-0", className)} {...props} />
+  );
+
+export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const CheckpointTrigger = ({
+  children,
+  className,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}: CheckpointTriggerProps) =>
+  tooltip ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size={size} type="button" variant={variant} {...props}>
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent align="start" side="bottom">
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+    </Button>
+  );