@blocklet/aigne-hub 0.4.43 → 0.4.44

package/lib/cjs/components/conversation/use-conversation.js

@@ -5,15 +5,142 @@ const immer_1 = require("immer");
 const nanoid_1 = require("nanoid");
 const react_1 = require("react");
 const nextId = () => (0, nanoid_1.nanoid)(16);
-function useConversation({ scrollToBottom, textCompletions, imageGenerations, }) {
-    const [messages, setMessages] = (0, react_1.useState)(() => [
-        { id: nextId(), response: 'Hi, I am AIGNE Hub! How can I assist you today?' },
-    ]);
+const STORAGE_KEY = 'aigne-hub-conversation-history';
+const SESSION_STORAGE_KEY = 'aigne-hub-conversation-session';
+const MAX_CACHED_MESSAGES = 5; // Limit cached messages to reduce storage usage
+// Load messages from localStorage/sessionStorage
+const loadMessages = async () => {
+    try {
+        // Try localStorage first, then sessionStorage as fallback
+        let cached = localStorage.getItem(STORAGE_KEY);
+        if (!cached) {
+            cached = sessionStorage.getItem(SESSION_STORAGE_KEY);
+        }
+        if (cached) {
+            const parsed = JSON.parse(cached);
+            // Validate and filter out invalid messages
+            if (Array.isArray(parsed) && parsed.length > 0) {
+                const validMessages = parsed.filter((msg) => msg.id && (msg.prompt || msg.response));
+                return validMessages;
+            }
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load conversation history:', error);
+    }
+    // Return empty array if no history, let the component handle initial message
+    return [];
+};
+// Save messages to localStorage
+const saveMessages = async (messages) => {
+    try {
+        // Only save completed messages (no loading state)
+        const toSave = messages
+            .filter((msg) => !msg.loading)
+            .slice(-MAX_CACHED_MESSAGES) // Keep only last N messages
+            .map((msg) => {
+            var _a;
+            // Replace image data URLs with placeholders to save storage space
+            const response = msg.response && typeof msg.response === 'object' && 'images' in msg.response
+                ? {
+                    ...msg.response,
+                    images: ((_a = msg.response.images) === null || _a === void 0 ? void 0 : _a.map((img) => ({
+                        ...img,
+                        url: img.url && img.url.startsWith('data:') ? '[IMAGE_PLACEHOLDER]' : img.url,
+                    }))) || [],
+                }
+                : msg.response;
+            return {
+                id: msg.id,
+                prompt: msg.prompt,
+                response,
+                timestamp: msg.timestamp,
+                // Don't save meta and error state to reduce size
+            };
+        });
+        // Try to save to localStorage, fallback to sessionStorage if quota exceeded
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+            // Clear sessionStorage if localStorage succeeded
+            sessionStorage.removeItem(SESSION_STORAGE_KEY);
+        }
+        catch (storageError) {
+            if (storageError instanceof Error && storageError.name === 'QuotaExceededError') {
+                // Fallback to sessionStorage
+                try {
+                    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(toSave));
+                }
+                catch (sessionError) {
+                    console.warn('Failed to save to sessionStorage:', sessionError);
+                }
+            }
+            else {
+                console.warn('Failed to save to localStorage:', storageError);
+            }
+        }
+    }
+    catch (error) {
+        console.warn('Failed to save conversation history:', error);
+    }
+};
+function useConversation({ scrollToBottom, textCompletions, imageGenerations, enableCache = true, }) {
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [isInitialLoad, setIsInitialLoad] = (0, react_1.useState)(true);
+    const [isLoadingHistory, setIsLoadingHistory] = (0, react_1.useState)(enableCache);
+    // Load initial messages from cache
+    (0, react_1.useEffect)(() => {
+        if (enableCache && isLoadingHistory) {
+            loadMessages().then((loadedMessages) => {
+                // If no messages loaded, show welcome message
+                if (loadedMessages.length === 0) {
+                    setMessages([
+                        { id: nextId(), response: 'Hi, I am AIGNE Hub! How can I assist you today?', timestamp: Date.now() },
+                    ]);
+                }
+                else {
+                    setMessages(loadedMessages);
+                }
+                setIsLoadingHistory(false);
+            });
+        }
+        else if (!enableCache) {
+            setMessages([
+                { id: nextId(), response: 'Hi, I am AIGNE Hub! How can I assist you today?', timestamp: Date.now() },
+            ]);
+            setIsLoadingHistory(false);
+        }
+    }, [enableCache, isLoadingHistory]);
+    // Scroll to bottom on initial load
+    (0, react_1.useEffect)(() => {
+        if (isInitialLoad && messages.length > 0 && !isLoadingHistory) {
+            // Wait for DOM to render
+            setTimeout(() => {
+                scrollToBottom === null || scrollToBottom === void 0 ? void 0 : scrollToBottom({ force: true });
+                setIsInitialLoad(false);
+            }, 100);
+        }
+    }, [isInitialLoad, messages.length, scrollToBottom, isLoadingHistory]);
+    // Save messages to localStorage whenever they change (with debounce)
+    (0, react_1.useEffect)(() => {
+        if (enableCache && messages.length > 0) {
+            const timeoutId = setTimeout(() => {
+                saveMessages(messages).catch((error) => {
+                    console.error('❌ Failed to save messages:', error);
+                });
+            }, 1000); // Delay save by 1 second to avoid saving during streaming
+            return () => clearTimeout(timeoutId);
+        }
+        return () => { };
+    }, [messages, enableCache]);
     const add = (0, react_1.useCallback)(async (prompt, meta) => {
         const id = nextId();
-        setMessages((v) => v.concat({ id, prompt, loading: true, meta }));
-        scrollToBottom === null || scrollToBottom === void 0 ? void 0 : scrollToBottom({ force: true });
+        const timestamp = Date.now();
+        setMessages((v) => v.concat({ id, prompt, loading: true, meta, timestamp }));
+        setTimeout(() => {
+            scrollToBottom === null || scrollToBottom === void 0 ? void 0 : scrollToBottom({ force: true });
+        }, 100);
         try {
+            // Handle image generation command
             if (imageGenerations && typeof prompt === 'string') {
                 const m = prompt.match(/^\/image(\s+(?<size>256|512|1024))?(\s+(?<n>[1-9]|10))?\s+(?<prompt>[\s\S]+)/);
                 if (m === null || m === void 0 ? void 0 : m.groups) {
@@ -49,7 +176,7 @@ function useConversation({ scrollToBottom, textCompletions, imageGenerations, })
                         response = value.text;
                     }
                     else if (isImages(value)) {
-                        response = value.images;
+                        response = { images: value.images };
                     }
                     else {
                         delta = decoder.decode(value);
@@ -76,8 +203,13 @@ function useConversation({ scrollToBottom, textCompletions, imageGenerations, })
         catch (error) {
             setMessages((v) => (0, immer_1.produce)(v, (draft) => {
                 const item = draft.find((i) => i.id === id);
-                if (item)
-                    item.error = error;
+                if (item) {
+                    // Format error for CreditErrorAlert component
+                    item.error = {
+                        message: error instanceof Error ? error.message : String(error),
+                        type: 'unknown',
+                    };
+                }
             }));
             return null;
         }
@@ -96,5 +228,24 @@ function useConversation({ scrollToBottom, textCompletions, imageGenerations, })
                 i.loading = false;
         }));
     }, []);
-    return { messages, add, cancel, setMessages };
+    const clearHistory = (0, react_1.useCallback)(async () => {
+        const initialMessage = {
+            id: nextId(),
+            response: 'Hi, I am AIGNE Hub! How can I assist you today?',
+            timestamp: Date.now(),
+        };
+        setMessages([initialMessage]);
+        if (enableCache) {
+            localStorage.removeItem(STORAGE_KEY);
+            sessionStorage.removeItem(SESSION_STORAGE_KEY);
+        }
+    }, [enableCache]);
+    return {
+        messages,
+        add,
+        cancel,
+        setMessages,
+        clearHistory,
+        isLoadingHistory,
+    };
 }

package/lib/cjs/components/image-preview.js

@@ -92,11 +92,13 @@ function ImagePreview({ dataSource = [], itemWidth = undefined, itemHeight = und
                                     opacity: 1,
                                 },
                             },
-                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(react_photo_view_1.PhotoView, { ...item, children: (0, jsx_runtime_1.jsx)(loading_image_1.default, { ...item, src: (0, ufo_1.withQuery)(item.src, {
-                                            imageFilter: 'resize',
-                                            f: 'webp',
-                                            w: typeof itemWidth === 'number' ? Math.min(itemWidth * 2, 1200) : undefined,
-                                        }), style: {
+                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(react_photo_view_1.PhotoView, { ...item, children: (0, jsx_runtime_1.jsx)(loading_image_1.default, { ...item, src: item.src.startsWith('data:')
+                                            ? item.src
+                                            : (0, ufo_1.withQuery)(item.src, {
+                                                imageFilter: 'resize',
+                                                f: 'webp',
+                                                w: typeof itemWidth === 'number' ? Math.min(itemWidth * 2, 1200) : undefined,
+                                            }), style: {
                                             transition,
                                             borderRadius,
                                             objectFit: 'cover',

package/lib/esm/api/types/index.js

@@ -1,3 +1,4 @@
 export * from './chat';
 export * from './image';
 export * from './embedding';
+export * from './model';

package/lib/esm/api/types/model.js

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

package/lib/esm/components/conversation/conversation.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, CircularProgress } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, Box, CircularProgress, Fade } from '@mui/material';
 import isNil from 'lodash/isNil';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import CreditErrorAlert from '../credit/alert';
 import ImagePreview from '../image-preview';
 import Message from './message';
 import Prompt from './prompt';
-export default function Conversation({ ref, messages, onSubmit, customActions = () => [], renderAvatar = undefined, maxWidth = 1000, scrollContainer = undefined, promptProps = {}, ...props }) {
+export default function Conversation({ ref, messages, onSubmit, customActions = () => [], renderAvatar = undefined, maxWidth = 1000, scrollContainer = undefined, promptProps = {}, chatLayout = 'left-right', ...props }) {
     const scroller = useRef(scrollContainer !== null && scrollContainer !== void 0 ? scrollContainer : null);
     const { element, scrollToBottom } = useAutoScrollToBottom({ scroller });
     useImperativeHandle(ref, () => ({
@@ -18,28 +18,57 @@ export default function Conversation({ ref, messages, onSubmit, customActions =
             flexDirection: 'column',
             overflow: 'auto',
             ...props.sx,
-        }, children: _jsxs(Box, { sx: { mt: 2, mx: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }, className: "conversation-container", children: [_jsxs(Box, { sx: { flexGrow: 1, width: '100%', mx: 'auto', maxWidth }, children: [messages.map((msg) => {
+        }, children: _jsxs(Box, { sx: { mt: 3, mx: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }, className: "conversation-container", children: [_jsxs(Box, { sx: { flexGrow: 1, width: '100%', mx: 'auto', maxWidth }, children: [messages.map((msg) => {
                             var _a, _b;
                             const actions = customActions === null || customActions === void 0 ? void 0 : customActions(msg);
-                            return (_jsxs(Box, { id: `conversation-${msg.id}`, children: [!isNil(msg.prompt) && (_jsx(Message, { avatar: (_a = renderAvatar === null || renderAvatar === void 0 ? void 0 : renderAvatar(msg, false)) !== null && _a !== void 0 ? _a : _jsx(Avatar, { sx: { bgcolor: 'secondary.main' }, children: "\uD83E\uDDD1" }), message: msg.prompt, actions: actions === null || actions === void 0 ? void 0 : actions[0] })), (!isNil(msg.response) || !isNil(msg.loading) || !isNil(msg.error)) && (_jsxs(Message, { my: 1, id: `response-${msg.id}`, loading: msg.loading && !!msg.response, message: typeof msg.response === 'string' ? msg.response : undefined, avatar: (_b = renderAvatar === null || renderAvatar === void 0 ? void 0 : renderAvatar(msg, true)) !== null && _b !== void 0 ? _b : _jsx(Avatar, { sx: { bgcolor: 'primary.main' }, children: "\uD83E\uDD16\uFE0F" }), actions: actions === null || actions === void 0 ? void 0 : actions[1], children: [Array.isArray(msg.response) && (_jsx(ImagePreview, { itemWidth: 100, dataSource: msg.response.map(({ url }) => {
-                                                    return {
-                                                        src: url,
-                                                        onLoad: () => scrollToBottom(),
-                                                    };
-                                                }) })), msg.error ? (
-                                            // @ts-ignore
-                                            _jsx(CreditErrorAlert, { error: msg.error })) : (msg.loading &&
-                                                !msg.response && (_jsx(Box, { sx: {
-                                                    minHeight: 24,
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                }, children: _jsx(CircularProgress, { size: 16 }) })))] }))] }, msg.id));
+                            const isLeftRight = chatLayout === 'left-right';
+                            return (_jsx(Fade, { in: true, timeout: 300, children: _jsxs(Box, { id: `conversation-${msg.id}`, children: [!isNil(msg.prompt) && (_jsx(Message, { avatar: (_a = renderAvatar === null || renderAvatar === void 0 ? void 0 : renderAvatar(msg, false)) !== null && _a !== void 0 ? _a : _jsx(Avatar, { sx: { bgcolor: 'secondary.main' }, children: "\uD83E\uDDD1" }), message: msg.prompt, actions: actions === null || actions === void 0 ? void 0 : actions[0], timestamp: msg.timestamp, isUser: isLeftRight, chatLayout: chatLayout })), (!isNil(msg.response) || !isNil(msg.loading) || !isNil(msg.error)) && (_jsxs(Message, { id: `response-${msg.id}`, loading: msg.loading && !!msg.response, message: typeof msg.response === 'string' ? msg.response : undefined, avatar: (_b = renderAvatar === null || renderAvatar === void 0 ? void 0 : renderAvatar(msg, true)) !== null && _b !== void 0 ? _b : _jsx(Avatar, { sx: { bgcolor: 'primary.main' }, children: "\uD83E\uDD16\uFE0F" }), actions: actions === null || actions === void 0 ? void 0 : actions[1], timestamp: msg.timestamp, isUser: false, chatLayout: chatLayout, children: [msg.response &&
+                                                    typeof msg.response === 'object' &&
+                                                    'images' in msg.response &&
+                                                    Array.isArray(msg.response.images) &&
+                                                    msg.response.images.length > 0 && (_jsxs(_Fragment, { children: [msg.response.images.some((img) => img.url && img.url.startsWith('data:')) && (_jsx(ImagePreview, { itemWidth: 200, borderRadius: 12, dataSource: msg.response.images
+                                                                .filter((img) => img.url && img.url.startsWith('data:'))
+                                                                .map(({ url }) => ({
+                                                                src: url,
+                                                                onLoad: () => scrollToBottom(),
+                                                            })) })), msg.response.images.some((img) => !img.url || img.url === '[IMAGE_PLACEHOLDER]') && (_jsxs(Box, { sx: {
+                                                                margin: '8px 0',
+                                                                minHeight: '200px',
+                                                                background: '#f5f5f5',
+                                                                borderRadius: '8px',
+                                                                padding: '16px',
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                flexDirection: 'column',
+                                                                gap: '12px',
+                                                                border: '2px dashed #ddd',
+                                                            }, children: [_jsx(Box, { sx: { fontSize: '48px', opacity: 0.4 }, children: "\uD83D\uDDBC\uFE0F" }), _jsx(Box, { sx: {
+                                                                        fontSize: '14px',
+                                                                        color: '#666',
+                                                                        textAlign: 'center',
+                                                                        fontWeight: 500,
+                                                                        minWidth: 200,
+                                                                    }, children: msg.response.images.filter((img) => !img.url || img.url === '[IMAGE_PLACEHOLDER]')
+                                                                        .length === 1
+                                                                        ? 'Image (Not Cached)'
+                                                                        : `${msg.response.images.filter((img) => !img.url || img.url === '[IMAGE_PLACEHOLDER]').length} Images (Not Cached)` })] }))] })), msg.error ? (
+                                                // @ts-ignore
+                                                _jsx(CreditErrorAlert, { error: msg.error })) : (msg.loading &&
+                                                    !msg.response && (_jsxs(Box, { sx: {
+                                                        minHeight: 32,
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 1.5,
+                                                        color: 'text.secondary',
+                                                        fontSize: '14px',
+                                                    }, children: [_jsx(CircularProgress, { size: 18, thickness: 4 }), _jsx("span", { children: "AI is thinking..." })] })))] }))] }) }, msg.id));
                         }), element] }), _jsxs(Box, { sx: { mx: 'auto', width: '100%', maxWidth, position: 'sticky', bottom: 0 }, children: [_jsx(Box, { sx: {
-                                height: 16,
+                                height: 24,
                                 pointerEvents: 'none',
                                 background: (theme) => `linear-gradient(transparent, ${theme.palette.background.paper})`,
                             } }), _jsx(Box, { sx: {
-                                pb: 2,
+                                pb: 4,
                                 bgcolor: 'background.paper',
                             }, children: _jsx(Prompt, { onSubmit: onSubmit, ...promptProps }) })] })] }) }));
 }