@blocklet/aigne-hub 0.4.48 → 0.4.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/cjs/components/conversation/message.js +10 -7
  2. package/lib/cjs/components/conversation/prompt.js +5 -7
  3. package/lib/esm/components/conversation/message.js +10 -7
  4. package/lib/esm/components/conversation/prompt.js +5 -7
  5. package/package.json +1 -1
package/lib/cjs/components/conversation/message.js CHANGED
@@ -236,8 +236,8 @@ function Message({ avatar = undefined, message = undefined, children = undefined
236
236
  }, [timestamp, now]);
237
237
  const isLeftRight = chatLayout === 'left-right';
238
238
  return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...props, display: "flex", className: (0, css_1.cx)(isLeftRight && isUser && 'user-message', isLeftRight && !isUser && 'ai-message'), sx: {
239
- pl: { xs: 1.5, md: 0 },
240
- mb: 2.5,
239
+ px: { xs: 1.5, md: 0 },
240
+ mb: { xs: 0, md: 2 },
241
241
  '&:hover .message-meta': {
242
242
  opacity: 1,
243
243
  },
@@ -264,26 +264,29 @@ function Message({ avatar = undefined, message = undefined, children = undefined
264
264
  }, children: avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "message-content-wrapper", sx: {
265
265
  display: 'flex',
266
266
  flexDirection: 'column',
267
- maxWidth: { xs: '90%', md: '80%' },
268
- minWidth: 'auto',
267
+ flex: 1,
268
+ minWidth: 0,
269
269
  position: 'relative',
270
+ alignItems: isLeftRight && isUser ? 'flex-end' : 'flex-start',
270
271
  }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: (0, css_1.cx)('content'), sx: {
271
272
  minHeight: 40,
272
273
  overflow: 'hidden',
273
274
  wordBreak: 'break-word',
274
- padding: 1.75,
275
- borderRadius: 2,
275
+ padding: { xs: 1.25, md: 1.75 },
276
+ borderRadius: { xs: 1.5, md: 2 },
276
277
  position: 'relative',
277
278
  backgroundColor: 'transparent',
278
279
  border: 'none',
279
280
  transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
280
281
  display: 'flex',
281
282
  flexDirection: 'column',
283
+ maxWidth: { xs: '90%', md: '80%' },
284
+ width: 'fit-content',
282
285
  }, children: [text && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: react_markdown_1.default, className: (0, css_1.cx)('message', loading && 'cursor'), children: text })), children] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "message-meta", sx: {
283
286
  display: 'flex',
284
287
  alignItems: 'center',
285
288
  gap: 1,
286
- mt: 0.5,
289
+ mt: { xs: 0, md: 0.5 },
287
290
  opacity: 0,
288
291
  transition: 'opacity 0.2s ease',
289
292
  justifyContent: isLeftRight && isUser ? 'flex-end' : 'flex-start',
package/lib/cjs/components/conversation/prompt.js CHANGED
@@ -6,7 +6,7 @@ const icons_material_1 = require("@mui/icons-material");
6
6
  const material_1 = require("@mui/material");
7
7
  const ahooks_1 = require("ahooks");
8
8
  const react_1 = require("react");
9
- function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdornment = undefined, onSubmit, slotProps = {}, sx = {}, placeholder = 'Type your message... (Shift+Enter for new line)', ...props }) {
9
+ function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdornment = undefined, onSubmit, slotProps = {}, sx = {}, placeholder = 'Type your message...', ...props }) {
10
10
  const [prompt, setPrompt] = (0, react_1.useState)('');
11
11
  const [isFocused, setIsFocused] = (0, react_1.useState)(false);
12
12
  const { value: historyPrompt, setValue: setHistoryPrompt, forwardLength, back, go, forward } = (0, ahooks_1.useHistoryTravel)('');
@@ -24,12 +24,12 @@ function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdorn
24
24
  };
25
25
  const charCount = prompt.length;
26
26
  const showCharCount = isFocused && charCount > 0;
27
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...props, sx: { display: 'flex', flexDirection: 'column', gap: 1.5, ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [topAdornment && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
27
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...props, sx: { display: 'flex', flexDirection: 'column', gap: { sx: 0.5, md: 1.5 }, ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [topAdornment && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
28
28
  display: 'flex',
29
29
  alignItems: 'center',
30
30
  justifyContent: 'space-between',
31
31
  gap: 2,
32
- px: 1,
32
+ pl: 1,
33
33
  }, children: topAdornment })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
34
34
  position: 'relative',
35
35
  flex: 1,
@@ -54,7 +54,7 @@ function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdorn
54
54
  }, children: [startAdornment, (0, jsx_runtime_1.jsx)(material_1.Input, { fullWidth: true, disableUnderline: true, value: prompt, multiline: true, maxRows: 10, placeholder: placeholder, sx: {
55
55
  py: 0,
56
56
  px: 0,
57
- fontSize: '15px',
57
+ fontSize: { xs: '14px', md: '15px' },
58
58
  border: 'none',
59
59
  boxShadow: 'none',
60
60
  '&:hover': {
@@ -81,12 +81,10 @@ function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdorn
81
81
  forward();
82
82
  setPrompt(historyPrompt || '');
83
83
  }
84
- }, ...slotProps }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: submit, size: "medium", type: "submit", disabled: !prompt.trim(), sx: {
84
+ }, ...slotProps }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: submit, size: "small", type: "submit", disabled: !prompt.trim(), sx: {
85
85
  bgcolor: prompt.trim() ? 'primary.main' : 'action.disabledBackground',
86
86
  color: prompt.trim() ? 'primary.contrastText' : 'action.disabled',
87
87
  transition: 'all 0.2s ease',
88
- width: 44,
89
- height: 44,
90
88
  alignSelf: 'flex-end',
91
89
  flexShrink: 0,
92
90
  '&:hover': {
package/lib/esm/components/conversation/message.js CHANGED
@@ -230,8 +230,8 @@ export default function Message({ avatar = undefined, message = undefined, child
230
230
  }, [timestamp, now]);
231
231
  const isLeftRight = chatLayout === 'left-right';
232
232
  return (_jsxs(Box, { ...props, display: "flex", className: cx(isLeftRight && isUser && 'user-message', isLeftRight && !isUser && 'ai-message'), sx: {
233
- pl: { xs: 1.5, md: 0 },
234
- mb: 2.5,
233
+ px: { xs: 1.5, md: 0 },
234
+ mb: { xs: 0, md: 2 },
235
235
  '&:hover .message-meta': {
236
236
  opacity: 1,
237
237
  },
@@ -258,26 +258,29 @@ export default function Message({ avatar = undefined, message = undefined, child
258
258
  }, children: avatar }), _jsxs(Box, { className: "message-content-wrapper", sx: {
259
259
  display: 'flex',
260
260
  flexDirection: 'column',
261
- maxWidth: { xs: '90%', md: '80%' },
262
- minWidth: 'auto',
261
+ flex: 1,
262
+ minWidth: 0,
263
263
  position: 'relative',
264
+ alignItems: isLeftRight && isUser ? 'flex-end' : 'flex-start',
264
265
  }, children: [_jsxs(Box, { className: cx('content'), sx: {
265
266
  minHeight: 40,
266
267
  overflow: 'hidden',
267
268
  wordBreak: 'break-word',
268
- padding: 1.75,
269
- borderRadius: 2,
269
+ padding: { xs: 1.25, md: 1.75 },
270
+ borderRadius: { xs: 1.5, md: 2 },
270
271
  position: 'relative',
271
272
  backgroundColor: 'transparent',
272
273
  border: 'none',
273
274
  transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
274
275
  display: 'flex',
275
276
  flexDirection: 'column',
277
+ maxWidth: { xs: '90%', md: '80%' },
278
+ width: 'fit-content',
276
279
  }, children: [text && (_jsx(Box, { component: ReactMarkdown, className: cx('message', loading && 'cursor'), children: text })), children] }), _jsxs(Box, { className: "message-meta", sx: {
277
280
  display: 'flex',
278
281
  alignItems: 'center',
279
282
  gap: 1,
280
- mt: 0.5,
283
+ mt: { xs: 0, md: 0.5 },
281
284
  opacity: 0,
282
285
  transition: 'opacity 0.2s ease',
283
286
  justifyContent: isLeftRight && isUser ? 'flex-end' : 'flex-start',
package/lib/esm/components/conversation/prompt.js CHANGED
@@ -3,7 +3,7 @@ import { Send } from '@mui/icons-material';
3
3
  import { Box, IconButton, Input } from '@mui/material';
4
4
  import { useHistoryTravel } from 'ahooks';
5
5
  import { useState } from 'react';
6
- export default function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdornment = undefined, onSubmit, slotProps = {}, sx = {}, placeholder = 'Type your message... (Shift+Enter for new line)', ...props }) {
6
+ export default function Prompt({ startAdornment = undefined, endAdornment = undefined, topAdornment = undefined, onSubmit, slotProps = {}, sx = {}, placeholder = 'Type your message...', ...props }) {
7
7
  const [prompt, setPrompt] = useState('');
8
8
  const [isFocused, setIsFocused] = useState(false);
9
9
  const { value: historyPrompt, setValue: setHistoryPrompt, forwardLength, back, go, forward } = useHistoryTravel('');
@@ -21,12 +21,12 @@ export default function Prompt({ startAdornment = undefined, endAdornment = unde
21
21
  };
22
22
  const charCount = prompt.length;
23
23
  const showCharCount = isFocused && charCount > 0;
24
- return (_jsxs(Box, { ...props, sx: { display: 'flex', flexDirection: 'column', gap: 1.5, ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [topAdornment && (_jsx(Box, { sx: {
24
+ return (_jsxs(Box, { ...props, sx: { display: 'flex', flexDirection: 'column', gap: { sx: 0.5, md: 1.5 }, ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [topAdornment && (_jsx(Box, { sx: {
25
25
  display: 'flex',
26
26
  alignItems: 'center',
27
27
  justifyContent: 'space-between',
28
28
  gap: 2,
29
- px: 1,
29
+ pl: 1,
30
30
  }, children: topAdornment })), _jsxs(Box, { sx: {
31
31
  position: 'relative',
32
32
  flex: 1,
@@ -51,7 +51,7 @@ export default function Prompt({ startAdornment = undefined, endAdornment = unde
51
51
  }, children: [startAdornment, _jsx(Input, { fullWidth: true, disableUnderline: true, value: prompt, multiline: true, maxRows: 10, placeholder: placeholder, sx: {
52
52
  py: 0,
53
53
  px: 0,
54
- fontSize: '15px',
54
+ fontSize: { xs: '14px', md: '15px' },
55
55
  border: 'none',
56
56
  boxShadow: 'none',
57
57
  '&:hover': {
@@ -78,12 +78,10 @@ export default function Prompt({ startAdornment = undefined, endAdornment = unde
78
78
  forward();
79
79
  setPrompt(historyPrompt || '');
80
80
  }
81
- }, ...slotProps }), _jsx(IconButton, { onClick: submit, size: "medium", type: "submit", disabled: !prompt.trim(), sx: {
81
+ }, ...slotProps }), _jsx(IconButton, { onClick: submit, size: "small", type: "submit", disabled: !prompt.trim(), sx: {
82
82
  bgcolor: prompt.trim() ? 'primary.main' : 'action.disabledBackground',
83
83
  color: prompt.trim() ? 'primary.contrastText' : 'action.disabled',
84
84
  transition: 'all 0.2s ease',
85
- width: 44,
86
- height: 44,
87
85
  alignSelf: 'flex-end',
88
86
  flexShrink: 0,
89
87
  '&:hover': {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/aigne-hub",
3
- "version": "0.4.48",
3
+ "version": "0.4.50",
4
4
  "description": "The react.js component library for AIGNE Hub",
5
5
  "publishConfig": {
6
6
  "access": "public"