@xcelsior/ui-chat 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-chat",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "@emoji-mart/react": "^1.1.1",
     "axios": "^1.6.7",
     "date-fns": "^3.3.1",
+    "lucide-react": "^0.477.0",
     "react-markdown": "^9.0.1"
   },
   "exports": {

package/src/components/BookingCancelledCard.tsx

@@ -0,0 +1,103 @@
+import { CircleX, Calendar, Clock, MessageSquare } from 'lucide-react';
+import type { IBookingCancelledData, IChatTheme } from '../types';
+
+interface BookingCancelledCardProps {
+    data: IBookingCancelledData;
+    theme?: IChatTheme;
+}
+
+export function BookingCancelledCard({ data, theme }: BookingCancelledCardProps) {
+    const bgColor = theme?.background || '#00001a';
+    const isLightTheme = (() => {
+        if (!bgColor.startsWith('#')) return false;
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+    })();
+
+    const negativeColor = theme?.statusNegative || '#ef4444';
+    const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+    const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.45)' : 'rgba(247,247,248,0.4)');
+
+    const cardStyle: React.CSSProperties = isLightTheme
+        ? {
+              backgroundColor: 'rgba(239,68,68,0.04)',
+              boxShadow: 'inset 0 0 0 1px rgba(239,68,68,0.12)',
+              borderRadius: '14px',
+              padding: '16px',
+          }
+        : {
+              backgroundColor: 'rgba(239,68,68,0.06)',
+              boxShadow: 'inset 0 0 0 0.5px rgba(239,68,68,0.18)',
+              borderRadius: '14px',
+              padding: '16px',
+          };
+
+    const strikethroughTextStyle: React.CSSProperties = {
+        fontSize: '13px',
+        color: textMuted,
+        lineHeight: 1.4,
+        textDecoration: 'line-through',
+        textDecorationColor: isLightTheme ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.2)',
+    };
+
+    const detailRowStyle: React.CSSProperties = {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '8px',
+        marginBottom: '8px',
+    };
+
+    const cancelledByLabel = data.cancelledBy === 'visitor' ? 'Cancelled by you' : 'Cancelled by support';
+
+    return (
+        <div style={cardStyle}>
+            {/* Header: icon + title */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '14px' }}>
+                <CircleX size={22} color={negativeColor} aria-hidden="true" />
+                <div>
+                    <p
+                        style={{
+                            fontSize: '14px',
+                            fontWeight: '700',
+                            color: textColor,
+                            letterSpacing: '0.006em',
+                            lineHeight: 1.3,
+                        }}
+                    >
+                        Meeting Cancelled
+                    </p>
+                    <p
+                        style={{
+                            fontSize: '11px',
+                            color: negativeColor,
+                            letterSpacing: '0.01em',
+                            marginTop: '1px',
+                            opacity: 0.8,
+                        }}
+                    >
+                        {cancelledByLabel}
+                    </p>
+                </div>
+            </div>
+
+            {/* Details with strikethrough */}
+            <div>
+                <div style={detailRowStyle}>
+                    <Calendar size={14} color={textMuted} aria-hidden="true" style={{ marginTop: '1px', flexShrink: 0 }} />
+                    <span style={strikethroughTextStyle}>
+                        {data.meetingDate} at {data.meetingTime}
+                    </span>
+                </div>
+                <div style={{ ...detailRowStyle, marginBottom: '0' }}>
+                    <MessageSquare size={14} color={textMuted} aria-hidden="true" style={{ marginTop: '1px', flexShrink: 0 }} />
+                    <span style={strikethroughTextStyle}>
+                        {data.meetingPurpose}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/BookingCards.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BookingConfirmationCard } from './BookingConfirmationCard';
+import { BookingCancelledCard } from './BookingCancelledCard';
+import type { IBookingConfirmationData, IBookingCancelledData } from '../types';
+
+// --- BookingConfirmationCard ---
+
+const confirmationMeta: Meta<typeof BookingConfirmationCard> = {
+    title: 'Components/BookingConfirmationCard',
+    component: BookingConfirmationCard,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: 360, background: '#00001a', padding: 16, borderRadius: 12 }}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default confirmationMeta;
+type ConfirmationStory = StoryObj<typeof BookingConfirmationCard>;
+
+const mockConfirmation: IBookingConfirmationData = {
+    bookingId: 'bk_abc123',
+    visitorName: 'John Doe',
+    meetingDate: '2026-03-26',
+    meetingTime: '10:00',
+    meetingDuration: 30,
+    meetingPurpose: 'Discuss mobile app development project',
+    meetLink: 'https://meet.google.com/abc-defg-hij',
+    calendarLink: 'https://calendar.google.com/event?eid=abc123',
+    timezone: 'Australia/Sydney',
+};
+
+export const Confirmed: ConfirmationStory = {
+    args: { data: mockConfirmation },
+};
+
+export const ConfirmedNoMeetLink: ConfirmationStory = {
+    args: {
+        data: { ...mockConfirmation, meetLink: undefined },
+    },
+};
+
+export const ConfirmedLightTheme: ConfirmationStory = {
+    args: {
+        data: mockConfirmation,
+        theme: {
+            primary: '#337eff',
+            background: '#ffffff',
+            text: '#1a1a2e',
+            textMuted: 'rgba(0,0,0,0.35)',
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: 360, background: '#ffffff', padding: 16, borderRadius: 12 }}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+// --- BookingCancelledCard (separate file but grouped for convenience) ---
+// Note: Storybook only supports one default export per file.
+// To view BookingCancelledCard stories, create a separate render.
+
+export const CancelledByVisitor: StoryObj<typeof BookingCancelledCard> = {
+    render: (args) => (
+        <div style={{ maxWidth: 360, background: '#00001a', padding: 16, borderRadius: 12 }}>
+            <BookingCancelledCard {...args} />
+        </div>
+    ),
+    args: {
+        data: {
+            bookingId: 'bk_abc123',
+            meetingDate: '2026-03-26',
+            meetingTime: '10:00',
+            meetingPurpose: 'Discuss mobile app development project',
+            cancelledBy: 'visitor',
+        } as IBookingCancelledData,
+    },
+};
+
+export const CancelledByAdmin: StoryObj<typeof BookingCancelledCard> = {
+    render: (args) => (
+        <div style={{ maxWidth: 360, background: '#00001a', padding: 16, borderRadius: 12 }}>
+            <BookingCancelledCard {...args} />
+        </div>
+    ),
+    args: {
+        data: {
+            bookingId: 'bk_abc123',
+            meetingDate: '2026-03-26',
+            meetingTime: '10:00',
+            meetingPurpose: 'Discuss mobile app development project',
+            cancelledBy: 'admin',
+        } as IBookingCancelledData,
+    },
+};

package/src/components/BookingConfirmationCard.tsx

@@ -0,0 +1,170 @@
+import { CircleCheck, Calendar, Clock, MessageSquare, Video, CalendarPlus, Globe } from 'lucide-react';
+import type { IBookingConfirmationData, IChatTheme } from '../types';
+
+interface BookingConfirmationCardProps {
+    data: IBookingConfirmationData;
+    theme?: IChatTheme;
+}
+
+export function BookingConfirmationCard({ data, theme }: BookingConfirmationCardProps) {
+    const bgColor = theme?.background || '#00001a';
+    const isLightTheme = (() => {
+        if (!bgColor.startsWith('#')) return false;
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+    })();
+
+    const primaryColor = theme?.primary || '#337eff';
+    const successColor = theme?.statusPositive || '#22c55e';
+    const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+    const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.45)' : 'rgba(247,247,248,0.4)');
+
+    const cardStyle: React.CSSProperties = isLightTheme
+        ? {
+              backgroundColor: 'rgba(0,0,0,0.03)',
+              boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)',
+              borderRadius: '14px',
+              padding: '16px',
+              overflow: 'hidden',
+          }
+        : {
+              backgroundColor: 'rgba(255,255,255,0.04)',
+              boxShadow: 'inset 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 1px 0 0 rgba(255,255,255,0.1)',
+              borderRadius: '14px',
+              padding: '16px',
+              overflow: 'hidden',
+          };
+
+    const detailRowStyle: React.CSSProperties = {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '8px',
+        marginBottom: '8px',
+    };
+
+    const dividerStyle: React.CSSProperties = {
+        height: '1px',
+        backgroundColor: isLightTheme ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.06)',
+        margin: '12px 0',
+    };
+
+    const actionButtonBase: React.CSSProperties = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '6px',
+        flex: 1,
+        padding: '9px 12px',
+        borderRadius: '9px',
+        fontSize: '12px',
+        fontWeight: '600',
+        letterSpacing: '0.01em',
+        cursor: 'pointer',
+        textDecoration: 'none',
+        border: 'none',
+        transition: 'opacity 0.15s ease',
+    };
+
+    return (
+        <div style={cardStyle}>
+            {/* Header: icon + title */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '14px' }}>
+                <CircleCheck size={22} color={successColor} aria-hidden="true" />
+                <div>
+                    <p
+                        style={{
+                            fontSize: '14px',
+                            fontWeight: '700',
+                            color: textColor,
+                            letterSpacing: '0.006em',
+                            lineHeight: 1.3,
+                        }}
+                    >
+                        Meeting Confirmed
+                    </p>
+                    <p style={{ fontSize: '11px', color: successColor, letterSpacing: '0.01em', marginTop: '1px' }}>
+                        You'll receive a calendar invite shortly
+                    </p>
+                </div>
+            </div>
+
+            {/* Details */}
+            <div>
+                <div style={detailRowStyle}>
+                    <Calendar size={14} color={primaryColor} aria-hidden="true" style={{ marginTop: '1px', flexShrink: 0 }} />
+                    <span style={{ fontSize: '13px', color: textColor, lineHeight: 1.4 }}>
+                        {data.meetingDate} at {data.meetingTime}
+                    </span>
+                </div>
+                <div style={detailRowStyle}>
+                    <Clock size={14} color={primaryColor} aria-hidden="true" style={{ marginTop: '1px', flexShrink: 0 }} />
+                    <span style={{ fontSize: '13px', color: textColor, lineHeight: 1.4 }}>
+                        {data.meetingDuration} minutes
+                    </span>
+                </div>
+                <div style={{ ...detailRowStyle, marginBottom: '0' }}>
+                    <MessageSquare size={14} color={primaryColor} aria-hidden="true" style={{ marginTop: '1px', flexShrink: 0 }} />
+                    <span style={{ fontSize: '13px', color: textColor, lineHeight: 1.4 }}>
+                        {data.meetingPurpose}
+                    </span>
+                </div>
+            </div>
+
+            {/* Timezone */}
+            {data.timezone && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginTop: '8px' }}>
+                    <Globe size={11} color={textMuted} aria-hidden="true" />
+                    <span style={{ fontSize: '11px', color: textMuted, letterSpacing: '0.01em' }}>
+                        {data.timezone}
+                    </span>
+                </div>
+            )}
+
+            {/* Action buttons */}
+            {(data.meetLink || data.calendarLink) && (
+                <>
+                    <div style={dividerStyle} />
+                    <div style={{ display: 'flex', gap: '8px' }}>
+                        {data.meetLink && (
+                            <a
+                                href={data.meetLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                style={{
+                                    ...actionButtonBase,
+                                    background: `linear-gradient(135deg, ${primaryColor}, ${theme?.primaryStrong || '#005eff'})`,
+                                    color: '#ffffff',
+                                    boxShadow: `0 2px 8px -2px ${primaryColor}50`,
+                                }}
+                            >
+                                <Video size={13} aria-hidden="true" />
+                                Join Meet
+                            </a>
+                        )}
+                        {data.calendarLink && (
+                            <a
+                                href={data.calendarLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                style={{
+                                    ...actionButtonBase,
+                                    backgroundColor: isLightTheme ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.07)',
+                                    color: textColor,
+                                    boxShadow: isLightTheme
+                                        ? 'inset 0 0 0 1px rgba(0,0,0,0.1)'
+                                        : 'inset 0 0 0 0.5px rgba(255,255,255,0.12)',
+                                }}
+                            >
+                                <CalendarPlus size={13} aria-hidden="true" />
+                                Add to Calendar
+                            </a>
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

package/src/components/BookingSlotPicker.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BookingSlotPicker } from './BookingSlotPicker';
+import type { IBookingData } from '../types';
+
+const meta: Meta<typeof BookingSlotPicker> = {
+    title: 'Components/BookingSlotPicker',
+    component: BookingSlotPicker,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: 360, background: '#00001a', padding: 16, borderRadius: 12 }}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof BookingSlotPicker>;
+
+const mockBookingData: IBookingData = {
+    availableDates: [
+        { date: '2026-03-25', dayLabel: 'Wed 25', dayName: 'Wednesday', slots: ['09:00', '09:30', '10:00', '10:30', '14:00', '14:30', '15:00'] },
+        { date: '2026-03-26', dayLabel: 'Thu 26', dayName: 'Thursday', slots: ['09:00', '10:00', '11:00', '13:00', '14:00'] },
+        { date: '2026-03-27', dayLabel: 'Fri 27', dayName: 'Friday', slots: ['09:30', '10:30', '11:30'] },
+        { date: '2026-03-28', dayLabel: 'Mon 30', dayName: 'Monday', slots: ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '13:00', '14:00', '15:00', '16:00'] },
+        { date: '2026-03-31', dayLabel: 'Tue 31', dayName: 'Tuesday', slots: ['14:00', '14:30', '15:00', '15:30', '16:00'] },
+    ],
+    timezone: 'Australia/Sydney',
+    meetingDuration: 30,
+};
+
+/** Default dark theme */
+export const Default: Story = {
+    args: {
+        data: mockBookingData,
+        onSlotSelected: (date, time) => console.log('Selected:', date, time),
+    },
+};
+
+/** Light theme */
+export const LightTheme: Story = {
+    args: {
+        data: mockBookingData,
+        onSlotSelected: (date, time) => console.log('Selected:', date, time),
+        theme: {
+            primary: '#337eff',
+            background: '#ffffff',
+            text: '#1a1a2e',
+            textMuted: 'rgba(0,0,0,0.35)',
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: 360, background: '#ffffff', padding: 16, borderRadius: 12 }}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+/** Disabled state (after selection) */
+export const Disabled: Story = {
+    args: {
+        data: mockBookingData,
+        onSlotSelected: (date, time) => console.log('Selected:', date, time),
+        disabled: true,
+    },
+};
+
+/** Limited availability */
+export const LimitedSlots: Story = {
+    args: {
+        data: {
+            availableDates: [
+                { date: '2026-03-26', dayLabel: 'Thu 26', dayName: 'Thursday', slots: ['14:00'] },
+                { date: '2026-03-27', dayLabel: 'Fri 27', dayName: 'Friday', slots: ['09:00', '15:30'] },
+            ],
+            timezone: 'Australia/Sydney',
+            meetingDuration: 30,
+        },
+        onSlotSelected: (date, time) => console.log('Selected:', date, time),
+    },
+};