feat: document & audio corpus picker for all tools

- Add "Select from My Docs" button to all text tool forms; free-tier
  users see an upgrade modal, paid (CaveauAI) users get a searchable
  multi-select modal backed by /api/dashboard/documents.php
- Add "Select from My Audio" picker on Transcribe with single-select
  and a "Save to My Audio" button for persisting uploaded clips
- New PHP helpers in bootstrap.php: dbnToolsFetchDocChunks,
  dbnToolsClientIdFromSession, dbnToolsInjectDocContent
- timeline, ask, redact APIs prepend selected document content
  (fetched from client_chunks SQL) before the textarea text
- api/dashboard/audio-upload.php stores audio files on server and
  creates a client_documents row with source_type='audio'
- api/transcribe.php falls back to stored audio via audio_doc_id POST
  field when no file is uploaded
- api/dashboard/documents.php supports ?source_type= filter
- tools.js: doc_ids added to JSON payload; stored-audio transcribe path
- New assets/css/doc-picker.css, assets/js/doc-picker.js
- SQL migration: scripts/sql/audio_docs_column.sql

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-23 21:38:04 +02:00
parent 58e1d1dae1
commit f383ad5b74
14 changed files with 857 additions and 15 deletions
+272
View File
@@ -0,0 +1,272 @@
/* ── Doc / Audio Picker ──────────────────────────────────────────────────── */
.doc-picker-section {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.doc-picker-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.9rem;
border: 1.5px solid var(--dbn-line, #d0cfc8);
border-radius: 6px;
background: transparent;
color: var(--dbn-text, #16130f);
font-size: 0.84rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
white-space: nowrap;
}
.doc-picker-btn:hover {
border-color: var(--dbn-accent, #00205B);
background: color-mix(in srgb, var(--dbn-accent, #00205B) 5%, transparent);
}
.doc-picker-btn:focus-visible {
outline: 2px solid var(--dbn-accent, #00205B);
outline-offset: 2px;
}
.doc-picker-btn__icon { flex-shrink: 0; }
/* selected doc chips */
.doc-picker-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
flex: 1;
min-width: 0;
}
.doc-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.6rem;
background: color-mix(in srgb, var(--dbn-accent, #00205B) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--dbn-accent, #00205B) 30%, transparent);
border-radius: 4px;
font-size: 0.79rem;
color: var(--dbn-text, #16130f);
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-chip__remove {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.55;
padding: 0;
line-height: 1;
font-size: 1rem;
}
.doc-chip__remove:hover { opacity: 1; }
/* ── Modal overlay ───────────────────────────────────────────────────────── */
.doc-picker-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
}
.doc-picker-backdrop[hidden] { display: none; }
.doc-picker-dialog {
background: #fff;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
width: min(640px, 94vw);
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.doc-picker-dialog__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--dbn-line, #d0cfc8);
flex-shrink: 0;
}
.doc-picker-dialog__head h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--dbn-text, #16130f);
}
.doc-picker-dialog__close {
background: none;
border: none;
cursor: pointer;
font-size: 1.4rem;
line-height: 1;
color: rgba(22, 19, 15, 0.5);
padding: 0 0.2rem;
}
.doc-picker-dialog__close:hover { color: var(--dbn-text, #16130f); }
.doc-picker-dialog__search {
margin: 0.75rem 1.25rem 0;
padding: 0.5rem 0.75rem;
border: 1.5px solid var(--dbn-line, #d0cfc8);
border-radius: 6px;
font-size: 0.88rem;
width: calc(100% - 2.5rem);
box-sizing: border-box;
}
.doc-picker-dialog__search:focus { outline: none; border-color: var(--dbn-accent, #00205B); }
.doc-picker-list {
overflow-y: auto;
flex: 1;
padding: 0.5rem 1.25rem 0.75rem;
margin-top: 0.5rem;
}
.doc-picker-list__empty {
text-align: center;
color: rgba(22, 19, 15, 0.45);
font-size: 0.88rem;
padding: 2rem 0;
}
.doc-picker-list__loading {
text-align: center;
color: rgba(22, 19, 15, 0.45);
font-size: 0.88rem;
padding: 1.5rem 0;
}
.doc-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.55rem 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: background 0.1s;
}
.doc-item:hover, .doc-item.is-selected { background: color-mix(in srgb, var(--dbn-accent, #00205B) 7%, transparent); }
.doc-item input[type="checkbox"] { margin-top: 0.1rem; flex-shrink: 0; accent-color: var(--dbn-accent, #00205B); }
.doc-item__title {
font-size: 0.88rem;
font-weight: 500;
color: var(--dbn-text, #16130f);
line-height: 1.4;
}
.doc-item__meta {
font-size: 0.76rem;
color: rgba(22, 19, 15, 0.5);
margin-top: 0.1rem;
}
.doc-picker-dialog__foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--dbn-line, #d0cfc8);
flex-shrink: 0;
}
.doc-picker-dialog__count { font-size: 0.84rem; color: rgba(22, 19, 15, 0.55); }
.doc-picker-dialog__confirm {
padding: 0.48rem 1.1rem;
background: var(--dbn-accent, #00205B);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
}
.doc-picker-dialog__confirm:disabled { opacity: 0.45; cursor: not-allowed; }
.doc-picker-dialog__confirm:not(:disabled):hover { background: color-mix(in srgb, var(--dbn-accent, #00205B) 80%, #000); }
/* ── Upgrade modal ───────────────────────────────────────────────────────── */
.doc-picker-upgrade-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
}
.doc-picker-upgrade-backdrop[hidden] { display: none; }
.doc-picker-upgrade-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
width: min(400px, 92vw);
padding: 2rem 1.75rem;
text-align: center;
}
.doc-picker-upgrade-card__icon {
font-size: 2.2rem;
margin-bottom: 0.75rem;
display: block;
}
.doc-picker-upgrade-card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
color: var(--dbn-text, #16130f);
}
.doc-picker-upgrade-card p {
margin: 0 0 1.25rem;
font-size: 0.9rem;
color: rgba(22, 19, 15, 0.65);
line-height: 1.6;
}
.doc-picker-upgrade-card__actions { display: flex; gap: 0.65rem; justify-content: center; }
.doc-picker-upgrade-card__cta {
padding: 0.55rem 1.25rem;
background: var(--dbn-accent, #00205B);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.doc-picker-upgrade-card__cta:hover { background: color-mix(in srgb, var(--dbn-accent, #00205B) 80%, #000); }
.doc-picker-upgrade-card__dismiss {
padding: 0.55rem 1rem;
background: none;
border: 1.5px solid var(--dbn-line, #d0cfc8);
border-radius: 6px;
font-size: 0.9rem;
cursor: pointer;
color: rgba(22, 19, 15, 0.7);
}
.doc-picker-upgrade-card__dismiss:hover { border-color: rgba(22, 19, 15, 0.4); }
/* ── Audio upload zone inside transcribe picker section ──────────────────── */
.audio-corpus-upload {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.9rem;
border: 1.5px dashed var(--dbn-line, #d0cfc8);
border-radius: 6px;
background: transparent;
color: rgba(22, 19, 15, 0.55);
font-size: 0.84rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.audio-corpus-upload:hover { border-color: var(--dbn-accent, #00205B); color: var(--dbn-accent, #00205B); }
+285
View File
@@ -0,0 +1,285 @@
/**
* doc-picker.js — Document / Audio corpus picker for tool pages.
*
* Wires the "Select from My Docs" and "Select from My Audio" buttons.
* Free-tier (SSO) users see an upgrade modal instead of the picker.
* Paid (CaveauAI) users get a searchable multi-select modal backed by
* /api/dashboard/documents.php?action=list.
*/
(function () {
'use strict';
// ── Tier detection ────────────────────────────────────────────────────────
// DBN_FREE_TIER_BALANCE is set only for SSO (free) users.
// Paid CaveauAI sessions have it undefined.
function isPaidUser() {
return window.DBN_TOOLS_AUTHENTICATED === true
&& typeof window.DBN_FREE_TIER_BALANCE === 'undefined';
}
// ── Upgrade modal ─────────────────────────────────────────────────────────
var upgradeBackdrop = document.getElementById('docPickerUpgradeBackdrop');
function showUpgradeModal() {
if (upgradeBackdrop) upgradeBackdrop.hidden = false;
}
if (upgradeBackdrop) {
var upgradeClose = upgradeBackdrop.querySelector('.doc-picker-upgrade-card__dismiss');
if (upgradeClose) {
upgradeClose.addEventListener('click', function () {
upgradeBackdrop.hidden = true;
});
}
upgradeBackdrop.addEventListener('click', function (e) {
if (e.target === upgradeBackdrop) upgradeBackdrop.hidden = true;
});
}
// ── Shared picker state ───────────────────────────────────────────────────
var backdrop = document.getElementById('docPickerBackdrop');
var searchEl = backdrop ? backdrop.querySelector('.doc-picker-dialog__search') : null;
var listEl = backdrop ? backdrop.querySelector('.doc-picker-list') : null;
var countEl = backdrop ? backdrop.querySelector('.doc-picker-dialog__count') : null;
var confirmBtn = backdrop ? backdrop.querySelector('.doc-picker-dialog__confirm') : null;
var titleEl = backdrop ? backdrop.querySelector('.doc-picker-dialog__head h3') : null;
var _allDocs = []; // full list from API
var _selected = {}; // { id: { id, title } }
var _mode = 'text'; // 'text' or 'audio'
var _onConfirm = null; // callback(selected)
function openPicker(mode, onConfirm) {
_mode = mode || 'text';
_onConfirm = onConfirm;
_allDocs = [];
if (titleEl) {
titleEl.textContent = mode === 'audio' ? 'Select from My Audio' : 'Select from My Docs';
}
if (searchEl) searchEl.value = '';
if (listEl) listEl.innerHTML = '<p class="doc-picker-list__loading">Loading…</p>';
if (backdrop) backdrop.hidden = false;
var url = '/api/dashboard/documents.php?action=list&status=ready&limit=100';
if (mode === 'audio') url += '&source_type=audio';
fetch(url, { credentials: 'same-origin' })
.then(function (r) { return r.json(); })
.then(function (data) {
_allDocs = (data.documents || []);
renderList(_allDocs);
})
.catch(function () {
if (listEl) listEl.innerHTML = '<p class="doc-picker-list__empty">Could not load documents.</p>';
});
}
function renderList(docs) {
if (!listEl) return;
if (!docs.length) {
listEl.innerHTML = '<p class="doc-picker-list__empty">No documents found.</p>';
return;
}
var html = docs.map(function (doc) {
var id = doc.id;
var sel = !!_selected[id];
var meta = [];
if (doc.word_count) meta.push(doc.word_count.toLocaleString() + ' words');
if (doc.chunk_count) meta.push(doc.chunk_count + ' passages');
if (doc.created_at) {
try {
meta.push(new Date(doc.created_at.replace(' ', 'T') + 'Z')
.toLocaleDateString(undefined, { dateStyle: 'medium' }));
} catch (_) {}
}
return '<div class="doc-item' + (sel ? ' is-selected' : '') + '" data-id="' + id + '" role="option" aria-selected="' + sel + '">'
+ '<input type="checkbox" ' + (sel ? 'checked' : '') + ' tabindex="-1" aria-hidden="true">'
+ '<div>'
+ '<div class="doc-item__title">' + esc(doc.title || 'Untitled') + '</div>'
+ (meta.length ? '<div class="doc-item__meta">' + esc(meta.join(' · ')) + '</div>' : '')
+ '</div>'
+ '</div>';
}).join('');
listEl.innerHTML = html;
listEl.querySelectorAll('.doc-item').forEach(function (el) {
el.addEventListener('click', function () {
var id = parseInt(el.dataset.id, 10);
var doc = _allDocs.find(function (d) { return d.id === id; });
if (!doc) return;
if (_selected[id]) {
delete _selected[id];
} else {
if (_mode === 'audio') {
// single-select for audio
_selected = {};
}
_selected[id] = { id: id, title: doc.title || 'Untitled' };
}
var cb = el.querySelector('input[type="checkbox"]');
if (cb) cb.checked = !!_selected[id];
el.classList.toggle('is-selected', !!_selected[id]);
el.setAttribute('aria-selected', !!_selected[id]);
updateCount();
});
});
updateCount();
}
function updateCount() {
var n = Object.keys(_selected).length;
if (countEl) countEl.textContent = n ? n + ' selected' : '';
if (confirmBtn) confirmBtn.disabled = !n;
}
function filterList(q) {
if (!q) return renderList(_allDocs);
var lower = q.toLowerCase();
renderList(_allDocs.filter(function (d) {
return (d.title || '').toLowerCase().includes(lower);
}));
}
if (searchEl) {
searchEl.addEventListener('input', function () { filterList(searchEl.value.trim()); });
}
if (confirmBtn) {
confirmBtn.addEventListener('click', function () {
var sel = Object.values(_selected);
if (backdrop) backdrop.hidden = true;
if (_onConfirm) _onConfirm(sel);
});
}
if (backdrop) {
var closeBtn = backdrop.querySelector('.doc-picker-dialog__close');
if (closeBtn) closeBtn.addEventListener('click', function () { backdrop.hidden = true; });
backdrop.addEventListener('click', function (e) {
if (e.target === backdrop) backdrop.hidden = true;
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !backdrop.hidden) backdrop.hidden = true;
});
}
function esc(s) {
return String(s).replace(/[&<>"]/g, function (c) {
return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
});
}
// ── Chip rendering ────────────────────────────────────────────────────────
function renderChips(chipsEl, items, onRemove) {
if (!chipsEl) return;
chipsEl.innerHTML = items.map(function (item) {
return '<span class="doc-chip" data-id="' + item.id + '">'
+ '<span class="doc-chip__label">' + esc(item.title) + '</span>'
+ '<button type="button" class="doc-chip__remove" aria-label="Remove ' + esc(item.title) + '">&times;</button>'
+ '</span>';
}).join('');
chipsEl.querySelectorAll('.doc-chip__remove').forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.stopPropagation();
var id = parseInt(btn.closest('.doc-chip').dataset.id, 10);
if (onRemove) onRemove(id);
});
});
}
// ── Text doc picker wiring ────────────────────────────────────────────────
var docPickerBtn = document.getElementById('docPickerBtn');
var docPickerIds = document.getElementById('docPickerIds');
var docPickerChips = document.getElementById('docPickerChips');
var _textSelected = {};
function syncTextPicker() {
if (docPickerIds) {
docPickerIds.value = Object.keys(_textSelected).join(',');
}
renderChips(docPickerChips, Object.values(_textSelected), function (id) {
delete _textSelected[id];
delete _selected[id];
syncTextPicker();
});
}
if (docPickerBtn) {
docPickerBtn.addEventListener('click', function () {
if (!window.DBN_TOOLS_AUTHENTICATED) return; // shouldn't happen
if (!isPaidUser()) { showUpgradeModal(); return; }
_selected = Object.assign({}, _textSelected);
openPicker('text', function (sel) {
_textSelected = {};
sel.forEach(function (s) { _textSelected[s.id] = s; });
syncTextPicker();
});
});
}
// ── Audio picker wiring ───────────────────────────────────────────────────
var audioPickerBtn = document.getElementById('audioPickerBtn');
var audioPickerDocId = document.getElementById('audioPickerDocId');
var audioPickerChips = document.getElementById('audioPickerChips');
var _audioSelected = null; // single item or null
function syncAudioPicker() {
if (audioPickerDocId) {
audioPickerDocId.value = _audioSelected ? String(_audioSelected.id) : '';
}
renderChips(audioPickerChips, _audioSelected ? [_audioSelected] : [], function () {
_audioSelected = null;
syncAudioPicker();
});
}
if (audioPickerBtn) {
audioPickerBtn.addEventListener('click', function () {
if (!window.DBN_TOOLS_AUTHENTICATED) return;
if (!isPaidUser()) { showUpgradeModal(); return; }
_selected = _audioSelected ? { [_audioSelected.id]: _audioSelected } : {};
openPicker('audio', function (sel) {
_audioSelected = sel.length ? sel[0] : null;
syncAudioPicker();
});
});
}
// ── Audio corpus save button (inside transcribe page) ─────────────────────
// Allows saving an audio file from the upload queue to the corpus.
var audioCorpusSaveBtn = document.getElementById('audioCorpusSaveBtn');
if (audioCorpusSaveBtn && isPaidUser()) {
audioCorpusSaveBtn.hidden = false;
audioCorpusSaveBtn.addEventListener('click', function () {
var audioInput = document.getElementById('audioInput');
if (!audioInput || !audioInput.files.length) {
alert('Add an audio file first.');
return;
}
var file = audioInput.files[0];
var fd = new FormData();
fd.append('audio', file, file.name);
audioCorpusSaveBtn.disabled = true;
audioCorpusSaveBtn.textContent = 'Saving…';
fetch('/api/dashboard/audio-upload.php', { method: 'POST', credentials: 'same-origin', body: fd })
.then(function (r) { return r.json(); })
.then(function (data) {
if (!data.ok) throw new Error(data.error || 'Upload failed');
audioCorpusSaveBtn.textContent = 'Saved ✓';
setTimeout(function () {
audioCorpusSaveBtn.textContent = 'Save to My Audio';
audioCorpusSaveBtn.disabled = false;
}, 2500);
})
.catch(function (err) {
alert('Could not save audio: ' + err.message);
audioCorpusSaveBtn.textContent = 'Save to My Audio';
audioCorpusSaveBtn.disabled = false;
});
});
}
}());
+46 -3
View File
@@ -1070,13 +1070,17 @@ async function runTool(event) {
const tool = tools[state.activeTool];
const text = els.input.value.trim();
if (!text) {
els.status.textContent = 'Add text before running the tool.';
els.input.focus();
const docIds = (document.getElementById('docPickerIds')?.value || '')
.split(',').map(Number).filter(Boolean);
if (!text && !docIds.length) {
els.status.textContent = 'Add text or select a document before running the tool.';
if (!docIds.length) els.input.focus();
return;
}
const payload = { [tool.payloadKey]: text };
if (docIds.length) payload.doc_ids = docIds;
if (tool.usesLanguage) {
payload.language = currentLanguage();
}
@@ -1812,6 +1816,45 @@ function showTranscribeProgress(clip, total) {
}
async function runTranscribe() {
const storedAudioDocId = parseInt(document.getElementById('audioPickerDocId')?.value || '0', 10);
// Stored audio path — no file in the queue required
if (storedAudioDocId > 0 && !audioQueue.length) {
setBusy(true);
els.status.textContent = 'Transcribing from corpus…';
try {
const fd = new FormData();
fd.append('audio_doc_id', String(storedAudioDocId));
fd.append('language', currentTranscribeLang ? currentTranscribeLang() : 'auto');
fd.append('task', currentTask ? currentTask() : 'transcribe');
const vadFilter = document.getElementById('vadFilterCheck')?.checked ?? false;
if (vadFilter) fd.append('vad_filter', '1');
const initPrompt = (document.getElementById('initPromptInput')?.value || '').trim();
if (initPrompt) fd.append('initial_prompt', initPrompt);
const whisperModel = document.getElementById('whisperModelSelect')?.value;
if (whisperModel) fd.append('model', whisperModel);
const postModel = document.querySelector('input[name="post_model"]:checked')?.value;
if (postModel) fd.append('post_model', postModel);
const diarize = document.getElementById('diarizeCheck')?.checked ?? false;
if (diarize) {
fd.append('diarize', '1');
const ns = parseInt(document.getElementById('numSpeakersInput')?.value || '', 10);
if (ns >= 2) fd.append('num_speakers', String(ns));
}
const resp = await fetch('api/transcribe.php', { method: 'POST', credentials: 'same-origin', body: fd });
const data = await resp.json().catch(() => ({}));
if (!resp.ok || !data.ok) throw new Error(data.error?.message || 'Transcription failed.');
if (typeof renderTranscribeResult === 'function') renderTranscribeResult(data);
else renderResults(data);
els.status.textContent = 'Done.';
} catch (err) {
els.status.textContent = err.message;
} finally {
setBusy(false);
}
return;
}
if (!audioQueue.length) {
els.status.textContent = currentUiT('noFileSelected');
return;