Compare commits
No commits in common. "4d10d7500343b3eaabecd4b4e2c16790dcbf8de8" and "0f4956d4a4dffc8b607b3fd2d0cc1e5977546e4b" have entirely different histories.
4d10d75003
...
0f4956d4a4
@ -1,408 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { supabase } from '../supabaseClient';
|
|
||||||
|
|
||||||
export interface TranscriptionSegment {
|
|
||||||
text: string;
|
|
||||||
isFinal: boolean;
|
|
||||||
start: number;
|
|
||||||
end: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TranscriptionSession {
|
|
||||||
id: string;
|
|
||||||
user_id: string;
|
|
||||||
title: string | null;
|
|
||||||
started_at: string;
|
|
||||||
ended_at: string | null;
|
|
||||||
duration_seconds: number | null;
|
|
||||||
timetable_period_id: string | null;
|
|
||||||
timetable_event_type: string | null;
|
|
||||||
timetable_event_label: string | null;
|
|
||||||
auto_tagged: boolean;
|
|
||||||
word_count: number;
|
|
||||||
segment_count: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TimetablePeriod {
|
|
||||||
period_id: string | null;
|
|
||||||
event_type: string | null;
|
|
||||||
event_label: string | null;
|
|
||||||
start_time: string | null;
|
|
||||||
end_time: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LLMConfig {
|
|
||||||
provider: 'openai' | 'anthropic' | 'ollama' | 'openrouter' | 'google';
|
|
||||||
model: string;
|
|
||||||
apiKey: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ExportFormat = 'srt' | 'txt' | 'json';
|
|
||||||
|
|
||||||
const LLM_CONFIG_STORAGE_KEY = 'cc_llm_config';
|
|
||||||
|
|
||||||
function loadLLMConfig(): LLMConfig {
|
|
||||||
try {
|
|
||||||
const stored = localStorage.getItem(LLM_CONFIG_STORAGE_KEY);
|
|
||||||
if (stored) {
|
|
||||||
return JSON.parse(stored);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Failed to load LLM config from localStorage:', e);
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
provider: 'openai',
|
|
||||||
model: '',
|
|
||||||
apiKey: '',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveLLMConfig(config: LLMConfig): void {
|
|
||||||
try {
|
|
||||||
localStorage.setItem(LLM_CONFIG_STORAGE_KEY, JSON.stringify(config));
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Failed to save LLM Config to localStorage:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TranscriptionState {
|
|
||||||
// Session state
|
|
||||||
isRecording: boolean;
|
|
||||||
isConnecting: boolean;
|
|
||||||
activeSession: TranscriptionSession | null;
|
|
||||||
|
|
||||||
// Live feed
|
|
||||||
completedSegments: TranscriptionSegment[];
|
|
||||||
currentSegment: TranscriptionSegment | null;
|
|
||||||
|
|
||||||
// Canvas event buffer (flushed to API every 5s)
|
|
||||||
pendingCanvasEvents: any[];
|
|
||||||
|
|
||||||
// Timetable context
|
|
||||||
timetableContext: TimetablePeriod | null;
|
|
||||||
|
|
||||||
// UI state
|
|
||||||
wordCount: number;
|
|
||||||
elapsedSeconds: number;
|
|
||||||
|
|
||||||
// LLM config (stored in localStorage only)
|
|
||||||
llmConfig: LLMConfig;
|
|
||||||
|
|
||||||
// Summary state
|
|
||||||
summaryText: string | null;
|
|
||||||
isGeneratingSummary: boolean;
|
|
||||||
summaryError: string | null;
|
|
||||||
|
|
||||||
// Export state
|
|
||||||
isExporting: boolean;
|
|
||||||
exportError: string | null;
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
startSession: (timetableTag?: TimetablePeriod) => Promise<void>;
|
|
||||||
stopSession: () => Promise<void>;
|
|
||||||
saveSegment: (text: string, isFinal: boolean, metadata: { start: number; end: number }) => Promise<void>;
|
|
||||||
resetSession: () => void;
|
|
||||||
tickElapsed: () => void;
|
|
||||||
addCanvasEvent: (event: any) => void;
|
|
||||||
flushCanvasEvents: () => Promise<void>;
|
|
||||||
loadSessions: () => Promise<TranscriptionSession[]>;
|
|
||||||
setTimetableContext: (context: TimetablePeriod | null) => void;
|
|
||||||
|
|
||||||
// LLM config actions
|
|
||||||
setLLMConfig: (config: Partial<LLMConfig>) => void;
|
|
||||||
getLLMConfig: () => LLMConfig;
|
|
||||||
|
|
||||||
// Summary actions
|
|
||||||
setSummaryText: (text: string | null) => void;
|
|
||||||
setIsGeneratingSummary: (generating: boolean) => void;
|
|
||||||
setSummaryError: (error: string | null) => void;
|
|
||||||
|
|
||||||
// Export actions
|
|
||||||
exportSession: (sessionId: string, format: ExportFormat) => Promise<void>;
|
|
||||||
setExportError: (error: string | null) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
|
|
||||||
isRecording: false,
|
|
||||||
isConnecting: false,
|
|
||||||
activeSession: null,
|
|
||||||
completedSegments: [],
|
|
||||||
currentSegment: null,
|
|
||||||
pendingCanvasEvents: [],
|
|
||||||
timetableContext: null,
|
|
||||||
wordCount: 0,
|
|
||||||
elapsedSeconds: 0,
|
|
||||||
|
|
||||||
// LLM config initialized from localStorage
|
|
||||||
llmConfig: loadLLMConfig(),
|
|
||||||
|
|
||||||
// Summary state
|
|
||||||
summaryText: null,
|
|
||||||
isGeneratingSummary: false,
|
|
||||||
summaryError: null,
|
|
||||||
|
|
||||||
// Export state
|
|
||||||
isExporting: false,
|
|
||||||
exportError: null,
|
|
||||||
|
|
||||||
setTimetableContext: (context) => {
|
|
||||||
set({ timetableContext: context });
|
|
||||||
},
|
|
||||||
|
|
||||||
startSession: async (timetableTag?: TimetablePeriod) => {
|
|
||||||
set({ isRecording: true, isConnecting: false, elapsedSeconds: 0, timetableContext: timetableTag || null });
|
|
||||||
|
|
||||||
// Create session in Supabase
|
|
||||||
try {
|
|
||||||
const user = await supabase.auth.getUser();
|
|
||||||
if (!user.data.user) {
|
|
||||||
console.error('No authenticated user');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sessionData = {
|
|
||||||
user_id: user.data.user.id,
|
|
||||||
title: timetableTag?.event_label || 'Untitled Session',
|
|
||||||
canvas_type: 'teaching-canvas',
|
|
||||||
timetable_period_id: timetableTag?.period_id || null,
|
|
||||||
timetable_event_type: timetableTag?.event_type || null,
|
|
||||||
timetable_event_label: timetableTag?.event_label || null,
|
|
||||||
auto_tagged: !!timetableTag,
|
|
||||||
};
|
|
||||||
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('transcription_sessions')
|
|
||||||
.insert(sessionData)
|
|
||||||
.select()
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.error('Failed to create session:', error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
set({ activeSession: data });
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error starting session:', error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
stopSession: async () => {
|
|
||||||
const { activeSession, completedSegments } = get();
|
|
||||||
|
|
||||||
if (activeSession) {
|
|
||||||
try {
|
|
||||||
await supabase
|
|
||||||
.from('transcription_sessions')
|
|
||||||
.update({
|
|
||||||
ended_at: new Date().toISOString(),
|
|
||||||
word_count: get().wordCount,
|
|
||||||
segment_count: completedSegments.length,
|
|
||||||
})
|
|
||||||
.eq('id', activeSession.id);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to end session:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
set({
|
|
||||||
isRecording: false,
|
|
||||||
isConnecting: false,
|
|
||||||
activeSession: null,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
saveSegment: async (text: string, isFinal: boolean, metadata: { start: number; end: number }) => {
|
|
||||||
const { completedSegments, currentSegment, activeSession, wordCount } = get();
|
|
||||||
|
|
||||||
if (isFinal) {
|
|
||||||
// Final segment - move current to completed, clear current
|
|
||||||
const newCompleted = [...completedSegments];
|
|
||||||
if (currentSegment && currentSegment.text.trim()) {
|
|
||||||
newCompleted.push({ ...currentSegment, isFinal: true });
|
|
||||||
}
|
|
||||||
const newWordCount = newCompleted.reduce(
|
|
||||||
(sum, seg) => sum + seg.text.trim().split(/\s+/).filter(Boolean).length,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
|
|
||||||
set({
|
|
||||||
completedSegments: newCompleted,
|
|
||||||
currentSegment: null,
|
|
||||||
wordCount: newWordCount,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Save to Supabase if session is active
|
|
||||||
if (activeSession) {
|
|
||||||
try {
|
|
||||||
const sequenceIndex = newCompleted.length - 1;
|
|
||||||
await supabase.from('transcription_segments').insert({
|
|
||||||
session_id: activeSession.id,
|
|
||||||
sequence_index: sequenceIndex,
|
|
||||||
text: text,
|
|
||||||
start_seconds: metadata.start,
|
|
||||||
end_seconds: metadata.end,
|
|
||||||
is_final: true,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save segment:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// In-progress segment
|
|
||||||
set({ currentSegment: { text, isFinal: false, ...metadata } });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resetSession: () => {
|
|
||||||
set({
|
|
||||||
isRecording: false,
|
|
||||||
isConnecting: false,
|
|
||||||
completedSegments: [],
|
|
||||||
currentSegment: null,
|
|
||||||
wordCount: 0,
|
|
||||||
elapsedSeconds: 0,
|
|
||||||
activeSession: null,
|
|
||||||
pendingCanvasEvents: [],
|
|
||||||
timetableContext: null,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
tickElapsed: () => {
|
|
||||||
set((state) => ({ elapsedSeconds: state.elapsedSeconds + 1 }));
|
|
||||||
},
|
|
||||||
|
|
||||||
addCanvasEvent: (event) => {
|
|
||||||
set((state) => ({
|
|
||||||
pendingCanvasEvents: [...state.pendingCanvasEvents, event],
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
flushCanvasEvents: async () => {
|
|
||||||
const { pendingCanvasEvents, activeSession } = get();
|
|
||||||
|
|
||||||
if (pendingCanvasEvents.length === 0) return;
|
|
||||||
|
|
||||||
const eventsToFlush = [...pendingCanvasEvents];
|
|
||||||
|
|
||||||
try {
|
|
||||||
for (const event of eventsToFlush) {
|
|
||||||
await supabase.from('canvas_events').insert({
|
|
||||||
session_id: activeSession?.id || null,
|
|
||||||
user_id: (await supabase.auth.getUser()).data.user?.id || '',
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
session_elapsed_seconds: event.sessionElapsedSeconds || null,
|
|
||||||
event_type: event.eventType,
|
|
||||||
event_payload: event.payload || {},
|
|
||||||
canvas_snapshot_url: event.snapshotUrl || null,
|
|
||||||
tldraw_page_id: event.pageId || null,
|
|
||||||
tldraw_shape_ids: event.shapeIds || null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
set({ pendingCanvasEvents: [] });
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to flush canvas events:', error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
loadSessions: async (): Promise<TranscriptionSession[]> => {
|
|
||||||
try {
|
|
||||||
const user = await supabase.auth.getUser();
|
|
||||||
if (!user.data.user) return [];
|
|
||||||
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('transcription_sessions')
|
|
||||||
.select('*')
|
|
||||||
.eq('user_id', user.data.user.id)
|
|
||||||
.order('started_at', { ascending: false })
|
|
||||||
.limit(50);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.error('Failed to load sessions:', error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return data || [];
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading sessions:', error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// LLM config actions - persist to localStorage only
|
|
||||||
setLLMConfig: (partialConfig: Partial<LLMConfig>) => {
|
|
||||||
const current = get().llmConfig;
|
|
||||||
const updated = { ...current, ...partialConfig };
|
|
||||||
saveLLMConfig(updated);
|
|
||||||
set({ llmConfig: updated });
|
|
||||||
},
|
|
||||||
|
|
||||||
getLLMConfig: (): LLMConfig => {
|
|
||||||
return get().llmConfig;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Summary actions
|
|
||||||
setSummaryText: (text: string | null) => {
|
|
||||||
set({ summaryText: text });
|
|
||||||
},
|
|
||||||
|
|
||||||
setIsGeneratingSummary: (generating: boolean) => {
|
|
||||||
set({ isGeneratingSummary: generating });
|
|
||||||
},
|
|
||||||
|
|
||||||
setSummaryError: (error: string | null) => {
|
|
||||||
set({ summaryError: error });
|
|
||||||
},
|
|
||||||
|
|
||||||
// Export actions
|
|
||||||
exportSession: async (sessionId: string, format: ExportFormat) => {
|
|
||||||
set({ isExporting: true, exportError: null });
|
|
||||||
|
|
||||||
try {
|
|
||||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
|
||||||
const response = await fetch(`${apiBaseUrl}/transcribe/sessions/${sessionId}/export`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ format }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => null);
|
|
||||||
throw new Error(errorData?.detail || errorData?.error || `Export failed: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get filename from Content-Disposition header or use default
|
|
||||||
const disposition = response.headers.get('Content-Disposition');
|
|
||||||
let filename = `transcription-export.${format}`;
|
|
||||||
if (disposition) {
|
|
||||||
const match = disposition.match(/filename[*]?=['"\s]*([^;\s]*)/);
|
|
||||||
if (match && match[1]) {
|
|
||||||
filename = match[1].replace(/["'\\]/g, '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Trigger browser download
|
|
||||||
const blob = await response.blob();
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = filename;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
document.body.removeChild(a);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to export session:', error);
|
|
||||||
set({ exportError: error instanceof Error ? error.message : 'Failed to export session' });
|
|
||||||
} finally {
|
|
||||||
set({ isExporting: false });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setExportError: (error: string | null) => {
|
|
||||||
set({ exportError: error });
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@ -1,258 +0,0 @@
|
|||||||
/**
|
|
||||||
* CanvasEventLogger — silently logs TLDraw canvas activity during transcription sessions.
|
|
||||||
* Attaches to the editor instance and buffers events, flushing to API every 5 seconds.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Editor, TLStoreEventInfo } from '@tldraw/tldraw';
|
|
||||||
import { useTranscriptionStore } from '../../stores/transcriptionStore';
|
|
||||||
|
|
||||||
export class CanvasEventLogger {
|
|
||||||
private editor: Editor | null = null;
|
|
||||||
private sessionId: string | null = null;
|
|
||||||
private buffer: Array<{
|
|
||||||
eventType: string;
|
|
||||||
payload: Record<string, any>;
|
|
||||||
sessionElapsedSeconds?: number;
|
|
||||||
pageId?: string;
|
|
||||||
shapeIds?: string[];
|
|
||||||
snapshotUrl?: string;
|
|
||||||
}> = [];
|
|
||||||
private flushInterval: ReturnType<typeof setInterval> | null = null;
|
|
||||||
private snapshotInterval: ReturnType<typeof setInterval> | null = null;
|
|
||||||
private snapshotIntervalMs: number = 60000; // 60 seconds default
|
|
||||||
private isAttached: boolean = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Attach the logger to a TLDraw editor instance.
|
|
||||||
* Starts buffering events and periodic snapshots.
|
|
||||||
*/
|
|
||||||
attach(editor: Editor, sessionId: string): void {
|
|
||||||
if (this.isAttached) {
|
|
||||||
this.detach();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.editor = editor;
|
|
||||||
this.sessionId = sessionId;
|
|
||||||
this.isAttached = true;
|
|
||||||
|
|
||||||
// Listen to store changes for shape/page events
|
|
||||||
const unsubscribe = editor.store.listen(
|
|
||||||
(info: TLStoreEventInfo) => this.onStoreChange(info),
|
|
||||||
{ source: 'user' } // Only user-initiated changes, not programmatic
|
|
||||||
);
|
|
||||||
|
|
||||||
// Store unsubscribe function for cleanup
|
|
||||||
(editor as any).__canvasEventLoggerUnsubscribe = unsubscribe;
|
|
||||||
|
|
||||||
// Start periodic flush
|
|
||||||
this.flushInterval = setInterval(() => this.flush(), 5000);
|
|
||||||
|
|
||||||
// Start periodic snapshots
|
|
||||||
this.snapshotInterval = setInterval(() => this.captureSnapshot(), this.snapshotIntervalMs);
|
|
||||||
|
|
||||||
// Capture initial snapshot
|
|
||||||
this.captureSnapshot();
|
|
||||||
|
|
||||||
console.log('[CanvasEventLogger] Attached to editor for session', sessionId);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Detach the logger from the editor.
|
|
||||||
* Flushes any pending events and stops intervals.
|
|
||||||
*/
|
|
||||||
detach(): void {
|
|
||||||
if (!this.isAttached) return;
|
|
||||||
|
|
||||||
// Flush remaining events
|
|
||||||
this.flush();
|
|
||||||
|
|
||||||
// Stop intervals
|
|
||||||
if (this.flushInterval) {
|
|
||||||
clearInterval(this.flushInterval);
|
|
||||||
this.flushInterval = null;
|
|
||||||
}
|
|
||||||
if (this.snapshotInterval) {
|
|
||||||
clearInterval(this.snapshotInterval);
|
|
||||||
this.snapshotInterval = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Unsubscribe from store listener
|
|
||||||
if (this.editor && (this.editor as any).__canvasEventLoggerUnsubscribe) {
|
|
||||||
(this.editor as any).__canvasEventLoggerUnsubscribe();
|
|
||||||
delete (this.editor as any).__canvasEventLoggerUnsubscribe;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.editor = null;
|
|
||||||
this.sessionId = null;
|
|
||||||
this.isAttached = false;
|
|
||||||
|
|
||||||
console.log('[CanvasEventLogger] Detached from editor');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle store changes to detect canvas events.
|
|
||||||
*/
|
|
||||||
private onStoreChange(info: TLStoreEventInfo): void {
|
|
||||||
if (!this.editor || !this.sessionId) return;
|
|
||||||
|
|
||||||
const { added, removed, updated } = info;
|
|
||||||
const elapsedSeconds = useTranscriptionStore.getState().elapsedSeconds;
|
|
||||||
|
|
||||||
// Handle shape creation
|
|
||||||
if (added.size > 0) {
|
|
||||||
for (const [id, shape] of added) {
|
|
||||||
this.buffer.push({
|
|
||||||
eventType: 'shape_created',
|
|
||||||
payload: {
|
|
||||||
shapeId: id,
|
|
||||||
shapeType: shape.type,
|
|
||||||
pageId: this.editor?.currentPageId,
|
|
||||||
},
|
|
||||||
sessionElapsedSeconds: elapsedSeconds,
|
|
||||||
pageId: this.editor?.currentPageId,
|
|
||||||
shapeIds: [id],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle shape deletion
|
|
||||||
if (removed.size > 0) {
|
|
||||||
for (const [id] of removed) {
|
|
||||||
this.buffer.push({
|
|
||||||
eventType: 'shape_deleted',
|
|
||||||
payload: { shapeId: id },
|
|
||||||
sessionElapsedSeconds: elapsedSeconds,
|
|
||||||
shapeIds: [id],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle page changes
|
|
||||||
if (updated.size > 0) {
|
|
||||||
for (const [id, { old, new: updatedItem }] of updated) {
|
|
||||||
if (id === 'page' && old?.currentPageId !== updatedItem?.currentPageId) {
|
|
||||||
this.buffer.push({
|
|
||||||
eventType: 'page_changed',
|
|
||||||
payload: {
|
|
||||||
fromPageId: old?.currentPageId,
|
|
||||||
toPageId: updatedItem?.currentPageId,
|
|
||||||
},
|
|
||||||
sessionElapsedSeconds: elapsedSeconds,
|
|
||||||
pageId: updatedItem?.currentPageId,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Capture snapshot on page change
|
|
||||||
this.captureSnapshot();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle ink/draw strokes
|
|
||||||
for (const [id, shape] of added) {
|
|
||||||
if (shape.type === 'draw') {
|
|
||||||
this.buffer.push({
|
|
||||||
eventType: 'ink_added',
|
|
||||||
payload: { shapeId: id, strokeCount: (shape as any).points?.length || 0 },
|
|
||||||
sessionElapsedSeconds: elapsedSeconds,
|
|
||||||
shapeIds: [id],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flush immediately for significant events (page changes, ink)
|
|
||||||
if (this.buffer.length >= 5) {
|
|
||||||
this.flush();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Capture a snapshot of the current canvas state.
|
|
||||||
* Uploads to Supabase Storage and returns the URL.
|
|
||||||
*/
|
|
||||||
private async captureSnapshot(): Promise<string | null> {
|
|
||||||
if (!this.editor || !this.sessionId) return null;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Get SVG element from editor
|
|
||||||
const svgElement = this.editor.svg?.current;
|
|
||||||
if (!svgElement) {
|
|
||||||
console.warn('[CanvasEventLogger] No SVG element available for snapshot');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Serialize SVG to string
|
|
||||||
const svgString = new XMLSerializer().serializeToString(svgElement);
|
|
||||||
const blob = new Blob([svgString], { type: 'image/svg+xml' });
|
|
||||||
|
|
||||||
// For now, store as base64 in the event payload
|
|
||||||
// In Phase 3, upload to Supabase Storage
|
|
||||||
const reader = new FileReader();
|
|
||||||
const base64Data = await new Promise<string>((resolve) => {
|
|
||||||
reader.onloadend = () => resolve(reader.result as string);
|
|
||||||
reader.readAsDataURL(blob);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Store snapshot URL reference (will be replaced with actual storage URL in Phase 3)
|
|
||||||
const snapshotUrl = `canvas-snapshots/${this.sessionId}/${Date.now()}.svg`;
|
|
||||||
|
|
||||||
this.buffer.push({
|
|
||||||
eventType: 'canvas_snapshot',
|
|
||||||
payload: { snapshotUrl, pageId: this.editor.currentPageId },
|
|
||||||
sessionElapsedSeconds: useTranscriptionStore.getState().elapsedSeconds,
|
|
||||||
pageId: this.editor.currentPageId,
|
|
||||||
snapshotUrl,
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('[CanvasEventLogger] Snapshot captured:', snapshotUrl);
|
|
||||||
return snapshotUrl;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[CanvasEventLogger] Failed to capture snapshot:', error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Flush buffered events to the API.
|
|
||||||
*/
|
|
||||||
private async flush(): void {
|
|
||||||
if (this.buffer.length === 0) return;
|
|
||||||
|
|
||||||
const events = [...this.buffer];
|
|
||||||
this.buffer = [];
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('http://192.168.0.64:8000/transcribe/canvas-events', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
// TODO: Add auth header in Phase 3
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ events }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
console.error('[CanvasEventLogger] Failed to flush canvas events:', response.status);
|
|
||||||
} else {
|
|
||||||
console.log('[CanvasEventLogger] Flushed', events.length, 'events');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[CanvasEventLogger] Error flushing canvas events:', error);
|
|
||||||
// Re-queue events for retry
|
|
||||||
this.buffer = [...events, ...this.buffer];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Manually trigger a snapshot capture.
|
|
||||||
*/
|
|
||||||
async captureSnapshotNow(): Promise<string | null> {
|
|
||||||
return this.captureSnapshot();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the current buffer size (for debugging).
|
|
||||||
*/
|
|
||||||
getBufferSize(): number {
|
|
||||||
return this.buffer.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -23,8 +23,7 @@ import {
|
|||||||
Search as SearchIcon,
|
Search as SearchIcon,
|
||||||
Navigation as NavigationIcon,
|
Navigation as NavigationIcon,
|
||||||
Save as NodeIcon,
|
Save as NodeIcon,
|
||||||
Assignment as ExamIcon,
|
Assignment as ExamIcon
|
||||||
Mic as MicIcon
|
|
||||||
} from '@mui/icons-material';
|
} from '@mui/icons-material';
|
||||||
import { CCShapesPanel } from './CCShapesPanel';
|
import { CCShapesPanel } from './CCShapesPanel';
|
||||||
import { CCSlidesPanel } from './CCSlidesPanel';
|
import { CCSlidesPanel } from './CCSlidesPanel';
|
||||||
@ -34,7 +33,6 @@ import { CCYoutubePanel } from './CCYoutubePanel';
|
|||||||
import { CCGraphPanel } from './CCGraphPanel';
|
import { CCGraphPanel } from './CCGraphPanel';
|
||||||
import { CCExamMarkerPanel } from './CCExamMarkerPanel';
|
import { CCExamMarkerPanel } from './CCExamMarkerPanel';
|
||||||
import { CCSearchPanel } from './CCSearchPanel'
|
import { CCSearchPanel } from './CCSearchPanel'
|
||||||
import { CCTranscriptionPanel } from './CCTranscriptionPanel'
|
|
||||||
import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
|
import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
|
||||||
import './panel.css';
|
import './panel.css';
|
||||||
// import { CCNavigationPanel } from './navigation/CCNavigationPanel';
|
// import { CCNavigationPanel } from './navigation/CCNavigationPanel';
|
||||||
@ -49,7 +47,6 @@ export const PANEL_TYPES = {
|
|||||||
{ id: 'node-snapshot', label: 'Node', order: 20 },
|
{ id: 'node-snapshot', label: 'Node', order: 20 },
|
||||||
{ id: 'files', label: 'Files', order: 25 },
|
{ id: 'files', label: 'Files', order: 25 },
|
||||||
{ id: 'cc-shapes', label: 'Shapes', order: 30 },
|
{ id: 'cc-shapes', label: 'Shapes', order: 30 },
|
||||||
{ id: 'transcription', label: 'Transcription', order: 35 },
|
|
||||||
{ id: 'slides', label: 'Slides', order: 40 },
|
{ id: 'slides', label: 'Slides', order: 40 },
|
||||||
{ id: 'youtube', label: 'YouTube', order: 50 },
|
{ id: 'youtube', label: 'YouTube', order: 50 },
|
||||||
{ id: 'graph', label: 'Graph', order: 60 },
|
{ id: 'graph', label: 'Graph', order: 60 },
|
||||||
@ -211,8 +208,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
|||||||
return <NavigationIcon />;
|
return <NavigationIcon />;
|
||||||
case 'cc-shapes':
|
case 'cc-shapes':
|
||||||
return <ShapesIcon />;
|
return <ShapesIcon />;
|
||||||
case 'transcription':
|
|
||||||
return <MicIcon />;
|
|
||||||
case 'slides':
|
case 'slides':
|
||||||
return <SlidesIcon />;
|
return <SlidesIcon />;
|
||||||
case 'youtube':
|
case 'youtube':
|
||||||
@ -236,8 +231,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
|||||||
switch (panelId) {
|
switch (panelId) {
|
||||||
case 'cabinets':
|
case 'cabinets':
|
||||||
return 'Manage file cabinets';
|
return 'Manage file cabinets';
|
||||||
case 'transcription':
|
|
||||||
return 'Record and transcribe lessons';
|
|
||||||
case 'cc-shapes':
|
case 'cc-shapes':
|
||||||
return 'Add shapes and elements to your canvas';
|
return 'Add shapes and elements to your canvas';
|
||||||
case 'slides':
|
case 'slides':
|
||||||
@ -267,8 +260,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
|||||||
switch (currentPanelType) {
|
switch (currentPanelType) {
|
||||||
case 'cabinets':
|
case 'cabinets':
|
||||||
return <CCCabinetsPanel />;
|
return <CCCabinetsPanel />;
|
||||||
case 'transcription':
|
|
||||||
return <CCTranscriptionPanel />;
|
|
||||||
case 'files':
|
case 'files':
|
||||||
return <CCFilesPanel />;
|
return <CCFilesPanel />;
|
||||||
case 'cc-shapes':
|
case 'cc-shapes':
|
||||||
|
|||||||
@ -1,687 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
|
||||||
import { Mic as MicIcon, Stop as StopIcon, History as HistoryIcon, Settings as SettingsIcon, AutoAwesome as AutoAwesomeIcon } from "@mui/icons-material";
|
|
||||||
import { useTranscriptionStore, TranscriptionSegment, TranscriptionSession, TimetablePeriod } from "../../../../../stores/transcriptionStore";
|
|
||||||
import { TranscriptionService } from "../../../cc-base/cc-transcription/transcriptionService";
|
|
||||||
import { CanvasEventLogger } from "../../../cc-base/canvas-event-logger/CanvasEventLogger";
|
|
||||||
import LLMConfigModal from "./LLMConfigModal";
|
|
||||||
import "./panel.css";
|
|
||||||
|
|
||||||
const formatTime = (seconds: number): string => {
|
|
||||||
const m = Math.floor(seconds / 60);
|
|
||||||
const s = seconds % 60;
|
|
||||||
return m.toString().padStart(2, "0") + ":" + s.toString().padStart(2, "0");
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDateTime = (isoString: string): string => {
|
|
||||||
const date = new Date(isoString);
|
|
||||||
return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
||||||
};
|
|
||||||
|
|
||||||
type TabType = "live" | "sessions";
|
|
||||||
|
|
||||||
const SUMMARY_TYPES = [
|
|
||||||
{ value: 'full_lesson', label: 'Full Lesson Summary' },
|
|
||||||
{ value: 'questions_asked', label: 'Questions Asked' },
|
|
||||||
{ value: 'teaching_style', label: 'Teaching Style' },
|
|
||||||
{ value: 'key_moments', label: 'Key Moments' },
|
|
||||||
{ value: 'segment', label: 'Segment Summary' },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export const CCTranscriptionPanel: React.FC = () => {
|
|
||||||
const {
|
|
||||||
isRecording,
|
|
||||||
completedSegments,
|
|
||||||
currentSegment,
|
|
||||||
wordCount,
|
|
||||||
elapsedSeconds,
|
|
||||||
activeSession,
|
|
||||||
timetableContext,
|
|
||||||
startSession,
|
|
||||||
stopSession,
|
|
||||||
saveSegment,
|
|
||||||
resetSession,
|
|
||||||
tickElapsed,
|
|
||||||
addCanvasEvent,
|
|
||||||
flushCanvasEvents,
|
|
||||||
loadSessions,
|
|
||||||
setTimetableContext,
|
|
||||||
llmConfig,
|
|
||||||
summaryText,
|
|
||||||
isGeneratingSummary,
|
|
||||||
summaryError,
|
|
||||||
setSummaryText,
|
|
||||||
setIsGeneratingSummary,
|
|
||||||
setSummaryError,
|
|
||||||
} = useTranscriptionStore();
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<TabType>("live");
|
|
||||||
const [sessions, setSessions] = useState<TranscriptionSession[]>([]);
|
|
||||||
const [sessionName, setSessionName] = useState("Untitled Session");
|
|
||||||
const serviceRef = useRef<TranscriptionService | null>(null);
|
|
||||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
||||||
const canvasLoggerRef = useRef<CanvasEventLogger | null>(null);
|
|
||||||
|
|
||||||
// Modal state
|
|
||||||
const [showSettingsModal, setShowSettingsModal] = useState(false);
|
|
||||||
const [showSummaryModal, setShowSummaryModal] = useState(false);
|
|
||||||
const [summaryType, setSummaryType] = useState('full_lesson');
|
|
||||||
|
|
||||||
// Load sessions on mount
|
|
||||||
useEffect(() => {
|
|
||||||
loadSessions().then(setSessions);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Auto-detect timetable context on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const detectTimetable = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('http://192.168.0.64:8000/database/timetables/current-period');
|
|
||||||
const data = await response.json();
|
|
||||||
if (data.period_id) {
|
|
||||||
setTimetableContext(data as TimetablePeriod);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to detect timetable context:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
detectTimetable();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Timer for elapsed seconds
|
|
||||||
useEffect(() => {
|
|
||||||
if (isRecording) {
|
|
||||||
timerRef.current = setInterval(tickElapsed, 1000);
|
|
||||||
} else if (timerRef.current) {
|
|
||||||
clearInterval(timerRef.current);
|
|
||||||
timerRef.current = null;
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
if (timerRef.current) clearInterval(timerRef.current);
|
|
||||||
};
|
|
||||||
}, [isRecording, tickElapsed]);
|
|
||||||
|
|
||||||
// Canvas event flush interval (every 5s)
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isRecording) return;
|
|
||||||
|
|
||||||
const flushInterval = setInterval(async () => {
|
|
||||||
await flushCanvasEvents();
|
|
||||||
}, 5000);
|
|
||||||
|
|
||||||
return () => clearInterval(flushInterval);
|
|
||||||
}, [isRecording, flushCanvasEvents]);
|
|
||||||
|
|
||||||
const handleStart = async () => {
|
|
||||||
try {
|
|
||||||
await startSession(timetableContext || undefined);
|
|
||||||
const service = new TranscriptionService();
|
|
||||||
service.setTranscriptionCallback((text, isFinal, metadata) => {
|
|
||||||
saveSegment(text, isFinal, metadata);
|
|
||||||
});
|
|
||||||
await service.startTranscription();
|
|
||||||
serviceRef.current = service;
|
|
||||||
|
|
||||||
// Initialize canvas event logger if session was created
|
|
||||||
const state = useTranscriptionStore.getState();
|
|
||||||
if (state.activeSession) {
|
|
||||||
console.log('[CCTranscriptionPanel] Canvas event logging would start for session', state.activeSession.id);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to start transcription:", error);
|
|
||||||
stopSession();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleStop = async () => {
|
|
||||||
if (serviceRef.current) {
|
|
||||||
serviceRef.current.stopTranscription();
|
|
||||||
serviceRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (canvasLoggerRef.current) {
|
|
||||||
canvasLoggerRef.current.detach();
|
|
||||||
canvasLoggerRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
await stopSession();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
if (serviceRef.current) {
|
|
||||||
serviceRef.current.stopTranscription();
|
|
||||||
serviceRef.current = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleRefreshSessions = async () => {
|
|
||||||
const loaded = await loadSessions();
|
|
||||||
setSessions(loaded);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Generate summary handler
|
|
||||||
const handleGenerateSummary = async () => {
|
|
||||||
if (!activeSession) {
|
|
||||||
setSummaryError("No active session to generate summary for.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const config = useTranscriptionStore.getState().llmConfig;
|
|
||||||
if (!config.apiKey) {
|
|
||||||
setSummaryError("Please configure your API key in Settings first.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsGeneratingSummary(true);
|
|
||||||
setSummaryError(null);
|
|
||||||
setShowSummaryModal(false);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
|
||||||
const response = await fetch(`${apiBaseUrl}/transcribe/sessions/${activeSession.id}/summaries`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
summary_type: summaryType,
|
|
||||||
provider: config.provider,
|
|
||||||
model: config.model,
|
|
||||||
api_key: config.apiKey,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => null);
|
|
||||||
throw new Error(errorData?.detail || errorData?.error || `API error: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
// The API returns the summary text in the response
|
|
||||||
const summary = data.summary || data.content || data.text || JSON.stringify(data);
|
|
||||||
setSummaryText(summary);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to generate summary:', error);
|
|
||||||
setSummaryError(error instanceof Error ? error.message : 'Failed to generate summary');
|
|
||||||
} finally {
|
|
||||||
setIsGeneratingSummary(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="panel-container">
|
|
||||||
{/* Tab bar */}
|
|
||||||
<div style={{ display: "flex", borderBottom: "1px solid var(--color-divider)", marginBottom: "8px" }}>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab("live")}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
padding: "8px",
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: activeTab === "live" ? "var(--color-hover)" : "transparent",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "13px",
|
|
||||||
fontWeight: activeTab === "live" ? 600 : 400,
|
|
||||||
borderBottom: activeTab === "live" ? "2px solid var(--color-text)" : "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<HistoryIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
|
|
||||||
Live
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab("sessions")}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
padding: "8px",
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: activeTab === "sessions" ? "var(--color-hover)" : "transparent",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "13px",
|
|
||||||
fontWeight: activeTab === "sessions" ? 600 : 400,
|
|
||||||
borderBottom: activeTab === "sessions" ? "2px solid var(--color-text)" : "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<HistoryIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
|
|
||||||
Sessions
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Live Tab */}
|
|
||||||
{activeTab === "live" && (
|
|
||||||
<>
|
|
||||||
{/* Session header with settings button */}
|
|
||||||
<div className="panel-section">
|
|
||||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
||||||
<span style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)" }}>
|
|
||||||
{sessionName}
|
|
||||||
</span>
|
|
||||||
<div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowSettingsModal(true)}
|
|
||||||
title="LLM Provider Settings"
|
|
||||||
style={{
|
|
||||||
padding: "4px",
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
color: "var(--color-text-2)",
|
|
||||||
cursor: "pointer",
|
|
||||||
borderRadius: "4px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e) => (e.currentTarget.style.color = "var(--color-text)")}
|
|
||||||
onMouseLeave={(e) => (e.currentTarget.style.color = "var(--color-text-2)")}
|
|
||||||
>
|
|
||||||
<SettingsIcon sx={{ fontSize: 18 }} />
|
|
||||||
</button>
|
|
||||||
<div style={{ display: "flex", gap: "12px", fontSize: "12px", color: "var(--color-text-2)" }}>
|
|
||||||
<span>{wordCount} words</span>
|
|
||||||
<span>{formatTime(elapsedSeconds)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Timetable badge */}
|
|
||||||
{timetableContext && timetableContext.event_label && (
|
|
||||||
<div style={{
|
|
||||||
marginTop: "8px",
|
|
||||||
padding: "4px 8px",
|
|
||||||
backgroundColor: "var(--color-hover)",
|
|
||||||
borderRadius: "4px",
|
|
||||||
fontSize: "12px",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
}}>
|
|
||||||
📅 {timetableContext.event_label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="panel-divider" />
|
|
||||||
|
|
||||||
{/* Record button */}
|
|
||||||
<div className="panel-section">
|
|
||||||
<button
|
|
||||||
onClick={isRecording ? handleStop : handleStart}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
gap: "8px",
|
|
||||||
padding: "16px",
|
|
||||||
width: "100%",
|
|
||||||
borderRadius: "8px",
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "14px",
|
|
||||||
fontWeight: 600,
|
|
||||||
color: "#fff",
|
|
||||||
backgroundColor: isRecording ? "#ef4444" : "var(--color-text)",
|
|
||||||
transition: "background-color 200ms ease",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isRecording ? <StopIcon /> : <MicIcon />}
|
|
||||||
{isRecording ? "Stop Recording" : "Start Recording"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Generate Summary button (only when recording or has segments) */}
|
|
||||||
{(isRecording || completedSegments.length > 0) && (
|
|
||||||
<>
|
|
||||||
<div className="panel-divider" />
|
|
||||||
<div className="panel-section">
|
|
||||||
<button
|
|
||||||
onClick={() => setShowSummaryModal(true)}
|
|
||||||
disabled={isGeneratingSummary}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
gap: "8px",
|
|
||||||
padding: "12px",
|
|
||||||
width: "100%",
|
|
||||||
borderRadius: "8px",
|
|
||||||
border: "none",
|
|
||||||
cursor: isGeneratingSummary ? "not-allowed" : "pointer",
|
|
||||||
fontSize: "13px",
|
|
||||||
fontWeight: 600,
|
|
||||||
color: "#fff",
|
|
||||||
backgroundColor: isGeneratingSummary ? "#9ca3af" : "#7c3aed",
|
|
||||||
transition: "background-color 200ms ease",
|
|
||||||
opacity: isGeneratingSummary ? 0.7 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isGeneratingSummary ? (
|
|
||||||
<span style={{ display: "inline-block", width: 16, height: 16, border: "2px solid #fff", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 1s linear infinite" }} />
|
|
||||||
) : (
|
|
||||||
<AutoAwesomeIcon />
|
|
||||||
)}
|
|
||||||
{isGeneratingSummary ? "Generating..." : "Generate Summary"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Export button */}
|
|
||||||
{activeSession && (
|
|
||||||
<>
|
|
||||||
<div className="panel-divider" />
|
|
||||||
<div className="panel-section">
|
|
||||||
<div style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)", marginBottom: "8px" }}>
|
|
||||||
Export Session
|
|
||||||
</div>
|
|
||||||
<div style={{ display: "flex", gap: "8px" }}>
|
|
||||||
{(['srt', 'txt', 'json'] as const).map((format) => (
|
|
||||||
<button
|
|
||||||
key={format}
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
|
||||||
const response = await fetch(`${apiBaseUrl}/transcribe/sessions/${activeSession.id}/export`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ format }),
|
|
||||||
});
|
|
||||||
if (!response.ok) throw new Error('Export failed');
|
|
||||||
const blob = await response.blob();
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = `session_${activeSession.id.slice(0,8)}_${format}`;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
document.body.removeChild(a);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Export failed:', error);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
padding: '8px',
|
|
||||||
border: '1px solid var(--color-divider)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: 'var(--color-text)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: 500,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{format.toUpperCase()}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Summary result display */}
|
|
||||||
{summaryText && (
|
|
||||||
<>
|
|
||||||
<div className="panel-divider" />
|
|
||||||
<div className="panel-section">
|
|
||||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
||||||
<div className="panel-section-title">
|
|
||||||
<AutoAwesomeIcon sx={{ fontSize: 16, verticalAlign: "middle", marginRight: "4px" }} />
|
|
||||||
AI Summary
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setSummaryText(null)}
|
|
||||||
style={{
|
|
||||||
padding: "2px 6px",
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
color: "var(--color-text-2)",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "16px",
|
|
||||||
lineHeight: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div style={{
|
|
||||||
padding: "10px",
|
|
||||||
backgroundColor: "#f5f3ff",
|
|
||||||
borderRadius: "6px",
|
|
||||||
border: "1px solid #e0d5f5",
|
|
||||||
fontSize: "13px",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
lineHeight: 1.5,
|
|
||||||
whiteSpace: "pre-wrap",
|
|
||||||
maxHeight: "300px",
|
|
||||||
overflowY: "auto",
|
|
||||||
}}>
|
|
||||||
{summaryText}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Summary error display */}
|
|
||||||
{summaryError && (
|
|
||||||
<>
|
|
||||||
<div className="panel-divider" />
|
|
||||||
<div className="panel-section">
|
|
||||||
<div style={{
|
|
||||||
padding: "10px",
|
|
||||||
backgroundColor: "#fef2f2",
|
|
||||||
borderRadius: "6px",
|
|
||||||
border: "1px solid #fecaca",
|
|
||||||
fontSize: "13px",
|
|
||||||
color: "#dc2626",
|
|
||||||
}}>
|
|
||||||
<strong>Error:</strong> {summaryError}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="panel-divider" />
|
|
||||||
|
|
||||||
{/* Live feed */}
|
|
||||||
<div className="panel-section" style={{ gap: "6px" }}>
|
|
||||||
<div className="panel-section-title">Live Feed</div>
|
|
||||||
|
|
||||||
{completedSegments.map((seg, i) => (
|
|
||||||
<div
|
|
||||||
key={"completed-" + i}
|
|
||||||
style={{
|
|
||||||
padding: "8px 10px",
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
borderRadius: "4px",
|
|
||||||
border: "1px solid var(--color-divider)",
|
|
||||||
fontSize: "13px",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
lineHeight: 1.4,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{seg.text}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{currentSegment && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: "8px 10px",
|
|
||||||
backgroundColor: "var(--color-panel)",
|
|
||||||
borderRadius: "4px",
|
|
||||||
border: "1px dashed var(--color-divider)",
|
|
||||||
fontSize: "13px",
|
|
||||||
color: "var(--color-text-2)",
|
|
||||||
fontStyle: "italic",
|
|
||||||
lineHeight: 1.4,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{currentSegment.text || "Listening..."}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isRecording && completedSegments.length === 0 && !currentSegment && (
|
|
||||||
<div style={{ textAlign: "center", color: "var(--color-text-2)", padding: "16px", fontSize: "13px" }}>
|
|
||||||
Press Start Recording to begin transcription
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Sessions Tab */}
|
|
||||||
{activeTab === "sessions" && (
|
|
||||||
<>
|
|
||||||
<div className="panel-section">
|
|
||||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
||||||
<span style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)" }}>
|
|
||||||
Past Sessions
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={handleRefreshSessions}
|
|
||||||
style={{
|
|
||||||
padding: "4px 8px",
|
|
||||||
border: "1px solid var(--color-divider)",
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
borderRadius: "4px",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "12px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Refresh
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="panel-divider" />
|
|
||||||
|
|
||||||
<div className="panel-section" style={{ gap: "8px", maxHeight: "400px", overflowY: "auto" }}>
|
|
||||||
{sessions.length === 0 ? (
|
|
||||||
<div style={{ textAlign: "center", color: "var(--color-text-2)", padding: "16px", fontSize: "13px" }}>
|
|
||||||
No sessions yet
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
sessions.map((session) => (
|
|
||||||
<div
|
|
||||||
key={session.id}
|
|
||||||
style={{
|
|
||||||
padding: "10px",
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
borderRadius: "4px",
|
|
||||||
border: "1px solid var(--color-divider)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ fontSize: "13px", fontWeight: 500, color: "var(--color-text)" }}>
|
|
||||||
{session.title || "Untitled Session"}
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: "12px", color: "var(--color-text-2)", marginTop: "4px" }}>
|
|
||||||
{formatDateTime(session.started_at)}
|
|
||||||
{session.duration_seconds && ` · ${Math.floor(session.duration_seconds / 60)}m`}
|
|
||||||
{session.segment_count && ` · ${session.segment_count} segments`}
|
|
||||||
</div>
|
|
||||||
{session.timetable_event_label && (
|
|
||||||
<div style={{
|
|
||||||
marginTop: "4px",
|
|
||||||
padding: "2px 6px",
|
|
||||||
backgroundColor: "var(--color-hover)",
|
|
||||||
borderRadius: "3px",
|
|
||||||
fontSize: "11px",
|
|
||||||
color: "var(--color-text)",
|
|
||||||
display: "inline-block",
|
|
||||||
}}>
|
|
||||||
📅 {session.timetable_event_label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* LLM Config Settings Modal */}
|
|
||||||
<LLMConfigModal
|
|
||||||
isOpen={showSettingsModal}
|
|
||||||
onClose={() => setShowSettingsModal(false)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Summary Type Selection Modal */}
|
|
||||||
{showSummaryModal && (
|
|
||||||
<div className="fixed inset-0 z-[9999] overflow-y-auto">
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-black/50 transition-opacity"
|
|
||||||
onClick={() => setShowSummaryModal(false)}
|
|
||||||
/>
|
|
||||||
<div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full max-w-sm mx-auto">
|
|
||||||
<div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
|
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
|
||||||
Generate Summary
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowSummaryModal(false)}
|
|
||||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
|
||||||
>
|
|
||||||
<Close sx={{ fontSize: 20 }} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="px-4 py-5 sm:p-6 space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Summary Type
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={summaryType}
|
|
||||||
onChange={(e) => setSummaryType(e.target.value)}
|
|
||||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
>
|
|
||||||
{SUMMARY_TYPES.map((t) => (
|
|
||||||
<option key={t.value} value={t.value}>
|
|
||||||
{t.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Config status indicator */}
|
|
||||||
<div style={{
|
|
||||||
padding: "8px",
|
|
||||||
borderRadius: "6px",
|
|
||||||
fontSize: "12px",
|
|
||||||
backgroundColor: llmConfig.apiKey ? "#f0fdf4" : "#fef2f2",
|
|
||||||
color: llmConfig.apiKey ? "#16a34a" : "#dc2626",
|
|
||||||
border: `1px solid ${llmConfig.apiKey ? "#bbf7d0" : "#fecaca"}`,
|
|
||||||
}}>
|
|
||||||
{llmConfig.apiKey ? (
|
|
||||||
<>✓ Configured: {llmConfig.provider} ({llmConfig.model || 'default model'})</>
|
|
||||||
) : (
|
|
||||||
<>⚠ No API key configured. Click the ⚙ icon to set up.</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleGenerateSummary}
|
|
||||||
disabled={isGeneratingSummary || !llmConfig.apiKey}
|
|
||||||
className={`w-full rounded-md px-4 py-2 text-sm font-medium text-white transition-colors ${
|
|
||||||
isGeneratingSummary || !llmConfig.apiKey
|
|
||||||
? 'bg-gray-400 cursor-not-allowed'
|
|
||||||
: 'bg-purple-600 hover:bg-purple-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{isGeneratingSummary ? 'Generating...' : 'Generate'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Spinner animation style */}
|
|
||||||
<style>{`
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import Close from '@mui/icons-material/Close';
|
|
||||||
import { useTranscriptionStore, LLMConfig } from '../../../../../stores/transcriptionStore';
|
|
||||||
|
|
||||||
const PROVIDERS = [
|
|
||||||
{ value: 'openai', label: 'OpenAI' },
|
|
||||||
{ value: 'anthropic', label: 'Anthropic' },
|
|
||||||
{ value: 'ollama', label: 'Ollama' },
|
|
||||||
{ value: 'openrouter', label: 'OpenRouter' },
|
|
||||||
{ value: 'google', label: 'Google' },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
const LLMConfigModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
|
|
||||||
const { llmConfig, setLLMConfig } = useTranscriptionStore();
|
|
||||||
const [form, setForm] = useState<LLMConfig>(llmConfig);
|
|
||||||
const [saved, setSaved] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
setForm(useTranscriptionStore.getState().llmConfig);
|
|
||||||
setSaved(false);
|
|
||||||
}
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
setLLMConfig(form);
|
|
||||||
setSaved(true);
|
|
||||||
setTimeout(() => setSaved(false), 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isOpen) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-[9999] overflow-y-auto">
|
|
||||||
{/* Backdrop */}
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-black/50 transition-opacity"
|
|
||||||
onClick={onClose}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Modal panel */}
|
|
||||||
<div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full max-w-md mx-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
|
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
|
||||||
LLM Provider Settings
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
|
||||||
>
|
|
||||||
<Close sx={{ fontSize: 20 }} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="px-4 py-5 sm:p-6 space-y-4">
|
|
||||||
{/* Provider dropdown */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Provider
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={form.provider}
|
|
||||||
onChange={(e) => setForm({ ...form, provider: e.target.value as LLMConfig['provider'] })}
|
|
||||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
>
|
|
||||||
{PROVIDERS.map((p) => (
|
|
||||||
<option key={p.value} value={p.value}>
|
|
||||||
{p.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Model name */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Model
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.model}
|
|
||||||
onChange={(e) => setForm({ ...form, model: e.target.value })}
|
|
||||||
placeholder="e.g. gpt-4o, claude-sonnet-4-20250514"
|
|
||||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* API Key */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
API Key
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={form.apiKey}
|
|
||||||
onChange={(e) => setForm({ ...form, apiKey: e.target.value })}
|
|
||||||
placeholder="sk-..."
|
|
||||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Note */}
|
|
||||||
<p className="text-xs text-gray-500">
|
|
||||||
API keys are stored locally in your browser only. They are never sent to Supabase or stored on any server.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Save button */}
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
className={`w-full rounded-md px-4 py-2 text-sm font-medium text-white transition-colors ${
|
|
||||||
saved
|
|
||||||
? 'bg-green-600 hover:bg-green-700'
|
|
||||||
: 'bg-blue-600 hover:bg-blue-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{saved ? '✓ Saved!' : 'Save Settings'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LLMConfigModal;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user