@blocklet/pages-kit 0.2.317 → 0.2.319

package/lib/cjs/utils/inject-global-components-dump-json.js

@@ -426,7 +426,7 @@ export default function FormDemo() {
 import { Icon } from '@blocklet/pages-kit/builtin/iconify/react';
 
 export default function TablerSuccessIcon() {
-  return <Icon icon="tabler:check" />;
+  return <Icon icon="tabler:check" fontSize={24} color="rgba(75, 85, 99, 1)"/>;
 }
           `,
                 },

package/lib/esm/builtin/async/ai-runtime/locales/index.js

@@ -34,6 +34,7 @@ export const translations = {
         rename: 'Rename',
         delete: 'Delete',
         confirmDelete: 'Confirm Delete?',
+        confirm: 'Confirm',
         noData: 'No {data} yet',
         createObject: 'Create {object}',
         title: 'Title',
@@ -92,6 +93,18 @@ export const translations = {
         send: 'Send',
         session: 'Session',
         loadMore: 'Load More',
+        v0: {
+            title: 'AIGNE v0',
+            description: 'AIGNE v0 is an AI-based code tool that can help you generate code quickly.',
+            noData: 'No conversation information yet, click the button below to start generating!',
+            deleteSessionTitle: 'Delete Conversation Information',
+            deleteSessionTip: 'Are you sure you want to delete this Conversation Information?',
+            propertiesSetting: 'Properties Setting',
+            propertiesSettingTip: 'This function is used for debugging components and does not affect the final code',
+            cannotSetPropertiesTip: 'Failed to parse PROPERTIES_SCHEMA, this code cannot be set properties',
+            codePreview: 'Code Preview',
+            codePreviewTip: 'Here is the code preview, you can view the generated code, and editing is not supported yet.',
+        },
     },
     zh: {
         by: '作者',
@@ -128,6 +141,7 @@ export const translations = {
         rename: '重命名',
         delete: '删除',
         confirmDelete: '确定删除？',
+        confirm: '确定',
         noData: '暂无{data}',
         createObject: '创建{object}',
         title: '标题',
@@ -186,5 +200,17 @@ export const translations = {
         send: '发送',
         session: '会话',
         loadMore: '加载更多',
+        v0: {
+            title: 'AIGNE v0',
+            description: 'AIGNE v0 是一个基于人工智能的代码工具，可以帮助您快速生成代码。',
+            noData: '暂无生成记录，点击下方按钮开始生成吧！',
+            deleteSessionTitle: '删除生成记录',
+            deleteSessionTip: '确定要删除此生成记录吗？',
+            propertiesSetting: '属性设置',
+            propertiesSettingTip: '此功能用于调试组件，不影响最终代码',
+            cannotSetPropertiesTip: '解析 PROPERTIES_SCHEMA 失败，此代码无法进行属性设置',
+            codePreview: '代码预览',
+            codePreviewTip: '以下是代码预览，您可以查看生成的代码，目前还不支持编辑。',
+        },
     },
 };

package/lib/esm/builtin/async/ai-runtime/runtime-components/ChatOutput/MessageErrorView.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box } from '@mui/material';
 import { useLocaleContext } from '../../../../locale';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
-export default function MessageErrorView({ error }) {
+export default function MessageErrorView({ error, sx }) {
     const { t } = useLocaleContext();
     if (!error)
         return null;
     if (error.status === 401) {
         return (_jsx(Box, { className: "ai-chat-message-error", children: _jsx(Box, { className: "message-response", children: _jsx(MarkdownRenderer, { children: t('requireLogin') }) }) }));
     }
-    return (_jsx(Alert, { className: "ai-chat-message-error", severity: "error", sx: { mr: 5 }, children: error.message }));
+    return (_jsx(Alert, { className: "ai-chat-message-error", severity: "error", sx: Object.assign({ mr: 5 }, sx), children: error.message }));
 }

package/lib/esm/builtin/async/ai-runtime/runtime-components/GoogleSearch/GoogleSearchSourcesView.js

@@ -8,7 +8,7 @@ const searchResultSchema = Joi.object({
     organic_results: Joi.array().items(Joi.object({
         title: Joi.string().required(),
         link: Joi.string().required(),
-        snippet: Joi.string().required(),
+        snippet: Joi.string().empty([null, '']),
         favicon: Joi.string().empty([null, '']),
         source: Joi.string().empty([null, '']),
     })),

package/lib/esm/builtin/async/ai-runtime/runtime-components/SimpleChat/index.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ThemeProvider, alpha, createTheme, useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, CircularProgress, ThemeProvider, alpha, createTheme, useTheme } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
 import SimpleHeader from '../../components/Header/SimpleHeader';
@@ -20,7 +20,7 @@ import { useActiveAgent } from '../../contexts/ActiveAgent';
 import { ComponentPreferencesProvider } from '../../contexts/ComponentPreferences';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import { useHeaderMenu } from '../../hooks/use-header-menu';
-import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
 import BackgroundImage from './BackgroundImage';
 import InputsView from './InputsView';
 import MessagesView from './MessagesView';
@@ -56,14 +56,18 @@ function SimpleChatView() {
         if (running)
             scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, running]);
+    const messages = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const sessionLoading = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.loading);
+    const loading = useSessionState((s) => s === null || s === void 0 ? void 0 : s.loading) || sessionLoading;
     useHeaderMenu();
-    return (_jsxs(SimpleLayout, { children: [_jsx(SimpleHeader, { px: 2 }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
-                        position: 'sticky',
-                        bottom: 0,
-                        p: 2,
-                        zIndex: 10,
-                        borderRadius: 1,
-                        bgcolor: (theme) => alpha(theme.palette.background.paper, 0.7),
-                        backdropFilter: 'blur(10px)',
-                    } }) })] }));
+    return (_jsxs(SimpleLayout, { px: 0, children: [_jsx(SimpleHeader, { px: 4 }), 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: {
+                                position: 'sticky',
+                                bottom: 0,
+                                py: 2,
+                                px: { xs: 2, sm: 3 },
+                                zIndex: 10,
+                                borderRadius: 1,
+                                bgcolor: (theme) => alpha(theme.palette.background.paper, 0.7),
+                                backdropFilter: 'blur(10px)',
+                            } }) })] }))] }));
 }

package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/Input.js

@@ -9,7 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
-import { Box, FormLabel, InputAdornment, Stack, ThemeProvider, createTheme, formLabelClasses, outlinedInputClasses, styled, useTheme, } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { Box, Button, FormLabel, InputAdornment, Stack, ThemeProvider, createTheme, formLabelClasses, outlinedInputClasses, styled, useTheme, } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
 import { useEffect, useMemo, useState } from 'react';
@@ -18,14 +19,20 @@ import { useLocaleContext } from '../../../../locale';
 import AgentInputField from '../../components/AgentInputField';
 import LoadingButton from '../../components/LoadingButton';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useOpeningQuestions } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useCurrentSessionState } from '../../state/session';
+import { useCurrentSessionState, useSessionState } from '../../state/session';
 import { isValidInput } from '../../utils/agent-inputs';
-export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+import { useV0RuntimeContext } from './contexts/V0Runtime';
+export default function V0Input({ submitText, inlineLabel, autoFillLastForm = false, submitInQuestionField = true, chatMode = true, }) {
+    var _a, _b;
     const { t } = useLocaleContext();
     const { aid, agent } = useCurrentAgent();
+    const opening = useOpeningQuestions();
     const { execute } = useRuntimeState();
-    const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
+    const { running } = useCurrentSessionState((s) => s) || {};
+    const { createSession, currentSessionId } = useSessionState((s) => s) || {};
+    const { setCurrentMessageTaskId } = useV0RuntimeContext();
     const parameters = useMemo(() => {
         var _a;
         return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => {
@@ -42,47 +49,70 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
         }
     }, [defaultForm, autoFillLastForm, form, chatMode]);
     const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        if (!(parameters === null || parameters === void 0 ? void 0 : parameters.question))
+            return;
+        if (!currentSessionId) {
+            yield createSession({
+                name: parameters === null || parameters === void 0 ? void 0 : parameters.question,
+            });
+        }
+        // in session page, send message
         yield execute({
             aid,
             parameters,
             onResponseStart: () => {
+                setCurrentMessageTaskId(undefined);
                 if (chatMode)
                     form.resetField('question', { defaultValue: '' });
             },
         });
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Form, { component: "form", className: cx('form', `label-position-${inlineLabel ? 'start' : 'top'}`), onSubmit: form.handleSubmit(onSubmit), children: [parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter, index) => {
-                    const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
-                    return (_jsx(Box, { children: _jsx(Controller, { control: form.control, name: key, rules: {
-                                required,
-                                min: parameter.type === 'number' && typeof parameter.min === 'number'
-                                    ? { value: parameter.min, message: '' }
-                                    : undefined,
-                                max: parameter.type === 'number' && typeof parameter.max === 'number'
-                                    ? { value: parameter.max, message: '' }
-                                    : undefined,
-                                minLength: parameter.type === 'string' && typeof parameter.minLength === 'number'
-                                    ? { value: parameter.minLength, message: '' }
-                                    : undefined,
-                                maxLength: parameter.type === 'string' && typeof parameter.maxLength === 'number'
-                                    ? { value: parameter.maxLength, message: '' }
-                                    : undefined,
-                            }, render: ({ field, fieldState }) => {
-                                var _a;
-                                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
-                                                ? {
-                                                    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 }) })),
-                                                }
-                                                : undefined })] }));
-                            } }) }, parameter.id));
-                }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+    return (_jsxs(ThemeProvider, { theme: theme, children: [!currentSessionId && ((_a = opening === null || opening === void 0 ? void 0 : opening.questions) === null || _a === void 0 ? void 0 : _a.length) && (_jsx(Stack, { sx: {
+                    flexDirection: 'row',
+                    gap: 1,
+                    mb: 1,
+                }, children: (_b = opening === null || opening === void 0 ? void 0 : opening.questions) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    const { title, parameters, id } = item;
+                    const question = (parameters === null || parameters === void 0 ? void 0 : parameters.questions) || title;
+                    return (_jsx(Button, { variant: "outlined", size: "small", endIcon: _jsx(Icon, { icon: "tabler:arrow-down-right", style: {
+                                marginLeft: -4,
+                            } }), onClick: () => {
+                            form.reset(Object.assign({}, parameters));
+                            onSubmit(Object.assign({}, parameters));
+                        }, children: question }, id));
+                }) })), _jsxs(Form, { id: "v0-input", component: "form", className: cx('form', `label-position-${inlineLabel ? 'start' : 'top'}`), onSubmit: form.handleSubmit(onSubmit), children: [parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter, index) => {
+                        const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
+                        return (_jsx(Box, { children: _jsx(Controller, { control: form.control, name: key, rules: {
+                                    required,
+                                    min: parameter.type === 'number' && typeof parameter.min === 'number'
+                                        ? { value: parameter.min, message: '' }
+                                        : undefined,
+                                    max: parameter.type === 'number' && typeof parameter.max === 'number'
+                                        ? { value: parameter.max, message: '' }
+                                        : undefined,
+                                    minLength: parameter.type === 'string' && typeof parameter.minLength === 'number'
+                                        ? { value: parameter.minLength, message: '' }
+                                        : undefined,
+                                    maxLength: parameter.type === 'string' && typeof parameter.maxLength === 'number'
+                                        ? { value: parameter.maxLength, message: '' }
+                                        : undefined,
+                                }, render: ({ field, fieldState }) => {
+                                    var _a;
+                                    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
+                                                    ? {
+                                                        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 || t('generate') }) })),
+                                                    }
+                                                    : undefined })] }));
+                                } }) }, parameter.id));
+                    }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] })] }));
 }
+const autoSetLastParameters = false;
 function useInitialFormValues() {
     const { agent } = useCurrentAgent();
     const lastMessage = useCurrentSessionState((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
     const [lastInputs, setLastInputs] = useState();
     useEffect(() => {
-        if (!lastInputs) {
+        if (autoSetLastParameters && !lastInputs) {
             const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
             if (!isEmpty(lastParameters))
                 setLastInputs(lastParameters);

package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/Output.js

@@ -1,73 +1,206 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Toast from '@arcblock/ux/lib/Toast';
 import { Icon } from '@iconify/react';
-import { Box, Drawer, IconButton, Skeleton, Stack } from '@mui/material';
-import { useState } from 'react';
-import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { Alert, Box, Button, ButtonGroup, Drawer, Stack, Typography } from '@mui/material';
+import groupBy from 'lodash/groupBy';
+import { Suspense, useRef, useState } from 'react';
+import { transpileAndLoadScript } from '../../../../../components/CustomComponentRenderer';
+import { useLocaleContext } from '../../../../locale';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
 import ShareActions from '../../components/ShareActions';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
-import MessageErrorView from '../ChatOutput/MessageErrorView';
 import MessageMetadataRenderer from '../ChatOutput/MessageMetadataRenderer';
-const codeField = 'code';
+import { CodeRenderByMessageMemo as CodeRenderByMessage, getCurrentCodeByTaskId } from './components/CodePreview';
+import Loading from './components/Loading';
+import PropertiesSetting from './components/PropertiesSetting';
+import UserQuestion from './components/UserQuestion';
+import { useV0RuntimeContext } from './contexts/V0Runtime';
+const DEFAULT_DESKTOP_SX = {
+    width: '100%',
+    height: '100%',
+};
 export default function V0Output() {
     var _a, _b;
     const { message } = useCurrentMessage();
+    const propertiesSettingRef = useRef(null);
+    const { propertiesValueMap, setPropertiesValueMap } = useV0RuntimeContext();
+    const [code, setCode] = useState('');
+    const { t, locale } = useLocaleContext();
+    const [codePreviewExtraSx, setCodePreviewExtraSx] = useState(DEFAULT_DESKTOP_SX);
     const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
-    const { error } = message;
+    const { taskId, parameters } = message;
     const isMessageLoading = (message.loading || !message.result) && !message.error;
-    return (_jsxs(Stack, { gap: 2, sx: {
-            py: 2,
-        }, children: [error && _jsx(MessageErrorView, { error: error }), isMessageLoading && (_jsx(Stack, { sx: {
-                    flex: 1,
-                }, children: _jsx(Skeleton, { variant: "rectangular", sx: {
-                        height: 400,
-                        borderRadius: 1,
-                    } }) })), objects === null || objects === void 0 ? void 0 : objects.map((item) => {
-                // @ts-ignore
-                const code = item.data[codeField];
-                return (_jsx(Box, { flex: 1, sx: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, children: _jsx(CodePreview, { code: code }) }));
-            }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data })), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && (_jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
-}
-function CodePreview({ code }) {
-    const [showCode, setShowCode] = useState(false);
-    if (!code)
-        return null;
+    const disabled = isMessageLoading || !(objects === null || objects === void 0 ? void 0 : objects.length) || message.error;
+    const responsiveSx = {
+        backgroundColor: 'white',
+        borderColor: 'rgba(0, 0, 0, 0.1) !important',
+    };
+    const tooltipOptions = [
+        {
+            key: 'Desktop',
+            icon: 'tabler:device-desktop',
+            props: {
+                sx: Object.assign({}, responsiveSx),
+                onClick: () => setCodePreviewExtraSx(DEFAULT_DESKTOP_SX),
+            },
+            group: 'responsive',
+        },
+        {
+            key: 'Tablet',
+            icon: 'tabler:device-tablet',
+            props: {
+                sx: Object.assign({}, responsiveSx),
+                onClick: () => setCodePreviewExtraSx({
+                    width: '768px',
+                    height: '1024px',
+                }),
+            },
+            group: 'responsive',
+        },
+        {
+            key: 'Mobile',
+            icon: 'tabler:device-mobile',
+            props: {
+                sx: Object.assign({}, responsiveSx),
+                onClick: () => setCodePreviewExtraSx({
+                    width: '375px',
+                    height: '667px',
+                }),
+            },
+            group: 'responsive',
+        },
+        // setting
+        {
+            key: 'Setting',
+            icon: 'tabler:settings-2',
+            props: {
+                disabled,
+                sx: Object.assign({}, responsiveSx),
+                onClick: (e) => __awaiter(this, void 0, void 0, function* () {
+                    var _c;
+                    const { taskid: taskId } = ((_c = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _c === void 0 ? void 0 : _c.dataset) || {};
+                    const currentCode = getCurrentCodeByTaskId(message, taskId);
+                    try {
+                        yield transpileAndLoadScript(currentCode).then((m) => {
+                            var _a, _b;
+                            if (typeof (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA) === 'object' && (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA.length)) {
+                                const schemaDefaultValues = Object.fromEntries(m.PROPERTIES_SCHEMA.map((item) => {
+                                    const { key, locales } = item;
+                                    const currentLocale = (locales === null || locales === void 0 ? void 0 : locales[locale]) || (locales === null || locales === void 0 ? void 0 : locales.en);
+                                    return [key, currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.defaultValue];
+                                }));
+                                const defaultValues = Object.assign(Object.assign({}, schemaDefaultValues), (_a = propertiesValueMap[taskId]) === null || _a === void 0 ? void 0 : _a[locale]);
+                                // format default values
+                                m.PROPERTIES_SCHEMA.forEach((item) => {
+                                    const { key, type } = item;
+                                    if (type === 'json' && typeof defaultValues[key] === 'object') {
+                                        try {
+                                            defaultValues[key] = JSON.stringify(defaultValues[key], null, 2);
+                                        }
+                                        catch (error) {
+                                            // ignore error
+                                        }
+                                    }
+                                });
+                                // @ts-ignore
+                                (_b = propertiesSettingRef.current) === null || _b === void 0 ? void 0 : _b.open({
+                                    schema: m.PROPERTIES_SCHEMA,
+                                    onSubmit: (values) => {
+                                        const realValues = {};
+                                        m.PROPERTIES_SCHEMA.forEach((item) => {
+                                            const { key, type } = item;
+                                            if (type === 'json' && typeof values[key] === 'string') {
+                                                try {
+                                                    realValues[key] = JSON.parse(values[key]);
+                                                    return;
+                                                }
+                                                catch (error) {
+                                                    // ignore error
+                                                }
+                                            }
+                                            realValues[key] = values[key];
+                                        });
+                                        setPropertiesValueMap(Object.assign(Object.assign({}, propertiesValueMap), { [taskId]: Object.assign(Object.assign({}, propertiesValueMap[taskId]), { [locale]: realValues }) }));
+                                    },
+                                    defaultValues,
+                                });
+                                return;
+                            }
+                            throw new Error('No properties schema found');
+                        });
+                    }
+                    catch (error) {
+                        // ignore error
+                        // send cannot set properties message
+                        Toast.info(t('v0.cannotSetPropertiesTip'));
+                    }
+                }),
+            },
+            group: 'setting',
+        },
+        {
+            key: 'CodePreview',
+            icon: code ? 'tabler:layout-board' : 'tabler:code',
+            buttonText: code ? 'Canvas' : 'Code',
+            props: {
+                disabled,
+                variant: 'contained',
+                color: 'primary',
+                onClick: (e) => {
+                    var _a;
+                    const { taskid: taskId } = ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) || {};
+                    setCode(getCurrentCodeByTaskId(message, taskId));
+                },
+            },
+            group: 'codePreview',
+        },
+    ];
     return (_jsxs(Stack, { sx: {
-            flex: 1,
-        }, children: [_jsx(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                }, children: _jsx(IconButton, { onClick: () => setShowCode((prev) => !prev), sx: {
-                        color: 'textColor',
-                    }, children: _jsx(Icon, { icon: showCode ? 'tabler:layout-sidebar' : 'tabler:code' }) }) }), _jsx(Stack, { gap: 2, sx: {
+            p: 2,
+            gap: 2,
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            flexDirection: 'column',
+        }, children: [_jsxs(Stack, { sx: {
                     display: 'flex',
-                    flexDirection: 'row',
+                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: _jsx(Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, children: _jsx(CustomComponentRenderer, { componentId: "mock-dev-component", dev: {
-                            components: {
-                                'mock-dev-component': {
-                                    data: {
-                                        id: 'mock-dev-component',
-                                        createdAt: '',
-                                        updatedAt: '',
-                                        renderer: {
-                                            type: 'react-component',
-                                            script: code,
-                                        },
-                                    },
-                                },
-                            },
-                        } }) }) }), _jsx(Drawer, { anchor: "right", open: showCode, onClose: () => setShowCode(false), children: _jsx(Box, { sx: {
-                        p: 2,
-                        maxWidth: '40vw',
-                    }, children: _jsx(MarkdownRenderer, { children: `\`\`\`typescript\n${code}\n\`\`\`` }) }) })] }));
+                    width: '100%',
+                    gap: 1.5,
+                    flexDirection: 'row',
+                }, children: [_jsx(UserQuestion, { question: parameters === null || parameters === void 0 ? void 0 : parameters.question }), _jsx(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1.5,
+                        }, children: Object.entries(groupBy(tooltipOptions, 'group')).map(([group, options]) => {
+                            return (_jsx(ButtonGroup, { variant: "text", color: "inherit", size: "small", sx: {
+                                    borderColor: 'rgba(0, 0, 0, 0.1) !important',
+                                    border: 1,
+                                }, children: options.map((option) => {
+                                    const { icon, key, props, buttonText } = option;
+                                    return (_jsxs(Button, Object.assign({ "data-taskId": taskId }, props, { children: [_jsx(Icon, { icon: icon, fontSize: 22 }), buttonText && _jsx(Box, { sx: { ml: 1 }, children: buttonText })] }), key));
+                                }) }, group));
+                        }) })] }), _jsx(Box, { sx: Object.assign({ display: 'flex', justifyContent: 'center', overflow: 'hidden', backgroundColor: 'white', borderRadius: 1 }, codePreviewExtraSx), children: _jsx(CodeRenderByMessage, { message: message, zoom: 1, sx: {
+                        overflowX: 'auto',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: 'grey transparent',
+                    }, propertiesValueMap: propertiesValueMap }) }), objects === null || objects === void 0 ? void 0 : objects.map((item, index) => _jsx(MessageMetadataRenderer, { object: item.data }, index)), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && (_jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } })), _jsxs(Suspense, { fallback: _jsx(Loading, {}), children: [_jsx(Drawer, { anchor: "right", open: !!code, onClose: () => setCode(''), children: _jsxs(Box, { sx: {
+                                p: 2,
+                                maxWidth: '60vw',
+                            }, children: [_jsx(Typography, { variant: "h6", sx: {
+                                        lineHeight: 2,
+                                        mb: 1,
+                                    }, children: t('v0.codePreview') }), _jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('v0.codePreviewTip') }), _jsx(MarkdownRenderer, { children: `\`\`\`typescript\n${code}\n\`\`\`` })] }) }), _jsx(PropertiesSetting, { ref: propertiesSettingRef })] })] }));
 }