feat(assistant): #91 refonte Notion de la zone de discussion — question ancrée en haut, fil chronologique, étapes repliables, barre Copier/Ajouter
This commit is contained in:
+116
-44
@@ -215,7 +215,7 @@ class BooksLM {
|
||||
this._setHidden(false);
|
||||
this._updateHeader();
|
||||
this._updateStatus();
|
||||
this._renderMessages();
|
||||
this._renderMessages({ anchor: true });
|
||||
this._showSuggestions();
|
||||
this._renderAttachments();
|
||||
this._closeHistoryMenu();
|
||||
@@ -1492,7 +1492,7 @@ class BooksLM {
|
||||
|
||||
_pushAssistantNote(markdown) {
|
||||
this._messages.push({ role: 'assistant', content: markdown, sources: [], toolCalls: [], confirmation: null });
|
||||
this._renderMessages();
|
||||
this._renderMessages({ anchor: true });
|
||||
this._saveHistory();
|
||||
}
|
||||
|
||||
@@ -1777,42 +1777,62 @@ class BooksLM {
|
||||
}
|
||||
}
|
||||
|
||||
_renderMessages() {
|
||||
_renderMessages(opts = {}) {
|
||||
if (!this._panel) return;
|
||||
const container = this._panel.querySelector('.bookslm-messages');
|
||||
if (!container) return;
|
||||
const prevTop = container.scrollTop;
|
||||
container.innerHTML = '';
|
||||
|
||||
// The "latest turn" — the most recent user post and, when present, its
|
||||
// assistant answer — is pinned to the top of the window. Everything from
|
||||
// the last user message onward stays in view so the submitted post and
|
||||
// the answer being written are always visible.
|
||||
let lastUserIdx = -1;
|
||||
for (let i = this._messages.length - 1; i >= 0; i--) {
|
||||
if (this._messages[i].role === 'user') { lastUserIdx = i; break; }
|
||||
// Notion-style thread: chronological order, the user post anchored at the
|
||||
// top of the visible area (never scroll-to-bottom — the answer streams
|
||||
// below the question). Streaming re-renders preserve the scroll position
|
||||
// so the reader is never jumped around.
|
||||
for (const msg of this._messages) {
|
||||
container.appendChild(this._chatBubble(msg));
|
||||
}
|
||||
|
||||
for (let i = 0; i < this._messages.length; i++) {
|
||||
const msg = this._messages[i];
|
||||
const bubble = this._chatBubble(msg, i >= lastUserIdx && lastUserIdx >= 0);
|
||||
container.appendChild(bubble);
|
||||
}
|
||||
|
||||
container.scrollTop = container.scrollHeight;
|
||||
if (opts.anchor) this._anchorLatestUser();
|
||||
else container.scrollTop = prevTop;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a single chat bubble (shared by user and assistant messages).
|
||||
*
|
||||
* Each bubble is wrapped in a `bookslm-msg` block. Bubbles flagged as part
|
||||
* of the latest turn carry `.latest` and are pinned to the very top of the
|
||||
* messages window (`.bookslm-msg.latest { order: -1; }`), so a submitted
|
||||
* post and the answer being streamed stay visible regardless of auto-scroll
|
||||
* to the bottom and of prior conversation history.
|
||||
* Scroll the messages window so the most recent user post sits at the very
|
||||
* top of the viewport (its `scroll-margin-top` keeps a breathing gap),
|
||||
* reproducing Notion-AI's conversation anchoring.
|
||||
*/
|
||||
_chatBubble(msg, isLatest) {
|
||||
_anchorLatestUser() {
|
||||
if (!this._panel) return;
|
||||
const container = this._panel.querySelector('.bookslm-messages');
|
||||
if (!container) return;
|
||||
const users = container.querySelectorAll('.bookslm-msg.user');
|
||||
const all = container.querySelectorAll('.bookslm-msg');
|
||||
// Fallback (admin notes with no user post): anchor the newest message.
|
||||
const el = users[users.length - 1] || all[all.length - 1] || container.firstElementChild;
|
||||
if (!el) return;
|
||||
const apply = () => {
|
||||
try {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
} catch {
|
||||
const cRect = container.getBoundingClientRect();
|
||||
const eRect = el.getBoundingClientRect();
|
||||
container.scrollTop += eRect.top - cRect.top;
|
||||
}
|
||||
};
|
||||
if (typeof requestAnimationFrame === 'function') requestAnimationFrame(apply);
|
||||
else apply();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a single chat entry (user or assistant), Notion-style:
|
||||
* • user → right-aligned rounded grey bubble (max 80%),
|
||||
* • assistant → full-width text with no background bubble, a discreet
|
||||
* provider/model tag above, a collapsible “N steps” block for agent
|
||||
* tool calls, and a hover-revealed action bar (Copier) below.
|
||||
*/
|
||||
_chatBubble(msg) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'bookslm-msg ' + msg.role + (isLatest ? ' latest' : '');
|
||||
wrap.className = 'bookslm-msg ' + msg.role;
|
||||
|
||||
if (msg.role === 'assistant') {
|
||||
// Discreet provider/model tag above the answer. Uses the actual engine
|
||||
@@ -1826,13 +1846,15 @@ class BooksLM {
|
||||
metaLine.title = label;
|
||||
wrap.appendChild(metaLine);
|
||||
}
|
||||
// Notion-style: the tool calls collapse into a “N steps” line above the
|
||||
// answer instead of a visible list.
|
||||
if (msg.toolCalls && msg.toolCalls.length) {
|
||||
wrap.appendChild(this._renderToolActivity(msg.toolCalls));
|
||||
}
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'bookslm-bubble assistant';
|
||||
const { text, actions } = this._extractActions(msg.content || '');
|
||||
bubble.innerHTML = this._renderMarkdown(text);
|
||||
if (msg.toolCalls && msg.toolCalls.length) {
|
||||
bubble.insertBefore(this._renderToolActivity(msg.toolCalls), bubble.firstChild);
|
||||
}
|
||||
if (actions.length) {
|
||||
const actionsDiv = document.createElement('div');
|
||||
actionsDiv.className = 'bookslm-actions';
|
||||
@@ -1863,26 +1885,71 @@ class BooksLM {
|
||||
wrap.appendChild(bubble);
|
||||
}
|
||||
|
||||
// Copy button under the message block.
|
||||
this._appendCopyButton(wrap, msg);
|
||||
// Notion-style action bar revealed on hover of the message block.
|
||||
this._appendActionBar(wrap, msg);
|
||||
|
||||
return wrap;
|
||||
}
|
||||
|
||||
/** Copy the raw message text to the clipboard (user or assistant block). */
|
||||
_appendCopyButton(wrap, msg) {
|
||||
/** Hover action bar under a message: Copy (both roles) + Add (assistant). */
|
||||
_appendActionBar(wrap, msg) {
|
||||
const content = String(msg.content || '').trim();
|
||||
if (!content) return;
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'bookslm-msg-actions';
|
||||
|
||||
bar.appendChild(this._actionBtn(t('bookslm.copy'), 'copy', t('bookslm.copy'), () => {
|
||||
this._copyText(content);
|
||||
}));
|
||||
if (msg.role === 'assistant') {
|
||||
bar.appendChild(this._actionBtn(t('bookslm.insert'), 'insert', t('bookslm.insert_hint'), () => {
|
||||
this._insertIntoEditor(content);
|
||||
}));
|
||||
}
|
||||
wrap.appendChild(bar);
|
||||
}
|
||||
|
||||
_actionBtn(label, name, title, onClick) {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'bookslm-copy-btn';
|
||||
btn.textContent = t('bookslm.copy');
|
||||
btn.title = t('bookslm.copy');
|
||||
btn.setAttribute('aria-label', t('bookslm.copy'));
|
||||
btn.addEventListener('click', () => {
|
||||
this._copyText(content);
|
||||
});
|
||||
wrap.appendChild(btn);
|
||||
btn.className = `bookslm-msg-action bookslm-msg-action-${name}`;
|
||||
btn.title = title;
|
||||
btn.setAttribute('aria-label', title);
|
||||
const icon = document.createElement('span');
|
||||
icon.setAttribute('data-lucide', name === 'copy' ? 'copy' : 'corner-down-left');
|
||||
icon.style.cssText = 'width:12px;height:12px';
|
||||
btn.appendChild(icon);
|
||||
const text = document.createElement('span');
|
||||
text.textContent = label;
|
||||
btn.appendChild(text);
|
||||
btn.addEventListener('click', onClick);
|
||||
if (typeof safeCreateIcons === 'function') safeCreateIcons();
|
||||
return btn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Append an assistant answer to the Forge editor document (Notion “Ajouter”).
|
||||
* No-ops with a toast when no editor session is open.
|
||||
*/
|
||||
_insertIntoEditor(text) {
|
||||
const view = state.editorView;
|
||||
if (!view || !view.state || typeof view.dispatch !== 'function') {
|
||||
showToast(t('bookslm.insert_no_editor'), 'info');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const at = view.state.selection.main.to;
|
||||
const insert = (at > 0 ? '\n' : '') + text;
|
||||
view.dispatch({
|
||||
changes: { from: at, insert },
|
||||
selection: { anchor: at + insert.length },
|
||||
});
|
||||
if (typeof view.focus === 'function') view.focus();
|
||||
showToast(t('bookslm.inserted'), 'success');
|
||||
} catch (e) {
|
||||
console.warn('AI assistant: insert into editor failed', e);
|
||||
showToast(t('bookslm.insert_no_editor'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
_copyText(text) {
|
||||
@@ -1975,9 +2042,13 @@ class BooksLM {
|
||||
|
||||
// ── Tool activity & confirmations (agent mode) ──────────────────────
|
||||
|
||||
/** Agent tool calls collapse into a discreet “N steps” line (Notion-style). */
|
||||
_renderToolActivity(toolCalls) {
|
||||
const wrap = document.createElement('div');
|
||||
const wrap = document.createElement('details');
|
||||
wrap.className = 'bookslm-tool-trace';
|
||||
const summary = document.createElement('summary');
|
||||
summary.textContent = t('ai.steps_count', { count: toolCalls.length });
|
||||
wrap.appendChild(summary);
|
||||
for (const call of toolCalls) {
|
||||
const line = document.createElement('div');
|
||||
line.className = 'bookslm-tool-line' + (call.ok === false ? ' failed' : '');
|
||||
@@ -2128,6 +2199,7 @@ class BooksLM {
|
||||
// The confirmation is resolved: drop the card and show the continuation.
|
||||
msg.confirmation = null;
|
||||
this._messages.push(continuation);
|
||||
this._renderMessages({ anchor: true });
|
||||
await this._streamResponse(resp, continuation, payload);
|
||||
} finally {
|
||||
conf._applying = false;
|
||||
@@ -2178,7 +2250,7 @@ class BooksLM {
|
||||
.map((m) => ({ role: m.role, content: m.content }));
|
||||
|
||||
this._messages.push({ role: 'user', content: text });
|
||||
this._renderMessages();
|
||||
this._renderMessages({ anchor: true });
|
||||
|
||||
let provider = null;
|
||||
let model = null;
|
||||
@@ -2764,7 +2836,7 @@ class BooksLM {
|
||||
this._messages = Array.isArray(session.messages) ? session.messages : [];
|
||||
this._closeHistoryMenu();
|
||||
if (this._panel) {
|
||||
this._renderMessages();
|
||||
this._renderMessages({ anchor: true });
|
||||
this._showSuggestions();
|
||||
this._renderHistoryMenu();
|
||||
}
|
||||
|
||||
+1876
-1871
File diff suppressed because it is too large
Load Diff
+1876
-1871
File diff suppressed because it is too large
Load Diff
+30
-16
@@ -9434,22 +9434,30 @@ body.popup-mode .content-area {
|
||||
.bookslm-activity.done .bookslm-activity-spinner,
|
||||
.bookslm-activity.error .bookslm-activity-spinner { animation: none; border-top-color: currentColor; }
|
||||
@keyframes bookslm-spin { to { transform: rotate(360deg); } }
|
||||
.bookslm-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
|
||||
/* The newest turn (the assistant's answer being written) is pinned to the
|
||||
very top of the messages window via flex `order`, so a submitted post and
|
||||
its live result stay visible regardless of auto-scroll and prior history. */
|
||||
.bookslm-msg { display: flex; flex-direction: column; gap: 4px; }
|
||||
.bookslm-msg.latest { order: -1; }
|
||||
.bookslm-msg-meta { font-size: 10px; color: var(--text-secondary); opacity: 0.85;
|
||||
/* Notion-style AI thread: only this zone scrolls; entries stack vertically
|
||||
with generous spacing. The latest user post is anchored to the top of the
|
||||
visible area on send (scrollIntoView block:start + scroll-margin). */
|
||||
.bookslm-messages { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex;
|
||||
flex-direction: column; gap: 24px; }
|
||||
.bookslm-msg { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 14px; }
|
||||
.bookslm-msg.user { align-self: flex-end; max-width: 80%; }
|
||||
.bookslm-msg.assistant { align-self: stretch; width: 100%; }
|
||||
.bookslm-msg-meta { font-size: 11px; color: var(--text-secondary); opacity: 0.75;
|
||||
padding: 0 2px; align-self: flex-start; user-select: none; }
|
||||
.bookslm-copy-btn { align-self: flex-end; font-size: 10px; padding: 2px 8px;
|
||||
border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
|
||||
color: var(--text-secondary); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
|
||||
.bookslm-msg:hover .bookslm-copy-btn { opacity: 1; }
|
||||
.bookslm-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.bookslm-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
|
||||
.bookslm-bubble.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
|
||||
.bookslm-bubble.assistant { align-self: flex-start; background: var(--surface2); color: var(--text-primary); border-bottom-left-radius: 4px; }
|
||||
/* Hover-revealed action bar (Copier / Ajouter). */
|
||||
.bookslm-msg-actions { display: flex; gap: 6px; margin-top: 4px; opacity: 0;
|
||||
transition: opacity 0.15s; }
|
||||
.bookslm-msg.user .bookslm-msg-actions { justify-content: flex-end; }
|
||||
.bookslm-msg:hover .bookslm-msg-actions,
|
||||
.bookslm-msg-actions:focus-within { opacity: 1; }
|
||||
.bookslm-msg-action { display: inline-flex; align-items: center; gap: 5px;
|
||||
font-size: 11px; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent;
|
||||
background: transparent; color: var(--text-secondary); cursor: pointer; }
|
||||
.bookslm-msg-action:hover { background: var(--surface2); color: var(--text-primary);
|
||||
border-color: var(--border); }
|
||||
.bookslm-bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
|
||||
.bookslm-bubble.user { align-self: flex-end; background: var(--surface2); color: var(--text-primary); border-bottom-right-radius: 6px; }
|
||||
.bookslm-bubble.assistant { align-self: flex-start; background: transparent; padding: 0; width: 100%; max-width: 100%; color: var(--text-primary); }
|
||||
.bookslm-bubble.assistant code { background: rgba(0,0,0,0.2); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
|
||||
.bookslm-bubble.assistant pre { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; }
|
||||
.bookslm-sources { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
|
||||
@@ -9484,7 +9492,13 @@ body.popup-mode .content-area {
|
||||
/* Agent-mode toggle in the header. */
|
||||
.bookslm-header button.bookslm-btn-agent.active { color: var(--accent); background: var(--surface2); }
|
||||
/* Tool-call trace shown above an assistant answer (agent mode). */
|
||||
.bookslm-tool-trace { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
|
||||
/* Agent tool calls collapse into a discreet “N steps” line (Notion-style). */
|
||||
.bookslm-tool-trace { margin: 0 0 8px; }
|
||||
.bookslm-tool-trace summary { font-size: 11px; color: var(--text-secondary);
|
||||
cursor: pointer; user-select: none; list-style: none; }
|
||||
.bookslm-tool-trace summary::before { content: '> '; }
|
||||
.bookslm-tool-trace[open] summary { margin-bottom: 4px; }
|
||||
.bookslm-tool-trace .bookslm-tool-line { padding-left: 12px; }
|
||||
.bookslm-tool-line { font-size: 11px; color: var(--text-secondary); }
|
||||
.bookslm-tool-line.failed { color: #f87171; }
|
||||
/* Mutation confirmation card (two-step propose/apply). */
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
* cache or Cloudflare does NOT clear the Service Worker Cache Storage, which is
|
||||
* a separate store. Bumping SW_VERSION invalidates it on every release.
|
||||
*/
|
||||
const SW_VERSION = 'v8';
|
||||
const SW_VERSION = 'v9';
|
||||
const CODE_CACHE = `obsigate-code-${SW_VERSION}`;
|
||||
const RUNTIME_CACHE = `obsigate-runtime-${SW_VERSION}`;
|
||||
const API_CACHE = `obsigate-api-${SW_VERSION}`;
|
||||
|
||||
Reference in New Issue
Block a user