Add project save/load and improve AI chat formatting
Project persistence: - save_project_transcript command: persists segments, speakers, words to SQLite - load_project_transcript command: loads full transcript with nested words - delete_project command: soft-delete projects - Auto-save after pipeline completes (named from filename) - Project dropdown in header to switch between saved transcripts - Projects load audio, segments, and speakers from database AI chat improvements: - Markdown rendering in assistant messages (headers, lists, bold, italic, code) - Better message spacing and visual distinction (border-left accents) - Styled markdown elements matching dark theme - Improved empty state and quick action button sizing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -88,6 +88,88 @@
|
||||
messages = [];
|
||||
}
|
||||
|
||||
function formatMarkdown(text: string): string {
|
||||
// Split into lines for block-level processing
|
||||
const lines = text.split('\n');
|
||||
const result: string[] = [];
|
||||
let inList = false;
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
let line = lines[i];
|
||||
|
||||
// Headers
|
||||
if (line.startsWith('### ')) {
|
||||
if (inList) { result.push('</ul>'); inList = false; }
|
||||
const content = applyInlineFormatting(line.slice(4));
|
||||
result.push(`<h4>${content}</h4>`);
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith('## ')) {
|
||||
if (inList) { result.push('</ul>'); inList = false; }
|
||||
const content = applyInlineFormatting(line.slice(3));
|
||||
result.push(`<h3>${content}</h3>`);
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith('# ')) {
|
||||
if (inList) { result.push('</ul>'); inList = false; }
|
||||
const content = applyInlineFormatting(line.slice(2));
|
||||
result.push(`<h2>${content}</h2>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// List items (- or *)
|
||||
if (/^[\-\*] /.test(line)) {
|
||||
if (!inList) { result.push('<ul>'); inList = true; }
|
||||
const content = applyInlineFormatting(line.slice(2));
|
||||
result.push(`<li>${content}</li>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Numbered list items
|
||||
if (/^\d+\.\s/.test(line)) {
|
||||
if (!inList) { result.push('<ol>'); inList = true; }
|
||||
const content = applyInlineFormatting(line.replace(/^\d+\.\s/, ''));
|
||||
result.push(`<li>${content}</li>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Non-list line: close any open list
|
||||
if (inList) {
|
||||
// Check if previous list was ordered or unordered
|
||||
const lastOpen = result.findLast(r => r === '<ul>' || r === '<ol>');
|
||||
result.push(lastOpen === '<ol>' ? '</ol>' : '</ul>');
|
||||
inList = false;
|
||||
}
|
||||
|
||||
// Empty line = paragraph break
|
||||
if (line.trim() === '') {
|
||||
result.push('<br>');
|
||||
continue;
|
||||
}
|
||||
|
||||
// Regular text line
|
||||
result.push(applyInlineFormatting(line));
|
||||
}
|
||||
|
||||
// Close any trailing open list
|
||||
if (inList) {
|
||||
const lastOpen = result.findLast(r => r === '<ul>' || r === '<ol>');
|
||||
result.push(lastOpen === '<ol>' ? '</ol>' : '</ul>');
|
||||
}
|
||||
|
||||
return result.join('\n');
|
||||
}
|
||||
|
||||
function applyInlineFormatting(text: string): string {
|
||||
// Code blocks (backtick) — process first to avoid conflicts
|
||||
text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
// Bold (**text**)
|
||||
text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
||||
// Italic (*text*) — only single asterisks not already consumed by bold
|
||||
text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
|
||||
return text;
|
||||
}
|
||||
|
||||
// Quick action buttons
|
||||
async function summarize() {
|
||||
inputText = 'Please summarize this transcript in bullet points.';
|
||||
@@ -122,7 +204,11 @@
|
||||
{:else}
|
||||
{#each messages as msg}
|
||||
<div class="message {msg.role}">
|
||||
<div class="message-content">{msg.content}</div>
|
||||
{#if msg.role === 'assistant'}
|
||||
<div class="message-content">{@html formatMarkdown(msg.content)}</div>
|
||||
{:else}
|
||||
<div class="message-content">{msg.content}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{#if isLoading}
|
||||
@@ -192,47 +278,101 @@
|
||||
}
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
padding: 1rem 0;
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.empty-state p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.quick-btn {
|
||||
background: rgba(233, 69, 96, 0.15);
|
||||
border: 1px solid rgba(233, 69, 96, 0.3);
|
||||
color: #e94560;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.45rem 0.85rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.quick-btn:hover {
|
||||
background: rgba(233, 69, 96, 0.25);
|
||||
}
|
||||
.message {
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.message.user {
|
||||
background: rgba(233, 69, 96, 0.15);
|
||||
margin-left: 1rem;
|
||||
border-left: 3px solid rgba(233, 69, 96, 0.4);
|
||||
}
|
||||
.message.assistant {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
margin-right: 1rem;
|
||||
border-left: 3px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.message.loading {
|
||||
opacity: 0.6;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Markdown styles inside assistant messages */
|
||||
.message.assistant :global(h2) {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0.6rem 0 0.3rem;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
.message.assistant :global(h3) {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin: 0.5rem 0 0.25rem;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
.message.assistant :global(h4) {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin: 0.4rem 0 0.2rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.message.assistant :global(strong) {
|
||||
color: #f0f0f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
.message.assistant :global(em) {
|
||||
color: #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
.message.assistant :global(code) {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #e94560;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
}
|
||||
.message.assistant :global(ul),
|
||||
.message.assistant :global(ol) {
|
||||
margin: 0.35rem 0;
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
.message.assistant :global(li) {
|
||||
margin-bottom: 0.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.message.assistant :global(br) {
|
||||
display: block;
|
||||
content: '';
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.chat-input {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -18,8 +18,15 @@
|
||||
let audioUrl = $state('');
|
||||
let showSettings = $state(false);
|
||||
|
||||
// Project management state
|
||||
let currentProjectId = $state<string | null>(null);
|
||||
let currentProjectName = $state('');
|
||||
let savedProjects = $state<Array<{id: string, name: string, created_at: string}>>([]);
|
||||
let showProjectMenu = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
loadSettings();
|
||||
loadProjects();
|
||||
|
||||
// Global keyboard shortcuts
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
@@ -38,18 +45,24 @@
|
||||
showSettings = true;
|
||||
} else if (e.key === 'Escape') {
|
||||
showExportMenu = false;
|
||||
showProjectMenu = false;
|
||||
showSettings = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Close export dropdown on outside click
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (showExportMenu) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.export-dropdown')) {
|
||||
showExportMenu = false;
|
||||
}
|
||||
}
|
||||
if (showProjectMenu) {
|
||||
if (!target.closest('.project-dropdown')) {
|
||||
showProjectMenu = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
@@ -70,6 +83,106 @@
|
||||
// Speaker color palette for auto-assignment
|
||||
const speakerColors = ['#e94560', '#4ecdc4', '#ffe66d', '#a8e6cf', '#ff8b94', '#c7ceea', '#ffd93d', '#6bcb77'];
|
||||
|
||||
async function loadProjects() {
|
||||
try {
|
||||
const projects = await invoke<Array<{id: string, name: string, created_at: string}>>('list_projects');
|
||||
savedProjects = projects;
|
||||
} catch (err) {
|
||||
console.error('Failed to load projects:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProject(projectId: string) {
|
||||
try {
|
||||
const result = await invoke<{
|
||||
project_id: string;
|
||||
name: string;
|
||||
file_path: string;
|
||||
segments: Array<{
|
||||
text: string;
|
||||
start_ms: number;
|
||||
end_ms: number;
|
||||
speaker: string | null;
|
||||
words: Array<{
|
||||
word: string;
|
||||
start_ms: number;
|
||||
end_ms: number;
|
||||
confidence: number;
|
||||
}>;
|
||||
}>;
|
||||
speakers: string[];
|
||||
}>('load_project_transcript', { projectId });
|
||||
|
||||
// Set project info
|
||||
currentProjectId = result.project_id;
|
||||
currentProjectName = result.name;
|
||||
|
||||
// Rebuild speakers
|
||||
const newSpeakers: Speaker[] = (result.speakers || []).map((label, idx) => ({
|
||||
id: `speaker-${idx}`,
|
||||
project_id: result.project_id,
|
||||
label,
|
||||
display_name: null,
|
||||
color: speakerColors[idx % speakerColors.length],
|
||||
}));
|
||||
speakers.set(newSpeakers);
|
||||
|
||||
// Build speaker label -> id lookup
|
||||
const speakerLookup = new Map(newSpeakers.map(s => [s.label, s.id]));
|
||||
|
||||
// Rebuild segments
|
||||
const newSegments: Segment[] = result.segments.map((seg, idx) => ({
|
||||
id: `seg-${idx}`,
|
||||
project_id: result.project_id,
|
||||
media_file_id: '',
|
||||
speaker_id: seg.speaker ? (speakerLookup.get(seg.speaker) ?? null) : null,
|
||||
start_ms: seg.start_ms,
|
||||
end_ms: seg.end_ms,
|
||||
text: seg.text,
|
||||
original_text: null,
|
||||
confidence: null,
|
||||
is_edited: false,
|
||||
edited_at: null,
|
||||
segment_index: idx,
|
||||
words: seg.words.map((w, widx) => ({
|
||||
id: `word-${idx}-${widx}`,
|
||||
segment_id: `seg-${idx}`,
|
||||
word: w.word,
|
||||
start_ms: w.start_ms,
|
||||
end_ms: w.end_ms,
|
||||
confidence: w.confidence,
|
||||
word_index: widx,
|
||||
})),
|
||||
}));
|
||||
segments.set(newSegments);
|
||||
|
||||
// Load audio from saved file path
|
||||
if (result.file_path) {
|
||||
audioUrl = convertFileSrc(result.file_path);
|
||||
waveformPlayer?.loadAudio(audioUrl);
|
||||
}
|
||||
|
||||
showProjectMenu = false;
|
||||
} catch (err) {
|
||||
console.error('Failed to load project:', err);
|
||||
alert(`Failed to load project: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteProject(projectId: string) {
|
||||
try {
|
||||
await invoke('delete_project', { projectId });
|
||||
await loadProjects();
|
||||
if (currentProjectId === projectId) {
|
||||
currentProjectId = null;
|
||||
currentProjectName = '';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to delete project:', err);
|
||||
alert(`Failed to delete project: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
function handleWordClick(timeMs: number) {
|
||||
console.log('[voice-to-notes] Word clicked, seeking to', timeMs, 'ms');
|
||||
waveformPlayer?.seekTo(timeMs);
|
||||
@@ -245,6 +358,28 @@
|
||||
}));
|
||||
|
||||
segments.set(newSegments);
|
||||
|
||||
// Auto-save project
|
||||
try {
|
||||
const fileName = filePath.split(/[\\/]/).pop() || 'Untitled';
|
||||
const projectName = fileName.replace(/\.[^.]+$/, '');
|
||||
const projectId = await invoke<string>('create_project', { name: projectName });
|
||||
await invoke('save_project_transcript', {
|
||||
projectId,
|
||||
filePath,
|
||||
segments: result.segments,
|
||||
speakers: result.speakers.map((label, idx) => ({
|
||||
label,
|
||||
display_name: null,
|
||||
color: speakerColors[idx % speakerColors.length],
|
||||
})),
|
||||
});
|
||||
currentProjectId = projectId;
|
||||
currentProjectName = projectName;
|
||||
await loadProjects();
|
||||
} catch (saveErr) {
|
||||
console.error('Auto-save failed:', saveErr);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Pipeline failed:', err);
|
||||
alert(`Pipeline failed: ${err}`);
|
||||
@@ -318,6 +453,33 @@
|
||||
<div class="app-header">
|
||||
<h1>Voice to Notes</h1>
|
||||
<div class="header-actions">
|
||||
<div class="project-dropdown">
|
||||
<button class="project-btn" onclick={() => showProjectMenu = !showProjectMenu}>
|
||||
{currentProjectName ? `Project: ${currentProjectName}` : 'No project'}
|
||||
</button>
|
||||
{#if showProjectMenu}
|
||||
<div class="project-menu">
|
||||
{#if savedProjects.length === 0}
|
||||
<div class="project-empty">No saved projects</div>
|
||||
{:else}
|
||||
{#each savedProjects as project}
|
||||
<div class="project-item">
|
||||
<button class="project-option" onclick={() => loadProject(project.id)}>
|
||||
{project.name}
|
||||
</button>
|
||||
<button
|
||||
class="project-delete"
|
||||
onclick={(e) => { e.stopPropagation(); deleteProject(project.id); }}
|
||||
title="Delete project"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button class="import-btn" onclick={handleFileImport} disabled={isTranscribing}>
|
||||
{#if isTranscribing}
|
||||
Processing...
|
||||
@@ -467,6 +629,78 @@
|
||||
.export-option:hover {
|
||||
background: rgba(233, 69, 96, 0.2);
|
||||
}
|
||||
.project-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.project-btn {
|
||||
background: #0f3460;
|
||||
border: 1px solid #4a5568;
|
||||
color: #e0e0e0;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.project-btn:hover {
|
||||
background: #1a4a7a;
|
||||
}
|
||||
.project-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 0.25rem;
|
||||
background: #16213e;
|
||||
border: 1px solid #4a5568;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
min-width: 220px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.project-empty {
|
||||
padding: 0.5rem 1rem;
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.project-option {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.project-option:hover {
|
||||
background: rgba(233, 69, 96, 0.2);
|
||||
}
|
||||
.project-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.project-delete:hover {
|
||||
color: #e94560;
|
||||
}
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user