Customization

import { ARCYProvider } from "@arcyai/sdk"
import type { ArcyCustomization } from "@arcyai/sdk"
import logo from "./logo.svg"

const customization: ArcyCustomization = {
  theme: {
    logo,
    primaryColor: "#2563eb",
    borderRadius: 20,
    glassiness: 40,
    initialPosition: "bottom-right",
  },
  elements: {
    chatInput: { className: "my-input-style" },
    sendButton: { className: "my-button-style" },
  },
  content: {
    assistantName: "Arc",
    chatPlaceholder: "Ask Arc anything...",
    greetingMessage: "Hi! Ask me anything about this app.",
  },
  modes: {
    enabled: ["chat", "copilot", "autopilot"],
  },
  limits: {
    copilot: { max: 10, windowMs: 86400000 }, // Copilot mode's limit
    maxCreditsPerUser: { max: 500, windowMs: 2592000000 }, // 500 credits per 30 days, shared by all three capabilities including Chat
  },
}

export default function RootLayout({ children }) {
  return (
    <ARCYProvider publicKey={(process.env.NEXT_PUBLIC_ARCY_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_ARCY_TEST_PUBLISHABLE_KEY)!} customization={customization}>
      {children}
    </ARCYProvider>
  )
}

import logo from "./logo.svg"

const customization: ArcyCustomization = {
  theme: {
    logo, // or a hosted URL string: "https://example.com/logo.png"
    logoWidth: 32,
    logoHeight: 32,
    primaryColor: "#2563eb",
    highlightColor: "#f59e0b",
    borderWidth: 1,
    borderColor: "#3f3f46",
    borderRadius: 20,
    backgroundColor: "#18181b",
    glassiness: 40,
    textColor: "#f0f0f0",
    scrollbarThumbColor: "#52525b",
    scrollbarThumbHoverColor: "#71717a",
    scrollbarTrackColor: "transparent",
    scrollbarWidth: 6,
    fontFamily: "'Inter', sans-serif",
    zIndex: 2147483000,
    draggable: false,
    initialPosition: "bottom-left",
    buttonSize: 56,
  },
}

const customization: ArcyCustomization = {
  elements: {
    launcherButton: { className: "my-fab-style" },
    panelContainer: { style: { fontFamily: "inherit" } },
    chatInput: { className: "my-input-style" },
    sendButton: { className: "my-button-style" },
    messageBubbleUser: { className: "my-user-bubble" },
    messageBubbleAssistant: { className: "my-assistant-bubble" },
  },
}

const customization: ArcyCustomization = {
  content: {
    assistantName: "Arc",
    chatPlaceholder: "Ask Arc anything...",
    greetingMessage: "Hi! Ask me anything about this app.",
  },
}

const customization: ArcyCustomization = {
  modes: {
    enabled: ["chat", "copilot", "autopilot"],
  },
}

const customization: ArcyCustomization = {
  limits: {
    copilot: { max: 10, windowMs: 86400000 },
    autopilot: { max: 5, windowMs: 86400000 },
    maxCreditsPerUser: { max: 500, windowMs: 2592000000 }, // 500 credits per 30 days
  },
}

interface ArcyThemeConfig {
  logo?: string | { src: string }
  logoWidth?: number   // px, applies at both render sites; unset falls back to that site's default
  logoHeight?: number  // px, applies at both render sites; unset falls back to that site's default
  primaryColor?: string
  highlightColor?: string
  borderWidth?: number      // px, 0-8
  borderColor?: string      // hex
  borderRadius?: number     // px, 0-32
  backgroundColor?: string  // hex, composes with glassiness
  glassiness?: number       // 0-100
  textColor?: string        // hex
  scrollbarThumbColor?: string       // hex
  scrollbarThumbHoverColor?: string  // hex, Chromium/Safari only
  scrollbarTrackColor?: string       // hex
  scrollbarWidth?: number            // px, 2-16
  fontFamily?: string
  zIndex?: number
  containerRef?: React.RefObject<HTMLElement | null>
  draggable?: boolean
  initialPosition?:
    | "bottom-right"
    | "bottom-left"
    | "top-right"
    | "top-left"
    | "bottom-center"
    | "top-center"
    | "left-center"
    | "right-center"
  buttonSize?: number  // px, 40-120, defaults to 76
}

interface ArcyElementOverride {
  className?: string
  style?: React.CSSProperties
}

type ArcyElementKey =
  | "launcherButton"
  | "launcherWrapper"
  | "panelContainer"
  | "panelHeader"
  | "panelCloseButton"
  | "chatInput"
  | "sendButton"
  | "messageBubbleUser"
  | "messageBubbleAssistant"
  | "historyList"
  | "interventionPrompt"
  | "coachmark"
  | "toast"

type ArcyElementsConfig = Partial<Record<ArcyElementKey, ArcyElementOverride>>

interface ArcyContentConfig {
  greetingMessage?: string
  assistantName?: string     // defaults to "ARCY"
  chatPlaceholder?: string   // defaults to "Ask {assistantName} anything..."
}

type ArcyCapability = "chat" | "autopilot" | "copilot"

interface ArcyModesConfig {
  enabled?: ArcyCapability[]
}

interface ArcyLimitConfig {
  max: number
  windowMs: number  // duration in milliseconds
}

interface ArcyLimitsConfig {
  autopilot?: ArcyLimitConfig
  copilot?: ArcyLimitConfig
  maxCreditsPerUser?: ArcyLimitConfig
}

interface ArcyCustomization {
  theme?: ArcyThemeConfig
  elements?: ArcyElementsConfig
  content?: ArcyContentConfig
  modes?: ArcyModesConfig
  limits?: ArcyLimitsConfig
}