acecoderz-chat-ui 1.0.0

package/dist/core/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../core/src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IACtC,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,SAAS;IAExB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG,aAAa,GAAG,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC"}

package/dist/core/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/src/urlWhitelist.d.ts

@@ -0,0 +1,19 @@
+/**
+ * URL Whitelist Utility
+ * Checks if the current origin is whitelisted before making API calls
+ */
+export interface WhitelistCheckResult {
+    isWhitelisted: boolean;
+    error?: string;
+}
+/**
+ * Check if the current origin is whitelisted
+ * @param apiUrl - The backend API URL
+ * @returns Promise with whitelist check result
+ */
+export declare function checkUrlWhitelist(apiUrl: string): Promise<WhitelistCheckResult>;
+/**
+ * Get a user-friendly error message for whitelist failures
+ */
+export declare function getWhitelistErrorMessage(origin: string): string;
+//# sourceMappingURL=urlWhitelist.d.ts.map

package/dist/core/src/urlWhitelist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlWhitelist.d.ts","sourceRoot":"","sources":["../../../core/src/urlWhitelist.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,oBAAoB,CAAC,CA0DrF;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/D"}

package/dist/core/src/urlWhitelist.js

@@ -0,0 +1,66 @@
+/**
+ * URL Whitelist Utility
+ * Checks if the current origin is whitelisted before making API calls
+ */
+/**
+ * Check if the current origin is whitelisted
+ * @param apiUrl - The backend API URL
+ * @returns Promise with whitelist check result
+ */
+export async function checkUrlWhitelist(apiUrl) {
+    try {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || !window.location) {
+            // Not in browser environment (e.g., Node.js, SSR), allow the request
+            return { isWhitelisted: true };
+        }
+        // Get current origin
+        const currentOrigin = window.location.origin;
+        if (!currentOrigin) {
+            // If we can't determine origin (e.g., file:// protocol), allow it
+            // This is useful for local development and testing
+            return { isWhitelisted: true };
+        }
+        // Call the public whitelist check endpoint
+        const checkUrl = `${apiUrl}/url-whitelist/check?url=${encodeURIComponent(currentOrigin)}`;
+        const response = await fetch(checkUrl, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        if (!response.ok) {
+            // If the endpoint doesn't exist or returns an error, allow the request
+            // This ensures backward compatibility
+            if (response.status === 404) {
+                return { isWhitelisted: true };
+            }
+            const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+            return {
+                isWhitelisted: false,
+                error: errorData.error?.message || errorData.message || 'Failed to check URL whitelist',
+            };
+        }
+        const data = await response.json();
+        const result = data.data || data;
+        if (result.isWhitelisted) {
+            return { isWhitelisted: true };
+        }
+        return {
+            isWhitelisted: false,
+            error: `This chatbot is not authorized for ${currentOrigin}. Please contact the administrator.`,
+        };
+    }
+    catch (error) {
+        // If there's a network error or the endpoint is unavailable,
+        // allow the request (for backward compatibility and offline scenarios)
+        console.warn('URL whitelist check failed:', error);
+        return { isWhitelisted: true };
+    }
+}
+/**
+ * Get a user-friendly error message for whitelist failures
+ */
+export function getWhitelistErrorMessage(origin) {
+    return `This chatbot is not authorized to work on ${origin}. Please contact the administrator to add this URL to the whitelist.`;
+}

package/dist/src/ChatUI.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import(".").ChatUIProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        placeholder: {
+            control: "text";
+        };
+        showTimestamp: {
+            control: "boolean";
+        };
+        showAvatar: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        maxHeight: {
+            control: "text";
+        };
+        theme: {
+            control: "object";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithInitialGreeting: Story;
+export declare const NoAvatars: Story;
+export declare const NoTimestamps: Story;
+//# sourceMappingURL=ChatUI.stories.d.ts.map

package/dist/src/ChatUI.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatUI.stories.d.ts","sourceRoot":"","sources":["../../src/ChatUI.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBqB,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAcjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAA"}

package/dist/src/ChatUI.stories.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatUI } from '../adapters/react/ChatUI';
+const meta = {
+    title: 'React/ChatUI',
+    component: ChatUI,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: { control: 'text' },
+        showTimestamp: { control: 'boolean' },
+        showAvatar: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        maxHeight: { control: 'text' },
+        theme: {
+            control: 'object',
+            description: 'Theme configuration object. See Theme Properties story for all available options.',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const WithInitialGreeting = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        initialGreeting: 'Hello! How can I help you today?',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const NoAvatars = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        showAvatar: false,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const NoTimestamps = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        showTimestamp: false,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};

package/dist/src/ChatUIThemes.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import(".").ChatUIProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        theme: {
+            control: "object";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Blue: Story;
+export declare const Green: Story;
+export declare const Purple: Story;
+export declare const Dark: Story;
+//# sourceMappingURL=ChatUIThemes.stories.d.ts.map

package/dist/src/ChatUIThemes.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatUIThemes.stories.d.ts","sourceRoot":"","sources":["../../src/ChatUIThemes.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;CAkBqB,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA8BlC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAelB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAenB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAelB,CAAA"}

package/dist/src/ChatUIThemes.stories.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatUI } from '../adapters/react/ChatUI';
+const meta = {
+    title: 'React/ChatUI/Themes',
+    component: ChatUI,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Pre-configured theme examples. See Theme Properties story for all available customization options.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        theme: {
+            control: 'object',
+            description: 'Theme object. See Theme Properties story for complete reference.',
+        },
+    },
+};
+export default meta;
+const themes = {
+    default: {},
+    blue: {
+        primaryColor: '#3b82f6',
+        userMessageColor: '#3b82f6',
+        assistantMessageColor: '#dbeafe',
+    },
+    green: {
+        primaryColor: '#10b981',
+        userMessageColor: '#10b981',
+        assistantMessageColor: '#d1fae5',
+    },
+    purple: {
+        primaryColor: '#8b5cf6',
+        userMessageColor: '#8b5cf6',
+        assistantMessageColor: '#ede9fe',
+    },
+    dark: {
+        primaryColor: '#6366f1',
+        backgroundColor: '#1e293b',
+        textColor: '#f1f5f9',
+        userMessageColor: '#6366f1',
+        assistantMessageColor: '#334155',
+        inputBackgroundColor: '#334155',
+        inputTextColor: '#f1f5f9',
+    },
+};
+export const Default = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: themes.default,
+        initialGreeting: 'This is the default theme',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Blue = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: themes.blue,
+        initialGreeting: 'This is the blue theme',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Green = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: themes.green,
+        initialGreeting: 'This is the green theme',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Purple = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: themes.purple,
+        initialGreeting: 'This is the purple theme',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Dark = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: themes.dark,
+        initialGreeting: 'This is the dark theme',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};

package/dist/src/ThemeProperties.stories.d.ts

@@ -0,0 +1,92 @@
+import type { StoryObj } from '@storybook/react';
+/**
+ * # ChatTheme Properties Reference
+ *
+ * All available CSS custom properties that can be customized via the `theme` prop.
+ * These properties map to CSS variables used throughout the chat UI.
+ *
+ * ## Colors
+ * - `primaryColor` → `--chat-primary-color` - Primary accent color
+ * - `secondaryColor` → `--chat-secondary-color` - Secondary color
+ * - `backgroundColor` → `--chat-background-color` - Main background color
+ * - `textColor` → `--chat-text-color` - Main text color
+ * - `userMessageColor` → `--chat-user-message-color` - User message background color
+ * - `assistantMessageColor` → `--chat-assistant-message-color` - Assistant message background color
+ * - `inputBackgroundColor` → `--chat-input-background-color` - Input field background
+ * - `inputTextColor` → `--chat-input-text-color` - Input text color
+ * - `errorBackgroundColor` → `--chat-error-background-color` - Error message background
+ * - `errorTextColor` → `--chat-error-text-color` - Error text color
+ * - `borderColor` → `--chat-border-color` - Border color
+ *
+ * ## Typography
+ * - `fontFamily` → `--chat-font-family` - Font family (e.g., 'Arial, sans-serif')
+ * - `fontSize` → `--chat-font-size` - Base font size (e.g., '1rem', '16px')
+ * - `fontWeight` → `--chat-font-weight` - Font weight (e.g., '400', 'bold')
+ * - `lineHeight` → `--chat-line-height` - Line height (e.g., '1.5', '1.6')
+ *
+ * ## Spacing
+ * - `padding` → `--chat-padding` - Container padding
+ * - `messageGap` → `--chat-message-gap` - Gap between messages
+ * - `inputPadding` → `--chat-input-padding` - Input field padding
+ * - `messagePadding` → `--chat-message-padding` - Message bubble padding
+ *
+ * ## Borders & Radius
+ * - `borderRadius` → `--chat-border-radius` - General border radius
+ * - `messageBorderRadius` → `--chat-message-border-radius` - Message bubble border radius
+ * - `inputBorderRadius` → `--chat-input-border-radius` - Input field border radius
+ * - `borderWidth` → `--chat-border-width` - Border width
+ *
+ * ## Shadows
+ * - `boxShadow` → `--chat-box-shadow` - General box shadow
+ * - `messageBoxShadow` → `--chat-message-box-shadow` - Message bubble shadow
+ * - `inputBoxShadow` → `--chat-input-box-shadow` - Input field shadow
+ *
+ * ## Sizing
+ * - `maxHeight` → `--chat-max-height` - Maximum container height
+ * - `maxWidth` → `--chat-max-width` - Maximum container width
+ * - `messageMaxWidth` → `--chat-message-max-width` - Maximum message width
+ * - `avatarSize` → `--chat-avatar-size` - Avatar size
+ *
+ * ## Transitions & Animations
+ * - `transitionDuration` → `--chat-transition-duration` - Transition duration
+ * - `animationDuration` → `--chat-animation-duration` - Animation duration
+ *
+ * ## Scrollbar
+ * - `scrollbarWidth` → `--chat-scrollbar-width` - Scrollbar width
+ * - `scrollbarColor` → `--chat-scrollbar-color` - Scrollbar thumb color
+ * - `scrollbarTrackColor` → `--chat-scrollbar-track-color` - Scrollbar track color
+ *
+ * ## Advanced
+ * - `customCSS` → Injected as raw CSS string for advanced customization
+ */
+declare const meta: {
+    title: string;
+    component: import("react").FC<import(".").ChatUIProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        theme: {
+            description: string;
+            control: "object";
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllProperties: Story;
+export declare const MinimalTheme: Story;
+export declare const CustomTypography: Story;
+export declare const CustomSpacing: Story;
+//# sourceMappingURL=ThemeProperties.stories.d.ts.map

package/dist/src/ThemeProperties.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProperties.stories.d.ts","sourceRoot":"","sources":["../../src/ThemeProperties.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAqBqB,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,eAAO,MAAM,aAAa,EAAE,KAkE3B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAA"}

package/dist/src/ThemeProperties.stories.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatUI } from '../adapters/react/ChatUI';
+/**
+ * # ChatTheme Properties Reference
+ *
+ * All available CSS custom properties that can be customized via the `theme` prop.
+ * These properties map to CSS variables used throughout the chat UI.
+ *
+ * ## Colors
+ * - `primaryColor` → `--chat-primary-color` - Primary accent color
+ * - `secondaryColor` → `--chat-secondary-color` - Secondary color
+ * - `backgroundColor` → `--chat-background-color` - Main background color
+ * - `textColor` → `--chat-text-color` - Main text color
+ * - `userMessageColor` → `--chat-user-message-color` - User message background color
+ * - `assistantMessageColor` → `--chat-assistant-message-color` - Assistant message background color
+ * - `inputBackgroundColor` → `--chat-input-background-color` - Input field background
+ * - `inputTextColor` → `--chat-input-text-color` - Input text color
+ * - `errorBackgroundColor` → `--chat-error-background-color` - Error message background
+ * - `errorTextColor` → `--chat-error-text-color` - Error text color
+ * - `borderColor` → `--chat-border-color` - Border color
+ *
+ * ## Typography
+ * - `fontFamily` → `--chat-font-family` - Font family (e.g., 'Arial, sans-serif')
+ * - `fontSize` → `--chat-font-size` - Base font size (e.g., '1rem', '16px')
+ * - `fontWeight` → `--chat-font-weight` - Font weight (e.g., '400', 'bold')
+ * - `lineHeight` → `--chat-line-height` - Line height (e.g., '1.5', '1.6')
+ *
+ * ## Spacing
+ * - `padding` → `--chat-padding` - Container padding
+ * - `messageGap` → `--chat-message-gap` - Gap between messages
+ * - `inputPadding` → `--chat-input-padding` - Input field padding
+ * - `messagePadding` → `--chat-message-padding` - Message bubble padding
+ *
+ * ## Borders & Radius
+ * - `borderRadius` → `--chat-border-radius` - General border radius
+ * - `messageBorderRadius` → `--chat-message-border-radius` - Message bubble border radius
+ * - `inputBorderRadius` → `--chat-input-border-radius` - Input field border radius
+ * - `borderWidth` → `--chat-border-width` - Border width
+ *
+ * ## Shadows
+ * - `boxShadow` → `--chat-box-shadow` - General box shadow
+ * - `messageBoxShadow` → `--chat-message-box-shadow` - Message bubble shadow
+ * - `inputBoxShadow` → `--chat-input-box-shadow` - Input field shadow
+ *
+ * ## Sizing
+ * - `maxHeight` → `--chat-max-height` - Maximum container height
+ * - `maxWidth` → `--chat-max-width` - Maximum container width
+ * - `messageMaxWidth` → `--chat-message-max-width` - Maximum message width
+ * - `avatarSize` → `--chat-avatar-size` - Avatar size
+ *
+ * ## Transitions & Animations
+ * - `transitionDuration` → `--chat-transition-duration` - Transition duration
+ * - `animationDuration` → `--chat-animation-duration` - Animation duration
+ *
+ * ## Scrollbar
+ * - `scrollbarWidth` → `--chat-scrollbar-width` - Scrollbar width
+ * - `scrollbarColor` → `--chat-scrollbar-color` - Scrollbar thumb color
+ * - `scrollbarTrackColor` → `--chat-scrollbar-track-color` - Scrollbar track color
+ *
+ * ## Advanced
+ * - `customCSS` → Injected as raw CSS string for advanced customization
+ */
+const meta = {
+    title: 'React/ChatUI/Theme Properties',
+    component: ChatUI,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Complete reference of all available theme properties and their corresponding CSS variables.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        theme: {
+            description: 'Theme object with CSS custom properties',
+            control: 'object',
+            table: {
+                type: { summary: 'ChatTheme' },
+            },
+        },
+    },
+};
+export default meta;
+// Example showing all theme properties
+export const AllProperties = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: {
+            // Colors
+            primaryColor: '#6366f1',
+            secondaryColor: '#64748b',
+            backgroundColor: '#ffffff',
+            textColor: '#1e293b',
+            userMessageColor: '#6366f1',
+            assistantMessageColor: '#f1f5f9',
+            inputBackgroundColor: '#f8fafc',
+            inputTextColor: '#1e293b',
+            errorBackgroundColor: '#fee2e2',
+            errorTextColor: '#dc2626',
+            borderColor: '#e2e8f0',
+            // Typography
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            fontSize: '1rem',
+            fontWeight: '400',
+            lineHeight: '1.5',
+            // Spacing
+            padding: '1rem',
+            messageGap: '1rem',
+            inputPadding: '1rem',
+            messagePadding: '0.75rem 1rem',
+            // Borders & Radius
+            borderRadius: '0.5rem',
+            messageBorderRadius: '0.75rem',
+            inputBorderRadius: '0.5rem',
+            borderWidth: '1px',
+            // Shadows
+            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+            messageBoxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+            inputBoxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+            // Sizing
+            maxHeight: '600px',
+            maxWidth: '100%',
+            messageMaxWidth: '80%',
+            avatarSize: '2rem',
+            // Transitions & Animations
+            transitionDuration: '200ms',
+            animationDuration: '300ms',
+            // Scrollbar
+            scrollbarWidth: '8px',
+            scrollbarColor: '#cbd5e1',
+            scrollbarTrackColor: '#f1f5f9',
+        },
+        initialGreeting: 'This example shows all available theme properties. Check the controls to customize!',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+// Minimal theme example
+export const MinimalTheme = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: {
+            primaryColor: '#3b82f6',
+            userMessageColor: '#3b82f6',
+            assistantMessageColor: '#f1f5f9',
+        },
+        initialGreeting: 'Minimal theme with just colors',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+// Custom typography example
+export const CustomTypography = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: {
+            fontFamily: '"Georgia", serif',
+            fontSize: '1.125rem',
+            lineHeight: '1.8',
+            fontWeight: '400',
+        },
+        initialGreeting: 'Custom typography with serif font and larger size',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+// Custom spacing example
+export const CustomSpacing = {
+    args: {
+        config: {
+            apiUrl: 'http://localhost:3000/api/chat',
+        },
+        theme: {
+            padding: '2rem',
+            messageGap: '1.5rem',
+            messagePadding: '1rem 1.5rem',
+            inputPadding: '1.25rem',
+        },
+        initialGreeting: 'Custom spacing with more generous padding',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px', height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};

package/dist/src/UseChat.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react';
+declare function UseChatDemo({ apiUrl }: {
+    apiUrl: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof UseChatDemo;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        apiUrl: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=UseChat.stories.d.ts.map

package/dist/src/UseChat.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseChat.stories.d.ts","sourceRoot":"","sources":["../../src/UseChat.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,2CAsGlD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;CAU0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA"}