details modal

Author: swasthikshetty10

src/components/modal/index.tsx

@@ -19,7 +19,7 @@ const Modal: FunctionComponent<ModalProps> = ({
   const { data, error, isLoading } = api.rooms.getRoomSummary.useQuery({
     roomName,
   });
-
+  console.log(data);
   // input array
   // output array-> contents [0].utterance
 
@@ -58,16 +58,23 @@ const Modal: FunctionComponent<ModalProps> = ({
                   as="h3"
                   className="gradient-text text-lg font-medium leading-6"
                 >
-                  Summary
+                  Meeting Details
                 </Dialog.Title>
-                <div className="mt-2">
-                  {isLoading && <Loader />}
-                  {data && (
+                <div className="">
+                  {isLoading ? (
+                    <Loader />
+                  ) : data ? (
+                    <div className="text-sm text-gray-100 text-opacity-50">
+                      {data.output[0].contents.length > 1 && (
+                        <Tabs
+                          summary={data.output[0].contents[1]?.utterance}
+                          transcriptions={data.input}
+                        />
+                      )}
+                    </div>
+                  ) : (
                     <div className="text-sm text-gray-100 text-opacity-50">
-                      <Tabs
-                        summary={data.output[0].content[0].utterance}
-                        transcriptions={data.input}
-                      />
+                      No summary available
                     </div>
                   )}
                 </div>

src/components/tabs/index.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Tab } from "@headlessui/react";
 
 function classNames(...classes: (string | undefined)[]) {
@@ -15,14 +14,14 @@ export default function Tabs({
   return (
     <div className="w-full max-w-md px-2 py-16 sm:px-0">
       <Tab.Group>
-        <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
+        <Tab.List className="flex gap-10 rounded-xl bg-gray-900/60 p-1">
           <Tab
             className={({ selected }) =>
               classNames(
-                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
-                "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 ",
+                " ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
                 selected
-                  ? "bg-white shadow"
+                  ? "bg-secondary/10 shadow"
                   : "text-blue-100 hover:bg-white/[0.12] hover:text-white"
               )
             }
@@ -33,25 +32,35 @@ export default function Tabs({
           <Tab
             className={({ selected }) =>
               classNames(
-                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 ",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
                 selected
-                  ? "bg-white shadow"
+                  ? "bg-secondary-300/10 shadow"
                   : "text-blue-100 hover:bg-white/[0.12] hover:text-white"
               )
             }
           >
-            Transcriptions
+            Transcription
           </Tab>
         </Tab.List>
-        <Tab.Panels className="mt-2">
-          <Tab.Panel
-            className={classNames(
-              "rounded-xl bg-white p-3",
-              "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2"
-            )}
-          >
-            
+        <Tab.Panels className="mt-2 space-x-10">
+          <Tab.Panel>
+            <p className="text-lg text-white">{summary}</p>
+          </Tab.Panel>
+          <Tab.Panel>
+            {transcriptions.map((transcription: any, index) => {
+              return (
+                <div className="bg-white-opacity-5 w-full p-2" key={index}>
+                  <h2 className="gradient-text">{transcription?.speaker}</h2>
+                  <p className="font-lg text-white">
+                    {transcription.utterance}
+                  </p>
+                  <div className="text-sm font-bold text-gray-100 text-opacity-50">
+                    {transcription.timestamp}
+                  </div>
+                </div>
+              );
+            })}
           </Tab.Panel>
         </Tab.Panels>
       </Tab.Group>

src/server/api/routers/rooms.ts

@@ -167,9 +167,7 @@ export const roomsRouter = createTRPCRouter({
         timestamp: transcript.createdAt.toISOString(),
       }));
       if (chatLog.length === 0) {
-        return {
-          data: null,
-        };
+        return null;
       }
 
       const apiKey = process.env.ONEAI_API_KEY;