Fix frontend TypeScript types and API integration

backend/app/core/config.py

@@ -15,8 +15,8 @@ class Settings(BaseSettings):
         "http://localhost:3000",
         "http://localhost:12000",
         "http://localhost:12001",
-        "https://work-1-nddcgiroczfpnzeg.prod-runtime.all-hands.dev",
-        "https://work-2-nddcgiroczfpnzeg.prod-runtime.all-hands.dev"
+        "https://work-1-akhmacjqfeabtotb.prod-runtime.all-hands.dev",
+        "https://work-2-akhmacjqfeabtotb.prod-runtime.all-hands.dev"
     ]
 
     # External APIs

frontend/src/components/shared/summary-form.tsx

@@ -16,12 +16,10 @@ import type { SummaryCreate, SummaryResponse } from '@/types'
 
 const urlSchema = z.object({
   url: z.string().url('Please enter a valid URL'),
-  title: z.string().min(1, 'Title is required'),
 })
 
 const textSchema = z.object({
-  content: z.string().min(10, 'Content must be at least 10 characters'),
-  title: z.string().min(1, 'Title is required'),
+  text: z.string().min(10, 'Content must be at least 10 characters'),
 })
 
 type UrlFormData = z.infer<typeof urlSchema>
@@ -39,23 +37,20 @@ export function SummaryForm({ onSummaryCreated }: SummaryFormProps) {
     resolver: zodResolver(urlSchema),
     defaultValues: {
       url: '',
-      title: '',
     },
   })
 
   const textForm = useForm<TextFormData>({
     resolver: zodResolver(textSchema),
     defaultValues: {
-      content: '',
-      title: '',
+      text: '',
     },
   })
 
   const onUrlSubmit = async (data: UrlFormData) => {
     setIsLoading(true)
     try {
       const payload: SummaryCreate = {
-        title: data.title,
         url: data.url,
       }
       const response = await api.post<SummaryResponse>('/api/v1/summaries/', payload)
@@ -72,12 +67,19 @@ export function SummaryForm({ onSummaryCreated }: SummaryFormProps) {
   const onTextSubmit = async (data: TextFormData) => {
     setIsLoading(true)
     try {
-      const payload: SummaryCreate = {
-        title: data.title,
-        content: data.content,
+      const payload = {
+        text: data.text,
       }
-      const response = await api.post<SummaryResponse>('/api/v1/summaries/', payload)
-      onSummaryCreated(response.data)
+      const response = await api.post('/api/v1/summaries/text', payload)
+      // Convert text summary response to match SummaryResponse format
+      const summaryResponse: SummaryResponse = {
+        id: Date.now(), // Temporary ID since text summaries aren't stored
+        summary: response.data.summary,
+        key_top: 'Text Summary',
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      }
+      onSummaryCreated(summaryResponse)
       textForm.reset()
     } catch (error: any) {
       console.error('Error creating summary:', error)
@@ -104,20 +106,6 @@ export function SummaryForm({ onSummaryCreated }: SummaryFormProps) {
         <Card>
           <CardContent className="pt-6">
             <form onSubmit={urlForm.handleSubmit(onUrlSubmit)} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="url-title">Title</Label>
-                <Input
-                  id="url-title"
-                  placeholder="Enter a title for your summary"
-                  {...urlForm.register('title')}
-                />
-                {urlForm.formState.errors.title && (
-                  <p className="text-sm text-red-500">
-                    {urlForm.formState.errors.title.message}
-                  </p>
-                )}
-              </div>
-
               <div className="space-y-2">
                 <Label htmlFor="url">URL</Label>
                 <Input
@@ -153,30 +141,16 @@ export function SummaryForm({ onSummaryCreated }: SummaryFormProps) {
           <CardContent className="pt-6">
             <form onSubmit={textForm.handleSubmit(onTextSubmit)} className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="text-title">Title</Label>
-                <Input
-                  id="text-title"
-                  placeholder="Enter a title for your summary"
-                  {...textForm.register('title')}
-                />
-                {textForm.formState.errors.title && (
-                  <p className="text-sm text-red-500">
-                    {textForm.formState.errors.title.message}
-                  </p>
-                )}
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="content">Text Content</Label>
+                <Label htmlFor="text">Text Content</Label>
                 <Textarea
-                  id="content"
+                  id="text"
                   placeholder="Paste your text content here..."
                   className="min-h-[200px]"
-                  {...textForm.register('content')}
+                  {...textForm.register('text')}
                 />
-                {textForm.formState.errors.content && (
+                {textForm.formState.errors.text && (
                   <p className="text-sm text-red-500">
-                    {textForm.formState.errors.content.message}
+                    {textForm.formState.errors.text.message}
                   </p>
                 )}
               </div>

frontend/src/components/shared/summary-history.tsx

@@ -38,7 +38,7 @@ export function SummaryHistory({ refreshTrigger, onSummarySelect }: SummaryHisto
 
   useEffect(() => {
     const filtered = summaries.filter(summary =>
-      (summary.title?.toLowerCase().includes(searchTerm.toLowerCase()) ?? false) ||
+      (summary.key_top?.toLowerCase().includes(searchTerm.toLowerCase()) ?? false) ||
       (summary.summary?.toLowerCase().includes(searchTerm.toLowerCase()) ?? false)
     )
     setFilteredSummaries(filtered)
@@ -113,7 +113,7 @@ export function SummaryHistory({ refreshTrigger, onSummarySelect }: SummaryHisto
               <CardHeader className="pb-3">
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
-                    <CardTitle className="text-lg">{summary.title || 'Untitled'}</CardTitle>
+                    <CardTitle className="text-lg">{summary.key_top || 'Untitled'}</CardTitle>
                     <CardDescription className="flex items-center mt-1">
                       <Calendar className="h-4 w-4 mr-1" />
                       {new Date(summary.created_at).toLocaleDateString()}

frontend/src/components/shared/summary-result.tsx

@@ -49,7 +49,7 @@ export function SummaryResult({ summary }: SummaryResultProps) {
     <div className="space-y-6">
       <div className="flex items-start justify-between">
         <div className="flex-1">
-          <h2 className="text-2xl font-bold text-gray-900 mb-2">{summary.title || 'Untitled'}</h2>
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">{summary.key_top || 'Untitled'}</h2>
           <div className="flex items-center text-sm text-gray-500 space-x-4">
             <div className="flex items-center">
               <Calendar className="h-4 w-4 mr-1" />
@@ -94,18 +94,18 @@ export function SummaryResult({ summary }: SummaryResultProps) {
         </CardContent>
       </Card>
 
-      {summary.content && (
+      {summary.keywords && (
         <Card>
           <CardHeader>
-            <CardTitle>Original Content</CardTitle>
+            <CardTitle>Keywords</CardTitle>
             <CardDescription>
-              The original text that was summarized
+              Key terms extracted from the content
             </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="prose max-w-none">
-              <p className="text-gray-600 text-sm leading-relaxed whitespace-pre-wrap max-h-96 overflow-y-auto">
-                {summary.content}
+              <p className="text-gray-600 text-sm leading-relaxed">
+                {summary.keywords}
               </p>
             </div>
           </CardContent>

frontend/src/types/index.ts

@@ -1,27 +1,25 @@
 export interface Summary {
   id: number
-  title: string
-  content: string
-  summary: string
-  url?: string
+  url: string
+  summary?: string
+  key_top?: string  // This is the title from backend
+  keywords?: string
   created_at: string
-  updated_at: string
+  updated_at?: string
 }
 
 export interface SummaryCreate {
-  title: string
-  content?: string
-  url?: string
+  url: string
 }
 
 export interface SummaryResponse {
   id: number
-  title?: string
-  content?: string
-  summary?: string
   url?: string
+  summary?: string
+  key_top?: string  // This is the title from backend
+  keywords?: string
   created_at: string
-  updated_at: string
+  updated_at?: string
 }
 
 export interface ApiError {