@blocklet/pages-kit 0.2.317 → 0.2.319

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

@@ -37,6 +37,7 @@ exports.translations = {
         rename: 'Rename',
         delete: 'Delete',
         confirmDelete: 'Confirm Delete?',
+        confirm: 'Confirm',
         noData: 'No {data} yet',
         createObject: 'Create {object}',
         title: 'Title',
@@ -95,6 +96,18 @@ exports.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: '作者',
@@ -131,6 +144,7 @@ exports.translations = {
         rename: '重命名',
         delete: '删除',
         confirmDelete: '确定删除？',
+        confirm: '确定',
         noData: '暂无{data}',
         createObject: '创建{object}',
         title: '标题',
@@ -189,5 +203,17 @@ exports.translations = {
         send: '发送',
         session: '会话',
         loadMore: '加载更多',
+        v0: {
+            title: 'AIGNE v0',
+            description: 'AIGNE v0 是一个基于人工智能的代码工具，可以帮助您快速生成代码。',
+            noData: '暂无生成记录，点击下方按钮开始生成吧！',
+            deleteSessionTitle: '删除生成记录',
+            deleteSessionTip: '确定要删除此生成记录吗？',
+            propertiesSetting: '属性设置',
+            propertiesSettingTip: '此功能用于调试组件，不影响最终代码',
+            cannotSetPropertiesTip: '解析 PROPERTIES_SCHEMA 失败，此代码无法进行属性设置',
+            codePreview: '代码预览',
+            codePreviewTip: '以下是代码预览，您可以查看生成的代码，目前还不支持编辑。',
+        },
     },
 };

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

@@ -7,13 +7,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const locale_1 = require("../../../../locale");
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
-function MessageErrorView({ error }) {
+function MessageErrorView({ error, sx }) {
     const { t } = (0, locale_1.useLocaleContext)();
     if (!error)
         return null;
     if (error.status === 401) {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "ai-chat-message-error", children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: t('requireLogin') }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Alert, { className: "ai-chat-message-error", severity: "error", sx: { mr: 5 }, children: error.message }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Alert, { className: "ai-chat-message-error", severity: "error", sx: Object.assign({ mr: 5 }, sx), children: error.message }));
 }
 exports.default = MessageErrorView;

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

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

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

@@ -62,14 +62,18 @@ function SimpleChatView() {
         if (running)
             scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, running]);
+    const messages = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const sessionLoading = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.loading);
+    const loading = (0, session_1.useSessionState)((s) => s === null || s === void 0 ? void 0 : s.loading) || sessionLoading;
     (0, use_header_menu_1.useHeaderMenu)();
-    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 2 }), (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 }) }), (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: {
-                        position: 'sticky',
-                        bottom: 0,
-                        p: 2,
-                        zIndex: 10,
-                        borderRadius: 1,
-                        bgcolor: (theme) => (0, material_1.alpha)(theme.palette.background.paper, 0.7),
-                        backdropFilter: 'blur(10px)',
-                    } }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { px: 0, children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 4 }), 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: {
+                                position: 'sticky',
+                                bottom: 0,
+                                py: 2,
+                                px: { xs: 2, sm: 3 },
+                                zIndex: 10,
+                                borderRadius: 1,
+                                bgcolor: (theme) => (0, material_1.alpha)(theme.palette.background.paper, 0.7),
+                                backdropFilter: 'blur(10px)',
+                            } }) })] }))] }));
 }

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

@@ -14,24 +14,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("@emotion/css");
+const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
 const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const omit_1 = __importDefault(require("lodash/omit"));
-const react_1 = require("react");
+const react_2 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const locale_1 = require("../../../../locale");
 const AgentInputField_1 = __importDefault(require("../../components/AgentInputField"));
 const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
 const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+const use_appearances_1 = require("../../hooks/use-appearances");
 const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 const agent_inputs_1 = require("../../utils/agent-inputs");
-function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+const V0Runtime_1 = require("./contexts/V0Runtime");
+function V0Input({ submitText, inlineLabel, autoFillLastForm = false, submitInQuestionField = true, chatMode = true, }) {
+    var _a, _b;
     const { t } = (0, locale_1.useLocaleContext)();
     const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const opening = (0, use_appearances_1.useOpeningQuestions)();
     const { execute } = (0, runtime_1.useRuntimeState)();
-    const running = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
-    const parameters = (0, react_1.useMemo)(() => {
+    const { running } = (0, session_1.useCurrentSessionState)((s) => s) || {};
+    const { createSession, currentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
+    const { setCurrentMessageTaskId } = (0, V0Runtime_1.useV0RuntimeContext)();
+    const parameters = (0, react_2.useMemo)(() => {
         var _a;
         return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.isValidInput).map((i) => {
             var _a;
@@ -41,60 +48,83 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
     const defaultForm = useInitialFormValues();
     const theme = useFormTheme();
     const form = (0, react_hook_form_1.useForm)({ defaultValues: defaultForm });
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
             form.reset(chatMode ? (0, omit_1.default)(defaultForm, 'question') : defaultForm);
         }
     }, [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 ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Form, { 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) => {
-                    const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
-                    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.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 ((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
-                                                ? {
-                                                    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 }) })),
-                                                }
-                                                : undefined })] }));
-                            } }) }, parameter.id));
-                }), !(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') }))] }) }));
+    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: {
+                    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 ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", endIcon: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:arrow-down-right", style: {
+                                marginLeft: -4,
+                            } }), onClick: () => {
+                            form.reset(Object.assign({}, parameters));
+                            onSubmit(Object.assign({}, parameters));
+                        }, children: question }, id));
+                }) })), (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) => {
+                        const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
+                        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.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 ((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
+                                                    ? {
+                                                        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 || t('generate') }) })),
+                                                    }
+                                                    : undefined })] }));
+                                } }) }, parameter.id));
+                    }), !(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') }))] })] }));
 }
-exports.default = AutoForm;
+exports.default = V0Input;
+const autoSetLastParameters = false;
 function useInitialFormValues() {
     const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
     const lastMessage = (0, session_1.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] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        if (!lastInputs) {
+    const [lastInputs, setLastInputs] = (0, react_2.useState)();
+    (0, react_2.useEffect)(() => {
+        if (autoSetLastParameters && !lastInputs) {
             const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
             if (!(0, isEmpty_1.default)(lastParameters))
                 setLastInputs(lastParameters);
         }
     }, [lastMessage]);
-    return (0, react_1.useMemo)(() => {
+    return (0, react_2.useMemo)(() => {
         var _a, _b;
         if (lastInputs) {
             return lastInputs;
@@ -104,7 +134,7 @@ function useInitialFormValues() {
 }
 function useFormTheme() {
     const theme = (0, material_1.useTheme)();
-    return (0, react_1.useMemo)(() => {
+    return (0, react_2.useMemo)(() => {
         const themeOptions = {
             shape: {
                 borderRadius: 8,

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

@@ -1,79 +1,212 @@
 "use strict";
+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());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const Toast_1 = __importDefault(require("@arcblock/ux/lib/Toast"));
 const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
+const groupBy_1 = __importDefault(require("lodash/groupBy"));
 const react_2 = require("react");
-const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const CustomComponentRenderer_1 = require("../../../../../components/CustomComponentRenderer");
+const locale_1 = require("../../../../locale");
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
-const MessageErrorView_1 = __importDefault(require("../ChatOutput/MessageErrorView"));
 const MessageMetadataRenderer_1 = __importDefault(require("../ChatOutput/MessageMetadataRenderer"));
-const codeField = 'code';
+const CodePreview_1 = require("./components/CodePreview");
+const Loading_1 = __importDefault(require("./components/Loading"));
+const PropertiesSetting_1 = __importDefault(require("./components/PropertiesSetting"));
+const UserQuestion_1 = __importDefault(require("./components/UserQuestion"));
+const V0Runtime_1 = require("./contexts/V0Runtime");
+const DEFAULT_DESKTOP_SX = {
+    width: '100%',
+    height: '100%',
+};
 function V0Output() {
     var _a, _b;
     const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const propertiesSettingRef = (0, react_2.useRef)(null);
+    const { propertiesValueMap, setPropertiesValueMap } = (0, V0Runtime_1.useV0RuntimeContext)();
+    const [code, setCode] = (0, react_2.useState)('');
+    const { t, locale } = (0, locale_1.useLocaleContext)();
+    const [codePreviewExtraSx, setCodePreviewExtraSx] = (0, react_2.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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, sx: {
-            py: 2,
-        }, children: [error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: error }), isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Stack, { sx: {
-                    flex: 1,
-                }, children: (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, sx: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, children: (0, jsx_runtime_1.jsx)(CodePreview, { code: code }) }));
-            }), objects === null || objects === void 0 ? void 0 : objects.map((item) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data })), !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 } }))] }));
-}
-exports.default = V0Output;
-function CodePreview({ code }) {
-    const [showCode, setShowCode] = (0, react_2.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 = (0, CodePreview_1.getCurrentCodeByTaskId)(message, taskId);
+                    try {
+                        yield (0, CustomComponentRenderer_1.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_1.default.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((0, CodePreview_1.getCurrentCodeByTaskId)(message, taskId));
+                },
+            },
+            group: 'codePreview',
+        },
+    ];
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
-            flex: 1,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            p: 2,
+            gap: 2,
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            flexDirection: 'column',
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
                     display: 'flex',
-                    justifyContent: 'flex-end',
-                }, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => setShowCode((prev) => !prev), sx: {
-                        color: 'textColor',
-                    }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: showCode ? 'tabler:layout-sidebar' : 'tabler:code' }) }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, sx: {
-                    display: 'flex',
-                    flexDirection: 'row',
+                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: "mock-dev-component", dev: {
-                            components: {
-                                'mock-dev-component': {
-                                    data: {
-                                        id: 'mock-dev-component',
-                                        createdAt: '',
-                                        updatedAt: '',
-                                        renderer: {
-                                            type: 'react-component',
-                                            script: code,
-                                        },
-                                    },
-                                },
-                            },
-                        } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", open: showCode, onClose: () => setShowCode(false), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        p: 2,
-                        maxWidth: '40vw',
-                    }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: `\`\`\`typescript\n${code}\n\`\`\`` }) }) })] }));
+                    width: '100%',
+                    gap: 1.5,
+                    flexDirection: 'row',
+                }, 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: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1.5,
+                        }, children: Object.entries((0, groupBy_1.default)(tooltipOptions, 'group')).map(([group, options]) => {
+                            return ((0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ "data-taskId": taskId }, props, { children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { icon: icon, fontSize: 22 }), buttonText && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { ml: 1 }, children: buttonText })] }), key));
+                                }) }, group));
+                        }) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ display: 'flex', justifyContent: 'center', overflow: 'hidden', backgroundColor: 'white', borderRadius: 1 }, codePreviewExtraSx), children: (0, jsx_runtime_1.jsx)(CodePreview_1.CodeRenderByMessageMemo, { 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) => (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: {
+                                p: 2,
+                                maxWidth: '60vw',
+                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
+                                        lineHeight: 2,
+                                        mb: 1,
+                                    }, 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 })] })] }));
 }
+exports.default = V0Output;