@21st-sdk/react 0.1.2 → 0.1.4

package/src/create-an-chat.ts

@@ -1,6 +1,6 @@
 import { Chat } from "@ai-sdk/react"
 import { DefaultChatTransport, type UIMessage } from "ai"
-import type { CreateAnChatOptions } from "./types"
+import type { CreateAgentChatOptions } from "./types"
 
 const DEFAULT_API_URL = "https://relay.an.dev"
 
@@ -29,8 +29,8 @@ function createTokenFetcher(tokenUrl: string, agent: string) {
   }
 }
 
-/** Create an AI SDK Chat instance pointed at the AN Relay API */
-export function createAnChat(options: CreateAnChatOptions): Chat<UIMessage> {
+/** Create an AI SDK Chat instance pointed at the relay API */
+export function createAgentChat(options: CreateAgentChatOptions): Chat<UIMessage> {
   const {
     agent,
     tokenUrl,
@@ -44,7 +44,7 @@ export function createAnChat(options: CreateAnChatOptions): Chat<UIMessage> {
 
   const getToken = getTokenFn || (tokenUrl ? createTokenFetcher(tokenUrl, agent) : null)
   if (!getToken) {
-    throw new Error("createAnChat: provide either tokenUrl or getToken")
+    throw new Error("createAgentChat: provide either tokenUrl or getToken")
   }
 
   return new Chat({
@@ -64,3 +64,6 @@ export function createAnChat(options: CreateAnChatOptions): Chat<UIMessage> {
     onError,
   })
 }
+
+// Legacy factory alias kept for compatibility.
+export const createAnChat = createAgentChat

package/src/index.ts

@@ -1,8 +1,8 @@
 // Main drop-in component
-export { AnAgentChat } from "./an-agent-chat"
+export { AgentChat, AnAgentChat } from "./an-agent-chat"
 
 // Chat factory
-export { createAnChat } from "./create-an-chat"
+export { createAgentChat, createAnChat } from "./create-an-chat"
 
 // Theme
 export { applyTheme } from "./theme"
@@ -71,11 +71,17 @@ export { FileExtIcon } from "./icons/file-ext-icon"
 export { PaperclipIcon } from "./icons/shared-icons"
 
 // Models
-export { AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from "./models"
-export type { AnClaudeModelId } from "./models"
+export { CLAUDE_MODELS, DEFAULT_MODEL_ID, AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from "./models"
+export type { ClaudeModelId, AnClaudeModelId } from "./models"
 
 // Types
 export type {
+  ChatTheme,
+  ChatClassNames,
+  ChatSlots,
+  ModelOption,
+  CreateAgentChatOptions,
+  AgentChatProps,
   AnTheme,
   AnClassNames,
   AnSlots,
@@ -84,7 +90,7 @@ export type {
   AnAgentChatProps,
   CustomToolRendererProps,
 } from "./types"
-export type { AnThemeConfig } from "./theme-config"
+export type { ChatThemeConfig, AnThemeConfig } from "./theme-config"
 export type { TimelineStep, StepState } from "./types/timeline"
 export type { ToolSize } from "./types/tool-styles"
 export type { SourceType } from "./icons/source-icons"

package/src/models.ts

@@ -1,14 +1,19 @@
-import type { AnModelOption } from "./types"
+import type { ModelOption } from "./types"
 
-/** Claude model IDs supported by the AN relay */
-export type AnClaudeModelId = "opus" | "sonnet" | "haiku"
+/** Claude model IDs supported by the relay */
+export type ClaudeModelId = "opus" | "sonnet" | "haiku"
 
-/** Pre-defined Claude models available through AN */
-export const AN_CLAUDE_MODELS: AnModelOption[] = [
+/** Pre-defined Claude models available through the relay */
+export const CLAUDE_MODELS: ModelOption[] = [
   { id: "sonnet", name: "Sonnet", version: "4.6" },
   { id: "opus", name: "Opus", version: "4.6" },
   { id: "haiku", name: "Haiku", version: "4.5" },
 ]
 
 /** Default model ID */
-export const AN_DEFAULT_MODEL_ID: AnClaudeModelId = "sonnet"
+export const DEFAULT_MODEL_ID: ClaudeModelId = "sonnet"
+
+// Legacy model aliases kept for compatibility.
+export type AnClaudeModelId = ClaudeModelId
+export const AN_CLAUDE_MODELS = CLAUDE_MODELS
+export const AN_DEFAULT_MODEL_ID = DEFAULT_MODEL_ID

package/src/theme-config.ts

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from "react"
-import type { AnTheme } from "./types"
+import type { ChatTheme } from "./types"
 
-export interface AnThemeConfig {
+export interface ChatThemeConfig {
   messageStyle: "bubble-right" | "full-width"
   messageDensity: "relaxed" | "compact" | "dense"
   inputStyle: "rounded" | "flat" | "bordered"
@@ -31,7 +31,10 @@ export interface AnThemeConfig {
   attachmentPreviewStyle: "thumbnail" | "chip" | "hidden"
 }
 
-export const DEFAULT_THEME_CONFIG: AnThemeConfig = {
+// Legacy type alias kept for compatibility.
+export type AnThemeConfig = ChatThemeConfig
+
+export const DEFAULT_THEME_CONFIG: ChatThemeConfig = {
   messageStyle: "bubble-right",
   messageDensity: "relaxed",
   inputStyle: "bordered",
@@ -95,7 +98,7 @@ function readEnum<T extends string>(
   return fallback
 }
 
-export function extractThemeConfig(theme?: AnTheme): AnThemeConfig {
+export function extractThemeConfig(theme?: ChatTheme): ChatThemeConfig {
   if (!theme?.theme) return DEFAULT_THEME_CONFIG
   const t = theme.theme
 
@@ -130,8 +133,8 @@ export function extractThemeConfig(theme?: AnTheme): AnThemeConfig {
   }
 }
 
-export const ThemeConfigContext = createContext<AnThemeConfig>(DEFAULT_THEME_CONFIG)
+export const ThemeConfigContext = createContext<ChatThemeConfig>(DEFAULT_THEME_CONFIG)
 
-export function useThemeConfig(): AnThemeConfig {
+export function useThemeConfig(): ChatThemeConfig {
   return useContext(ThemeConfigContext)
 }

package/src/theme.ts

@@ -1,4 +1,4 @@
-import type { AnTheme } from "./types"
+import type { ChatTheme } from "./types"
 import { contrastText } from "./utils/contrast"
 
 export type ResolvedColorMode = "light" | "dark"
@@ -16,7 +16,7 @@ export function resolveColorMode(
 /** Apply theme CSS variables from playground JSON to a DOM element */
 export function applyTheme(
   element: HTMLElement,
-  theme: AnTheme,
+  theme: ChatTheme,
   colorMode: "light" | "dark" | "auto" = "auto",
 ) {
   // Apply shared vars

package/src/tools/tool-router.ts

@@ -1,9 +1,9 @@
 import type { TimelineStep, StepState } from "../types/timeline"
 import type { ToolSize } from "../types/tool-styles"
-import type { AnThemeConfig } from "../theme-config"
+import type { ChatThemeConfig } from "../theme-config"
 import React from "react"
 
-export function resolveToolSize(config: AnThemeConfig): ToolSize {
+export function resolveToolSize(config: ChatThemeConfig): ToolSize {
   return config.toolCallStyle === "compact" ? "compact" : "normal"
 }
 
@@ -16,7 +16,7 @@ function routeToolCall(
   step: Extract<TimelineStep, { type: "tool-call" }>,
   state: StepState,
   onComplete: () => void,
-  config: AnThemeConfig,
+  config: ChatThemeConfig,
   actionIndex: number,
 ): React.ReactNode {
   // Lazy imports to prevent circular dependency issues

package/src/types.ts

@@ -1,15 +1,15 @@
 import type React from "react"
 import type { UIMessage, ChatStatus } from "ai"
 
-/** Theme JSON generated by the AN playground */
-export interface AnTheme {
+/** Theme JSON generated by the playground */
+export interface ChatTheme {
   theme: Record<string, string>
   light: Record<string, string>
   dark: Record<string, string>
 }
 
 /** Per-element CSS class overrides */
-export interface AnClassNames {
+export interface ChatClassNames {
   root: string
   messageList: string
   userMessage: string
@@ -28,7 +28,7 @@ export interface AnClassNames {
 }
 
 /** Component slot overrides */
-export interface AnSlots {
+export interface ChatSlots {
   InputBar: React.ComponentType<any>
   UserMessage: React.ComponentType<any>
   AssistantMessage: React.ComponentType<any>
@@ -36,8 +36,8 @@ export interface AnSlots {
   MessageActions: React.ComponentType<any>
 }
 
-/** Props for createAnChat() */
-export interface CreateAnChatOptions {
+/** Props for createAgentChat() */
+export interface CreateAgentChatOptions {
   agent: string
   /** Provide either tokenUrl (simple) or getToken (full control) */
   tokenUrl?: string
@@ -54,10 +54,10 @@ export interface CreateAnChatOptions {
    *
    * @example
    * // Per-user sandbox
-   * createAnChat({ agent: "my-agent", tokenUrl: "/api/an/token", sandboxId: `user-${userId}` })
+   * createAgentChat({ agent: "my-agent", tokenUrl: "/api/an/token", sandboxId: `user-${userId}` })
    *
    * // Continue existing sandbox
-   * createAnChat({ agent: "my-agent", tokenUrl: "/api/an/token", sandboxId: sandbox.id })
+   * createAgentChat({ agent: "my-agent", tokenUrl: "/api/an/token", sandboxId: sandbox.id })
    */
   sandboxId?: string
   /**
@@ -78,25 +78,25 @@ export interface CustomToolRendererProps {
 }
 
 /** A model option for the model selector */
-export interface AnModelOption {
+export interface ModelOption {
   id: string
   name: string
   version?: string
 }
 
-/** Props for the <AnAgentChat> drop-in component */
-export interface AnAgentChatProps {
+/** Props for the <AgentChat> drop-in component */
+export interface AgentChatProps {
   messages: UIMessage[]
   onSend: (message: { role: "user"; content: string }) => void
   status: ChatStatus
   onStop: () => void
   error?: Error
 
-  theme?: AnTheme
+  theme?: ChatTheme
   colorMode?: "light" | "dark" | "auto"
 
-  classNames?: Partial<AnClassNames>
-  slots?: Partial<AnSlots>
+  classNames?: Partial<ChatClassNames>
+  slots?: Partial<ChatSlots>
   toolRenderers?: Record<string, React.ComponentType<CustomToolRendererProps>>
 
   /** Show window chrome header (traffic lights + agent indicator) */
@@ -104,7 +104,7 @@ export interface AnAgentChatProps {
 
   /** Model selector configuration */
   modelSelector?: {
-    models: AnModelOption[]
+    models: ModelOption[]
     activeModelId?: string
     onModelChange?: (id: string) => void
     display?: "popover" | "badge"
@@ -133,3 +133,11 @@ export interface AnAgentChatProps {
   className?: string
   style?: React.CSSProperties
 }
+
+// Legacy type aliases kept for compatibility.
+export type AnTheme = ChatTheme
+export type AnClassNames = ChatClassNames
+export type AnSlots = ChatSlots
+export type CreateAnChatOptions = CreateAgentChatOptions
+export type AnModelOption = ModelOption
+export type AnAgentChatProps = AgentChatProps

package/styles/index.css

@@ -0,0 +1,161 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * AN Agent Chat - CSS Custom Properties
+ * These are the default values. Consumers override via <AnAgentChat theme={...} />
+ * which calls applyTheme() to set these vars on the root element.
+ */
+:root, .an-root {
+  /* Typography */
+  --an-font-family: system-ui, sans-serif;
+  --an-text-size: 14px;
+  --an-text-size-sm: 13px;
+  --an-text-size-xs: 11px;
+  --an-line-height: 1.6;
+  --an-font-weight: 400;
+  --an-font-weight-medium: 500;
+  --an-font-weight-semibold: 600;
+
+  /* Geometry — all radii derive from --an-border-radius */
+  --an-border-radius: 16px;
+  --an-message-border-radius: var(--an-border-radius);
+  --an-input-border-radius: var(--an-border-radius);
+  --an-tool-border-radius: var(--an-border-radius);
+  --an-code-border-radius: var(--an-border-radius);
+
+  /* Layout — --an-message-gap is intentionally unset; density config provides the default */
+  --an-user-message-padding: 10px 14px;
+  --an-input-padding: 12px 16px;
+
+  /* Sizes */
+  --an-send-button-size: 32px;
+  --an-stop-button-size: 32px;
+  --an-send-button-border-radius: 9999px;
+
+  /* Colors - Light mode defaults */
+  --an-background: #ffffff;
+  --an-background-secondary: #f5f5f5;
+  --an-background-tertiary: #fafafa;
+  --an-foreground: #1a1a1a;
+  --an-foreground-muted: #737373;
+  --an-foreground-subtle: #a3a3a3;
+  --an-border-color: #e5e5e5;
+  --an-border-color-light: #f0f0f0;
+  --an-primary-color: #3b82f6;
+
+  /* User Messages */
+  --an-user-message-bg: #f5f5f5;
+  --an-user-message-text: #1a1a1a;
+
+  /* Input */
+  --an-input-background: #ffffff;
+  --an-input-border-color: #e5e5e5;
+  --an-input-color: #1a1a1a;
+  --an-input-placeholder-color: #a3a3a3;
+
+  /* Send/Stop Buttons */
+  --an-send-button-bg: #3b82f6;
+  --an-send-button-color: #ffffff;
+  --an-stop-button-bg: #1a1a1a;
+  --an-stop-button-color: #ffffff;
+
+  /* Tools */
+  --an-tool-background: #fafafa;
+  --an-tool-border-color: #e5e5e5;
+  --an-tool-color: #1a1a1a;
+  --an-tool-color-muted: #737373;
+
+  /* Code */
+  --an-code-background: #1e1e1e;
+  --an-code-color: #d4d4d4;
+  --an-code-font-family: ui-monospace, monospace;
+  --an-code-font-size: 13px;
+
+  /* Diff colors */
+  --an-diff-added-bg: rgba(34, 197, 94, 0.1);
+  --an-diff-added-border: rgba(34, 197, 94, 0.5);
+  --an-diff-added-text: #15803d;
+  --an-diff-removed-bg: rgba(239, 68, 68, 0.1);
+  --an-diff-removed-border: rgba(239, 68, 68, 0.5);
+  --an-diff-removed-text: #dc2626;
+}
+
+/* Dark mode defaults */
+.dark, .an-root.dark, .dark .an-root {
+  --an-background: #0a0a0a;
+  --an-background-secondary: #1a1a1a;
+  --an-background-tertiary: #141414;
+  --an-foreground: #fafafa;
+  --an-foreground-muted: #a3a3a3;
+  --an-foreground-subtle: #71717a;
+  --an-border-color: #2a2a2a;
+  --an-border-color-light: #1f1f1f;
+  --an-primary-color: #60a5fa;
+
+  --an-user-message-bg: #1a1a1a;
+  --an-user-message-text: #fafafa;
+
+  --an-input-background: #0a0a0a;
+  --an-input-border-color: #2a2a2a;
+  --an-input-color: #fafafa;
+  --an-input-placeholder-color: #71717a;
+
+  --an-send-button-bg: #60a5fa;
+  --an-send-button-color: #ffffff;
+  --an-stop-button-bg: #fafafa;
+  --an-stop-button-color: #0a0a0a;
+
+  --an-tool-background: #141414;
+  --an-tool-border-color: #2a2a2a;
+  --an-tool-color: #fafafa;
+  --an-tool-color-muted: #a3a3a3;
+
+  --an-code-background: #0a0a0a;
+  --an-code-color: #d4d4d4;
+
+  --an-diff-added-bg: rgba(34, 197, 94, 0.15);
+  --an-diff-added-border: rgba(34, 197, 94, 0.4);
+  --an-diff-added-text: #4ade80;
+  --an-diff-removed-bg: rgba(239, 68, 68, 0.15);
+  --an-diff-removed-border: rgba(239, 68, 68, 0.4);
+  --an-diff-removed-text: #f87171;
+}
+
+/* TextShimmer animation */
+@keyframes an-shimmer {
+  from { background-position: 100% center; }
+  to { background-position: 0% center; }
+}
+
+.an-text-shimmer {
+  display: inline-block;
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  background-image:
+    linear-gradient(90deg, transparent calc(50% - var(--an-shimmer-spread, 100px)), var(--an-foreground-muted, #737373), transparent calc(50% + var(--an-shimmer-spread, 100px))),
+    linear-gradient(var(--an-foreground-subtle, #a3a3a3), var(--an-foreground-subtle, #a3a3a3));
+  background-repeat: no-repeat, padding-box;
+}
+
+.an-text-shimmer--active {
+  animation: an-shimmer var(--an-shimmer-duration, 2s) linear infinite;
+}
+
+/* Scrollbar hide utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Spinner animation */
+@keyframes an-spinner-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}