mirror of
https://github.com/vitalityAI/office.git
synced 2025-04-09 22:10:18 -04:00
finished
This commit is contained in:
Claeb101
parent
16eef67b20
commit
a22a91af7f
6
app/public/icons/popout.svg
Normal file
6
app/public/icons/popout.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 36 36" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>pop-out-line</title>
|
||||
<path class="clr-i-outline clr-i-outline-path-1" d="M27,33H5a2,2,0,0,1-2-2V9A2,2,0,0,1,5,7H15V9H5V31H27V21h2V31A2,2,0,0,1,27,33Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M18,3a1,1,0,0,0,0,2H29.59L15.74,18.85a1,1,0,1,0,1.41,1.41L31,6.41V18a1,1,0,0,0,2,0V3Z"></path>
|
||||
<rect x="0" y="0" width="36" height="36" fill-opacity="0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 693 B |
|
|
@ -12,11 +12,24 @@ import OutlineButton from "@/components/OutlineButton";
|
|||
import { useToasts } from "@/components/ToastProvider";
|
||||
import { useSession } from 'next-auth/react'
|
||||
|
||||
const Session = ({ data, onClick = () => { }, ...props }) => {
|
||||
return (
|
||||
<div className="relative w-fit bg-white bg-opacity-5 p-6 m-2">
|
||||
<button className={`absolute right-2 top-1 w-fit text-pink transition-all ease-in-out`} onClick={onClick}>{"->"}</button>
|
||||
<p>Caller Phone: {data.callerPhone}</p>
|
||||
<p>Started At: {data.startedAt}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Home: NextPage<any> = ({ officers }) => {
|
||||
const { toastDispatch } = useToasts();
|
||||
const [input, setInput] = useState({
|
||||
phone: '',
|
||||
})
|
||||
const [sessions, setSessions] = useState([])
|
||||
const [focusSession, setFocusSession] = useState(null)
|
||||
|
||||
const { data: session } = useSession()
|
||||
const submit = async () => {
|
||||
const operator = await fetch(process.env.NEXT_PUBLIC_API_URL + '/operator/update', {
|
||||
|
|
@ -33,30 +46,115 @@ const Home: NextPage<any> = ({ officers }) => {
|
|||
notify(toastDispatch, "", "Updated Phone: " + input.phone, ToastType.SUCCESS)
|
||||
}
|
||||
|
||||
const popOut = async (session) => {
|
||||
const messages = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/message/?sessionId=' + session.id, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})).json()
|
||||
|
||||
const summary = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/summary/?sessionId=' + session.id, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})).json()
|
||||
|
||||
session.messages = messages.messages;
|
||||
session.summary = summary.summary;
|
||||
console.log(session)
|
||||
|
||||
setFocusSession(session)
|
||||
}
|
||||
|
||||
const transfer = async () => {
|
||||
console.log(session['token'].sub)
|
||||
const res = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/transfer/?sessionId=' + focusSession.id, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${session['token'].sub}`
|
||||
},
|
||||
})).json()
|
||||
await closePop()
|
||||
}
|
||||
|
||||
const closePop = async () => {
|
||||
setFocusSession(null)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(async () => {
|
||||
const fetcher = async () => {
|
||||
const s = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session?open=true', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})).json()
|
||||
|
||||
setSessions(s.sessions)
|
||||
}
|
||||
await fetcher()
|
||||
}, 2000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="py-16 sm:py-24 ">
|
||||
<div className="relative h-screen py-16 sm:py-24 px-4 sm:px-12 lg:px-24">
|
||||
{
|
||||
session ?
|
||||
<div className='w-fit bg-white bg-opacity-5 rounded-md p-4 text-center mx-auto'>
|
||||
<h1 className="text-white text-2xl font-extrabold">Hey {session.user.name.split(' ')[0]}!</h1>
|
||||
<p className="text-white text-xl font-light mt-2"> Can you give us your number real quick?</p>
|
||||
|
||||
<div className='w-fit mt-4 mx-auto flex justify-start flex-wrap'>
|
||||
<div className='w-72 mr-4'>
|
||||
<InputField name="Phone Number" id="phone" value={input.phone} onChange={(e) => handleInputChange(e, input, setInput)} className="w-full" />
|
||||
<>
|
||||
{focusSession ?
|
||||
<div className="absolute w-fit z-10 text-white bg-black bg-opacity-80 p-8 rounded-sm left-0 right-0 mx-auto">
|
||||
<button className={`absolute right-2 top-1 w-fit text-pink transition-all ease-in-out font-bold`} onClick={closePop}>{"X"}</button>
|
||||
<div className="flex items-center ">
|
||||
<h2 className="w-fit text-3xl font-extrabold">Caller: {focusSession.callerPhone} | {focusSession.startedAt}</h2>
|
||||
<OutlineButton name="Transfer" onClick={transfer} className="ml-8" />
|
||||
</div>
|
||||
<p className="my-4 text-white"><span className="text-pink font-bold">Summary: </span>{focusSession.summary}</p>
|
||||
{focusSession.messages.map(msg => {
|
||||
return (
|
||||
<div key={msg.id}>
|
||||
<p className="text-white"><span className={`${msg.role == "USER" ? "text-green-300" : "text-blue-300"} font-bold`}>{msg.role}: </span>{msg.content}</p>
|
||||
<p></p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='mt-4 flex items-center justify-center'>
|
||||
<OutlineButton name="Register" onClick={submit} />
|
||||
: null
|
||||
}
|
||||
<div className={`${focusSession ? 'blur-sm' : 'blur-0'} transition-all`}>
|
||||
<div className='w-fit bg-white bg-opacity-5 rounded-md p-4 text-center mx-auto'>
|
||||
<h2 className="text-white text-2xl font-extrabold">Hey {session.user.name.split(' ')[0]}!</h2>
|
||||
<p className="text-white text-xl font-light mt-2"> Can you give us your number real quick?</p>
|
||||
|
||||
<div className='w-fit mt-4 mx-auto flex justify-start flex-wrap'>
|
||||
<div className='w-72 mr-4'>
|
||||
<InputField name="Phone Number" id="phone" value={input.phone} onChange={(e) => handleInputChange(e, input, setInput)} className="w-full" />
|
||||
</div>
|
||||
<div className='mt-4 flex items-center justify-center'>
|
||||
<OutlineButton name="Register" onClick={submit} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-16 text-white text-center p-4">
|
||||
<h2 className="text-2xl font-extrabold">Active Calls</h2>
|
||||
<div className="flex justify-center flex-wrap">
|
||||
{sessions.map(session =>
|
||||
<Session data={session} key={session.id} onClick={() => popOut(session)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
: null
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user