diff --git a/app/public/icons/popout.svg b/app/public/icons/popout.svg index e70de62..8bbb9d7 100644 --- a/app/public/icons/popout.svg +++ b/app/public/icons/popout.svg @@ -1,6 +1 @@ - - - pop-out-line - - - \ No newline at end of file + \ No newline at end of file diff --git a/app/src/components/Background.tsx b/app/src/components/Background.tsx index f8a71a7..8344937 100644 --- a/app/src/components/Background.tsx +++ b/app/src/components/Background.tsx @@ -87,7 +87,7 @@ const Background = ({className}) => { return (
diff --git a/app/src/components/InputField.tsx b/app/src/components/InputField.tsx index 86d6907..6e52dd3 100644 --- a/app/src/components/InputField.tsx +++ b/app/src/components/InputField.tsx @@ -4,8 +4,8 @@ export const InputField = ({ id, name, value, onChange, className='' }) => { return (
- - + +
); } \ No newline at end of file diff --git a/app/src/components/footer.tsx b/app/src/components/footer.tsx index b88a104..40441e5 100644 --- a/app/src/components/footer.tsx +++ b/app/src/components/footer.tsx @@ -11,8 +11,8 @@ export const Footer = () => {

Backend:

-

Frontend: - +

Frontend: +

diff --git a/app/src/components/layout.tsx b/app/src/components/layout.tsx index 69f9808..0d33535 100644 --- a/app/src/components/layout.tsx +++ b/app/src/components/layout.tsx @@ -25,14 +25,7 @@ export const Layout: FC = ({ dim=false, children }) => { -
-
- -
- {children} -
-
-
+ {children} ); } \ No newline at end of file diff --git a/app/src/pages/demo.tsx b/app/src/pages/demo.tsx new file mode 100644 index 0000000..f53340b --- /dev/null +++ b/app/src/pages/demo.tsx @@ -0,0 +1,171 @@ +import type { NextPage } from "next"; +import { Layout } from "@/components/layout"; +import Image from "next/image"; +import { useState, useEffect, useLayoutEffect, useRef } from "react"; +import Header, { notify, ToastType } from "@/components/header"; +import { Footer } from "@/components/footer"; +import React from "react"; +import { handleInputChange } from "@/lib/handleInputChange"; +import { InputField } from "@/components/InputField"; +import OutlineButton from "@/components/OutlineButton"; +import { useToasts } from "@/components/ToastProvider"; +import { useSession } from 'next-auth/react' +import Background from '@/components/Background'; + +const Session = ({ data, onClick = () => { }, ...props }) => { + return ( +
+ +

Caller Phone: {data.callerPhone}

+

Started At: {data.startedAt}

+
+ ); +} + +const Demo: NextPage = ({ 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', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${session['token'].sub}` + }, + body: JSON.stringify({ + phone: input.phone + }) + }) + + 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 ( + +
+
+ +
+
+ { + session ? + <> + {focusSession ? +
+ +
+

Caller: {focusSession.callerPhone} | {focusSession.startedAt}

+ +
+

Summary: {focusSession.summary}

+ {focusSession.messages.map(msg => { + return ( +
+

{msg.role}: {msg.content}

+

+
+ ); + })} +
+ : null + } +
+
+

Hey {session.user.name.split(' ')[0]}!

+

Can you give us your number real quick?

+ +
+
+ handleInputChange(e, input, setInput)} className="w-full" /> +
+
+ +
+
+
+
+

Active Calls

+
+ {sessions.map(session => + popOut(session)} /> + )} +
+
+
+ + + : null + } +
+
+
+
+ + + ); +}; + + +export default Demo; diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx index 44b6717..c8abcfc 100644 --- a/app/src/pages/index.tsx +++ b/app/src/pages/index.tsx @@ -12,148 +12,35 @@ import OutlineButton from "@/components/OutlineButton"; import { useToasts } from "@/components/ToastProvider"; import { useSession } from 'next-auth/react' -const Session = ({ data, onClick = () => { }, ...props }) => { +const PageButton = ({ name = "", link, className = "" }) => { return ( -
- -

Caller Phone: {data.callerPhone}

-

Started At: {data.startedAt}

-
+ {name} {"->"} ); } const Home: NextPage = ({ 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', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${session['token'].sub}` - }, - body: JSON.stringify({ - phone: input.phone - }) - }) - - 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 ( -
- { - session ? - <> - {focusSession ? -
- -
-

Caller: {focusSession.callerPhone} | {focusSession.startedAt}

- -
-

Summary: {focusSession.summary}

- {focusSession.messages.map(msg => { - return ( -
-

{msg.role}: {msg.content}

-

-
- ); - })} -
- : null - } -
-
-

Hey {session.user.name.split(' ')[0]}!

-

Can you give us your number real quick?

- -
-
- handleInputChange(e, input, setInput)} className="w-full" /> -
-
- -
-
-
-
-

Active Calls

-
- {sessions.map(session => - popOut(session)} /> - )} -
-
+
+ +
+
+
+

vi·tal·i·ty

+

[vī'talədē]  noun

+
    +
  • The state of being strong and active; energy. The power giving continuance of life, present in all living things.
    • +
  • A next-gen platform connnecting callers in crisis to an AI-powered chatbot for compassionate and responsive support.
    • +
+
+ +
+
- - : null - } +
+
+
); diff --git a/app/src/styles/globals.css b/app/src/styles/globals.css index 461bbaf..7e1a93e 100644 --- a/app/src/styles/globals.css +++ b/app/src/styles/globals.css @@ -74,4 +74,20 @@ a { 100% { opacity: 0; } +} + +.sphere { + position: absolute; + top: calc(50% - 150px); + left: calc(50% - 150px); + height: 300px; + width: 300px; + border-radius: 50%; + box-shadow: inset 0 0 50px #fff, + inset 20px 0 80px #f0f, + inset -20px 0 80px #0ff, + inset 20px 0 300px #f0f, + inset -20px 0 300px #0ff, + 0 0 50px #fff, + 10px 0 400px #f0f; } \ No newline at end of file