@blocklet/aigne-hub 0.4.43 → 0.4.44

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

@@ -1,114 +1,317 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
-import styled from '@emotion/styled';
-import { CopyAll } from '@mui/icons-material';
-import { Box, Button, Tooltip } from '@mui/material';
-import { useMemo, useState } from 'react';
+import { CheckCircleOutline, CopyAll } from '@mui/icons-material';
+import { Box, Button, Tooltip, useTheme } from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-export default function Message({ avatar = undefined, message = undefined, children = undefined, loading = false, actions = undefined, ...props }) {
+export default function Message({ avatar = undefined, message = undefined, children = undefined, loading = false, actions = undefined, timestamp = undefined, isUser = false, chatLayout = 'traditional', ...props }) {
+    const theme = useTheme();
     const text = useMemo(() => (typeof message === 'string' ? message : message === null || message === void 0 ? void 0 : message.map((i) => `${i.role}: ${i.content}`).join('\n\n')), [message]);
-    return (_jsxs(Root, { ...props, display: "flex", children: [_jsx(Box, { className: "avatar", sx: {
-                    mr: 1,
-                }, children: avatar }), _jsxs(Box, { className: cx('content'), children: [_jsx(Box, { component: ReactMarkdown, className: cx('message', loading && 'cursor'), children: text }), children, _jsxs(Box, { className: "actions", children: [actions, text && _jsx(CopyButton, { message: text }, "copy")] })] })] }));
+    // Create theme-based styles
+    const getMessageStyles = () => {
+        const baseStyles = {
+            '> .message-content-wrapper': {
+                '> .content': {
+                    '> .message': {
+                        lineHeight: 1.6,
+                        fontSize: '15px',
+                        '> *:first-of-type': {
+                            marginTop: 0,
+                        },
+                        '> *:last-child': {
+                            marginBottom: 0,
+                        },
+                        pre: {
+                            lineHeight: 1.5,
+                            backgroundColor: theme.palette.grey[50],
+                            overflow: 'auto',
+                            padding: 2,
+                            borderRadius: 1,
+                            border: `1px solid ${theme.palette.divider}`,
+                            margin: '12px 0',
+                            boxShadow: theme.shadows[1],
+                            position: 'relative',
+                            '&::before': {
+                                content: 'attr(data-language)',
+                                position: 'absolute',
+                                top: 8,
+                                right: 8,
+                                fontSize: '11px',
+                                color: theme.palette.text.disabled,
+                                textTransform: 'uppercase',
+                                fontWeight: 600,
+                                letterSpacing: '0.5px',
+                            },
+                        },
+                        code: {
+                            backgroundColor: theme.palette.action.hover,
+                            padding: '2px 6px',
+                            borderRadius: 0.5,
+                            fontSize: '0.9em',
+                            fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace',
+                        },
+                        'pre code': {
+                            backgroundColor: 'transparent',
+                            padding: 0,
+                            display: 'block',
+                            border: 'none !important',
+                        },
+                        'ul, ol': {
+                            paddingLeft: '24px',
+                        },
+                        li: {
+                            margin: '4px 0',
+                        },
+                        blockquote: {
+                            borderLeft: `3px solid ${theme.palette.divider}`,
+                            paddingLeft: 2,
+                            margin: '12px 0',
+                            color: theme.palette.text.secondary,
+                        },
+                        table: {
+                            borderCollapse: 'collapse',
+                            width: '100%',
+                            margin: '12px 0',
+                        },
+                        'th, td': {
+                            border: `1px solid ${theme.palette.divider}`,
+                            padding: '8px 12px',
+                            textAlign: 'left',
+                        },
+                        th: {
+                            backgroundColor: theme.palette.action.hover,
+                            fontWeight: 600,
+                        },
+                        '&.cursor': {
+                            '> *:last-child': {
+                                '&:after': {
+                                    content: '""',
+                                    display: 'inline-block',
+                                    verticalAlign: 'middle',
+                                    height: '1em',
+                                    marginTop: '-0.15em',
+                                    marginLeft: '0.15em',
+                                    borderRight: `0.15em solid ${theme.palette.primary.main}`,
+                                    animation: 'blink-caret 0.75s step-end infinite',
+                                    '@keyframes blink-caret': {
+                                        'from, to': {
+                                            borderColor: 'transparent',
+                                        },
+                                        '50%': {
+                                            borderColor: theme.palette.primary.main,
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        };
+        // User message styles (right-aligned with blue background)
+        if (chatLayout === 'left-right' && isUser) {
+            return {
+                ...baseStyles,
+                '> .message-content-wrapper > .content': {
+                    background: theme.palette.primary.light,
+                    color: theme.palette.primary.contrastText,
+                    border: 'none',
+                    boxShadow: theme.shadows[2],
+                    position: 'relative',
+                    overflow: 'visible',
+                    '.message': {
+                        color: theme.palette.primary.contrastText,
+                        code: {
+                            backgroundColor: 'rgba(255, 255, 255, 0.25)',
+                            color: theme.palette.primary.contrastText,
+                            border: '1px solid rgba(255, 255, 255, 0.15)',
+                        },
+                        pre: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                            borderColor: 'rgba(255, 255, 255, 0.15)',
+                            boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.2)',
+                            code: {
+                                color: 'rgba(255, 255, 255, 0.95)',
+                                border: 'none !important',
+                                backgroundColor: 'transparent !important',
+                                padding: '0 !important',
+                            },
+                        },
+                        a: {
+                            color: theme.palette.primary.light,
+                            textDecoration: 'underline',
+                            textDecorationColor: 'rgba(255, 255, 255, 0.4)',
+                            '&:hover': {
+                                color: '#bbdefb',
+                            },
+                        },
+                        strong: {
+                            fontWeight: 600,
+                            color: 'rgba(255, 255, 255, 0.98)',
+                        },
+                    },
+                },
+                '&:hover > .message-content-wrapper > .content': {
+                    background: theme.palette.primary.main,
+                },
+            };
+        }
+        // AI message styles (left-aligned with light background)
+        return {
+            ...baseStyles,
+            '> .message-content-wrapper > .content': {
+                background: theme.palette.background.paper,
+                border: `1px solid ${theme.palette.divider}`,
+                boxShadow: theme.shadows[1],
+                '.message': {
+                    color: theme.palette.text.primary,
+                    code: {
+                        background: theme.palette.grey[100],
+                        border: `1px solid ${theme.palette.divider}`,
+                    },
+                    pre: {
+                        background: theme.palette.grey[50],
+                        border: `1px solid ${theme.palette.divider}`,
+                        code: {
+                            background: 'transparent !important',
+                            border: 'none !important',
+                            padding: '0 !important',
+                        },
+                    },
+                    a: {
+                        color: theme.palette.primary.main,
+                        textDecoration: 'none',
+                        borderBottom: `1px solid ${theme.palette.primary.light}`,
+                        transition: 'all 0.2s ease',
+                        '&:hover': {
+                            color: theme.palette.primary.dark,
+                            borderBottomColor: theme.palette.primary.dark,
+                        },
+                    },
+                    strong: {
+                        fontWeight: 600,
+                        color: theme.palette.text.primary,
+                    },
+                },
+            },
+            '&:hover > .message-content-wrapper > .content': {
+                background: theme.palette.grey[50],
+                borderColor: theme.palette.action.focus,
+            },
+        };
+    };
+    // Force re-render every minute to update relative time
+    const [now, setNow] = useState(Date.now());
+    useEffect(() => {
+        if (!timestamp)
+            return undefined;
+        const interval = setInterval(() => {
+            setNow(Date.now());
+        }, 60000); // Update every minute
+        return () => clearInterval(interval);
+    }, [timestamp]);
+    const formattedTime = useMemo(() => {
+        if (!timestamp)
+            return '';
+        const date = new Date(timestamp);
+        const diffMs = now - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+    }, [timestamp, now]);
+    const isLeftRight = chatLayout === 'left-right';
+    return (_jsxs(Box, { ...props, display: "flex", className: cx(isLeftRight && isUser && 'user-message', isLeftRight && !isUser && 'ai-message'), sx: {
+            mb: 2.5,
+            '&:hover .message-meta': {
+                opacity: 1,
+            },
+            ...(isLeftRight && isUser
+                ? {
+                    justifyContent: 'flex-end',
+                    '.avatar': { order: 2, mr: 0, ml: 1 },
+                    '.content': { alignItems: 'flex-end' },
+                }
+                : {}),
+            ...getMessageStyles(),
+            ...props.sx,
+        }, children: [_jsx(Box, { className: "avatar", sx: {
+                    pt: 0.625,
+                    flexShrink: 0,
+                    mr: isLeftRight && !isUser ? 1 : isLeftRight && isUser ? 0 : 1,
+                    ml: isLeftRight && isUser ? 1 : 0,
+                    '& .MuiAvatar-root': {
+                        width: 38,
+                        height: 38,
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.12)',
+                    },
+                }, children: avatar }), _jsxs(Box, { className: "message-content-wrapper", sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxWidth: '80%',
+                    minWidth: 'auto',
+                    position: 'relative',
+                }, children: [_jsxs(Box, { className: cx('content'), sx: {
+                            minHeight: 40,
+                            overflow: 'hidden',
+                            wordBreak: 'break-word',
+                            padding: 1.75,
+                            borderRadius: 2,
+                            position: 'relative',
+                            backgroundColor: 'transparent',
+                            border: 'none',
+                            transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [text && (_jsx(Box, { component: ReactMarkdown, className: cx('message', loading && 'cursor'), children: text })), children] }), _jsxs(Box, { className: "message-meta", sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            mt: 0.5,
+                            opacity: 0,
+                            transition: 'opacity 0.2s ease',
+                            justifyContent: isLeftRight && isUser ? 'flex-end' : 'flex-start',
+                        }, children: [timestamp && (_jsx(Box, { className: "timestamp", sx: {
+                                    fontSize: '11px',
+                                    color: 'text.secondary',
+                                }, children: formattedTime })), _jsxs(Box, { className: "actions", sx: {
+                                    display: 'flex',
+                                    gap: 0.5,
+                                    '& button': {
+                                        minWidth: 0,
+                                        p: 0.5,
+                                        height: 24,
+                                        width: 24,
+                                        color: 'text.secondary',
+                                        borderRadius: 0.5,
+                                        transition: 'all 0.15s ease',
+                                    },
+                                }, children: [actions, text && _jsx(CopyButton, { message: text }, "copy")] })] })] })] }));
 }
 function CopyButton({ message }) {
     const [copied, setCopied] = useState(false);
-    return (_jsx(Tooltip, { title: copied === 'copied' ? 'Copied!' : 'Copy', placement: "top", open: Boolean(copied), children: _jsx(Button, { size: "small", className: cx('copy', copied && 'active'), onMouseEnter: () => setCopied(true), onMouseLeave: () => setCopied(false), onClick: () => {
-                navigator.clipboard.writeText(message);
-                setCopied('copied');
-                setTimeout(() => setCopied(false), 1500);
-            }, children: _jsx(CopyAll, { fontSize: "small" }) }) }));
+    const [showTooltip, setShowTooltip] = useState(false);
+    return (_jsx(Tooltip, { title: copied === 'copied' ? 'Copied!' : 'Copy', placement: "top", open: showTooltip || Boolean(copied), children: _jsx(Button, { size: "small", className: cx('copy', copied && 'active'), onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: () => {
+                navigator.clipboard
+                    .writeText(message)
+                    .then(() => {
+                    setCopied('copied');
+                })
+                    .catch((err) => {
+                    console.error('Failed to copy message', err);
+                });
+                setShowTooltip(false);
+                setTimeout(() => setCopied(false), 2000);
+            }, sx: {
+                color: copied === 'copied' ? 'success.main' : 'inherit',
+                transition: 'color 0.2s ease',
+            }, children: copied === 'copied' ? _jsx(CheckCircleOutline, { fontSize: "small" }) : _jsx(CopyAll, { fontSize: "small" }) }) }));
 }
-const Root = styled(Box) `
-  > .avatar {
-    padding-top: 5px;
-
-    > .MuiAvatar-root {
-      width: 30px;
-      height: 30px;
-    }
-  }
-
-  > .content {
-    min-height: 40px;
-    flex: 1;
-    overflow: hidden;
-    word-break: break-word;
-    padding: 8px;
-    border-radius: 4px;
-    position: relative;
-
-    > .message {
-      > *:first-of-type {
-        margin-top: 0;
-      }
-      > *:last-child {
-        margin-bottom: 0;
-      }
-
-      pre {
-        line-height: 1.2;
-        background-color: #f6f8fa;
-        overflow: auto;
-        padding: 16px;
-        border-radius: 3px;
-      }
-
-      &.cursor {
-        > *:last-child {
-          &:after {
-            content: '';
-            display: inline-block;
-            vertical-align: middle;
-            height: 1em;
-            margin-top: -0.15em;
-            margin-left: 0.15em;
-            border-right: 0.15em solid orange;
-            animation: blink-caret 0.75s step-end infinite;
-
-            @keyframes blink-caret {
-              from,
-              to {
-                border-color: transparent;
-              }
-              50% {
-                border-color: orange;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    > .actions {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      border-radius: 4px;
-      opacity: 0;
-
-      &.active {
-        display: flex;
-      }
-
-      button {
-        min-width: 0;
-        padding: 0;
-        height: 24px;
-        width: 22px;
-        color: rgba(0, 0, 0, 0.4);
-      }
-    }
-  }
-
-  &:hover {
-    > .content {
-      background-color: rgba(0, 0, 0, 0.05);
-
-      > .actions {
-        opacity: 1;
-        background-color: rgba(240, 240, 240, 0.9);
-      }
-    }
-  }
-`;

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Send } from '@mui/icons-material';
-import { Box, IconButton, Input, InputAdornment } from '@mui/material';
+import { Box, IconButton, Input } from '@mui/material';
 import { useHistoryTravel } from 'ahooks';
 import { useState } from 'react';
-export default function Prompt({ startAdornment = undefined, endAdornment = undefined, onSubmit, slotProps = {}, sx = {}, ...props }) {
+export default function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdornment = undefined, onSubmit, slotProps = {}, sx = {}, placeholder = 'Type your message... (Shift+Enter for new line)', ...props }) {
     const [prompt, setPrompt] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
     const { value: historyPrompt, setValue: setHistoryPrompt, forwardLength, back, go, forward } = useHistoryTravel('');
     const submit = () => {
         if (!prompt.trim()) {
@@ -18,23 +19,87 @@ export default function Prompt({ startAdornment = undefined, endAdornment = unde
             setPrompt('');
         }, 50);
     };
-    return (_jsxs(Box, { ...props, sx: { display: 'flex', gap: 1, alignItems: 'center', ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [startAdornment, _jsx(Input, { fullWidth: true, disableUnderline: true, value: prompt, multiline: true, maxRows: 10, sx: { py: 0.8, px: 1, boxShadow: 2, borderRadius: 1 }, onChange: (e) => setPrompt(e.target.value), onKeyDown: (e) => {
-                    if (e.keyCode === 229) {
-                        return;
-                    }
-                    if (!e.shiftKey && e.key === 'Enter') {
-                        e.preventDefault();
-                        submit();
-                    }
-                    else if (e.key === 'ArrowUp') {
-                        e.preventDefault();
-                        back();
-                        setPrompt(historyPrompt || '');
-                    }
-                    else if (e.key === 'ArrowDown') {
-                        e.preventDefault();
-                        forward();
-                        setPrompt(historyPrompt || '');
-                    }
-                }, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: submit, size: "small", type: "submit", children: _jsx(Send, { fontSize: "small" }) }) }), ...slotProps }), endAdornment] }));
+    const charCount = prompt.length;
+    const showCharCount = isFocused && charCount > 0;
+    return (_jsxs(Box, { ...props, sx: { display: 'flex', flexDirection: 'column', gap: 1.5, ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [topAdornment && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 2,
+                    px: 1,
+                }, children: topAdornment })), _jsxs(Box, { sx: {
+                    position: 'relative',
+                    flex: 1,
+                    display: 'flex',
+                    alignItems: 'stretch',
+                    gap: 1.5,
+                    p: 1.5,
+                    boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    transition: 'all 0.2s ease',
+                    bgcolor: 'background.paper',
+                    '&:hover': {
+                        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
+                        borderColor: 'primary.main',
+                    },
+                    '&:focus-within': {
+                        boxShadow: '0 4px 20px rgba(25, 118, 210, 0.2)',
+                        borderColor: 'primary.main',
+                    },
+                }, children: [startAdornment, _jsx(Input, { fullWidth: true, disableUnderline: true, value: prompt, multiline: true, maxRows: 10, placeholder: placeholder, sx: {
+                            py: 0,
+                            px: 0,
+                            fontSize: '15px',
+                            border: 'none',
+                            boxShadow: 'none',
+                            '&:hover': {
+                                boxShadow: 'none',
+                            },
+                            '&.Mui-focused': {
+                                boxShadow: 'none',
+                            },
+                        }, onChange: (e) => setPrompt(e.target.value), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDown: (e) => {
+                            if (e.keyCode === 229) {
+                                return;
+                            }
+                            if (!e.shiftKey && e.key === 'Enter') {
+                                e.preventDefault();
+                                submit();
+                            }
+                            else if (e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                back();
+                                setPrompt(historyPrompt || '');
+                            }
+                            else if (e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                forward();
+                                setPrompt(historyPrompt || '');
+                            }
+                        }, ...slotProps }), _jsx(IconButton, { onClick: submit, size: "medium", type: "submit", disabled: !prompt.trim(), sx: {
+                            bgcolor: prompt.trim() ? 'primary.main' : 'action.disabledBackground',
+                            color: prompt.trim() ? 'primary.contrastText' : 'action.disabled',
+                            transition: 'all 0.2s ease',
+                            width: 44,
+                            height: 44,
+                            alignSelf: 'flex-end',
+                            flexShrink: 0,
+                            '&:hover': {
+                                bgcolor: prompt.trim() ? 'primary.dark' : 'action.disabledBackground',
+                                transform: prompt.trim() ? 'scale(1.05)' : 'none',
+                            },
+                            '&.Mui-disabled': {
+                                bgcolor: 'action.disabledBackground',
+                                color: 'action.disabled',
+                            },
+                        }, children: _jsx(Send, { fontSize: "small" }) }), showCharCount && (_jsxs(Box, { sx: {
+                            position: 'absolute',
+                            bottom: -24,
+                            right: 8,
+                            fontSize: '11px',
+                            color: 'text.secondary',
+                            opacity: 0.7,
+                        }, children: [charCount, " characters"] }))] }), endAdornment] }));
 }