@blocklet/pages-kit 0.2.320 → 0.2.321

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 (32) hide show
  1. package/lib/cjs/builtin/async/ai-runtime/components/ThemeProvider.js +11 -4
  2. package/lib/cjs/builtin/async/ai-runtime/locales/index.js +4 -0
  3. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/Input.js +29 -17
  4. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/Output.js +36 -17
  5. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/Page.js +84 -77
  6. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/components/CodePreview.js +2 -2
  7. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/components/Loading.js +7 -5
  8. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/components/UserQuestion.js +4 -4
  9. package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/contexts/V0Runtime.js +4 -1
  10. package/lib/cjs/builtin/iconify/react.js +8 -2
  11. package/lib/cjs/components/CustomComponentRenderer/state.js +14 -0
  12. package/lib/cjs/tsconfig.tsbuildinfo +1 -1
  13. package/lib/cjs/utils/inject-global-components-dump-json.js +8 -3
  14. package/lib/esm/builtin/async/ai-runtime/components/ThemeProvider.js +11 -4
  15. package/lib/esm/builtin/async/ai-runtime/locales/index.js +4 -0
  16. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/Input.js +29 -17
  17. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/Output.js +36 -17
  18. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/Page.js +84 -78
  19. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/components/CodePreview.js +2 -2
  20. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/components/Loading.js +7 -5
  21. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/components/UserQuestion.js +4 -4
  22. package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/contexts/V0Runtime.js +4 -1
  23. package/lib/esm/builtin/iconify/react.js +7 -1
  24. package/lib/esm/components/CustomComponentRenderer/state.js +11 -0
  25. package/lib/esm/tsconfig.tsbuildinfo +1 -1
  26. package/lib/esm/utils/inject-global-components-dump-json.js +8 -3
  27. package/lib/types/builtin/async/ai-runtime/locales/index.d.ts +4 -0
  28. package/lib/types/builtin/async/ai-runtime/runtime-components/V0/Page.d.ts +1 -5
  29. package/lib/types/builtin/async/ai-runtime/runtime-components/V0/contexts/V0Runtime.d.ts +1 -0
  30. package/lib/types/builtin/iconify/react.d.ts +2 -1
  31. package/lib/types/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +1 -1
@@ -54,15 +54,22 @@ function ThemeProvider({ children, template, transparentHeaderBg, }) {
54
54
  style: ({ theme }) => theme.unstable_sx({
55
55
  '.MuiInputBase-root': {
56
56
  fieldset: { borderColor: 'rgba(229, 231, 235, 1)' },
57
- [`:not(.${material_1.inputBaseClasses.disabled}):hover`]: {
57
+ [`&.Mui-focused, :not(.${material_1.inputBaseClasses.disabled}):hover`]: {
58
58
  fieldset: {
59
59
  border: 'none',
60
60
  boxShadow: `0px 0px 0px 4px ${(0, material_1.alpha)(theme.palette.primary.main, 0.2)}, 0px 0px 0px 1px ${theme.palette.primary.main}`,
61
61
  },
62
62
  },
63
- '&.Mui-focused fieldset': {
64
- border: 'none',
65
- boxShadow: `0px 0px 0px 4px ${(0, material_1.alpha)(theme.palette.primary.main, 0.2)}, 0px 0px 0px 1px ${theme.palette.primary.main}`,
63
+ },
64
+ '.MuiInputLabel-root': {
65
+ [`&.Mui-focused, :not(.${material_1.inputBaseClasses.disabled}):hover, &.MuiFormLabel-filled`]: {
66
+ backgroundColor: `${theme.palette.primary.main}`,
67
+ color: 'white',
68
+ px: 1,
69
+ ml: -0.8,
70
+ py: 0.2,
71
+ mt: -0.1,
72
+ borderRadius: 4,
66
73
  },
67
74
  },
68
75
  }),
@@ -107,6 +107,8 @@ exports.translations = {
107
107
  cannotSetPropertiesTip: 'Failed to parse PROPERTIES_SCHEMA, this code cannot be set properties',
108
108
  codePreview: 'Code Preview',
109
109
  codePreviewTip: 'Here is the code preview, you can view the generated code, and editing is not supported yet.',
110
+ hideSlider: 'Hide Versions',
111
+ showSlider: 'Show Versions',
110
112
  },
111
113
  },
112
114
  zh: {
@@ -214,6 +216,8 @@ exports.translations = {
214
216
  cannotSetPropertiesTip: '解析 PROPERTIES_SCHEMA 失败,此代码无法进行属性设置',
215
217
  codePreview: '代码预览',
216
218
  codePreviewTip: '以下是代码预览,您可以查看生成的代码,目前还不支持编辑。',
219
+ hideSlider: '隐藏版本历史',
220
+ showSlider: '显示版本历史',
217
221
  },
218
222
  },
219
223
  };
@@ -33,6 +33,7 @@ function V0Input({ submitText, inlineLabel, autoFillLastForm = false, submitInQu
33
33
  var _a, _b;
34
34
  const { t } = (0, locale_1.useLocaleContext)();
35
35
  const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
36
+ const [executeLoading, setExecuteLoading] = (0, react_2.useState)(false);
36
37
  const opening = (0, use_appearances_1.useOpeningQuestions)();
37
38
  const { execute } = (0, runtime_1.useRuntimeState)();
38
39
  const { running } = (0, session_1.useCurrentSessionState)((s) => s) || {};
@@ -54,28 +55,38 @@ function V0Input({ submitText, inlineLabel, autoFillLastForm = false, submitInQu
54
55
  }
55
56
  }, [defaultForm, autoFillLastForm, form, chatMode]);
56
57
  const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
57
- if (!(parameters === null || parameters === void 0 ? void 0 : parameters.question))
58
- return;
59
- if (!currentSessionId) {
60
- yield createSession({
61
- name: parameters === null || parameters === void 0 ? void 0 : parameters.question,
58
+ try {
59
+ if (!(parameters === null || parameters === void 0 ? void 0 : parameters.question))
60
+ return;
61
+ setExecuteLoading(true);
62
+ if (!currentSessionId) {
63
+ yield createSession({
64
+ name: parameters === null || parameters === void 0 ? void 0 : parameters.question,
65
+ });
66
+ }
67
+ // in session page, send message
68
+ yield execute({
69
+ aid,
70
+ parameters,
71
+ onResponseStart: () => {
72
+ setCurrentMessageTaskId(undefined);
73
+ if (chatMode)
74
+ form.resetField('question', { defaultValue: '' });
75
+ },
62
76
  });
63
77
  }
64
- // in session page, send message
65
- yield execute({
66
- aid,
67
- parameters,
68
- onResponseStart: () => {
69
- setCurrentMessageTaskId(undefined);
70
- if (chatMode)
71
- form.resetField('question', { defaultValue: '' });
72
- },
73
- });
78
+ catch (error) {
79
+ console.error(error);
80
+ }
81
+ finally {
82
+ setExecuteLoading(false);
83
+ }
74
84
  });
75
85
  return ((0, jsx_runtime_1.jsxs)(material_1.ThemeProvider, { theme: theme, children: [!currentSessionId && ((_a = opening === null || opening === void 0 ? void 0 : opening.questions) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(material_1.Stack, { sx: {
76
86
  flexDirection: 'row',
77
87
  gap: 1,
78
88
  mb: 1,
89
+ flexWrap: 'wrap',
79
90
  }, children: (_b = opening === null || opening === void 0 ? void 0 : opening.questions) === null || _b === void 0 ? void 0 : _b.map((item) => {
80
91
  const { title, parameters, id } = item;
81
92
  const question = (parameters === null || parameters === void 0 ? void 0 : parameters.questions) || title;
@@ -83,7 +94,8 @@ function V0Input({ submitText, inlineLabel, autoFillLastForm = false, submitInQu
83
94
  marginLeft: -4,
84
95
  } }), onClick: () => {
85
96
  form.reset(Object.assign({}, parameters));
86
- onSubmit(Object.assign({}, parameters));
97
+ // auto execute message
98
+ // onSubmit({ ...parameters });
87
99
  }, children: question }, id));
88
100
  }) })), (0, jsx_runtime_1.jsxs)(Form, { id: "v0-input", component: "form", className: (0, css_1.cx)('form', `label-position-${inlineLabel ? 'start' : 'top'}`), onSubmit: form.handleSubmit(onSubmit), children: [parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter, index) => {
89
101
  const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
@@ -109,7 +121,7 @@ function V0Input({ submitText, inlineLabel, autoFillLastForm = false, submitInQu
109
121
  }
110
122
  : undefined })] }));
111
123
  } }) }, parameter.id));
112
- }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] })] }));
124
+ }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: executeLoading || running, sx: { height: 40 }, children: submitText || t('generate') }))] })] }));
113
125
  }
114
126
  exports.default = V0Input;
115
127
  const autoSetLastParameters = false;
@@ -37,7 +37,7 @@ function V0Output() {
37
37
  var _a, _b;
38
38
  const { message } = (0, CurrentMessage_1.useCurrentMessage)();
39
39
  const propertiesSettingRef = (0, react_2.useRef)(null);
40
- const { propertiesValueMap, setPropertiesValueMap } = (0, V0Runtime_1.useV0RuntimeContext)();
40
+ const { propertiesValueMap, setPropertiesValueMap, isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
41
41
  const [code, setCode] = (0, react_2.useState)('');
42
42
  const { t, locale } = (0, locale_1.useLocaleContext)();
43
43
  const [codePreviewExtraSx, setCodePreviewExtraSx] = (0, react_2.useState)(DEFAULT_DESKTOP_SX);
@@ -50,7 +50,7 @@ function V0Output() {
50
50
  borderColor: 'rgba(0, 0, 0, 0.1) !important',
51
51
  };
52
52
  const tooltipOptions = [
53
- {
53
+ !isMobile && {
54
54
  key: 'Desktop',
55
55
  icon: 'tabler:device-desktop',
56
56
  props: {
@@ -59,7 +59,7 @@ function V0Output() {
59
59
  },
60
60
  group: 'responsive',
61
61
  },
62
- {
62
+ !isMobile && {
63
63
  key: 'Tablet',
64
64
  icon: 'tabler:device-tablet',
65
65
  props: {
@@ -71,7 +71,7 @@ function V0Output() {
71
71
  },
72
72
  group: 'responsive',
73
73
  },
74
- {
74
+ !isMobile && {
75
75
  key: 'Mobile',
76
76
  icon: 'tabler:device-mobile',
77
77
  props: {
@@ -96,14 +96,14 @@ function V0Output() {
96
96
  const currentCode = (0, CodePreview_1.getCurrentCodeByTaskId)(message, taskId);
97
97
  try {
98
98
  yield (0, CustomComponentRenderer_1.transpileAndLoadScript)(currentCode).then((m) => {
99
- var _a, _b;
99
+ var _a, _b, _c;
100
100
  if (typeof (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA) === 'object' && (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA.length)) {
101
101
  const schemaDefaultValues = Object.fromEntries(m.PROPERTIES_SCHEMA.map((item) => {
102
102
  const { key, locales } = item;
103
103
  const currentLocale = (locales === null || locales === void 0 ? void 0 : locales[locale]) || (locales === null || locales === void 0 ? void 0 : locales.en);
104
104
  return [key, currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.defaultValue];
105
105
  }));
106
- const defaultValues = Object.assign(Object.assign({}, schemaDefaultValues), (_a = propertiesValueMap[taskId]) === null || _a === void 0 ? void 0 : _a[locale]);
106
+ const defaultValues = Object.assign(Object.assign({}, schemaDefaultValues), (((_a = propertiesValueMap[taskId]) === null || _a === void 0 ? void 0 : _a[locale]) || ((_b = propertiesValueMap[taskId]) === null || _b === void 0 ? void 0 : _b.en) || {}));
107
107
  // format default values
108
108
  m.PROPERTIES_SCHEMA.forEach((item) => {
109
109
  const { key, type } = item;
@@ -117,7 +117,7 @@ function V0Output() {
117
117
  }
118
118
  });
119
119
  // @ts-ignore
120
- (_b = propertiesSettingRef.current) === null || _b === void 0 ? void 0 : _b.open({
120
+ (_c = propertiesSettingRef.current) === null || _c === void 0 ? void 0 : _c.open({
121
121
  schema: m.PROPERTIES_SCHEMA,
122
122
  onSubmit: (values) => {
123
123
  const realValues = {};
@@ -155,7 +155,7 @@ function V0Output() {
155
155
  {
156
156
  key: 'CodePreview',
157
157
  icon: code ? 'tabler:layout-board' : 'tabler:code',
158
- buttonText: code ? 'Canvas' : 'Code',
158
+ buttonText: !isMobile && (code ? 'Canvas' : 'Code'),
159
159
  props: {
160
160
  disabled,
161
161
  variant: 'contained',
@@ -168,7 +168,8 @@ function V0Output() {
168
168
  },
169
169
  group: 'codePreview',
170
170
  },
171
- ];
171
+ ].filter(Boolean);
172
+ const onCloseCode = () => setCode('');
172
173
  return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
173
174
  p: 2,
174
175
  gap: 2,
@@ -184,10 +185,15 @@ function V0Output() {
184
185
  width: '100%',
185
186
  gap: 1.5,
186
187
  flexDirection: 'row',
188
+ '.question': {
189
+ backgroundColor: 'white',
190
+ border: 1,
191
+ borderColor: 'rgba(0, 0, 0, 0.1) !important',
192
+ },
187
193
  }, children: [(0, jsx_runtime_1.jsx)(UserQuestion_1.default, { question: parameters === null || parameters === void 0 ? void 0 : parameters.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
188
194
  display: 'flex',
189
195
  alignItems: 'center',
190
- gap: 1.5,
196
+ gap: 1,
191
197
  }, children: Object.entries((0, groupBy_1.default)(tooltipOptions, 'group')).map(([group, options]) => {
192
198
  return ((0, jsx_runtime_1.jsx)(material_1.ButtonGroup, { variant: "text", color: "inherit", size: "small", sx: {
193
199
  borderColor: 'rgba(0, 0, 0, 0.1) !important',
@@ -201,12 +207,25 @@ function V0Output() {
201
207
  overflowY: 'auto',
202
208
  scrollbarWidth: 'thin',
203
209
  scrollbarColor: 'grey transparent',
204
- }, propertiesValueMap: propertiesValueMap }) }), objects === null || objects === void 0 ? void 0 : objects.map((item, index) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data }, index)), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } })), (0, jsx_runtime_1.jsxs)(react_2.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Loading_1.default, {}), children: [(0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", open: !!code, onClose: () => setCode(''), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
205
- p: 2,
206
- maxWidth: '60vw',
207
- }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
208
- lineHeight: 2,
209
- mb: 1,
210
- }, children: t('v0.codePreview') }), (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: t('v0.codePreviewTip') }), (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: `\`\`\`typescript\n${code}\n\`\`\`` })] }) }), (0, jsx_runtime_1.jsx)(PropertiesSetting_1.default, { ref: propertiesSettingRef })] })] }));
210
+ }, propertiesValueMap: propertiesValueMap }) }), objects === null || objects === void 0 ? void 0 : objects.map((item, index) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data }, index)), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } })), (0, jsx_runtime_1.jsxs)(react_2.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Loading_1.default, {}), children: [(0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: isMobile ? 'bottom' : 'right', open: !!code, onClose: onCloseCode, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, pt: 0 }, (isMobile ? { maxHeight: '70vh' } : { maxWidth: '70vw' })), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
211
+ py: 2,
212
+ position: 'sticky',
213
+ top: 0,
214
+ left: 0,
215
+ backgroundColor: 'white',
216
+ zIndex: 9999,
217
+ display: 'flex',
218
+ justifyContent: 'space-between',
219
+ alignItems: 'center',
220
+ }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
221
+ lineHeight: 1,
222
+ }, children: t('v0.codePreview') }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: onCloseCode,
223
+ // variant="text"
224
+ color: "inherit", disableElevation: true, sx: {
225
+ minWidth: 32,
226
+ minHeight: 32,
227
+ p: 0,
228
+ fontSize: 22,
229
+ }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: t('v0.codePreviewTip') }), (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: `\`\`\`typescript\n${code}\n\`\`\`` })] }) }), (0, jsx_runtime_1.jsx)(PropertiesSetting_1.default, { ref: propertiesSettingRef })] })] }));
211
230
  }
212
231
  exports.default = V0Output;
@@ -45,7 +45,7 @@ const UserQuestion_1 = __importDefault(require("./components/UserQuestion"));
45
45
  const V0Runtime_1 = require("./contexts/V0Runtime");
46
46
  const utils_1 = require("./utils");
47
47
  const sliderWidth = 200;
48
- function V0Page({ textColor = '#333', primaryColor }) {
48
+ function V0Page({ textColor = '#333', primaryColor = '#333' }) {
49
49
  const inheritedTheme = (0, material_1.useTheme)();
50
50
  const theme = (0, react_2.useMemo)(() => {
51
51
  let { primary } = inheritedTheme.palette;
@@ -58,7 +58,7 @@ function V0Page({ textColor = '#333', primaryColor }) {
58
58
  console.error('augment primary color error', { error });
59
59
  }
60
60
  return (0, material_1.createTheme)(inheritedTheme, {
61
- palette: { primary, textColor, background: { block: '#f9f9f9' } },
61
+ palette: { primary, textColor, background: { block: '#f6f6f6' } },
62
62
  shape: {
63
63
  borderRadius: 8,
64
64
  },
@@ -69,30 +69,36 @@ function V0Page({ textColor = '#333', primaryColor }) {
69
69
  });
70
70
  const { currentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
71
71
  const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
72
- return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(V0Runtime_1.V0RuntimeProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
73
- height: 'calc(100vh - 64px - 1px)',
74
- textAlign: 'center',
75
- pt: 3,
76
- gap: 2,
77
- display: 'flex',
78
- flexDirection: 'column',
79
- position: 'relative',
80
- '.code-preview-wrapper': {},
81
- }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
82
- flex: 1,
83
- height: currentSessionId ? 'calc(100% - 48px - 16px - 16px)' : 'unset',
84
- }, children: currentSessionId ? (0, jsx_runtime_1.jsx)(V0DetailRender, {}) : (0, jsx_runtime_1.jsx)(V0ListRender, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
85
- position: 'sticky',
86
- bottom: 0,
87
- backgroundColor: 'white',
88
- py: 2,
89
- pt: currentSessionId ? 0 : 2,
90
- }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] }) }) }) }) }));
72
+ const { isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
73
+ return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
74
+ height: 'calc(100vh - 64px - 1px)',
75
+ textAlign: 'center',
76
+ pt: 3,
77
+ gap: 2,
78
+ display: 'flex',
79
+ flexDirection: 'column',
80
+ position: 'relative',
81
+ '.code-preview-wrapper': {},
82
+ }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
83
+ flex: 1,
84
+ height: !isMobile && currentSessionId ? 'calc(100% - 48px - 16px - 16px)' : 'unset',
85
+ }, children: currentSessionId ? (0, jsx_runtime_1.jsx)(V0DetailRender, {}) : (0, jsx_runtime_1.jsx)(V0ListRender, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
86
+ position: 'sticky',
87
+ bottom: 0,
88
+ backgroundColor: 'white',
89
+ py: 2,
90
+ pt: currentSessionId ? 0 : 2,
91
+ zIndex: 1100,
92
+ }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] }) }) }) }));
93
+ }
94
+ function Page() {
95
+ return ((0, jsx_runtime_1.jsx)(V0Runtime_1.V0RuntimeProvider, { children: (0, jsx_runtime_1.jsx)(V0Page, {}) }));
91
96
  }
92
- exports.default = V0Page;
97
+ exports.default = Page;
93
98
  function V0ListRender() {
94
99
  const ConfirmDialogRef = (0, react_2.useRef)();
95
100
  const { sessions: sessionsList, setCurrentSessionId, loadLatestMessagesForAllSessions, sessionMap, deleteSession, loading, } = (0, session_1.useSessionState)((s) => s) || {};
101
+ const { isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
96
102
  const { t } = (0, locale_1.useLocaleContext)();
97
103
  (0, react_2.useEffect)(() => {
98
104
  const loadData = () => __awaiter(this, void 0, void 0, function* () {
@@ -102,13 +108,16 @@ function V0ListRender() {
102
108
  });
103
109
  loadData();
104
110
  }, [sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length]);
105
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold', mt: 6 }, children: t('v0.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", color: "textColor", sx: Object.assign(Object.assign({}, (0, utils_1.getLineClamp)(5)), { mt: 2 }), children: t('v0.description') }), loading ? ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: {
111
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold', mt: isMobile ? 3 : 6 }, children: t('v0.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", color: "textColor", sx: Object.assign(Object.assign({}, (0, utils_1.getLineClamp)(5)), { mt: 2 }), children: t('v0.description') }), loading ? ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: {
106
112
  position: 'relative',
107
113
  height: '40vh',
108
114
  width: '100%',
109
115
  } })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
110
- mt: 8,
111
- }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? ((0, jsx_runtime_1.jsx)(lab_1.Masonry, { columns: { xs: 2, sm: 3, md: 4, lg: 4 }, sequential: true, spacing: 2, children: sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.map((item) => {
116
+ mt: isMobile ? 4 : 8,
117
+ display: 'flex',
118
+ alignContent: 'center',
119
+ justifyContent: 'center',
120
+ }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? ((0, jsx_runtime_1.jsx)(lab_1.Masonry, { columns: { xs: 1, sm: 2, md: 4, lg: 4 }, sequential: true, spacing: 2, children: sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.map((item) => {
112
121
  var _a, _b;
113
122
  const { name, id } = item;
114
123
  const latestMessage = (_b = (_a = sessionMap === null || sessionMap === void 0 ? void 0 : sessionMap[id]) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b.at(-1);
@@ -128,8 +137,9 @@ function V0ListRender() {
128
137
  cursor: 'pointer',
129
138
  transition: 'all 0.3s',
130
139
  overflow: 'hidden',
131
- minHeight: sliderWidth,
132
- maxHeight: '50vh',
140
+ // minHeight: sliderWidth,
141
+ // maxHeight: '50vh',
142
+ height: 300,
133
143
  '&:hover': {
134
144
  borderColor: 'primary.main',
135
145
  },
@@ -168,7 +178,8 @@ function V0ListRender() {
168
178
  function V0DetailRender() {
169
179
  const { setCurrentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
170
180
  const { messages: messagesList, loading } = (0, session_1.useCurrentSessionState)((s) => s) || {};
171
- const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap } = (0, V0Runtime_1.useV0RuntimeContext)();
181
+ const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap, isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
182
+ const [sliderOpenInMobile, setSliderOpenInMobile] = (0, react_2.useState)(!isMobile);
172
183
  const { t } = (0, locale_1.useLocaleContext)();
173
184
  const currentMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.find((item) => item.taskId === currentMessageTaskId);
174
185
  (0, react_2.useEffect)(() => {
@@ -181,48 +192,48 @@ function V0DetailRender() {
181
192
  }
182
193
  }
183
194
  }, [messagesList, currentMessageTaskId]);
195
+ const sliderOpen = isMobile ? sliderOpenInMobile : true;
196
+ const sliderWrapperSx = {
197
+ height: isMobile ? 'unset' : '100%',
198
+ backgroundColor: 'background.block',
199
+ borderRadius: 1,
200
+ p: 2,
201
+ position: 'relative',
202
+ };
184
203
  return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, sx: {
185
204
  display: 'flex',
186
205
  gap: 2,
187
206
  height: '100%',
188
- }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
189
- width: sliderWidth,
190
- gap: 2,
191
- display: 'flex',
192
- flexDirection: 'column',
193
- height: '100%',
194
- backgroundColor: 'background.block',
195
- borderRadius: 1,
196
- p: 2,
197
- position: 'relative',
198
- }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", startIcon: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:chevron-left" }), onClick: () => {
199
- setCurrentMessageTaskId(undefined);
200
- setCurrentSessionId('');
201
- }, sx: {
202
- backgroundColor: 'white',
203
- }, children: t('back') }), loading && ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: {
204
- position: 'absolute',
205
- width: '80px',
206
- height: '80px',
207
- zIndex: 99999,
208
- top: 0,
209
- left: 0,
210
- right: 0,
211
- bottom: 0,
212
- margin: 'auto',
213
- background: 'rgba(255, 255, 255, 0.8)',
214
- opacity: 0.8,
215
- borderRadius: 1,
216
- boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
217
- } })), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, sx: {
207
+ flexDirection: isMobile ? 'column' : 'row',
208
+ }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ width: isMobile ? '100%' : sliderWidth, gap: 2, display: 'flex', flexDirection: 'column' }, (isMobile ? {} : Object.assign({}, sliderWrapperSx))), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
209
+ display: 'flex',
210
+ justifyContent: 'space-between',
211
+ alignItems: 'center',
212
+ gap: 2,
213
+ }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", startIcon: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:chevron-left" }), onClick: () => {
214
+ setCurrentMessageTaskId(undefined);
215
+ setCurrentSessionId('');
216
+ }, sx: {
217
+ backgroundColor: 'white',
218
+ width: isMobile ? 'auto' : '100%',
219
+ }, children: t('back') }), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: sliderOpenInMobile ? 'tabler:chevron-up' : 'tabler:chevron-down' }), size: "small", onClick: () => setSliderOpenInMobile(!sliderOpenInMobile), children: sliderOpenInMobile ? t('v0.hideSlider') : t('v0.showSlider') })) : null, loading && ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: Object.assign({ position: 'absolute', zIndex: 99999, top: 0, left: 0, right: 0, bottom: 0, margin: 'auto', background: 'rgba(255, 255, 255, 0.8)', opacity: 0.8, borderRadius: 1, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }, (isMobile
220
+ ? {
221
+ width: '40px',
222
+ height: '40px',
223
+ }
224
+ : {
225
+ width: '80px',
226
+ height: '80px',
227
+ })) }))] }), sliderOpen && ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, direction: isMobile ? 'row' : 'column', sx: Object.assign(Object.assign({}, (isMobile
228
+ ? Object.assign({ overflowY: 'hidden', overflowX: 'auto' }, sliderWrapperSx) : {
218
229
  overflowY: 'auto',
219
230
  overflowX: 'hidden',
231
+ })), {
220
232
  // scrollbarWidth: 'thin',
221
233
  // scrollbarColor: 'grey transparent',
222
234
  '&::-webkit-scrollbar': {
223
235
  display: 'none',
224
- },
225
- }, children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((item, i) => {
236
+ } }), children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((item, i) => {
226
237
  const { parameters, taskId, updatedAt } = item;
227
238
  const isCurrent = taskId === (currentMessageTaskId || undefined);
228
239
  return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
@@ -233,21 +244,17 @@ function V0DetailRender() {
233
244
  }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => {
234
245
  // @ts-ignore
235
246
  setCurrentMessageTaskId(item.taskId);
236
- }, sx: {
237
- cursor: 'pointer',
238
- color: 'textColor',
239
- borderRadius: 1,
240
- border: 1,
241
- borderColor: isCurrent ? 'primary.main' : 'background.block',
242
- backgroundColor: 'white',
243
- position: 'relative',
244
- transition: 'all 0.3s',
245
- '&:hover': {
246
- borderColor: isCurrent ? 'primary.main' : 'textColor',
247
- },
248
- minHeight: sliderWidth / 2,
249
- maxHeight: '50vh',
250
- }, children: [(0, jsx_runtime_1.jsx)(CodePreview_1.CodeRenderByMessageMemo, { zoom: 0.25, message: item, sx: {
247
+ }, sx: Object.assign({ cursor: 'pointer', color: 'textColor', borderRadius: 1, border: 1, borderColor: isCurrent ? 'primary.main' : 'background.block', backgroundColor: 'white', position: 'relative', transition: 'all 0.3s', '&:hover': {
248
+ borderColor: 'primary.main',
249
+ } }, (isMobile
250
+ ? {
251
+ width: sliderWidth / 2,
252
+ height: sliderWidth / 2,
253
+ }
254
+ : {
255
+ minHeight: sliderWidth / 2,
256
+ maxHeight: '50vh',
257
+ })), children: [(0, jsx_runtime_1.jsx)(CodePreview_1.CodeRenderByMessageMemo, { zoom: 0.25, message: item, sx: {
251
258
  pointerEvents: 'none',
252
259
  }, propertiesValueMap: propertiesValueMap }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { placement: "right", arrow: true, PopperProps: {
253
260
  // disablePortal: true,
@@ -276,11 +283,11 @@ function V0DetailRender() {
276
283
  color: isCurrent ? 'primary.main' : 'textColor',
277
284
  borderRadius: 1,
278
285
  } }) }, taskId)] }, taskId) }, taskId));
279
- }) })] }, "slider"), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
286
+ }) }))] }, "slider"), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
280
287
  borderRadius: 1,
281
288
  backgroundColor: 'background.block',
282
289
  flex: 1,
283
- maxWidth: `calc(100% - ${sliderWidth}px - 16px)`,
290
+ maxWidth: isMobile ? '100%' : `calc(100% - ${sliderWidth}px - 16px)`,
284
291
  }, children: (0, jsx_runtime_1.jsx)(AgentOutputRender, { message: currentMessage }) })] }));
285
292
  }
286
293
  function AgentInputRender(_a) {
@@ -79,11 +79,11 @@ function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesVal
79
79
  } }) }));
80
80
  }
81
81
  return (_d = (_c = message === null || message === void 0 ? void 0 : message.result) === null || _c === void 0 ? void 0 : _c.objects) === null || _d === void 0 ? void 0 : _d.map((item) => {
82
- var _a, _b;
82
+ var _a, _b, _c;
83
83
  const { taskId } = item;
84
84
  // @ts-ignore
85
85
  const code = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a[codeField];
86
- return ((0, jsx_runtime_1.jsx)(exports.CodePreviewMemo, { componentId: `code-preview-${taskId}`, code: code, propertiesValue: (_b = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _b === void 0 ? void 0 : _b[locale] }, item.taskId));
86
+ return ((0, jsx_runtime_1.jsx)(exports.CodePreviewMemo, { componentId: `code-preview-${taskId}`, code: code, propertiesValue: ((_b = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _b === void 0 ? void 0 : _b[locale]) || ((_c = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _c === void 0 ? void 0 : _c.en) || {} }, item.taskId));
87
87
  });
88
88
  // eslint-disable-next-line react-hooks/exhaustive-deps
89
89
  }, [isMessageLoading, (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects, propertiesValueMap, locale]);
@@ -81,29 +81,31 @@ function AIRunningLoading(props) {
81
81
  backgroundColor: 'grey.200',
82
82
  } }),
83
83
  (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
84
- width: 120,
84
+ width: 90,
85
85
  height: 50,
86
86
  borderRadius: 1,
87
87
  backgroundColor: 'grey.200',
88
88
  } }),
89
89
  (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
90
- width: 180,
90
+ width: 120,
91
91
  height: 50,
92
92
  borderRadius: 1,
93
93
  backgroundColor: 'grey.200',
94
94
  } }),
95
95
  ],
96
96
  sx: {
97
- p: 2,
97
+ px: 2,
98
+ py: 1,
98
99
  display: 'flex',
99
100
  gap: 1.5,
100
101
  justifyContent: 'space-between',
102
+ overflow: 'hidden',
101
103
  },
102
104
  },
103
105
  },
104
106
  {
105
107
  time: 60,
106
- width: 500,
108
+ width: 290,
107
109
  height: 150,
108
110
  extraProps: {
109
111
  sx: {
@@ -112,7 +114,7 @@ function AIRunningLoading(props) {
112
114
  },
113
115
  },
114
116
  ];
115
- return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: Object.assign({ flex: 1, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', flexDirection: 'column', gap: 1.5, '@keyframes loading': {
117
+ return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: Object.assign({ flex: 1, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', flexDirection: 'column', gap: 1.5, width: '100%', overflow: 'hidden', '@keyframes loading': {
116
118
  '0%': {
117
119
  transform: 'translateY(-8px) scaleX(1.3)',
118
120
  opacity: 0,
@@ -19,14 +19,14 @@ function UserQuestion({ question }) {
19
19
  display: 'flex',
20
20
  alignItems: 'center',
21
21
  gap: 1,
22
- }, children: [((_a = authSession === null || authSession === void 0 ? void 0 : authSession.user) === null || _a === void 0 ? void 0 : _a.did) && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
22
+ }, children: [((_a = authSession === null || authSession === void 0 ? void 0 : authSession.user) === null || _a === void 0 ? void 0 : _a.did) && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "user", sx: {
23
23
  width: 30,
24
24
  height: 30,
25
- }, children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 30, did: user === null || user === void 0 ? void 0 : user.did, variant: "circle", shape: "circle", src: user === null || user === void 0 ? void 0 : user.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
26
- padding: '6px 8px',
25
+ }, children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 30, did: user === null || user === void 0 ? void 0 : user.did, variant: "circle", shape: "circle", src: user === null || user === void 0 ? void 0 : user.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "question", sx: {
26
+ padding: '6px 12px',
27
27
  borderRadius: 1,
28
28
  // borderTopLeftRadius: 0,
29
29
  backgroundColor: 'grey.200',
30
- }, children: (0, jsx_runtime_1.jsx)(ClickToCopy_1.default, { locale: locale, unstyled: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: Object.assign({ fontWeight: 500, fontSize: 13, maxWidth: 300, color: 'textColor' }, (0, utils_1.getLineClamp)(1)), children: question }) }) })] }));
30
+ }, children: (0, jsx_runtime_1.jsx)(ClickToCopy_1.default, { locale: locale, unstyled: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: Object.assign({ fontWeight: 500, fontSize: 13, maxWidth: 300, color: 'textColor', textAlign: 'left' }, (0, utils_1.getLineClamp)(1)), children: question }) }) })] }));
31
31
  }
32
32
  exports.default = UserQuestion;
@@ -2,12 +2,14 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useV0RuntimeContext = exports.V0RuntimeProvider = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const material_1 = require("@mui/material");
5
6
  const react_1 = require("react");
6
7
  const context = (0, react_1.createContext)(undefined);
7
8
  let cancelAutoScrollTimer;
8
9
  function V0RuntimeProvider({ children }) {
9
10
  const [currentMessageTaskId, setCurrentMessageTaskId] = (0, react_1.useState)();
10
11
  const [propertiesValueMap, setPropertiesValueMap] = (0, react_1.useState)({});
12
+ const isMobile = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
11
13
  const state = (0, react_1.useMemo)(() => ({
12
14
  setCurrentMessageTaskId: (taskId) => {
13
15
  setCurrentMessageTaskId(taskId);
@@ -40,7 +42,8 @@ function V0RuntimeProvider({ children }) {
40
42
  setPropertiesValueMap: (valueMap) => {
41
43
  setPropertiesValueMap(Object.assign(Object.assign({}, propertiesValueMap), valueMap));
42
44
  },
43
- }), [setCurrentMessageTaskId, currentMessageTaskId, propertiesValueMap, setPropertiesValueMap]);
45
+ isMobile,
46
+ }), [setCurrentMessageTaskId, currentMessageTaskId, propertiesValueMap, setPropertiesValueMap, isMobile]);
44
47
  return (0, jsx_runtime_1.jsx)(context.Provider, { value: state, children: children });
45
48
  }
46
49
  exports.V0RuntimeProvider = V0RuntimeProvider;