Update YouTubeURLInput component to handle YouTube video transcripts

src/apps/chat/components/persona-selector/YouTubeURLInput.tsx

@@ -1,14 +1,33 @@
 import * as React from 'react';
 import { Button, Input } from '@mui/joy';
 import YouTubeIcon from '@mui/icons-material/YouTube';
+import { useYouTubeTranscript, YTVideoTranscript } from '~/modules/youtube/useYouTubeTranscript'; // Adjust the import path as necessary
 
 interface YouTubeURLInputProps {
-  onSubmit: (url: string) => void;
+  onSubmit: (transcript: string) => void;
   isFetching: boolean;
 }
 
 export const YouTubeURLInput: React.FC<YouTubeURLInputProps> = ({ onSubmit, isFetching }) => {
   const [url, setUrl] = React.useState('');
+  const [submitFlag, setSubmitFlag] = React.useState(false);
+
+  // Function to extract video ID from URL
+  function extractVideoID(videoURL: string): string | null {
+    const regExp = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^#&?]*).*/;
+    const match = videoURL.match(regExp);
+    return (match && match[1]?.length == 11) ? match[1] : null;
+  }
+
+  const videoID = extractVideoID(url);
+
+  // Callback function to handle new transcript
+  const handleNewTranscript = (newTranscript: YTVideoTranscript) => {
+    onSubmit(newTranscript.transcript); // Pass the transcript text to the onSubmit handler
+    setSubmitFlag(false); // Reset submit flag after handling
+  };
+
+  const { transcript, isFetching: isTranscriptFetching, isError, error } = useYouTubeTranscript(videoID && submitFlag ? videoID : null, handleNewTranscript);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setUrl(event.target.value);
@@ -16,9 +35,7 @@ export const YouTubeURLInput: React.FC<YouTubeURLInputProps> = ({ onSubmit, isFe
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault(); // Prevent form from causing a page reload
-    if (onSubmit && url) {
-      onSubmit(url);
-    }
+    setSubmitFlag(true); // Set flag to indicate a submit action
   };
 
   return (
@@ -27,7 +44,7 @@ export const YouTubeURLInput: React.FC<YouTubeURLInputProps> = ({ onSubmit, isFe
         required
         type='url'
         fullWidth
-        disabled={isFetching}
+        disabled={isFetching || isTranscriptFetching}
         variant='outlined'
         placeholder='Enter YouTube Video URL'
         value={url}
@@ -38,12 +55,13 @@ export const YouTubeURLInput: React.FC<YouTubeURLInputProps> = ({ onSubmit, isFe
       <Button
         type='submit'
         variant='solid'
-        disabled={isFetching || !url}
-        loading={isFetching}
+        disabled={isFetching || isTranscriptFetching || !url}
+        loading={isFetching || isTranscriptFetching}
         sx={{ minWidth: 140 }}
       >
         Get Transcript
       </Button>
+      {isError && <div>Error fetching transcript. Please try again.</div>}
     </form>
   );
 };