plugin-build-ui-template 1.0.3 → 1.0.6

package/dist/client-v2/380.b4d1d20b1e27ac78.js

@@ -1,10 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
-"use strict";(self.webpackChunkplugin_build_ui_template_client_v2=self.webpackChunkplugin_build_ui_template_client_v2||[]).push([["380"],{23:function(e,t,r){r.d(t,{BuildUITemplateManager:function(){return y}});var n=r(155),a=r.n(n),l=r(342),i=r(59),o=r(375);function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function c(e,t,r,n,a,l,i){try{var o=e[l](i),s=o.value}catch(e){r(e);return}o.done?t(s):Promise.resolve(s).then(n,a)}function u(e){return function(){var t=this,r=arguments;return new Promise(function(n,a){var l=e.apply(t,r);function i(e){c(l,n,a,i,o,"next",e)}function o(e){c(l,n,a,i,o,"throw",e)}i(void 0)})}}function m(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r,n,a=null==e?null:"u">typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l=[],i=!0,o=!1;try{for(a=a.call(e);!(i=(r=a.next()).done)&&(l.push(r.value),!t||l.length!==t);i=!0);}catch(e){o=!0,n=e}finally{try{i||null==a.return||a.return()}finally{if(o)throw n}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return s(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return s(e,t)}}(e,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){var r,n,a,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype),o=Object.defineProperty;return o(i,"next",{value:s(0)}),o(i,"throw",{value:s(1)}),o(i,"return",{value:s(2)}),"function"==typeof Symbol&&o(i,Symbol.iterator,{value:function(){return this}}),i;function s(o){return function(s){var c=[o,s];if(r)throw TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(l=0)),l;)try{if(r=1,n&&(a=2&c[0]?n.return:c[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,c[1])).done)return a;switch(n=0,a&&(c=[2&c[0],a.value]),c[0]){case 0:case 1:a=c;break;case 4:return l.label++,{value:c[1],done:!1};case 5:l.label++,n=c[1],c=[0];continue;case 7:c=l.ops.pop(),l.trys.pop();continue;default:if(!(a=(a=l.trys).length>0&&a[a.length-1])&&(6===c[0]||2===c[0])){l=0;continue}if(3===c[0]&&(!a||c[1]>a[0]&&c[1]<a[3])){l.label=c[1];break}if(6===c[0]&&l.label<a[1]){l.label=a[1],a=c;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(c);break}a[2]&&l.ops.pop(),l.trys.pop();continue}c=t.call(e,l)}catch(e){c=[6,e],n=0}finally{r=a=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}var p=i.Typography.Title,f=i.Typography.Paragraph,g=i.Typography.Text,y=function(){var e=(0,l.useAPIClient)(),t=m((0,n.useState)([]),2),r=t[0],s=t[1],c=m((0,n.useState)([]),2),y=c[0],h=c[1],v=m((0,n.useState)([]),2),b=v[0],E=v[1],S=m((0,n.useState)([]),2),x=S[0],k=S[1],T=m((0,n.useState)(!1),2),w=T[0],I=T[1],C=m((0,n.useState)(!1),2),B=C[0],F=C[1],P=m((0,n.useState)(null),2),L=P[0],O=P[1],A=m(i.Form.useForm(),1)[0],U=i.Form.useWatch("llmService",A),M=function(){return u(function(){var t,r;return d(this,function(n){switch(n.label){case 0:I(!0),n.label=1;case 1:return n.trys.push([1,3,4,5]),[4,e.resource("aiBuildUiTemplateSpaces").list({sort:["-createdAt"]})];case 2:return s((null==(r=n.sent())||null==(t=r.data)?void 0:t.data)||[]),[3,5];case 3:return console.error("Failed to load spaces:",n.sent()),i.message.error("Failed to load UI generation spaces"),[3,5];case 4:return I(!1),[7];case 5:return[2]}})})()};(0,n.useEffect)(function(){U?e.resource("ai").listModels({llmService:U}).then(function(e){var t;k((null==e||null==(t=e.data)?void 0:t.data)||[])}).catch(function(e){console.error("Failed to load models:",e)}):k([])},[U,e]),(0,n.useEffect)(function(){M(),u(function(){var t,r;return d(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),[4,e.resource("collections").list()];case 1:return h((null==(r=n.sent())||null==(t=r.data)?void 0:t.data)||[]),[3,3];case 2:return console.error("Failed to load collections:",n.sent()),[3,3];case 3:return[2]}})})(),u(function(){var t,r;return d(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),[4,e.resource("ai").listLLMServices()];case 1:return E((null==(r=n.sent())||null==(t=r.data)?void 0:t.data)||[]),[3,3];case 2:return console.error("Failed to load LLM services:",n.sent()),[3,3];case 3:return[2]}})})();var t=setInterval(function(){r.some(function(e){return"building"===e.status})&&e.resource("aiBuildUiTemplateSpaces").list({sort:["-createdAt"]}).then(function(e){var t;return s((null==e||null==(t=e.data)?void 0:t.data)||[])}).catch(function(){})},3e3);return function(){return clearInterval(t)}},[r]);var q=function(e){e?(O(e),A.setFieldsValue({title:e.title,llmService:e.llmService,model:e.model,systemPrompt:e.systemPrompt,promptRequirements:e.promptRequirements,type:e.type,targetCollection:e.targetCollection})):(O(null),A.resetFields(),A.setFieldsValue({type:"block"})),F(!0)},R=function(e){switch(e){case"queued":return 10;case"preparing":return 25;case"generating":return 60;case"saving":return 90;case"completed":return 100;default:return 0}};return a().createElement("div",{style:{padding:"24px",maxWidth:"1200px",margin:"0 auto"}},a().createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"24px"}},a().createElement("div",null,a().createElement(p,{level:2},"AI UI Template Builder"),a().createElement(f,{type:"secondary"},"Generate stunning custom UI Blocks and Popups in seconds using state-of-the-art LLMs, then reuse them in NocoBase v2 dynamic forms, dashboards and listings.")),a().createElement(i.Button,{type:"primary",icon:a().createElement(o.PlusOutlined,null),onClick:function(){return q()}},"New Generation Space")),a().createElement(i.List,{loading:w&&0===r.length,dataSource:r,renderItem:function(t){var r,n;return a().createElement(i.Card,{key:t.id,style:{marginBottom:"20px",borderRadius:"12px",boxShadow:"0 4px 12px rgba(0,0,0,0.05)"},actions:[a().createElement(i.Button,{key:"generate",type:"link",icon:a().createElement(o.PlayCircleOutlined,null),onClick:function(){var r;return r=t.id,u(function(){var t;return d(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),i.message.loading("Triggering AI generation...",1),[4,e.resource("aiBuildUiTemplateSpaces").build({filterByTk:r})];case 1:return n.sent(),i.message.success("UI Template generation task started successfully!"),M(),[3,3];case 2:return t=n.sent(),i.message.error((null==t?void 0:t.message)||"Failed to trigger build"),[3,3];case 3:return[2]}})})()},disabled:"building"===t.status},"Generate"),a().createElement(i.Button,{key:"edit",type:"link",onClick:function(){return q(t)}},"Edit Settings"),a().createElement(i.Button,{key:"delete",type:"link",danger:!0,icon:a().createElement(o.DeleteOutlined,null),onClick:function(){var r;return r=t.id,u(function(){return d(this,function(t){return i.Modal.confirm({title:"Are you sure to delete this generation space?",icon:a().createElement(o.ExclamationCircleOutlined,null),okType:"danger",onOk:function(){return u(function(){return d(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,e.resource("aiBuildUiTemplateSpaces").destroy({filterByTk:r})];case 1:return t.sent(),i.message.success("Space deleted"),M(),[3,3];case 2:return t.sent(),i.message.error("Failed to delete space"),[3,3];case 3:return[2]}})})()}}),[2]})})()}},"Delete")]},a().createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"start",marginBottom:"16px"}},a().createElement("div",null,a().createElement(i.Space,{align:"baseline"},a().createElement(p,{level:4,style:{margin:0}},t.title),(r=t.status,n=t.buildPhase,"completed"===r?a().createElement(i.Tag,{color:"success",icon:a().createElement(o.CheckCircleOutlined,null)},"Completed"):"error"===r?a().createElement(i.Tag,{color:"error",icon:a().createElement(o.ExclamationCircleOutlined,null)},"Failed"):"building"===r?a().createElement(i.Tag,{color:"processing",icon:a().createElement(o.SyncOutlined,{spin:!0})},"Generating (",n||"queued",")"):a().createElement(i.Tag,{color:"default"},"Draft"))),a().createElement("div",{style:{marginTop:"8px"}},a().createElement(i.Tag,{color:"blue"},"popup"===t.type?"Popup Template":"Block Template"),t.targetCollection&&a().createElement(i.Tag,{color:"purple"},"Collection: ",t.targetCollection),a().createElement(i.Tag,{color:"cyan"},"LLM: ",t.llmService," (",t.model,")"))),t.templateUid&&a().createElement(i.Button,{type:"primary",ghost:!0,icon:a().createElement(o.ArrowRightOutlined,null),href:"/admin/settings/ui-templates.block"},"View Template Library")),a().createElement(f,{style:{background:"#f5f5f5",padding:"12px",borderRadius:"8px",borderLeft:"4px solid #1890ff"}},a().createElement(g,{strong:!0},"User Requirements: "),t.promptRequirements||"No specific requirements typed."),"building"===t.status&&a().createElement("div",{style:{marginTop:"16px",background:"#fafafa",padding:"16px",borderRadius:"8px"}},a().createElement(g,{type:"secondary"},"Build progress: "),a().createElement(i.Progress,{percent:R(t.buildPhase),status:"active",strokeColor:"#1890ff"}),a().createElement("div",{style:{marginTop:"8px",fontFamily:"monospace",color:"#666"}},a().createElement(i.Spin,{size:"small",style:{marginRight:"8px"}}),t.buildLog||"AI is initiating task...")),"completed"===t.status&&t.buildLog&&a().createElement(i.Alert,{message:"Build Complete",description:t.buildLog,type:"success",showIcon:!0,style:{marginTop:"12px"}}),"error"===t.status&&t.buildLog&&a().createElement(i.Alert,{message:"Generation Failed",description:t.buildLog,type:"error",showIcon:!0,style:{marginTop:"12px"}}))}}),a().createElement(i.Modal,{title:L?"Edit Generation Settings":"New UI Generation Space",open:B,onOk:function(){return u(function(){var t,r;return d(this,function(n){switch(n.label){case 0:return n.trys.push([0,6,,7]),[4,A.validateFields()];case 1:if(t=n.sent(),!L)return[3,3];return[4,e.resource("aiBuildUiTemplateSpaces").update({filterByTk:L.id,values:t})];case 2:return n.sent(),i.message.success("Space updated successfully"),[3,5];case 3:return[4,e.resource("aiBuildUiTemplateSpaces").create({values:t})];case 4:n.sent(),i.message.success("Space created successfully"),n.label=5;case 5:return F(!1),M(),[3,7];case 6:return(null==(r=n.sent())?void 0:r.name)!=="ValidateError"&&i.message.error((null==r?void 0:r.message)||"Failed to save space settings"),[3,7];case 7:return[2]}})})()},onCancel:function(){return F(!1)},width:720,destroyOnClose:!0},a().createElement(i.Form,{form:A,layout:"vertical",style:{marginTop:"16px"}},a().createElement(i.Form.Item,{name:"title",label:a().createElement(g,{strong:!0},"Space Name"),rules:[{required:!0,message:"Please enter a space name"}]},a().createElement(i.Input,{placeholder:"e.g. Sales KPI Dashboard, Customer Contact Form"})),a().createElement(i.Space,{size:"large",style:{display:"flex",width:"100%"}},a().createElement(i.Form.Item,{name:"llmService",label:a().createElement(g,{strong:!0},"AI Service"),rules:[{required:!0,message:"Please select an LLM Service"}],style:{flex:1,minWidth:"300px"}},a().createElement(i.Select,{placeholder:"Select Service",onChange:function(){return A.setFieldValue("model",void 0)}},b.map(function(e){return a().createElement(i.Select.Option,{key:e.name,value:e.name},e.title||e.name)}))),a().createElement(i.Form.Item,{name:"model",label:a().createElement(g,{strong:!0},"Model"),rules:[{required:!0,message:"Please select an LLM Model"}],style:{flex:1,minWidth:"300px"}},a().createElement(i.Select,{placeholder:"Select Model",disabled:!U},x.map(function(e){return a().createElement(i.Select.Option,{key:e.id||e.name,value:e.id||e.name},e.id||e.name)})))),a().createElement(i.Space,{size:"large",style:{display:"flex",width:"100%"}},a().createElement(i.Form.Item,{name:"type",label:a().createElement(g,{strong:!0},"Template Type"),rules:[{required:!0}],style:{flex:1}},a().createElement(i.Radio.Group,null,a().createElement(i.Radio.Button,{value:"block"},"Block (V2)"),a().createElement(i.Radio.Button,{value:"popup"},"Popup (V2)"))),a().createElement(i.Form.Item,{name:"targetCollection",label:a().createElement(g,{strong:!0},"Bind Database Collection"),style:{flex:1,minWidth:"300px"}},a().createElement(i.Select,{placeholder:"Select target collection (optional)",allowClear:!0,showSearch:!0},y.map(function(e){return a().createElement(i.Select.Option,{key:e.name,value:e.name},e.title||e.name)})))),a().createElement(i.Form.Item,{name:"promptRequirements",label:a().createElement(g,{strong:!0},"UI Requirements & Features Description"),rules:[{required:!0,message:"Please describe the layout you need AI to generate"}]},a().createElement(i.Input.TextArea,{rows:4,placeholder:"e.g. Build a comprehensive customer feedback form featuring inputs for name, email, rating slider, multi-line comment text area, and an agreement checkbox. Place them in a nice 2-column grid."})),a().createElement(i.Form.Item,{name:"systemPrompt",label:a().createElement(g,{strong:!0},"Advanced System Prompt Override (Optional)")},a().createElement(i.Input.TextArea,{rows:3,placeholder:"Override the default system prompt to customize how the LLM structures the component trees."})))))}}}]);