@cloudbase/agent-react-ui 0.0.23

package/example/App.tsx

@@ -0,0 +1,368 @@
+import { AgKitUI, type LocaleCode } from "..";
+import {
+  AgKit,
+  CloudBaseTransport,
+  type ToolCallState,
+  useChat,
+  useClientTool,
+  useToolCall,
+} from "@cloudbase/agent-react-core";
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "@/components/ai-elements/confirmation";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { z } from "zod";
+import cloudbase from "@cloudbase/js-sdk";
+import { useEffect, useRef, useState } from "react";
+import "../dist/index.css";
+import "./app.css";
+
+const app = cloudbase.init({
+  env: import.meta.env.VITE_ENV,
+});
+
+app.auth.signInAnonymously();
+
+// Create transport
+const transport = new CloudBaseTransport({
+  app,
+  agentId: import.meta.env.VITE_AGENT_ID,
+});
+
+const randomNameParameters = z
+  .object({
+    count: z.number().optional(),
+  })
+  .toJSONSchema();
+
+const weatherParameters = z
+  .object({
+    city: z.string().optional(),
+  })
+  .toJSONSchema();
+
+const languageParameters = z
+  .object({
+    locale: z.string().optional(),
+  })
+  .toJSONSchema();
+
+const themeParameters = z
+  .object({
+    theme: z.string().optional(),
+  })
+  .toJSONSchema();
+
+type ThemeMode = "light" | "dark";
+
+function normalizeLocale(value: unknown, fallback: LocaleCode): LocaleCode {
+  const normalized = String(value ?? "")
+    .trim()
+    .toLowerCase();
+  if (normalized === "en" || normalized === "en-us") {
+    return "en-US";
+  }
+  if (normalized === "zh" || normalized === "zh-cn") {
+    return "zh-CN";
+  }
+  return fallback;
+}
+
+function normalizeTheme(value: unknown, fallback: ThemeMode): ThemeMode {
+  const normalized = String(value ?? "")
+    .trim()
+    .toLowerCase();
+  if (normalized === "dark") return "dark";
+  if (normalized === "light") return "light";
+  if (normalized === "toggle") return fallback === "dark" ? "light" : "dark";
+  return fallback;
+}
+
+interface ThemeSwitchConfirmationProps {
+  toolCall: ToolCallState;
+  isDark: boolean;
+  setIsDark: (value: boolean) => void;
+  respond: (result: string) => void;
+}
+
+function ThemeSwitchConfirmation({
+  toolCall,
+  isDark,
+  setIsDark,
+  respond,
+}: ThemeSwitchConfirmationProps) {
+  const [state, setState] = useState<
+    "approval-requested" | "approval-responded"
+  >("approval-requested");
+  const [approved, setApproved] = useState<boolean | undefined>(undefined);
+  const requestedTheme = normalizeTheme(
+    toolCall.args?.theme,
+    isDark ? "dark" : "light"
+  );
+  const nextIsDark = requestedTheme === "dark";
+  const nextThemeLabel = nextIsDark ? "Dark" : "Light";
+
+  return (
+    <Confirmation
+      approval={{ id: toolCall.toolCallId, approved }}
+      state={state as any}
+      className="bg-muted/30"
+    >
+      <ConfirmationTitle>
+        Theme switch requested: {nextThemeLabel} mode
+      </ConfirmationTitle>
+      <ConfirmationRequest>
+        <div className="text-sm text-muted-foreground">
+          Do you want to apply this theme change?
+        </div>
+      </ConfirmationRequest>
+      <ConfirmationActions>
+        <ConfirmationAction
+          variant="outline"
+          disabled={state !== "approval-requested"}
+          onClick={() => {
+            setApproved(false);
+            setState("approval-responded");
+            respond(
+              JSON.stringify({
+                success: false,
+                cancelled: true,
+                currentTheme: isDark ? "dark" : "light",
+              })
+            );
+          }}
+        >
+          Cancel
+        </ConfirmationAction>
+        <ConfirmationAction
+          disabled={state !== "approval-requested"}
+          onClick={() => {
+            setIsDark(nextIsDark);
+            setApproved(true);
+            setState("approval-responded");
+            respond(
+              JSON.stringify({
+                success: true,
+                theme: nextIsDark ? "dark" : "light",
+              })
+            );
+          }}
+        >
+          Confirm
+        </ConfirmationAction>
+      </ConfirmationActions>
+      <ConfirmationAccepted>
+        <div className="text-sm text-muted-foreground">
+          Theme changed to {nextThemeLabel} mode.
+        </div>
+      </ConfirmationAccepted>
+      <ConfirmationRejected>
+        <div className="text-sm text-muted-foreground">
+          Theme switch cancelled.
+        </div>
+      </ConfirmationRejected>
+    </Confirmation>
+  );
+}
+
+interface ExampleToolRegistrationsProps {
+  locale: LocaleCode;
+  setLocale: (locale: LocaleCode) => void;
+  isDark: boolean;
+  setIsDark: (value: boolean) => void;
+}
+
+function ExampleToolRegistrations({
+  locale,
+  setLocale,
+  isDark,
+  setIsDark,
+}: ExampleToolRegistrationsProps) {
+  useClientTool({
+    name: "generate_random_name",
+    description: "Generate a random name",
+    parameters: randomNameParameters,
+    handler: ({ args }) => {
+      const count = Number(args.count ?? 1);
+      const names = ["John", "Emma", "Olivia", "Liam", "Noah"];
+      return Array.from({ length: Math.max(1, count) })
+        .map((_, index) => names[index % names.length])
+        .join(", ");
+    },
+  });
+
+  useClientTool({
+    name: "get_local_weather",
+    description: "Get local weather for a city",
+    parameters: weatherParameters,
+    handler: ({ args }) => {
+      const city = String(args.city || "Shanghai");
+      return JSON.stringify({
+        city,
+        weather: "sunny",
+        temperature: "26C",
+      });
+    },
+  });
+
+  useClientTool({
+    name: "switch_language",
+    description: "Switch the UI language locale to zh-CN or en-US",
+    parameters: languageParameters,
+    handler: ({ args }) => {
+      const nextLocale = normalizeLocale(args.locale, locale);
+      setLocale(nextLocale);
+      return JSON.stringify({
+        success: true,
+        locale: nextLocale,
+      });
+    },
+  });
+
+  useClientTool({
+    name: "switch_theme",
+    description: "Switch UI theme.",
+    parameters: themeParameters,
+  });
+
+  useToolCall({
+    name: "get_local_weather",
+    render: ({ toolCall }) => (
+      <div className="rounded-md border bg-muted/40 p-3 text-sm">
+        <div className="font-medium">Custom Weather Tool Renderer</div>
+        <div className="mt-1 text-muted-foreground">
+          Params: {JSON.stringify(toolCall.args || {})}
+        </div>
+        {toolCall.result !== undefined && (
+          <div className="mt-2">
+            Result:{" "}
+            <span className="font-medium">{String(toolCall.result)}</span>
+          </div>
+        )}
+      </div>
+    ),
+  });
+
+  useToolCall({
+    name: "switch_theme",
+    render: ({ toolCall, respond }) => (
+      <ThemeSwitchConfirmation
+        toolCall={toolCall}
+        isDark={isDark}
+        setIsDark={setIsDark}
+        respond={respond}
+      />
+    ),
+  });
+
+  return null;
+}
+
+// External component demonstrating useChat access
+interface ExternalControlsProps {
+  locale: LocaleCode;
+  onLocaleChange: (nextLocale: LocaleCode) => void;
+  isDark: boolean;
+  onToggleTheme: () => void;
+}
+
+function ExternalControls({
+  locale,
+  onLocaleChange,
+  isDark,
+  onToggleTheme,
+}: ExternalControlsProps) {
+  const { uiMessages, streaming, sendMessage } = useChat();
+
+  return (
+    <div className="p-4 border-b border-border bg-background flex items-center justify-between">
+      <span className="text-sm text-muted-foreground">
+        Messages: {uiMessages.length} | {streaming ? "Streaming..." : "Ready"}
+      </span>
+      <div className="flex items-center gap-2">
+        <Select
+          value={locale}
+          onValueChange={(value) => onLocaleChange(value as LocaleCode)}
+        >
+          <SelectTrigger className="w-28 bg-background text-foreground border-border">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent className="bg-background text-foreground border-border">
+            <SelectItem value="zh-CN">中文</SelectItem>
+            <SelectItem value="en-US">English</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button
+          variant="outline"
+          className="bg-background text-foreground border-border"
+          onClick={onToggleTheme}
+        >
+          {isDark ? "Dark" : "Light"}
+        </Button>
+        <Button onClick={() => sendMessage("Hello from external button!")}>
+          Send from outside
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function App() {
+  const [locale, setLocale] = useState<LocaleCode>("zh-CN");
+  const [isDark, setIsDark] = useState(false);
+  const threadId = useRef(`threadId_${Date.now()}`);
+  const suggestions =
+    locale === "zh-CN"
+      ? ["切换到英文界面", "请切换到深色模式", "帮我查一下上海天气"]
+      : [
+          "Switch UI language to Chinese",
+          "Please switch to dark mode",
+          "Check weather in Shanghai",
+        ];
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", isDark);
+    return () => {
+      document.documentElement.classList.remove("dark");
+    };
+  }, [isDark]);
+
+  return (
+    <AgKit transport={transport} defaultThreadId={threadId.current}>
+      <div className="h-screen w-screen flex flex-col">
+        <ExampleToolRegistrations
+          locale={locale}
+          setLocale={setLocale}
+          isDark={isDark}
+          setIsDark={setIsDark}
+        />
+
+        {/* External component using useChat - shares the same state */}
+        <ExternalControls
+          locale={locale}
+          onLocaleChange={setLocale}
+          isDark={isDark}
+          onToggleTheme={() => setIsDark((prev) => !prev)}
+        />
+
+        {/* Main chat component */}
+        <div className="flex-1 max-h-[calc(100vh-60px)]">
+          <AgKitUI locale={locale} suggestions={suggestions} />
+        </div>
+      </div>
+    </AgKit>
+  );
+}

package/example/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/example/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/example/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/example/vite.config.ts

@@ -0,0 +1,34 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite'
+
+const ROOT_DIR = resolve(__dirname);
+
+export default defineConfig({
+  root: ROOT_DIR,
+  base: '/AgKitUI',
+
+  server: {
+    host: true,
+    port: 2024,
+    open: false,
+  },
+
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+
+  resolve: {
+    alias: {
+      '@': resolve(ROOT_DIR, '../src'),
+    },
+  },
+
+  build: {
+    target: 'es2018',
+    emptyOutDir: true,
+    outDir: resolve(ROOT_DIR, 'dist'),
+  },
+});

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@cloudbase/agent-react-ui",
+  "version": "0.0.23",
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "types": "./dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@rive-app/react-webgl2": "^4.26.2",
+    "@streamdown/cjk": "^1.0.1",
+    "@streamdown/code": "^1.0.1",
+    "@streamdown/math": "^1.0.1",
+    "@streamdown/mermaid": "^1.0.1",
+    "@xyflow/react": "^12.10.0",
+    "ai": "^5.0.108",
+    "ai-elements": "^1.8.2",
+    "ansi-to-react": "^6.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^0.544.0",
+    "media-chrome": "^4.17.2",
+    "motion": "^12.23.25",
+    "nanoid": "^5.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.0",
+    "shiki": "^3.22.0",
+    "streamdown": "^1.6.10",
+    "tailwind-merge": "^3.4.0",
+    "tokenlens": "^1.3.1",
+    "tw-animate-css": "^1.4.0",
+    "use-stick-to-bottom": "^1.1.1",
+    "uuid": "^13.0.0",
+    "vite": "^7.3.1",
+    "zod": "^4.3.6",
+    "@cloudbase/agent-react-core": "^0.0.23"
+  },
+  "devDependencies": {
+    "@cloudbase/js-sdk": "^2.25.4",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.22",
+    "postcss": "^8.5.6",
+    "react-dom": "19.2.0",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.1",
+    "zustand": "^5.0.11"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "dev": "tsup --watch --config tsup.config.ts",
+    "build": "tsup --config tsup.config.ts",
+    "example:dev": "vite --config example/vite.config.ts",
+    "example:build": "vite build --config example/vite.config.ts",
+    "example:preview": "vite preview --config example/vite.config.ts"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("@tailwindcss/postcss")(), require("autoprefixer")()],
+};

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

@@ -0,0 +1,140 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import type { Tool } from "ai";
+import { BotIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { memo } from "react";
+import { CodeBlock } from "./code-block";
+
+export type AgentProps = ComponentProps<"div">;
+
+export const Agent = memo(({ className, ...props }: AgentProps) => (
+  <div
+    className={cn("not-prose w-full rounded-md border", className)}
+    {...props}
+  />
+));
+
+export type AgentHeaderProps = ComponentProps<"div"> & {
+  name: string;
+  model?: string;
+};
+
+export const AgentHeader = memo(
+  ({ className, name, model, ...props }: AgentHeaderProps) => (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-4 p-3",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        <BotIcon className="size-4 text-muted-foreground" />
+        <span className="font-medium text-sm">{name}</span>
+        {model && (
+          <Badge className="font-mono text-xs" variant="secondary">
+            {model}
+          </Badge>
+        )}
+      </div>
+    </div>
+  )
+);
+
+export type AgentContentProps = ComponentProps<"div">;
+
+export const AgentContent = memo(
+  ({ className, ...props }: AgentContentProps) => (
+    <div className={cn("space-y-4 p-4 pt-0", className)} {...props} />
+  )
+);
+
+export type AgentInstructionsProps = ComponentProps<"div"> & {
+  children: string;
+};
+
+export const AgentInstructions = memo(
+  ({ className, children, ...props }: AgentInstructionsProps) => (
+    <div className={cn("space-y-2", className)} {...props}>
+      <span className="font-medium text-muted-foreground text-sm">
+        Instructions
+      </span>
+      <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-sm">
+        <p>{children}</p>
+      </div>
+    </div>
+  )
+);
+
+export type AgentToolsProps = ComponentProps<typeof Accordion>;
+
+export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (
+  <div className={cn("space-y-2", className)}>
+    <span className="font-medium text-muted-foreground text-sm">Tools</span>
+    <Accordion className="rounded-md border" {...props} />
+  </div>
+));
+
+export type AgentToolProps = ComponentProps<typeof AccordionItem> & {
+  tool: Tool;
+};
+
+export const AgentTool = memo(
+  ({ className, tool, value, ...props }: AgentToolProps) => {
+    const schema =
+      "jsonSchema" in tool && tool.jsonSchema
+        ? tool.jsonSchema
+        : tool.inputSchema;
+
+    return (
+      <AccordionItem
+        className={cn("border-b last:border-b-0", className)}
+        value={value}
+        {...props}
+      >
+        <AccordionTrigger className="px-3 py-2 text-sm hover:no-underline">
+          {tool.description ?? "No description"}
+        </AccordionTrigger>
+        <AccordionContent className="px-3 pb-3">
+          <div className="rounded-md bg-muted/50">
+            <CodeBlock code={JSON.stringify(schema, null, 2)} language="json" />
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+);
+
+export type AgentOutputProps = ComponentProps<"div"> & {
+  schema: string;
+};
+
+export const AgentOutput = memo(
+  ({ className, schema, ...props }: AgentOutputProps) => (
+    <div className={cn("space-y-2", className)} {...props}>
+      <span className="font-medium text-muted-foreground text-sm">
+        Output Schema
+      </span>
+      <div className="rounded-md bg-muted/50">
+        <CodeBlock code={schema} language="typescript" />
+      </div>
+    </div>
+  )
+);
+
+Agent.displayName = "Agent";
+AgentHeader.displayName = "AgentHeader";
+AgentContent.displayName = "AgentContent";
+AgentInstructions.displayName = "AgentInstructions";
+AgentTools.displayName = "AgentTools";
+AgentTool.displayName = "AgentTool";
+AgentOutput.displayName = "AgentOutput";