Skip to content

Commit 0ee4cec

Browse files
swasthikshetty10swasthikshetty10
committed
2 parents 8339d09 + 97e33e4 commit 0ee4cec

File tree

7 files changed

+160
-26
lines changed

7 files changed

+160
-26
lines changed

‎package-lock.json

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"start": "next start"
1111
},
1212
"dependencies": {
13+
"@headlessui/react": "^1.7.13",
1314
"@livekit/components-react": "0.5.0",
1415
"@livekit/components-styles": "0.2.0",
1516
"@next-auth/prisma-adapter": "^1.0.5",

‎src/components/animation/typing.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function Typing() {
44
return (
55
<TypeAnimation
66
cursor={true}
7-
sequence={["Jab We Meet", 3000, "जब हम मिले", 3000, "ಜಬ್ ವಿ ಮೆಟ್", 3000]}
7+
sequence={["Jab We Meet", 3000, "जब हम मिले", 3000, "お目にかかった際に", 3000]}
88
wrapper="h2"
99
className="gradient-text text-3xl font-semibold sm:text-3xl lg:text-3xl xl:text-5xl 2xl:text-6xl"
1010
repeat={Infinity}

‎src/components/card/index.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ function Card({
1313
createdAt: Date;
1414
};
1515
}) {
16-
const [modal, setModal] = useState(false);
16+
let [isOpen, setIsOpen] = useState(false)
17+
1718
return (
1819
<div className="m-4 flex flex-col items-center justify-center rounded-2xl bg-white bg-opacity-5 p-4 shadow-lg backdrop-blur-lg backdrop-filter hover:bg-opacity-10">
1920
<div key={room.name}>
@@ -36,18 +37,19 @@ function Card({
3637

3738
<PopAnimation className="flex flex-row items-center justify-center">
3839
<button
39-
onClick={() => setModal(true)}
40+
onClick={() => setIsOpen(true)}
4041
className="mt-5 flex flex-row items-center justify-center space-x-2 rounded-lg bg-gray-100 bg-opacity-5 p-2 backdrop-blur-lg backdrop-filter hover:bg-gray-100 hover:bg-opacity-10"
4142
>
4243
<IoDocumentTextOutline
4344
className="text-2xl text-gray-100"
4445
size={15}
4546
/>
46-
<div>Summary</div>
47+
<div>Details</div>
4748
</button>
4849
</PopAnimation>
49-
{modal && (
50-
<Modal roomName={room.name} onClose={() => setModal(false)}></Modal>
50+
51+
{isOpen && (
52+
<Modal roomName={room.name} setIsOpen={setIsOpen} visible={isOpen} />
5153
)}
5254
</div>
5355
</div>

‎src/components/modal/index.tsx

Lines changed: 68 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,82 @@
1-
import { type FunctionComponent } from "react";
1+
import { Dispatch, SetStateAction, type FunctionComponent } from "react";
22
import { api } from "~/utils/api";
3+
import { Dialog, Transition } from "@headlessui/react";
4+
import { Fragment, useState } from "react";
5+
import Loader from "../loader";
6+
import Tabs from "../tabs";
37

48
type ModalProps = {
5-
onClose: () => void;
9+
setIsOpen: Dispatch<SetStateAction<boolean>>;
610
roomName: string;
11+
visible: boolean;
712
};
813

9-
const Modal: FunctionComponent<ModalProps> = ({ onClose, roomName }) => {
10-
const handleOnClose = (element: HTMLDivElement) => {
11-
if (element.id === "container") onClose();
12-
};
14+
const Modal: FunctionComponent<ModalProps> = ({
15+
setIsOpen,
16+
roomName,
17+
visible,
18+
}) => {
1319
const { data, error, isLoading } = api.rooms.getRoomSummary.useQuery({
1420
roomName,
1521
});
1622

23+
// input array
24+
// output array-> contents [0].utterance
25+
1726
return (
18-
<div
19-
id="container"
20-
onClick={(e) => handleOnClose(e.target as HTMLDivElement)}
21-
className="fixed inset-0 z-50 flex justify-center overflow-y-scroll bg-black bg-opacity-70 p-1 backdrop-blur-lg md:p-5 "
22-
>
23-
{}
24-
</div>
27+
<Transition appear show={visible} as={Fragment}>
28+
<Dialog
29+
as="div"
30+
className="relative z-10"
31+
onClose={() => setIsOpen(false)}
32+
>
33+
<Transition.Child
34+
as={Fragment}
35+
enter="ease-out duration-300"
36+
enterFrom="opacity-0"
37+
enterTo="opacity-100"
38+
leave="ease-in duration-200"
39+
leaveFrom="opacity-100"
40+
leaveTo="opacity-0"
41+
>
42+
<div className="fixed inset-0 bg-black bg-opacity-25" />
43+
</Transition.Child>
44+
45+
<div className="fixed inset-0 overflow-y-auto">
46+
<div className="flex min-h-full items-center justify-center p-4 text-center">
47+
<Transition.Child
48+
as={Fragment}
49+
enter="ease-out duration-300"
50+
enterFrom="opacity-0 scale-95"
51+
enterTo="opacity-100 scale-100"
52+
leave="ease-in duration-200"
53+
leaveFrom="opacity-100 scale-100"
54+
leaveTo="opacity-0 scale-95"
55+
>
56+
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white bg-opacity-10 p-6 text-left align-middle shadow-xl backdrop-blur-2xl backdrop-filter transition-all">
57+
<Dialog.Title
58+
as="h3"
59+
className="gradient-text text-lg font-medium leading-6"
60+
>
61+
Summary
62+
</Dialog.Title>
63+
<div className="mt-2">
64+
{isLoading && <Loader />}
65+
{data && (
66+
<div className="text-sm text-gray-100 text-opacity-50">
67+
<Tabs
68+
summary={data.output[0].content[0].utterance}
69+
transcriptions={data.input}
70+
/>
71+
</div>
72+
)}
73+
</div>
74+
</Dialog.Panel>
75+
</Transition.Child>
76+
</div>
77+
</div>
78+
</Dialog>
79+
</Transition>
2580
);
2681
};
2782

‎src/components/tabs/index.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useState } from "react";
2+
import { Tab } from "@headlessui/react";
3+
4+
function classNames(...classes: (string | undefined)[]) {
5+
return classes.filter(Boolean).join(" ");
6+
}
7+
8+
export default function Tabs({
9+
summary,
10+
transcriptions,
11+
}: {
12+
summary: string;
13+
transcriptions: string[];
14+
}) {
15+
return (
16+
<div className="w-full max-w-md px-2 py-16 sm:px-0">
17+
<Tab.Group>
18+
<Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
19+
<Tab
20+
className={({ selected }) =>
21+
classNames(
22+
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
23+
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
24+
selected
25+
? "bg-white shadow"
26+
: "text-blue-100 hover:bg-white/[0.12] hover:text-white"
27+
)
28+
}
29+
>
30+
Summary
31+
</Tab>
32+
33+
<Tab
34+
className={({ selected }) =>
35+
classNames(
36+
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
37+
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
38+
selected
39+
? "bg-white shadow"
40+
: "text-blue-100 hover:bg-white/[0.12] hover:text-white"
41+
)
42+
}
43+
>
44+
Transcriptions
45+
</Tab>
46+
</Tab.List>
47+
<Tab.Panels className="mt-2">
48+
<Tab.Panel
49+
className={classNames(
50+
"rounded-xl bg-white p-3",
51+
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2"
52+
)}
53+
>
54+
55+
</Tab.Panel>
56+
</Tab.Panels>
57+
</Tab.Group>
58+
</div>
59+
);
60+
}

‎src/utils/speak.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import { transliterate } from "transliteration";
22

3-
let lastSpokenText = '';
3+
let lastSpokenText = "";
44

5-
const speakOut = async (text: string, isEmpty:boolean, lang?: string) => {
5+
const speakOut = async (text: string, isEmpty: boolean, lang?: string) => {
66
if (text === lastSpokenText) {
7-
console.log('Skipping speaking text again:', text);
7+
console.log("Skipping speaking text again:", text);
88
return;
99
}
1010

11-
if(isEmpty) lastSpokenText=''
11+
if (isEmpty) lastSpokenText = "";
1212

13-
console.log('speakOut function called with text:', text);
13+
console.log("speakOut function called with text:", text);
1414

1515
let speech = new SpeechSynthesisUtterance();
16-
speech.lang = 'hi-IN';
16+
speech.lang = lang || "en-US";
1717

1818
let englishText = transliterate(text);
1919
speech.text = englishText;
2020

21-
console.log('SpeechSynthesisUtterance:', speech);
21+
console.log("SpeechSynthesisUtterance:", speech);
2222
speechSynthesis.speak(speech);
2323

2424
lastSpokenText = text;

0 commit comments

Comments
 (0)