https://slickbot.ai/assets/PlaygroundPage-eefgSwj1.js

1import{u as J,j as e}from"./vendor-query-DPZO-Gta.js";import{b as ue,u as he,j as ge,r as d,L as u,a as pe}from"./vendor-react-BomFe3BT.js";import{j as Q,B as U,b as be,i as ye}from"./index-BLzMsaFd.js";import{u as fe}from"./useChatbotTabs-TDDcKjl5.js";import"./vendor-charts-DodUWJ0z.js";function De(){var q;const{id:o,botId:l}=ue(),G=he();let b=null;try{b=ge()}catch{}const{data:S}=J({queryKey:["business-bots",o],queryFn:async()=>(await be.getBots(o)).data,enabled:!!o&&!!(b!=null&&b.business)&&!l}),D=l||(b!=null&&b.business?(q=S==null?void 0:S[0])==null?void 0:q.id:o),[L,g]=d.useState([]),[C,T]=d.useState(""),[M,_]=d.useState(!1),[X,N]=d.useState(!1),[F,$]=d.useState(),[W,ee]=d.useState(!0),[s,c]=d.useState(null),[h,j]=d.useState({name:"",email:"",notes:""}),z=d.useRef(null),R=d.useRef(null),B=d.useRef(""),{data:w,isLoading:te}=J({queryKey:["chatbot",D],queryFn:async()=>(await ye.get(D)).data,enabled:!!D}),se=()=>{var t;(t=z.current)==null||t.scrollIntoView({behavior:"smooth"})};d.useEffect(()=>{se()},[L]);const V=async t=>{var n,m;if(t.preventDefault(),!C.trim()||M||!o)return;const r={id:Date.now().toString(),role:"user",content:C.trim(),timestamp:new Date};pe.flushSync(()=>{g(a=>[...a,r]),T(""),_(!0),N(!0)});try{if(W){const a=await Q.testChatStream(o,r.content,F);if(!a.ok)throw new Error("Failed to send message");const i=(n=a.body)==null?void 0:n.getReader();if(!i)throw new Error("No reader available");B.current="";let y=!1;const k=new TextDecoder;let x="";for(;;){const{done:me,value:xe}=await i.read();if(me)break;x+=k.decode(xe,{stream:!0});const Y=x.split(`
2`);x=Y.pop()||"";for(const H of Y)if(H.startsWith("data: "))try{const f=JSON.parse(H.slice(6));if(f.started)continue;if(f.content){if(!y){N(!1);const v={id:(Date.now()+1).toString(),role:"assistant",content:"",timestamp:new Date};g(p=>[...p,v]),y=!0}B.current+=f.content;const I=B.current;g(v=>{const p=[...v],Z=p[p.length-1];return Z.role==="assistant"&&(Z.content=I),p})}f.session_id&&$(f.session_id),f.calendar&&g(I=>{const v=[...I],p=v[v.length-1];return p.role==="assistant"&&(p.calendar=f.calendar),v})}catch{}}}else{const i=(await Q.testChat(o,r.content,F)).data;N(!1);const y={id:(Date.now()+1).toString(),role:"assistant",content:i.message,timestamp:new Date};g(k=>[...k,y]),i.session_id&&$(i.session_id)}}catch(a){console.error("Chat error:",a),N(!1);const i={id:(Date.now()+1).toString(),role:"assistant",content:"Sorry, there was an error processing your message. Please try again.",timestamp:new Date};g(y=>[...y,i])}finally{_(!1),N(!1),(m=R.current)==null||m.focus()}},ae=t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),V(t))},re=()=>{g([]),$(void 0),c(null),j({name:"",email:"",notes:""})},A=async t=>{if(o){c({messageId:t,step:"dates",availableDays:[],loading:!0});try{const r=new Date,n=new Date(r);n.setDate(r.getDate()+14);const m=r.toISOString().split("T")[0],a=n.toISOString().split("T")[0],i=Intl.DateTimeFormat().resolvedOptions().timeZone,k=((await U.getAvailability(o,m,a,i)).data.availability||[]).map(x=>({date:x.date,slots:x.slots||[]})).filter(x=>x.slots.length>0);c(x=>x?{...x,availableDays:k,loading:!1}:null)}catch(r){console.error("Failed to fetch availability:",r),c(n=>n?{...n,step:"error",loading:!1,error:"Failed to load available dates. Please try again."}:null)}}},ne=t=>{c(r=>r?{...r,step:"times",selectedDate:t}:null)},oe=t=>{c(r=>r?{...r,step:"form",selectedSlot:t}:null)},ie=()=>{c(t=>t?{...t,step:"dates",selectedDate:void 0,selectedSlot:void 0}:null)},le=async t=>{if(t.preventDefault(),!(!o||!(s!=null&&s.selectedSlot))){c(r=>r?{...r,step:"confirming",loading:!0}:null);try{const r=Intl.DateTimeFormat().resolvedOptions().timeZone,n=await U.createBooking(o,{slot_start:s.selectedSlot.start,slot_end:s.selectedSlot.end,name:h.name,email:h.email,notes:h.notes||void 0,timezone:r});c(a=>a?{...a,step:"confirmed",loading:!1,bookingResult:{start_time:n.data.start_time,end_time:n.data.end_time,meeting_url:n.data.meeting_url,confirmation_message:n.data.confirmation_message}}:null);const m={id:Date.now().toString(),role:"assistant",content:n.data.confirmation_message||`Your meeting has been booked for ${E(s.selectedSlot)}. You'll receive a confirmation email at ${h.email}.`,timestamp:new Date};g(a=>

2[...a,m]),j({name:"",email:"",notes:""})}catch(r){console.error("Failed to create booking:",r),c(n=>n?{...n,step:"error",loading:!1,error:"Failed to book the meeting. Please try again."}:null)}}},P=t=>new Date(t+"T12:00:00").toLocaleDateString(void 0,{weekday:"long",month:"short",day:"numeric"}),ce=t=>new Date(t).toLocaleTimeString(void 0,{hour:"numeric",minute:"2-digit"}),E=t=>{const r=new Date(t.start),n=r.toLocaleDateString(void 0,{weekday:"short",month:"short",day:"numeric"}),m=r.toLocaleTimeString(void 0,{hour:"numeric",minute:"2-digit"});return`${n} at ${m}`},O=()=>{c(null),j({name:"",email:"",notes:""})};if(te)return e.jsx("div",{className:"text-center py-12 text-gray-500",children:"Loading..."});if(!w)return e.jsx("div",{className:"text-center py-12 text-gray-500",children:"Chatbot not found"});const K=!!l,de=fe(D,"Playground");return e.jsxs("div",{className:"h-full flex flex-col",children:[!K&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("button",{onClick:()=>G("/chatbots"),className:"text-gray-500 hover:text-gray-700",children:e.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M10 19l-7-7m0 0l7-7m-7 7h18"})})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-gray-900",children:w.name}),e.jsx("p",{className:"text-gray-600",children:w.description||"No description"})]})]}),e.jsx("span",{className:`px-3 py-1 text-sm font-medium rounded-full ${w.status==="active"?"bg-green-100 text-green-700":"bg-gray-100 text-gray-700"}`,children:w.status})]}),e.jsx("div",{className:"border-b border-gray-200 mb-6",children:e.jsx("nav",{className:"-mb-px flex space-x-8",children:de.map(t=>e.jsx(u,{to:t.href,className:`py-4 px-1 border-b-2 font-medium text-sm ${t.current?"border-primary-500 text-primary-600":"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}`,children:t.name},t.name))})})]}),K&&e.jsxs("div",{className:"mb-6",children:[e.jsxs("h2",{className:"text-lg font-semibold text-gray-900",children:[window.location.pathname.includes("/voicebot/")?"Voicebot":"Chatbot"," Configuration"]}),e.jsx("p",{className:"text-sm text-gray-500 mb-4",children:"Test your AI assistant in a live conversation"}),window.location.pathname.includes("/voicebot/")?e.jsxs("div",{className:"flex items-center gap-2 border-b border-gray-200",children:[e.jsx(u,{to:`/business/${o}/bots/voicebot/${l}/settings`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"Voice"}),e.jsx(u,{to:`/business/${o}/bots/voicebot/${l}/phone-numbers`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"Phone Numbers"}),e.jsx(u,{to:`/business/${o}/bots/voicebot/${l}/documents`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"Knowledge Base"}),e.jsx(u,{to:`/business/${o}/bots/voicebot/${l}/ai-settings`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"AI Settings"}),e.jsx(u,{to:`/business/${o}/bots/voicebot/${l}/playground`,className:"px-4 py-2 text-sm font-medium text-primary-600 border-b-2 border-primary-500",children:"Playground"})]}):e.jsxs("div",{className:"flex items-center gap-2 border-b border-gray-200",children:[e.jsx(u,{to:`/business/${o}/bots/chatbot/${l}`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"Overview"}),e.jsx(u,{to:`/business/${o}/bots/chatbot/${l}/settings`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"Widget"}),e.jsx(u,{to:`/business/${o}/bots/chatbot/${l}/documents`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"Knowledge Base"}),e.jsx(u,{to:`/business/${o}/bots/chatbot/${l}/ai-settings`,className:"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300",children:"AI Settings"}),e.jsx(u,{to:`/business/${o}/bots/chatbot/${l}/playground`,className:"px-4 py-2 text-sm font-medium text-primary-600 border-b-2 border-primary-500",children:"Playground"})]})]}),e.jsxs("div",{className:"flex-1 flex flex-col card overflow-hidden",children:[e.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-gray-200",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center",children:e.jsx("svg",{className:"w-5 h-5 text-primary-600",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"})})}),e.jsxs("div",{children:[e.jsx("p",{className:"font-medium text-gray-900",children:"Test Chat"}),e.jsx("p",{className:"text-sm text-gray-500",children:"Chat with your bot to test its responses"})]})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs("label",{className:"flex items-center gap-2 text-sm text-gray-600",children:[e.jsx("input",{type:"checkbox",checked:W,onChange:t=>ee(t.target.checked),className:"rounded border-gray-300 text-primary-600 focus:ring-primary-500"}

2),"Streaming"]}),e.jsxs("button",{onClick:re,className:"text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1",children:[e.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"})}),"Clear"]})]})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto p-4 space-y-4",children:[L.length===0?e.jsxs("div",{className:"text-center text-gray-500 py-12",children:[e.jsx("svg",{className:"w-12 h-12 mx-auto mb-4 text-gray-300",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})}),e.jsx("p",{className:"text-lg font-medium",children:"Start a conversation"}),e.jsx("p",{className:"text-sm mt-1",children:"Send a message to test your chatbot"})]}):L.map(t=>{var r,n,m;return e.jsx("div",{className:`flex ${t.role==="user"?"justify-end":"justify-start"}`,children:e.jsxs("div",{className:`max-w-[70%] rounded-lg px-4 py-2 ${t.role==="user"?"bg-primary-600 text-white":"bg-gray-100 text-gray-900"}`,children:[e.jsx("p",{className:"whitespace-pre-wrap",children:t.content}),((r=t.calendar)==null?void 0:r.show_calendar)&&e.jsxs("div",{className:"mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg",children:[(!s||s.messageId!==t.id)&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-sm text-blue-700 mb-2",children:t.calendar.booking_message||"Would you like to schedule a meeting?"}),e.jsxs("button",{onClick:()=>A(t.id),className:"inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors",children:[e.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})}),"Book a Meeting"]})]}),(s==null?void 0:s.messageId)===t.id&&s.loading&&s.step==="dates"&&e.jsxs("div",{className:"flex items-center gap-2 text-blue-700",children:[e.jsxs("svg",{className:"w-4 h-4 animate-spin",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"})]}),e.jsx("span",{className:"text-sm",children:"Loading available dates..."})]}),(s==null?void 0:s.messageId)===t.id&&!s.loading&&s.step==="dates"&&e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("p",{className:"text-sm font-medium text-blue-700",children:"Select a date:"}),e.jsx("button",{onClick:O,className:"text-xs text-gray-500 hover:text-gray-700",children:"Cancel"})]}),s.availableDays.length===0?e.jsx("p",{className:"text-sm text-gray-600",children:"No available dates in the next 2 weeks."}):e.jsx("div",{className:"grid grid-cols-2 gap-2 max-h-48 overflow-y-auto",children:s.availableDays.map(a=>e.jsxs("button",{onClick:()=>ne(a.date),className:"text-left px-3 py-2 text-sm bg-white border border-blue-200 rounded-lg hover:bg-blue-100 hover:border-blue-300 transition-colors",children:[e.jsx("div",{className:"font-medium",children:P(a.date)}),e.jsxs("div",{className:"text-xs text-gray-500",children:[a.slots.length," times available"]})]},a.date))})]}),(s==null?void 0:s.messageId)===t.id&&s.step==="times"&&s.selectedDate&&e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("p",{className:"text-sm font-medium text-blue-700",children:P(s.selectedDate)}),e.jsx("button",{onClick:ie,className:"text-xs text-gray-500 hover:text-gray-700",children:"Change date"})]}),e.jsx("p",{className:"text-xs text-gray-600",children:"Select a time:"}),e.jsx("div",{className:"grid grid-cols-3 gap-2 max-h-36 overflow-y-auto",children:(n=s.availableDays.find(a=>a.date===s.selectedDate))==null?void 0:n.slots.map((a,i)=>e.jsx("button",{onClick:()=>oe(a),className:"px-3 py-2 text-sm bg-white border border-blue-200 rounded-lg hover:bg-blue-100 hover:border-blue-300 transition-colors text-center",children:ce(a.start)},i))})]}),(s==null?void 0:s.messageId)===t.id&&s.step==="form"&&s.selectedSlot&&e.jsxs("form",{onSubmit:le,className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("p",{className:"text-sm font-medium text-blue-700",children:E(s.selectedSlot)}),e.jsx("button",{type:"button",onClick:()=>c(a=>a?{...a,step:"times"}:null),className:"text-xs text-gray-500 hover:text-gray-700",children:"Change time"})]}),e.jsx("input",{type:"text",placeholder:"Your name",value:h.name,onChange:a=>j(i=>({...i,name:a.target.value})),required:!0,className:"w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"}),e.jsx("input",{type:"email",placeholder:"Your email",value:h.email,onChange:a=>j(i=>({...i,email:a.target.value})),required:!0,className:"w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"}),e.jsx("textarea",{placeholder:"Notes (optional)",value:h.notes,onChange:a=>j(i=>({...i,notes:a.target.value})),rows:2,className:"w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"submit",disabled:!h.name||!h.email,className:"flex-1 px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",children:"Confirm Booking"}),e.jsx("button",{type:"button",onClick:O,className:"px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-300 transition-colors",children:"Cancel"})]})]}),(s==null?void 0:s.messageId)===t.id&&s.step==="confirming"&&e.jsxs("div",{className:"flex items-center gap-2 text-blue-700",children:[e.jsxs("svg",{className:"w-4 h-4 animate-spin",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"})]}),e.jsx("span",{className:"text-sm",children:"Booking your meeting..."})]}),(s==null?void 0:s.messageId)===t.id&&s.step==="confirmed"&&e.jsxs("div",{className:"text-center",children:[e.jsx("svg",{className:"w-8 h-8 mx-auto text-green-500 mb-2",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"})}),e.jsx("p",{className:"text-sm font-medium text-green-700",children:"Meeting booked!"}),((m=s.bookingResult)==null?void 0:m.meeting_url)&&e.jsx("a",{href:s.bookingResult.meeting_url,target:"_blank",rel:"noopener noreferrer",className:"text-xs text-primary-600 hover:underline mt-1 block",children:"View meeting details"})]}),(s==null?void 0:s.messageId)===t.id&&s.step==="error"&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm text-red-600",children:s.error}),e.jsx("button",{onClick:()=>A(t.id),className:"text-sm text-primary-600 hover:underline",children:"Try again"})]})]}),e.jsx("p",{className:`text-xs mt-1 ${t.role==="user"?"text-primary-200":"text-gray-400"}`,children:t.timestamp.toLocaleTimeString()})]})},t.id)}),X&&e.jsx("div",{className:"flex justify-start",children:e.jsx("div",{className:"bg-gray-100 rounded-lg px-4 py-2",children:e.jsxs("div",{className:"flex gap-1",children:[e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"0ms"}}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"150ms"}}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"300ms"}})]})})}),e.jsx("div",{ref:z})]}),e.jsx("form",{onSubmit:V,className:"p-4 border-t border-gray-200",children:e.jsxs("div",{className:"flex gap-2",children:[e.jsx("textarea",{ref:R,value:C,onChange:t=>T(t.target.value),onKeyDown:ae,placeholder:"Type your message...",rows:1,className:"flex-1 resize-none rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",disabled:M}),e.jsx("button",{type:"submit",disabled:!C.trim()||M,className:"px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",children:e.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 19l9 2-9-18-9 18 9-2zm0 0v-8"})})})]})})]})]})}export{De as default};