@pickaxeproject/react 0.0.12 → 0.0.14

package/dist/esm/components/Pickaxe/Form/Questions/Document.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../../_virtual/_tslib.js";import{jsxs as s,jsx as o,Fragment as i}from"react/jsx-runtime";import{useState as a,useRef as t}from"react";import{usePickaxeContext as n}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useDocument as r}from"../../Addons/Document/hooks/useDocument.js";import{allowedFileMimeTypes as l,allowedImageMimeTypes as c}from"../../../../common/documents.js";import d from"../../../Icons/attach.svg.js";import m from"../../../Icons/check.svg.js";import p from"../../../Icons/x.svg.js";import b from"../../../Core/ErrorAlert.js";import u from"../../Addons/Document/List.js";import f from"../../../../common/cn.js";const h=({field:h,update:g})=>{const{colors:j}=n(),{documentError:v,websiteLink:y,isUploading:k,isImageUploadAllowed:N,setDocumentError:x,setWebsiteLink:w,onFileUpload:O,onWebsiteUpload:C}=r({onQuestionChange:e=>{g(Object.assign(Object.assign({},h),e))}}),[D,A]=a(!1),E=t(null);return s("div",Object.assign({className:"flex flex-col gap-y-1"},{children:[s("div",Object.assign({className:"flex flex-col gap-y-2"},{children:[s("div",Object.assign({className:"flex items-center gap-2"},{children:[o("p",Object.assign({className:"text-sm font-semibold opacity-70"},{children:h.main})),h.isRequired&&o("span",Object.assign({className:"select-none font-semibold",style:{color:j.error}},{children:"*"}))]})),s("div",Object.assign({className:"flex flex-col gap-y-2"},{children:[o("input",{ref:E,type:"file",accept:[...l,...N?c:[]].join(", "),id:h.id,hidden:!0,className:"hidden",onChange:s=>e(void 0,void 0,void 0,(function*(){yield O(Array.from(s.target.files||[])),s.target.value=""})),disabled:k}),s("div",Object.assign({className:f("flex items-center justify-between rounded-sm border border-transparent bg-white py-3 pl-4 pr-3 shadow duration-300 hover:border-black/25",D&&"border-black/70 shadow-none hover:border-black/70")},{children:[o("input",{type:"text",value:y,className:"w-full outline-none",placeholder:"Paste a website/video link or drag a file",onChange:e=>w(e.target.value),onDrop:s=>e(void 0,void 0,void 0,(function*(){s.preventDefault(),yield O(Array.from(s.dataTransfer.files||[]))})),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),C(y))},onFocus:()=>A(!0),onBlur:()=>A(!1)}),o("div",Object.assign({className:"flex items-center gap-3 pl-4"},{children:y.length>0?s(i,{children:[o("button",Object.assign({className:"outline-none disabled:cursor-wait disabled:opacity-80",disabled:k,onClick:()=>C(y)},{children:o(m,{className:"h-5 w-5 shrink-0",style:{color:j.accent}})})),o("button",Object.assign({className:"outline-none disabled:cursor-wait disabled:opacity-80",disabled:k,onClick:()=>{w(""),x("")}},{children:o(p,{className:"h-6 w-6 shrink-0",style:{color:j.accent}})}))]}):o("button",Object.assign({className:"outline-none disabled:cursor-wait disabled:opacity-80",disabled:k,onClick:()=>{var e;null===(e=E.current)||void 0===e||e.click()}},{children:o(d,{className:"h-6 w-6 shrink-0",style:{color:j.accent}})}))}))]}))]}))]})),o(u,{className:"mt-2"}),v&&o(b,{error:v,className:"mt-3"})]}))};export{h as default};
+import{__awaiter as e}from"../../../../_virtual/_tslib.js";import{jsxs as s,jsx as o,Fragment as t}from"react/jsx-runtime";import{useState as i,useRef as a}from"react";import{usePickaxeContext as n}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useStyleInput as r}from"../../../../hooks/studio/useStyleInput.js";import{useDocument as l}from"../../Addons/Document/hooks/useDocument.js";import{allowedFileMimeTypes as c,allowedImageMimeTypes as d}from"../../../../common/documents.js";import m from"../../../Icons/attach.svg.js";import p from"../../../Icons/check.svg.js";import u from"../../../Icons/x.svg.js";import b from"../../../Core/ErrorAlert.js";import f from"../../Addons/Document/List.js";import h from"../../../../common/cn.js";const g=({field:g,update:j})=>{const{colors:v}=n(),{documentError:y,websiteLink:k,isUploading:N,isImageUploadAllowed:x,setDocumentError:w,setWebsiteLink:O,onFileUpload:C,onWebsiteUpload:D}=l({onQuestionChange:e=>{j(Object.assign(Object.assign({},g),e))}}),[A,I]=i(!1),E=a(null),U=r();return s("div",Object.assign({className:"flex flex-col gap-y-1"},{children:[s("div",Object.assign({className:"flex flex-col gap-y-2"},{children:[s("div",Object.assign({className:"flex items-center gap-2"},{children:[o("p",Object.assign({className:"text-sm font-semibold opacity-70"},{children:g.main})),g.isRequired&&o("span",Object.assign({className:"select-none font-semibold",style:{color:v.error}},{children:"*"}))]})),s("div",Object.assign({className:"flex flex-col gap-y-2"},{children:[o("input",{ref:E,type:"file",accept:[...c,...x?d:[]].join(", "),id:g.id,hidden:!0,className:"hidden",onChange:s=>e(void 0,void 0,void 0,(function*(){yield C(Array.from(s.target.files||[])),s.target.value=""})),disabled:N}),s("div",Object.assign({className:h("flex items-center justify-between rounded-sm border border-transparent bg-white py-3 pl-4 pr-3 shadow duration-300 hover:border-black/25",A&&"border-black/70 shadow-none hover:border-black/70"),style:U},{children:[o("input",{type:"text",value:k,className:"w-full outline-none bg-transparent",placeholder:"Paste a website/video link or drag a file",onChange:e=>O(e.target.value),onDrop:s=>e(void 0,void 0,void 0,(function*(){s.preventDefault(),yield C(Array.from(s.dataTransfer.files||[]))})),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),D(k))},onFocus:()=>I(!0),onBlur:()=>I(!1)}),o("div",Object.assign({className:"flex items-center gap-3 pl-4"},{children:k.length>0?s(t,{children:[o("button",Object.assign({className:"outline-none disabled:cursor-wait disabled:opacity-80",disabled:N,onClick:()=>D(k)},{children:o(p,{className:"h-5 w-5 shrink-0",style:{color:v.accent}})})),o("button",Object.assign({className:"outline-none disabled:cursor-wait disabled:opacity-80",disabled:N,onClick:()=>{O(""),w("")}},{children:o(u,{className:"h-6 w-6 shrink-0",style:{color:v.accent}})}))]}):o("button",Object.assign({className:"outline-none disabled:cursor-wait disabled:opacity-80",disabled:N,onClick:()=>{var e;null===(e=E.current)||void 0===e||e.click()}},{children:o(m,{className:"h-6 w-6 shrink-0",style:{color:v.accent}})}))}))]}))]}))]})),o(f,{className:"mt-2"}),y&&o(b,{error:y,className:"mt-3"})]}))};export{g as default};

package/dist/esm/components/Pickaxe/Form/Questions/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o}from"react";import{useResponseContext as a}from"../../../../hooks/pickaxe/useResponseContext.js";import{encode as s}from"@nem035/gpt-3-encoder";import r from"../../../Core/Textarea.js";import n from"../../../../common/cn.js";const c=({field:c,update:i})=>{const{setError:l}=a(),[m,p]=o(!1);return e("div",Object.assign({className:"group relative flex flex-col gap-y-1"},{children:[e("div",Object.assign({className:"flex flex-col gap-y-2"},{children:[e("div",Object.assign({className:"flex items-center gap-2"},{children:[t("p",Object.assign({className:"text-[14px] font-semibold text-black/70"},{children:c.main})),c.isRequired&&t("span",Object.assign({className:"select-none font-semibold text-c-red"},{children:"*"}))]})),t(r,{className:n("rounded-sm border border-transparent bg-white px-4 py-3 shadow duration-300 hover:border-black/25 focus:border-black/70 focus:shadow-none",c.maxLength<10&&"max-w-[400px]"),placeholder:c.example,rows:c.maxLength>500?3:1,value:c.input,tabIndex:c.order,onChange:e=>{l("");const t=s(e).length;i(Object.assign(Object.assign({},c),{input:e,length:t}))},onFocus:()=>p(!0),onBlur:()=>p(!1)})]})),t("div",Object.assign({className:"pointer-events-none absolute bottom-0 right-0 p-1 px-2"},{children:e("p",Object.assign({className:n("text-[14px] font-semibold text-black/20 opacity-0 group-hover:opacity-100 group-hover:duration-200",c.length>c.maxLength&&"text-c-red opacity-100",m&&"opacity-100")},{children:[c.length,"/",c.maxLength]}))}))]}))};export{c as default};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as t}from"react";import{usePickaxeContext as s}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useResponseContext as r}from"../../../../hooks/pickaxe/useResponseContext.js";import{useStyleInput as a}from"../../../../hooks/studio/useStyleInput.js";import{encode as n}from"@nem035/gpt-3-encoder";import i from"../../../Core/Textarea.js";import c from"../../../../common/cn.js";const l=({field:l,update:m})=>{const{colors:p}=s(),{setError:d}=r(),[g,h]=t(!1),x=a();return e("div",Object.assign({className:"group relative flex flex-col gap-y-1"},{children:[e("div",Object.assign({className:"flex flex-col gap-y-2"},{children:[e("div",Object.assign({className:"flex items-center gap-2"},{children:[o("p",Object.assign({className:"text-sm font-semibold opacity-70"},{children:l.main})),l.isRequired&&o("span",Object.assign({className:"select-none font-semibold",style:{color:p.error}},{children:"*"}))]})),o(i,{className:c("rounded-sm border border-transparent bg-white px-4 py-3 shadow duration-300 hover:border-black/25 focus:border-black/70 focus:shadow-none",l.maxLength<10&&"max-w-[400px]"),style:x,placeholder:l.example,rows:l.maxLength>500?3:1,value:l.input,tabIndex:l.order,onChange:e=>{d("");const o=n(e).length;m(Object.assign(Object.assign({},l),{input:e,length:o}))},onFocus:()=>h(!0),onBlur:()=>h(!1)})]})),o("div",Object.assign({className:"pointer-events-none absolute bottom-0 right-0 p-1 px-2"},{children:e("p",Object.assign({className:c("text-[14px] font-semibold opacity-20 opacity-0 group-hover:opacity-100 group-hover:duration-200",l.length>l.maxLength&&"text-c-red opacity-100",g&&"opacity-100")},{children:[l.length,"/",l.maxLength]}))}))]}))};export{l as default};

package/dist/esm/components/Pickaxe/Form/Questions/Option.js

@@ -1 +1 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{usePickaxeContext as t}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useResponseContext as i}from"../../../../hooks/pickaxe/useResponseContext.js";import n from"./Dropdown.js";const a=({field:a,update:c})=>{const{colors:r}=t(),{setError:o}=i();return e("div",Object.assign({className:"flex flex-col gap-y-3"},{children:[e("div",Object.assign({className:"flex items-center gap-2"},{children:[s("p",Object.assign({className:"text-sn font-semibold opacity-70"},{children:a.main})),a.isRequired&&s("span",Object.assign({className:"select-none font-semibold",style:{color:r.error}},{children:"*"}))]})),s(n,Object.assign({id:a.id.replace(/[^A-Za-z]+/g,""),value:a.input,placeholder:"Select an option",closeOnSelect:!1,maxToken:a.maxLength,isDropdown:a.isDropdown},{children:s("div",Object.assign({className:"flex flex-col items-start gap-y-3"},{children:a.example.split("S3P32X").map(((t,i)=>e("div",Object.assign({className:"flex items-center gap-x-2 hover:cursor-pointer",onClick:()=>{return e=t,o(""),void c(Object.assign(Object.assign({},a),{input:e}));var e}},{children:[s("div",Object.assign({className:"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-black bg-white"},{children:a.input===t&&s("div",{className:"h-4 w-4 rounded-full",style:{backgroundColor:r.accent}})})),s("p",Object.assign({className:"select-none max-lg:text-sm"},{children:t}))]}),i)))}))}))]}))};export{a as default};
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{usePickaxeContext as t}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useResponseContext as i}from"../../../../hooks/pickaxe/useResponseContext.js";import a from"./Dropdown.js";const n=({field:n,update:c})=>{const{colors:r}=t(),{setError:o}=i();return e("div",Object.assign({className:"flex flex-col gap-y-3"},{children:[e("div",Object.assign({className:"flex items-center gap-2"},{children:[s("p",Object.assign({className:"text-sm font-semibold opacity-70"},{children:n.main})),n.isRequired&&s("span",Object.assign({className:"select-none font-semibold",style:{color:r.error}},{children:"*"}))]})),s(a,Object.assign({id:n.id.replace(/[^A-Za-z]+/g,""),value:n.input,placeholder:"Select an option",closeOnSelect:!1,maxToken:n.maxLength,isDropdown:n.isDropdown},{children:s("div",Object.assign({className:"flex flex-col items-start gap-y-3"},{children:n.example.split("S3P32X").map(((t,i)=>e("div",Object.assign({className:"flex items-center gap-x-2 hover:cursor-pointer",onClick:()=>{return e=t,o(""),void c(Object.assign(Object.assign({},n),{input:e}));var e}},{children:[s("div",Object.assign({className:"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-black bg-white"},{children:n.input===t&&s("div",{className:"h-4 w-4 rounded-full",style:{backgroundColor:r.accent}})})),s("p",Object.assign({className:"select-none max-lg:text-sm"},{children:t}))]}),i)))}))}))]}))};export{n as default};

package/dist/esm/components/Pickaxe/Form/Questions/Submit.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../../_virtual/_tslib.js";import{jsxs as o,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{usePickaxeContext as r}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useResponseContext as i}from"../../../../hooks/pickaxe/useResponseContext.js";import{useSubmit as n}from"../../../../hooks/pickaxe/useSubmit.js";import{useSubmitResult as l}from"../../../../hooks/pickaxe/useSubmitResult.js";import{useDocument as d}from"../../Addons/Document/hooks/useDocument.js";import{useScroll as a}from"../../Addons/Scroll/hooks/useScroll.js";import{streamer as c}from"../../../../common/api/streamer.js";import{extractUrlsFromText as u}from"../../../../common/utils.js";import{encode as m}from"@nem035/gpt-3-encoder";import p from"../../../../common/error.js";const f=({questions:f})=>{const{formId:h,pickaxe:g,isShowHistory:b,setIsShowHistory:x}=r(),{status:w,setResponse:y,setStatus:j,setError:I}=i(),{documents:k,websiteLink:v,isUploading:S,onWebsiteUpload:q,setDocumentError:E}=d(),{isScrollIncreasing:O,scrollToContainer:R,scrollToBottom:U,scrollStart:A,scrollEnd:C}=a(),P=n(),D=l(),[L,N]=s(!1);return o("div",Object.assign({className:"mt-4 flex flex-wrap gap-2"},{children:[t("button",Object.assign({onClick:()=>e(void 0,void 0,void 0,(function*(){var e;try{if(S||L||"fetching"===w||"streaming"===w)return;E("");const o="enduserupload"===(null==g?void 0:g.documentuploadtype),t=f.some((e=>"userinput:documentupload"===e.id&&e.isRequired)),s=k.filter((e=>"finished"===e.status)),r=u(v),i=k.map((e=>e.name)),n=r.filter((e=>!i.includes(e)));if(n.length){const e=n[n.length-1],o=yield q(e);o&&(s.push(o),N(!0),yield new Promise((e=>setTimeout(e,5e3))),N(!1))}else if(t&&o&&!s.length)return void E("Please paste a valid website/video link or drag a file to add to the knowledge base.");I("");const l=["Multiple Choice","Checkbox"];for(const e of f){if(m(e.input).length>e.maxLength&&!l.includes(e.type))throw new Error("One or more of your responses is too long!");if(e.isRequired&&!e.input.trim()&&"userinput:documentupload"!==e.id)throw new Error("You must fill out all required fields.")}const d=s.length?s[s.length-1]:null;let a={};f.forEach((e=>a=Object.assign(Object.assign({},a),{[e.id]:"Knowledge Upload"===e.type||e.id.includes("documentupload")?(null==d?void 0:d.name)||"":e.input}))),j("fetching");const{success:p,responseId:b,data:x,usedDocumentIds:R,rawUserInput:C,error:T}=yield P.mutateAsync(Object.assign({formId:h,valueObj:a},o&&d&&{documentId:null!==(e=d.documentId)&&void 0!==e?e:""}));if(!p)throw new Error(null!=T?T:"An error occurred, please try again.");A();const H=(yield c({formId:h,responseId:b,data:x})).body;if(!H)throw new Error("Streaming error");const B=H.getReader(),W=new TextDecoder;let Y="",_=!0;y(null);const F=f.map((e=>({id:e.id,question:e.main,answer:e.input})));for(;_;){const{value:e,done:o}=yield B.read();_=!o;if(Y+=W.decode(e),Y)j("streaming"),y({formId:h,responseId:b,documentIds:R,messages:[],questions:F,questionPrompt:C,questionResponse:Y,createdAt:new Date}),O&&U();else if(!_&&!Y)throw new Error("Server error")}Y&&(U(),j("idle"),yield D.mutateAsync({formId:h,responseId:b,documentIds:R,studioUserId:"USER68RFBSHU4YS2I4L",questions:F,questionPrompt:C,questionResponse:Y}))}catch(e){let o=p(e);o.includes("Unexpected token 'A',")&&(o="Oops! We're experiencing high traffic at the moment. Please try again later."),I(o),N(!1),R()}finally{j("idle"),C()}})),tabIndex:f.length+1,className:"flex h-[48px] w-full max-w-[176px] items-center justify-center gap-2 rounded-sm bg-c-blue px-4 font-semibold text-white hover:opacity-80 hover:duration-300 disabled:cursor-wait disabled:opacity-60",disabled:S||L||"fetching"===w||"streaming"===w},{children:t("p",Object.assign({className:"font-semibold"},{children:L?"Processing...":S?"Uploading...":"fetching"===w||"streaming"===w?"Loading...":"Submit"}))})),!b&&t("button",Object.assign({tabIndex:f.length+2,className:"flex h-[48px] w-full max-w-[176px] items-center justify-center px-4 font-semibold hover:text-black/70 hover:duration-300",onClick:()=>x(!0)},{children:"See history"}))]}))};export{f as default};
+import{__awaiter as e}from"../../../../_virtual/_tslib.js";import{jsxs as o,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{usePickaxeContext as r}from"../../../../hooks/pickaxe/usePickaxeContext.js";import{useResponseContext as i}from"../../../../hooks/pickaxe/useResponseContext.js";import{useSubmit as n}from"../../../../hooks/pickaxe/useSubmit.js";import{useSubmitResult as l}from"../../../../hooks/pickaxe/useSubmitResult.js";import{useDocument as a}from"../../Addons/Document/hooks/useDocument.js";import{useScroll as d}from"../../Addons/Scroll/hooks/useScroll.js";import{streamer as m}from"../../../../common/api/streamer.js";import{extractUrlsFromText as c}from"../../../../common/utils.js";import{encode as u}from"@nem035/gpt-3-encoder";import p from"../../common/PickaxeButton.js";import f from"../../../../common/error.js";const g=({questions:g})=>{const{formId:h,pickaxe:w,isShowHistory:x,setIsShowHistory:k}=r(),{status:y,setResponse:j,setStatus:I,setError:b}=i(),{documents:v,websiteLink:S,isUploading:q,onWebsiteUpload:E,setDocumentError:R}=a(),{isScrollIncreasing:O,scrollToContainer:U,scrollToBottom:P,scrollStart:A,scrollEnd:C}=d(),D=n(),L=l(),[T,B]=s(!1);return o("div",Object.assign({className:"mt-4 flex flex-wrap gap-2"},{children:[t(p,Object.assign({className:"w-full max-w-[176px]",isDisabled:q||T||"fetching"===y||"streaming"===y,onClick:()=>e(void 0,void 0,void 0,(function*(){var e;try{if(q||T||"fetching"===y||"streaming"===y)return;R("");const o="enduserupload"===(null==w?void 0:w.documentuploadtype),t=g.some((e=>"userinput:documentupload"===e.id&&e.isRequired)),s=v.filter((e=>"finished"===e.status)),r=c(S),i=v.map((e=>e.name)),n=r.filter((e=>!i.includes(e)));if(n.length){const e=n[n.length-1],o=yield E(e);o&&(s.push(o),B(!0),yield new Promise((e=>setTimeout(e,5e3))),B(!1))}else if(t&&o&&!s.length)return void R("Please paste a valid website/video link or drag a file to add to the knowledge base.");b("");const l=["Multiple Choice","Checkbox"];for(const e of g){if(u(e.input).length>e.maxLength&&!l.includes(e.type))throw new Error("One or more of your responses is too long!");if(e.isRequired&&!e.input.trim()&&"userinput:documentupload"!==e.id)throw new Error("You must fill out all required fields.")}const a=s.length?s[s.length-1]:null;let d={};g.forEach((e=>d=Object.assign(Object.assign({},d),{[e.id]:"Knowledge Upload"===e.type||e.id.includes("documentupload")?(null==a?void 0:a.name)||"":e.input}))),I("fetching");const{success:p,responseId:f,data:x,usedDocumentIds:k,rawUserInput:U,error:C}=yield D.mutateAsync(Object.assign({formId:h,valueObj:d},o&&a&&{documentId:null!==(e=a.documentId)&&void 0!==e?e:""}));if(!p)throw new Error(null!=C?C:"An error occurred, please try again.");A();const H=(yield m({formId:h,responseId:f,data:x})).body;if(!H)throw new Error("Streaming error");const N=H.getReader(),W=new TextDecoder;let Y="",_=!0;j(null);const F=g.map((e=>({id:e.id,question:e.main,answer:e.input})));for(;_;){const{value:e,done:o}=yield N.read();_=!o;if(Y+=W.decode(e),Y)I("streaming"),j({formId:h,responseId:f,documentIds:k,messages:[],questions:F,questionPrompt:U,questionResponse:Y,createdAt:new Date}),O&&P();else if(!_&&!Y)throw new Error("Server error")}Y&&(P(),I("idle"),yield L.mutateAsync({formId:h,responseId:f,documentIds:k,studioUserId:"USER68RFBSHU4YS2I4L",questions:F,questionPrompt:U,questionResponse:Y}))}catch(e){let o=f(e);o.includes("Unexpected token 'A',")&&(o="Oops! We're experiencing high traffic at the moment. Please try again later."),b(o),B(!1),U()}finally{I("idle"),C()}}))},{children:T?"Processing...":q?"Uploading...":"fetching"===y||"streaming"===y?"Loading...":"Submit"})),!x&&t(p,Object.assign({variant:"transparent-text",className:"w-full max-w-[176px]",onClick:()=>k(!0)},{children:"See history"}))]}))};export{g as default};

package/dist/esm/components/Pickaxe/Form/index.js

@@ -1 +1 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import{usePickaxeContext as i}from"../../../hooks/pickaxe/usePickaxeContext.js";import t from"./Head.js";import l from"./History/index.js";import o from"./NewChat.js";import a from"./Questions/index.js";const r=()=>{const{pickaxe:r}=i();return e("div",Object.assign({className:"flex w-full flex-col items-center px-4 pb-40 max-[899px]:pb-10"},{children:s("div",Object.assign({className:"flex w-full max-w-[700px] flex-col"},{children:[e(t,{}),s("div",Object.assign({className:"flex flex-col gap-y-8 lg:mt-4"},{children:[(null==r?void 0:r.chatflag)?e(o,{}):e(a,{}),e(l,{})]}))]}))}))};export{r as default};
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{usePickaxeContext as t}from"../../../hooks/pickaxe/usePickaxeContext.js";import i from"./Head.js";import l from"./History/index.js";import o from"./NewChat.js";import a from"./Questions/index.js";const r=()=>{const{pickaxe:r}=t();return e("div",Object.assign({className:"flex w-full flex-col items-center pt-12 px-4 pb-40 max-[899px]:pb-10"},{children:s("div",Object.assign({className:"flex w-full max-w-[700px] flex-col"},{children:[e(i,{}),s("div",Object.assign({className:"flex flex-col gap-y-8 lg:mt-4"},{children:[(null==r?void 0:r.chatflag)?e(o,{}):e(a,{}),e(l,{})]}))]}))}))};export{r as default};

package/dist/esm/components/Pickaxe/InfoModal.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{usePickaxeContext as s}from"../../hooks/pickaxe/usePickaxeContext.js";import i from"../Icons/x.svg.js";import l from"../Core/Modal/index.js";import o from"../Core/Modal/Body.js";import a from"../Core/PickaxeIcon.js";const c=({isOpen:c,onChangeIsOpen:n})=>{const{pickaxe:r}=s();return e(l,Object.assign({isOpen:c,onChange:n},{children:t(o,Object.assign({className:"relative flex w-full max-w-[480px] flex-col px-8 py-[26px] max-[767px]:max-w-full",avoidOverflow:!0},{children:[e("div",Object.assign({className:"flex items-start justify-end gap-4"},{children:e("button",Object.assign({className:"outline-none hover:opacity-70 hover:duration-300 active:opacity-100",onClick:()=>n(!1)},{children:e(i,{className:"h-6 w-6 shrink-0"})}))})),e("div",Object.assign({className:"mt-8 flex flex-col items-center"},{children:t("div",Object.assign({className:"flex w-full max-w-[360px] flex-col items-center text-center"},{children:[e(a,{src:null==r?void 0:r.coverphoto,alt:`${null==r?void 0:r.formtitle}'s Profile Picture`,width:90,height:90,className:"h-[90px] w-[90px] rounded-full"}),e("h2",Object.assign({className:"mt-6 text-center text-[18px] font-semibold text-black/70 max-[767px]:text-base"},{children:null==r?void 0:r.formtitle})),e("p",Object.assign({className:"mt-4 font-semilight text-black/70"},{children:null==r?void 0:r.formdescription}))]}))}))]}))}))};export{c as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{usePickaxeContext as i}from"../../hooks/pickaxe/usePickaxeContext.js";import s from"../Icons/x.svg.js";import o from"../Core/Modal/index.js";import l from"../Core/Modal/Body.js";import a from"../Core/PickaxeIcon.js";const c=({isOpen:c,onChangeIsOpen:n})=>{const{pickaxe:r}=i();return e(o,Object.assign({isOpen:c,onChange:n},{children:t(l,Object.assign({className:"relative flex w-full max-w-[480px] flex-col px-8 py-[26px] max-[767px]:max-w-full",avoidOverflow:!0},{children:[e("div",Object.assign({className:"flex items-start justify-end gap-4"},{children:e("button",Object.assign({className:"outline-none hover:opacity-70 hover:duration-300 active:opacity-100",onClick:()=>n(!1)},{children:e(s,{className:"h-6 w-6 shrink-0"})}))})),e("div",Object.assign({className:"mt-8 flex flex-col items-center"},{children:t("div",Object.assign({className:"flex w-full max-w-[360px] flex-col items-center text-center"},{children:[e(a,{src:null==r?void 0:r.coverphoto,alt:`${null==r?void 0:r.formtitle}'s Profile Picture`,width:90,height:90,className:"h-[90px] w-[90px] rounded-full"}),e("h2",Object.assign({className:"mt-6 text-center text-[18px] font-semibold opacity-70 max-[767px]:text-base"},{children:null==r?void 0:r.formtitle})),e("p",Object.assign({className:"mt-4 font-semilight opacity-70"},{children:null==r?void 0:r.formdescription}))]}))}))]}))}))};export{c as default};

package/dist/esm/components/Pickaxe/Provider.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as o}from"react";import t from"./Addons/Document/Provider.js";import s from"./ResponseProvider.js";const c=r({}),i=({colors:r,children:i})=>{const[a,n]=o(""),[F,d]=o(""),[m,h]=o(null),[l,I]=o(!0),[p,x]=o(!0),[w,f]=o(!1);return e(c.Provider,Object.assign({value:{formId:a,chatId:F,pickaxe:m,colors:Object.assign({primary:"#F6F8FA",text:"#000000",secondary:"#FFFFFF",secondaryText:"#000000",accent:"#228DD7",accentText:"#FFFFFF",error:"#FF0000"},r),isNewChat:l,isShowIceBreaker:p,isShowHistory:w,setFormId:n,setChatId:d,setPickaxe:h,setIsNewChat:I,setIsShowIceBreaker:x,setIsShowHistory:f}},{children:e(s,{children:e(t,{children:i})})}))};export{c as PickaxeContext,i as PickaxeProvider};
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as t}from"react";import o from"./Addons/Document/Provider.js";import s from"./ResponseProvider.js";const i=r({}),c=({styles:r,colors:c,children:n})=>{const[a,d]=t(""),[l,F]=t(""),[m,h]=t(null),[f,y]=t(!0),[I,p]=t(!0),[x,u]=t(!1);return e(i.Provider,Object.assign({value:{formId:a,chatId:l,pickaxe:m,styles:Object.assign({theme:"light",font:"Real Head Pro",fontSize:"md",formFieldStyle:"box",btnStyle:"filled",outlineThickness:1,cornerRadius:4},r),colors:Object.assign({primary:"#F6F8FA",text:"#000000",secondary:"#FFFFFF",secondaryText:"#000000",accent:"#228DD7",accentText:"#FFFFFF",error:"#EF4444"},c),isNewChat:f,isShowIceBreaker:I,isShowHistory:x,setFormId:d,setChatId:F,setPickaxe:h,setIsNewChat:y,setIsShowIceBreaker:p,setIsShowHistory:u}},{children:e(s,{children:e(o,{children:n})})}))};export{i as PickaxeContext,c as PickaxeProvider};

package/dist/esm/components/Pickaxe/common/PickaxeButton.js

@@ -0,0 +1 @@
+import{__rest as t}from"../../../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{usePickaxeContext as r}from"../../../hooks/pickaxe/usePickaxeContext.js";import{useStyleButton as s}from"../../../hooks/studio/useStyleButton.js";import a from"../../Core/Button.js";import e from"../../../common/cn.js";const i=i=>{var{variant:m,className:n}=i,c=t(i,["variant","className"]);const{styles:p}=r(),l=s({variant:m});return o(a,Object.assign({variant:m,className:e("min-h-[48px]",n,("primary"===m||"secondary"===m)&&"hover:opacity-90","outlined"===p.btnStyle&&"hover:opacity-70"),style:l},c))};export{i as default};

package/dist/esm/components/Pickaxe/index.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{usePickaxe as r}from"../../hooks/pickaxe/usePickaxe.js";import{useEffect as t}from"react";import{usePickaxeContext as e}from"../../hooks/pickaxe/usePickaxeContext.js";import{generateId as a}from"../../common/utils.js";import m from"./Addons/Scroll/Provider.js";import i from"./Chat/index.js";import s from"./Form/index.js";import c from"../../common/cn.js";const l=({formId:l,chatId:d,className:n})=>{const{chatId:f,colors:p,setFormId:x,setChatId:h,setPickaxe:j}=e(),k=r();return t((()=>{x(l)}),[l]),t((()=>{"string"==typeof d&&h(d)}),[d]),t((()=>{k.data&&(h(k.data.chatflag?a(15):""),j(k.data))}),[k.data]),o(m,{children:o("div",Object.assign({className:c("relative @container/pickaxe-root flex flex-col flex-grow w-full",n),style:{backgroundColor:p.primary,color:p.text}},{children:o(f?i:s,{})}))})};export{l as Pickaxe};
+import{jsx as o}from"react/jsx-runtime";import{usePickaxe as r}from"../../hooks/pickaxe/usePickaxe.js";import{useEffect as t}from"react";import{usePickaxeContext as e}from"../../hooks/pickaxe/usePickaxeContext.js";import{generateId as a}from"../../common/utils.js";import m from"./Addons/Scroll/Provider.js";import s from"./Chat/index.js";import i from"./Form/index.js";import c from"../../common/cn.js";const l=({formId:l,chatId:d,className:n})=>{const{chatId:f,styles:p,colors:x,setFormId:h,setChatId:k,setPickaxe:j}=e(),u=r();return t((()=>{h(l)}),[l]),t((()=>{"string"==typeof d&&k(d)}),[d]),t((()=>{u.data&&(k(u.data.chatflag?a(15):""),j(u.data))}),[u.data]),u.data?o(m,{children:o("div",Object.assign({className:c("relative @container/pickaxe-root flex flex-col flex-grow w-full h-full",n,"dark"===p.theme&&"dark"),style:{backgroundColor:x.primary,color:x.text}},{children:o(f?s:i,{})}))}):null};export{l as Pickaxe};

package/dist/esm/hooks/studio/useStyleButton.js

@@ -0,0 +1 @@
+import{useMemo as r}from"react";import{usePickaxeContext as t}from"../pickaxe/usePickaxeContext.js";const o=({variant:o="primary"})=>{const{styles:e,colors:n}=t();return r((()=>Object.assign(Object.assign(Object.assign({},"primary"===o&&Object.assign(Object.assign(Object.assign({borderWidth:`${e.outlineThickness}px`},"filled"===e.btnStyle&&{borderColor:n.accent,backgroundColor:n.accent,color:n.accentText}),"outlined"===e.btnStyle&&{color:n.accent,backgroundColor:"transparent",borderColor:n.accent}),"transparent"===e.btnStyle&&{color:n.accent,backgroundColor:"transparent",borderColor:"transparent"})),"secondary"===o&&{backgroundColor:"transparent",color:n.accent}),"transparent-text"===o&&{color:n.accent})),[e,n,o])};export{o as useStyleButton};

package/dist/esm/hooks/studio/useStyleInput.js

@@ -0,0 +1 @@
+import{useMemo as o}from"react";import{usePickaxeContext as r}from"../pickaxe/usePickaxeContext.js";const e=()=>{const{styles:e,colors:t}=r();return o((()=>Object.assign(Object.assign(Object.assign({borderWidth:`${e.outlineThickness}px`,borderRadius:`${e.cornerRadius}px`,background:"transparent"},"minimal"===e.formFieldStyle&&{borderBottomColor:t.secondary,color:t.text}),"box"===e.formFieldStyle&&{borderColor:t.secondary+"AA",color:t.text}),"block"===e.formFieldStyle&&{backgroundColor:t.secondary,color:t.secondaryText})),[e,t])};export{e as useStyleInput};

package/dist/{cjs → esm/src}/components/Pickaxe/Provider.d.ts

@@ -1,6 +1,16 @@
 import type { SetState } from "../../types/common";
 import type { Pickaxe } from "../../types/pickaxe";
+import type { StudioFontSize, StudioFormFieldStyle, StudioButtonStyle } from "../../types/studio";
 import { type ReactNode } from "react";
+export type PickaxeProviderStyles = {
+    theme: "light" | "dark";
+    font: string;
+    fontSize: StudioFontSize;
+    formFieldStyle: StudioFormFieldStyle;
+    btnStyle: StudioButtonStyle;
+    outlineThickness: number;
+    cornerRadius: number;
+};
 export type PickaxeProviderColors = {
     primary: string;
     text: string;
@@ -14,6 +24,7 @@ type PickaxeContextType = {
     formId: string;
     chatId: string;
     pickaxe: Pickaxe | null;
+    styles: PickaxeProviderStyles;
     colors: PickaxeProviderColors;
     isNewChat: boolean;
     isShowIceBreaker: boolean;
@@ -25,10 +36,11 @@ type PickaxeContextType = {
     setIsShowIceBreaker: SetState<boolean>;
     setIsShowHistory: SetState<boolean>;
 };
-interface IPickaxeProviderProps {
+export interface IPickaxeProviderProps {
+    styles?: Partial<PickaxeProviderStyles>;
     colors?: Partial<PickaxeProviderColors>;
     children: ReactNode;
 }
 export declare const PickaxeContext: import("react").Context<PickaxeContextType>;
-export declare const PickaxeProvider: ({ colors, children, }: IPickaxeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PickaxeProvider: ({ styles, colors, children, }: IPickaxeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/src/components/Pickaxe/common/PickaxeButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "../../Core/Button";
+declare const PickaxeButton: ({ variant, className, ...props }: Omit<ButtonProps, "ref">) => import("react/jsx-runtime").JSX.Element;
+export default PickaxeButton;

package/dist/esm/{components → src/components}/Pickaxe/index.d.ts

@@ -3,4 +3,4 @@ export interface PickaxeProps {
     chatId?: string;
     className?: string;
 }
-export declare const Pickaxe: ({ formId: _formId, chatId: _chatId, className, }: PickaxeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pickaxe: ({ formId: _formId, chatId: _chatId, className, }: PickaxeProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/{hooks → src/hooks}/pickaxe/usePickaxeContext.d.ts

@@ -2,6 +2,7 @@ export declare const usePickaxeContext: () => {
     formId: string;
     chatId: string;
     pickaxe: import("../../types/pickaxe").Pickaxe | null;
+    styles: import("../../components/Pickaxe/Provider").PickaxeProviderStyles;
     colors: import("../../components/Pickaxe/Provider").PickaxeProviderColors;
     isNewChat: boolean;
     isShowIceBreaker: boolean;

package/dist/esm/src/hooks/studio/useStyleButton.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from "../../components/Core/Button";
+import { type CSSProperties } from "react";
+interface UseStyleButtonOptions {
+    variant?: ButtonProps["variant"];
+}
+export declare const useStyleButton: ({ variant, }: UseStyleButtonOptions) => CSSProperties;
+export {};

package/dist/esm/src/hooks/studio/useStyleInput.d.ts

@@ -0,0 +1,2 @@
+import { type CSSProperties } from "react";
+export declare const useStyleInput: () => Omit<CSSProperties, "height">;

package/dist/esm/src/types/studio.d.ts

@@ -0,0 +1,3 @@
+export type StudioFontSize = "sm" | "md" | "lg" | "xl";
+export type StudioFormFieldStyle = "minimal" | "box" | "block";
+export type StudioButtonStyle = "filled" | "outlined" | "transparent";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pickaxeproject/react",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Client utility library for Pickaxe",
   "repository": {
     "type": "git",
@@ -34,14 +34,18 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.20.7"
+    "@babel/runtime": "^7.20.7",
+    "@storybook/react-vite": "^8.4.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.26.0",
+    "@chromatic-com/storybook": "3.2.3",
+    "@mdx-js/react": "^3.1.0",
     "@nem035/gpt-3-encoder": "^1.1.7",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.3",
@@ -49,6 +53,15 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.3.0",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/test": "8.4.7",
     "@svgr/rollup": "^8.1.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-query": "^4.36.1",
@@ -73,6 +86,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "framer-motion": "^11.17.0",
     "husky": "^8.0.3",
     "isomorphic-dompurify": "^2.20.0",
@@ -94,6 +108,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
+    "storybook": "8.4.7",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.17",
@@ -101,6 +116,9 @@
     "ttypescript": "^1.5.15",
     "typescript": "^4.9.4",
     "typescript-transform-paths": "^3.4.6",
+    "vite": "^6.0.7",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1"
   },
@@ -133,6 +151,9 @@
     "build": "cross-env NODE_ENV=production rollup -c",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
     "changeset": "changeset",
-    "release": "changeset publish"
+    "release": "changeset publish",
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }