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

package/src/components/ai-elements/web-preview.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+export interface WebPreviewContextValue {
+  url: string;
+  setUrl: (url: string) => void;
+  consoleOpen: boolean;
+  setConsoleOpen: (open: boolean) => void;
+}
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+
+const useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+  defaultUrl?: string;
+  onUrlChange?: (url: string) => void;
+};
+
+export const WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}: WebPreviewProps) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+
+  const handleUrlChange = (newUrl: string) => {
+    setUrl(newUrl);
+    onUrlChange?.(newUrl);
+  };
+
+  const contextValue: WebPreviewContextValue = {
+    url,
+    setUrl: handleUrlChange,
+    consoleOpen,
+    setConsoleOpen,
+  };
+
+  return (
+    <WebPreviewContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex size-full flex-col rounded-lg border bg-card",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </WebPreviewContext.Provider>
+  );
+};
+
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+
+export const WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}: WebPreviewNavigationProps) => (
+  <div
+    className={cn("flex items-center gap-1 border-b p-2", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}: WebPreviewNavigationButtonProps) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className="h-8 w-8 p-0 hover:text-foreground"
+          disabled={disabled}
+          onClick={onClick}
+          size="sm"
+          variant="ghost"
+          {...props}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+
+export const WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}: WebPreviewUrlProps) => {
+  const { url, setUrl } = useWebPreview();
+  const [inputValue, setInputValue] = useState(url);
+
+  // Sync input value with context URL when it changes externally
+  useEffect(() => {
+    setInputValue(url);
+  }, [url]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      const target = event.target as HTMLInputElement;
+      setUrl(target.value);
+    }
+    onKeyDown?.(event);
+  };
+
+  return (
+    <Input
+      className="h-8 flex-1 text-sm"
+      onChange={onChange ?? handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Enter URL..."
+      value={value ?? inputValue}
+      {...props}
+    />
+  );
+};
+
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+  loading?: ReactNode;
+};
+
+export const WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}: WebPreviewBodyProps) => {
+  const { url } = useWebPreview();
+
+  return (
+    <div className="flex-1">
+      <iframe
+        className={cn("size-full", className)}
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        src={(src ?? url) || undefined}
+        title="Preview"
+        {...props}
+      />
+      {loading}
+    </div>
+  );
+};
+
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+  logs?: Array<{
+    level: "log" | "warn" | "error";
+    message: string;
+    timestamp: Date;
+  }>;
+};
+
+export const WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}: WebPreviewConsoleProps) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+
+  return (
+    <Collapsible
+      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      onOpenChange={setConsoleOpen}
+      open={consoleOpen}
+      {...props}
+    >
+      <CollapsibleTrigger asChild>
+        <Button
+          className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
+          variant="ghost"
+        >
+          Console
+          <ChevronDownIcon
+            className={cn(
+              "h-4 w-4 transition-transform duration-200",
+              consoleOpen && "rotate-180"
+            )}
+          />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        className={cn(
+          "px-4 pb-4",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+        )}
+      >
+        <div className="max-h-48 space-y-1 overflow-y-auto">
+          {logs.length === 0 ? (
+            <p className="text-muted-foreground">No console output</p>
+          ) : (
+            logs.map((log, index) => (
+              <div
+                className={cn(
+                  "text-xs",
+                  log.level === "error" && "text-destructive",
+                  log.level === "warn" && "text-yellow-600",
+                  log.level === "log" && "text-foreground"
+                )}
+                key={`${log.timestamp.getTime()}-${index}`}
+              >
+                <span className="text-muted-foreground">
+                  {log.timestamp.toLocaleTimeString()}
+                </span>{" "}
+                {log.message}
+              </div>
+            ))
+          )}
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/components/chat/Chat.tsx

@@ -0,0 +1,178 @@
+import { Input } from "./Input";
+import { useChat } from "@cloudbase/agent-react-core";
+import { ChatMessage } from "./Message";
+import { v4 as uuidv4 } from "uuid";
+import { LocaleContext, type LocaleCode, useLocale } from "@/locales";
+import { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+
+export interface AgKitUIProps {
+  /** Optional class name for the container */
+  className?: string;
+  /** Optional extra class name for the root container */
+  containerClassName?: string;
+  /** Optional class name for the message list container */
+  messagesClassName?: string;
+  /** Optional class name for the input wrapper */
+  inputClassName?: string;
+  /** Optional class name for the empty title */
+  emptyTitleClassName?: string;
+  /** Optional placeholder for the input */
+  inputPlaceholder?: string;
+  /** Optional suggested prompts shown above input when chat is empty */
+  suggestions?: string[];
+  /** Optional callback when a suggestion is clicked */
+  onSuggestionClick?: (suggestion: string) => void;
+  /** Optional locale code for built-in UI copy */
+  locale?: LocaleCode;
+}
+
+export function AgKitUI({
+  className = "h-full min-h-0 mx-auto max-w-225 flex flex-col overflow-hidden px-4",
+  containerClassName,
+  messagesClassName,
+  inputClassName,
+  emptyTitleClassName,
+  inputPlaceholder,
+  suggestions,
+  onSuggestionClick,
+  locale = "zh-CN",
+}: AgKitUIProps) {
+  const contextValue = useMemo(() => ({ locale }), [locale]);
+
+  return (
+    <LocaleContext.Provider value={contextValue}>
+      <AgKitUIContent
+        className={className}
+        containerClassName={containerClassName}
+        messagesClassName={messagesClassName}
+        inputClassName={inputClassName}
+        emptyTitleClassName={emptyTitleClassName}
+        inputPlaceholder={inputPlaceholder}
+        suggestions={suggestions}
+        onSuggestionClick={onSuggestionClick}
+      />
+    </LocaleContext.Provider>
+  );
+}
+
+interface AgKitUIContentProps {
+  className?: string;
+  containerClassName?: string;
+  messagesClassName?: string;
+  inputClassName?: string;
+  emptyTitleClassName?: string;
+  inputPlaceholder?: string;
+  suggestions?: string[];
+  onSuggestionClick?: (suggestion: string) => void;
+}
+
+function AgKitUIContent({
+  className,
+  containerClassName,
+  messagesClassName,
+  inputClassName,
+  emptyTitleClassName,
+  inputPlaceholder,
+  suggestions,
+  onSuggestionClick,
+}: AgKitUIContentProps) {
+  const { locale } = useLocale("chat");
+  const { uiMessages, streaming, sendMessage, actions, abort } = useChat();
+
+  // Handle tool response
+  const handleRespond = (toolCallId: string, result: string) => {
+    sendMessage({
+      id: uuidv4(),
+      role: "tool",
+      content: result,
+      toolCallId,
+    });
+  };
+
+  const visibleMessages = uiMessages.filter(
+    (message) => message.role === "user" || message.role === "assistant"
+  );
+  const isEmpty = visibleMessages.length === 0;
+
+  const inputNode = (
+    <div className={inputClassName}>
+      {isEmpty && suggestions && suggestions.length > 0 && (
+        <Suggestions className="mb-3">
+          {suggestions
+            .map((suggestion) => suggestion.trim())
+            .filter(Boolean)
+            .map((suggestion, index) => (
+              <Suggestion
+                key={`${suggestion}-${index}`}
+                suggestion={suggestion}
+                variant="ghost"
+                className="max-w-full border border-border/80 text-muted-foreground"
+                disabled={streaming}
+                onClick={(value) => {
+                  onSuggestionClick?.(value);
+                  sendMessage(value);
+                }}
+              />
+            ))}
+        </Suggestions>
+      )}
+      <Input
+        placeholder={inputPlaceholder}
+        streaming={streaming}
+        onStop={() => {
+          if (!streaming) return;
+          abort();
+        }}
+        onSend={(message) => {
+          sendMessage(message.text);
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "bg-background text-foreground h-full min-h-0 w-full",
+        containerClassName
+      )}
+    >
+      <div className={cn(className)}>
+        {isEmpty ? (
+          <div className="flex min-h-0 flex-1 items-center justify-center">
+            <div className="w-full">
+              <div
+                className={cn(
+                  "mb-5 text-center text-xl font-medium text-foreground",
+                  emptyTitleClassName
+                )}
+              >
+                {locale.emptyTitle}
+              </div>
+              {inputNode}
+            </div>
+          </div>
+        ) : (
+          <>
+            <div
+              className={cn(
+                "min-h-0 flex-1 overflow-y-auto py-4",
+                messagesClassName
+              )}
+            >
+              <ChatMessage
+                messages={uiMessages}
+                isLoading={streaming}
+                actions={actions}
+                onRespond={handleRespond}
+              />
+            </div>
+            {inputNode}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/Input.tsx

@@ -0,0 +1,98 @@
+import {
+  Attachment,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+} from "@/components/ai-elements/attachments";
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputFooter,
+  type PromptInputMessage,
+  PromptInputProvider,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+  usePromptInputAttachments,
+} from "@/components/ai-elements/prompt-input";
+import { useLocale } from "@/locales";
+
+export interface InputProps {
+  onSend?: (message: PromptInputMessage) => void;
+  onStop?: () => void;
+  placeholder?: string;
+  streaming?: boolean;
+}
+
+const PromptInputAttachmentsDisplay = () => {
+  const attachments = usePromptInputAttachments();
+
+  if (attachments.files.length === 0) {
+    return null;
+  }
+
+  return (
+    <Attachments variant="inline">
+      {attachments.files.map((attachment) => (
+        <Attachment
+          data={attachment}
+          key={attachment.id}
+          onRemove={() => attachments.remove(attachment.id)}
+        >
+          <AttachmentPreview />
+          <AttachmentRemove />
+        </Attachment>
+      ))}
+    </Attachments>
+  );
+};
+
+export function Input({
+  onSend,
+  onStop,
+  placeholder,
+  streaming = false,
+}: InputProps) {
+  const { locale } = useLocale("input");
+  const status: "submitted" | "streaming" | "ready" | "error" = streaming
+    ? "streaming"
+    : "ready";
+
+  const handleSubmit = (message: PromptInputMessage) => {
+    const text = message.text.trim();
+    const hasText = Boolean(text);
+    const hasAttachments = Boolean(message.files?.length);
+
+    if (!(hasText || hasAttachments)) {
+      return;
+    }
+
+    // Trigger onSend callback when submitting message
+    onSend?.({
+      ...message,
+      text,
+    });
+  };
+
+  return (
+    <div className="pb-4">
+      <PromptInputProvider>
+        <PromptInput globalDrop multiple onSubmit={handleSubmit}>
+          <PromptInputAttachmentsDisplay />
+          <PromptInputBody>
+            <PromptInputTextarea
+              placeholder={placeholder ?? locale.placeholder}
+            />
+          </PromptInputBody>
+          <PromptInputFooter>
+            <PromptInputTools></PromptInputTools>
+            <PromptInputSubmit status={status} onStop={onStop} />
+          </PromptInputFooter>
+        </PromptInput>
+        <div className="text-center text-xs opacity-50 mt-3">
+          {locale.disclaimer}
+        </div>
+      </PromptInputProvider>
+    </div>
+  );
+}