390 lines
12 KiB
JavaScript
390 lines
12 KiB
JavaScript
|
function generateToolCard(tool, options = {}) {
|
|||
|
|
const mount = options.mountSelector
|
|||
|
|
? (document.querySelector(options.mountSelector))
|
|||
|
|
: document.body;
|
|||
|
|
|
|||
|
|
if (!mount) throw new Error('mount element not found');
|
|||
|
|
|
|||
|
|
// overlay
|
|||
|
|
const overlay = document.createElement('div');
|
|||
|
|
overlay.className = 'tc-overlay';
|
|||
|
|
overlay.setAttribute('data-testid', 'tool-card-overlay');
|
|||
|
|
|
|||
|
|
// dialog shell
|
|||
|
|
const dialog = document.createElement('div');
|
|||
|
|
dialog.className = 'tc-dialog';
|
|||
|
|
dialog.setAttribute('role', 'dialog');
|
|||
|
|
dialog.setAttribute('aria-modal', 'true'); // per apg modal dialog pattern
|
|||
|
|
// apg & mdn recommend explicit labelling/description for dialogs
|
|||
|
|
const titleId = `tc-title-${Math.random().toString(36).slice(2)}`,
|
|||
|
|
descId = `tc-desc-${Math.random().toString(36).slice(2)}`;
|
|||
|
|
dialog.setAttribute('aria-labelledby', titleId);
|
|||
|
|
dialog.setAttribute('aria-describedby', descId);
|
|||
|
|
|
|||
|
|
// header
|
|||
|
|
const header = document.createElement('header');
|
|||
|
|
header.className = 'tc-header';
|
|||
|
|
|
|||
|
|
const titleWrap = document.createElement('div');
|
|||
|
|
titleWrap.className = 'tc-titlewrap';
|
|||
|
|
|
|||
|
|
// // avatar (from user.profile_image_url if present)
|
|||
|
|
// const avatar = document.createElement('img');
|
|||
|
|
// avatar.className = 'tc-avatar';
|
|||
|
|
// const profileUrl = tool?.user?.profile_image_url;
|
|||
|
|
// if (typeof profileUrl === 'string' && profileUrl.length > 0) {
|
|||
|
|
// avatar.src = profileUrl;
|
|||
|
|
// avatar.alt = '';
|
|||
|
|
// } else {
|
|||
|
|
// avatar.src = 'data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
|
|||
|
|
// avatar.alt = '';
|
|||
|
|
// avatar.classList.add('tc-avatar--placeholder');
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// title + owner
|
|||
|
|
const h1 = document.createElement('h1');
|
|||
|
|
h1.id = titleId;
|
|||
|
|
h1.className = 'tc-title';
|
|||
|
|
h1.textContent = tool?.name ?? tool?.id ?? 'tool';
|
|||
|
|
|
|||
|
|
// const owner = document.createElement('div');
|
|||
|
|
// owner.className = 'tc-subtitle';
|
|||
|
|
// owner.textContent = tool?.user?.name ? `by ${tool.user.name}` : '';
|
|||
|
|
|
|||
|
|
// titleWrap.appendChild(avatar);
|
|||
|
|
titleWrap.appendChild(h1);
|
|||
|
|
// if (owner.textContent) titleWrap.appendChild(owner);
|
|||
|
|
|
|||
|
|
// close button
|
|||
|
|
const closeBtn = document.createElement('button');
|
|||
|
|
closeBtn.className = 'tc-close';
|
|||
|
|
closeBtn.type = 'button';
|
|||
|
|
closeBtn.setAttribute('aria-label', 'close');
|
|||
|
|
closeBtn.textContent = '×';
|
|||
|
|
|
|||
|
|
header.appendChild(titleWrap);
|
|||
|
|
header.appendChild(closeBtn);
|
|||
|
|
|
|||
|
|
// body
|
|||
|
|
const body = document.createElement('div');
|
|||
|
|
body.className = 'tc-body';
|
|||
|
|
|
|||
|
|
// description (primary)
|
|||
|
|
const desc = document.createElement('p');
|
|||
|
|
desc.id = descId;
|
|||
|
|
desc.className = 'tc-desc';
|
|||
|
|
desc.textContent =
|
|||
|
|
tool?.meta?.description
|
|||
|
|
?? tool?.meta?.manifest?.description
|
|||
|
|
?? 'no description provided.';
|
|||
|
|
|
|||
|
|
// badges (primary)
|
|||
|
|
const badges = document.createElement('div');
|
|||
|
|
badges.className = 'tc-badges';
|
|||
|
|
|
|||
|
|
const addBadge = (label, value) => {
|
|||
|
|
if (value === undefined || value === null || value === '') return;
|
|||
|
|
const b = document.createElement('span');
|
|||
|
|
b.className = 'tc-badge';
|
|||
|
|
b.textContent = `${label}: ${value}`;
|
|||
|
|
badges.appendChild(b);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
addBadge('id', tool?.id);
|
|||
|
|
addBadge('user', tool?.user?.name ?? tool?.user_id);
|
|||
|
|
addBadge('version', tool?.meta?.manifest?.version);
|
|||
|
|
addBadge('license', tool?.meta?.manifest?.license ?? tool?.meta?.manifest?.licence);
|
|||
|
|
addBadge('updated', formatEpoch(tool?.updated_at));
|
|||
|
|
addBadge('created', formatEpoch(tool?.created_at));
|
|||
|
|
|
|||
|
|
// manifest summary (primary)
|
|||
|
|
const manifestWrap = document.createElement('div');
|
|||
|
|
manifestWrap.className = 'tc-section';
|
|||
|
|
|
|||
|
|
const manifestTitle = document.createElement('h2');
|
|||
|
|
manifestTitle.className = 'tc-section-title';
|
|||
|
|
manifestTitle.textContent = 'manifest';
|
|||
|
|
|
|||
|
|
const manifestList = document.createElement('ul');
|
|||
|
|
manifestList.className = 'tc-manifest';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {string} k
|
|||
|
|
* @param {string} v
|
|||
|
|
*/
|
|||
|
|
const kv = (k, v) => {
|
|||
|
|
if (v === undefined || v === null || v === '') return;
|
|||
|
|
const li = document.createElement('li');
|
|||
|
|
li.className = 'tc-manifest-item';
|
|||
|
|
|
|||
|
|
const label = document.createElement('span');
|
|||
|
|
label.className = 'tc-manifest-label';
|
|||
|
|
label.textContent = k;
|
|||
|
|
|
|||
|
|
li.appendChild(label);
|
|||
|
|
|
|||
|
|
const valueEl = document.createElement('span');
|
|||
|
|
valueEl.className = 'tc-manifest-value';
|
|||
|
|
valueEl.textContent = typeof v === 'string' ? v : JSON.stringify(v);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// add https to all of them
|
|||
|
|
const u = 'https://' + v.replace(/https?:\/\//, '');
|
|||
|
|
new URL(u);
|
|||
|
|
if (!(/https:\/\/.*\..*/.test(u))) throw "";
|
|||
|
|
|
|||
|
|
const uEl = document.createElement('a');
|
|||
|
|
|
|||
|
|
uEl.href = u;
|
|||
|
|
uEl.target = '_blank';
|
|||
|
|
|
|||
|
|
uEl.appendChild(valueEl);
|
|||
|
|
li.appendChild(uEl);
|
|||
|
|
} catch {
|
|||
|
|
li.appendChild(valueEl);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
manifestList.appendChild(li);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const mani = tool?.meta?.manifest ?? {};
|
|||
|
|
kv('title', mani.title);
|
|||
|
|
kv('author', mani.author);
|
|||
|
|
kv('author url', mani.author_url ?? mani.author_urls);
|
|||
|
|
kv('email', mani.email);
|
|||
|
|
kv('github', mani.github);
|
|||
|
|
kv('requirements', mani.requirements);
|
|||
|
|
kv('required webui', mani.required_open_webui_version);
|
|||
|
|
kv('funding url', mani.funding_url);
|
|||
|
|
kv('date', mani.date);
|
|||
|
|
|
|||
|
|
manifestWrap.appendChild(manifestTitle);
|
|||
|
|
manifestWrap.appendChild(manifestList);
|
|||
|
|
|
|||
|
|
// advanced details (disclosure)
|
|||
|
|
const adv = document.createElement('details');
|
|||
|
|
adv.className = 'tc-disclosure';
|
|||
|
|
adv.setAttribute('data-testid', 'tool-card-advanced');
|
|||
|
|
|
|||
|
|
const advSum = document.createElement('summary');
|
|||
|
|
advSum.className = 'tc-disclosure-summary';
|
|||
|
|
advSum.textContent = 'advanced details';
|
|||
|
|
adv.appendChild(advSum);
|
|||
|
|
|
|||
|
|
const advBody = document.createElement('div');
|
|||
|
|
advBody.className = 'tc-disclosure-body';
|
|||
|
|
|
|||
|
|
// details table
|
|||
|
|
const table = document.createElement('table');
|
|||
|
|
table.className = 'tc-table';
|
|||
|
|
const tbody = document.createElement('tbody');
|
|||
|
|
|
|||
|
|
const rows = [
|
|||
|
|
['tool id', tool?.id],
|
|||
|
|
['user id', tool?.user_id],
|
|||
|
|
['user role', tool?.user?.role],
|
|||
|
|
['email', tool?.user?.email],
|
|||
|
|
['access control', safeText(Object.keys(tool?.access_control ?? {}).length ? JSON.stringify(tool.access_control) : '—')],
|
|||
|
|
['updated at', formatEpoch(tool?.updated_at)],
|
|||
|
|
['created at', formatEpoch(tool?.created_at)]
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
rows.forEach(([k, v]) => {
|
|||
|
|
if (v === undefined || v === null) return;
|
|||
|
|
const tr = document.createElement('tr');
|
|||
|
|
const th = document.createElement('th'); th.textContent = k;
|
|||
|
|
const td = document.createElement('td'); td.textContent = String(v);
|
|||
|
|
tr.appendChild(th); tr.appendChild(td); tbody.appendChild(tr);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
table.appendChild(tbody);
|
|||
|
|
|
|||
|
|
// raw json (nested disclosure)
|
|||
|
|
const rawWrap = document.createElement('details');
|
|||
|
|
rawWrap.className = 'tc-disclosure tc-disclosure--nested';
|
|||
|
|
|
|||
|
|
const rawSum = document.createElement('summary');
|
|||
|
|
rawSum.className = 'tc-disclosure-summary';
|
|||
|
|
rawSum.textContent = 'raw tool json';
|
|||
|
|
|
|||
|
|
const pre = document.createElement('pre');
|
|||
|
|
pre.className = 'tc-pre';
|
|||
|
|
pre.textContent = prettyJson(tool);
|
|||
|
|
|
|||
|
|
rawWrap.appendChild(rawSum);
|
|||
|
|
rawWrap.appendChild(pre);
|
|||
|
|
|
|||
|
|
// assemble
|
|||
|
|
advBody.appendChild(table);
|
|||
|
|
advBody.appendChild(rawWrap);
|
|||
|
|
adv.appendChild(advBody);
|
|||
|
|
|
|||
|
|
body.appendChild(desc);
|
|||
|
|
body.appendChild(badges);
|
|||
|
|
body.appendChild(manifestWrap);
|
|||
|
|
body.appendChild(adv);
|
|||
|
|
|
|||
|
|
dialog.appendChild(header);
|
|||
|
|
dialog.appendChild(body);
|
|||
|
|
overlay.appendChild(dialog);
|
|||
|
|
mount.appendChild(overlay);
|
|||
|
|
|
|||
|
|
// focus management per apg recommendations: trap focus inside the dialog, close on esc
|
|||
|
|
const opener = options.trigger instanceof HTMLElement ? options.trigger : /** @type {HTMLElement|null} */(document.activeElement);
|
|||
|
|
|
|||
|
|
const focusableSelectors = [
|
|||
|
|
'a[href]',
|
|||
|
|
'button:not([disabled])',
|
|||
|
|
'input:not([disabled])',
|
|||
|
|
'select:not([disabled])',
|
|||
|
|
'textarea:not([disabled])',
|
|||
|
|
'[tabindex]:not([tabindex="-1"])'
|
|||
|
|
].join(',');
|
|||
|
|
|
|||
|
|
const findFocusable = () => /** @type {HTMLElement[]} */(Array.from(dialog.querySelectorAll(focusableSelectors))),
|
|||
|
|
focusFirst = () => {
|
|||
|
|
const items = findFocusable();
|
|||
|
|
const target = items[0] || closeBtn;
|
|||
|
|
target.focus();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onKeydown = (e) => {
|
|||
|
|
if (e.key === 'Tab') {
|
|||
|
|
const items = findFocusable();
|
|||
|
|
if (items.length === 0) { e.preventDefault(); closeBtn.focus(); return; }
|
|||
|
|
const first = items[0],
|
|||
|
|
last = items[items.length - 1],
|
|||
|
|
active = /** @type {HTMLElement} */(document.activeElement);
|
|||
|
|
if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
|
|||
|
|
else if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
|
|||
|
|
}
|
|||
|
|
if (e.key === 'Escape') { e.preventDefault(); close(); }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onOverlayClick = (e) => { if (e.target === overlay) close(); };
|
|||
|
|
|
|||
|
|
overlay.addEventListener('click', onOverlayClick);
|
|||
|
|
document.addEventListener('keydown', onKeydown);
|
|||
|
|
closeBtn.addEventListener('click', () => close());
|
|||
|
|
|
|||
|
|
// prevent background scroll while open
|
|||
|
|
const prevOverflow = document.documentElement.style.overflow;
|
|||
|
|
document.documentElement.style.overflow = 'hidden';
|
|||
|
|
|
|||
|
|
// open
|
|||
|
|
setTimeout(focusFirst, 0);
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
overlay.removeEventListener('click', onOverlayClick);
|
|||
|
|
document.removeEventListener('keydown', onKeydown);
|
|||
|
|
document.documentElement.style.overflow = prevOverflow;
|
|||
|
|
overlay.remove();
|
|||
|
|
if (opener && typeof opener.focus === 'function') opener.focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { close, root: overlay };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// helpers
|
|||
|
|
function renderToolList(tools) {
|
|||
|
|
const container = document.querySelector('#tools-select'),
|
|||
|
|
hiddenInput = document.querySelector('#tools-select-input');
|
|||
|
|
if (!container) return console.warn('failed to find tools selection container');
|
|||
|
|
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
container.setAttribute('data-has-tools', String(Boolean(tools?.length)));
|
|||
|
|
|
|||
|
|
const initialSelectionRaw = hiddenInput?.value ? hiddenInput.value.split(',') : [],
|
|||
|
|
initialSelection = new Set(initialSelectionRaw.map(v => v.trim()).filter(Boolean));
|
|||
|
|
|
|||
|
|
if (!Array.isArray(tools) || tools.length === 0) {
|
|||
|
|
const empty = document.createElement('p');
|
|||
|
|
empty.className = 'tool-pill-empty muted';
|
|||
|
|
empty.textContent = 'no tools available';
|
|||
|
|
container.appendChild(empty);
|
|||
|
|
if (hiddenInput) {
|
|||
|
|
hiddenInput.value = '';
|
|||
|
|
hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selection = new Set(initialSelection),
|
|||
|
|
validIds = new Set();
|
|||
|
|
|
|||
|
|
const syncHidden = () => {
|
|||
|
|
if (!hiddenInput) return;
|
|||
|
|
const ordered = Array.from(selection).filter(id => validIds.has(id));
|
|||
|
|
hiddenInput.value = ordered.join(',');
|
|||
|
|
hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
|
|||
|
|
hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleSelection = (pill, toggleBtn, id) => {
|
|||
|
|
const isSelected = selection.has(id);
|
|||
|
|
if (isSelected) selection.delete(id);
|
|||
|
|
else selection.add(id);
|
|||
|
|
|
|||
|
|
const nowSelected = selection.has(id);
|
|||
|
|
pill.classList.toggle('tool-pill--selected', nowSelected);
|
|||
|
|
pill.setAttribute('aria-selected', String(nowSelected));
|
|||
|
|
toggleBtn.setAttribute('aria-pressed', String(nowSelected));
|
|||
|
|
syncHidden();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
tools.forEach(tool => {
|
|||
|
|
const id = String(tool?.id ?? '');
|
|||
|
|
if (!id) return;
|
|||
|
|
validIds.add(id);
|
|||
|
|
const label = makeToolLabel(tool, tools);
|
|||
|
|
|
|||
|
|
const pill = document.createElement('div');
|
|||
|
|
pill.className = 'tool-pill';
|
|||
|
|
pill.dataset.toolId = id;
|
|||
|
|
pill.setAttribute('role', 'option');
|
|||
|
|
pill.setAttribute('tabindex', '-1');
|
|||
|
|
|
|||
|
|
const toggleBtn = document.createElement('button');
|
|||
|
|
toggleBtn.type = 'button';
|
|||
|
|
toggleBtn.className = 'tool-pill-toggle';
|
|||
|
|
toggleBtn.textContent = label;
|
|||
|
|
toggleBtn.setAttribute('aria-pressed', String(selection.has(id)));
|
|||
|
|
toggleBtn.addEventListener('click', () => toggleSelection(pill, toggleBtn, id));
|
|||
|
|
|
|||
|
|
const infoBtn = document.createElement('button');
|
|||
|
|
infoBtn.type = 'button';
|
|||
|
|
infoBtn.className = 'tool-pill-info';
|
|||
|
|
infoBtn.setAttribute('aria-label', `Show info for ${label}`);
|
|||
|
|
infoBtn.innerHTML = '<span aria-hidden="true">i</span>';
|
|||
|
|
infoBtn.addEventListener('click', (event) => {
|
|||
|
|
event.stopPropagation();
|
|||
|
|
generateToolCard(tool, { trigger: infoBtn });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const isSelected = selection.has(id);
|
|||
|
|
pill.classList.toggle('tool-pill--selected', isSelected);
|
|||
|
|
pill.setAttribute('aria-selected', String(isSelected));
|
|||
|
|
|
|||
|
|
pill.appendChild(toggleBtn);
|
|||
|
|
pill.appendChild(infoBtn);
|
|||
|
|
container.appendChild(pill);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// drop any selections for tools that no longer exist
|
|||
|
|
Array.from(selection).forEach(id => {
|
|||
|
|
if (!validIds.has(id)) selection.delete(id);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
syncHidden();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const makeToolLabel = (t, tools) => {
|
|||
|
|
const base = t?.name ?? t?.id ?? 'tool';
|
|||
|
|
const duplicates = tools.filter(x => (x?.name ?? x?.id) === (t?.name ?? t?.id));
|
|||
|
|
if (duplicates.length > 1) {
|
|||
|
|
const hint = t?.meta?.manifest?.version ?? t?.user?.name ?? t?.id?.slice?.(0, 8);
|
|||
|
|
return `${base} • ${hint}`;
|
|||
|
|
}
|
|||
|
|
return base;
|
|||
|
|
}
|