@xcelsior/ui-chat 1.0.8 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-chat",
-  "version": "1.0.8",
+  "version": "2.0.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -22,12 +22,12 @@
     "@tailwindcss/postcss": "^4.1.13",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@xcelsior/design-system": "1.0.7",
-    "@xcelsior/ui-fields": "1.0.4"
+    "@xcelsior/design-system": "1.0.11",
+    "@xcelsior/ui-fields": "1.0.6"
   },
   "peerDependencies": {
     "tailwindcss": "^4",
-    "@xcelsior/design-system": "^1.0.7",
+    "@xcelsior/design-system": "^1.0.8",
     "@xcelsior/ui-fields": "^1.0.4",
     "flowbite-react": "^0.12",
     "react": "^18.2.0",
@@ -43,7 +43,8 @@
   },
   "exports": {
     ".": {
-      "import": "./src/index.tsx",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }
   },

package/src/components/BrandIcons.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { XcelsiorSymbol, XcelsiorAvatar } from './BrandIcons';
+
+const meta: Meta<typeof XcelsiorSymbol> = {
+    title: 'Brand/Icons',
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+/** Xcelsior X symbol at various sizes */
+export const SymbolSizes: StoryObj = {
+    render: () => (
+        <div className="flex items-center gap-6 p-4">
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={16} color="#337eff" />
+                <span className="text-xs text-gray-500">16px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={24} color="#337eff" />
+                <span className="text-xs text-gray-500">24px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={32} color="#337eff" />
+                <span className="text-xs text-gray-500">32px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={48} color="#337eff" />
+                <span className="text-xs text-gray-500">48px</span>
+            </div>
+        </div>
+    ),
+};
+
+/** Symbol on dark backgrounds */
+export const SymbolOnDark: StoryObj = {
+    render: () => (
+        <div className="flex items-center gap-6 p-6 bg-gray-900 rounded-lg">
+            <XcelsiorSymbol size={24} color="white" />
+            <XcelsiorSymbol size={32} color="white" />
+            <XcelsiorSymbol size={48} color="white" />
+        </div>
+    ),
+};
+
+/** Xcelsior avatar (gradient circle with symbol) at various sizes */
+export const AvatarSizes: StoryObj = {
+    render: () => (
+        <div className="flex items-center gap-6 p-4">
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={24} />
+                <span className="text-xs text-gray-500">24px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={32} />
+                <span className="text-xs text-gray-500">32px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={40} />
+                <span className="text-xs text-gray-500">40px (default)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={56} />
+                <span className="text-xs text-gray-500">56px (FAB)</span>
+            </div>
+        </div>
+    ),
+};
+
+/** Avatar in context — message list style */
+export const AvatarInContext: StoryObj = {
+    render: () => (
+        <div className="flex flex-col gap-3 max-w-md p-4 bg-gray-900 rounded-lg">
+            <div className="flex items-start gap-3">
+                <XcelsiorAvatar size={32} />
+                <div className="bg-gray-800 rounded-lg px-3 py-2 text-sm text-white">
+                    <p className="text-xs text-blue-400 mb-1">AI Assistant</p>
+                    Hello! How can I help you today?
+                </div>
+            </div>
+            <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white text-sm font-medium">
+                    S
+                </div>
+                <div className="bg-gray-800 rounded-lg px-3 py-2 text-sm text-white">
+                    <p className="text-xs text-green-400 mb-1">Sarah (Agent)</p>
+                    I&apos;m here to help with your inquiry!
+                </div>
+            </div>
+        </div>
+    ),
+};

package/src/components/BrandIcons.tsx

@@ -0,0 +1,84 @@
+import type { CSSProperties } from 'react';
+
+interface BrandIconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+/**
+ * Xcelsior "X" symbol mark (from favicon-brand.svg)
+ * Reusable across the chat widget — FAB button, avatar, header, etc.
+ */
+export function XcelsiorSymbol({ size = 24, color = 'white', className = '', style }: BrandIconProps) {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+            style={style}
+            aria-hidden="true"
+        >
+            <path
+                d="M20.582 15.027L31.849 0.036H24.808L17.039 10.303L20.582 15.027ZM24.808 31.837H31.849L20.582 16.846L17.039 21.57L24.808 31.837Z"
+                fill={color}
+            />
+            <path
+                d="M14.313 15.027H18.402L7.135 0.036H0.185L9.406 12.392C10.587 13.983 12.359 15.027 14.313 15.027Z"
+                fill={color}
+            />
+            <path
+                d="M0.185 31.837H7.135L18.402 16.846H14.313C12.359 16.846 10.588 17.891 9.406 19.481L0.185 31.837Z"
+                fill={color}
+            />
+        </svg>
+    );
+}
+
+/**
+ * Chat bubble icon for the FAB launcher button.
+ * Instantly recognizable as a chat trigger.
+ */
+export function ChatBubbleIcon({ size = 28, color = 'white', className = '', style }: BrandIconProps) {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke={color}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={className}
+            style={style}
+            aria-hidden="true"
+        >
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+    );
+}
+
+/**
+ * Xcelsior "X" avatar — symbol inside a gradient circle
+ * Used as bot avatar in messages and chat header
+ */
+export function XcelsiorAvatar({ size = 40, className = '' }: { size?: number; className?: string }) {
+    const iconSize = Math.round(size * 0.55);
+    return (
+        <div
+            className={`flex items-center justify-center rounded-full ${className}`}
+            style={{
+                width: size,
+                height: size,
+                background: 'linear-gradient(135deg, #337eff, #005eff)',
+            }}
+        >
+            <XcelsiorSymbol size={iconSize} color="white" />
+        </div>
+    );
+}

package/src/components/Chat.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Chat } from './Chat';
-import type { IChatConfig } from '../types';
+
+import type { IChatConfig, IChatTheme } from '../types';
 
 const meta: Meta<typeof Chat> = {
     title: 'Components/Chat',
@@ -14,29 +15,33 @@ const meta: Meta<typeof Chat> = {
 export default meta;
 type Story = StoryObj<typeof Chat>;
 
-// Base configuration without user details
-const baseConfig: Omit<IChatConfig, 'currentUser' | 'conversationId' | 'userId'> = {
+const xcelsiorTheme: IChatTheme = {
+    primary: '#337eff',
+    primaryStrong: '#005eff',
+    background: '#02164a',
+    backgroundAlt: '#00001a',
+    text: '#f7f7f8',
+    textMuted: 'rgba(247, 247, 248, 0.6)',
+    statusPositive: '#1ed473',
+    statusCaution: '#ffa938',
+    statusNegative: '#ff6363',
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+};
+
+const baseConfig: Omit<IChatConfig, 'conversationId'> = {
     websocketUrl: 'wss://dev-ws-chat.xcelsior.co',
     httpApiUrl: 'https://dev-chat.xcelsior.co/api',
     enableEmoji: true,
     enableFileUpload: true,
     enableTypingIndicator: true,
     fileUpload: {
-        uploadUrl: `https://dev-chat.xcelsior.co/api/attachments/upload-url`,
-        maxFileSize: 2 * 1024 * 1024, // 2MB (default)
-        allowedTypes: [
-            'image/jpeg',
-            'image/png',
-            'image/gif',
-            'image/webp',
-            'application/pdf',
-            'application/msword',
-            'text/plain',
-            'text/csv',
-        ],
+        uploadUrl: 'https://dev-chat.xcelsior.co/api/attachments/upload-url',
+        maxFileSize: 2 * 1024 * 1024,
+        allowedTypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'text/plain'],
     },
     enableReadReceipts: true,
     apiKey: 'test',
+    theme: xcelsiorTheme,
     toast: {
         success: (message: string) => console.log('Success:', message),
         error: (message: string) => console.error('Error:', message),
@@ -45,10 +50,138 @@ const baseConfig: Omit<IChatConfig, 'currentUser' | 'conversationId' | 'userId'>
 };
 
 /**
- * Default story - Shows pre-chat form first
+ * Progressive identity mode (default) — no pre-chat form, bot collects info during conversation
+ */
+export const ProgressiveIdentity: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+        },
+    },
+};
+
+/**
+ * Form identity mode — shows pre-chat form before chat
+ */
+export const FormIdentity: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'form',
+        },
+    },
+};
+
+/**
+ * With known user — skips form/anonymous, goes straight to chat
+ */
+export const WithKnownUser: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+            currentUser: {
+                name: 'John Doe',
+                email: 'john@example.com',
+                type: 'customer',
+                status: 'online',
+            },
+        },
+    },
+};
+
+/**
+ * Widget positioned on the left
+ */
+export const PositionLeft: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+            position: 'left',
+        },
+    },
+};
+
+/**
+ * Widget positioned on the right (explicit)
+ */
+export const PositionRight: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+            position: 'right',
+        },
+    },
+};
+
+/**
+ * Auto position — reads from localStorage, falls back to right
+ */
+export const PositionAuto: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+            position: 'auto',
+        },
+    },
+};
+
+/**
+ * Light theme variant
+ */
+export const LightTheme: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+            theme: {
+                primary: '#005eff',
+                primaryStrong: '#003ecc',
+                background: '#ffffff',
+                backgroundAlt: '#f7f7f8',
+                text: '#171719',
+                textMuted: 'rgba(23, 23, 25, 0.5)',
+                statusPositive: '#1ed473',
+                statusCaution: '#ffa938',
+                statusNegative: '#ff6363',
+                borderColor: 'rgba(0, 0, 0, 0.1)',
+            },
+        },
+    },
+};
+
+/**
+ * Default (dark theme Xcelsior branded)
  */
 export const Default: Story = {
     args: {
         config: baseConfig,
     },
 };
+
+/**
+ * Starts in open state
+ */
+export const OpenByDefault: Story = {
+    args: {
+        config: baseConfig,
+        defaultState: 'open',
+    },
+};
+
+/**
+ * Resizable widget — drag the bottom-right corner to resize
+ */
+export const Resizable: Story = {
+    args: {
+        config: {
+            ...baseConfig,
+            identityCollection: 'progressive',
+        },
+        defaultState: 'open',
+    },
+};