pull request #46

Feat: Implement Activity Deletion and Configurable Transcription Language

pickleglass_web/app/activity/details/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, Suspense } from 'react'
 import { useRedirectIfNotAuth } from '@/utils/auth'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
 import {
   UserProfile,
@@ -10,6 +10,7 @@ import {
   Transcript,
   AiMessage,
   getSessionDetails,
+  deleteSession,
 } from '@/utils/api'
 
 type ConversationItem = (Transcript & { type: 'transcript' }) | (AiMessage & { type: 'ai_message' });
@@ -29,6 +30,8 @@ function SessionDetailsContent() {
   const [isLoading, setIsLoading] = useState(true);
   const searchParams = useSearchParams();
   const sessionId = searchParams.get('sessionId');
+  const router = useRouter();
+  const [deleting, setDeleting] = useState(false);
 
   useEffect(() => {
     if (userInfo && sessionId) {
@@ -47,6 +50,20 @@ function SessionDetailsContent() {
     }
   }, [userInfo, sessionId]);
 
+  const handleDelete = async () => {
+    if (!sessionId) return;
+    if (!window.confirm('Are you sure you want to delete this activity? This cannot be undone.')) return;
+    setDeleting(true);
+    try {
+      await deleteSession(sessionId);
+      router.push('/activity');
+    } catch (error) {
+      alert('Failed to delete activity.');
+      setDeleting(false);
+      console.error(error);
+    }
+  };
+
   if (!userInfo || isLoading) {
     return (
       <div className="min-h-screen bg-[#FDFCF9] flex items-center justify-center">
@@ -92,7 +109,8 @@ function SessionDetailsContent() {
             </div>
 
             <div className="bg-white p-8 rounded-xl">
-                <div className="mb-6">
+                <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div>
                         <h1 className="text-2xl font-bold text-gray-900 mb-2">
                             {sessionDetails.session.title || `Conversation on ${new Date(sessionDetails.session.started_at * 1000).toLocaleDateString()}`}
                         </h1>
@@ -101,6 +119,14 @@ function SessionDetailsContent() {
                             <span>{new Date(sessionDetails.session.started_at * 1000).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })}</span>
                         </div>
                     </div>
+                    <button
+                        onClick={handleDelete}
+                        disabled={deleting}
+                        className={`px-4 py-2 rounded text-sm font-medium border border-red-200 text-red-700 bg-red-50 hover:bg-red-100 transition-colors ${deleting ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    >
+                        {deleting ? 'Deleting...' : 'Delete Activity'}
+                    </button>
+                </div>
 
                 {sessionDetails.summary && (
                     <Section title="Summary">

pickleglass_web/app/activity/page.tsx

@@ -7,12 +7,14 @@ import {
   UserProfile,
   Session,
   getSessions,
+  deleteSession,
 } from '@/utils/api'
 
 export default function ActivityPage() {
   const userInfo = useRedirectIfNotAuth() as UserProfile | null;
   const [sessions, setSessions] = useState<Session[]>([])
   const [isLoading, setIsLoading] = useState(true)
+  const [deletingId, setDeletingId] = useState<string | null>(null)
 
   const fetchSessions = async () => {
     try {
@@ -47,6 +49,20 @@ export default function ActivityPage() {
     return 'Good evening'
   }
 
+  const handleDelete = async (sessionId: string) => {
+    if (!window.confirm('Are you sure you want to delete this activity? This cannot be undone.')) return;
+    setDeletingId(sessionId);
+    try {
+      await deleteSession(sessionId);
+      setSessions(sessions => sessions.filter(s => s.id !== sessionId));
+    } catch (error) {
+      alert('Failed to delete activity.');
+      console.error(error);
+    } finally {
+      setDeletingId(null);
+    }
+  }
+
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-4xl mx-auto px-8 py-12">
@@ -67,17 +83,28 @@ export default function ActivityPage() {
           ) : sessions.length > 0 ? (
             <div className="space-y-4">
               {sessions.map((session) => (
-                <Link href={`/activity/details?sessionId=${session.id}`} key={session.id} className="block bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow cursor-pointer">
+                <div key={session.id} className="block bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow cursor-pointer">
                   <div className="flex justify-between items-start mb-3">
-                    <h3 className="text-lg font-medium text-gray-900">{session.title || `Conversation - ${new Date(session.started_at * 1000).toLocaleDateString()}`}</h3>
-                    <span className="text-sm text-gray-500">
+                    <div>
+                      <Link href={`/activity/details?sessionId=${session.id}`} className="text-lg font-medium text-gray-900 hover:underline">
+                        {session.title || `Conversation - ${new Date(session.started_at * 1000).toLocaleDateString()}`}
+                      </Link>
+                      <div className="text-sm text-gray-500">
                         {new Date(session.started_at * 1000).toLocaleString()}
-                    </span>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => handleDelete(session.id)}
+                      disabled={deletingId === session.id}
+                      className={`ml-4 px-3 py-1 rounded text-xs font-medium border border-red-200 text-red-700 bg-red-50 hover:bg-red-100 transition-colors ${deletingId === session.id ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    >
+                      {deletingId === session.id ? 'Deleting...' : 'Delete'}
+                    </button>
                   </div>
                   <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                     Conversation
                   </span>
-                    </Link>
+                </div>
               ))}
             </div>
           ) : (

src/features/listen/liveSummaryService.js

@@ -527,6 +527,8 @@ async function saveConversationTurn(speaker, transcription) {
 }
 
 async function initializeLiveSummarySession(language = 'en') {
+    // Use system environment variable if set, otherwise use the provided language
+    const effectiveLanguage = process.env.OPENAI_TRANSCRIBE_LANG || language || 'en';
     if (isInitializingSession) {
         console.log('Session initialization already in progress.');
         return false;
@@ -623,7 +625,7 @@ async function initializeLiveSummarySession(language = 'en') {
         };
 
         const mySttConfig = {
-            language: language,
+            language: effectiveLanguage,
             callbacks: {
                 onmessage: handleMyMessage,
                 onerror: error => console.error('My STT session error:', error.message),
@@ -631,7 +633,7 @@ async function initializeLiveSummarySession(language = 'en') {
             },
         };
         const theirSttConfig = {
-            language: language,
+            language: effectiveLanguage,
             callbacks: {
                 onmessage: handleTheirMessage,
                 onerror: error => console.error('Their STT session error:', error.message),