spres-react 1.0.1 → 1.0.2

package/README.md

@@ -83,7 +83,7 @@ import { ChatPanel } from 'spres-react';
   initialSessionId="session-123"
   design="cloud"
 />
-````
+```
 
 ## Customization options
 

package/dist/ChatPanel.d.ts

@@ -0,0 +1,2 @@
+import { ChatPanelProps } from './types';
+export declare function ChatPanel({ sdk, primaryColor, accentColor, backgroundColor, headerText, sidebarTitle, initialSessionId, design }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ChatPanel.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useBrainboxChat } from './useBrainboxChat';
+const sidebarStyle = {
+    width: '220px',
+    background: '#F8FAFC',
+    borderRight: '1px solid #E2E8F0',
+    padding: '16px',
+    boxSizing: 'border-box'
+};
+const panelStyle = {
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+    boxShadow: '0 24px 80px rgba(15, 23, 42, 0.12)'
+};
+const bubbleStyle = {
+    borderRadius: '18px',
+    padding: '12px 14px',
+    marginBottom: '12px',
+    maxWidth: '100%'
+};
+function renderMessage(message, primaryColor, accentColor) {
+    const isUser = message.role === 'user';
+    return (_jsx("div", { style: { display: 'flex', justifyContent: isUser ? 'flex-end' : 'flex-start' }, children: _jsx("div", { style: {
+                ...bubbleStyle,
+                background: isUser ? primaryColor : accentColor,
+                color: '#fff',
+                borderRadius: isUser ? '18px 18px 6px 18px' : '18px 18px 18px 6px'
+            }, children: message.text }) }, message.id));
+}
+export function ChatPanel({ sdk, primaryColor = '#0F172A', accentColor = '#2563EB', backgroundColor = '#FFFFFF', headerText = 'Brainbox Chat', sidebarTitle = 'History', initialSessionId, design = 'cloud' }) {
+    const { messages, loading, error, sendMessage, sendVoiceNote, createSession, sessionId } = useBrainboxChat(sdk);
+    const [input, setInput] = useState('');
+    const [voiceNote, setVoiceNote] = useState('');
+    const endRef = useRef(null);
+    useEffect(() => {
+        if (initialSessionId) {
+            // session concept is preserved but not used for UI state yet
+        }
+    }, [initialSessionId]);
+    useEffect(() => {
+        var _a;
+        (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    const handleSend = async () => {
+        if (!input.trim())
+            return;
+        await sendMessage(input.trim());
+        setInput('');
+    };
+    const handleVoiceNote = async () => {
+        if (!voiceNote.trim())
+            return;
+        await sendVoiceNote(voiceNote.trim());
+        setVoiceNote('');
+    };
+    const statusList = useMemo(() => [
+        { label: 'API status', value: 'Connected' },
+        { label: 'Session', value: sessionId || 'None' },
+        { label: 'Design', value: design },
+        { label: 'Real-time', value: 'Stream-ready' }
+    ], [sessionId, design]);
+    return (_jsxs("div", { style: { ...panelStyle, background: backgroundColor, minHeight: '560px' }, children: [_jsxs("aside", { style: sidebarStyle, children: [_jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { style: { margin: 0, fontSize: '18px', color: '#111827' }, children: sidebarTitle }), _jsx("p", { style: { marginTop: '8px', fontSize: '13px', color: '#475569' }, children: "Saved chat threads and endpoints." })] }), _jsx("div", { style: { marginBottom: '18px' }, children: statusList.map(item => (_jsxs("div", { style: { marginBottom: '12px' }, children: [_jsx("strong", { style: { display: 'block', color: '#334155', fontSize: '13px' }, children: item.label }), _jsx("span", { style: { color: '#475569', fontSize: '13px' }, children: item.value })] }, item.label))) }), _jsx("button", { onClick: () => createSession('Chat Panel Session'), style: {
+                            width: '100%',
+                            background: accentColor,
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: '12px',
+                            padding: '12px',
+                            cursor: 'pointer'
+                        }, children: "Create Session" })] }), _jsxs("main", { style: { flex: 1, display: 'flex', flexDirection: 'column', padding: '20px', boxSizing: 'border-box' }, children: [_jsxs("header", { style: { marginBottom: '16px' }, children: [_jsx("h2", { style: { margin: 0, color: primaryColor }, children: headerText }), _jsx("p", { style: { marginTop: '8px', color: '#475569' }, children: "Use the built-in chat UI with instant backend communication." })] }), _jsxs("section", { style: { flex: 1, overflowY: 'auto', paddingRight: '8px', marginBottom: '16px' }, children: [messages.length === 0 ? (_jsx("div", { style: { color: '#64748B', fontSize: '14px' }, children: "Your chat history appears here. Send a message to start." })) : (messages.map(message => renderMessage(message, accentColor, '#0F172A'))), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #E2E8F0', paddingTop: '16px' }, children: [_jsxs("div", { style: { display: 'flex', gap: '8px', marginBottom: '10px', flexWrap: 'wrap' }, children: [_jsx("input", { value: input, onChange: event => setInput(event.target.value), onKeyDown: event => event.key === 'Enter' && handleSend(), placeholder: "Type a message...", style: { flex: 1, minWidth: '200px', padding: '12px 14px', border: '1px solid #CBD5E1', borderRadius: '14px' } }), _jsx("button", { onClick: handleSend, style: {
+                                            background: primaryColor,
+                                            color: '#fff',
+                                            border: 'none',
+                                            borderRadius: '14px',
+                                            padding: '12px 18px',
+                                            cursor: 'pointer'
+                                        }, children: loading ? 'Sending...' : 'Send' })] }), _jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx("input", { value: voiceNote, onChange: event => setVoiceNote(event.target.value), placeholder: "Voice note text (demo)", style: { flex: 1, minWidth: '200px', padding: '12px 14px', border: '1px solid #CBD5E1', borderRadius: '14px' } }), _jsx("button", { onClick: handleVoiceNote, style: {
+                                            background: accentColor,
+                                            color: '#fff',
+                                            border: 'none',
+                                            borderRadius: '14px',
+                                            padding: '12px 18px',
+                                            cursor: 'pointer'
+                                        }, children: "Add Voice Note" })] }), error && _jsx("div", { style: { marginTop: '12px', color: '#DC2626' }, children: error })] })] })] }));
+}

package/dist/ChatWidget.d.ts

@@ -0,0 +1,2 @@
+import { ChatWidgetProps } from './types';
+export declare function ChatWidget({ sdk, position, primaryColor, accentColor, backgroundColor, buttonText, placeholder, width, height, design }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/ChatWidget.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { useBrainboxChat } from './useBrainboxChat';
+const defaultButtonStyle = {
+    border: 'none',
+    borderRadius: '999px',
+    color: '#fff',
+    cursor: 'pointer',
+    boxShadow: '0 8px 18px rgba(0,0,0,0.16)'
+};
+const bubbleStyle = {
+    borderRadius: '18px',
+    padding: '12px 14px',
+    marginBottom: '10px',
+    lineHeight: 1.5,
+    maxWidth: '100%'
+};
+function renderMessage(message, primaryColor, accentColor) {
+    const isUser = message.role === 'user';
+    const containerStyle = {
+        display: 'flex',
+        justifyContent: isUser ? 'flex-end' : 'flex-start'
+    };
+    return (_jsx("div", { style: containerStyle, children: _jsx("div", { style: {
+                ...bubbleStyle,
+                background: isUser ? primaryColor : accentColor,
+                color: '#fff',
+                borderRadius: isUser ? '18px 18px 6px 18px' : '18px 18px 18px 6px'
+            }, children: message.text }) }, message.id));
+}
+export function ChatWidget({ sdk, position = 'bottom-right', primaryColor = '#3B82F6', accentColor = '#111827', backgroundColor = '#F8FAFC', buttonText = 'Support', placeholder = 'Ask a question...', width = '340px', height = '480px', design = 'support' }) {
+    const [open, setOpen] = useState(false);
+    const [input, setInput] = useState('');
+    const { messages, loading, error, sendMessage } = useBrainboxChat(sdk);
+    const endRef = useRef(null);
+    const positionStyle = useMemo(() => {
+        const base = {
+            position: 'fixed',
+            zIndex: 9999,
+            maxWidth: width,
+            width
+        };
+        if (position.includes('bottom'))
+            base.bottom = '20px';
+        if (position.includes('top'))
+            base.top = '20px';
+        if (position.includes('right'))
+            base.right = '20px';
+        if (position.includes('left'))
+            base.left = '20px';
+        if (position === 'center') {
+            base.left = '50%';
+            base.transform = 'translateX(-50%)';
+            base.bottom = '20px';
+        }
+        return base;
+    }, [position, width]);
+    const handleSend = async () => {
+        if (!input.trim())
+            return;
+        await sendMessage(input.trim());
+        setInput('');
+    };
+    const headerText = design === 'support' ? 'Support Chat' : 'AI Assistant';
+    return (_jsxs("div", { style: positionStyle, children: [open && (_jsxs("div", { style: {
+                    borderRadius: '24px',
+                    background: '#fff',
+                    boxShadow: '0 24px 80px rgba(15, 23, 42, 0.12)',
+                    overflow: 'hidden',
+                    height
+                }, children: [_jsx("div", { style: { background: primaryColor, color: '#fff', padding: '14px 18px' }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsxs("div", { children: [_jsx("strong", { children: headerText }), _jsx("div", { style: { fontSize: '12px', opacity: 0.85 }, children: "Powered by Brainbox" })] }), _jsx("button", { onClick: () => setOpen(false), style: {
+                                        background: 'transparent',
+                                        border: 'none',
+                                        color: '#fff',
+                                        fontSize: '18px',
+                                        cursor: 'pointer'
+                                    }, children: "\u00D7" })] }) }), _jsxs("div", { style: { padding: '16px', background: backgroundColor, height: `calc(${height} - 132px)`, overflowY: 'auto' }, children: [messages.length === 0 ? (_jsx("div", { style: { color: '#475569', fontSize: '14px' }, children: design === 'support'
+                                    ? 'Ask a support question and get an answer in real time.'
+                                    : 'Start chatting with AI instantly.' })) : (messages.map(message => renderMessage(message, primaryColor, accentColor))), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { padding: '12px 16px', background: '#fff', borderTop: '1px solid #E2E8F0' }, children: [_jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("input", { value: input, onChange: event => setInput(event.target.value), onKeyDown: event => event.key === 'Enter' && handleSend(), placeholder: placeholder, style: {
+                                            flex: 1,
+                                            border: '1px solid #CBD5E1',
+                                            borderRadius: '999px',
+                                            padding: '12px 16px',
+                                            outline: 'none'
+                                        } }), _jsx("button", { onClick: handleSend, style: {
+                                            ...defaultButtonStyle,
+                                            background: primaryColor,
+                                            padding: '0 18px',
+                                            minWidth: '95px'
+                                        }, children: loading ? 'Sending...' : 'Send' })] }), error && _jsx("div", { style: { marginTop: '10px', color: '#EF4444' }, children: error })] })] })), _jsx("button", { onClick: () => setOpen(!open), style: {
+                    ...defaultButtonStyle,
+                    background: primaryColor,
+                    padding: '14px 18px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minWidth: '120px'
+                }, children: buttonText })] }));
+}

package/dist/brainbox-sdk.d.ts

@@ -0,0 +1,13 @@
+import { BrainboxChatResponse } from './types';
+export declare class BrainboxReactSDK {
+    private apiUrl;
+    private apiKey;
+    private tenantId;
+    private client;
+    constructor(apiUrl: string, apiKey: string, tenantId: string);
+    ingest(sourceType: string, content: string, filePath?: string, metadata?: Record<string, any>): Promise<any>;
+    chat(question: string, sessionId?: string): Promise<BrainboxChatResponse>;
+    streamChat(question: string, sessionId: string | undefined, onChunk: (chunk: string) => void, onComplete?: (result: any) => void, onError?: (error: Error) => void): Promise<void>;
+    createChatSession(title?: string): Promise<any>;
+    healthCheck(): Promise<any>;
+}

package/dist/brainbox-sdk.js

@@ -0,0 +1,100 @@
+import axios from 'axios';
+export class BrainboxReactSDK {
+    constructor(apiUrl, apiKey, tenantId) {
+        this.apiUrl = apiUrl.replace(/\/$/, '');
+        this.apiKey = apiKey;
+        this.tenantId = tenantId;
+        this.client = axios.create({
+            baseURL: this.apiUrl,
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${apiKey}`
+            }
+        });
+    }
+    async ingest(sourceType, content, filePath, metadata) {
+        const payload = {
+            tenant_id: this.tenantId,
+            source_type: sourceType,
+            content,
+            file_path: filePath,
+            metadata: metadata || {}
+        };
+        const response = await this.client.post('/api/ingest', payload);
+        return response.data;
+    }
+    async chat(question, sessionId) {
+        const payload = {
+            tenant_id: this.tenantId,
+            question,
+            session_id: sessionId
+        };
+        const response = await this.client.post('/api/chat', payload);
+        return response.data;
+    }
+    async streamChat(question, sessionId, onChunk, onComplete, onError) {
+        const payload = {
+            tenant_id: this.tenantId,
+            question,
+            session_id: sessionId
+        };
+        try {
+            if (typeof fetch !== 'undefined') {
+                const response = await fetch(`${this.apiUrl}/api/chat/stream`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${this.apiKey}`
+                    },
+                    body: JSON.stringify(payload)
+                });
+                if (!response.ok) {
+                    throw new Error(`Stream request failed: ${response.status}`);
+                }
+                if (!response.body || typeof response.body.getReader !== 'function') {
+                    const text = await response.text();
+                    let parsed;
+                    try {
+                        parsed = JSON.parse(text);
+                    }
+                    catch (_a) {
+                        parsed = { response: text };
+                    }
+                    onChunk(parsed.response || text || '');
+                    onComplete === null || onComplete === void 0 ? void 0 : onComplete(parsed);
+                    return;
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder('utf-8');
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done)
+                        break;
+                    const chunk = decoder.decode(value, { stream: true });
+                    onChunk(chunk);
+                }
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete({ success: true });
+                return;
+            }
+            const result = await this.chat(question, sessionId);
+            onChunk(result.response || JSON.stringify(result));
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(result);
+        }
+        catch (error) {
+            const message = (error === null || error === void 0 ? void 0 : error.message) || 'Unknown stream error';
+            onError === null || onError === void 0 ? void 0 : onError(new Error(message));
+        }
+    }
+    async createChatSession(title) {
+        const payload = {
+            tenant_id: this.tenantId,
+            title: title || 'New Session'
+        };
+        const response = await this.client.post('/api/chat/session', payload);
+        return response.data;
+    }
+    async healthCheck() {
+        const response = await this.client.get('/api/health');
+        return response.data;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { BrainboxReactSDK } from './brainbox-sdk';
+export { useBrainboxChat } from './useBrainboxChat';
+export { ChatWidget } from './ChatWidget';
+export { ChatPanel } from './ChatPanel';
+export type { ChatMessage, ChatWidgetProps, ChatPanelProps } from './types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { BrainboxReactSDK } from './brainbox-sdk';
+export { useBrainboxChat } from './useBrainboxChat';
+export { ChatWidget } from './ChatWidget';
+export { ChatPanel } from './ChatPanel';

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+import type { BrainboxReactSDK } from './brainbox-sdk';
+export type ChatRole = 'user' | 'assistant' | 'system';
+export interface ChatMessage {
+    id: string;
+    role: ChatRole;
+    text: string;
+    timestamp: string;
+}
+export interface ChatWidgetProps {
+    sdk: BrainboxReactSDK;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
+    primaryColor?: string;
+    accentColor?: string;
+    backgroundColor?: string;
+    buttonText?: string;
+    placeholder?: string;
+    width?: string;
+    height?: string;
+    design?: 'support' | 'assistant';
+}
+export interface ChatPanelProps {
+    sdk: BrainboxReactSDK;
+    primaryColor?: string;
+    accentColor?: string;
+    backgroundColor?: string;
+    headerText?: string;
+    sidebarTitle?: string;
+    initialSessionId?: string;
+    design?: 'cloud' | 'classic';
+}
+export interface UseBrainboxChatHook {
+    messages: ChatMessage[];
+    loading: boolean;
+    error: string | null;
+    sessionId: string | null;
+    sendMessage: (text: string) => Promise<void>;
+    sendVoiceNote: (note: string) => Promise<void>;
+    createSession: (title?: string) => Promise<void>;
+    reset: () => void;
+}
+export interface BrainboxChatResponse {
+    response: string;
+    session_id?: string;
+}
+export interface ChatSessionPayload {
+    tenant_id: string;
+    title?: string;
+}
+export interface ChatPayload {
+    tenant_id: string;
+    question: string;
+    session_id?: string;
+}
+export interface IngestPayload {
+    tenant_id: string;
+    source_type: string;
+    content: string;
+    file_path?: string;
+    metadata?: Record<string, any>;
+}

package/dist/types.js

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

package/dist/useBrainboxChat.d.ts

@@ -0,0 +1,3 @@
+import { BrainboxReactSDK } from './brainbox-sdk';
+import { UseBrainboxChatHook } from './types';
+export declare function useBrainboxChat(sdk: BrainboxReactSDK): UseBrainboxChatHook;

package/dist/useBrainboxChat.js

@@ -0,0 +1,85 @@
+import { useCallback, useState } from 'react';
+const createMessage = (role, text) => ({
+    id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    role,
+    text,
+    timestamp: new Date().toISOString()
+});
+export function useBrainboxChat(sdk) {
+    const [messages, setMessages] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [sessionId, setSessionId] = useState(null);
+    const appendMessage = useCallback((message) => {
+        setMessages(current => [...current, message]);
+    }, []);
+    const sendMessage = useCallback(async (text) => {
+        setError(null);
+        const userMessage = createMessage('user', text);
+        appendMessage(userMessage);
+        setLoading(true);
+        try {
+            await sdk.streamChat(text, sessionId || undefined, chunk => {
+                setMessages(current => {
+                    const existing = current[current.length - 1];
+                    if (existing && existing.role === 'assistant') {
+                        return [
+                            ...current.slice(0, -1),
+                            {
+                                ...existing,
+                                text: existing.text + chunk
+                            }
+                        ];
+                    }
+                    return [...current, createMessage('assistant', chunk)];
+                });
+            }, result => {
+                if (result === null || result === void 0 ? void 0 : result.session_id) {
+                    setSessionId(result.session_id);
+                }
+                setLoading(false);
+            }, err => {
+                setError(err.message);
+                setLoading(false);
+            });
+        }
+        catch (err) {
+            setError((err === null || err === void 0 ? void 0 : err.message) || 'Chat failed');
+            setLoading(false);
+        }
+    }, [appendMessage, messages, sdk, sessionId]);
+    const sendVoiceNote = useCallback(async (note) => {
+        setError(null);
+        const voiceMessage = createMessage('user', `Voice note: ${note}`);
+        appendMessage(voiceMessage);
+        await sendMessage(`Voice note: ${note}`);
+    }, [appendMessage, sendMessage]);
+    const createSession = useCallback(async (title) => {
+        setError(null);
+        try {
+            const response = await sdk.createChatSession(title);
+            if (response === null || response === void 0 ? void 0 : response.session_id) {
+                setSessionId(response.session_id);
+            }
+        }
+        catch (err) {
+            setError((err === null || err === void 0 ? void 0 : err.message) || 'Unable to create session');
+        }
+    }, [sdk]);
+    const reset = useCallback(() => {
+        setMessages([]);
+        setError(null);
+        setLoading(false);
+        setSessionId(null);
+    }, []);
+    return {
+        messages,
+        loading,
+        error,
+        sessionId,
+        sendMessage,
+        sendVoiceNote,
+        createSession,
+        reset
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spres-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React SDK and customizable chat UI for Spres AI Backend",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",