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

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

@@ -0,0 +1,274 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export interface QueueMessagePart {
+  type: string;
+  text?: string;
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+}
+
+export interface QueueMessage {
+  id: string;
+  parts: QueueMessagePart[];
+}
+
+export interface QueueTodo {
+  id: string;
+  title: string;
+  description?: string;
+  status?: "pending" | "completed";
+}
+
+export type QueueItemProps = ComponentProps<"li">;
+
+export const QueueItem = ({ className, ...props }: QueueItemProps) => (
+  <li
+    className={cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemIndicatorProps) => (
+  <span
+    className={cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed
+        ? "border-muted-foreground/20 bg-muted-foreground/10"
+        : "border-muted-foreground/50",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemContentProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemContentProps) => (
+  <span
+    className={cn(
+      "line-clamp-1 grow break-words",
+      completed
+        ? "text-muted-foreground/50 line-through"
+        : "text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemDescriptionProps = ComponentProps<"div"> & {
+  completed?: boolean;
+};
+
+export const QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemDescriptionProps) => (
+  <div
+    className={cn(
+      "ml-6 text-xs",
+      completed
+        ? "text-muted-foreground/40 line-through"
+        : "text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemActionsProps = ComponentProps<"div">;
+
+export const QueueItemActions = ({
+  className,
+  ...props
+}: QueueItemActionsProps) => (
+  <div className={cn("flex gap-1", className)} {...props} />
+);
+
+export type QueueItemActionProps = Omit<
+  ComponentProps<typeof Button>,
+  "variant" | "size"
+>;
+
+export const QueueItemAction = ({
+  className,
+  ...props
+}: QueueItemActionProps) => (
+  <Button
+    className={cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    )}
+    size="icon"
+    type="button"
+    variant="ghost"
+    {...props}
+  />
+);
+
+export type QueueItemAttachmentProps = ComponentProps<"div">;
+
+export const QueueItemAttachment = ({
+  className,
+  ...props
+}: QueueItemAttachmentProps) => (
+  <div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
+);
+
+export type QueueItemImageProps = ComponentProps<"img">;
+
+export const QueueItemImage = ({
+  className,
+  ...props
+}: QueueItemImageProps) => (
+  <img
+    alt=""
+    className={cn("h-8 w-8 rounded border object-cover", className)}
+    height={32}
+    width={32}
+    {...props}
+  />
+);
+
+export type QueueItemFileProps = ComponentProps<"span">;
+
+export const QueueItemFile = ({
+  children,
+  className,
+  ...props
+}: QueueItemFileProps) => (
+  <span
+    className={cn(
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
+    )}
+    {...props}
+  >
+    <PaperclipIcon size={12} />
+    <span className="max-w-[100px] truncate">{children}</span>
+  </span>
+);
+
+export type QueueListProps = ComponentProps<typeof ScrollArea>;
+
+export const QueueList = ({
+  children,
+  className,
+  ...props
+}: QueueListProps) => (
+  <ScrollArea className={cn("mt-2 -mb-1", className)} {...props}>
+    <div className="max-h-40 pr-4">
+      <ul>{children}</ul>
+    </div>
+  </ScrollArea>
+);
+
+// QueueSection - collapsible section container
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+
+export const QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}: QueueSectionProps) => (
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+);
+
+// QueueSectionTrigger - section header/trigger
+export type QueueSectionTriggerProps = ComponentProps<"button">;
+
+export const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}: QueueSectionTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <button
+      className={cn(
+        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+        className
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  </CollapsibleTrigger>
+);
+
+// QueueSectionLabel - label content with icon and count
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+  count?: number;
+  label: string;
+  icon?: React.ReactNode;
+};
+
+export const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}: QueueSectionLabelProps) => (
+  <span className={cn("flex items-center gap-2", className)} {...props}>
+    <ChevronDownIcon className="size-4 transition-transform group-data-[state=closed]:-rotate-90" />
+    {icon}
+    <span>
+      {count} {label}
+    </span>
+  </span>
+);
+
+// QueueSectionContent - collapsible content area
+export type QueueSectionContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const QueueSectionContent = ({
+  className,
+  ...props
+}: QueueSectionContentProps) => (
+  <CollapsibleContent className={cn(className)} {...props} />
+);
+
+export type QueueProps = ComponentProps<"div">;
+
+export const Queue = ({ className, ...props }: QueueProps) => (
+  <div
+    className={cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    )}
+    {...props}
+  />
+);

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

@@ -0,0 +1,193 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+import { Shimmer } from "./shimmer";
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+      prop: durationProp,
+      defaultProp: undefined,
+    });
+
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [startTime, setStartTime] = useState<number | null>(null);
+
+    // Track duration when streaming starts and ends
+    useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+
+    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+        // Add a small delay before closing to allow user to see the content
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+
+    const handleOpenChange = (newOpen: boolean) => {
+      setIsOpen(newOpen);
+    };
+
+    return (
+      <ReasoningContext.Provider
+        value={{ isStreaming, isOpen, setIsOpen, duration }}
+      >
+        <Collapsible
+          className={cn("not-prose mb-4", className)}
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  }
+);
+
+export type ReasoningTriggerProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+
+export const ReasoningTrigger = memo(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  }
+);
+
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: string;
+};
+
+export const ReasoningContent = memo(
+  ({ className, children, ...props }: ReasoningContentProps) => (
+    <CollapsibleContent
+      className={cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      )}
+      {...props}
+    >
+      <Streamdown plugins={{ code, mermaid, math, cjk }} {...props}>
+        {children}
+      </Streamdown>
+    </CollapsibleContent>
+  )
+);
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";

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

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import type { ToolUIPart } from "ai";
+import { ChevronDownIcon, Code } from "lucide-react";
+import type { ComponentProps } from "react";
+import { getStatusBadge } from "./tool";
+
+export type SandboxRootProps = ComponentProps<typeof Collapsible>;
+
+export const Sandbox = ({ className, ...props }: SandboxRootProps) => (
+  <Collapsible
+    className={cn(
+      "not-prose group mb-4 w-full overflow-hidden rounded-md border",
+      className
+    )}
+    defaultOpen
+    {...props}
+  />
+);
+
+export interface SandboxHeaderProps {
+  title?: string;
+  state: ToolUIPart["state"];
+  className?: string;
+}
+
+export const SandboxHeader = ({
+  className,
+  title,
+  state,
+  ...props
+}: SandboxHeaderProps) => (
+  <CollapsibleTrigger
+    className={cn(
+      "flex w-full items-center justify-between gap-4 p-3",
+      className
+    )}
+    {...props}
+  >
+    <div className="flex items-center gap-2">
+      <Code className="size-4 text-muted-foreground" />
+      <span className="font-medium text-sm">{title}</span>
+      {getStatusBadge(state)}
+    </div>
+    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+  </CollapsibleTrigger>
+);
+
+export type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SandboxContent = ({
+  className,
+  ...props
+}: SandboxContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type SandboxTabsProps = ComponentProps<typeof Tabs>;
+
+export const SandboxTabs = ({ className, ...props }: SandboxTabsProps) => (
+  <Tabs className={cn("w-full gap-0", className)} {...props} />
+);
+
+export type SandboxTabsBarProps = ComponentProps<"div">;
+
+export const SandboxTabsBar = ({
+  className,
+  ...props
+}: SandboxTabsBarProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center border-border border-t border-b",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type SandboxTabsListProps = ComponentProps<typeof TabsList>;
+
+export const SandboxTabsList = ({
+  className,
+  ...props
+}: SandboxTabsListProps) => (
+  <TabsList
+    className={cn("h-auto rounded-none border-0 bg-transparent p-0", className)}
+    {...props}
+  />
+);
+
+export type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
+
+export const SandboxTabsTrigger = ({
+  className,
+  ...props
+}: SandboxTabsTriggerProps) => (
+  <TabsTrigger
+    className={cn(
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
+
+export const SandboxTabContent = ({
+  className,
+  ...props
+}: SandboxTabContentProps) => (
+  <TabsContent className={cn("mt-0 text-sm", className)} {...props} />
+);