1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6134],{78250:function(e,t,o){o.r(t),o.d(t,{GuidedThemeWizard:function(){return eq}});var n=o(52322),r=o(38035),s=o(28165),a=o(91505),l=o(64939);o(31458),o(63472),o(55261);var i=o(2784),c=o(54680),d=o(93202),u=o(42111),h=o(29318),g=o(3543),m=o(31490),p=o(387),x=o.n(p),f=o(37164),b=o(81087),y=o(54691),j=o(6997);let C={message:"",resp:"",suggestion:[]},v=async e=>{let{tone:t,colors:o,description:n,interactionId:r,history:s=[]}=e,a=(s||[]).slice(-7),l=S.prepare({variables:{tone:t||"any tone",colors:o||"any color",description:n||"general purpose presentation"},interactionId:r,history:a}),i=await (0,y.I)(l,r,{timeout:12e4});if(!i)return C;let c=(0,b.$V)(i);return!c.shouldRetry&&c.suggestion?{message:c.message,resp:c.raw,suggestion:E(c.suggestion)}:C},E=e=>{let t=x().load(e);return t&&"object"==typeof t&&"colors"in t?t.colors.map(e=>({...e,id:(0,f.x0)(5)})):[]},S=new j.u({systemPrompt:"\nYou are a designer creating a color palette for a webpage. You'll be given a request from the user with a description of the colors they want. You should use your knowledge of color theory to suggest multiple color palettes based on the request.\n\n# Structure\nYou should return 3 color palettes. Each palette should match the user's request, but they must be different from each other so that the user can choose the one they like best.\n\nReturn all three palettes as a YAML array inside a fenced code block, with the following parameters:\n```yaml\ncolors:\n - name: A short name, 1-2 words. The name should be an abstract noun that hints at the tone and colors without directly referencing them.\n headingColor: A hex code for headings. Should match or look good with the body color.\n bodyColor: A hex code for body text. Should be more subtle than headingColor, with an emphasis on a readable color.\n accentColor: A hex code for links, buttons, and other visual accents. Should be more bold and colorful than the body text.\n cardColor: A hex code for the background color of each slide. Should be either very light or very dark, to provide high contrast with the body color.\n backgroundColor: A hex code for the background color of the entire presentation. This will be displayed around the card color, so it should be a color that complements the card color.\n - ...\n - ...\n```\n\n# Example\n\nInput:\n- tone: modern, fresh\n- colors: #f5a3a3, light\
1n- description: for a deck about designer portfolio\n\nOutput:\n```yaml\ncolors:\n - name: Flamingo\n headingColor: '#1F1E1E'\n bodyColor: '#3B3535'\n accentColor: '#F5A3A3'\n cardColor: '#FFFAFA'\n backgroundColor: '#EDF1F8'\n - name: Oasis\n headingColor: '#2C3F42'\n bodyColor: '#2B2E3C'\n accentColor: '#D2600F'\n cardColor: '#FFF8F0'\n backgroundColor: '#AABCB6'\n - name: Pearl\n headingColor: '#3C3939'\n bodyColor: '#3C3939'\n accentColor: '#1B1B27'\n cardColor: '#FFFFFF'\n backgroundColor: '#ECECF3'\n```\n".trim(),userPrompt:"\nInput:\n- tone: {{tone}}\n- colors: {{colors}}\n- description: {{description}}\n\nPlease suggest three unique and different color palettes as a YAML array inside a fenced code block.\n\nIf I ask for specific hex codes, use them in all the palettes. Otherwise, make the palettes different by varying the colors and tones. Do not explain your choices, just return the YAML.\n".trim(),variables:["tone","colors","description"],params:{maxTokens:1e3,temperature:1,model:"gpt-3.5-turbo"}}),k={message:"",resp:"",suggestion:[]},_=async e=>{let{tone:t,colors:o,description:n,allowedFonts:r,interactionId:s,history:a=[]}=e,l=(a||[]).slice(-7),i=O.prepare({variables:{tone:t||"any tone",colors:o||"any color",description:n||"general purpose presentation",allowedFonts:r},interactionId:s,history:l}),c=await (0,y.I)(i,s,{timeout:45e3});if(!c)return k;let d=(0,b.$V)(c);if(!d.shouldRetry&&d.suggestion){let e=w(d.suggestion);return{message:d.message,resp:d.raw,suggestion:e}}return k},w=e=>{let t=x().load(e);return t&&"object"==typeof t&&"fonts"in t?t.fonts.map(e=>({...e,id:(0,f.x0)(5)})):[]},O=new j.u({systemPrompt:"\nYou are a designer choosing fonts for a webpage. You'll be given a request from the user with a description of the style and tone they want. You should use your knowledge of typography to suggest multiple font pairings based on their requests.\n\nOnly choose from the following fonts:\n{{allowedFonts}}\n\n# Structure\nYou should return 3 font pairings. Each font pairing should match the user's request, but they must be different from each other so that the user can choose the one they like best.\n\nReturn all three font pairings as a YAML array inside a fenced code block, with the following parameters:\n```yaml\nfonts:\n - headingFont: a font from the available fonts above. Should be a bolder, eye-catching font that would work well as a heading\n bodyBody: a font from the available fonts above. Should be a more subtle font that would work well as body text\n - ...\n - ...\n```\n\n# Example\n\nInput:\n- tone: modern, clean\n- colors: #fec452, dark\n- description: for a deck about photography\n\nOutput:\n```yaml\nfonts:\n - headingFont: Montserrat\n bodyFont: Lato\n - headingFont: Raleway\n bodyFont: Open Sans\n - headingFont: Oswald\n bodyFont: Roboto\n```\n".trim(),userPrompt:"\nInput:\n- tone: {{tone}}\n- colors: {{colors}}\n- description: {{description}}\n\nPlease suggest three unique and different font pairings as a YAML array inside a fenced code block.\n\nMake your 3 suggestions different. Do not explain your choices, just return the YAML.\n".trim(),variables:["tone","colors","description","allowedFonts"],params:{maxTokens:200,temperature:.1,model:"gpt-3.5-turbo"}});var T=o(50260),R=o(13793);let A={inputStep:"input",status:{generate:"idle",colors:"idle",fonts:"idle"},chatData:{chatStep:0,toneWords:[],colors:[],description:""},suggestions:{colors:{values:[],messageHistory:[]},fonts:{values:[],messageHistory:[]}},themeSelections:{colorPaletteId:null,fontPairingId:null,accentImagePackId:null},theme:T.mU,themeName:""};function D(e,t){switch(t.type){case"SET_CHAT_STEP":{let{chatStep:o}=t.data;return{...e,chatData:{...e.chatData,chatStep:o}}}case"SET_INPUT_STEP":{let{inputStep:o}=t.data;return{...e,inputStep:o}}case"ADD_TONE_WORD":{let{toneWord:o}=t.data;return{...e,chatData:{...e.chatData,toneWords:[...e.chatData.toneWords,o]}}}case"REMOVE_TONE_WORD":{let{id:o}=t.data,n=e.chatData.toneWords.filter(e=>e.id!==o);return{...e,chatData:{...e.chatData,toneWords:n}}}case"ADD_COLOR":{let{color:o}=t.data;return{...e,chatData:{...e.chatData,colors:[...e.chatData.colors,o]}}}case"EDIT_COLOR":{let{color:o}=t.data,n=e.chatData.colors.map(e=>e.id===o.id?o:e);return{...e,chatData:{...e.chatData,colors:n}}}case"REMOVE_COLOR":{let{id:o}=t.data,n=e.chatData.colors.filter(e=>e.id!==o);return{...e,chatData:{...e.chatData,colors:n}}}case"SET_DESCRIPTION":{let{description:o}=t.data;return{...e,chatData:{...e.chatData,description:o}}}case"START_THEME_GENERATE":return{...e,status:{...e.status,generate:"loading"}};case"THEME_GENERATE_SUCCESS":{let{suggestedColors:o,suggestedFonts:n,allThemeFonts:r,accentImagePack:s}=t.data;return{...e,status:{...e.status,generate:"idle"},inputStep:"generate",suggestions:{colors:{values:o.suggestion,messageHistory:[{role:d.XaP.Assistant,content:o.resp}]},fonts:{values:n.suggestion,messageHistory:[{role:d.XaP.Assistant,content:n.resp}]}},themeSelections:{colorPaletteId:o.suggestion[0].id,fontPairingId:n.suggestion[0].id,accentImagePackId:s.id},theme:F(e.theme,{colors:o.suggestion[0],fonts:n.suggestion[0],allThemeFonts:r,accentBackgroun
1ds:s.config.accentBackgrounds}),themeName:o.suggestion[0].name}}case"LOAD_MORE_COLORS_START":{let{message:o}=t.data;return{...e,status:{...e.status,colors:"loading"},suggestions:{...e.suggestions,colors:{...e.suggestions.colors,messageHistory:[...e.suggestions.colors.messageHistory,o]}}}}case"LOAD_MORE_COLORS_SUCCESS":{let{suggestedColors:o}=t.data;return{...e,status:{...e.status,colors:"idle"},suggestions:{...e.suggestions,colors:{...e.suggestions.colors,values:[...e.suggestions.colors.values,...o.suggestion],messageHistory:[...e.suggestions.colors.messageHistory,{role:d.XaP.Assistant,content:o.resp}]}}}}case"LOAD_MORE_COLORS_ERROR":return{...e,status:{...e.status,colors:"error"}};case"LOAD_MORE_FONTS_START":{let{message:o}=t.data;return{...e,status:{...e.status,fonts:"loading"},suggestions:{...e.suggestions,fonts:{...e.suggestions.fonts,messageHistory:[...e.suggestions.fonts.messageHistory,o]}}}}case"LOAD_MORE_FONTS_SUCCESS":{let{suggestedFonts:o,allThemeFonts:n}=t.data;return{...e,status:{...e.status,fonts:"idle"},suggestions:{...e.suggestions,fonts:{...e.suggestions.fonts,values:[...e.suggestions.fonts.values,...o.suggestion],messageHistory:[...e.suggestions.fonts.messageHistory,{role:d.XaP.Assistant,content:o.resp}]}}}}case"LOAD_MORE_FONTS_ERROR":return{...e,status:{...e.status,fonts:"error"}};case"SET_THEME_COLORS":{let{colors:o}=t.data;return{...e,themeName:o.name,themeSelections:{...e.themeSelections,colorPaletteId:o.id},theme:F(e.theme,{colors:o})}}case"SET_THEME_ACCENT_IMAGE_PACK":{let{accentImagePack:o}=t.data,{accentBackgrounds:n}=o.config;return{...e,themeSelections:{...e.themeSelections,accentImagePackId:o.id},theme:F(e.theme,{accentBackgrounds:n})}}case"SET_THEME_FONTS":{let{fonts:o,allThemeFonts:n}=t.data;return{...e,themeSelections:{...e.themeSelections,fontPairingId:o.id},theme:F(e.theme,{fonts:o,allThemeFonts:n})}}case"START_THEME_SAVE":return{...e,inputStep:"save"};case"SET_THEME_NAME":{let{name:o}=t.data;return{...e,themeName:o}}}}let F=(e,t)=>{let{colors:o,fonts:n,allThemeFonts:r,accentBackgrounds:s}=t,a={...e.config},l={...e,config:a};if(o&&(a.background={type:R.E.COLOR,color:{hex:o.backgroundColor}},a.cardBackground={...e.config.cardBackground,type:R.E.COLOR,color:{hex:o.cardColor}},a.headingColor=o.headingColor,a.bodyColor=o.bodyColor,l.accentColor=o.accentColor,a.accentBackgroundsColorize={type:R.E.COLOR,color:{hex:null==o?void 0:o.accentColor}}),n&&r){let e=r.find(e=>e.id===n.bodyFont),t=r.find(e=>e.id===n.headingFont),o=[e,t].filter(e=>!!e);l.headingFont=null==n?void 0:n.headingFont,l.bodyFont=null==n?void 0:n.bodyFont,l.fonts=o}return s&&(a.accentBackgrounds=s),l},H=()=>{let e=(0,u.ye)("openAiStatus"),[t,o]=i.useReducer(D,A),{chatData:n}=t,{colors:r,toneWords:s,description:a}=n,l=(0,i.useMemo)(()=>(0,m.nZ)(),[]),c=r.map(e=>e.value).join(", "),g=s.map(e=>e.value).join(", "),p=P(t.theme.accentColor),{globalFonts:x,fontsMap:f,allThemeFonts:b}=(0,h.TY)(),y=x.filter(e=>e.cssUrl&&e.id===e.name&&!e.name.includes("Noto")).map(e=>e.name).join("\n"),j=t.suggestions.fonts.values.map(e=>{let t=f[e.headingFont]||f.Inter,o=f[e.bodyFont]||f.Inter;return[{id:t.id,url:t.cssUrl,name:t.name},{id:o.id,url:o.cssUrl,name:o.name}]}).flat(),C=(0,i.useCallback)(e=>{let n={role:d.XaP.User,content:"None of those were quite right, could you please suggest 3 different options?"};if("colors"===e){let e=[...t.suggestions.colors.messageHistory,n];o({type:"LOAD_MORE_COLORS_START",data:{message:n}}),v({tone:g,colors:c,description:a,interactionId:l,history:e}).then(e=>{o({type:"LOAD_MORE_COLORS_SUCCESS",data:{suggestedColors:e}})})}else{let e=[...t.suggestions.fonts.messageHistory,n];o({type:"LOAD_MORE_FONTS_START",data:{message:n}}),_({tone:g,colors:c,description:a,allowedFonts:y,interactionId:l,history:e}).then(e=>{o({type:"LOAD_MORE_FONTS_SUCCESS",data:{suggestedFonts:e,allThemeFonts:b}})})}},[y,c,a,o,l,t,g,b]),E=(0,i.useCallback)(()=>{o({type:"START_THEME_GENERATE"});let e=v({tone:g,colors:c,description:a,interactionId:l}),t=_({tone:g,colors:c,description:a,allowedFonts:y,interactionId:l});Promise.all([e,t]).then(e=>{let[t,n]=e;o({type:"THEME_GENERATE_SUCCESS",data:{suggestedColors:t,suggestedFonts:n,allThemeFonts:b,accentImagePack:p[0]}})})},[y,c,a,o,l,g,b,p]);return{state:t,dispatch:o,generateThemeFromPrompt:E,loadMoreFontsOrColors:C,openAiStatus:e,fonts:j,allThemeFonts:b,accentImagePacks:p}}
1,I=["vortex","incandescent","mocha","soft-coal","indigo","atacama","aurora"],M=["pearl","oatmeal","icebeaker","blue-steel","dune","prism","sage"],P=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#000000";(0,g.DP)(e);let t=[...M,...I],{themes:o}=(0,c.bo)(),n=o.filter(e=>t.includes(e.id));return n};var L=o(43297),N=o(77533),z=o(67422),W=o(74409);let B=()=>(0,n.jsx)(W.X,{as:"h1",size:"xl",children:"AI Theme creator"});var K=o(90221);let Y=(0,K.s2)()?"100%":"calc(100% - 6rem) ",G=e=>{let{children:t,...o}=e;return(0,n.jsx)(z.K,{from:"User",cardStyleOverrides:{bg:"white",color:"gray.800",w:Y},...o,children:t})};var U=o(46949),V=o(17993),X=o(89099),q=o(74105),Z=o(29494),J=o(20816),$=o(62614),Q=o(28535),ee=o(32899),et=o(75009),eo=o(85573),en=o(42946),er=o(49929),es=o(94523),ea=o(33522);let el=["Modern","Clean","Professional","Fun","Playful","Serious","Minimalist","Luxurious","Futuristic","High tech"],ei=["Dark","Light","Vibrant","Colorful","Gradient","Pastel","Earthy","Neutral","Neon","Warm","Cool","Grayish"],ec=[{title:"Black & white",icon:{src:"/_next/static/media/blackAndWhite.498ad785.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Neutrals",icon:{src:"/_next/static/media/neutrals.845b45e2.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Yellows",icon:{src:"/_next/static/media/yellows.2748da86.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Oranges",icon:{src:"/_next/static/media/oranges.4a133369.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Reds",icon:{src:"/_next/static/media/reds.a94f03da.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Pinks",icon:{src:"/_next/static/media/pinks.3f1fdb36.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Purples",icon:{src:"/_next/static/media/purples.5bea9ebf.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Blues",icon:{src:"/_next/static/media/blues.54df6ad5.svg",height:30,width:30,blurWidth:0,blurHeight:0}},{title:"Greens",icon:{src:"/_next/static/media/greens.0cee0ce5.svg",height:30,width:30,blurWidth:0,blurHeight:0}}],ed=["Radiance","Whisper","Momentum","Harmony","Enigma","Ethereal","Reverie","Serendipity","Nostalgia","Kaleidoscope"],eu=e=>{let{onClick:t,isSelected:o,suggestion:r}=e;return(0,n.jsx)($.z,{fontSize:"sm",px:4,py:3,_hover:{bg:o?"":"orchid.100"},size:"sm",colorScheme:"orchid",color:o?"white":void 0,variant:"ghost",borderWidth:"1px",cursor:"pointer",onClick:t,bg:o?"orchid.700":void 0,transitionProperty:"common",transitionDuration:"normal",children:r})};var eh=o(16556);let eg=e=>{let{color:t}=e;if("vibe"===t.type)return null;if("color"===t.type)return(0,n.jsx)(Q.xu,{boxSize:4,display:"inline-block",bg:t.value,borderRadius:"sm",mr:1});let o=ec.find(e=>e.title===t.value);return o?(0,n.jsx)(Q.xu,{boxSize:4,display:"inline-block",borderRadius:"sm",mr:1,children:(0,n.jsx)(et.E,{alt:o.title,src:o.icon.src,h:"100%",w:"100%"})}):null},em=(0,i.memo)(e=>{let{color:t,onClick:o,onRemoveClick:s,onInputChange:a}=e,l=(0,i.useRef)(null),c=(0,i.useCallback)(()=>{if("color"===t.type){var e;null===(e=l.current)||void 0===e||e.click()}o()},[t,o]);return(0,n.jsxs)(eh.Vp,{position:"relative",children:[(0,n.jsxs)(r.k,{justify:"center",align:"center",onClick:c,children:[(0,n.jsx)(eg,{color:t}),(0,n.jsx)(eh.Sn,{children:t.value}),(0,n.jsx)(eh.SD,{onClick:s})]}),(0,n.jsx)(eo.I,{type:"color",position:"absolute",inset:0,h:"100%",pointerEvents:"none",visibility:"hidden",value:t.value||"#000000",onInput:a,ref:l})]})}),ep=e=>{let{colors:t,dispatch:o,onSubmit:r}=e,s=(0,i.useRef)(null),[a,l]=(0,i.useState)(""),c=(0,i.useRef)(null),d=(0,i.useCallback)(e=>{"color"===e.type&&(s.current=e.id)},[]),u=(0,i.useCallback)(()=>{o({type:"ADD_COLOR",data:{color:{id:(0,f.x0)(5),value:a,type:"vibe"}}}),l("")},[o,l,a]),h=(0,i.useCallback)(()=>{let e=(0,f.x0)(5);s.current=e,o({type:"ADD_COLOR",data:{color:{id:e,value:"#000000",type:"color"}}}),setTimeout(()=>{var e;null===(e=c.current)||void 0===e||e.click()},0)},[o]),g=(0,i.useCallback)((e,t)=>{o({type:"EDIT_COLOR",data:{color:{id:t,type:"color",value:e}}})},[o]),m=(0,ea.Kt)(g,100),p=(0,i.useCallback)(e=>{if(!s.current)return;let o=t.find(e=>e.id===s.current);o&&m(e.currentTarget.value.toUpperCase(),o.id)},[t,m]);return(0,n.jsxs)(L.K,{w:"100%",spacing:3,children:[(0,n.jsxs)(V.g,{borderRadius:"md",color:"gray.800",border:"1px solid",borderColor:"gray.300",align:"start",justify:"flex-start",p:1,children:[t.length>0&&(0,n.jsx)(X.E,{children:t.map(e=>(0,n.jsx)(em,{color:e,onInputChange:p,onClick:()=>d(e),onRemoveClick:()=>{o({type:"REMOVE_COLOR",data:{id:e.id}})}},e.id))}),(0,n.jsxs)(q.B,{css:{"--inputLeftElementPadding":"2rem"},children:[(0,n.jsx)(Z.g,{pl:"var(--inputLeftElementPadding)",border:"none",minH:10,fontWeight:"500",placeholder:"Type any color. Press enter to add.",value:a,onChange:e=>{l(e.target.value)},onKeyDown:e=>{"Enter"===e.key&&a.trim().length>0&&(e.preventDefault(),u())}}),(0,n.jsx)(J.Z,{w:"var(--inputLeftElementPadding)",pointerEvents:"none",children:(0,n.jsx)(U.W,{color:"gray.300"})}),(0,n.jsx)($.z,{size:"sm",minH:10,ml:2,isDisabled:!a||0===a.trim().length,onClick:u,children:"Add"})]})]}),(0,n.jsx)(es.NZ,{children:"Color vibe"}),(0,n.jsx)(X.E,{p:1,children:ei.map(e=>{let r=t.find(t=>t.value===e),s=!!r;return(0,n.jsx)(eu,{suggestion:e,isSelected:s,onClick:()=>{s?o({type:"REMOVE_COLOR",data:{id:r.id}}):o({type:"ADD_COLOR",data:{color:{id:(0,f.x0)(5),value:e,type:"vibe"}}})}},e)})}),(0,n.jsx)(es.NZ,{children:"Color palette"}),(0,n.jsxs)(X.E,{p:1,spacing:1,align:"center",children:[ec.map(e=>{let{title:r,icon:s}=e,a=t.find(e=>e.value===r),l=!!a;return(0,n.jsx)(es.kH,{placement:"top",label:r,children:(0,n.jsx)(Q.xu,{as:ee.h,variant:"ghost",isActive:l,icon:(0,n.jsx)(et.E,{src:s.src,...l?{border:"1px solid",borderColor:"blackAlpha.600",borderRadius:"4px"}:{},height:8,width:8,transitionProperty:"common",transitionDuration:"normal"}),"aria-label":r,onClick:()=>{l?o({type:"REMOVE_COLOR",data:{id:a.id}}):o({type:"ADD_COLOR",data:{color:{id:(0,f.x0)(5),value:r,type:"palette"}}})},size:"lg"})},r)}),(0,n.jsxs)(Q.xu,{pos:"relative",children:[(0,n.jsx)($.z,{leftIcon:(0,n.jsx)(er.G,{icon:en.r8p}),onClick:h,size:"sm",children:"add a color"}),(0,n.jsx)(eo.I,{type:"color",position:"absolute",inset:0,visibility:"hidden",pointerEvents:"none",ref:c,value:"#000000",h:"100%",onInput:p})]})]}),(0,n.jsx)($.z,{alignSelf:"flex-end",onClick:r,minW:32,size:"sm",minH:8,children:"Next"})]})},ex=e=>{let{description:t,dispatch:o,onSubmit:r}=e;return(0,n.jsxs)(L.K,{w:"100%",spacing:3,children:[(0,n.jsx)(Z.g,{minH:"40px",fontWeight:"500",borderRadius:"md",placeholder:"e.g. I want serif fonts, related to Education",bgColor:"white",color:"gray.800",value:t,onChange:e=>{o({type:"SET_DESCRIPTION",data:{description:e.target.value}})}}),(0,n.jsx)($.z,{alignSelf:"flex-end",onClick:r,minW:32,size:"sm",variant:"solid",children:"Generate"})]})};var ef=o(46152),eb=o.n(ef);let ey=e=>{let{dispatch:t,onSubmit:o,toneWords:r}=e,[s,a]=(0,i.useState)(6),[l,c]=(0,i.useState)(""),d=(0,i.useMemo)(()=>eb()(el),[]),u=(0,i.useCallback)(()=>{t({type:"ADD_TONE_WORD",data:{toneWord:{id:(0,f.x0)(5),value:l}}}),c("")},[t,l,c]),h=s<d.length;return(0,n.jsxs)(L.K,{w:"100%",spacing:3,children:[(0,n.jsxs)(V.g,{borderRadius:"md",color:"gray.800",border:"1px solid",borderColor:"gray.300",align:"start",justify:"flex-start",p:1,children:[r.length>0&&(0,n.jsx)(X.E,{children:r.map(e=>(0,n.jsxs)(eh.Vp,{onClick:()=>{},children:[(0,n.jsx)(eh.Sn,{children:e.value}),(0,n.jsx)(eh.SD,{onClick:()=>{t({type:"REMOVE_TONE_WORD",data:{id:e.id}})}})]},e.id))}),(0,n.jsxs)(q.B,{w:"100%",children:[(0,n.jsx)(Z.g,{border:"none",minH:10,fontWeight:"500",borderRadius:"md",placeholder:"Type any tone. Press enter to add.",bgColor:"white",color:"gray.800",value:l,onCh
1ange:e=>{c(e.target.value)},onKeyDown:e=>{"Enter"===e.key&&l.trim().length>0&&(e.preventDefault(),u())}}),(0,n.jsx)($.z,{size:"sm",minH:10,ml:2,isDisabled:!l||0===l.trim().length,onClick:()=>{u()},children:"Add"})]})]}),(0,n.jsxs)(X.E,{p:1,children:[d.slice(0,s).map(e=>{let o=r.find(t=>t.value===e),s=!!o;return(0,n.jsx)(eu,{suggestion:e,isSelected:s,onClick:()=>{s?t({type:"REMOVE_TONE_WORD",data:{id:o.id}}):t({type:"ADD_TONE_WORD",data:{toneWord:{id:(0,f.x0)(5),value:e}}})}},e)}),h&&(0,n.jsx)($.z,{alignSelf:"flex-end",size:"sm",variant:"ghost",colorScheme:"blackAlpha",leftIcon:(0,n.jsx)(er.G,{icon:en.r8p}),onClick:()=>{let e=Math.min(s+3,d.length);a(Math.max(e))},children:"Show more suggestions"})]}),(0,n.jsx)($.z,{alignSelf:"flex-end",onClick:o,minW:32,size:"sm",children:"Next"})]})},ej=e=>{let t=e.length,o=e.map(e=>e.value).join(", ");return 0===t?"Sounds like you're open to any color.":1===t?"".concat(o," is a great choice!"):"".concat(o," seem like a great combo")},eC=e=>{let{state:t,dispatch:o,onGenerateClick:s}=e,{chatData:a,status:l}=t,{chatStep:c,colors:d,toneWords:u,description:h}=a,g=(0,i.useRef)(null);(0,i.useEffect)(()=>{if(c%2!=0)return;let e=setTimeout(()=>{o({type:"SET_CHAT_STEP",data:{chatStep:c+1}})},1e3);return()=>{clearTimeout(e)}},[c,o]),(0,i.useEffect)(()=>{var e,t;if(!g.current||0===c)return;let o=null===(e=g.current)||void 0===e?void 0:e.querySelector("[data-theme-chat-step-".concat(c,"]"));null==o||null===(t=o.querySelector("input"))||void 0===t||t.focus(),setTimeout(()=>null==o?void 0:o.scrollIntoView({behavior:"smooth"}),100)},[c,l]);let m=(0,i.useCallback)(e=>{o({type:"SET_CHAT_STEP",data:{chatStep:e}})},[o]),p=c>=2&&0===u.length,x=ej(d);return(0,n.jsx)(r.k,{position:"relative",minH:"100%",direction:"column",align:"center",justify:"flex-start",pt:12,w:"100%",children:(0,n.jsxs)(L.K,{justify:"center",spacing:6,w:["100%","100%","container.md"],p:4,py:8,ref:g,children:[(0,n.jsx)(B,{}),c>=0&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(z.K,{"data-theme-chat-step-0":!0,from:"Designer",children:(0,n.jsxs)(N.x,{children:["Hi"," ",(0,n.jsx)("span",{role:"img","aria-label":"wave",children:"\uD83D\uDC4B"})," ","I'm here to help you create a theme. Think of me as your personal designer. I only have 3 questions for you."]})}),(0,n.jsx)(z.K,{"data-theme-chat-step-0":!0,from:"Designer",children:(0,n.jsxs)(N.x,{children:["1. What ",(0,n.jsx)("strong",{children:"tone"})," do you think your readers will relate to?"]})})]}),c>=1&&(0,n.jsx)(G,{"data-theme-chat-step-1":!0,children:(0,n.jsx)(ey,{onSubmit:()=>m(2),dispatch:o,toneWords:u})}),c>=2&&(0,n.jsxs)(n.Fragment,{children:[p&&(0,n.jsx)(z.K,{"data-theme-chat-step-2":!0,from:"Designer",children:(0,n.jsx)(N.x,{children:"Sounds like you're open to any tone of voice."})}),(0,n.jsx)(z.K,{"data-theme-chat-step-2":!0,from:"Designer",children:(0,n.jsxs)(N.x,{children:["2. What ",(0,n.jsx)("strong",{children:"color palette"})," are you interested in?"]})})]}),c>=3&&(0,n.jsx)(G,{"data-theme-chat-step-3":!0,children:(0,n.jsx)(ep,{colors:d,dispatch:o,onSubmit:()=>m(4)})}),c>=4&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(z.K,{"data-theme-chat-step-4":!0,from:"Designer",children:(0,n.jsx)(N.x,{children:x})}),(0,n.jsx)(z.K,{"data-theme-chat-step-4":!0,from:"Designer",children:(0,n.jsx)(N.x,{children:"3. Lastly, anything else we should know?"})})]}),c>=5&&(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(G,{"data-theme-chat-step-5":!0,children:(0,n.jsx)(ex,{description:h,onSubmit:s,dispatch:o})})})]})})};var ev=o(70065),eE=o(5879),eS=o(5632),ek=o(53596),e_=o(46409),ew=o(36651);let eO=e=>{let{theme:t,name:o,dispatch:s}=e,[a,l]=(0,i.useState)(6),[c,{loading:u}]=(0,d.Wu6)(),{currentWorkspace:h}=(0,ew.SE)(),{push:g}=(0,eS.useRouter)(),m=(0,ev.p)(),p=a<ed.length,x=(0,i.useCallback)(async()=>{if(!o)return;let e={...t,workspaceId:null==h?void 0:h.id,name:o},{id:r,archived:s,fonts:a,...l}=e;c({variables:{input:l}}).then(()=>{g(T.oH)}).catch(()=>{m({title:(0,n.jsx)(eE.cC,{id:"y47vGS"}),status:"error",duration:5e3,isClosable:!0})})},[c,h,o,g,t,m]);return(0,n.jsx)(r.k,{direction:"column",align:"center",justify:"flex-start",minH:"100%",w:"100%",p:[8,null,null,12],bg:"gray.100",children:(0,n.jsxs)(L.K,{flex:1,spacing:6,w:"min(100%, 70vw)",children:[(0,n.jsx)(W.X,{as:"h1",size:"xl",children:"Congrats on your new theme!"}),(0,n.jsxs)(r.k,{gap:16,flexWrap:"wrap",children:[(0,n.jsxs)(Q.xu,{flex:1,children:[(0,n.jsx)(e_.Y,{}),(0,n.jsx)(ek.n,{theme:t})]}),(0,n.jsxs)(L.K,{flex:2,spacing:6,p:4,py:8,children:[(0,n.jsx)(z.K,{from:"Designer",children:(0,n.jsx)(N.x,{children:"What would you like to name it?"})}),(0,n.jsx)(G,{children:(0,n.jsxs)(L.K,{w:"100%",spacing:3,p:2,children:[(0,n.jsx)(Z.g,{minH:"40px",fontWeight:"500",borderRadius:"md",placeholder:"Type a name",bgColor:"white",color:"gray.800",value:o,onChange:e=>{s({type:"SET_THEME_NAME",data:{name:e.target.value}})}}),(0,n.jsxs)(X.E,{p:1,children:[ed.slice(0,a).map(e=>
1{let t=o===e;return(0,n.jsx)(eu,{suggestion:e,isSelected:t,onClick:()=>{t?s({type:"SET_THEME_NAME",data:{name:""}}):s({type:"SET_THEME_NAME",data:{name:e}})}},e)}),p&&(0,n.jsx)($.z,{alignSelf:"flex-end",size:"sm",variant:"ghost",colorScheme:"blackAlpha",leftIcon:(0,n.jsx)(er.G,{icon:en.r8p}),onClick:()=>{let e=Math.min(a+3,ed.length);l(Math.max(e))},children:"Show more suggestions"})]})]})})]})]}),(0,n.jsx)($.z,{variant:"solid",isLoading:u,isDisabled:!o,onClick:x,alignSelf:"flex-end",rightIcon:(0,n.jsx)(er.G,{icon:en.eFW}),children:"Save my theme and go to the themes dashboard"})]})})};var eT=o(54933);let eR=e=>{let{step:t,dispatch:o,...r}=e,{push:s}=(0,eS.useRouter)(),a=(0,i.useCallback)(()=>{"input"===t?s("/"):"generate"===t?o({type:"SET_INPUT_STEP",data:{inputStep:"input"}}):"save"===t&&o({type:"SET_INPUT_STEP",data:{inputStep:"generate"}})},[o,s,t]);return(0,n.jsx)(Q.xu,{position:"fixed",top:0,left:0,p:2,...r,children:(0,n.jsx)($.z,{size:"sm",variant:"plain",colorScheme:"orchid",borderRadius:"full",px:4,leftIcon:"input"===t?(0,n.jsx)(er.G,{size:"xs",icon:en.J9Y}):(0,n.jsx)(er.G,{size:"xs",icon:eT.acZ}),onClick:a,children:"Back"})})};var eA=o(69251),eD=o(5200),eF=o(887),eH=o(7636),eI=o(56581),eM=o(29117),eP=o(87205);let eL=e=>{let{onClick:t,isSelected:o,children:r}=e;return(0,n.jsx)(L.K,{flex:"1 0 180px",bgColor:o?"trueblue.100":void 0,textAlign:"left",borderRadius:"md",transitionProperty:"common",transitionDuration:"normal",_focus:{boxShadow:o?void 0:"outline"},_hover:{bgColor:o?"trueblue.100":"trueblue.50"},p:2,cursor:"pointer",onClick:t,position:"relative",children:r})},eN=(0,i.memo)(e=>{var t;let{isSelected:o,onClick:r,accentImagePack:s,accentColor:a}=e,l=null===(t=(0,T.Av)(s))||void 0===t?void 0:t.image;return(0,n.jsx)(eL,{onClick:r,isSelected:o,children:(0,n.jsx)(es.kH,{label:s.id,placement:"top",children:(0,n.jsxs)(Q.xu,{children:[(0,n.jsx)(Q.xu,{bgSize:"cover",bgPos:"center",bgRepeat:"no-repeat",bgImage:(null==l?void 0:l.src)?"url(".concat((0,eP.aN)(l.src,{width:500}),")"):void 0,h:36,borderRadius:"md",border:"1px solid",borderColor:"blackAlpha.300",position:"relative",children:(0,n.jsx)(Q.xu,{position:"absolute",inset:"0",borderRadius:"inherit",backgroundColor:a,mixBlendMode:"color"})}),(0,n.jsx)(eM.U,{justify:"center",alignItems:"center",children:o&&(0,n.jsx)(eI.n,{w:3,h:"auto",mr:1,mt:2,color:"trueblue.700"})})]})})})});var ez=o(98621),eW=o.n(ez);let eB=e=>{let t=Object.entries(e),o={backgroundColor:0,cardColor:1,accentColor:2,headingColor:3,bodyColor:4},n=t.sort((e,t)=>{var n,r;let s=null!==(n=o[e[0]])&&void 0!==n?n:0,a=null!==(r=o[t[0]])&&void 0!==r?r:0;return s-a}),r=n.filter(e=>{let[t,o]=e,n=eW()(o);return n.isValid()});return Object.fromEntries(r)},eK={backgroundColor:"Background",cardColor:"Card",accentColor:"Accent",headingColor:"Heading",bodyColor:"Body"},eY=(0,i.memo)(e=>{let{paletteName:t,colors:o,isSelected:s,onClick:a}=e,l=eB(o),i=Object.values(l);return 0===i.length?null:(0,n.jsx)(eL,{onClick:a,isSelected:s,children:(0,n.jsx)(es.kH,{placement:"top",label:(0,n.jsx)(n.Fragment,{children:Object.entries(l).map(e=>{let[t,o]=e;return(0,n.jsxs)(r.k,{alignItems:"center",mb:2,children:[(0,n.jsx)(Q.xu,{w:4,h:4,borderRadius:"md",bgColor:o,mr:2,border:"1px solid",borderColor:"blackAlpha.300"}),(0,n.jsxs)(N.x,{children:[eK[t]," (",o,")"]})]},t)})}),children:(0,n.jsxs)(Q.xu,{children:[(0,n.jsx)(r.k,{h:16,borderRadius:"md",overflow:"hidden",border:"1px solid",borderColor:"blackAlpha.300",children:i.map(e=>(0,n.jsx)(Q.xu,{flex:1,bgColor:e},e))}),(0,n.jsxs)(eM.U,{spacing:2,alignItems:"center",children:[(0,n.jsx)(N.x,{size:"sm",color:s?"trueblue.700":void 0,children:t}),s&&(0,n.jsx)(eI.n,{w:3,h:"auto",mr:1,color:"trueblue.700"})]})]})})})}),eG=(0,i.memo)(e=>{let{isSelected:t,onClick:o,fonts:r}=e;return(0,n.jsx)(eL,{onClick:o,isSelected:t,children:(0,n.jsx)(es.kH,{label:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(N.x,{children:["Heading font: ",r.headingFont]}),(0,n.jsxs)(N.x,{children:["Body font: ",r.bodyFont]})]}),placement:"top",children:(0,n.jsxs)(Q.xu,{children:[(0,n.jsxs)(L.K,{bg:"white",p:3,border:"1px solid",borderColor:"blackAlpha.400",borderRadius:"md",children:[(0,n.jsx)(W.X,{size:"md",fontFamily:'"'.concat(r.headingFont,'"'),noOfLines:1,children:r.headingFont}),(0,n.jsx)(N.x,{fontSize:"sm",fontFamily:'"'.concat(r.bodyFont,'"'),children:r.bodyFont})]}),(0,n.jsx)(eM.U,{justify:"center",alignItems:"center",children:t&&(0,n.jsx)(eI.n,{w:3,h:"auto",mr:1,mt:2,color:"trueblue.700"})})]})})})}),eU=e=>{let{heading:t,children:o}=e;return(0,n.jsxs)(L.K,{children:[(0,n.jsx)(W.X,{as:"h3",size:"md",children:t}),o]})},eV="theme-editor-root",eX=e=>{let{state:t,dispatch:o,fonts:s,onLoadMoreClick:a,allThemeFonts:l,accentImagePacks:c}=e,{suggestions:d,themeSelections:u,theme:h,status:g}=t,m=(0,i.useCallback)(e=>{o({type:"SET_THEME_COLORS",data:{colors:e}})}
1,[o]),p=(0,i.useCallback)(e=>{o({type:"SET_THEME_FONTS",data:{fonts:e,allThemeFonts:l}})},[o,l]),x=(0,i.useCallback)(e=>{o({type:"SET_THEME_ACCENT_IMAGE_PACK",data:{accentImagePack:e}})},[o]),[f,b]=(0,i.useState)();(0,i.useEffect)(()=>{null==f||f.commands.updateThemeAccentImages(h.config.accentBackgrounds,!0)},[f,h.config.accentBackgrounds]);let y=(0,i.useMemo)(()=>(0,eF.y)(),[]);return(0,n.jsxs)(r.k,{w:"100%",bg:"gray.100",h:"100vh",direction:"column",children:[(0,n.jsx)(eD.J,{fonts:s}),(0,n.jsxs)(r.k,{gap:4,flex:"1 1 auto",minH:"0",children:[(0,n.jsxs)(Q.xu,{overflowY:"auto",flex:"3",children:[(0,n.jsx)(e_.Y,{}),(0,n.jsx)(Q.xu,{css:{"--editor-width":"100%"},overflowX:"hidden",className:eV,sx:{".document-content":{zoom:.75}},children:(0,n.jsx)(eH.f,{initialContent:y,theme:h,scrollingParentSelector:".".concat(eV),onCreate:e=>{let{editor:t}=e;return b(t)}})})]}),(0,n.jsxs)(L.K,{spacing:4,p:4,flex:"4",overflowY:"auto",children:[(0,n.jsxs)(L.K,{children:[(0,n.jsx)(W.X,{as:"h2",size:"lg",mb:4,children:"Results"}),(0,n.jsx)(N.x,{children:"Here are some combos we think would work well with your vision."}),(0,n.jsx)(N.x,{children:"Choose an item from each row to build your theme, or regenerate options."})]}),(0,n.jsx)(eU,{heading:"Color palette",children:(0,n.jsxs)(eA.r,{templateColumns:"minmax(0px, 4fr) 4em",gap:4,py:2,children:[(0,n.jsx)(r.k,{gap:2,overflow:"auto",py:2,children:d.colors.values.map(e=>{let t=!!(u&&u.colorPaletteId===e.id),{name:o,id:r,...s}=e;return(0,n.jsx)(eY,{colors:s,paletteName:o,isSelected:t,onClick:()=>m(e)},r)})}),(0,n.jsx)($.z,{alignSelf:"center",isLoading:"loading"===g.colors,onClick:()=>a("colors"),children:"More"})]})}),(0,n.jsx)(eU,{heading:"Font pairings",children:(0,n.jsxs)(eA.r,{templateColumns:"minmax(0px, 4fr) 4em",gap:4,py:2,children:[(0,n.jsx)(r.k,{gap:2,overflow:"auto",py:2,children:d.fonts.values.map(e=>{let t=!!(u&&u.fontPairingId===e.id);return(0,n.jsx)(eG,{fonts:e,isSelected:t,onClick:()=>p(e)},e.id)})}),(0,n.jsx)($.z,{alignSelf:"center",isLoading:"loading"===g.fonts,onClick:()=>a("fonts"),children:"More"})]})}),(0,n.jsx)(eU,{heading:"Accent images",children:(0,n.jsx)(eA.r,{templateColumns:"minmax(0px, 4fr) 4em",gap:4,py:2,children:(0,n.jsx)(r.k,{gap:2,overflow:"auto",py:2,children:c.map(e=>{if(!e.config.accentBackgrounds)return null;let o=e.id==u.accentImagePackId;return(0,n.jsx)(eN,{accentImagePack:e,accentColor:t.theme.accentColor,isSelected:o,onClick:()=>x(e)},e.id)})})})}),(0,n.jsx)($.z,{variant:"solid",position:"fixed",bottom:8,right:8,rightIcon:(0,n.jsx)(er.G,{icon:en.eFW}),onClick:()=>o({type:"START_THEME_SAVE"}),children:"Next"})]})]})]})},eq=()=>{let{loadMoreFontsOrColors:e,state:t,fonts:o,allThemeFonts:i,accentImagePacks:c,dispatch:d,generateThemeFromPrompt:u}=H(),{inputStep:h,status:g}=t,m="loading"===g.generate;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.k,{minH:"100%",children:[(0,n.jsx)(s.xB,{styles:{html:{height:"100%"},body:{height:"100%"}}}),"input"===h&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.t,{flexProps:{position:"fixed"}}),m&&(0,n.jsx)(l.r,{}),!m&&(0,n.jsx)(eC,{state:t,dispatch:d,onGenerateClick:u})]}),"generate"===h&&!m&&(0,n.jsx)(eX,{state:t,fonts:o,dispatch:d,onLoadMoreClick:e,allThemeFonts:i,accentImagePacks:c}),"save"===h&&!m&&(0,n.jsx)(eO,{dispatch:d,name:t.themeName,theme:t.theme})]}),(0,n.jsx)(eR,{step:h,dispatch:d})]})}},54680:function(e,t,o){o.d(t,{bo:function(){return i},dn:function(){return l},g5:function(){return c}});var n=o(2784),r=o(31490),s=o(93202),a=o(42111);let l=e=>{let t=(0,a.ye)("openAiStatus"),[o,s]=(0,n.useState)("input"),[l,i]=(0,n.useState)(e),[c,d]=(0,n.useState)(),u=(0,n.useMemo)(()=>(0,r.nZ)(),[]);return{step:o,setStep:s,generateFormat:l,setGenerateFormat:i,selectedTheme:c,openAiStatus:t,setSelectedTheme:d,interactionId:u}},i=()=>{let{data:e,loading:t}=(0,s.BCl)({variables:{workspaceId:null,archived:!1},fetchPolicy:"cache-first",nextFetchPolicy:"cache-only"}),o=(0,n.useMemo)(()=>(null==e?void 0:e.themes)||[],[e]);return{themes:o,isThemesLoading:t}},c=()=>{let e=(0,a.ye)("azureOpenAI")?s.nyn.Azure:s.nyn.Openai;return e}},4425:function(e,t,o){o.d(t,{n:function(){return n}});let n=()=>{let e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);let t=document.createElement("div");e.appendChild(t);let o=e.offsetWidth-t.offsetWidth;return e.parentNode.removeChild(e),o}},67422:function(e,t,o){o.d(t,{K:function(){return h}});var n=o(52322),r=o(38035),s=o(50019),a=o(47443),l=o(52929),i=o(56453),c=o(75397),d=o(38045);let u=(0,d.E)(r.k),h=e=>{let{children:t,from:o="Designer",warning:r=!1,cardStyleOverrides:d,error:h=!1,...g}=e,m=(0,s.ff)("orchid.400","blue.700"),p=(0,s.ff)("trueblue.50","sunglow.700"),x=(0,s.ff)("red.100","red.500"),f="User"===o,b=f?{bg:m,borderBottomRightRadius:0,color:"white",...d}:{bg:r?void 0:h?x:p,borderBottomLeftRadius:0,...d};return(0,n.jsx)(u,{justify:f?"flex-end":"flex-start",initial:{opacity:0,translateX:-20}
1,animate:{opacity:1,translateX:0},...g,children:r?(0,n.jsxs)(a.b,{status:"warning",borderColor:"orange.200",borderWidth:"1px",fontSize:"inherit",...b,children:[(0,n.jsx)(l.z,{}),t]}):(0,n.jsx)(i.Z,{size:"sm",shadow:"sm",borderRadius:"xl",variant:"filled",minH:0,borderColor:h?"red.200":"blackAlpha.200",...b,children:(0,n.jsx)(c.e,{py:2,px:2,children:t})})})}}}]); 2//# sourceMappingURL=6134.c44cf0ff689945b4.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.