llm-ui-objects
Version:
Interactive object components for LLM-powered writing interfaces
1 lines • 66.2 kB
JavaScript
import n from"react";import e from"styled-components";import t,{Quill as r}from"react-quill";var i=function(n,e){return i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,e){n.__proto__=e}||function(n,e){for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t])},i(n,e)};var o=function(){return o=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},o.apply(this,arguments)};function l(n,e,t){if(t||2===arguments.length)for(var r,i=0,o=e.length;i<o;i++)!r&&i in e||(r||(r=Array.prototype.slice.call(e,0,i)),r[i]=e[i]);return n.concat(r||Array.prototype.slice.call(e))}function a(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var c,u,d,s,f,p,x,m,g,h,b,v=n.createContext({cells:[],addCell:function(n,e){return""},removeCell:function(n){},updateCell:function(n,e){},toggleCell:function(n,e){},linkCells:function(n,e){},unlinkCell:function(n){},generators:[],addGenerator:function(n){return""},removeGenerator:function(n){},updateGenerator:function(n,e){},toggleGenerator:function(n,e){},onGenerate:function(n){},generations:[],updateGenerationsData:function(n,e){},linkCellToGenerator:function(n,e){},unlinkCellFromGenerator:function(n){},linkGeneratorToLens:function(n,e){},unlinkGeneratorFromLens:function(n){},lenses:[],addLens:function(n){return""},removeLens:function(n){},changeLensType:function(n,e){},linkLenses:function(n,e){},unlinkLens:function(n){},resetLens:function(n){},hoveredId:null,setHoveredId:function(n){}}),y=function(n){return n+"-"+Math.random().toString(36).substring(7)+"-"+Date.now().toString(36).substring(7)},w=function(e){var t=e.children,r=e.cells,i=e.generators,a=e.lenses,c=e.generateHandler,u=e.minimizeHandler,d=n.useState(r||[]),s=d[0],f=d[1],p=function(n,e){var t=o({id:y("cell"),text:n,isActive:!1,isMinimized:!1,isSelected:!1,parentCellId:null,minimizedText:u?u(n):void 0},e);return f((function(n){return l(l([],n,!0),[t],!1)})),t.id},x=function(n){f((function(e){return e.filter((function(e){return e.id!==n})).map((function(e){return e.parentCellId===n?o(o({},e),{parentCellId:null}):e}))}))},m=function(n,e,t){f((function(r){return r.map((function(r){var i;return r.id===n?o(o({},r),((i={})[e]=t,i)):r}))}))},g=function(n,e){var t=s.find((function(e){return e.id===n}));if(!t)return"";if("isMinimize"===e)if(t.isMinimized)f((function(e){return e.map((function(e){return e.id===n?o(o({},e),{isMinimized:!1}):e}))}));else{if(void 0!==t.minimizedText)return t.minimizedText;var r=t.text,i="";i=u?u(r):r.split(" ").reduce((function(n,e){return e.length>n.length?e:n}),""),f((function(e){return e.map((function(e){return e.id===n?o(o({},e),{isMinimized:!0,minimizedText:i}):e}))}))}else if("isSelected"===e)if(t.isSelected)m(n,"isSelected",!t.isSelected);else{var l=s.find((function(n){return n.isSelected}));f((function(e){return e.map((function(e){return l&&e.id===l.id?o(o({},e),{isSelected:!1}):e.id===n?o(o({},e),{isSelected:!0}):e}))}))}else"isActive"===e?m(n,"isActive",!t.isActive):"isHovered"===e&&m(n,"isHovered",!t.isHovered)},h=n.useState(i||[]),b=h[0],w=h[1],k=n.useState([]),E=k[0],z=k[1],C=function(n){return n.id=y("generator"),w((function(e){return l(l([],e,!0),[n],!1)})),n.id},S=function(n){w((function(e){return e.filter((function(e){return e.id!==n}))}))},I=function(n,e,t){w((function(r){return r.map((function(r){var i;return r.id===n?o(o({},r),((i={})[e]=t,i)):r}))}))},j=function(n,e){var t=b.find((function(e){return e.id===n}));t&&("isSelected"===e?I(n,"isSelected",!t.isSelected):"isGenerating"===e&&I(n,"isGenerating",!t.isGenerating))},M=n.useState(a||[]),G=M[0],A=M[1],L=n.useState(null),H=L[0],T=L[1];return n.useEffect((function(){var n=function(n){var e=s.find((function(n){return n.isSelected})),t=b.find((function(n){return n.isSelected}));e?g(e.id,"isSelected"):t&&j(t.id,"isSelected")};document.addEventListener("mousedown",n);var e=function(n){if(n.metaKey||n.ctrlKey){var e=s.find((function(n){return n.isSelected})),t=b.find((function(n){return n.isSelected})),r=(null==e?void 0:e.id)||(null==t?void 0:t.id);if(r)if("c"===n.key){if(null==s?void 0:s.find((function(n){return n.id===r}))){var i=s.find((function(n){return n.id===r}));if(i)(o=JSON.parse(JSON.stringify(i))).id=y("cell"),o.isSelected=!1,p(o.text,o)}else if(null==b?void 0:b.find((function(n){return n.id===r}))){var o,l=b.find((function(n){return n.id===r}));if(l)(o=JSON.parse(JSON.stringify(l))).id=y("generator"),o.isSelected=!1,C(o)}}else"Backspace"===n.key&&((null==s?void 0:s.find((function(n){return n.id===r})))?x(r):(null==b?void 0:b.find((function(n){return n.id===r})))&&S(r))}};return document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",n),document.removeEventListener("keydown",e)}}),[s,b]),n.createElement(v.Provider,{value:{cells:s,addCell:p,removeCell:x,updateCell:function(n,e){m(n,"text",e),u&&m(n,"minimizedText",u(e))},toggleCell:g,linkCells:function(n,e){f((function(t){return t.map((function(t){return t.id===n?o(o({},t),{parentCellId:e}):t}))}))},unlinkCell:function(n){f((function(e){return e.map((function(e){return e.id===n?o(o({},e),{parentCellId:null}):e}))}))},generators:b,addGenerator:C,removeGenerator:S,updateGenerator:function(n,e){I(n,"parameters",e)},toggleGenerator:j,onGenerate:function(n,e){var t=b.find((function(e){return e.id===n}));if(t&&!t.isGenerating){var r=t.parameters,i=function(n,e){for(var t=[],r=n;r;){var i=s.find((function(n){return n.id===r}));i?(t.push(i.text),r=i.parentCellId):r=null}return t.reverse().join(e)}(t.cellId,e||" ");I(n,"isGenerating",!0);var a=r.reduce((function(n,e){var t;return o(o({},n),((t={})[e.id]=e.value,t))}),{});c(i,a).then((function(e){I(n,"isGenerating",!1);var o="string"==typeof e?[e]:e,a=t.lensId,c=o.map((function(e){return{id:y("generation"),generatorId:n,lensId:a,inputText:i,content:e,parameters:r,metadata:null}}));z((function(n){return l(l([],n,!0),c,!0)}))})).catch((function(e){I(n,"isGenerating",!1)}))}},linkCellToGenerator:function(n,e){w((function(t){return t.map((function(t){return t.id===e?o(o({},t),{cellId:n}):t}))}))},unlinkCellFromGenerator:function(n){w((function(e){return e.map((function(e){return e.id===n?o(o({},e),{cellId:null}):e}))}))},linkGeneratorToLens:function(n,e){w((function(t){return t.map((function(t){return t.id===n?o(o({},t),{lensId:e}):t}))}))},unlinkGeneratorFromLens:function(n){w((function(e){return e.map((function(e){return e.id===n?o(o({},e),{lensId:null}):e}))}))},generations:E,updateGenerationsData:function(n,e){z((function(t){return t.map((function(t){var r=n.findIndex((function(n){return n===t.id}));return-1!=r?t.metadata?o(o({},t),{metadata:o(o({},t.metadata),e[r])}):o(o({},t),{metadata:e[r]}):t}))}))},lenses:G,addLens:function(n){n.id=y("lens");var e=G.map((function(n){return n.group})),t=Math.max.apply(Math,e);return n.group=t+1,A((function(e){return l(l([],e,!0),[n],!1)})),n.id},removeLens:function(n){A((function(e){return e.filter((function(e){return e.id!==n}))})),w((function(e){return e.map((function(e){return e.lensId===n?o(o({},e),{lensId:null}):e}))}))},changeLensType:function(n,e){A((function(t){return t.map((function(t){return t.id===n?o(o({},t),{type:e}):t}))}))},linkLenses:function(n,e){var t=G.find((function(e){return e.id===n})),r=G.find((function(n){return n.id===e}));if(t&&r){var i=Math.min(t.group,r.group);A((function(n){return n.map((function(n){return n.group===t.group||n.group===r.group?o(o({},n),{group:i}):n}))}))}},unlinkLens:function(n){if(G.find((function(e){return e.id===n}))){var e=G.map((function(n){return n.group})),t=Math.max.apply(Math,e)+1;A((function(e){return e.map((function(e){return e.id===n?o(o({},e),{group:t}):e}))}))}},resetLens:function(n){G.find((function(e){return e.id===n}))&&z((function(e){return e.map((function(e){return e.lensId===n?o(o({},e),{lensId:null}):e}))}))},hoveredId:H,setHoveredId:T}},t)},k=e.div(c||(c=a(["\n display: flex;\n border: solid 2px ",";\n border-","-width: 12px;\n border-radius: 8px;\n flex: 1;\n cursor: pointer;\n"],["\n display: flex;\n border: solid 2px ",";\n border-","-width: 12px;\n border-radius: 8px;\n flex: 1;\n cursor: pointer;\n"])),(function(n){var e=n.active;return n.selected?"rgb(0, 194, 255)":e?"#0066ff":"#ddd"}),(function(n){var e=n.tabDirection;return e||"top"})),E=e.div(u||(u=a(["\n display: flex;\n border: solid 2px ",";\n background-color: ",";\n color: ",";\n border-radius: 8px;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"],["\n display: flex;\n border: solid 2px ",";\n background-color: ",";\n color: ",";\n border-radius: 8px;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"])),(function(n){var e=n.active,t=n.selected,r=n.hovered;return t?"rgb(0, 194, 255)":e?"#0066ff":r?"#0066ff66":"#aaa"}),(function(n){var e=n.active,t=n.selected,r=n.hovered;return t?"rgb(0, 194, 255)":e?"#0066ff":r?"#0066ff22":"#fff"}),(function(n){return n.active?"#fff":"#999"})),z=e.textarea(d||(d=a(["\n font-family: inherit;\n font-size: 14px;\n color: #555;\n resize: none;\n padding: 4px 8px;\n margin: 0;\n border: none;\n border-radius: 8px;\n flex: 1;\n\n &:focus {\n outline: none;\n }\n"],["\n font-family: inherit;\n font-size: 14px;\n color: #555;\n resize: none;\n padding: 4px 8px;\n margin: 0;\n border: none;\n border-radius: 8px;\n flex: 1;\n\n &:focus {\n outline: none;\n }\n"]))),C=function(e){var t=e.id,r=e.text,i=e.isActive,o=e.isMinimized,l=e.isSelected,a=e.isHovered,c=e.tabDirection,u=e.minimizedText,d=e.onClick,s=e.onMouseEnter,f=e.onMouseLeave,p=e.style,x=n.useContext(v),m=x.updateCell,g=x.toggleCell,h=n.useState(r),b=h[0],y=h[1];n.useEffect((function(){var n=document.getElementById(t+"-textarea");n&&(n.style.height="auto",n.style.height=n.scrollHeight-8+"px")}),[b]);var w=function(n){n.stopPropagation(),1===n.detail?(l&&g(t,"isSelected"),d?d(n):g(t,"isActive")):2===n.detail&&g(t,"isSelected")},C=function(n){s&&s(n),g(t,"isHovered")},S=function(n){f&&f(n),g(t,"isHovered")};return o?n.createElement(E,{id:t,className:"llmuiobj-cell-min","data-testid":t,active:i?1:0,selected:l?1:0,hovered:a?1:0,onClick:w,onMouseEnter:C,onMouseLeave:S,style:p},u):n.createElement(k,{id:t,className:"llmuiobj-cell","data-testid":t,active:i?1:0,selected:l?1:0,hovered:a?1:0,tabDirection:c,onClick:w,onMouseEnter:C,onMouseLeave:S,style:p},n.createElement(z,{id:t+"-textarea",value:b,onChange:function(n){m(t,n.target.value),y(n.target.value)}}))},S=e.div(s||(s=a(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n height: 100%;\n"],["\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n height: 100%;\n"]))),I=e.div(f||(f=a(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: 100%;\n"],["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: 100%;\n"]))),j=e.div(p||(p=a(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex-grow: 1;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex-grow: 1;\n"]))),M=e.div(x||(x=a(["\n display: flex;\n"],["\n display: flex;\n"]))),G=e.button(m||(m=a(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 32px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 24px;\n font-weight: bold;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"],["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 32px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 24px;\n font-weight: bold;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"]))),A=e.button(g||(g=a(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 160px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 16px;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"],["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 160px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 16px;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"]))),L=function(e){var t=e.initialBoard,r=e.maxRows,i=e.maxColumns,a=e.setEntryCell,c=e.style,u=n.useState([]),d=u[0],s=u[1],f=n.useState([]),p=f[0],x=f[1],m=n.useContext(v),g=m.cells,h=m.addCell,b=m.linkCells,y=m.unlinkCell,w=m.toggleCell;n.useEffect((function(){var n=t.map((function(n){return n.map((function(n){return h(n)}))}));0==t.length&&(n=[[h("")]]);s(n),x(new Array(n.length).fill(void 0))}),[]);var k=function(n){var e=h(""),t=l([],d,!0);n===t.length&&t.push([]),t[n].push(e),s(t)};return n.createElement(S,{style:c},d.map((function(e,t){return n.createElement(I,{key:t},n.createElement(j,null,e.map((function(e,r){var i=g.find((function(n){return n.id===e}));return i?n.createElement(C,o({key:e},i,{onClick:function(){return function(n,e){var t=l([],p,!0);if(n.isActive){var r=n.parentCellId,i=p[e+1];r&&i?b(i,r):i&&y(i),y(n.id),t[e]=void 0}else{var o=p[e];o&&(w(o,"isActive"),y(o)),r=p[e-1],i=p[e+1],r&&b(n.id,r),i&&b(i,n.id),t[e]=n.id}var c=t.reduceRight((function(n,e){return n||e||void 0}));a(c),w(n.id,"isActive"),x(t)}(i,t)}})):null}))),n.createElement(M,null,n.createElement(G,{onClick:function(){return k(t)},disabled:e.length>=i},"+")))})),n.createElement(I,null,n.createElement(A,{onClick:function(){return k(d.length)},disabled:d.length>=r},"+ New Row")))},H=e.div(h||(h=a(["\n display: flex;\n flex-direction: column;\n gap: ","px;\n"],["\n display: flex;\n flex-direction: column;\n gap: ","px;\n"])),(function(n){return n.cellHeight})),T=e.div(b||(b=a(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n"]))),O=function(e){var t=e.cellWidth,r=e.cellHeight,i=e.style,l=n.useContext(v),a=l.cells,c=l.toggleCell,u=l.linkCells,d=n.useState({cellId:null,children:[]}),s=d[0],f=d[1],p=n.useState(null),x=p[0],m=p[1],g=function(n,e){var t=n.filter((function(n){return n.parentCellId===e})),r=[];return t.forEach((function(e){r.push({cellId:e.id,children:g(n,e.id)})})),r};n.useEffect((function(){f(function(n){return{cellId:null,children:g(n,null)}}(a))}),[a]);for(var h=function(n){for(var e=[],t=a.find((function(e){return e.id===n}));t;)e.push(t.id),t=a.find((function(n){return n.id===(null==t?void 0:t.parentCellId)}));return e.reverse(),e},b=function(n){var e=h(n);a.forEach((function(n){(e.includes(n.id)&&!n.isHovered||!e.includes(n.id)&&n.isHovered)&&c(n.id,"isHovered")}))},y=[],w=[],k=s.children,E=[],z=0;k.length>0;){for(var S=[],I=function(e){var i=a.find((function(n){return n.id===k[e].cellId}));if(i){S.push(n.createElement(C,o({key:i.id},i,{isMinimized:!0,onClick:function(n){var e,t;n.stopPropagation(),e=i.id,t=h(e),a.forEach((function(n){(t.includes(n.id)&&!n.isActive||!t.includes(n.id)&&n.isActive)&&c(n.id,"isActive")}))},style:{width:t+"px",height:r+"px"},onMouseEnter:function(){return b(i.id)},onMouseLeave:function(){return b("")}}))),E=E.concat(k[e].children.map((function(n){return o(o({},n),{parentPos:e})})));var l=k[e].parentPos;if(void 0!==l){var u={x:l*(8+t)+t/2,y:2*z*r-r-1},d={x:e*(t+8)+t/2,y:2*z*r+1};w.push(n.createElement("path",{key:i.id,d:"M ".concat(u.x," ").concat(u.y," L ").concat(d.x," ").concat(d.y),stroke:i.isActive?"#0088ff":"#cccccc",strokeWidth:"2",fill:"none"}))}}},j=0;j<k.length;j++)I(j);y.push(S),k=E,E=[],z++}return n.createElement("div",{id:"llmuiobj-tree-container",style:o(o({},i),{position:"relative"}),onMouseDown:function(n){var e;if(n.target.className.includes("llmuiobj-cell-min")){var t=null===(e=document.getElementById("llmuiobj-tree-container"))||void 0===e?void 0:e.getBoundingClientRect();if(t){var r=n.target.getAttribute("id"),i=n.clientX-t.left,o=n.clientY-t.top;m({x1:i,y1:o,id:r,x2:i,y2:o})}}},onMouseMove:function(n){var e;if(x){var t=null===(e=document.getElementById("llmuiobj-tree-container"))||void 0===e?void 0:e.getBoundingClientRect();if(t){var r=n.clientX-t.left,i=n.clientY-t.top;m(o(o({},x),{x2:r,y2:i}))}}},onMouseUp:function(n){if(x&&(m(null),n.target.className.includes("llmuiobj-cell-min"))){var e=n.target.getAttribute("id"),t=h(e);t.includes(x.id)||(u(x.id,e),t.push(x.id),a.forEach((function(n){(t.includes(n.id)&&!n.isActive||!t.includes(n.id)&&n.isActive)&&c(n.id,"isActive")})))}}},n.createElement("svg",{width:"100%",height:"100%",style:{position:"absolute",top:0,left:0,zIndex:"-1"}},x&&n.createElement("path",{d:"M ".concat(x.x1," ").concat(x.y1," L ").concat(x.x2," ").concat(x.y2),stroke:"#0088ff33",strokeWidth:"4",fill:"none"}),w),n.createElement(H,{cellHeight:r},y.map((function(e,t){return n.createElement(T,{key:t},e)}))))},N=e.div(D||(D=a(["\n ","\n"],["\n ","\n"])),(function(n){var e=n.textColor;return e?"& span { color: ".concat(e," !important; }"):""})),P=function(n){function e(){return null!==n&&n.apply(this,arguments)||this}return function(n,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function t(){this.constructor=n}i(n,e),n.prototype=null===e?Object.create(e):(t.prototype=e.prototype,new t)}(e,n),e.create=function(e){var t=n.create.call(this,e);return t.setAttribute("id",e.id),t.setAttribute("style",e.style),t},e.value=function(n){return{id:n.getAttribute("id"),style:n.getAttribute("style")}},e.prototype.format=function(t,r){t===e.blotName&&r?(this.domNode.setAttribute("id",r.id),this.domNode.setAttribute("style",r.style)):n.prototype.format.call(this,t,r)},e}(r.import("blots/inline"));P.blotName="cell",P.tagName="span",r.register("formats/cell",P);var D,R,V,B,K,_,F,W,J,Z,q,X,Y,U,Q,$,nn,en,tn,rn,on,ln,an,cn,un,dn,sn,fn,pn,xn,mn,gn,hn,bn,vn,yn,wn,kn=["bold","italic","strike","underline","color","background","font","code","cell"],En=function(e){var r=e.cellIds,i=e.style,l=e.textColor,a=n.useRef(null),c=n.useRef(null),u=n.useContext(v),d=u.cells,s=u.updateCell,f=u.addCell,p=u.toggleCell,x=n.useState(""),m=x[0],g=x[1],h=n.useRef(r),b=n.useRef(d),y=function(){for(var n=r.map((function(n){return d.find((function(e){return e.id==n}))})),e=[],t=n.find((function(n){return!n.parentCellId}));t;)e.push(t),t=n.find((function(n){return n.parentCellId==(null==t?void 0:t.id)}));return e};n.useEffect((function(){!function(){var n;if("function"==typeof(null===(n=c.current)||void 0===n?void 0:n.getEditor)){var e=c.current.getEditor();null!=e&&(a.current=e)}}(),w(y())}),[]),n.useEffect((function(){r.length==h.current.length&&r.every((function(n,e){return n==h.current[e]}))||(w(y()),h.current=r)}),[r]),n.useEffect((function(){var n,e=d.find((function(n){return n.isSelected})),t=null===(n=b.current.find((function(n){return n.isSelected})))||void 0===n?void 0:n.id,r=d.find((function(n){return n.id==t}));if(r!==e){for(var i=0,o=-1,l=-1,c=y(),u=0;u<c.length;u++)c[u].id==t?o=i:c[u].id==(null==e?void 0:e.id)&&(l=i),i+=c[u].text.length;if(r){var s=r.text.length;a.current.formatText(o,s,"background",!1)}if(e){var f=e.text.length;a.current.formatText(l,f,"background","#0088ff33")}b.current=d}}),[d]);var w=function(n){var e=n.map((function(n,e){if(n)return{insert:n.text,attributes:{cell:{id:n.id,style:e%2==0?"color:#333":"color:#666"}}}}));a.current.setContents(e)},k=function(n){return n.split("</span>").map((function(n){var e=n.split("<span")[1];return e?{id:e.split("id=")[1].split(" ")[0].replace(/"/g,""),text:e.split(">")[1]}:{}}))};return n.createElement(N,{style:i,textColor:l,onMouseDown:function(n){n.stopPropagation()}},n.createElement("link",{rel:"stylesheet",href:"//cdn.quilljs.com/1.3.6/quill.snow.css"}),n.createElement(t,{ref:c,theme:"snow",value:m,onChange:function(n,e,t){"user"==t?function(n,e){var t=k(n),r=k(e),i=[],l=[];if(t.forEach((function(n){var e=r.find((function(e){return e.id==n.id}));e?e.text!=n.text&&i.push(e):l.push(n)})),i.forEach((function(n){s(n.id,n.text)})),l.forEach((function(n){s(n.id,"␡")})),l.length>0){var a=y().map((function(n){if(l.find((function(e){return e.id==n.id})))return o(o({},n),{text:"␡"});var e=i.find((function(e){return e.id==n.id}));return e?o(o({},n),{text:e.text}):n}));w(a)}else g(e)}(m,n):g(n)},onChangeSelection:function(n,e,t){if(n&&!(n.length>0))if(0!=n.index){var r=a.current.getLeaf(n.index)[0];if(r){var i=r.parent.domNode.getAttribute("id");if(i){var o=d.find((function(n){return n.id==i}));o&&!o.isSelected&&p(i,"isSelected")}}}else p(d[0].id,"isSelected")},onKeyDown:function(n){if("Enter"==n.key&&(n.metaKey||n.ctrlKey)){n.preventDefault();var e=y(),t=e[e.length-1].id;f(" ",{parentCellId:t,isActive:!0}),setTimeout((function(){var n=a.current.getLength();a.current.setSelection(n,0)}),10)}else"Backspace"==n.key&&(n.metaKey||n.ctrlKey)&&n.stopPropagation()},modules:{toolbar:!1},formats:kn}))},zn=e.div(R||(R=a(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: ",";\n margin-top: ",";\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: ",";\n margin-top: ",";\n"])),(function(n){return"small"===n.size?"4px":"medium"===n.size?"6px":"8px"}),(function(n){return"small"===n.size?"4px":"medium"===n.size?"6px":"8px"})),Cn=e.div(V||(V=a(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgba(255, 255, 255, 0.50);\n border-radius: ",";\n height: ",";\n width: ",";\n padding: ",";\n cursor: pointer;\n &:hover {\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);\n }\n"],["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgba(255, 255, 255, 0.50);\n border-radius: ",";\n height: ",";\n width: ",";\n padding: ",";\n cursor: pointer;\n &:hover {\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);\n }\n"])),(function(n){return"small"===n.size?"2px":"medium"==n.size?"4px":"6px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"}),(function(n){return"small"===n.size?"0 2px 2px 2px":"medium"==n.size?"0 3px 3px 3px":"0 4px 4px 4px"})),Sn=e.div(B||(B=a(["\n font-size: ",";\n color: #555555;\n margin-bottom: 2px;\n"],["\n font-size: ",";\n color: #555555;\n margin-bottom: 2px;\n"])),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"})),In=e.div(K||(K=a(["\n font-size: ",";\n width: 90%;\n text-align: center;\n color: #333333;\n background-color: rgba(255, 255, 255, 0.75);\n flex: 1;\n border-radius: ",";\n display: flex;\n align-items: center;\n justify-content: center;\n"],["\n font-size: ",";\n width: 90%;\n text-align: center;\n color: #333333;\n background-color: rgba(255, 255, 255, 0.75);\n flex: 1;\n border-radius: ",";\n display: flex;\n align-items: center;\n justify-content: center;\n"])),(function(n){return"small"===n.size?"16px":"medium"===n.size?"20px":"24px"}),(function(n){return"small"===n.size?"2px":"medium"==n.size?"3px":"4px"})),jn=function(e){e.id;var t=e.name,r=e.nickname,i=e.type,o=e.value;e.allowedValues;var l=e.valueNicknames;e.defaultValue;var a=e.size,c=e.onClick;return"nominal"===i&&(o=l?l[o]:o),n.createElement(Cn,{size:a,onClick:c},n.createElement(Sn,{size:a},r||t.toLowerCase()),n.createElement(In,{size:a},o))},Mn=e.div(_||(_=a(["\n position: absolute;\n top: ","px;\n left: ","px;\n background-color: rgba(255, 255, 255, 0.95);\n border-radius: ",";\n height: ",";\n width: ",";\n border: solid "," ",";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n display: flex;\n flex-direction: column;\n font-size: ",";\n text-align: left;\n cursor: pointer;\n z-index: 3;\n"],["\n position: absolute;\n top: ","px;\n left: ","px;\n background-color: rgba(255, 255, 255, 0.95);\n border-radius: ",";\n height: ",";\n width: ",";\n border: solid "," ",";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n display: flex;\n flex-direction: column;\n font-size: ",";\n text-align: left;\n cursor: pointer;\n z-index: 3;\n"])),(function(n){return"small"===n.size?12+38*n.row:"medium"===n.size?17+57*n.row:22+76*n.row}),(function(n){return"small"===n.size?4+40*n.column:"medium"==n.size?6+60*n.column:8+80*n.column}),(function(n){return"small"===n.size?"2px":"medium"==n.size?"4px":"6px"}),(function(n){return"small"===n.size?"34px":"medium"==n.size?"51px":"68px"}),(function(n){return"small"===n.size?"120px":"medium"==n.size?"180px":"220px"}),(function(n){return n.color}),(function(n){return"small"===n.size?"1px":"2px"}),(function(n){return"small"===n.size?"10px":"medium"===n.size?"16px":"20px"})),Gn=e.div(F||(F=a(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: calc(100% - ",");\n padding: ",";\n\n & > input[type=text] {\n font-size: ",";\n width: 20%;\n text-align: center;\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n\n & > input[type=range] {\n width: 100%;\n -webkit-appearance: none;\n padding-top: ",";\n }\n & > input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: #0066ffdd;\n cursor: pointer;\n transition: 0.5s;\n margin-top: ",";\n &:hover {\n background-color: #0066ff;\n }\n }\n & > input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: ",";\n border-radius: 20px;\n width: 100%;\n background: #dddddd;\n background-image: linear-gradient(#0066ffaa, #0066ffaa);\n background-size: ","% 100%;\n background-repeat: no-repeat;\n }\n & > select {\n width: 100%;\n font-size: ",";\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: calc(100% - ",");\n padding: ",";\n\n & > input[type=text] {\n font-size: ",";\n width: 20%;\n text-align: center;\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n\n & > input[type=range] {\n width: 100%;\n -webkit-appearance: none;\n padding-top: ",";\n }\n & > input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: #0066ffdd;\n cursor: pointer;\n transition: 0.5s;\n margin-top: ",";\n &:hover {\n background-color: #0066ff;\n }\n }\n & > input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: ",";\n border-radius: 20px;\n width: 100%;\n background: #dddddd;\n background-image: linear-gradient(#0066ffaa, #0066ffaa);\n background-size: ","% 100%;\n background-repeat: no-repeat;\n }\n & > select {\n width: 100%;\n font-size: ",";\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n"])),(function(n){return"small"===n.size?"8px":"medium"===n.size?"16px":"24px"}),(function(n){return"small"===n.size?"0 4px":"medium"==n.size?"0 8px":"0 12px"}),(function(n){return"small"===n.size?"10px":"medium"==n.size?"14px":"18px"}),(function(n){return"small"===n.size?"2px":"medium"===n.size?"4px":"6px"}),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"}),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"}),(function(n){return"small"===n.size?"-2px":"medium"===n.size?"-3px":"-4px"}),(function(n){return"small"===n.size?"4px":"medium"===n.size?"6px":"8px"}),(function(n){return n.filled}),(function(n){return"small"===n.size?"10px":"medium"==n.size?"14px":"18px"})),An=function(e){var t=e.parameter,r=e.size,i=e.row,o=e.column,l=e.color,a=e.changeHandler,c=n.useState(void 0!==t.value&&"string"!=typeof t.value?t.value.toString():""),u=c[0],d=c[1];n.useEffect((function(){d(void 0!==t.value&&"string"!=typeof t.value?t.value.toString():"")}),[t.value]);var s=function(){var n=parseFloat(u);if(isNaN(n))d(t.value&&"string"!=typeof t.value?t.value.toString():"");else{var e=t.allowedValues;n>e[1]?n=e[1]:n<e[0]&&(n=e[0]),"discrete"===t.type&&(n=Math.round(n)),a(n)}},f=0;return"nominal"!==t.type&&(f=t.value/(t.allowedValues[1]-t.allowedValues[0])*100),n.createElement(Mn,{size:r,row:i,column:o,color:l},n.createElement(Gn,{size:r,onMouseDown:function(n){return n.stopPropagation()},onClick:function(n){return n.stopPropagation()}},n.createElement("div",null,t.name.slice(0,12)),"nominal"!==t.type?n.createElement("input",{value:u,onChange:function(n){return d(n.target.value)},onKeyDown:function(n){return"Enter"==n.key&&s()},onBlur:s,type:"text"}):""),n.createElement(Gn,{size:r,filled:f,onMouseDown:function(n){return n.stopPropagation()},onClick:function(n){return n.stopPropagation()}},"nominal"!==t.type?n.createElement("input",{type:"range",min:t.allowedValues[0],max:t.allowedValues[1],value:t.value,step:"discrete"==t.type?1:.05,onChange:function(n){return a(parseFloat(n.target.value))}}):n.createElement("select",{defaultValue:t.value,onChange:function(n){return a(n.target.value)}},t.allowedValues.map((function(e,t){return n.createElement("option",{key:t,value:e},e)})))))},Ln=e.div(W||(W=a(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: ",";\n border-radius: ",";\n padding: ",";\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n width: fit-content;\n height: fit-content;\n position: relative;\n cursor: pointer;\n"],["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: ",";\n border-radius: ",";\n padding: ",";\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n width: fit-content;\n height: fit-content;\n position: relative;\n cursor: pointer;\n"])),(function(n){return n.color}),(function(n){return"small"===n.size?"4px":"medium"==n.size?"6px":"8px"}),(function(n){return"small"===n.size?"2px 4px 4px 4px":"medium"==n.size?"3px 6px 6px 6px":"4px 8px 8px 8px"})),Hn=e.div(J||(J=a(["\n font-size: ",";\n line-height: 1;\n color: white;\n user-select: none;\n"],["\n font-size: ",";\n line-height: 1;\n color: white;\n user-select: none;\n"])),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"})),Tn=e.svg(Z||(Z=a(["\n position: absolute;\n top: calc(50% - ",");\n left: calc(50% - ",");\n height: ",";\n width: ",";\n z-index: 2;\n"],["\n position: absolute;\n top: calc(50% - ",");\n left: calc(50% - ",");\n height: ",";\n width: ",";\n z-index: 2;\n"])),(function(n){return"small"===n.size?"16px":"medium"==n.size?"24px":"32px"}),(function(n){return"small"===n.size?"16px":"medium"==n.size?"24px":"32px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"})),On=e.div(q||(q=a(["\n position: absolute;\n top: -","px;\n left: -","px;\n height: calc(100% + ","px);\n width: calc(100% + ","px);\n border: solid rgb(0, 194, 255) ","px;\n border-radius: ","px;\n box-sizing: border-box;\n box-shadow: 0 0 2px 2px rgba(0, 194, 255, 0.3);\n"],["\n position: absolute;\n top: -","px;\n left: -","px;\n height: calc(100% + ","px);\n width: calc(100% + ","px);\n border: solid rgb(0, 194, 255) ","px;\n border-radius: ","px;\n box-sizing: border-box;\n box-shadow: 0 0 2px 2px rgba(0, 194, 255, 0.3);\n"])),(function(n){return"large"!==n.size?4:6}),(function(n){return"large"!==n.size?4:6}),(function(n){return"large"!==n.size?8:12}),(function(n){return"large"!==n.size?8:12}),(function(n){return"large"!==n.size?2:3}),(function(n){return"small"===n.size?6:"medium"==n.size?8:10})),Nn=function(e){var t=e.id,r=e.parameters,i=e.color,a=e.size,c=e.numColumns,u=e.isGenerating,d=e.isSelected,s=e.onMouseEnter,f=e.onMouseLeave,p=n.useContext(v),x=p.updateGenerator,m=p.toggleGenerator,g=p.onGenerate,h=n.useState(""),b=h[0],y=h[1],w=n.useRef(null);n.useEffect((function(){var n=function(n){n.target.id!==t&&y("")};return document.addEventListener("mousedown",n),function(){document.removeEventListener("mousedown",n)}}),[]);var k=[],E=[];r.forEach((function(n,e){e%(c||2)==0&&0!==e&&(k.push(E),E=[]),E.push(n)})),k.push(E);var z=r.findIndex((function(n){return n.id===b}));return n.createElement(Ln,{id:t,color:i,size:a||"medium",onClick:function(n){1===n.detail?w.current=window.setTimeout((function(){g(t),w.current=null}),200):2===n.detail&&(w.current&&(clearTimeout(w.current),w.current=null),m(t,"isSelected"))},onMouseEnter:function(n){s&&s(n)},onMouseLeave:function(n){f&&f(n)},"data-testid":t},n.createElement(Hn,{size:a||"medium"},"Generate"),k.map((function(e,t){return n.createElement(zn,{key:t,size:a||"medium",style:0==t?{marginTop:"2px"}:{}},e.map((function(e,t){return n.createElement(jn,o({key:t},e,{size:a||"medium",onClick:function(n){n.stopPropagation(),y(e.id)}}))})))})),-1!=z&&n.createElement(An,{parameter:r[z],size:a||"medium",row:Math.floor(z/(c||2)),column:z%(c||2),color:i,changeHandler:function(n){var e=l([],r,!0);e[z].value=n,x(t,e)}}),u&&n.createElement(Tn,{size:a||"medium"},n.createElement("g",{transform:"scale(".concat("small"===a?.64:"medium"===a?.96:1.28,")")},n.createElement("path",{fill:"#fff",d:"M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"},n.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.5s",repeatCount:"indefinite"})))),d&&n.createElement(On,{size:a||"medium"}))},Pn=n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 256 512"},n.createElement("path",{d:"M.1 29.3C-1.4 47 11.7 62.4 29.3 63.9l8 .7C70.5 67.3 96 95 96 128.3V224H64c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v95.7c0 33.3-25.5 61-58.7 63.8l-8 .7C11.7 449.6-1.4 465 .1 482.7s16.9 30.7 34.5 29.2l8-.7c34.1-2.8 64.2-18.9 85.4-42.9c21.2 24 51.2 40.1 85.4 42.9l8 .7c17.6 1.5 33.1-11.6 34.5-29.2s-11.6-33.1-29.2-34.5l-8-.7C185.5 444.7 160 417 160 383.7V288h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V128.3c0-33.3 25.5-61 58.7-63.8l8-.7c17.6-1.5 30.7-16.9 29.2-34.5S239-1.4 221.3 .1l-8 .7C179.2 3.6 149.2 19.7 128 43.7c-21.2-24-51.2-40-85.4-42.9l-8-.7C17-1.4 1.6 11.7 .1 29.3z"})),Dn=n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512"},n.createElement("path",{d:"M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"})),Rn=e.div(X||(X=a(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding-right: 4px;\n max-height: 100%;\n\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding-right: 4px;\n max-height: 100%;\n\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),Vn=e.div(Y||(Y=a(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n"],["\n display: flex;\n flex-direction: row;\n gap: 4px;\n"]))),Bn=e.div(U||(U=a(["\n min-width: 24px;\n height: ",";\n border-radius: 4px;\n border: solid 2px ",";\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n fill: ",";\n\n &:hover {\n border-color: #0088ffcc;\n fill: #0088ffcc;\n }\n"],["\n min-width: 24px;\n height: ",";\n border-radius: 4px;\n border: solid 2px ",";\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n fill: ",";\n\n &:hover {\n border-color: #0088ffcc;\n fill: #0088ffcc;\n }\n"])),(function(n){return n.opened?"inherit":"24px"}),(function(n){return n.opened?"#0088ff":"#cccccc"}),(function(n){return n.opened?"#0088ff":"#cccccc"})),Kn=e.div(Q||(Q=a(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-shrink: 1;\n justify-content: center;\n border: solid 2px #0088ff66;\n border-radius: 4px;\n padding: 4px 8px;\n color: #555555;\n font-size: 14px;\n max-height: 200px;\n overflow-y: auto;\n word-break: break-word;\n white-space: pre-wrap;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-shrink: 1;\n justify-content: center;\n border: solid 2px #0088ff66;\n border-radius: 4px;\n padding: 4px 8px;\n color: #555555;\n font-size: 14px;\n max-height: 200px;\n overflow-y: auto;\n word-break: break-word;\n white-space: pre-wrap;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),_n=e.div($||($=a(["\n display: flex;\n flex-direction: row;\n flex: 1;\n gap: 8px;\n"],["\n display: flex;\n flex-direction: row;\n flex: 1;\n gap: 8px;\n"]))),Fn=e.div(nn||(nn=a(["\n width: ",";\n height: ",";\n background-color: #dddddd;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n background-color: #0088ffcc;\n }\n"],["\n width: ",";\n height: ",";\n background-color: #dddddd;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n background-color: #0088ffcc;\n }\n"])),(function(n){return n.minimized?"28px":"4px"}),(function(n){return n.minimized?"4px":"inherit"})),Wn=e.div(en||(en=a(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n"],["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n"]))),Jn=e.div(tn||(tn=a(["\n border: solid 2px #cccccc;\n border-radius: 8px;\n padding: 4px 8px;\n color: #555555;\n cursor: pointer;\n font-size: 14px;\n font-weight: ",";\n\n ","\n"],["\n border: solid 2px #cccccc;\n border-radius: 8px;\n padding: 4px 8px;\n color: #555555;\n cursor: pointer;\n font-size: 14px;\n font-weight: ",";\n\n ","\n"])),(function(n){return n.viewed?"normal":"bold"}),(function(n){return n.hovered&&"\n border-color: #0088ff;\n background-color: #0088ff22;\n "})),Zn=function(n){for(var e="",t=0;t<n.length;t++){var r=n[t];e+=r.name+"="+r.value,t<n.length-1&&(e+=";")}return e},qn=function(e){var t=e.generations,r=e.onGenerationClick,i=n.useContext(v),o=i.hoveredId,a=i.setHoveredId,c=n.useState([]),u=c[0],d=c[1],s=n.useState([]),f=s[0],p=s[1],x=n.useState([]),m=x[0],g=x[1],h=function(n){for(var e={},t=0;t<n.length;t++){var r=n[t],i=r.inputText,o=Zn(r.parameters);i in e||(e[i]={}),o in e[i]||(e[i][o]=[]),e[i][o].push({id:r.id,content:r.content})}return e}(t);return n.createElement(Rn,null,0===t.length&&n.createElement("div",{style:{display:"flex",paddingTop:"5%",justifyContent:"center",alignItems:"center",height:"100%",color:"#ccc"}},"No generations yet..."),Object.keys(h).map((function(e,t){return[n.createElement(Vn,{key:t+"-i"},n.createElement(Bn,{opened:m.includes("input-".concat(t))?1:0,onClick:function(){var n="input-".concat(t);m.includes(n)?g(m.filter((function(e){return e!==n}))):g(l(l([],m,!0),[n],!1))}},Pn),m.includes("input-".concat(t))&&n.createElement(Kn,null,e)),n.createElement(_n,{key:t+"-s"},n.createElement(Fn,{minimized:f.includes("input-".concat(t))?1:0,onClick:function(){var n="input-".concat(t);f.includes(n)?p(f.filter((function(e){return e!==n}))):p(l(l([],f,!0),[n],!1))}}),!f.includes("input-".concat(t))&&n.createElement(Wn,null,Object.keys(h[e]).map((function(i,c){return[n.createElement(Vn,{key:c+"-i"},n.createElement(Bn,{opened:m.includes("parameters-".concat(t,"-").concat(c))?1:0,onClick:function(){var n="parameters-".concat(t,"-").concat(c);m.includes(n)?g(m.filter((function(e){return e!==n}))):g(l(l([],m,!0),[n],!1))}},Dn),m.includes("parameters-".concat(t,"-").concat(c))&&n.createElement(Kn,null,i.split(";").map((function(e,t){var r=e.split("="),i=r[0],o=r[1];return n.createElement("div",{key:t},i,": ",n.createElement("b",null,o))})))),n.createElement(_n,{key:c+"-s"},n.createElement(Fn,{minimized:f.includes("parameters-".concat(t,"-").concat(c))?1:0,onClick:function(){var n="parameters-".concat(t,"-").concat(c);f.includes(n)?p(f.filter((function(e){return e!==n}))):p(l(l([],f,!0),[n],!1))}}),!f.includes("parameters-".concat(t,"-").concat(c))&&n.createElement(Wn,null,h[e][i].map((function(e,t){return n.createElement(Jn,{key:t,viewed:u.includes(e.id)?1:0,hovered:e.id===o?1:0,onMouseOver:function(){u.includes(e.id)||d(l(l([],u,!0),[e.id],!1)),a(e.id)},onMouseOut:function(){a(null)},onClick:function(){r&&r(e.content)}},e.content)}))))]}))))]})))},Xn=e.div(rn||(rn=a(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding-right: 4px;\n width: 100%;\n height: 100%;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding-right: 4px;\n width: 100%;\n height: 100%;\n"]))),Yn=e.div(on||(on=a(["\n flex: 1;\n height: 100%;\n position: relative;\n"],["\n flex: 1;\n height: 100%;\n position: relative;\n"]))),Un=e.div(ln||(ln=a(["\n position: absolute;\n top: ","%;\n left: ","%;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: ",";\n cursor: pointer;\n ","\n ","\n &:hover {\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n }\n"],["\n position: absolute;\n top: ","%;\n left: ","%;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: ",";\n cursor: pointer;\n ","\n ","\n &:hover {\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n }\n"])),(function(n){return n.y}),(function(n){return n.x}),(function(n){return n.viewed?"#aaaaaa99":"#0088ff66"}),(function(n){return n.hovered&&"\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ffaa;\n "}),(function(n){return n.selected&&"\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n "})),Qn=e.div(an||(an=a(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n height: 100%;\n width: 0;\n"],["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n height: 100%;\n width: 0;\n"]))),$n=e.div(cn||(cn=a(["\n display: flex;\n padding: 8px;\n border-radius: 8px;\n font-size: 10px;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);\n gap: 4px;\n flex-direction: column;\n overflow-y: auto;\n"],["\n display: flex;\n padding: 8px;\n border-radius: 8px;\n font-size: 10px;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);\n gap: 4px;\n flex-direction: column;\n overflow-y: auto;\n"]))),ne=e.div(un||(un=a(["\n font-size: 12px;\n overflow-y: auto;\n flex: 1;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n font-size: 12px;\n overflow-y: auto;\n flex: 1;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),ee=e.svg(dn||(dn=a(["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"],["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"]))),te=function(e){return e.map((function(e){var t=e.name,r=e.value;return n.createElement("div",{key:t},t,": ",n.createElement("span",{style:{fontWeight:"bold"}},r))}))},re=function(e){var t=e.generations,r=e.onGenerationClick,i=e.getPosition,o=n.useContext(v),a=o.hoveredId,c=o.setHoveredId,u=o.updateGenerationsData,d=n.useRef([]),s=n.useState(null),f=s[0],p=s[1],x=n.useState([]),m=x[0],g=x[1],h=n.useState(0),b=h[0],y=h[1];n.useEffect((function(){if(t.length!==d.current.length){var n=t.filter((function(n){return!d.current.find((function(e){return e.id===n.id}))}));if(0!==n.length){var e=n.filter((function(n){var e=n.metadata;return!e||!e.position}));y((function(n){return n+1})),i(e).then((function(n){0!=n.length?(u(e.map((function(n){return n.id})),n.map((function(n){return{position:n}}))),y((function(n){return n-1}))):y((function(n){return n-1}))})),d.current=t}}}),[t]);var w=t.find((function(n){return n.id===a})),k=t.find((function(n){return n.id===f})),E={x:{min:null,max:null},y:{min:null,max:null}};return t.forEach((function(n){var e=n.metadata;if(e){var t=e.position;if(t){var r=t.x,i=t.y;(null==E.x.min||r<E.x.min)&&(E.x.min=r),(null==E.x.max||r>E.x.max)&&(E.x.max=r),(null==E.y.min||i<E.y.min)&&(E.y.min=i),(null==E.y.max||i>E.y.max)&&(E.y.max=i)}}})),n.createElement(Xn,null,n.createElement(Yn,null,0==t.length&&n.createElement("div",{style:{display:"flex",paddingTop:"5%",justifyContent:"center",alignItems:"center",color:"#ccc"}},"No generations yet..."),b>0&&n.createElement(ee,null,n.createElement("g",{transform:"scale(0.84)"},n.createElement("path",{fill:"#0088ff99",d:"M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"},n.createElement("animateTransform",{attributeName:"transform",ty