@blocklet/pages-kit 0.2.328 → 0.2.330

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.
@@ -127,8 +127,6 @@ export default function ThemeProvider({ children }) {
127
127
  primary: tempTheme.palette.primary,
128
128
  secondary: tempTheme.palette.secondary,
129
129
  text: tempTheme.palette.text,
130
- // @ts-ignore
131
- black: tempTheme.palette.black,
132
130
  background: {
133
131
  default: '#ffffff',
134
132
  },
@@ -71,7 +71,7 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
71
71
  var _a;
72
72
  return (_jsxs(Stack, { className: "form-item", children: [parameter.label && _jsx(FormLabel, { children: parameter.label }), _jsx(AgentInputField, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
73
73
  ? {
74
- endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 100 }, children: submitText }) })),
74
+ endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 1.5 }, children: submitText }) })),
75
75
  }
76
76
  : undefined })] }));
77
77
  } }) }, parameter.id));
@@ -40,7 +40,7 @@ export default function GoogleSearchRelatedView({ output, outputValue, onlyLastM
40
40
  }, [outputValue]);
41
41
  if ((!isLastMessage && onlyLastMessage) || !((_b = result === null || result === void 0 ? void 0 : result.related_questions) === null || _b === void 0 ? void 0 : _b.length))
42
42
  return null;
43
- return (_jsx(OutputFieldContainer, { output: output, children: _jsx(List, { dense: true, disablePadding: true, children: result.related_questions.map((item) => (_jsxs(_Fragment, { children: [_jsx(ListItemButton, { onClick: () => __awaiter(this, void 0, void 0, function* () {
43
+ return (_jsx(OutputFieldContainer, { output: output, children: _jsx(List, { dense: true, disablePadding: true, children: result.related_questions.map((item) => (_jsxs(_Fragment, { children: [_jsx(ListItemButton, { sx: { py: 1, px: 2 }, onClick: () => __awaiter(this, void 0, void 0, function* () {
44
44
  if (submitting)
45
45
  return;
46
46
  setSubmitting(true);
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Avatar, Box, Card, CardActionArea, Grid, Skeleton, Stack, Typography } from '@mui/material';
3
3
  import Joi from 'joi';
4
- import { useMemo } from 'react';
4
+ import { useMemo, useState } from 'react';
5
+ import { CSSTransition, TransitionGroup } from 'react-transition-group';
5
6
  import OutputFieldContainer from '../../components/OutputFieldContainer';
6
7
  import { useCurrentMessage } from '../../contexts/CurrentMessage';
7
8
  const searchResultSchema = Joi.object({
@@ -16,25 +17,38 @@ const searchResultSchema = Joi.object({
16
17
  export default function GoogleSearchSourcesView({ output, outputValue }) {
17
18
  var _a;
18
19
  const { message } = (_a = useCurrentMessage({ optional: true })) !== null && _a !== void 0 ? _a : {};
20
+ const [showAll, setShowAll] = useState(false);
19
21
  const searchResult = useMemo(() => {
20
22
  const result = searchResultSchema.validate(outputValue, { allowUnknown: true });
21
23
  if (result.error)
22
24
  return undefined;
23
25
  return result.value;
24
26
  }, [outputValue]);
27
+ const handleToggle = () => setShowAll(!showAll);
25
28
  if (!message || (!(searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results.length) && !message.loading))
26
29
  return null;
27
- return (_jsx(OutputFieldContainer, { output: output, children: _jsxs(Grid, { container: true, spacing: 1.5, children: [message.loading && (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 4, sm: 3, md: 2, children: _jsx(ItemSkeleton, {}) }), _jsx(Grid, { item: true, xs: 4, sm: 3, md: 2, children: _jsx(ItemSkeleton, {}) }), _jsx(Grid, { item: true, xs: 4, sm: 3, md: 2, children: _jsx(ItemSkeleton, {}) })] })), searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results.map((item) => (_jsx(Grid, { item: true, xs: 4, sm: 3, md: 2, children: _jsx(ItemView, { item: item }) }, item.link)))] }) }));
30
+ const list = [...((searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results) || [])];
31
+ const itemsToShow = showAll
32
+ ? [...((searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results) || [])]
33
+ : [...((searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results) || [])].slice(0, (list === null || list === void 0 ? void 0 : list.length) > 3 ? 2 : 3);
34
+ return (_jsx(OutputFieldContainer, { output: output, children: _jsxs(Grid, { container: true, spacing: 1.5, children: [message.loading && (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 4, sm: 4, md: 4, children: _jsx(ItemSkeleton, {}) }), _jsx(Grid, { item: true, xs: 4, sm: 4, md: 4, children: _jsx(ItemSkeleton, {}) }), _jsx(Grid, { item: true, xs: 4, sm: 4, md: 4, children: _jsx(ItemSkeleton, {}) })] })), _jsx(TransitionGroup, { component: null, children: itemsToShow.map((item) => (_jsx(CSSTransition, { timeout: 500, classNames: "item", children: _jsx(Grid, { item: true, xs: 4, sm: 4, md: 4, children: _jsx(ItemView, { item: item }) }) }, item.link))) }), !showAll && list.length > 3 && (_jsx(Grid, { item: true, xs: 4, sm: 4, md: 4, children: _jsx(MoreItemView, { list: list, onMore: handleToggle }) }))] }) }));
28
35
  }
29
36
  function ItemView({ item }) {
30
37
  var _a;
31
38
  return (_jsx(ItemContainer, { title: `${item.title} - ${item.source}`, favicon: _jsx(Avatar, { src: item.favicon, sx: { width: 18, height: 18 }, children: (_a = item.source) === null || _a === void 0 ? void 0 : _a.slice(0, 1) }), link: item.link }));
32
39
  }
40
+ function MoreItemView({ list, onMore }) {
41
+ const current = list.splice(2);
42
+ return (_jsx(Card, { sx: { height: '100px', cursor: 'pointer' }, onClick: onMore, children: _jsxs(Stack, { sx: { py: 1.5, px: 2, gap: 1, height: '100%' }, children: [_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '7px', flexGrow: 1 }, children: current.map((item) => {
43
+ var _a;
44
+ return (_jsx(Box, { width: 18, height: 18, children: _jsx(Avatar, { src: item.favicon, sx: { width: 18, height: 18 }, children: (_a = item.source) === null || _a === void 0 ? void 0 : _a.slice(0, 1) }) }));
45
+ }) }), _jsx(Typography, { variant: "caption", noWrap: true, sx: { width: 1, color: '#546C70', fontSize: 12, lineHeight: '18px' }, children: `View ${current.length} more` })] }) }));
46
+ }
33
47
  function ItemSkeleton() {
34
48
  return (_jsx(ItemContainer, { title: _jsxs(_Fragment, { children: [_jsx(Skeleton, { width: "100%" }), _jsx(Skeleton, { width: "40%" })] }), favicon: _jsx(Skeleton, { width: 18, height: 18, variant: "circular" }), link: _jsx(Skeleton, { width: "70%" }) }));
35
49
  }
36
50
  function ItemContainer({ title, favicon, link }) {
37
- return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardActionArea, { component: "a", href: typeof link === 'string' ? link : undefined, target: "_blank", sx: { height: '100%' }, children: _jsxs(Stack, { sx: { p: 1, gap: 1, height: '100%' }, children: [_jsx(Box, { flexGrow: 1, children: _jsx(Typography, { variant: "body2", sx: {
51
+ return (_jsx(Card, { sx: { height: '100px' }, children: _jsx(CardActionArea, { component: "a", href: typeof link === 'string' ? link : undefined, target: "_blank", sx: { height: '100%' }, children: _jsxs(Stack, { sx: { py: 1.5, px: 2, gap: 1, height: '100%' }, children: [_jsx(Box, { flexGrow: 1, children: _jsx(Typography, { variant: "body2", sx: {
38
52
  display: '-webkit-box',
39
53
  WebkitBoxOrient: 'vertical',
40
54
  WebkitLineClamp: 2,
@@ -18,5 +18,15 @@ export default function BackgroundImage() {
18
18
  backgroundPosition: 'center',
19
19
  pointerEvents: 'none',
20
20
  zIndex: -1,
21
+ '&::after': {
22
+ content: '""',
23
+ position: 'absolute',
24
+ top: 0,
25
+ left: 0,
26
+ right: 0,
27
+ bottom: 0,
28
+ backgroundColor: 'rgba(0, 0, 0, 0.12)',
29
+ pointerEvents: 'none',
30
+ },
21
31
  } }));
22
32
  }
@@ -41,11 +41,10 @@ function SimpleChatView() {
41
41
  if (running)
42
42
  scrollToBottom({ behavior: 'smooth' });
43
43
  }, [scrollToBottom, running]);
44
- const messages = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
45
44
  const sessionLoading = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.loading);
46
45
  const loading = useSessionState((s) => s === null || s === void 0 ? void 0 : s.loading) || sessionLoading;
47
46
  useHeaderMenu();
48
- return (_jsxs(SimpleLayout, { px: 0, children: [_jsx(SimpleHeader, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? (_jsx(Box, { textAlign: "center", my: 10, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(_Fragment, { children: [_jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: (messages === null || messages === void 0 ? void 0 : messages.length) ? 1 : 0, pb: (messages === null || messages === void 0 ? void 0 : messages.length) ? 10 : 2, px: { xs: 2, sm: 3 } }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
47
+ return (_jsxs(SimpleLayout, { px: 0, children: [_jsx(SimpleHeader, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? (_jsx(Box, { textAlign: "center", my: 10, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(_Fragment, { children: [_jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10, px: { xs: 2, sm: 3 } }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
49
48
  position: 'sticky',
50
49
  bottom: 0,
51
50
  py: 2,