https://chatspark.io/_next/static/chunks/9161.a4c87ef2391aea60.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9161],{99161:function(e,r,o){o.r(r),o.d(r,{default:function(){return d}});var i=o(57437),n=o(2265),t=o(23859),x=o(45873),s=o(5095),l=o(22561);let a=(0,x.E)(t.Box);function d(){let[e,r]=(0,n.useState)(0),o=(0,n.useRef)(null),x=(0,n.useRef)(0),d=(0,n.useRef)(null);(0,n.useEffect)(()=>{let e=[1200,1400,1400,1600,1600,1800,1600,2e3,1800,2200,3800],i=()=>{var n;let t=null!==(n=e[x.current])&&void 0!==n?n:1600;o.current=setTimeout(()=>{x.current=(x.current+1)%e.length,r(x.current),i()},t)};return i(),()=>clearTimeout(o.current)},[]),(0,n.useEffect)(()=>{d.current&&d.current.scrollTo({top:d.current.scrollHeight,behavior:"smooth"})},[e]);let c=e>=4,p=e>=5,h=6===e,g=e>=7,b=e>=8,f=e>=10;return(0,i.jsxs)(t.Box,{borderRadius:"12px",overflow:"hidden",border:"1px solid",borderColor:"gray.200",bg:"white",w:"100%",children:[(0,i.jsx)(t.Box,{bg:"gray.100",px:"4",py:"3",borderBottom:"1px solid",borderColor:"gray.200",children:(0,i.jsxs)(t.HStack,{spacing:"2",children:[(0,i.jsx)(t.Box,{w:"12px",h:"12px",borderRadius:"full",bg:"red.300"}),(0,i.jsx)(t.Box,{w:"12px",h:"12px",borderRadius:"full",bg:"yellow.300"}),(0,i.jsx)(t.Box,{w:"12px",h:"12px",borderRadius:"full",bg:"green.300"}),(0,i.jsx)(t.Box,{flex:"1",bg:"white",borderRadius:"md",px:"3",py:"1",ml:"3",fontSize:"12px",color:"gray.400",children:"chatspark.io/my/ai-inbox"})]})}),(0,i.jsxs)(t.kCb,{h:{base:"560px",md:"600px"},children:[(0,i.jsxs)(t.Box,{w:{base:"180px",md:"240px"},flexShrink:0,borderRight:"1px solid",borderColor:"gray.200",bg:"white",display:"flex",flexDirection:"column",children:[(0,i.jsx)(t.Box,{px:"4",py:"3",borderBottom:"1px solid",borderColor:"gray.200",children:(0,i.jsxs)(t.HStack,{justify:"space-between",children:[(0,i.jsx)(t.Text,{fontWeight:"600",fontSize:"13px",color:"gray.900",children:"AI Inbox"}),(0,i.jsx)(t.Box,{bg:"blue.50",color:"blue.600",borderRadius:"999px",fontSize:"10px",fontWeight:"600",px:"8px",children:"3"})]})}),(0,i.jsx)(t.Box,{px:"3",pt:"2",pb:"0",borderBottom:"1px solid",borderColor:"gray.200",children:(0,i.jsx)(t.HStack,{spacing:"0",children:["Open","Pending","Closed"].map((e,r)=>(0,i.jsx)(t.Box,{fontSize:"11px",fontWeight:0===r?"600":"400",color:0===r?"blue.600":"gray.400",borderBottom:0===r?"2px solid":"2px solid transparent",borderColor:0===r?"blue.500":"transparent",pb:"1.5",mr:"3",children:e},e))})}),(0,i.jsx)(t.Box,{px:"3",py:"2",children:(0,i.jsx)(t.Box,{bg:"gray.50",border:"1px solid",borderColor:"gray.200",borderRadius:"md",px:"2",py:"1",fontSize:"11px",color:"gray.400",children:"Search assists…"})}),(0,i.jsxs)(t.Box,{px:"3",pb:"2",display:"flex",flexDirection:"column",gap:"1.5",children:[(0,i.jsx)(t.Box,{bg:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"md",px:"2",py:"1",fontSize:"11px",color:"gray.400",children:"All priorities"}),(0,i.jsx)(t.Box,{bg:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"md",px:"2",py:"1",fontSize:"11px",color:"gray.400",children:"All AI Agents"})]}),(0,i.jsx)(s.M,{children:(0,i.jsx)(a,{initial:{opacity:0,y:-6},animate:{opacity:1,y:0},transition:{duration:.4},px:"3",py:"3",bg:"blue.50",borderBottom:"1px solid",borderColor:"gray.100",cursor:"pointer",children:(0,i.jsxs)(t.HStack,{spacing:"2",align:"flex-start",children:[(0,i.jsx)(t.Box,{w:"32px",h:"32px",borderRadius:"md",bg:"red.400",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,children:(0,i.jsx)(t.Text,{fontSize:"10px",color:"white",fontWeight:"700",children:"JS"})}),(0,i.jsxs)(t.Box,{flex:"1",minW:"0",children:[(0,i.jsxs)(t.HStack,{justify:"space-between",children:[(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.400",children:"AS-10042"}),(0,i.jsx)(t.Box,{w:"6px",h:"6px",borderRadius:"full",bg:"green.400"})]}),(0,i.jsx)(t.Text,{fontSize:"12px",fontWeight:"500",color:"gray.900",noOfLines:1,children:"John Smith"}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"gray.500",noOfLines:1,children:"Refund for Order #12345"}),(0,i.jsx)(t.Box,{mt:"1",children:(0,i.jsx)(t.Cts,{bg:"red.50",color:"red.700",borderRadius:"999px",fontSize:"9px",px:"6px",border:"1px solid",borderColor:"red.200",children:"urgent"})})]})]})})}),[{initials:"AK",name:"Amanda K.",summary:"Billing question...",color:"blue.400"},{initials:"MR",name:"Marcus R.",summary:"Technical issue...",color:"orange.400"}].map((e,r)=>(0,i.jsx)(t.Box,{px:"3",py:"3",borderBottom:"1px solid",borderColor:"gray.100",opacity:"0.5",children:(0,i.jsxs)(t.HStack,{spacing:"2",align:"flex-start",children:[(0,i.jsx)(t.Box,{w:"32px",h:"32px",borderRadius:"md",bg:e.color,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,children:(0,i.jsx)(t.Text,{fontSize:"10px",color:"white",fontWeight:"700",children:e.initials})}),(0,i.jsxs)(t.Box,{flex:"1",minW:"0",children:[(0,i.jsx)(t.Text,{fontSize:"12px",fontWeight:"500",color:"gray.700",noOfLines:1,children:e.name}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"gray.400",noOfLines:1,children:e.summary})]})]})},r))]}),(0,i.jsxs)(t.kCb,{direction:"column",flex:"1",overflow:"hidden",children:[(0,i.jsxs)(t.Box,{px:"4",py:"3",borderBottom:"1px solid",borderColor:"gray.200",children:[(0,i.jsxs)(t.HStack,{spacing:"2",mb:"1.5",flexWrap:"wrap",children:[(0,i.jsx)(t.Box,{border:"1px solid",borderColor:"gray.300",borderRadius:"999px",px:"6px",fontSize:"9px",color:"gray.500",fontWeight:"500",children:"AS-10042"}),(0,i.jsx)(t.Text,{fontSize:"12px",fontWeight:"600",color:"gray.900",children:"John Smith"}),(0,i.jsx)(t.Cts,{bg:"red.50",color:"red.700",borderRadius:"999px",fontSize:"9px",px:"6px",border:"1px solid",borderColor:"red.200",children:"urgent"}),(0,i.jsx)(t.Cts,{bg:"purple.50",color:"purple.700",borderRadius:"999px",fontSize:"9px",px:"6px",border:"1px solid",borderColor:"purple.200",children:"Website Agent"})]}),(0,i.jsxs)(t.HStack,{spacing:"2",children:[(0,i.jsx)(t.Box,{bg:b?"green.50":"gray.100",color:b?"green.700":"gray.600",borderRadius:"md",px:"2",py:"0.5",fontSize:"11px",transition:"all 0.3s",children:b?"Closed":"Open"}),(0,i.jsx)(t.Box,{bg:"gray.100",borderRadius:"md",px:"2",py:"0.5",fontSize:"11px",color:"gray.600",transition:"all 0.3s",children:g?"Sarah M.":"Unassigned"})]})]}),(0,i.jsxs)(t.Box,{ref:d,flex:"1",overflow:"auto",px:"4",py:"3",sx:{scrollBehavior:"smooth"},children:[e>=1&&(0,i.jsxs)(a,{initial:{opacity:0}

1,animate:{opacity:1},transition:{duration:.5},children:[(0,i.jsx)(t.kCb,{justify:"flex-end",mb:"2",children:(0,i.jsx)(t.Box,{bg:"blue.500",color:"white",borderRadius:"10px 0 10px 10px",px:"3",py:"2",fontSize:"12px",maxW:"65%",children:"I need a refund for my order. It never arrived."})}),(0,i.jsx)(t.kCb,{justify:"flex-start",mb:"2",children:(0,i.jsx)(t.Box,{bg:"gray.50",color:"gray.700",borderRadius:"0 10px 10px 10px",px:"3",py:"2",fontSize:"12px",maxW:"70%",children:"I can help with that. Let me get your contact details and I'll connect you with our team right away."})}),(0,i.jsx)(t.kCb,{justify:"flex-end",mb:"2",children:(0,i.jsxs)(t.Box,{bg:"blue.50",border:"1px solid",borderColor:"blue.200",borderRadius:"10px 0 10px 10px",px:"3",py:"2",fontSize:"11px",maxW:"72%",children:[(0,i.jsx)(t.Text,{fontSize:"9px",fontWeight:"600",color:"blue.600",textTransform:"uppercase",letterSpacing:"widest",mb:"1.5",children:"Contact Info Submitted"}),(0,i.jsxs)(t.HStack,{spacing:"2",mb:"1",children:[(0,i.jsx)(t.Text,{fontSize:"10px",fontWeight:"600",color:"gray.500",minW:"40px",children:"Name"}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"gray.800",children:"John Smith"})]}),(0,i.jsxs)(t.HStack,{spacing:"2",mb:"1",children:[(0,i.jsx)(t.Text,{fontSize:"10px",fontWeight:"600",color:"gray.500",minW:"40px",children:"Email"}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"gray.800",children:"[email protected]"})]}),(0,i.jsxs)(t.Box,{mt:"1.5",children:[(0,i.jsx)(t.Text,{fontSize:"10px",fontWeight:"600",color:"gray.500",mb:"0.5",children:"Message"}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"gray.800",children:"Order #12345 never arrived, need a refund."})]})]})}),(0,i.jsx)(t.kCb,{justify:"flex-start",mb:"2",children:(0,i.jsx)(t.Box,{bg:"gray.50",color:"gray.700",borderRadius:"0 10px 10px 10px",px:"3",py:"2",fontSize:"12px",maxW:"70%",children:"Got it, John. Your request has been sent to our team. You'll receive a confirmation at [email protected]. Reference: AS-10042."})})]}),e>=2&&(0,i.jsx)(a,{initial:{opacity:0}

1,animate:{opacity:1},transition:{duration:.4},children:(0,i.jsxs)(t.kCb,{align:"center",my:"3",children:[(0,i.jsx)(t.Box,{flex:"1",h:"1px",bg:"gray.200"}),(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.400",px:"2",whiteSpace:"nowrap",children:"Assist opened \xb7 Just now \xb7 via Website Agent"}),(0,i.jsx)(t.Box,{flex:"1",h:"1px",bg:"gray.200"})]})}),g&&(0,i.jsx)(a,{initial:{opacity:0,y:6},animate:{opacity:1,y:0},transition:{duration:.4},children:(0,i.jsxs)(t.Box,{bg:"blue.50",borderLeft:"3px solid",borderColor:"blue.300",borderRadius:"0 8px 8px 0",px:"3",py:"2",mb:"1",children:[(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.500",mb:"1",children:"Agent replied via email \xb7 Just now"}),(0,i.jsx)(t.Text,{fontSize:"12px",color:"gray.700",lineHeight:"1.5",children:"Hi John, I'm sorry to hear your order didn't arrive. I've flagged this for an immediate refund. You should see it within 2 business days."})]})}),b&&(0,i.jsx)(a,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.4},children:(0,i.jsxs)(t.kCb,{align:"center",my:"2",children:[(0,i.jsx)(t.Box,{flex:"1",h:"1px",bg:"gray.200"}),(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.400",px:"2",whiteSpace:"nowrap",children:"Assist closed \xb7 Just now"}),(0,i.jsx)(t.Box,{flex:"1",h:"1px",bg:"gray.200"})]})})]}),e>=9&&(0,i.jsx)(a,{initial:{opacity:0,y:6},animate:{opacity:1,y:0},transition:{duration:.35},bg:f?"green.50":"blue.50",borderTop:"1px solid",borderColor:f?"green.100":"blue.100",px:"3",py:"2.5",children:(0,i.jsxs)(t.kCb,{align:"center",justify:"space-between",gap:"2",children:[(0,i.jsxs)(t.HStack,{spacing:"2",flex:"1",minW:"0",children:[(0,i.jsx)(t.JO$,{as:f?l.PjL:l.Moc,boxSize:"3.5",color:f?"green.500":"blue.500",flexShrink:0}),(0,i.jsx)(t.Text,{fontSize:"11px",color:f?"green.700":"blue.700",fontWeight:"500",noOfLines:1,children:f?"Added to AI Learning (1 pair).":"Add this conversation to your AI’s training data."})]}),!f&&(0,i.jsx)(t.Box,{bg:"blue.500",color:"white",borderRadius:"md",px:"2.5",py:"1",fontSize:"11px",fontWeight:"600",flexShrink:0,cursor:"pointer",children:"Add to Training"})]})}),(0,i.jsxs)(t.Box,{borderTop:"1px solid",borderColor:"gray.200",p:"3",children:[(0,i.jsxs)(t.HStack,{mb:"2",spacing:"2",children:[(0,i.jsx)(t.Box,{fontSize:"12px",fontWeight:"600",color:"gray.700",bg:"gray.100",borderRadius:"md",px:"2",py:"0.5",children:"Reply to Customer"}),(0,i.jsx)(t.Box,{fontSize:"12px",color:"gray.400",px:"2",py:"0.5",children:"Internal Note"}),p&&!g&&(0,i.jsxs)(t.HStack,{spacing:"1",ml:"auto",children:[(0,i.jsx)(t.JO$,{as:l.Moc,boxSize:"3",color:"blue.400"}),(0,i.jsx)(t.Text,{fontSize:"10px",color:"blue.400",fontWeight:"500",children:"AI draft"})]})]}),(0,i.jsx)(t.Box,{bg:p&&!g?"blue.50":"white",border:"1px solid",borderColor:p&&!g?"blue.200":"gray.200",borderRadius:"md",p:"2",fontSize:"12px",color:p&&!g?"gray.700":"gray.400",mb:"2",minH:"52px",transition:"all 0.3s",children:p&&!g?"Hi John, I'm sorry to hear your order didn't arrive. I've flagged this for an immediate refund. You should see it within 2 business days.":"Write your reply…"}),p&&!g&&(0,i.jsxs)(t.HStack,{spacing:"1",mb:"2",children:[(0,i.jsx)(t.JO$,{as:l.Moc,boxSize:"2.5",color:"gray.400"}),["Regenerate","Shorter","More formal","More casual"].map(e=>(0,i.jsx)(t.Box,{fontSize:"10px",color:"gray.400",px:"1.5",py:"0.5",borderRadius:"md",_hover:{bg:"gray.100"},cursor:"pointer",children:e},e))]}),(0,i.jsxs)(t.kCb,{justify:"flex-end",align:"center",gap:"2",children:[g&&(0,i.jsxs)(t.HStack,{spacing:"1.5",children:[(0,i.jsx)(t.JO$,{as:l.PjL,boxSize:"3.5",color:"green.500"}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"green.600",fontWeight:"500",children:"Reply sent"})]}),(0,i.jsx)(t.Box,{flex:"1"}),p&&!g&&(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.400",children:"⌘↵"}),(0,i.jsx)(t.Box,{bg:h?"blue.500":"gray.100",color:h?"white":"gray.400",borderRadius:"md",px:"3",py:"1.5",fontSize:"12px",fontWeight:"600",transition:"all 0.3s",children:"Send Reply"})]})]})]}),(0,i.jsx)(t.Box,{w:{base:"160px",md:"220px"},flexShrink:0,borderLeft:"1px solid",borderColor:"gray.200",overflow:"auto",display:{base:"none",md:"block"},children:(0,i.jsxs)(t.VStack,{spacing:"2",align:"stretch",p:"3",children:[(0,i.jsx)(t.Text,{fontSize:"10px",fontWeight:"600",color:"gray.500",textTransform:"uppercase",letterSpacing:"widest",children:"AI Intelligence"}),e>=3&&(0,i.jsxs)(a,{initial:{opacity:0,y:4}

1,animate:{opacity:1,y:0},transition:{duration:.4},bg:"blue.50",border:"1px solid",borderColor:"blue.100",borderRadius:"8px",p:"3",children:[(0,i.jsxs)(t.HStack,{mb:"1.5",spacing:"1",children:[(0,i.jsx)(t.JO$,{as:l.Moc,boxSize:"3",color:"blue.600"}),(0,i.jsx)(t.Text,{fontSize:"9px",fontWeight:"600",color:"blue.600",textTransform:"uppercase",letterSpacing:"widest",children:"Summary"})]}),(0,i.jsx)(t.Text,{fontSize:"11px",color:"gray.800",lineHeight:"1.5",children:"Customer wants a refund for Order #12345. Item was never delivered. Customer requested a human agent."})]}),c&&(0,i.jsxs)(a,{initial:{opacity:0,y:4},animate:{opacity:1,y:0},transition:{duration:.4},bg:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"8px",p:"3",children:[(0,i.jsxs)(t.HStack,{mb:"2",spacing:"1",children:[(0,i.jsx)(t.JO$,{as:l.Moc,boxSize:"3",color:"gray.500"}),(0,i.jsx)(t.Text,{fontSize:"9px",fontWeight:"600",color:"gray.500",textTransform:"uppercase",letterSpacing:"widest",children:"Customer Details"})]}),(0,i.jsxs)(t.VStack,{align:"stretch",spacing:"1.5",children:[(0,i.jsxs)(t.Box,{children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"Name"}),(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.800",fontWeight:"500",children:"John Smith"})]}),(0,i.jsxs)(t.Box,{children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"Email"}),(0,i.jsxs)(t.HStack,{spacing:"1",children:[(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.800",fontWeight:"500",flex:"1",noOfLines:1,children:"[email protected]"}),(0,i.jsx)(t.JO$,{as:l.Moc,boxSize:"2.5",color:"gray.400"})]})]}),(0,i.jsxs)(t.Box,{children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"Order"}),(0,i.jsx)(t.Text,{fontSize:"10px",color:"gray.800",fontWeight:"500",children:"#12345"})]}),(0,i.jsxs)(t.Box,{children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"URLs"}),(0,i.jsx)(t.Text,{fontSize:"10px",color:"blue.500",fontWeight:"500",wordBreak:"break-all",children:"contempothemes.com/shop"})]})]})]}),c&&(0,i.jsxs)(a,{initial:{opacity:0,y:4},animate:{opacity:1,y:0},transition:{duration:.4},bg:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"8px",p:"3",children:[(0,i.jsx)(t.Text,{fontSize:"9px",fontWeight:"600",color:"gray.500",textTransform:"uppercase",letterSpacing:"widest",mb:"2",children:"Assist Info"}),(0,i.jsxs)(t.VStack,{align:"stretch",spacing:"1.5",children:[(0,i.jsxs)(t.HStack,{justify:"space-between",children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"Priority"}),(0,i.jsx)(t.Box,{bg:"red.50",color:"red.700",borderRadius:"999px",fontSize:"9px",fontWeight:"600",px:"6px",border:"1px solid",borderColor:"red.200",children:"Urgent"})]}),(0,i.jsxs)(t.HStack,{justify:"space-between",children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"Category"}),(0,i.jsx)(t.Box,{bg:"gray.100",color:"gray.600",borderRadius:"999px",fontSize:"9px",px:"6px",children:"Refund"})]}),(0,i.jsxs)(t.Box,{children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",mb:"1",children:"Tags"}),(0,i.jsx)(t.HStack,{spacing:"1",flexWrap:"wrap",children:["refund","shipping"].map(e=>(0,i.jsx)(t.Box,{bg:"gray.100",color:"gray.600",borderRadius:"999px",fontSize:"9px",px:"6px",children:e},e))})]}),(0,i.jsxs)(t.HStack,{justify:"space-between",children:[(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.400",children:"Created"}),(0,i.jsx)(t.Text,{fontSize:"9px",color:"gray.500",children:"Just now"})]})]})]})]})})]})]})}}}]);