Fix props

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -93,6 +93,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             useActiveTopic={useActiveTopic}
             autoscroll={false}
             transcriptId={transcriptId}
+            status={transcript.response?.status}
+            currentTranscriptText=""
           />
           {transcript.response && topics.topics ? (
             <>

www/app/[domain]/transcripts/fileUploadButton.tsx

@@ -37,7 +37,7 @@ export default function FileUploadButton(props: FileUploadButton) {
         onClick={triggerFileUpload}
         colorScheme="blue"
         mr={2}
-        disabled={props.disabled}
+        isDisabled={props.disabled}
       >
         Upload File
       </Button>

www/app/[domain]/transcripts/topicList.tsx

@@ -42,7 +42,7 @@ export function TopicList({
 
   const scrollToTopic = () => {
     const topicDiv = document.getElementById(
-      `accordion-button-topic-${activeTopic?.id}`,
+      `accordion-button-topic-${activeTopic?.id}`
     );
 
     setTimeout(() => {
@@ -63,7 +63,7 @@ export function TopicList({
   const toggleScroll = (element) => {
     const bottom =
       Math.abs(
-        element.scrollHeight - element.clientHeight - element.scrollTop,
+        element.scrollHeight - element.clientHeight - element.scrollTop
       ) < 2 || element.scrollHeight == element.clientHeight;
     if (!bottom && autoscrollEnabled) {
       setAutoscrollEnabled(false);
@@ -97,7 +97,7 @@ export function TopicList({
     if (!participants.response) return;
     return (
       participants.response.find(
-        (participant) => participant.speaker == speakerNumber,
+        (participant) => participant.speaker == speakerNumber
       )?.name || `Speaker ${speakerNumber}`
     );
   };
@@ -134,6 +134,8 @@ export function TopicList({
         overflowY={"auto"}
         h={"100%"}
         onScroll={handleScroll}
+        width="full"
+        padding={2}
       >
         {topics.length > 0 && (
           <Accordion
@@ -146,17 +148,16 @@ export function TopicList({
                 key={index}
                 background={{
                   base: "light",
-                  _hover: "gray.100",
-                  _focus: "gray.100",
+                  hover: "gray.100",
+                  focus: "gray.100",
                 }}
-                padding={2}
                 id={`topic-${topic.id}`}
               >
                 <Flex dir="row" letterSpacing={".2"}>
                   <AccordionButton
                     onClick={() => {
                       setActiveTopic(
-                        activeTopic?.id == topic.id ? null : topic,
+                        activeTopic?.id == topic.id ? null : topic
                       );
                     }}
                   >
@@ -199,7 +200,7 @@ export function TopicList({
                             fontSize={"sm"}
                             color={generateHighContrastColor(
                               `Speaker ${segment.speaker}`,
-                              [96, 165, 250],
+                              [96, 165, 250]
                             )}
                           >
                             {" "}

www/app/styles/icons/pause.tsx

@@ -5,8 +5,8 @@ export default function PauseIcon(props) {
     <Icon viewBox="0 0 30 30" {...props}>
       <path
         fill="currentColor"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.514 5.5C11.514 4.11929 10.3947 3 9.01404 3C7.63333 3 6.51404 4.11929 6.51404 5.5V24.5C6.51404 25.8807 7.63333 27 9.01404 27C10.3947 27 11.514 25.8807 11.514 24.5L11.514 5.5ZM23.486 5.5C23.486 4.11929 22.3667 3 20.986 3C19.6053 3 18.486 4.11929 18.486 5.5L18.486 24.5C18.486 25.8807 19.6053 27 20.986 27C22.3667 27 23.486 25.8807 23.486 24.5V5.5Z"
       />
     </Icon>