@athenaintel/react 0.4.6 → 0.5.0

package/dist/index.d.ts

@@ -95,7 +95,7 @@ export declare interface AthenaLayoutProps {
     minPercent?: number;
 }
 
-export declare function AthenaProvider({ children, apiKey, token: tokenProp, agent, model, tools, frontendTools, apiUrl, backendUrl, workbench, knowledgeBase, systemPrompt, threadId: threadIdProp, enableThreadList, }: AthenaProviderProps): JSX.Element;
+export declare function AthenaProvider({ children, apiKey, token: tokenProp, agent, model, tools, frontendTools, apiUrl, backendUrl, workbench, knowledgeBase, systemPrompt, threadId: threadIdProp, enableThreadList, theme, }: AthenaProviderProps): JSX.Element;
 
 export declare interface AthenaProviderProps {
     children: ReactNode;
@@ -124,8 +124,22 @@ export declare interface AthenaProviderProps {
     systemPrompt?: string;
     /** Thread ID override. Auto-generated if not provided. */
     threadId?: string;
-    /** Enable thread list management (list, switch, create threads). Defaults to false. */
+    /** Enable thread list management (sidebar thread switching). */
     enableThreadList?: boolean;
+    /** Theme configuration. Pass a preset from `themes` or a custom `AthenaTheme` object.
+     *  Injects CSS variables on a wrapper element — no CSS files needed.
+     *
+     *  @example
+     *  import { themes } from '@athenaintel/react';
+     *  <AthenaProvider theme={themes.dark}>
+     *
+     *  @example
+     *  <AthenaProvider theme={{ primary: '#8b5cf6', radius: '1rem' }}>
+     *
+     *  @example
+     *  <AthenaProvider theme={{ ...themes.dark, primary: '#22c55e' }}>
+     */
+    theme?: AthenaTheme;
 }
 
 export declare interface AthenaRuntimeConfig {
@@ -153,10 +167,80 @@ export declare interface AthenaRuntimeConfig {
     systemPrompt?: string;
     /** Thread ID override. Auto-generated if not provided. */
     threadId?: string;
-    /** Pre-loaded messages for existing threads (from thread switching). */
+    /** Pre-loaded messages for thread switching. */
     initialMessages?: LangChainMessage[];
 }
 
+/**
+ * Athena SDK Theming System
+ *
+ * Usage:
+ *   import { AthenaProvider, themes } from '@athenaintel/react';
+ *
+ *   // Use a preset theme
+ *   <AthenaProvider theme={themes.dark}>
+ *
+ *   // Customize a preset
+ *   <AthenaProvider theme={{ ...themes.dark, primary: '#8b5cf6' }}>
+ *
+ *   // Full custom theme
+ *   <AthenaProvider theme={{ primary: '#2563eb', background: '#fafafa', radius: '1rem' }}>
+ */
+export declare interface AthenaTheme {
+    /** Brand / accent color. Send button, active states, focus ring, spinner. */
+    primary?: string;
+    /** Text color on primary background. */
+    primaryForeground?: string;
+    /** Page / panel background. */
+    background?: string;
+    /** Primary text color. */
+    foreground?: string;
+    /** Subtle background. User message bubble, sidebar hover, thread highlight. */
+    muted?: string;
+    /** De-emphasized text. Timestamps, placeholders, sidebar items. */
+    mutedForeground?: string;
+    /** Hover / focus highlight background. */
+    accent?: string;
+    /** Text on accent background. */
+    accentForeground?: string;
+    /** Secondary surface color. */
+    secondary?: string;
+    /** Text on secondary surface. */
+    secondaryForeground?: string;
+    /** Card / modal surface color. */
+    card?: string;
+    /** Text on card surface. */
+    cardForeground?: string;
+    /** Popover / tooltip / dropdown surface. */
+    popover?: string;
+    /** Text on popover surface. */
+    popoverForeground?: string;
+    /** Error / danger color. Error banners, delete actions. */
+    destructive?: string;
+    /** Default border color. Dividers, card borders. */
+    border?: string;
+    /** Input field border color. Composer border. */
+    input?: string;
+    /** Focus ring color. Composer focus ring. */
+    ring?: string;
+    /** Base border radius for all rounded corners. e.g. '0.5rem', '0.75rem', '0' */
+    radius?: string;
+    /** Sidebar background color. Falls back to muted with transparency. */
+    sidebarBackground?: string;
+    /** Sidebar border color. Falls back to border. */
+    sidebarBorder?: string;
+    /** User message bubble background. Falls back to muted. */
+    userBubble?: string;
+    /** User message bubble text color. Falls back to foreground. */
+    userBubbleForeground?: string;
+    /** Assistant message text color. Falls back to foreground. */
+    assistantForeground?: string;
+    /** Composer border color. Falls back to input. */
+    composerBorder?: string;
+    /** Composer border radius. Falls back to radius-based default. */
+    composerRadius?: string;
+}
+
 export declare const BrowseToolUI: ToolCallMessagePartComponent;
 
 export declare function Button({ className, variant, size, asChild, ...props }: React_2.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -164,7 +248,7 @@ export declare function Button({ className, variant, size, asChild, ...props }:
 }): JSX.Element;
 
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
     size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -276,6 +360,144 @@ declare interface StoreConfig {
     token?: string | null;
 }
 
+export declare const themes: {
+    /** Default light theme. Neutral grays with blue accent. */
+    readonly light: {
+        background: string;
+        foreground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        destructive: string;
+        border: string;
+        input: string;
+        ring: string;
+        radius: string;
+    };
+    /** Dark theme. Deep gray background with lighter text. */
+    readonly dark: {
+        background: string;
+        foreground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        destructive: string;
+        border: string;
+        input: string;
+        ring: string;
+        radius: string;
+    };
+    /** Midnight theme. Deep navy with soft blue tones. */
+    readonly midnight: {
+        background: string;
+        foreground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        destructive: string;
+        border: string;
+        input: string;
+        ring: string;
+        radius: string;
+    };
+    /** Warm earthy theme. Brown and sand tones. */
+    readonly warm: {
+        background: string;
+        foreground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        destructive: string;
+        border: string;
+        input: string;
+        ring: string;
+        radius: string;
+    };
+    /** Purple creative theme. Vibrant purple accent. */
+    readonly purple: {
+        background: string;
+        foreground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        destructive: string;
+        border: string;
+        input: string;
+        ring: string;
+        radius: string;
+    };
+    /** Green nature theme. Fresh green tones. */
+    readonly green: {
+        background: string;
+        foreground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        destructive: string;
+        border: string;
+        input: string;
+        ring: string;
+        radius: string;
+    };
+};
+
+/** Convert an AthenaTheme object to a CSS variables style object. */
+export declare function themeToStyleVars(theme: AthenaTheme): Record<string, string>;
+
 export declare function ThreadList({ className }: ThreadListProps): JSX.Element;
 
 export declare interface ThreadListActions {
@@ -370,6 +592,88 @@ export declare function ToolFallbackTrigger({ toolName, argsText, result, status
 
 export { Toolkit }
 
+/** A toolkit ID string. */
+export declare type ToolkitId = (typeof Toolkits)[keyof typeof Toolkits];
+
+/**
+ * Backend toolkit IDs.
+ *
+ * Pass these to the `tools` prop on `<AthenaProvider>` to enable backend toolkits.
+ *
+ * @example
+ * import { Toolkits } from '@athenaintel/react';
+ *
+ * <AthenaProvider tools={[Toolkits.DOCUMENT, Toolkits.SPREADSHEET, Toolkits.WEB_SEARCH]}>
+ */
+export declare const Toolkits: {
+    /** Web search and page browsing. */
+    readonly WEB_SEARCH: "web_search_browse_toolkit";
+    /** SQL query execution. */
+    readonly SQL: "sql_toolkit";
+    /** Athena Code development environment. */
+    readonly ATHENA_CODE: "athena_code_toolkit";
+    /** Document comments and collaboration. */
+    readonly COMMENTS: "comments_toolkit";
+    /** Visual canvas creation. */
+    readonly CANVAS: "canvas_toolkit";
+    /** PostgreSQL database management. */
+    readonly DATABASE: "database_toolkit";
+    /** Asset collections management. */
+    readonly COLLECTIONS: "collections_toolkit";
+    /** Charts, dashboards, and figures. */
+    readonly VISUALIZATIONS: "visualizations_toolkit";
+    /** Custom UI creation. */
+    readonly USER_INTERFACE: "user_interface_toolkit";
+    /** Agent Operating Procedures. */
+    readonly AOP: "aop_toolkit";
+    /** Ephemeral compute environments. */
+    readonly COMPUTER_ASSET: "computer_asset_toolkit";
+    /** Web browser automation. */
+    readonly BROWSER: "browser_toolkit";
+    /** Virtual machine management. */
+    readonly VM: "vm_toolkit";
+    /** Jupyter notebook execution. */
+    readonly NOTEBOOK: "notebook_toolkit";
+    /** Presentation slide editing. */
+    readonly PRESENTATION: "presentation_toolkit";
+    /** PowerPoint presentation creation from templates. */
+    readonly POWERPOINT: "powerpoint_deck_toolkit";
+    /** Workspace file management (Spaces). */
+    readonly DRIVE: "olympus_drive_toolkit";
+    /** Python code execution. */
+    readonly PYTHON: "python_toolkit";
+    /** Multi-account email and calendar (Gmail + Outlook). */
+    readonly EMAIL: "unified_email_toolkit";
+    /** Legacy email and calendar operations. */
+    readonly EMAIL_CALENDAR: "email_calendar_toolkit";
+    /** Spreadsheet operations. */
+    readonly SPREADSHEET: "spreadsheet_toolkit";
+    /** Athena document editing. */
+    readonly DOCUMENT: "document_toolkit";
+    /** Word document backend operations. */
+    readonly WORD_DOCUMENT: "word_document_be_toolkit";
+    /** Go-To-Market management. */
+    readonly GTM: "gtm_toolkit";
+    /** Marketing campaign management. */
+    readonly MARKETING: "marketing_toolkit";
+    /** FDE implementations and workflows. */
+    readonly FDE: "fde_toolkit";
+    /** Code repository search via Greptile. */
+    readonly GREPTILE: "greptile_toolkit";
+    /** SharePoint / Google Drive / workspace file access. */
+    readonly EXTERNAL_DRIVE: "external_drive_toolkit";
+    /** Reusable playbooks and prompts. */
+    readonly PLAYBOOK: "playbook_toolkit";
+    /** Local Chrome browser control via tunnel. */
+    readonly DEVICE_TUNNEL: "device_tunnel_toolkit";
+    /** Project management. */
+    readonly PROJECTS: "projects_toolkit";
+    /** Task Studio script execution. */
+    readonly TASK_STUDIO: "task_studio_toolkit";
+    /** User memory and preferences. */
+    readonly PREFERENCES: "preferences_toolkit";
+};
+
 export declare function Tooltip({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Root>): JSX.Element;
 
 export declare function TooltipContent({ className, sideOffset, children, ...props }: React_2.ComponentProps<typeof Tooltip_2.Content>): JSX.Element;