@cloudbase/agent-react-ui 0.0.23

package/src/css/global.css

@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/css/index.css

@@ -0,0 +1 @@
+@import "./global.css";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-copy-to-clipboard";

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,31 @@
+import { useState } from "react";
+
+export interface useCopyToClipboardProps {
+  timeout?: number;
+}
+
+export function useCopyToClipboard({
+  timeout = 2000,
+}: useCopyToClipboardProps = {}) {
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
+      return;
+    }
+
+    if (!value) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import "./css/index.css";
+
+export { AgKitUI, type AgKitUIProps } from "./components";
+export { type LocaleCode } from "./locales";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/locales/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { LocaleCode } from "./langs";
+
+export type LocaleContextProps = { locale: LocaleCode };
+
+export const LocaleContext = createContext<LocaleContextProps>({
+  locale: "zh-CN",
+});

package/src/locales/hooks.ts

@@ -0,0 +1,20 @@
+import { useContext, useMemo } from "react";
+import { Locale, LocaleCode, LocaleComponentName, locales } from "./langs";
+import { LocaleContext } from "./context";
+
+export function useLocale(): { locale: Locale; localeCode: LocaleCode };
+export function useLocale<T extends LocaleComponentName>(
+  name: T
+): { locale: Locale[T]; localeCode: LocaleCode };
+export function useLocale<T extends LocaleComponentName>(
+  name?: T
+): { locale: Locale | Locale[T]; localeCode: LocaleCode } {
+  const { locale: localeCode } = useContext(LocaleContext);
+
+  const locale = useMemo(() => {
+    const fullLocale = locales[localeCode] ?? locales["zh-CN"];
+    return name ? fullLocale[name] : fullLocale;
+  }, [localeCode, name]);
+
+  return { locale: locale as any, localeCode };
+}

package/src/locales/index.ts

@@ -0,0 +1,3 @@
+export * from "./context";
+export * from "./hooks";
+export * from "./langs";

package/src/locales/langs/en.ts

@@ -0,0 +1,17 @@
+import type { Locale } from ".";
+
+export const en: Locale = {
+  chat: {
+    emptyTitle: "How can I help you?",
+  },
+  input: {
+    placeholder: "Type your message...",
+    disclaimer: "AI-generated content, for reference only",
+  },
+  message: {
+    copy: "Copy",
+    copied: "Copied!",
+    copyToClipboard: "Copy to clipboard",
+    paused: "Generation paused",
+  },
+};

package/src/locales/langs/index.ts

@@ -0,0 +1,12 @@
+import type { Locale, LocaleComponentName } from "./zh-cn";
+import { zhCN } from "./zh-cn";
+import { en } from "./en";
+
+export { Locale, LocaleComponentName };
+
+export const locales = {
+  "zh-CN": zhCN,
+  "en-US": en,
+};
+
+export type LocaleCode = keyof typeof locales;

package/src/locales/langs/zh-cn.ts

@@ -0,0 +1,18 @@
+export const zhCN = {
+  chat: {
+    emptyTitle: "有什么我可以帮到你？",
+  },
+  input: {
+    placeholder: "请输入消息...",
+    disclaimer: "内容由 AI 生成，仅供参考",
+  },
+  message: {
+    copy: "复制",
+    copied: "已复制",
+    copyToClipboard: "复制",
+    paused: "已暂停生成",
+  },
+};
+
+export type Locale = typeof zhCN;
+export type LocaleComponentName = keyof Locale;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*", "example/**/*"],
+  "exclude": ["dist", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  outDir: "dist",
+  dts: {
+    compilerOptions: {
+      jsx: "react-jsx",
+      moduleResolution: "bundler",
+      baseUrl: ".",
+      paths: {
+        "@/*": ["./src/*"]
+      }
+    }
+  },
+  format: ["esm", "cjs"],
+  sourcemap: true,
+  clean: true,
+  tsconfig: "tsconfig.json",
+  external: ["react", "react-dom", "zustand"],
+});