@rahul_vendure/ai-chat-dashboard 0.1.2 → 0.2.0

package/src/dashboard/components/AiChatToolbarButton.tsx

@@ -0,0 +1,308 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { SparklesIcon, XIcon, Maximize2Icon, ArrowUp, Bot } from 'lucide-react';
+import type { ChatMessage } from '../types';
+import { ChatMessageBubble } from './ChatMessageBubble';
+
+function generateSessionId(): string {
+    return `toolbar-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
+}
+
+function MiniLoadingDots() {
+    return (
+        <div style={{
+            display: 'flex', gap: 10, padding: 12, margin: '8px 0',
+            borderRadius: 10, border: '1px solid var(--border, #e2e8f0)',
+            background: 'var(--background, #fff)',
+        }}>
+            <div style={{
+                width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
+                background: 'var(--foreground, #0f172a)', color: 'var(--background, #fff)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+                <Bot style={{ width: 12, height: 12 }} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 3, paddingTop: 4 }}>
+                <span className="ac-dot" />
+                <span className="ac-dot" style={{ animationDelay: '0.15s' }} />
+                <span className="ac-dot" style={{ animationDelay: '0.3s' }} />
+            </div>
+        </div>
+    );
+}
+
+export function AiChatToolbarButton() {
+    const [open, setOpen] = useState(false);
+    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);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const fabRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+
+    // Close on click outside
+    useEffect(() => {
+        if (!open) return;
+        function handleClick(e: MouseEvent) {
+            if (
+                panelRef.current && !panelRef.current.contains(e.target as Node) &&
+                fabRef.current && !fabRef.current.contains(e.target as Node)
+            ) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+
+    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();
+                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,
+                    },
+                ]);
+                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],
+    );
+
+    const canSend = input.trim() && !isLoading;
+
+    return (
+        <>
+            {/* Hidden toolbar slot */}
+            <span style={{ display: 'none' }} />
+
+            {/* FAB button */}
+            <button
+                ref={fabRef}
+                onClick={() => setOpen(prev => !prev)}
+                style={{
+                    position: 'fixed', zIndex: 9998, bottom: 20, right: 20,
+                    width: 48, height: 48, borderRadius: '50%', border: 'none',
+                    background: 'linear-gradient(135deg, #7c3aed, #4f46e5)',
+                    color: '#fff', cursor: 'pointer',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    boxShadow: '0 4px 12px rgba(79,70,229,0.4)',
+                    transition: 'transform 0.2s, box-shadow 0.2s',
+                }}
+                onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.05)'; e.currentTarget.style.boxShadow = '0 6px 20px rgba(79,70,229,0.5)'; }}
+                onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(79,70,229,0.4)'; }}
+                title="AI Assistant"
+            >
+                {open
+                    ? <XIcon style={{ width: 20, height: 20 }} />
+                    : <SparklesIcon style={{ width: 20, height: 20 }} />
+                }
+            </button>
+
+            {/* Floating chat panel */}
+            {open && (
+                <div
+                    ref={panelRef}
+                    style={{
+                        position: 'fixed', zIndex: 9999,
+                        bottom: 80, right: 20,
+                        width: 400, height: 'min(560px, calc(100vh - 110px))',
+                        display: 'flex', flexDirection: 'column',
+                        borderRadius: 12, overflow: 'hidden',
+                        border: '1px solid var(--border, #e2e8f0)',
+                        background: 'var(--background, #fff)',
+                        boxShadow: '0 16px 48px rgba(0,0,0,0.16)',
+                    }}
+                >
+                    {/* Header */}
+                    <div style={{
+                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                        borderBottom: '1px solid var(--border, #e2e8f0)',
+                        padding: '10px 16px', flexShrink: 0,
+                        background: 'var(--background, #fff)',
+                    }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                            <SparklesIcon style={{ width: 16, height: 16, color: '#7c3aed' }} />
+                            <span style={{ fontSize: 14, fontWeight: 600 }}>AI Assistant</span>
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                            <a
+                                href="/dashboard/extensions/ai-chat"
+                                style={{
+                                    width: 24, height: 24, borderRadius: 6, border: 'none',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    color: 'var(--muted-foreground, #64748b)', textDecoration: 'none',
+                                }}
+                                title="Open full view"
+                            >
+                                <Maximize2Icon style={{ width: 14, height: 14 }} />
+                            </a>
+                            <button
+                                onClick={() => setOpen(false)}
+                                style={{
+                                    width: 24, height: 24, borderRadius: 6, border: 'none',
+                                    background: 'transparent', cursor: 'pointer',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    color: 'var(--muted-foreground, #64748b)',
+                                }}
+                            >
+                                <XIcon style={{ width: 14, height: 14 }} />
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Messages */}
+                    <div style={{ flex: 1, overflowY: 'auto', padding: '8px 12px', minHeight: 0 }}>
+                        {messages.length === 0 ? (
+                            <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
+                                <div style={{ textAlign: 'center', padding: '0 16px' }}>
+                                    <div style={{
+                                        width: 40, height: 40, borderRadius: '50%',
+                                        background: 'rgba(124,58,237,0.1)',
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        margin: '0 auto 8px',
+                                    }}>
+                                        <SparklesIcon style={{ width: 20, height: 20, color: '#7c3aed' }} />
+                                    </div>
+                                    <p style={{ fontSize: 14, fontWeight: 500, margin: '0 0 4px' }}>Ask anything about your store</p>
+                                    <p style={{ fontSize: 12, color: 'var(--muted-foreground, #64748b)', margin: '0 0 12px' }}>
+                                        Products, orders, customers...
+                                    </p>
+                                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
+                                        {['Recent orders', 'Find a product', 'Store overview'].map(q => (
+                                            <button
+                                                key={q}
+                                                onClick={() => sendMessage(q)}
+                                                style={{
+                                                    padding: '4px 12px', borderRadius: 99, fontSize: 12,
+                                                    border: '1px solid var(--border, #e2e8f0)',
+                                                    background: 'transparent', cursor: 'pointer',
+                                                    color: 'var(--muted-foreground, #64748b)',
+                                                }}
+                                            >
+                                                {q}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                {messages.map(msg => (
+                                    <ChatMessageBubble key={msg.id} message={msg} />
+                                ))}
+                                {isLoading && <MiniLoadingDots />}
+                                <div ref={scrollRef} style={{ height: 4 }} />
+                            </>
+                        )}
+                    </div>
+
+                    {/* Input */}
+                    <div style={{
+                        borderTop: '1px solid var(--border, #e2e8f0)',
+                        padding: '10px 12px', flexShrink: 0,
+                        background: 'var(--background, #fff)',
+                    }}>
+                        <form
+                            style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}
+                            onSubmit={e => { e.preventDefault(); sendMessage(input); }}
+                        >
+                            <textarea
+                                value={input}
+                                onChange={e => setInput(e.target.value)}
+                                onKeyDown={e => {
+                                    if (e.key === 'Enter' && !e.shiftKey) {
+                                        e.preventDefault();
+                                        if (canSend) sendMessage(input);
+                                    }
+                                }}
+                                placeholder="Ask something..."
+                                disabled={isLoading}
+                                rows={1}
+                                style={{
+                                    flex: 1, resize: 'none', borderRadius: 8,
+                                    border: '1px solid var(--border, #e2e8f0)',
+                                    background: 'var(--background, #fff)',
+                                    padding: '8px 12px', fontSize: 13, outline: 'none',
+                                    color: 'var(--foreground, #0f172a)',
+                                    maxHeight: 80, minHeight: 36, fontFamily: 'inherit',
+                                    opacity: isLoading ? 0.5 : 1,
+                                }}
+                            />
+                            <button
+                                type="submit"
+                                disabled={!canSend}
+                                style={{
+                                    width: 36, height: 36, borderRadius: 8, border: 'none',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    flexShrink: 0, cursor: canSend ? 'pointer' : 'default',
+                                    background: canSend ? 'var(--primary, #6366f1)' : 'var(--muted, #f1f5f9)',
+                                    color: canSend ? '#fff' : 'var(--muted-foreground, #94a3b8)',
+                                    transition: 'background 0.15s',
+                                }}
+                            >
+                                <ArrowUp style={{ width: 16, height: 16 }} />
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

package/src/dashboard/components/ChatEmptyState.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+    Package, ShoppingCart, Users,
+    Layers, Truck, BarChart3, ArrowRight,
+} from 'lucide-react';
+
+const SUGGESTIONS = [
+    { text: 'Show recent orders', icon: ShoppingCart },
+    { text: 'Search for a product', icon: Package },
+    { text: 'List all collections', icon: Layers },
+    { text: 'Find a customer', icon: Users },
+    { text: 'Check shipping methods', icon: Truck },
+    { text: 'Show store overview', icon: BarChart3 },
+];
+
+interface ChatEmptyStateProps {
+    onSend: (text: string) => void;
+}
+
+export function ChatEmptyState({ onSend }: ChatEmptyStateProps) {
+    return (
+        <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
+            <div style={{ maxWidth: 440, textAlign: 'center' }}>
+                <h1 style={{ fontSize: 24, fontWeight: 600, color: 'var(--foreground, #0f172a)', marginBottom: 12 }}>
+                    AI Assistant
+                </h1>
+                <p style={{ fontSize: 14, color: 'var(--muted-foreground, #64748b)', lineHeight: 1.6, marginBottom: 20 }}>
+                    Ask me anything about your store. I can help with products, orders, customers,
+                    and more. Here are some ideas to get you started:
+                </p>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                    {SUGGESTIONS.map(s => {
+                        const Icon = s.icon;
+                        return (
+                            <button
+                                key={s.text}
+                                onClick={() => onSend(s.text)}
+                                style={{
+                                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                    padding: 12, borderRadius: 8, textAlign: 'left', fontSize: 13,
+                                    border: '1px solid var(--border, #e2e8f0)',
+                                    background: 'var(--background, #fff)',
+                                    color: 'var(--foreground, #0f172a)',
+                                    cursor: 'pointer', transition: 'background 0.15s',
+                                }}
+                                onMouseEnter={e => (e.currentTarget.style.background = 'var(--muted, #f1f5f9)')}
+                                onMouseLeave={e => (e.currentTarget.style.background = 'var(--background, #fff)')}
+                            >
+                                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                    <Icon style={{ width: 16, height: 16, color: 'var(--muted-foreground, #64748b)' }} />
+                                    <span>{s.text}</span>
+                                </span>
+                                <ArrowRight style={{ width: 16, height: 16, color: 'var(--muted-foreground, #64748b)', opacity: 0.3 }} />
+                            </button>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/dashboard/components/ChatInput.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+interface ChatInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    disabled: boolean;
+}
+
+export function ChatInput({ value, onChange, onSubmit, disabled }: ChatInputProps) {
+    const canSend = value.trim() && !disabled;
+    const [focused, setFocused] = useState(false);
+
+    return (
+        <form
+            style={{ padding: '16px 20px' }}
+            onSubmit={e => {
+                e.preventDefault();
+                if (canSend) onSubmit();
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex', alignItems: 'flex-end', gap: 12,
+                    borderRadius: 12,
+                    border: `1px solid ${focused ? 'var(--primary, #6366f1)' : 'var(--border, #e2e8f0)'}`,
+                    background: 'var(--background, #fff)',
+                    padding: '10px 16px',
+                    boxShadow: focused ? '0 0 0 3px rgba(99,102,241,0.12)' : '0 1px 2px rgba(0,0,0,0.04)',
+                    transition: 'border-color 0.15s, box-shadow 0.15s',
+                    opacity: disabled ? 0.5 : 1,
+                }}
+            >
+                <textarea
+                    value={value}
+                    onChange={e => onChange(e.target.value)}
+                    onFocus={() => setFocused(true)}
+                    onBlur={() => setFocused(false)}
+                    onKeyDown={e => {
+                        if (e.key === 'Enter' && !e.shiftKey) {
+                            e.preventDefault();
+                            if (canSend) onSubmit();
+                        }
+                    }}
+                    placeholder="Ask the AI assistant..."
+                    disabled={disabled}
+                    rows={1}
+                    style={{
+                        flex: 1, resize: 'none', border: 'none', outline: 'none',
+                        background: 'transparent', padding: '6px 0',
+                        fontSize: 14, lineHeight: 1.5,
+                        color: 'var(--foreground, #0f172a)',
+                        maxHeight: 120, minHeight: 32,
+                        fontFamily: 'inherit',
+                    }}
+                />
+                <button
+                    type="submit"
+                    disabled={!canSend}
+                    style={{
+                        width: 28, height: 28, borderRadius: 8,
+                        border: 'none', cursor: canSend ? 'pointer' : 'default',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        flexShrink: 0, marginBottom: 2,
+                        background: canSend ? 'var(--primary, #6366f1)' : 'var(--muted, #f1f5f9)',
+                        color: canSend ? '#fff' : 'var(--muted-foreground, #94a3b8)',
+                        transition: 'background 0.15s, transform 0.1s',
+                    }}
+                >
+                    <ArrowUp style={{ width: 14, height: 14 }} />
+                </button>
+            </div>
+        </form>
+    );
+}

package/src/dashboard/components/ChatMessageBubble.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Bot, User } from 'lucide-react';
+import type { ChatMessage } from '../types';
+import { ProductCard } from './ProductCard';
+import { OrderCard } from './OrderCard';
+
+interface ChatMessageBubbleProps {
+    message: ChatMessage;
+}
+
+export function ChatMessageBubble({ message }: ChatMessageBubbleProps) {
+    const isUser = message.role === 'user';
+
+    if (isUser) {
+        return (
+            <div style={{ display: 'flex', gap: 12, padding: '16px 0' }}>
+                <div style={{
+                    width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
+                    background: 'var(--muted, #f1f5f9)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    border: '1px solid var(--border, #e2e8f0)',
+                }}>
+                    <User style={{ width: 16, height: 16, color: 'var(--muted-foreground, #64748b)' }} />
+                </div>
+                <div style={{ flex: 1, paddingTop: 4, fontSize: 13, color: 'var(--foreground, #0f172a)', whiteSpace: 'pre-wrap' }}>
+                    {message.content}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{
+            borderRadius: 12, border: '1px solid var(--border, #e2e8f0)',
+            background: 'var(--background, #fff)', margin: '16px 0',
+            boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
+        }}>
+            <div style={{ display: 'flex', gap: 12, padding: 16 }}>
+                <div style={{
+                    width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
+                    background: 'var(--foreground, #0f172a)', color: 'var(--background, #fff)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                    <Bot style={{ width: 16, height: 16 }} />
+                </div>
+                <div style={{ minWidth: 0, flex: 1, overflow: 'hidden' }}>
+                    <div className="ac-md" style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--foreground, #0f172a)' }}>
+                        <Markdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                                // Hide inline images — products are shown as cards below
+                                img: () => null,
+                            }}
+                        >
+                            {message.content}
+                        </Markdown>
+                    </div>
+                </div>
+            </div>
+
+            {/* Attached cards */}
+            {(message.products?.length || message.orders?.length) ? (
+                <div style={{
+                    borderTop: '1px solid var(--border, #e2e8f0)',
+                    background: 'var(--muted, #f8fafc)', padding: 12,
+                    borderRadius: '0 0 12px 12px',
+                }}>
+                    {message.products && message.products.length > 0 && (
+                        <div style={{ display: 'flex', gap: 8, overflowX: 'auto' }}>
+                            {message.products.map(p => (
+                                <ProductCard key={p.id} product={p} />
+                            ))}
+                        </div>
+                    )}
+                    {message.orders && message.orders.length > 0 && (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                            {message.orders.map(o => (
+                                <OrderCard key={o.id} order={o} />
+                            ))}
+                        </div>
+                    )}
+                </div>
+            ) : null}
+
+            <style>{`
+                .ac-md p { margin: 6px 0; }
+                .ac-md p:first-child { margin-top: 0; }
+                .ac-md p:last-child { margin-bottom: 0; }
+                .ac-md strong { font-weight: 600; }
+                .ac-md ul, .ac-md ol { margin: 4px 0 8px; padding-left: 20px; }
+                .ac-md li { margin: 2px 0; }
+                .ac-md code { background: var(--muted, #f1f5f9); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
+                .ac-md pre { background: var(--muted, #f1f5f9); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; }
+                .ac-md pre code { background: none; padding: 0; }
+                .ac-md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; overflow: hidden; }
+                .ac-md thead { background: var(--muted, #f1f5f9); }
+                .ac-md th { text-align: left; padding: 8px 12px; font-weight: 600; font-size: 12px; border-bottom: 2px solid var(--border, #e2e8f0); }
+                .ac-md td { padding: 8px 12px; border-bottom: 1px solid var(--border, #f1f5f9); }
+                .ac-md tbody tr:last-child td { border-bottom: none; }
+                .ac-md a { color: var(--primary, #6366f1); text-decoration: underline; }
+                .ac-md h1 { font-size: 18px; font-weight: 600; margin: 12px 0 8px; }
+                .ac-md h2 { font-size: 16px; font-weight: 600; margin: 10px 0 6px; }
+                .ac-md h3 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; }
+                .ac-md img { display: none; }
+            `}</style>
+        </div>
+    );
+}

package/src/dashboard/components/EmbedAllButton.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { api } from '@vendure/dashboard';
+import { Database, Loader2, Check, AlertCircle } from 'lucide-react';
+
+type EmbedStatus = 'idle' | 'loading' | 'success' | 'error';
+
+const TRIGGER_EMBED_ALL = `
+    mutation TriggerEmbedAll {
+        triggerEmbedAll {
+            jobId
+            message
+        }
+    }
+`;
+
+export function EmbedAllButton() {
+    const [status, setStatus] = useState<EmbedStatus>('idle');
+
+    const handleEmbedAll = async () => {
+        if (status === 'loading') return;
+        setStatus('loading');
+
+        try {
+            const result = await api.mutate(TRIGGER_EMBED_ALL);
+            if (!result.triggerEmbedAll) throw new Error('No result');
+            setStatus('success');
+            setTimeout(() => setStatus('idle'), 3000);
+        } catch {
+            setStatus('error');
+            setTimeout(() => setStatus('idle'), 3000);
+        }
+    };
+
+    const Icon = status === 'loading' ? Loader2
+        : status === 'success' ? Check
+        : status === 'error' ? AlertCircle
+        : Database;
+
+    const label = status === 'loading' ? 'Embedding...'
+        : status === 'success' ? 'Done'
+        : status === 'error' ? 'Failed'
+        : 'Embed All';
+
+    return (
+        <button
+            onClick={handleEmbedAll}
+            disabled={status === 'loading'}
+            style={{
+                display: 'inline-flex', alignItems: 'center', gap: 6,
+                padding: '4px 8px', borderRadius: 6, border: 'none',
+                background: 'transparent', cursor: status === 'loading' ? 'wait' : 'pointer',
+                fontSize: 12, fontWeight: 500, fontFamily: 'inherit',
+                color: status === 'success' ? '#10b981'
+                    : status === 'error' ? '#ef4444'
+                    : 'var(--muted-foreground, #64748b)',
+                transition: 'color 0.15s',
+            }}
+            onMouseEnter={e => { if (status === 'idle') e.currentTarget.style.color = 'var(--foreground, #0f172a)'; }}
+            onMouseLeave={e => { if (status === 'idle') e.currentTarget.style.color = 'var(--muted-foreground, #64748b)'; }}
+        >
+            <Icon style={{
+                width: 12, height: 12,
+                ...(status === 'loading' ? { animation: 'ac-spin 1s linear infinite' } : {}),
+            }} />
+            {label}
+            <style>{`@keyframes ac-spin { to { transform: rotate(360deg); } }`}</style>
+        </button>
+    );
+}