npm - @chaaskit/client - Versions diffs - 0.1.0 → 0.1.1 - Mend

@chaaskit/client 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/lib/index.js +53 -80
package/dist/lib/index.js.map +1 -1
package/dist/lib/routes/AcceptInviteRoute.js +1 -1
package/dist/lib/routes/AcceptInviteRoute.js.map +1 -1
package/dist/lib/routes/AdminDashboardRoute.js +1 -1
package/dist/lib/routes/AdminDashboardRoute.js.map +1 -1
package/dist/lib/routes/AdminTeamRoute.js +1 -1
package/dist/lib/routes/AdminTeamRoute.js.map +1 -1
package/dist/lib/routes/AdminTeamsRoute.js +1 -1
package/dist/lib/routes/AdminTeamsRoute.js.map +1 -1
package/dist/lib/routes/AdminUsersRoute.js +1 -1
package/dist/lib/routes/AdminUsersRoute.js.map +1 -1
package/dist/lib/routes/ApiKeysRoute.js +1 -1
package/dist/lib/routes/ApiKeysRoute.js.map +1 -1
package/dist/lib/routes/AutomationsRoute.js +1 -1
package/dist/lib/routes/AutomationsRoute.js.map +1 -1
package/dist/lib/routes/ChatRoute.js +1 -1
package/dist/lib/routes/ChatRoute.js.map +1 -1
package/dist/lib/routes/DocumentsRoute.js +1 -1
package/dist/lib/routes/DocumentsRoute.js.map +1 -1
package/dist/lib/routes/OAuthConsentRoute.js +1 -1
package/dist/lib/routes/OAuthConsentRoute.js.map +1 -1
package/dist/lib/routes/PricingRoute.js +1 -1
package/dist/lib/routes/PricingRoute.js.map +1 -1
package/dist/lib/routes/PrivacyRoute.js +1 -1
package/dist/lib/routes/PrivacyRoute.js.map +1 -1
package/dist/lib/routes/TeamSettingsRoute.js +1 -1
package/dist/lib/routes/TeamSettingsRoute.js.map +1 -1
package/dist/lib/routes/TermsRoute.js +1 -1
package/dist/lib/routes/TermsRoute.js.map +1 -1
package/dist/lib/routes/VerifyEmailRoute.js +1 -1
package/dist/lib/routes/VerifyEmailRoute.js.map +1 -1
package/dist/lib/ssr-utils.js +44 -1
package/dist/lib/ssr-utils.js.map +1 -1
package/dist/lib/ssr.js +23 -0
package/dist/lib/ssr.js.map +1 -1
package/dist/lib/styles.css +21 -62
package/package.json +7 -2
package/src/contexts/ConfigContext.tsx +42 -4
package/src/contexts/ThemeContext.tsx +39 -68
package/src/index.tsx +8 -2
package/src/routes/AcceptInviteRoute.tsx +1 -1
package/src/routes/AdminDashboardRoute.tsx +1 -1
package/src/routes/AdminTeamRoute.tsx +1 -1
package/src/routes/AdminTeamsRoute.tsx +1 -1
package/src/routes/AdminUsersRoute.tsx +1 -1
package/src/routes/ApiKeysRoute.tsx +1 -1
package/src/routes/AutomationsRoute.tsx +1 -1
package/src/routes/ChatRoute.tsx +2 -1
package/src/routes/DocumentsRoute.tsx +1 -1
package/src/routes/OAuthConsentRoute.tsx +1 -1
package/src/routes/PricingRoute.tsx +1 -1
package/src/routes/PrivacyRoute.tsx +1 -1
package/src/routes/TeamSettingsRoute.tsx +1 -1
package/src/routes/TermsRoute.tsx +1 -1
package/src/routes/VerifyEmailRoute.tsx +1 -1
package/src/ssr-utils.tsx +80 -1
package/src/ssr.ts +59 -0
package/src/styles/index.css +16 -63
package/src/tailwind-preset.js +360 -0

package/src/contexts/ConfigContext.tsx CHANGED Viewed

@@ -1,6 +1,25 @@
 import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
 import type { AppConfig } from '@chaaskit/shared';
+// Declare global window property for SSR-injected config
+declare global {
+  interface Window {
+    __CHAASKIT_CONFIG__?: AppConfig;
+  }
+}
+/**
+ * Get config injected via ConfigScript in the HTML head.
+ * This allows the config to be available immediately on page load,
+ * avoiding flash of default values.
+ */
+function getInjectedConfig(): AppConfig | undefined {
+  if (typeof window !== 'undefined' && window.__CHAASKIT_CONFIG__) {
+    return window.__CHAASKIT_CONFIG__;
+  }
+  return undefined;
+}
 // Default config - used as fallback while loading
 const defaultConfig: AppConfig = {
   app: {
@@ -173,11 +192,30 @@ const ConfigContext = createContext<ConfigContextValue>({
   configLoaded: false,
 });
-export function ConfigProvider({ children }: { children: ReactNode }) {
-  const [config, setConfig] = useState<AppConfig>(defaultConfig);
-  const [configLoaded, setConfigLoaded] = useState(false);
+interface ConfigProviderProps {
+  children: ReactNode;
+  /**
+   * Initial config to use immediately, avoiding a flash of default values.
+   * If provided, the config will not be fetched from /api/config.
+   * Useful when config is available from SSR loaders.
+   */
+  initialConfig?: AppConfig;
+}
+export function ConfigProvider({ children, initialConfig }: ConfigProviderProps) {
+  // Priority: 1. initialConfig prop, 2. injected window config, 3. defaults + fetch
+  const injectedConfig = getInjectedConfig();
+  const preloadedConfig = initialConfig || injectedConfig;
+  const [config, setConfig] = useState<AppConfig>(
+    preloadedConfig ? { ...defaultConfig, ...preloadedConfig } : defaultConfig
+  );
+  const [configLoaded, setConfigLoaded] = useState(!!preloadedConfig);
   useEffect(() => {
+    // Skip fetching if we have preloaded config
+    if (preloadedConfig) return;
     async function loadConfig() {
       try {
         const response = await fetch('/api/config');
@@ -196,7 +234,7 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
       }
     }
     loadConfig();
-  }, []);
+  }, [preloadedConfig]);
   return (
     <ConfigContext.Provider value={{ config, configLoaded }}>

package/src/contexts/ThemeContext.tsx CHANGED Viewed

@@ -5,7 +5,6 @@ import {
   useEffect,
   type ReactNode,
 } from 'react';
-import { useConfig } from './ConfigContext';
 interface ThemeContextType {
   theme: string;
@@ -15,73 +14,56 @@ interface ThemeContextType {
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-export function ThemeProvider({ children }: { children: ReactNode }) {
-  const config = useConfig();
+/**
+ * Default available themes.
+ * Apps can override this via the ThemeProvider's availableThemes prop.
+ */
+const DEFAULT_THEMES = ['light', 'dark'];
+const DEFAULT_THEME = 'dark';
+interface ThemeProviderProps {
+  children: ReactNode;
+  /** Available theme names. Defaults to ['light', 'dark'] */
+  availableThemes?: string[];
+  /** Default theme if none stored. Defaults to 'dark' */
+  defaultTheme?: string;
+}
+/**
+ * ThemeProvider manages the current theme via data-theme attribute.
+ *
+ * Theme CSS variables should be defined in your Tailwind config using
+ * html[data-theme="themeName"] selectors. This provider only manages:
+ * - The data-theme attribute on <html>
+ * - localStorage persistence
+ * - Cookie sync for SSR
+ */
+export function ThemeProvider({
+  children,
+  availableThemes = DEFAULT_THEMES,
+  defaultTheme = DEFAULT_THEME,
+}: ThemeProviderProps) {
   const [theme, setThemeState] = useState(() => {
-    // Check localStorage first, then config default
-    const stored = localStorage.getItem('theme');
-    if (stored && config.theming.themes[stored]) {
-      return stored;
+    // Check localStorage first, then use default
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('theme');
+      if (stored && availableThemes.includes(stored)) {
+        return stored;
+      }
     }
-    return config.theming.defaultTheme;
+    return defaultTheme;
   });
-  const availableThemes = Object.keys(config.theming.themes);
   useEffect(() => {
-    // Apply theme to document
+    // Set data-theme attribute - CSS selectors handle the actual styling
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
     // Set cookie for SSR to read
     document.cookie = `theme=${theme};path=/;max-age=31536000;SameSite=Lax`;
-    // Apply theme colors as CSS variables
-    const themeConfig = config.theming.themes[theme];
-    if (themeConfig) {
-      const root = document.documentElement;
-      const colors = themeConfig.colors;
-      // Convert hex colors to RGB values
-      Object.entries(colors).forEach(([key, value]) => {
-        const cssKey = `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
-        const rgb = hexToRgb(value);
-        if (rgb) {
-          root.style.setProperty(cssKey, `${rgb.r} ${rgb.g} ${rgb.b}`);
-        }
-      });
-    }
-    // Apply fonts
-    document.documentElement.style.setProperty(
-      '--font-sans',
-      config.theming.fonts.sans
-    );
-    document.documentElement.style.setProperty(
-      '--font-mono',
-      config.theming.fonts.mono
-    );
-    // Apply border radius
-    document.documentElement.style.setProperty(
-      '--radius-sm',
-      config.theming.borderRadius.sm
-    );
-    document.documentElement.style.setProperty(
-      '--radius-md',
-      config.theming.borderRadius.md
-    );
-    document.documentElement.style.setProperty(
-      '--radius-lg',
-      config.theming.borderRadius.lg
-    );
-    document.documentElement.style.setProperty(
-      '--radius-full',
-      config.theming.borderRadius.full
-    );
-  }, [theme, config.theming]);
+  }, [theme]);
   function setTheme(newTheme: string) {
-    if (config.theming.themes[newTheme]) {
+    if (availableThemes.includes(newTheme)) {
       setThemeState(newTheme);
     }
   }
@@ -100,14 +82,3 @@ export function useTheme() {
   }
   return context;
 }
-function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1]!, 16),
-        g: parseInt(result[2]!, 16),
-        b: parseInt(result[3]!, 16),
-      }
-    : null;
-}

package/src/index.tsx CHANGED Viewed

@@ -71,6 +71,7 @@ export { default as AdminTeamPage } from './pages/AdminTeamPage';
 // Use in React Router routes that render the chat interface
 // ============================================
 import React from 'react';
+import type { AppConfig } from '@chaaskit/shared';
 import { AuthProvider as Auth } from './contexts/AuthContext';
 import { ThemeProvider as Theme } from './contexts/ThemeContext';
 import { ConfigProvider as Config } from './contexts/ConfigContext';
@@ -79,6 +80,11 @@ import { ProjectProvider as Project } from './contexts/ProjectContext';
 export interface ChatProvidersProps {
   children: React.ReactNode;
+  /**
+   * Initial config to use immediately, avoiding a flash of default values.
+   * Pass the config from SSR loaders to prevent "Welcome to AI Chat" flash.
+   */
+  initialConfig?: AppConfig;
 }
 /**
@@ -99,9 +105,9 @@ export interface ChatProvidersProps {
  * }
  * ```
  */
-export function ChatProviders({ children }: ChatProvidersProps) {
+export function ChatProviders({ children, initialConfig }: ChatProvidersProps) {
   return (
-    <Config>
+    <Config initialConfig={initialConfig}>
       <Theme>
         <Auth>
           <Team>

package/src/routes/AcceptInviteRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function AcceptInviteRoute() {

package/src/routes/AdminDashboardRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function AdminDashboardRoute() {

package/src/routes/AdminTeamRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function AdminTeamRoute() {

package/src/routes/AdminTeamsRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function AdminTeamsRoute() {

package/src/routes/AdminUsersRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function AdminUsersRoute() {

package/src/routes/ApiKeysRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function ApiKeysRoute() {

package/src/routes/AutomationsRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function AutomationsRoute() {

package/src/routes/ChatRoute.tsx CHANGED Viewed

@@ -12,7 +12,8 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  // CSS is bundled via app's Tailwind preset - no separate stylesheet needed
+  return [];
 }
 export default function ChatRoute() {

package/src/routes/DocumentsRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function DocumentsRoute() {

package/src/routes/OAuthConsentRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function OAuthConsentRoute() {

package/src/routes/PricingRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function PricingRoute() {

package/src/routes/PrivacyRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function PrivacyRoute() {

package/src/routes/TeamSettingsRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function TeamSettingsRoute() {

package/src/routes/TermsRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function TermsRoute() {

package/src/routes/VerifyEmailRoute.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export function meta() {
 }
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 export default function VerifyEmailRoute() {

package/src/ssr-utils.tsx CHANGED Viewed

@@ -19,11 +19,89 @@
  */
 import { lazy, Suspense, type ComponentType, type LazyExoticComponent } from 'react';
+import type { AppConfig } from '@chaaskit/shared';
 import { ClientOnly } from './components/ClientOnly';
 import { ChatLoadingSkeleton, SimpleLoadingSkeleton } from './components/LoadingSkeletons';
 export { ClientOnly, ChatLoadingSkeleton, SimpleLoadingSkeleton };
+/**
+ * Props for ConfigScript component.
+ */
+interface ConfigScriptProps {
+  /**
+   * The app config to inject into the page.
+   * This should come from the SSR loader.
+   */
+  config: AppConfig;
+}
+/**
+ * Injects the app config into the page as a script tag.
+ * Place this in the <head> of your root layout to make the config
+ * available immediately on page load, avoiding flash of default values.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { ConfigScript } from '@chaaskit/client/ssr-utils';
+ * import { config } from '../config/app.config';
+ *
+ * export default function Root() {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <ConfigScript config={config} />
+ *       </head>
+ *       <body>...</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function ConfigScript({ config }: ConfigScriptProps) {
+  // Only include the UI-related config to avoid exposing sensitive data
+  const safeConfig = {
+    app: config.app,
+    ui: config.ui,
+    theming: config.theming,
+    auth: {
+      methods: config.auth?.methods,
+      allowUnauthenticated: config.auth?.allowUnauthenticated,
+    },
+    payments: {
+      enabled: config.payments?.enabled,
+      plans: config.payments?.plans?.map(plan => ({
+        id: plan.id,
+        name: plan.name,
+        type: plan.type,
+      })),
+    },
+    legal: config.legal,
+    sharing: config.sharing,
+    teams: config.teams,
+    projects: config.projects,
+    documents: {
+      enabled: config.documents?.enabled,
+    },
+    api: {
+      enabled: config.api?.enabled,
+    },
+    promptTemplates: {
+      enabled: config.promptTemplates?.enabled,
+      allowUserTemplates: config.promptTemplates?.allowUserTemplates,
+    },
+  };
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `window.__CHAASKIT_CONFIG__=${JSON.stringify(safeConfig)};`,
+      }}
+    />
+  );
+}
 /**
  * Route configuration options
  */
@@ -61,7 +139,8 @@ export function createRoute(config: RouteConfig) {
   }
   function links() {
-    return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+    // CSS is bundled via app's Tailwind preset - no separate stylesheet needed
+    return [];
   }
   function RouteComponent() {

package/src/ssr.ts CHANGED Viewed

@@ -109,6 +109,65 @@ export function getThemeVariables(config: AppConfig, theme: string): Record<stri
   return vars;
 }
+/**
+ * Generates CSS for ALL themes using html[data-theme] selectors.
+ * This is the recommended way to include theme styles - it allows instant
+ * theme switching by just changing the data-theme attribute on <html>.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { generateAllThemesCSS, baseStyles } from '@chaaskit/client/ssr';
+ *
+ * // Cache on server - only generate once
+ * let cachedCSS: string | null = null;
+ *
+ * export async function loader() {
+ *   if (!cachedCSS) cachedCSS = generateAllThemesCSS(config);
+ *   return { themeCSS: cachedCSS };
+ * }
+ *
+ * export default function Root() {
+ *   const { themeCSS } = useLoaderData();
+ *   return (
+ *     <html data-theme="dark">
+ *       <head>
+ *         <style dangerouslySetInnerHTML={{ __html: themeCSS + baseStyles }} />
+ *       </head>
+ *       ...
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function generateAllThemesCSS(config: AppConfig): string {
+  const themes = config.theming.themes;
+  let css = '';
+  for (const [themeName, themeConfig] of Object.entries(themes)) {
+    const cssVars = Object.entries(themeConfig.colors)
+      .map(([key, value]) => {
+        const cssKey = `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+        return `${cssKey}: ${hexToRgb(value)};`;
+      })
+      .join('\n      ');
+    css += `
+    html[data-theme="${themeName}"] {
+      ${cssVars}
+      --font-sans: ${config.theming.fonts.sans};
+      --font-mono: ${config.theming.fonts.mono};
+      --radius-sm: ${config.theming.borderRadius.sm};
+      --radius-md: ${config.theming.borderRadius.md};
+      --radius-lg: ${config.theming.borderRadius.lg};
+      --radius-full: ${config.theming.borderRadius.full};
+    }
+`;
+  }
+  return css;
+}
 /**
  * Base CSS styles for SSR pages.
  * Include this in your HTML template for consistent styling.

package/src/styles/index.css CHANGED Viewed

@@ -2,69 +2,22 @@
 @tailwind components;
 @tailwind utilities;
-/* Default theme variables (Light) */
-:root {
-  --color-primary: 99 102 241;
-  --color-primary-hover: 79 70 229;
-  --color-secondary: 139 92 246;
-  --color-background: 255 255 255;
-  --color-background-secondary: 249 250 251;
-  --color-sidebar: 243 244 246;
-  --color-text-primary: 17 24 39;
-  --color-text-secondary: 107 114 128;
-  --color-text-muted: 156 163 175;
-  --color-border: 229 231 235;
-  --color-input-background: 255 255 255;
-  --color-input-border: 209 213 219;
-  --color-user-message-bg: 99 102 241;
-  --color-user-message-text: 255 255 255;
-  --color-assistant-message-bg: 243 244 246;
-  --color-assistant-message-text: 17 24 39;
-  --color-success: 16 185 129;
-  --color-warning: 245 158 11;
-  --color-error: 239 68 68;
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', Menlo, monospace;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-full: 9999px;
-}
-/* Dark theme */
-[data-theme="dark"] {
-  --color-primary: 129 140 248;
-  --color-primary-hover: 165 180 252;
-  --color-secondary: 167 139 250;
-  --color-background: 17 24 39;
-  --color-background-secondary: 31 41 55;
-  --color-sidebar: 15 23 42;
-  --color-text-primary: 249 250 251;
-  --color-text-secondary: 209 213 219;
-  --color-text-muted: 107 114 128;
-  --color-border: 55 65 81;
-  --color-input-background: 31 41 55;
-  --color-input-border: 75 85 99;
-  --color-user-message-bg: 79 70 229;
-  --color-user-message-text: 255 255 255;
-  --color-assistant-message-bg: 31 41 55;
-  --color-assistant-message-text: 249 250 251;
-  --color-success: 52 211 153;
-  --color-warning: 251 191 36;
-  --color-error: 248 113 113;
-}
+/*
+ * Theme CSS variables are NOT defined here.
+ * The consuming app (chaaskit-app) is responsible for providing CSS variable values
+ * via inline styles on <html> from config/app.config.ts.
+ *
+ * Required variables:
+ * --color-primary, --color-primary-hover, --color-secondary
+ * --color-background, --color-background-secondary, --color-sidebar
+ * --color-text-primary, --color-text-secondary, --color-text-muted
+ * --color-border, --color-input-background, --color-input-border
+ * --color-user-message-bg, --color-user-message-text
+ * --color-assistant-message-bg, --color-assistant-message-text
+ * --color-success, --color-warning, --color-error
+ * --font-sans, --font-mono
+ * --radius-sm, --radius-md, --radius-lg, --radius-full
+ */
 /* Base styles */
 html {