midterm-submission

podcraft/src/pages/PodcastForm.tsx

@@ -2,7 +2,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import '../App.css';
 
-const API_URL = 'http://localhost:8000';
+// Use relative URLs in production, full URLs in development
+const isDevelopment = window.location.hostname === 'localhost';
+const API_URL = isDevelopment ? 'http://localhost:8000' : '';
 
 interface Message {
   id: number;
@@ -15,6 +17,8 @@ interface Podcast {
   title: string;
   description: string;
   audio_file: string;
+  filename?: string;
+  category?: string;
 }
 
 interface PodcastContext {
@@ -30,6 +34,7 @@ const PodcastForm: React.FC = () => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputMessage, setInputMessage] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>("");
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -48,12 +53,30 @@ const PodcastForm: React.FC = () => {
         }
         const files = await response.json();
         
-        const podcastList = files.map((file: any, index: number) => ({
-          id: index + 1,
-          title: file.filename.split('-')[0].replace(/_/g, ' '),
-          description: "An AI-generated debate podcast exploring different perspectives",
-          audio_file: `${API_URL}${file.path}`
-        }));
+        const podcastList = files.map((file: any, index: number) => {
+          const filename = file.filename;
+          const parts = filename.split('-');
+          let queryPart = '', descriptionPart = '', categoryWithExt = '';
+          
+          if (parts.length >= 3) {
+            [queryPart, descriptionPart, categoryWithExt] = parts;
+          } else {
+            queryPart = parts[0] || '';
+            descriptionPart = parts[1] || queryPart;
+            categoryWithExt = parts[2] || 'general.mp3';
+          }
+          
+          const category = categoryWithExt.replace('.mp3', '');
+          
+          return {
+            id: index + 1,
+            title: descriptionPart.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase()),
+            description: `A debate exploring ${queryPart.replace(/_/g, ' ')}`,
+            audio_file: `${API_URL}${file.path}`,
+            filename: filename,
+            category: category.replace(/_/g, ' ')
+          };
+        });
 
         const selectedPodcast = podcastList.find(p => p.id === parseInt(id));
         if (selectedPodcast) {
@@ -68,6 +91,7 @@ const PodcastForm: React.FC = () => {
         }
       } catch (err) {
         console.error('Error fetching podcast:', err);
+        setError(err instanceof Error ? err.message : 'Failed to fetch podcast');
       }
     };
 
@@ -89,7 +113,7 @@ const PodcastForm: React.FC = () => {
     setIsLoading(true);
 
     try {
-      const response = await fetch(`${API_URL}/podcast-chat/${id}`, {
+      const response = await fetch(`${API_URL}/api/podcast-chat/${id}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -128,9 +152,17 @@ const PodcastForm: React.FC = () => {
     <div className="podcast-form-container">
       <div className="chat-column">
         <div className="podcast-chat-container">
+          {error && (
+            <div className="error-message">Error: {error}</div>
+          )}
+          
           {podcast && (
             <div className="podcast-player-header">
               <h2 className="podcast-title">{podcast.title}</h2>
+              {podcast.category && (
+                <div className="category-pill">{podcast.category}</div>
+              )}
+              <p className="description">{podcast.description}</p>
               {podcastContext && (
                 <p className="podcast-topic">Topic: {podcastContext.topic}</p>
               )}