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

package/src/components/chat/Message.tsx

@@ -0,0 +1,276 @@
+import {
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { memo, type ReactElement, type SVGProps } from "react";
+import { type UIMessage, type ToolPart, type Action } from "@cloudbase/agent-react-core";
+import { useLocale } from "@/locales";
+
+interface CopyActionProps {
+  content: string;
+}
+
+const CopyAction = memo(({ content }: CopyActionProps) => {
+  const { locale } = useLocale("message");
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+  return (
+    <MessageAction
+      label={locale.copy}
+      onClick={() => copyToClipboard(content)}
+      tooltip={isCopied ? locale.copied : locale.copyToClipboard}
+    >
+      {isCopied ? (
+        <CheckIcon className="size-4" />
+      ) : (
+        <CopyIcon className="size-4" />
+      )}
+    </MessageAction>
+  );
+});
+
+CopyAction.displayName = "CopyAction";
+
+// Map ToolCallStatus to Tool component state
+const mapToolStatus = (status: ToolPart["status"]) => {
+  const statusMap: Record<
+    ToolPart["status"],
+    "input-streaming" | "input-available" | "output-available" | "output-error"
+  > = {
+    pending: "input-streaming",
+    ready: "input-available",
+    executing: "input-available",
+    completed: "output-available",
+    failed: "output-error",
+  };
+  return statusMap[status];
+};
+
+interface ToolCallRendererProps {
+  toolPart: ToolPart;
+  actions?: Record<string, Action>;
+  onRespond?: (toolCallId: string, result: string) => void;
+}
+
+const ToolCallRenderer = memo(
+  ({ toolPart, actions, onRespond }: ToolCallRendererProps) => {
+    // Check if there's a custom render function for this tool
+    const action = actions?.[toolPart.name];
+
+    if (
+      action &&
+      ((action.type === "client-tool" && action.render) ||
+        action.type === "tool-call")
+    ) {
+      const respond = (result: string) => {
+        onRespond?.(toolPart.toolCallId, result);
+      };
+      const render = action.render;
+      const rendered = render?.({
+        toolCall: toolPart,
+        respond,
+      });
+      if (typeof rendered === "string") {
+        return <div>{rendered}</div>;
+      }
+      return rendered as ReactElement;
+    }
+
+    // Default Tool component rendering
+    const state = mapToolStatus(toolPart.status);
+
+    return (
+      <Tool>
+        <ToolHeader
+          type="dynamic-tool"
+          state={state}
+          toolName={toolPart.name}
+        />
+        <ToolContent>
+          <ToolInput input={toolPart.args} />
+          {(toolPart.status === "completed" ||
+            toolPart.status === "failed") && (
+            <ToolOutput
+              output={toolPart.result}
+              errorText={toolPart.error?.message}
+            />
+          )}
+        </ToolContent>
+      </Tool>
+    );
+  }
+);
+
+ToolCallRenderer.displayName = "ToolCallRenderer";
+
+export interface ChatMessageProps {
+  messages: UIMessage[];
+  isLoading?: boolean;
+  actions?: Record<string, Action>;
+  onRespond?: (toolCallId: string, result: string) => void;
+}
+
+export function ChatMessage({
+  messages,
+  isLoading = false,
+  actions,
+  onRespond,
+}: ChatMessageProps) {
+  const { locale } = useLocale("message");
+  const visibleMessages = messages.filter(
+    (message) => message.role === "user" || message.role === "assistant"
+  );
+  const lastVisibleMessage = visibleMessages[visibleMessages.length - 1];
+  const shouldRenderAssistantPlaceholder =
+    isLoading && (!lastVisibleMessage || lastVisibleMessage.role === "user");
+
+  return (
+    <div className="flex flex-col gap-4">
+      {visibleMessages.map((message) => {
+        const role = message.role as "user" | "assistant";
+        const isLoadingAssistantMessage =
+          isLoading &&
+          role === "assistant" &&
+          message.id === lastVisibleMessage?.id;
+
+        // Get all text content for copy action
+        const allTextContent = message.parts
+          .filter((part) => part.type === "text")
+          .map((part) => (part as { type: "text"; text: string }).text)
+          .join("");
+        const hasAssistantText =
+          role === "assistant" && allTextContent.trim().length > 0;
+        const isPausedAssistantNoText =
+          role === "assistant" && Boolean(message.paused) && !hasAssistantText;
+        const copyContent =
+          allTextContent || (isPausedAssistantNoText ? locale.paused : "");
+
+        return (
+          <Message from={role} key={message.id}>
+            {/* Render parts in order */}
+            {message.parts.map((part) => {
+              if (part.type === "text") {
+                const textPart = part as {
+                  type: "text";
+                  text: string;
+                  id: string;
+                };
+                return (
+                  <MessageContent key={textPart.id}>
+                    {role === "assistant" ? (
+                      <MessageResponse>{textPart.text}</MessageResponse>
+                    ) : (
+                      textPart.text
+                    )}
+                  </MessageContent>
+                );
+              }
+
+              if (part.type === "tool") {
+                const toolPart = part as ToolPart;
+                return (
+                  <ToolCallRenderer
+                    key={toolPart.id}
+                    toolPart={toolPart}
+                    actions={actions}
+                    onRespond={onRespond}
+                  />
+                );
+              }
+
+              return null;
+            })}
+
+            {/* Loading state for the active assistant message */}
+            {isLoadingAssistantMessage && (
+              <MessageContent>
+                <div className="inline-flex items-center text-muted-foreground">
+                  <SvgSpinners3DotsFade className="text-xl" />
+                </div>
+              </MessageContent>
+            )}
+
+            {isPausedAssistantNoText && !isLoadingAssistantMessage && (
+              <MessageContent>
+                <div className="text-muted-foreground">{locale.paused}</div>
+              </MessageContent>
+            )}
+
+            {/* Copy action for assistant messages with text */}
+            {role === "assistant" &&
+              copyContent &&
+              !isLoadingAssistantMessage && (
+                <MessageActions>
+                  <CopyAction content={copyContent} />
+                </MessageActions>
+              )}
+          </Message>
+        );
+      })}
+
+      {shouldRenderAssistantPlaceholder && (
+        <Message from="assistant">
+          <MessageContent>
+            <div className="inline-flex items-center text-muted-foreground">
+              <SvgSpinners3DotsFade className="text-xl" />
+            </div>
+          </MessageContent>
+        </Message>
+      )}
+    </div>
+  );
+}
+
+export function SvgSpinners3DotsFade(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle cx="4" cy="12" r="3" fill="currentColor">
+        <animate
+          id="dotFadeFirst"
+          fill="freeze"
+          attributeName="opacity"
+          begin="0;dotFadeThird.end-0.25s"
+          dur="0.75s"
+          values="1;.2"
+        />
+      </circle>
+      <circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4">
+        <animate
+          fill="freeze"
+          attributeName="opacity"
+          begin="dotFadeFirst.begin+0.15s"
+          dur="0.75s"
+          values="1;.2"
+        />
+      </circle>
+      <circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3">
+        <animate
+          id="dotFadeThird"
+          fill="freeze"
+          attributeName="opacity"
+          begin="dotFadeFirst.begin+0.3s"
+          dur="0.75s"
+          values="1;.2"
+        />
+      </circle>
+    </svg>
+  );
+}

package/src/components/chat/index.ts

@@ -0,0 +1,2 @@
+export * from "./Chat";
+export * from "./Input";

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./chat";

package/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg";
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};