feat(cis): add Keywords tab — watches, real-time detection, match log (Phase 3C)
- KeywordWatch and KeywordMatch interfaces in transcriptionStore - loadKeywordWatches, addKeywordWatch, deleteKeywordWatch actions via API with JWT auth - checkSegmentForKeywords: client-side detection on each final segment, logs events to backend - clearKeywordMatches: resets session-scoped match list - Keywords tab in CCTranscriptionPanel: add/delete watches, match log with timestamp - Match count badge on Keywords tab when hits exist during recording - Also fixes missing Close import that was present in summary modal
This commit is contained in:
parent
4d10d75003
commit
06f761e750
@ -39,6 +39,24 @@ export interface LLMConfig {
|
||||
|
||||
export type ExportFormat = 'srt' | 'txt' | 'json';
|
||||
|
||||
export interface KeywordWatch {
|
||||
id: string;
|
||||
user_id: string;
|
||||
keyword: string;
|
||||
match_type: string;
|
||||
action: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface KeywordMatch {
|
||||
keyword: string;
|
||||
watch_id: string | null;
|
||||
segment_text: string;
|
||||
elapsed_seconds: number;
|
||||
matched_at: string;
|
||||
}
|
||||
|
||||
const LLM_CONFIG_STORAGE_KEY = 'cc_llm_config';
|
||||
|
||||
function loadLLMConfig(): LLMConfig {
|
||||
@ -97,6 +115,10 @@ interface TranscriptionState {
|
||||
isExporting: boolean;
|
||||
exportError: string | null;
|
||||
|
||||
// Keyword state
|
||||
keywordWatches: KeywordWatch[];
|
||||
keywordMatches: KeywordMatch[];
|
||||
|
||||
// Actions
|
||||
startSession: (timetableTag?: TimetablePeriod) => Promise<void>;
|
||||
stopSession: () => Promise<void>;
|
||||
@ -120,6 +142,13 @@ interface TranscriptionState {
|
||||
// Export actions
|
||||
exportSession: (sessionId: string, format: ExportFormat) => Promise<void>;
|
||||
setExportError: (error: string | null) => void;
|
||||
|
||||
// Keyword actions
|
||||
loadKeywordWatches: () => Promise<void>;
|
||||
addKeywordWatch: (keyword: string) => Promise<void>;
|
||||
deleteKeywordWatch: (watchId: string) => Promise<void>;
|
||||
checkSegmentForKeywords: (text: string, elapsedSeconds: number) => Promise<void>;
|
||||
clearKeywordMatches: () => void;
|
||||
}
|
||||
|
||||
export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
|
||||
@ -145,6 +174,10 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
|
||||
isExporting: false,
|
||||
exportError: null,
|
||||
|
||||
// Keyword state
|
||||
keywordWatches: [],
|
||||
keywordMatches: [],
|
||||
|
||||
setTimetableContext: (context) => {
|
||||
set({ timetableContext: context });
|
||||
},
|
||||
@ -265,6 +298,7 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
|
||||
activeSession: null,
|
||||
pendingCanvasEvents: [],
|
||||
timetableContext: null,
|
||||
keywordMatches: [],
|
||||
});
|
||||
},
|
||||
|
||||
@ -405,4 +439,123 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
|
||||
setExportError: (error: string | null) => {
|
||||
set({ exportError: error });
|
||||
},
|
||||
|
||||
loadKeywordWatches: async () => {
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session?.access_token) return;
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
||||
const response = await fetch(`${apiBaseUrl}/transcribe/keywords`, {
|
||||
headers: { 'Authorization': `Bearer ${session.access_token}` },
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const watches = await response.json();
|
||||
set({ keywordWatches: watches });
|
||||
} catch (error) {
|
||||
console.error('Failed to load keyword watches:', error);
|
||||
}
|
||||
},
|
||||
|
||||
addKeywordWatch: async (keyword: string) => {
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session?.access_token) return;
|
||||
const user = await supabase.auth.getUser();
|
||||
if (!user.data.user) return;
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
||||
const response = await fetch(`${apiBaseUrl}/transcribe/keywords`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${session.access_token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: user.data.user.id,
|
||||
keyword: keyword.trim(),
|
||||
match_type: 'contains',
|
||||
action: 'alert',
|
||||
}),
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const newWatch = await response.json();
|
||||
set((state) => ({ keywordWatches: [...state.keywordWatches, newWatch] }));
|
||||
} catch (error) {
|
||||
console.error('Failed to add keyword watch:', error);
|
||||
}
|
||||
},
|
||||
|
||||
deleteKeywordWatch: async (watchId: string) => {
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session?.access_token) return;
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
||||
await fetch(`${apiBaseUrl}/transcribe/keywords/${watchId}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${session.access_token}` },
|
||||
});
|
||||
set((state) => ({ keywordWatches: state.keywordWatches.filter((w) => w.id !== watchId) }));
|
||||
} catch (error) {
|
||||
console.error('Failed to delete keyword watch:', error);
|
||||
}
|
||||
},
|
||||
|
||||
checkSegmentForKeywords: async (text: string, elapsedSeconds: number) => {
|
||||
const { keywordWatches, activeSession } = get();
|
||||
if (keywordWatches.length === 0) return;
|
||||
|
||||
const lowerText = text.toLowerCase();
|
||||
const matches: KeywordMatch[] = [];
|
||||
|
||||
for (const watch of keywordWatches) {
|
||||
if (!watch.is_active) continue;
|
||||
const lowerKeyword = watch.keyword.toLowerCase();
|
||||
const matched =
|
||||
watch.match_type === 'exact'
|
||||
? lowerText === lowerKeyword
|
||||
: watch.match_type === 'starts_with'
|
||||
? lowerText.startsWith(lowerKeyword)
|
||||
: lowerText.includes(lowerKeyword);
|
||||
|
||||
if (matched) {
|
||||
matches.push({
|
||||
keyword: watch.keyword,
|
||||
watch_id: watch.id,
|
||||
segment_text: text,
|
||||
elapsed_seconds: elapsedSeconds,
|
||||
matched_at: new Date().toISOString(),
|
||||
});
|
||||
|
||||
if (activeSession) {
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
|
||||
await fetch(`${apiBaseUrl}/transcribe/keywords/events`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(session?.access_token ? { 'Authorization': `Bearer ${session.access_token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
session_id: activeSession.id,
|
||||
keyword_watch_id: watch.id,
|
||||
keyword_text: watch.keyword,
|
||||
matched_in_text: text,
|
||||
session_elapsed_seconds: elapsedSeconds,
|
||||
}),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to log keyword event:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (matches.length > 0) {
|
||||
set((state) => ({ keywordMatches: [...state.keywordMatches, ...matches] }));
|
||||
}
|
||||
},
|
||||
|
||||
clearKeywordMatches: () => {
|
||||
set({ keywordMatches: [] });
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
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 { Mic as MicIcon, Stop as StopIcon, History as HistoryIcon, Settings as SettingsIcon, AutoAwesome as AutoAwesomeIcon, NotificationsActive as KeywordIcon, Close } from "@mui/icons-material";
|
||||
import { useTranscriptionStore, TranscriptionSegment, TranscriptionSession, TimetablePeriod, KeywordWatch, KeywordMatch } from "../../../../../stores/transcriptionStore";
|
||||
import { TranscriptionService } from "../../../cc-base/cc-transcription/transcriptionService";
|
||||
import { CanvasEventLogger } from "../../../cc-base/canvas-event-logger/CanvasEventLogger";
|
||||
import LLMConfigModal from "./LLMConfigModal";
|
||||
@ -17,7 +17,7 @@ const formatDateTime = (isoString: string): string => {
|
||||
return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
type TabType = "live" | "sessions";
|
||||
type TabType = "live" | "sessions" | "keywords";
|
||||
|
||||
const SUMMARY_TYPES = [
|
||||
{ value: 'full_lesson', label: 'Full Lesson Summary' },
|
||||
@ -52,6 +52,13 @@ export const CCTranscriptionPanel: React.FC = () => {
|
||||
setSummaryText,
|
||||
setIsGeneratingSummary,
|
||||
setSummaryError,
|
||||
keywordWatches,
|
||||
keywordMatches,
|
||||
loadKeywordWatches,
|
||||
addKeywordWatch,
|
||||
deleteKeywordWatch,
|
||||
checkSegmentForKeywords,
|
||||
clearKeywordMatches,
|
||||
} = useTranscriptionStore();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<TabType>("live");
|
||||
@ -66,9 +73,14 @@ export const CCTranscriptionPanel: React.FC = () => {
|
||||
const [showSummaryModal, setShowSummaryModal] = useState(false);
|
||||
const [summaryType, setSummaryType] = useState('full_lesson');
|
||||
|
||||
// Load sessions on mount
|
||||
// Keyword tab state
|
||||
const [newKeyword, setNewKeyword] = useState('');
|
||||
const [isAddingKeyword, setIsAddingKeyword] = useState(false);
|
||||
|
||||
// Load sessions and keyword watches on mount
|
||||
useEffect(() => {
|
||||
loadSessions().then(setSessions);
|
||||
loadKeywordWatches();
|
||||
}, []);
|
||||
|
||||
// Auto-detect timetable context on mount
|
||||
@ -117,6 +129,10 @@ export const CCTranscriptionPanel: React.FC = () => {
|
||||
const service = new TranscriptionService();
|
||||
service.setTranscriptionCallback((text, isFinal, metadata) => {
|
||||
saveSegment(text, isFinal, metadata);
|
||||
if (isFinal) {
|
||||
const { elapsedSeconds: elapsed } = useTranscriptionStore.getState();
|
||||
checkSegmentForKeywords(text, elapsed);
|
||||
}
|
||||
});
|
||||
await service.startTranscription();
|
||||
serviceRef.current = service;
|
||||
@ -247,6 +263,37 @@ export const CCTranscriptionPanel: React.FC = () => {
|
||||
<HistoryIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
|
||||
Sessions
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("keywords")}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "8px",
|
||||
border: "none",
|
||||
backgroundColor: activeTab === "keywords" ? "var(--color-hover)" : "transparent",
|
||||
color: keywordMatches.length > 0 ? "#f59e0b" : "var(--color-text)",
|
||||
cursor: "pointer",
|
||||
fontSize: "13px",
|
||||
fontWeight: activeTab === "keywords" ? 600 : 400,
|
||||
borderBottom: activeTab === "keywords" ? "2px solid var(--color-text)" : "none",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<KeywordIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
|
||||
Keywords
|
||||
{keywordMatches.length > 0 && (
|
||||
<span style={{
|
||||
marginLeft: "4px",
|
||||
backgroundColor: "#f59e0b",
|
||||
color: "#fff",
|
||||
borderRadius: "10px",
|
||||
padding: "1px 5px",
|
||||
fontSize: "10px",
|
||||
fontWeight: 700,
|
||||
}}>
|
||||
{keywordMatches.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Live Tab */}
|
||||
@ -600,6 +647,157 @@ export const CCTranscriptionPanel: React.FC = () => {
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Keywords Tab */}
|
||||
{activeTab === "keywords" && (
|
||||
<>
|
||||
<div className="panel-section">
|
||||
<div style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)", marginBottom: "8px" }}>
|
||||
Keyword Watches
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "6px" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={newKeyword}
|
||||
onChange={(e) => setNewKeyword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && newKeyword.trim()) {
|
||||
setIsAddingKeyword(true);
|
||||
addKeywordWatch(newKeyword.trim()).finally(() => {
|
||||
setNewKeyword('');
|
||||
setIsAddingKeyword(false);
|
||||
});
|
||||
}
|
||||
}}
|
||||
placeholder="Add keyword..."
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "6px 8px",
|
||||
border: "1px solid var(--color-divider)",
|
||||
borderRadius: "4px",
|
||||
fontSize: "13px",
|
||||
backgroundColor: "var(--color-panel)",
|
||||
color: "var(--color-text)",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!newKeyword.trim() || isAddingKeyword) return;
|
||||
setIsAddingKeyword(true);
|
||||
addKeywordWatch(newKeyword.trim()).finally(() => {
|
||||
setNewKeyword('');
|
||||
setIsAddingKeyword(false);
|
||||
});
|
||||
}}
|
||||
disabled={!newKeyword.trim() || isAddingKeyword}
|
||||
style={{
|
||||
padding: "6px 10px",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: newKeyword.trim() ? "var(--color-text)" : "var(--color-divider)",
|
||||
color: "#fff",
|
||||
cursor: newKeyword.trim() ? "pointer" : "not-allowed",
|
||||
fontSize: "13px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel-divider" />
|
||||
|
||||
<div className="panel-section" style={{ gap: "6px" }}>
|
||||
{keywordWatches.length === 0 ? (
|
||||
<div style={{ textAlign: "center", color: "var(--color-text-2)", padding: "12px", fontSize: "13px" }}>
|
||||
No keyword watches yet
|
||||
</div>
|
||||
) : (
|
||||
keywordWatches.filter((w) => w.is_active).map((watch) => (
|
||||
<div
|
||||
key={watch.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "6px 10px",
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid var(--color-divider)",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "13px", color: "var(--color-text)", fontFamily: "monospace" }}>
|
||||
{watch.keyword}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteKeywordWatch(watch.id)}
|
||||
style={{
|
||||
padding: "2px",
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
color: "var(--color-text-2)",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Close sx={{ fontSize: 14 }} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{keywordMatches.length > 0 && (
|
||||
<>
|
||||
<div className="panel-divider" />
|
||||
<div className="panel-section">
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" }}>
|
||||
<div style={{ fontSize: "13px", fontWeight: 500, color: "var(--color-text)" }}>
|
||||
Matches this session
|
||||
</div>
|
||||
<button
|
||||
onClick={clearKeywordMatches}
|
||||
style={{
|
||||
padding: "2px 6px",
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
color: "var(--color-text-2)",
|
||||
cursor: "pointer",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "4px", maxHeight: "250px", overflowY: "auto" }}>
|
||||
{[...keywordMatches].reverse().map((match, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
padding: "6px 8px",
|
||||
backgroundColor: "#fffbeb",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid #fde68a",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: 600, color: "#92400e", marginBottom: "2px" }}>
|
||||
"{match.keyword}" at {formatTime(Math.floor(match.elapsed_seconds))}
|
||||
</div>
|
||||
<div style={{ color: "var(--color-text-2)", lineHeight: 1.3 }}>
|
||||
{match.segment_text.length > 80 ? match.segment_text.slice(0, 80) + '…' : match.segment_text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* LLM Config Settings Modal */}
|
||||
<LLMConfigModal
|
||||
isOpen={showSettingsModal}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user