@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.
@@ -132,8 +132,6 @@ function ThemeProvider({ children }) {
132
132
  primary: tempTheme.palette.primary,
133
133
  secondary: tempTheme.palette.secondary,
134
134
  text: tempTheme.palette.text,
135
- // @ts-ignore
136
- black: tempTheme.palette.black,
137
135
  background: {
138
136
  default: '#ffffff',
139
137
  },
@@ -76,7 +76,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
76
76
  var _a;
77
77
  return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(AgentInputField_1.default, { 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
78
78
  ? {
79
- endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 100 }, children: submitText }) })),
79
+ endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 1.5 }, children: submitText }) })),
80
80
  }
81
81
  : undefined })] }));
82
82
  } }) }, parameter.id));
@@ -45,7 +45,7 @@ function GoogleSearchRelatedView({ output, outputValue, onlyLastMessage, }) {
45
45
  }, [outputValue]);
46
46
  if ((!isLastMessage && onlyLastMessage) || !((_b = result === null || result === void 0 ? void 0 : result.related_questions) === null || _b === void 0 ? void 0 : _b.length))
47
47
  return null;
48
- return ((0, jsx_runtime_1.jsx)(OutputFieldContainer_1.default, { output: output, children: (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, disablePadding: true, children: result.related_questions.map((item) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: () => __awaiter(this, void 0, void 0, function* () {
48
+ return ((0, jsx_runtime_1.jsx)(OutputFieldContainer_1.default, { output: output, children: (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, disablePadding: true, children: result.related_questions.map((item) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { py: 1, px: 2 }, onClick: () => __awaiter(this, void 0, void 0, function* () {
49
49
  if (submitting)
50
50
  return;
51
51
  setSubmitting(true);
@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
7
7
  const material_1 = require("@mui/material");
8
8
  const joi_1 = __importDefault(require("joi"));
9
9
  const react_1 = require("react");
10
+ const react_transition_group_1 = require("react-transition-group");
10
11
  const OutputFieldContainer_1 = __importDefault(require("../../components/OutputFieldContainer"));
11
12
  const CurrentMessage_1 = require("../../contexts/CurrentMessage");
12
13
  const searchResultSchema = joi_1.default.object({
@@ -21,26 +22,39 @@ const searchResultSchema = joi_1.default.object({
21
22
  function GoogleSearchSourcesView({ output, outputValue }) {
22
23
  var _a;
23
24
  const { message } = (_a = (0, CurrentMessage_1.useCurrentMessage)({ optional: true })) !== null && _a !== void 0 ? _a : {};
25
+ const [showAll, setShowAll] = (0, react_1.useState)(false);
24
26
  const searchResult = (0, react_1.useMemo)(() => {
25
27
  const result = searchResultSchema.validate(outputValue, { allowUnknown: true });
26
28
  if (result.error)
27
29
  return undefined;
28
30
  return result.value;
29
31
  }, [outputValue]);
32
+ const handleToggle = () => setShowAll(!showAll);
30
33
  if (!message || (!(searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results.length) && !message.loading))
31
34
  return null;
32
- return ((0, jsx_runtime_1.jsx)(OutputFieldContainer_1.default, { output: output, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1.5, children: [message.loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 3, md: 2, children: (0, jsx_runtime_1.jsx)(ItemSkeleton, {}) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 3, md: 2, children: (0, jsx_runtime_1.jsx)(ItemSkeleton, {}) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 3, md: 2, children: (0, jsx_runtime_1.jsx)(ItemSkeleton, {}) })] })), searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results.map((item) => ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 3, md: 2, children: (0, jsx_runtime_1.jsx)(ItemView, { item: item }) }, item.link)))] }) }));
35
+ const list = [...((searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results) || [])];
36
+ const itemsToShow = showAll
37
+ ? [...((searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results) || [])]
38
+ : [...((searchResult === null || searchResult === void 0 ? void 0 : searchResult.organic_results) || [])].slice(0, (list === null || list === void 0 ? void 0 : list.length) > 3 ? 2 : 3);
39
+ return ((0, jsx_runtime_1.jsx)(OutputFieldContainer_1.default, { output: output, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1.5, children: [message.loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 4, md: 4, children: (0, jsx_runtime_1.jsx)(ItemSkeleton, {}) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 4, md: 4, children: (0, jsx_runtime_1.jsx)(ItemSkeleton, {}) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 4, md: 4, children: (0, jsx_runtime_1.jsx)(ItemSkeleton, {}) })] })), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { component: null, children: itemsToShow.map((item) => ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { timeout: 500, classNames: "item", children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 4, md: 4, children: (0, jsx_runtime_1.jsx)(ItemView, { item: item }) }) }, item.link))) }), !showAll && list.length > 3 && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, sm: 4, md: 4, children: (0, jsx_runtime_1.jsx)(MoreItemView, { list: list, onMore: handleToggle }) }))] }) }));
33
40
  }
34
41
  exports.default = GoogleSearchSourcesView;
35
42
  function ItemView({ item }) {
36
43
  var _a;
37
44
  return ((0, jsx_runtime_1.jsx)(ItemContainer, { title: `${item.title} - ${item.source}`, favicon: (0, jsx_runtime_1.jsx)(material_1.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 }));
38
45
  }
46
+ function MoreItemView({ list, onMore }) {
47
+ const current = list.splice(2);
48
+ return ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { height: '100px', cursor: 'pointer' }, onClick: onMore, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { py: 1.5, px: 2, gap: 1, height: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '7px', flexGrow: 1 }, children: current.map((item) => {
49
+ var _a;
50
+ return ((0, jsx_runtime_1.jsx)(material_1.Box, { width: 18, height: 18, children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: item.favicon, sx: { width: 18, height: 18 }, children: (_a = item.source) === null || _a === void 0 ? void 0 : _a.slice(0, 1) }) }));
51
+ }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", noWrap: true, sx: { width: 1, color: '#546C70', fontSize: 12, lineHeight: '18px' }, children: `View ${current.length} more` })] }) }));
52
+ }
39
53
  function ItemSkeleton() {
40
54
  return ((0, jsx_runtime_1.jsx)(ItemContainer, { title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "100%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "40%" })] }), favicon: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 18, height: 18, variant: "circular" }), link: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "70%" }) }));
41
55
  }
42
56
  function ItemContainer({ title, favicon, link }) {
43
- return ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { height: '100%' }, children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, { component: "a", href: typeof link === 'string' ? link : undefined, target: "_blank", sx: { height: '100%' }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { p: 1, gap: 1, height: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
57
+ return ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { height: '100px' }, children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, { component: "a", href: typeof link === 'string' ? link : undefined, target: "_blank", sx: { height: '100%' }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { py: 1.5, px: 2, gap: 1, height: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
44
58
  display: '-webkit-box',
45
59
  WebkitBoxOrient: 'vertical',
46
60
  WebkitLineClamp: 2,
@@ -20,6 +20,16 @@ function BackgroundImage() {
20
20
  backgroundPosition: 'center',
21
21
  pointerEvents: 'none',
22
22
  zIndex: -1,
23
+ '&::after': {
24
+ content: '""',
25
+ position: 'absolute',
26
+ top: 0,
27
+ left: 0,
28
+ right: 0,
29
+ bottom: 0,
30
+ backgroundColor: 'rgba(0, 0, 0, 0.12)',
31
+ pointerEvents: 'none',
32
+ },
23
33
  } }));
24
34
  }
25
35
  exports.default = BackgroundImage;
@@ -47,11 +47,10 @@ function SimpleChatView() {
47
47
  if (running)
48
48
  scrollToBottom({ behavior: 'smooth' });
49
49
  }, [scrollToBottom, running]);
50
- const messages = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
51
50
  const sessionLoading = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.loading);
52
51
  const loading = (0, session_1.useSessionState)((s) => s === null || s === void 0 ? void 0 : s.loading) || sessionLoading;
53
52
  (0, use_header_menu_1.useHeaderMenu)();
54
- return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { px: 0, children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", my: 10, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(MessagesView_1.default, { 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 } }) }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(InputsView_1.default, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
53
+ return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { px: 0, children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", my: 10, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(MessagesView_1.default, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10, px: { xs: 2, sm: 3 } }) }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(InputsView_1.default, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
55
54
  position: 'sticky',
56
55
  bottom: 0,
57
56
  py: 2,