@rahul_vendure/ai-chat-dashboard 0.1.2 → 0.2.0

package/src/dashboard/components/OrderCard.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { ArrowUpRight } from 'lucide-react';
+import type { Order } from '../types';
+
+interface OrderCardProps {
+    order: Order;
+}
+
+function getStateColor(state: string): string {
+    switch (state) {
+        case 'PaymentSettled':
+        case 'Delivered':
+            return '#10b981';
+        case 'Cancelled':
+            return '#ef4444';
+        case 'Shipped':
+        case 'PartiallyShipped':
+            return '#3b82f6';
+        default:
+            return '#94a3b8';
+    }
+}
+
+export function OrderCard({ order }: OrderCardProps) {
+    const total = `$${(order.total / 100).toFixed(2)}`;
+    const date = order.orderPlacedAt
+        ? new Date(order.orderPlacedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+        : '';
+    const [hovered, setHovered] = useState(false);
+
+    return (
+        <div
+            style={{
+                display: 'flex', alignItems: 'center', gap: 16,
+                borderRadius: 8, padding: '12px 16px', cursor: 'pointer',
+                border: '1px solid var(--border, #e2e8f0)',
+                background: hovered ? 'var(--muted, #f8fafc)' : 'var(--background, #fff)',
+                transition: 'background 0.15s',
+            }}
+            onClick={() => window.open(`/dashboard/orders/${order.id}`, '_self')}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+        >
+            {/* Status dot */}
+            <div style={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, background: getStateColor(order.state) }} />
+
+            {/* Info */}
+            <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <span style={{ fontFamily: 'monospace', fontSize: 14, fontWeight: 500, color: 'var(--foreground, #0f172a)' }}>{order.code}</span>
+                    <span style={{ fontSize: 12, color: 'var(--muted-foreground, #64748b)' }}>{order.state}</span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 2, fontSize: 12, color: 'var(--muted-foreground, #64748b)' }}>
+                    {date && <span>{date}</span>}
+                    <span>{order.lines.length} item{order.lines.length !== 1 ? 's' : ''}</span>
+                </div>
+            </div>
+
+            {/* Total + arrow */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground, #0f172a)', fontVariantNumeric: 'tabular-nums' }}>{total}</span>
+                <ArrowUpRight style={{ width: 14, height: 14, color: 'var(--muted-foreground, #94a3b8)', opacity: hovered ? 1 : 0, transition: 'opacity 0.15s' }} />
+            </div>
+        </div>
+    );
+}

package/src/dashboard/components/ProductCard.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { ImageIcon } from 'lucide-react';
+import type { Product } from '../types';
+
+interface ProductCardProps {
+    product: Product;
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+    const price = `$${(product.price / 100).toFixed(2)}`;
+    const [hovered, setHovered] = useState(false);
+
+    return (
+        <div
+            style={{
+                flexShrink: 0, width: 128, cursor: 'pointer', borderRadius: 8, overflow: 'hidden',
+                border: `1px solid ${hovered ? 'var(--foreground, #334155)' : 'var(--border, #e2e8f0)'}`,
+                background: 'var(--background, #fff)',
+                transition: 'border-color 0.15s',
+            }}
+            onClick={() => window.open(`/dashboard/products/${product.id}`, '_blank')}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+        >
+            <div style={{ height: 80, width: '100%', overflow: 'hidden', background: 'var(--muted, #f1f5f9)' }}>
+                {product.image ? (
+                    <img src={product.image} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                ) : (
+                    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.25 }}>
+                        <ImageIcon style={{ width: 20, height: 20, color: 'var(--muted-foreground, #94a3b8)' }} />
+                    </div>
+                )}
+            </div>
+            <div style={{ padding: '8px 10px' }}>
+                <p style={{ fontSize: 11, fontWeight: 500, color: 'var(--foreground, #0f172a)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', margin: 0 }}>{product.name}</p>
+                <p style={{ fontSize: 11, color: 'var(--muted-foreground, #64748b)', margin: '2px 0 0' }}>{price}</p>
+            </div>
+        </div>
+    );
+}

package/src/dashboard/components/SessionSidebar.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Plus, Trash2, MessageSquare } from 'lucide-react';
+import type { SessionSummary } from '../hooks/use-session-list';
+
+function formatDate(d: string | null): string {
+    if (!d) return '';
+    const date = new Date(d);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60_000);
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHrs = Math.floor(diffMins / 60);
+    if (diffHrs < 24) return `${diffHrs}h ago`;
+    const diffDays = Math.floor(diffHrs / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+interface SessionSidebarProps {
+    sessions: SessionSummary[];
+    activeSessionId: string;
+    onSelect: (sessionId: string) => void;
+    onNew: () => void;
+    onDelete: (sessionId: string) => void;
+}
+
+export function SessionSidebar({ sessions, activeSessionId, onSelect, onNew, onDelete }: SessionSidebarProps) {
+    return (
+        <div style={{
+            display: 'flex', flexDirection: 'column', height: '100%',
+            borderRight: '1px solid var(--border, #e2e8f0)',
+            background: 'var(--muted, #f8fafc)',
+            width: 240, minWidth: 200, flexShrink: 0,
+        }}>
+            {/* New chat button */}
+            <div style={{ padding: 12, borderBottom: '1px solid var(--border, #e2e8f0)' }}>
+                <button
+                    onClick={onNew}
+                    style={{
+                        display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'center',
+                        gap: 8, padding: '8px 12px', borderRadius: 6,
+                        border: '1px solid var(--border, #e2e8f0)',
+                        background: 'var(--background, #fff)',
+                        fontSize: 13, fontWeight: 500, cursor: 'pointer',
+                        color: 'var(--foreground, #0f172a)',
+                    }}
+                >
+                    <Plus style={{ width: 16, height: 16 }} />
+                    New Chat
+                </button>
+            </div>
+
+            {/* Session list */}
+            <div style={{ flex: 1, overflowY: 'auto', padding: 8 }}>
+                {sessions.length === 0 && (
+                    <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--muted-foreground, #64748b)', padding: '24px 0' }}>
+                        No previous chats
+                    </div>
+                )}
+                {sessions.map(s => {
+                    const isActive = s.sessionId === activeSessionId;
+                    return <SessionItem key={s.sessionId} session={s} isActive={isActive} onSelect={onSelect} onDelete={onDelete} />;
+                })}
+            </div>
+        </div>
+    );
+}
+
+function SessionItem({ session, isActive, onSelect, onDelete }: {
+    session: SessionSummary;
+    isActive: boolean;
+    onSelect: (id: string) => void;
+    onDelete: (id: string) => void;
+}) {
+    const [hovered, setHovered] = useState(false);
+
+    return (
+        <div
+            style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '8px 10px', borderRadius: 6, cursor: 'pointer',
+                marginBottom: 2,
+                background: isActive ? 'var(--muted, #e2e8f0)' : hovered ? 'rgba(0,0,0,0.03)' : 'transparent',
+                color: isActive ? 'var(--foreground, #0f172a)' : 'var(--muted-foreground, #64748b)',
+                transition: 'background 0.1s',
+            }}
+            onClick={() => onSelect(session.sessionId)}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+        >
+            <MessageSquare style={{ width: 14, height: 14, flexShrink: 0 }} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{
+                    fontSize: 12, fontWeight: 500,
+                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                }}>
+                    {session.title || 'Untitled'}
+                </div>
+                <div style={{ fontSize: 10, opacity: 0.6 }}>
+                    {formatDate(session.lastMessageAt || session.createdAt)}
+                </div>
+            </div>
+            {hovered && (
+                <button
+                    onClick={e => { e.stopPropagation(); onDelete(session.sessionId); }}
+                    style={{
+                        padding: 4, borderRadius: 4, border: 'none',
+                        background: 'transparent', cursor: 'pointer',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    }}
+                    title="Delete"
+                >
+                    <Trash2 style={{ width: 12, height: 12, color: '#ef4444' }} />
+                </button>
+            )}
+        </div>
+    );
+}

package/src/dashboard/hooks/use-admin-chat.ts

@@ -0,0 +1,138 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import type { ChatMessage } from '../types';
+
+function generateSessionId(): string {
+    return `admin-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
+}
+
+export function useAdminChat() {
+    const [messages, setMessages] = useState<ChatMessage[]>([]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [sessionId, setSessionId] = useState<string>(generateSessionId);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+
+    const newConversation = useCallback(() => {
+        setMessages([]);
+        setSessionId(generateSessionId());
+    }, []);
+
+    /** Load a previous session from the server. */
+    const loadSession = useCallback(async (sid: string) => {
+        try {
+            const sessionToken = localStorage.getItem('vendure-session-token');
+            const channelToken = localStorage.getItem('vendure-selected-channel-token');
+            const headers: Record<string, string> = {};
+            if (sessionToken) headers['Authorization'] = `Bearer ${sessionToken}`;
+            if (channelToken) headers['vendure-token'] = channelToken;
+
+            const res = await fetch(`/admin-ai-chat/sessions/${sid}`, { headers, credentials: 'include' });
+            if (!res.ok) return;
+            const session = await res.json();
+            if (!session?.messages) return;
+
+            setSessionId(sid);
+            setMessages(
+                session.messages.map((m: any, i: number) => ({
+                    id: `${m.role[0]}-${i}-${Date.now()}`,
+                    role: m.role,
+                    content: m.content,
+                    ...(m.products?.length ? { products: m.products } : {}),
+                    ...(m.collections?.length ? { collections: m.collections } : {}),
+                    ...(m.orders?.length ? { orders: m.orders } : {}),
+                })),
+            );
+        } catch {
+            // ignore
+        }
+    }, []);
+
+    const sendMessage = useCallback(
+        async (text: string) => {
+            if (!text.trim() || isLoading) return;
+
+            const trimmed = text.trim();
+            setMessages(prev => [
+                ...prev,
+                { id: `u-${Date.now()}`, role: 'user', content: trimmed },
+            ]);
+            setInput('');
+            setIsLoading(true);
+
+            try {
+                const sessionToken = localStorage.getItem('vendure-session-token');
+                const channelToken = localStorage.getItem('vendure-selected-channel-token');
+                const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+                if (sessionToken) headers['Authorization'] = `Bearer ${sessionToken}`;
+                if (channelToken) headers['vendure-token'] = channelToken;
+
+                const res = await fetch('/admin-ai-chat/chat', {
+                    method: 'POST',
+                    headers,
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        message: trimmed,
+                        sessionId,
+                        history: messages.map(m => ({ role: m.role, content: m.content })),
+                        currentPage: window.location.pathname,
+                    }),
+                });
+
+                const data = await res.json();
+
+                // Server may return a sessionId (first turn creates it)
+                if (data.sessionId && data.sessionId !== sessionId) {
+                    setSessionId(data.sessionId);
+                }
+
+                setMessages(prev => [
+                    ...prev,
+                    {
+                        id: `a-${Date.now()}`,
+                        role: 'assistant',
+                        content: data.message ?? 'No response',
+                        products: data.products,
+                        collections: data.collections,
+                        orders: data.orders,
+                    },
+                ]);
+
+                // Handle navigation instruction from AI
+                if (data.navigateTo) {
+                    setTimeout(() => {
+                        const path = data.navigateTo.startsWith('/') ? `/dashboard${data.navigateTo}` : `/dashboard/${data.navigateTo}`;
+                        window.location.href = path;
+                    }, 1200);
+                }
+            } catch (err) {
+                setMessages(prev => [
+                    ...prev,
+                    {
+                        id: `e-${Date.now()}`,
+                        role: 'assistant',
+                        content: `Error: ${err instanceof Error ? err.message : 'Request failed'}`,
+                    },
+                ]);
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [isLoading, messages, sessionId],
+    );
+
+    return {
+        messages,
+        input,
+        setInput,
+        isLoading,
+        scrollRef,
+        sendMessage,
+        sessionId,
+        newConversation,
+        loadSession,
+    };
+}

package/src/dashboard/hooks/use-session-list.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export interface SessionSummary {
+    sessionId: string;
+    title: string;
+    messageCount: number;
+    model: string;
+    isActive: boolean;
+    lastMessageAt: string | null;
+    createdAt: string;
+}
+
+function getHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {};
+    const sessionToken = localStorage.getItem('vendure-session-token');
+    const channelToken = localStorage.getItem('vendure-selected-channel-token');
+    if (sessionToken) headers['Authorization'] = `Bearer ${sessionToken}`;
+    if (channelToken) headers['vendure-token'] = channelToken;
+    return headers;
+}
+
+export function useSessionList() {
+    const [sessions, setSessions] = useState<SessionSummary[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        try {
+            const res = await fetch('/admin-ai-chat/sessions?take=50', {
+                headers: getHeaders(),
+                credentials: 'include',
+            });
+            if (!res.ok) return;
+            const data = await res.json();
+            setSessions(
+                (data.items ?? []).map((s: any) => ({
+                    sessionId: s.sessionId,
+                    title: s.title,
+                    messageCount: s.messageCount,
+                    model: s.model,
+                    isActive: s.isActive,
+                    lastMessageAt: s.lastMessageAt,
+                    createdAt: s.createdAt,
+                })),
+            );
+        } catch {
+            // ignore
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const deleteSession = useCallback(async (sessionId: string) => {
+        try {
+            await fetch(`/admin-ai-chat/sessions/${sessionId}`, {
+                method: 'DELETE',
+                headers: getHeaders(),
+                credentials: 'include',
+            });
+            setSessions(prev => prev.filter(s => s.sessionId !== sessionId));
+        } catch {
+            // ignore
+        }
+    }, []);
+
+    useEffect(() => { refresh(); }, [refresh]);
+
+    return { sessions, loading, refresh, deleteSession };
+}

package/src/dashboard/index.tsx

@@ -1,33 +1,13 @@
 import { defineDashboardExtension } from '@vendure/dashboard';
 import { AdminChatWidget } from './AdminChatWidget';
+import { AiChatToolbarButton } from './components/AiChatToolbarButton';
+import { EmbedAllButton } from './components/EmbedAllButton';
 import React from 'react';
 
 function AiChatPage() {
     return (
-        <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: 'calc(100vh - 80px)',
-            padding: '24px',
-        }}>
-            <h1 style={{
-                fontSize: '24px',
-                fontWeight: 600,
-                marginBottom: '16px',
-                color: 'var(--color-foreground, #0f172a)',
-            }}>
-                AI Chat Assistant
-            </h1>
-            <div style={{
-                flex: 1,
-                minHeight: 0,
-                border: '1px solid var(--color-border, #e2e8f0)',
-                borderRadius: '8px',
-                overflow: 'hidden',
-                backgroundColor: 'var(--color-card, #fff)',
-            }}>
-                <AdminChatWidget />
-            </div>
+        <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 64px)', minHeight: 0 }}>
+            <AdminChatWidget />
         </div>
     );
 }
@@ -52,4 +32,18 @@ defineDashboardExtension({
             order: 150,
         },
     ],
+    actionBarItems: [
+        {
+            pageId: 'global-setting-detail',
+            id: 'embed-all-button',
+            component: () => <EmbedAllButton />,
+        },
+    ],
+    toolbarItems: [
+        {
+            id: 'ai-chat-toolbar',
+            component: AiChatToolbarButton,
+            position: { itemId: 'alerts', order: 'before' },
+        },
+    ],
 });

package/src/dashboard/types.ts

@@ -0,0 +1,46 @@
+// ─── Types (mirror backend response) ────────────────────────────────
+
+export interface Product {
+    id: string;
+    name: string;
+    slug: string;
+    price: number;
+    image: string | null;
+    variantId: string;
+}
+
+export interface Collection {
+    id: string;
+    name: string;
+    slug: string;
+}
+
+export interface OrderLine {
+    productName: string;
+    quantity: number;
+    image: string | null;
+    linePriceWithTax: number;
+}
+
+export interface Order {
+    id: string;
+    code: string;
+    state: string;
+    total: number;
+    orderPlacedAt: string | null;
+    lines: OrderLine[];
+    fulfillments: Array<{
+        state: string;
+        method: string;
+        trackingCode: string | null;
+    }>;
+}
+
+export interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    products?: Product[];
+    collections?: Collection[];
+    orders?: Order[];
+}