fix something

Author: pimpithecat

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# opencode
+opencode.jsonc

CLAUDE.md

@@ -77,6 +77,22 @@ The app uses Next.js 15 App Router with two main pages:
 - `/api/csrf-token`: Provides CSRF tokens for secure state-changing requests
 - `/api/save-analysis`: Saves complete video analysis to database
 
+### Translation Feature
+
+**Transcript Translation (EN ↔ ID)**
+- Toggle button in Transcript Viewer header (next to Auto/Manual toggle)
+- Uses OpenAI GPT-4o mini for high-quality translation
+- Batch processing: 30 segments per request for optimal performance
+- Parallel processing across batches
+- Smart caching:
+  - Memory cache: Instant toggle between languages within session
+  - Database cache: Persistent storage in `translated_transcripts` JSONB column
+  - Auto-load cached translations on video revisit
+- AI Chat integration: Automatically uses transcript in active language
+- Background saving: Non-blocking database updates
+- Files: `app/api/translate-transcript/route.ts`, `components/transcript-viewer.tsx`
+- Migration: `supabase/migrations/20241027000000_add_translated_transcripts.sql`
+
 ### Key Technical Implementation
 
 #### Quote Matching System (`lib/quote-matcher.ts`)
@@ -317,6 +333,7 @@ The application uses aggressive parallel processing to minimize latency:
 ### Environment Variables
 Required in `.env.local`:
 - `GEMINI_API_KEY`: Google Gemini API key for AI generation
+- `OPENAI_API_KEY`: OpenAI API key for transcript translation (GPT-4o mini)
 - `SUPADATA_API_KEY`: Supadata API key for transcript fetching
 - `NEXT_PUBLIC_SUPABASE_URL`: Supabase project URL
 - `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Supabase anonymous key

app/analyze/[videoId]/page.tsx

@@ -104,6 +104,7 @@ export default function AnalyzePage() {
   const [videoInfo, setVideoInfo] = useState<VideoInfo | null>(null);
   const [videoPreview, setVideoPreview] = useState<string>("");
   const [transcript, setTranscript] = useState<TranscriptSegment[]>([]);
+  const [translatedTranscripts, setTranslatedTranscripts] = useState<Record<string, TranscriptSegment[]>>({});
   const [topics, setTopics] = useState<Topic[]>([]);
   const [baseTopics, setBaseTopics] = useState<Topic[]>([]);
   const [themes, setThemes] = useState<string[]>([]);
@@ -491,6 +492,11 @@ export default function AnalyzePage() {
 
           // Load all cached data
           setTranscript(sanitizedTranscript);
+          
+          console.log('[AnalyzePage] Cached translations from API:', cacheData.translatedTranscripts);
+          if (cacheData.translatedTranscripts) {
+            setTranslatedTranscripts(cacheData.translatedTranscripts);
+          }
 
           const cachedVideoInfo = cacheData.videoInfo ?? null;
           if (cachedVideoInfo) {
@@ -776,8 +782,9 @@ export default function AnalyzePage() {
       setGenerationStartTime(Date.now());
 
       // Create abort controllers for both requests
-      const topicsController = abortManager.current.createController('topics');
-      const takeawaysController = abortManager.current.createController('takeaways', 60000);
+      // Extended timeout for AI generation (Gemini can take 60+ seconds)
+      const topicsController = abortManager.current.createController('topics', 120000); // 2 minutes
+      const takeawaysController = abortManager.current.createController('takeaways', 120000); // 2 minutes
 
       // Start topics generation using cached video-analysis endpoint
       const topicsPromise = fetch("/api/video-analysis", {
@@ -1684,6 +1691,9 @@ export default function AnalyzePage() {
                   onCancelEditing={handleCancelEditing}
                   isAuthenticated={!!user}
                   onRequestSignIn={promptSignInForNotes}
+                  youtubeId={videoId}
+                  cachedTranslations={translatedTranscripts}
+                  onTranslationUpdate={setTranslatedTranscripts}
                 />
               </div>
             </div>

app/api/chat/route.ts

@@ -126,6 +126,13 @@ ${chatHistoryContext || 'No prior conversation'}
 </context>
 <goal>Deliver concise, factual answers. Use the transcript when it is relevant to the question; otherwise respond with your best general knowledge.</goal>
 <instructions>
+  <step name="Language Detection">
+    <item>CRITICAL: Detect the language of the user's question and the transcript.</item>
+    <item>If the user asks in Indonesian, respond in Indonesian.</item>
+    <item>If the user asks in English, respond in English.</item>
+    <item>If the transcript is in Indonesian, use Indonesian context naturally.</item>
+    <item>Always match the user's language in your response.</item>
+  </step>
   <step name="Assess Intent">
     <item>Decide whether the user's question requires information from the transcript.</item>
     <item>If the question is general knowledge or unrelated to the video, answer directly without forcing transcript references.</item>
@@ -137,16 +144,18 @@ ${chatHistoryContext || 'No prior conversation'}
     <item>List the same timestamps in the timestamps array, zero-padded and in the order they appear. Provide no more than five unique timestamps.</item>
   </step>
   <step name="AnswerFormatting">
+    <item>Respond in the SAME LANGUAGE as the user's question.</item>
     <item>Respond in concise, complete sentences that mirror the transcript's language when applicable.</item>
     <item>If the transcript lacks the requested information or was unnecessary, state that clearly and return an empty timestamps array.</item>
   </step>
 </instructions>
 <validationChecklist>
+  <item>Did you respond in the SAME LANGUAGE as the user's question?</item>
   <item>If you cited the transcript, does every factual statement have a supporting timestamp in brackets?</item>
   <item>Are all timestamps valid moments within the transcript?</item>
   <item>If the transcript was unnecessary or lacked the answer, did you state that and keep the timestamps array empty?</item>
 </validationChecklist>
-<outputFormat>Return strict JSON object: {"answer":"string","timestamps":["MM:SS"]}. No extra commentary.</outputFormat>
+<outputFormat>Return strict JSON object: {"answer":"string","timestamps":["MM:SS"]}. No extra commentary. The "answer" field must be in the SAME LANGUAGE as the user's question.</outputFormat>
 <transcript><![CDATA[
 ${transcriptContext}
 ]]></transcript>

app/api/check-video-cache/route.ts

@@ -55,6 +55,7 @@ async function handler(req: NextRequest) {
         videoId: videoId,
         topics: cachedVideo.topics,
         transcript: cachedVideo.transcript,
+        translatedTranscripts: cachedVideo.translated_transcripts || {},
         videoInfo: {
           title: cachedVideo.title,
           author: cachedVideo.author,

app/api/generate-summary/route.ts

@@ -207,3 +207,6 @@ export const POST = withSecurity(handler, {
   maxBodySize: 10 * 1024 * 1024, // 10MB for large transcripts
   allowedMethods: ['POST']
 });
+
+// Allow up to 2 minutes for AI summary generation
+export const maxDuration = 120;

app/api/generate-topics/route.ts

@@ -58,4 +58,6 @@ export const POST = withSecurity(handler, {
   maxBodySize: 10 * 1024 * 1024, // 10MB for large transcripts
   allowedMethods: ['POST']
   // Note: Rate limiting is handled internally by the route for dynamic limits based on auth
-});
+});
+// Allow up to 2 minutes for AI topic generation
+export const maxDuration = 120;

app/api/notes/route.ts

@@ -99,11 +99,15 @@ async function handler(req: NextRequest) {
   if (req.method === 'POST') {
     try {
       const body = await req.json();
+      console.log('[notes API] POST request body:', body);
+      
       const validatedData = noteInsertSchema.parse(body);
+      console.log('[notes API] Validated data:', validatedData);
 
       const youtubeId = validatedData.youtubeId;
 
       if (!youtubeId) {
+        console.error('[notes API] Missing youtubeId');
         return NextResponse.json(
           { error: 'youtubeId is required' },
           { status: 400 }
@@ -122,43 +126,51 @@ async function handler(req: NextRequest) {
       }
 
       const video = videos?.[0];
+      console.log('[notes API] Found video:', video);
 
       if (!video?.id) {
+        console.error('[notes API] Video not found for youtubeId:', youtubeId);
         return NextResponse.json(
           { error: 'Video not found' },
           { status: 404 }
         );
       }
 
+      const insertPayload = {
+        user_id: user.id,
+        video_id: video.id,
+        source: validatedData.source,
+        source_id: validatedData.sourceId ?? null,
+        note_text: validatedData.text,
+        metadata: validatedData.metadata ?? null
+      };
+      console.log('[notes API] Inserting note with payload:', insertPayload);
+
       const { data: noteRow, error } = await supabase
         .from('user_notes')
-        .insert({
-          user_id: user.id,
-          video_id: video.id,
-          source: validatedData.source,
-          source_id: validatedData.sourceId || null,
-          note_text: validatedData.text,
-          metadata: validatedData.metadata || {}
-        })
+        .insert(insertPayload)
         .select()
         .single();
 
       if (error) {
+        console.error('[notes API] Supabase insert error:', error);
         throw error;
       }
 
+      console.log('[notes API] Note created successfully:', noteRow);
       return NextResponse.json({ note: mapNote(noteRow as NoteRow) }, { status: 201 });
     } catch (error) {
       if (error instanceof z.ZodError) {
+        console.error('[notes API] Validation error:', error.issues);
         return NextResponse.json(
           { error: 'Validation failed', details: formatValidationError(error) },
           { status: 400 }
         );
       }
 
-      console.error('Error creating note:', error);
+      console.error('[notes API] Error creating note:', error);
       return NextResponse.json(
-        { error: 'Failed to save note' },
+        { error: 'Failed to save note', details: error instanceof Error ? error.message : 'Unknown error' },
         { status: 500 }
       );
     }

app/api/save-analysis/route.ts

@@ -22,7 +22,12 @@ const saveAnalysisSchema = z.object({
   topics: z.array(z.any()),
   summary: z.string().nullable().optional(),
   suggestedQuestions: z.array(z.string()).nullable().optional(),
-  model: z.string().default('gemini-2.5-flash')
+  model: z.string().default('gemini-2.5-flash'),
+  translatedTranscripts: z.record(z.string(), z.array(z.object({
+    text: z.string(),
+    start: z.number(),
+    duration: z.number()
+  }))).optional()
 });
 
 async function handler(req: NextRequest) {
@@ -52,7 +57,8 @@ async function handler(req: NextRequest) {
       topics,
       summary,
       suggestedQuestions,
-      model
+      model,
+      translatedTranscripts
     } = validatedData;
 
     const supabase = await createClient();
@@ -75,6 +81,17 @@ async function handler(req: NextRequest) {
       })
       .single();
 
+    if (result && translatedTranscripts && Object.keys(translatedTranscripts).length > 0) {
+      const { error: updateError } = await supabase
+        .from('video_analyses')
+        .update({ translated_transcripts: translatedTranscripts })
+        .eq('youtube_id', videoId);
+
+      if (updateError) {
+        console.error('Error saving translated transcripts:', updateError);
+      }
+    }
+
     if (saveError) {
       console.error('Error saving video analysis:', saveError);
       return NextResponse.json(

app/api/transcript/route.ts

@@ -31,12 +31,15 @@ async function handler(request: NextRequest) {
     }
 
     let transcriptSegments: any[] | null = null;
+    
     try {
+      console.log('[transcript API] Fetching transcript from Supadata for videoId:', videoId);
       const response = await fetch(`https://api.supadata.ai/v1/youtube/transcript?url=https://www.youtube.com/watch?v=${videoId}&lang=en`, {
         method: 'GET',
         headers: {
           'x-api-key': apiKey,
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
         }
       });