@docsector/docsector-reader 4.4.2 → 4.4.4

package/README.md

@@ -57,6 +57,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🔗 **Anchor Navigation** — Right-side source-ordered Table of Contents tree with stable scroll tracking, resize-safe drawer state, auto-scroll to the active section, and active-heading resolution based on the last heading that crossed the content threshold
 - 🖱️ **Active Menu Item UX** — Active menu entries keep pointer cursor, clear URL hash without redundant navigation, and prevent accidental label text selection
 - 🔎 **Search** — Menu search across all documentation content and tags
+- 💬 **Assistant Chat UX Enhancements** — Long conversations keep focus on recent messages, load earlier history progressively, deduplicate repeated sources, include per-message copy actions, and show a floating quick return to the bottom
 - 📱 **Responsive** — Mobile-friendly with collapsible sidebar and drawers
 - 📚 **Book Tabs with Per-State Colors** — Define `*.book.js` tabs with icons, order, and `color.active` / `color.inactive`
 - 🔀 **Internal Shortcut Pages** — Route entries can redirect with `config.link.to`, keeping localized titles while inheriting icon/status from the destination page
@@ -297,7 +298,7 @@ Check `checks.discovery.webMcp.status` equals `"pass"`.
 
 Docsector Reader can add an opt-in assistant panel for documentation Q&A. Users open it from the global header while reading pages and subpages; it is not a dedicated documentation route. The drawer posts to a same-origin Cloudflare Pages Function, and that function calls Cloudflare AI Search so secrets, rate-limit strategy, provider errors, and future auth stay server-side.
 
-The panel is disabled by default. When enabled, desktop pages get a dedicated right-side assistant rail that can sit beside the table of contents on wide screens. Mobile uses a fullscreen dialog.
+The panel is disabled by default. When enabled, desktop pages get a dedicated right-side assistant rail that can sit beside the table of contents on wide screens. Mobile uses a fullscreen dialog. Conversations restore at the latest message, reveal earlier history progressively in long chats, deduplicate repeated source links, and provide per-message copy actions.
 
 ### Configure
 

package/bin/docsector.js

@@ -24,7 +24,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '4.4.2'
+const VERSION = '4.4.4'
 const AUTHORING_SKILL_NAME = 'docsector-documentation-authoring'
 const AUTHORING_SKILL_DESCRIPTION = 'Author Docsector documentation with Markdown, custom blocks, MCP, and WebMCP.'
 const AUTHORING_SKILL_PUBLIC_PATH = `/.well-known/agent-skills/${AUTHORING_SKILL_NAME}/SKILL.md`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/ai-assistant/panel.js

@@ -12,6 +12,21 @@ export function listVisibleAssistantMessages(messages = []) {
   })
 }
 
+export const ASSISTANT_MESSAGE_WINDOW_SIZE = 60
+export const ASSISTANT_MESSAGE_WINDOW_STEP = 40
+
+export function getAssistantMessageWindow(messages = [], limit = ASSISTANT_MESSAGE_WINDOW_SIZE) {
+  const visibleMessages = listVisibleAssistantMessages(messages)
+  const safeLimit = Math.max(1, Number(limit) || ASSISTANT_MESSAGE_WINDOW_SIZE)
+  const hiddenCount = Math.max(0, visibleMessages.length - safeLimit)
+
+  return {
+    messages: hiddenCount > 0 ? visibleMessages.slice(hiddenCount) : visibleMessages,
+    hiddenCount,
+    total: visibleMessages.length
+  }
+}
+
 export function isAssistantThinkingState({ loading = false, messages = [] } = {}) {
   if (!loading) {
     return false

package/src/ai-assistant/server.js

@@ -16,10 +16,12 @@ const JSON_HEADERS = {
 const SSE_HEADERS = {
   'Content-Type': 'text/event-stream; charset=utf-8',
   'Cache-Control': 'no-cache, no-store',
+  'X-Accel-Buffering': 'no',
   Connection: 'keep-alive'
 }
 
 const CURRENT_PAGE_MARKDOWN_MAX_LENGTH = 7000
+const STREAM_PACE_DELAY_MS = 24
 
 function jsonResponse (body, status = 200) {
   return new Response(JSON.stringify(body), {
@@ -32,6 +34,119 @@ function errorResponse (code, message, status = 500) {
   return jsonResponse({ error: { code, message } }, status)
 }
 
+function delay (milliseconds) {
+  return new Promise(resolve => setTimeout(resolve, milliseconds))
+}
+
+function collectSseData (block = '') {
+  const data = []
+
+  for (const line of String(block || '').split(/\r?\n/)) {
+    if (line.startsWith('data:')) {
+      data.push(line.slice(5).trimStart())
+    }
+  }
+
+  return data.join('\n')
+}
+
+function sseBlockHasAssistantContent (block = '') {
+  const data = collectSseData(block)
+  if (!data || data === '[DONE]') {
+    return false
+  }
+
+  try {
+    const payload = JSON.parse(data)
+    const content = payload?.choices?.[0]?.delta?.content
+      || payload?.choices?.[0]?.message?.content
+      || payload?.response
+      || ''
+
+    return typeof content === 'string' && content.length > 0
+  } catch {
+    return data.length > 0
+  }
+}
+
+function resultBodyStream (result) {
+  if (result instanceof Response) {
+    return result.body
+  }
+
+  if (result instanceof ReadableStream) {
+    return result
+  }
+
+  if (result?.body instanceof ReadableStream) {
+    return result.body
+  }
+
+  return null
+}
+
+function encodeSseData (payload) {
+  return `data: ${JSON.stringify(payload)}\n\n`
+}
+
+function encodeSseDone () {
+  return 'data: [DONE]\n\n'
+}
+
+async function writePacedSseStream (source, controller) {
+  const reader = source.getReader()
+  const decoder = new TextDecoder()
+  const encoder = new TextEncoder()
+  let buffer = ''
+  let reading = true
+
+  while (reading) {
+    const { done, value } = await reader.read()
+    if (done) {
+      reading = false
+      break
+    }
+
+    buffer += decoder.decode(value, { stream: true })
+    const parts = buffer.split(/\r?\n\r?\n/)
+    buffer = parts.pop() || ''
+
+    for (const part of parts) {
+      if (!part.trim()) continue
+
+      controller.enqueue(encoder.encode(`${part}\n\n`))
+      if (sseBlockHasAssistantContent(part)) {
+        await delay(STREAM_PACE_DELAY_MS)
+      }
+    }
+  }
+
+  buffer += decoder.decode()
+  if (buffer.trim()) {
+    controller.enqueue(encoder.encode(`${buffer}\n\n`))
+  }
+}
+
+async function writeAssistantStreamResult (result, controller) {
+  const encoder = new TextEncoder()
+  const stream = resultBodyStream(result)
+
+  if (stream) {
+    await writePacedSseStream(stream, controller)
+    return
+  }
+
+  controller.enqueue(encoder.encode(encodeSseData(result)))
+  controller.enqueue(encoder.encode(encodeSseDone()))
+}
+
+function streamErrorPayload (error) {
+  const message = error?.message || 'Assistant request failed.'
+  return {
+    response: message
+  }
+}
+
 function normalizeMessages (messages) {
   const validRoles = new Set(['system', 'developer', 'user', 'assistant', 'tool'])
 
@@ -313,6 +428,27 @@ async function createAssistantResponse (payload, result) {
   return jsonResponse(result)
 }
 
+function createAssistantStreamResponse (env, body) {
+  const encoder = new TextEncoder()
+
+  const stream = new ReadableStream({
+    async start (controller) {
+      try {
+        controller.enqueue(encoder.encode(': connected\n\n'))
+        const { result } = await runAssistant(env, body)
+        await writeAssistantStreamResult(result, controller)
+      } catch (error) {
+        controller.enqueue(encoder.encode(encodeSseData(streamErrorPayload(error))))
+        controller.enqueue(encoder.encode(encodeSseDone()))
+      } finally {
+        controller.close()
+      }
+    }
+  })
+
+  return new Response(stream, { headers: SSE_HEADERS })
+}
+
 export async function onRequestOptions () {
   return new Response(null, {
     status: 204,
@@ -335,6 +471,13 @@ export async function onRequestPost (context) {
   }
 
   try {
+    if (ASSISTANT_CONFIG.aiSearch?.stream !== false) {
+      return createAssistantStreamResponse(context.env, {
+        ...body,
+        request: context.request
+      })
+    }
+
     const { payload, result } = await runAssistant(context.env, {
       ...body,
       request: context.request

package/src/ai-assistant/session.js

@@ -1,3 +1,5 @@
+import { dedupeAssistantSources } from './stream'
+
 export const ASSISTANT_SESSION_STORAGE_KEY = 'docsector.assistant.session.v1'
 
 const MAX_PERSISTED_MESSAGES = 40
@@ -31,7 +33,7 @@ export function normalizeAssistantSession (session = {}) {
     .filter(Boolean)
     .slice(-MAX_PERSISTED_MESSAGES)
 
-  const sources = (Array.isArray(session?.sources) ? session.sources : [])
+  const sources = dedupeAssistantSources((Array.isArray(session?.sources) ? session.sources : [])
     .map((source, index) => {
       const key = cleanString(source?.key || '')
       const text = cleanString(source?.text || '')
@@ -48,7 +50,7 @@ export function normalizeAssistantSession (session = {}) {
         score: Number.isFinite(score) ? score : 0
       }
     })
-    .filter(Boolean)
+    .filter(Boolean))
     .slice(0, MAX_PERSISTED_SOURCES)
 
   return { messages, sources }

package/src/ai-assistant/stream.js

@@ -71,6 +71,67 @@ function buildAssistantSourceDisplay (key = '') {
   }
 }
 
+function normalizeAssistantSourcePath (path = '') {
+  const normalized = String(path || '')
+    .replace(/\\/g, '/')
+    .replace(/\/+/g, '/')
+    .replace(/\/+$/g, '')
+    .replace(/\.md$/i, '')
+
+  return normalized || '/'
+}
+
+export function normalizeAssistantSourceLinkKey (key = '') {
+  const rawKey = String(key || '').trim()
+  if (!rawKey) return ''
+
+  try {
+    if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(rawKey)) {
+      const url = new URL(rawKey, 'https://docsector.local')
+      return [
+        url.protocol.toLowerCase(),
+        '//',
+        url.host.toLowerCase(),
+        normalizeAssistantSourcePath(decodeURIComponent(url.pathname || '/')),
+        url.search
+      ].join('')
+    }
+  } catch {
+    // Fall through to relative-path normalization for malformed URLs.
+  }
+
+  const hashless = rawKey.split('#')[0]
+  const queryIndex = hashless.indexOf('?')
+  const rawPath = queryIndex === -1 ? hashless : hashless.slice(0, queryIndex)
+  const search = queryIndex === -1 ? '' : hashless.slice(queryIndex)
+  const normalizedPath = normalizeAssistantSourcePath(rawPath).replace(/^\/+/, '') || '/'
+
+  return `${normalizedPath}${search}`
+}
+
+export function dedupeAssistantSources (sources = []) {
+  const byLink = new Map()
+
+  for (const source of Array.isArray(sources) ? sources : []) {
+    const dedupeKey = normalizeAssistantSourceLinkKey(source?.key) || `text:${String(source?.text || '').trim()}`
+    if (!dedupeKey || dedupeKey === 'text:') continue
+
+    const previous = byLink.get(dedupeKey)
+    if (!previous) {
+      byLink.set(dedupeKey, source)
+      continue
+    }
+
+    byLink.set(dedupeKey, {
+      ...previous,
+      text: previous.text || source.text || '',
+      score: Math.max(Number(previous.score || 0), Number(source.score || 0))
+    })
+  }
+
+  return Array.from(byLink.values())
+}
+
 export function extractAssistantStreamDelta (event) {
   if (!event || event.data === '[DONE]') {
     return { done: true, content: '', chunks: [] }
@@ -104,7 +165,7 @@ export function extractAssistantStreamDelta (event) {
 }
 
 export function normalizeAssistantSourceChunks (chunks = []) {
-  return (Array.isArray(chunks) ? chunks : [])
+  const sources = (Array.isArray(chunks) ? chunks : [])
     .map((chunk, index) => {
       const key = chunk?.item?.key || chunk?.key || chunk?.url || ''
       const score = Number(chunk?.score ?? chunk?.scoring_details?.vector_score ?? 0)
@@ -122,4 +183,6 @@ export function normalizeAssistantSourceChunks (chunks = []) {
       }
     })
     .filter(chunk => chunk.key || chunk.text)
+
+  return dedupeAssistantSources(sources)
 }

package/src/components/DAssistantPanel.vue

@@ -1,11 +1,16 @@
 <script setup>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import { useQuasar } from 'quasar'
+import { copyToClipboard, useQuasar } from 'quasar'
 
 import useAssistant from '../composables/useAssistant'
-import { isAssistantThinkingState, listVisibleAssistantMessages } from '../ai-assistant/panel'
+import {
+  ASSISTANT_MESSAGE_WINDOW_SIZE,
+  ASSISTANT_MESSAGE_WINDOW_STEP,
+  getAssistantMessageWindow,
+  isAssistantThinkingState
+} from '../ai-assistant/panel'
 import DPageTokens from './DPageTokens.vue'
 import { tokenizePageSectionSource } from './page-section-tokens'
 
@@ -49,6 +54,12 @@ const $q = useQuasar()
 const { t, locale } = useI18n()
 const input = ref('')
 const scrollArea = ref(null)
+const visibleMessageLimit = ref(ASSISTANT_MESSAGE_WINDOW_SIZE)
+const copiedMessageId = ref('')
+const showScrollToBottom = ref(false)
+let scrollFrame = 0
+let copiedMessageTimer = null
+let revealingOlderMessages = false
 
 const assistant = useAssistant({
   route,
@@ -85,13 +96,45 @@ const sources = computed(() => assistant.sources.value)
 const hasSources = computed(() => sources.value.length > 0 && assistant.config.ui.showCitations)
 const sourceAvatars = computed(() => sources.value.slice(0, 4))
 const sourcesLabel = computed(() => t('assistant.sourcesCount', { count: sources.value.length }))
-const visibleMessages = computed(() => listVisibleAssistantMessages(assistant.messages.value))
+const messageWindow = computed(() => getAssistantMessageWindow(assistant.messages.value, visibleMessageLimit.value))
+const visibleMessages = computed(() => messageWindow.value.messages)
+const hasOlderMessages = computed(() => messageWindow.value.hiddenCount > 0)
+const streamingAssistantMessageId = computed(() => {
+  if (!assistant.loading.value) {
+    return ''
+  }
+
+  const lastMessage = assistant.messages.value[assistant.messages.value.length - 1]
+  return lastMessage?.role === 'assistant' ? String(lastMessage.id || '') : ''
+})
+const latestAssistantMessageId = computed(() => {
+  for (let index = assistant.messages.value.length - 1; index >= 0; index -= 1) {
+    const message = assistant.messages.value[index]
+    if (message?.role === 'assistant' && String(message?.content || '').trim()) {
+      return String(message.id || '')
+    }
+  }
+
+  return ''
+})
 
 const isThinking = computed(() => isAssistantThinkingState({
   loading: assistant.loading.value,
   messages: assistant.messages.value
 }))
 
+const isStreamingAssistantMessage = (message) => {
+  return String(message?.id || '') !== '' && String(message?.id || '') === streamingAssistantMessageId.value
+}
+
+const hasMessageContent = (message) => {
+  return String(message?.content || '').trim().length > 0
+}
+
+const messageHasSources = (message) => {
+  return hasSources.value && String(message?.id || '') === latestAssistantMessageId.value
+}
+
 const renderMessageTokens = (message) => {
   if (message?.role !== 'assistant') {
     return []
@@ -124,15 +167,120 @@ const startResize = (event) => {
   window.addEventListener('pointerup', onUp)
 }
 
-const scrollToBottom = () => {
-  nextTick(() => {
-    const target = scrollArea.value?.$el?.querySelector('.q-scrollarea__container')
-    if (target) {
-      target.scrollTop = target.scrollHeight
-    }
+const getScrollTarget = () => {
+  return scrollArea.value?.getScrollTarget?.()
+    || scrollArea.value?.$el?.querySelector('.q-scrollarea__container')
+}
+
+const applyBottomScroll = () => {
+  const target = getScrollTarget()
+  scrollArea.value?.setScrollPosition?.('vertical', Number.MAX_SAFE_INTEGER, 0)
+  if (target) {
+    target.scrollTop = target.scrollHeight
+  }
+}
+
+const scrollToBottom = ({ attempts = 6 } = {}) => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  if (scrollFrame !== 0) {
+    window.cancelAnimationFrame(scrollFrame)
+  }
+
+  const run = (remainingAttempts) => {
+    scrollFrame = window.requestAnimationFrame(() => {
+      scrollFrame = 0
+
+      nextTick(() => {
+        applyBottomScroll()
+        if (remainingAttempts > 0) {
+          run(remainingAttempts - 1)
+        }
+      })
+    })
+  }
+
+  run(attempts)
+}
+
+const loadOlderMessages = async () => {
+  if (!hasOlderMessages.value || revealingOlderMessages) return
+
+  revealingOlderMessages = true
+  const target = getScrollTarget()
+  const previousHeight = target?.scrollHeight || 0
+  visibleMessageLimit.value += ASSISTANT_MESSAGE_WINDOW_STEP
+
+  await nextTick()
+
+  const nextTarget = getScrollTarget()
+  if (nextTarget) {
+    nextTarget.scrollTop += Math.max(0, nextTarget.scrollHeight - previousHeight)
+  }
+
+  revealingOlderMessages = false
+}
+
+const syncScrollToBottomVisibility = () => {
+  const target = getScrollTarget()
+  if (!target || !assistant.hasMessages.value) {
+    showScrollToBottom.value = false
+    return
+  }
+
+  const maxTop = Math.max(0, target.scrollHeight - target.clientHeight)
+  const distanceToBottom = maxTop - target.scrollTop
+  showScrollToBottom.value = distanceToBottom > 120
+}
+
+const handleScroll = (info = {}) => {
+  syncScrollToBottomVisibility()
+
+  const position = Number(info.verticalPosition ?? info.position?.top ?? 0)
+  if (position <= 80) {
+    loadOlderMessages()
+  }
+}
+
+const notifyMessageCopied = () => {
+  $q.notify({
+    message: t('assistant.copied'),
+    color: 'positive',
+    textColor: 'white',
+    icon: 'check',
+    position: 'top',
+    timeout: 1200
   })
 }
 
+const copyMessage = (message) => {
+  const content = String(message?.content || '').trim()
+  const id = String(message?.id || '')
+  if (!content || !id) return
+
+  copyToClipboard(content)
+    .then(() => {
+      copiedMessageId.value = id
+      notifyMessageCopied()
+
+      if (copiedMessageTimer !== null) {
+        window.clearTimeout(copiedMessageTimer)
+      }
+
+      copiedMessageTimer = window.setTimeout(() => {
+        copiedMessageId.value = ''
+        copiedMessageTimer = null
+      }, 1600)
+    })
+    .catch(() => {})
+}
+
+const messageCopyIcon = (message) => {
+  return copiedMessageId.value === String(message?.id || '') ? 'check' : 'content_copy'
+}
+
 const submit = async (value = input.value) => {
   const prompt = String(value || '').trim()
   if (!prompt) return
@@ -140,14 +288,45 @@ const submit = async (value = input.value) => {
   await assistant.send(prompt)
 }
 
+const scrollToBottomAction = () => {
+  showScrollToBottom.value = false
+  scrollToBottom({ attempts: 10 })
+}
+
 const handleKeydown = (event) => {
   if (event.key !== 'Enter' || event.shiftKey) return
   event.preventDefault()
   submit()
 }
 
-watch(assistant.messages, scrollToBottom, { deep: true })
-watch(assistant.sources, scrollToBottom, { deep: true })
+watch(assistant.messages, () => scrollToBottom({ attempts: 6 }), { deep: true })
+watch(assistant.sources, () => scrollToBottom({ attempts: 4 }), { deep: true })
+watch(() => assistant.messages.value.length, (length, previousLength) => {
+  if (length < previousLength) {
+    visibleMessageLimit.value = ASSISTANT_MESSAGE_WINDOW_SIZE
+  }
+
+  if (length === 0) {
+    showScrollToBottom.value = false
+  }
+})
+
+onMounted(() => {
+  scrollToBottom({ attempts: 14 })
+  nextTick(syncScrollToBottomVisibility)
+})
+
+onBeforeUnmount(() => {
+  if (scrollFrame !== 0 && typeof window !== 'undefined') {
+    window.cancelAnimationFrame(scrollFrame)
+    scrollFrame = 0
+  }
+
+  if (copiedMessageTimer !== null && typeof window !== 'undefined') {
+    window.clearTimeout(copiedMessageTimer)
+    copiedMessageTimer = null
+  }
+})
 </script>
 
 <template>
@@ -191,7 +370,7 @@ watch(assistant.sources, scrollToBottom, { deep: true })
     </div>
   </header>
 
-  <q-scroll-area ref="scrollArea" class="d-assistant-panel__body">
+  <q-scroll-area ref="scrollArea" class="d-assistant-panel__body" @scroll="handleScroll">
     <div v-if="!assistant.hasMessages.value" class="d-assistant-panel__empty">
       <div class="d-assistant-panel__mark">
         <q-icon name="auto_awesome" size="52px" />
@@ -201,6 +380,18 @@ watch(assistant.sources, scrollToBottom, { deep: true })
     </div>
 
     <div v-else class="d-assistant-panel__messages">
+      <div v-if="hasOlderMessages" class="d-assistant-panel__older">
+        <q-btn
+          dense no-caps unelevated
+          icon="expand_less"
+          color="white"
+          text-color="primary"
+          class="d-assistant-panel__older-action"
+          :label="t('assistant.loadEarlier')"
+          @click="loadOlderMessages"
+        />
+      </div>
+
       <div
         v-for="(message, index) in visibleMessages"
         :key="message.id"
@@ -208,12 +399,109 @@ watch(assistant.sources, scrollToBottom, { deep: true })
         :class="`d-assistant-message--${message.role}`"
       >
         <div
-          v-if="message.role === 'assistant'"
+          v-if="message.role === 'assistant' && isStreamingAssistantMessage(message)"
+          class="d-assistant-message__content d-assistant-message__content--streaming"
+        >
+          {{ message.content }}
+        </div>
+        <div
+          v-else-if="message.role === 'assistant'"
           class="content no-padding d-assistant-message__content d-assistant-message__content--markdown"
         >
           <d-page-tokens :id="(index + 1) * 1000" :tokens="renderMessageTokens(message)" />
         </div>
         <div v-else class="d-assistant-message__content">{{ message.content }}</div>
+
+        <div
+          v-if="message.role === 'assistant' && hasMessageContent(message)"
+          class="d-assistant-message__footer"
+        >
+          <q-btn
+            flat dense
+            text-color="primary"
+            class="d-assistant-message__copy d-assistant-message__copy--assistant"
+            :icon="messageCopyIcon(message)"
+            :aria-label="t('assistant.copyMessage')"
+            @click="copyMessage(message)"
+          >
+            <q-tooltip>{{ t('assistant.copyMessage') }}</q-tooltip>
+          </q-btn>
+
+          <q-chip
+            v-if="messageHasSources(message)"
+            clickable
+            class="d-assistant-sources-chip"
+            :ripple="false"
+          >
+            <span class="d-assistant-sources-chip__avatars">
+              <q-avatar
+                v-for="(source, sourceIndex) in sourceAvatars"
+                :key="source.id"
+                class="d-assistant-sources-chip__avatar"
+                :style="{ zIndex: sourceAvatars.length - sourceIndex }"
+                size="24px"
+              >
+                <img :src="faviconFor(source)" :alt="source.title" loading="lazy">
+              </q-avatar>
+            </span>
+            <span class="d-assistant-sources-chip__label">{{ sourcesLabel }}</span>
+            <q-icon name="expand_more" size="16px" />
+
+            <q-menu
+              anchor="top left"
+              self="bottom left"
+              :offset="[0, 8]"
+              class="d-assistant-sources-menu"
+            >
+              <q-list separator class="d-assistant-sources-menu__list">
+                <q-item-label header class="d-assistant-sources-menu__header">
+                  {{ t('assistant.sources') }}
+                </q-item-label>
+                <q-item
+                  v-for="source in sources"
+                  :key="source.id"
+                  v-close-popup
+                  clickable
+                  tag="a"
+                  :href="sourceHref(source)"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <q-item-section avatar>
+                    <q-avatar size="28px" class="d-assistant-sources-menu__avatar">
+                      <img :src="faviconFor(source)" :alt="source.title" loading="lazy">
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label lines="1">{{ source.title }}</q-item-label>
+                    <q-item-label v-if="source.meta" caption lines="1">{{ source.meta }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-icon name="open_in_new" size="16px" />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-chip>
+        </div>
+
+        <div
+          v-else-if="message.role === 'user' && hasMessageContent(message)"
+          class="d-assistant-message__footer d-assistant-message__footer--user"
+        >
+          <div class="d-assistant-message__hoverlayer">
+            <q-btn
+              flat dense
+              text-color="primary"
+              class="d-assistant-message__copy d-assistant-message__copy--user"
+              :icon="messageCopyIcon(message)"
+              :aria-label="t('assistant.copyMessage')"
+              @click="copyMessage(message)"
+            >
+              <q-tooltip>{{ t('assistant.copyMessage') }}</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
       </div>
 
       <div v-if="isThinking" class="d-assistant-message d-assistant-message--assistant">
@@ -229,65 +517,22 @@ watch(assistant.sources, scrollToBottom, { deep: true })
       <span>{{ assistant.error.value }}</span>
     </div>
 
-    <div v-if="hasSources" class="d-assistant-panel__sources">
-      <q-chip
-        clickable
-        class="d-assistant-sources-chip"
-        :ripple="false"
-      >
-        <span class="d-assistant-sources-chip__avatars">
-          <q-avatar
-            v-for="(source, index) in sourceAvatars"
-            :key="source.id"
-            class="d-assistant-sources-chip__avatar"
-            :style="{ zIndex: sourceAvatars.length - index }"
-            size="24px"
-          >
-            <img :src="faviconFor(source)" :alt="source.title" loading="lazy">
-          </q-avatar>
-        </span>
-        <span class="d-assistant-sources-chip__label">{{ sourcesLabel }}</span>
-        <q-icon name="expand_more" size="16px" />
-
-        <q-menu
-          anchor="top left"
-          self="bottom left"
-          :offset="[0, 8]"
-          class="d-assistant-sources-menu"
-        >
-          <q-list separator class="d-assistant-sources-menu__list">
-            <q-item-label header class="d-assistant-sources-menu__header">
-              {{ t('assistant.sources') }}
-            </q-item-label>
-            <q-item
-              v-for="source in assistant.sources.value"
-              :key="source.id"
-              v-close-popup
-              clickable
-              tag="a"
-              :href="sourceHref(source)"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <q-item-section avatar>
-                <q-avatar size="28px" class="d-assistant-sources-menu__avatar">
-                  <img :src="faviconFor(source)" :alt="source.title" loading="lazy">
-                </q-avatar>
-              </q-item-section>
-              <q-item-section>
-                <q-item-label lines="1">{{ source.title }}</q-item-label>
-                <q-item-label v-if="source.meta" caption lines="1">{{ source.meta }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-icon name="open_in_new" size="16px" />
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-chip>
-    </div>
   </q-scroll-area>
 
+  <q-btn
+    v-if="showScrollToBottom && assistant.hasMessages.value"
+    round
+    unelevated
+    color="primary"
+    text-color="white"
+    class="d-assistant-panel__scroll-bottom"
+    icon="keyboard_arrow_down"
+    aria-label="Scroll to bottom"
+    @click="scrollToBottomAction"
+  >
+    <q-tooltip>Scroll to bottom</q-tooltip>
+  </q-btn>
+
   <footer class="d-assistant-panel__composer">
     <div v-if="!assistant.hasMessages.value" class="d-assistant-panel__prompts">
       <q-btn
@@ -384,12 +629,16 @@ watch(assistant.sources, scrollToBottom, { deep: true })
       background: linear-gradient(180deg, rgba(27,27,28,0), rgba(41, 24, 20, 0.72) 34%, #1b1b1c 100%)
 
     .d-assistant-message--assistant .d-assistant-message__content,
+    .d-assistant-panel__older-action,
     .d-assistant-panel__prompt,
     .d-assistant-sources-chip
       background: rgba(255, 255, 255, 0.045)
       color: rgba(255, 255, 255, 0.86)
       border-color: rgba(255, 255, 255, 0.12)
 
+    .d-assistant-message__copy
+      color: rgba(255, 255, 255, 0.84)
+
     .d-assistant-sources-chip__avatar
       border-color: #1b1b1c
 
@@ -489,9 +738,22 @@ watch(assistant.sources, scrollToBottom, { deep: true })
     background: rgba(14, 165, 233, 0.12)
 
   &__messages
-    padding: 16px 14px 14px
+    padding: 16px 14px 8px
     overflow-x: hidden
 
+  &__older
+    display: flex
+    justify-content: center
+    margin: 0 0 12px
+
+  &__older-action
+    min-height: 32px
+    padding: 0 12px
+    border: 1px solid rgba(15, 23, 42, 0.12)
+    background: rgba(255, 255, 255, 0.82)
+    border-radius: 8px
+    font-weight: 700
+
   &__error
     margin: 0 14px 96px
     padding: 10px 12px
@@ -503,6 +765,14 @@ watch(assistant.sources, scrollToBottom, { deep: true })
     background: rgba(251, 191, 36, 0.12)
     border-radius: 8px
 
+  &__scroll-bottom
+    position: absolute
+    left: 50%
+    bottom: calc(90px + env(safe-area-inset-bottom, 0px))
+    transform: translateX(-50%)
+    z-index: 4
+    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28)
+
   &__sources
     margin: 0 14px 0
     display: flex
@@ -577,24 +847,39 @@ watch(assistant.sources, scrollToBottom, { deep: true })
 
 .d-assistant-message
   display: flex
+  flex-direction: column
+  align-items: flex-start
   margin-bottom: 10px
   min-width: 0
   overflow-x: hidden
+  overflow-y: hidden
+  position: relative
 
   &--user
-    justify-content: flex-end
+    align-items: flex-end
 
     .d-assistant-message__content
       color: white
       background: var(--q-primary)
 
+    &:hover .d-assistant-message__hoverlayer .d-assistant-message__copy,
+    &:focus-within .d-assistant-message__hoverlayer .d-assistant-message__copy,
+    .d-assistant-message__hoverlayer:hover .d-assistant-message__copy,
+    .d-assistant-message__hoverlayer:focus-within .d-assistant-message__copy
+      opacity: 1
+      pointer-events: auto
+
   &--assistant
-    justify-content: flex-start
+    align-items: flex-start
 
     .d-assistant-message__content
-      background: rgba(255, 255, 255, 0.78)
-      border: 1px solid rgba(15, 23, 42, 0.1)
-      padding: 12px 14px !important
+      background: none !important
+      border: none
+      padding: 0 !important
+      max-width: 100%
+
+    .d-assistant-message__footer
+      justify-content: flex-start
 
   &__content
     max-width: 88%
@@ -639,6 +924,61 @@ watch(assistant.sources, scrollToBottom, { deep: true })
         max-width: 100%
         height: auto
 
+  &__footer
+    width: 88%
+    max-width: 88%
+    min-width: 0
+    display: flex
+    align-items: center
+    gap: 6px
+    margin-top: 5px
+
+    .d-assistant-sources-chip
+      flex: 0 1 auto
+      max-width: calc(100% - 38px)
+
+    &--user
+      width: auto
+      max-width: none
+      min-width: 30px
+      height: 30px
+      align-self: flex-end
+      align-items: center
+      justify-content: center
+
+  &__copy
+    flex: 0 0 auto
+    width: 30px
+    height: 30px
+    min-height: 30px
+    min-width: 30px
+    padding: 0
+    border-radius: 6px
+
+    .q-btn__content
+      line-height: 1
+
+      i
+        font-size: 17px !important
+        margin-left: 3px
+
+    &--assistant
+      margin-left: -2px
+
+  &__hoverlayer
+    display: flex
+    align-items: center
+    justify-content: center
+    width: 30px
+    height: 30px
+    min-width: 30px
+    min-height: 30px
+
+    .d-assistant-message__copy
+      opacity: 0
+      pointer-events: none
+      transition: opacity 0.14s ease
+
   &__thinking
     display: flex
     align-items: center
@@ -649,6 +989,7 @@ watch(assistant.sources, scrollToBottom, { deep: true })
 
 .d-assistant-sources-chip
   max-width: 100%
+  min-width: 0
   height: auto
   min-height: 34px
   padding: 4px 10px 4px 6px
@@ -688,6 +1029,8 @@ watch(assistant.sources, scrollToBottom, { deep: true })
     margin: 0 2px 0 8px
     font-size: 0.8rem
     white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
 
 .d-assistant-sources-menu
   max-width: min(360px, 90vw)

package/src/components/DPage.vue

@@ -136,6 +136,10 @@ const mobileAssistantOpen = computed({
   get: () => assistantEnabled && rightRailState.value.isMobile && layoutAssistant.value,
   set: (value) => { layoutAssistant.value = value }
 })
+const mobileTocOpen = computed({
+  get: () => rightRailState.value.isMobile && layoutMeta.value,
+  set: (value) => { layoutMeta.value = value }
+})
 const backToTopRightOffset = computed(() => {
   return rightRailState.value.backToTopRightOffset
 })
@@ -470,6 +474,18 @@ watch(() => route.fullPath, () => {
     </div>
   </q-drawer>
 
+  <q-dialog
+    v-model="mobileTocOpen"
+    position="right"
+    square
+    full-height
+    class="d-mobile-anchor-dialog"
+  >
+    <div id="anchor" class="d-mobile-anchor-dialog__panel">
+      <d-page-anchor />
+    </div>
+  </q-dialog>
+
   <q-dialog
     v-if="assistantEnabled"
     v-model="mobileAssistantOpen"
@@ -551,6 +567,32 @@ watch(() => route.fullPath, () => {
     max-height: 100dvh
     margin: 0
 
+.d-mobile-anchor-dialog
+  .q-dialog__inner
+    padding: 0
+    align-items: stretch
+    justify-content: flex-end
+
+  .q-dialog__backdrop
+    background: rgba(15, 23, 42, 0.24)
+
+  &__panel
+    width: min(100vw, 340px)
+    max-width: 100vw
+    height: 100%
+    max-height: 100dvh
+    padding-top: env(safe-area-inset-top, 0px)
+    padding-bottom: env(safe-area-inset-bottom, 0px)
+    background: rgba(248, 250, 252, 0.88)
+    backdrop-filter: blur(18px)
+    -webkit-backdrop-filter: blur(18px)
+    overflow: auto
+    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.22)
+
+body.body--dark
+  .d-mobile-anchor-dialog__panel
+    background: rgba(15, 23, 42, 0.9)
+
 #scroll-container
   width: 100%
   max-width: 1200px

package/src/composables/useAssistant.js

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import docsectorConfig from 'docsector.config.js'
 import { normalizeAiAssistantConfig } from '../ai-assistant/config'
@@ -11,6 +11,10 @@ const assistantMessages = ref([])
 const assistantSources = ref([])
 let assistantSessionReady = false
 let assistantSessionWatcherReady = false
+let assistantSessionPersistTimer = null
+let assistantSessionPersistencePaused = false
+
+const ASSISTANT_SESSION_PERSIST_DEBOUNCE = 180
 
 function createMessage (role, content = '') {
   return {
@@ -27,13 +31,50 @@ function getCompletionText (payload) {
     || ''
 }
 
-function persistAssistantSession () {
+function persistAssistantSessionNow () {
   saveAssistantSession({
     messages: assistantMessages.value,
     sources: assistantSources.value
   })
 }
 
+function cancelPersistAssistantSession () {
+  if (assistantSessionPersistTimer !== null) {
+    clearTimeout(assistantSessionPersistTimer)
+    assistantSessionPersistTimer = null
+  }
+}
+
+function schedulePersistAssistantSession ({ immediate = false } = {}) {
+  if (assistantSessionPersistencePaused) {
+    return
+  }
+
+  cancelPersistAssistantSession()
+
+  if (immediate || typeof window === 'undefined') {
+    persistAssistantSessionNow()
+    return
+  }
+
+  assistantSessionPersistTimer = window.setTimeout(() => {
+    assistantSessionPersistTimer = null
+    persistAssistantSessionNow()
+  }, ASSISTANT_SESSION_PERSIST_DEBOUNCE)
+}
+
+async function yieldAssistantStreamPaint () {
+  await nextTick()
+
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  await new Promise(resolve => {
+    window.setTimeout(resolve, 0)
+  })
+}
+
 function ensureAssistantSession () {
   if (!assistantSessionReady) {
     const session = loadAssistantSession()
@@ -43,7 +84,9 @@ function ensureAssistantSession () {
   }
 
   if (!assistantSessionWatcherReady) {
-    watch([assistantMessages, assistantSources], persistAssistantSession, { deep: true })
+    watch([assistantMessages, assistantSources], () => {
+      schedulePersistAssistantSession()
+    }, { deep: true })
     assistantSessionWatcherReady = true
   }
 }
@@ -63,6 +106,7 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     messages.value = []
     sources.value = []
     error.value = ''
+    cancelPersistAssistantSession()
     clearAssistantSession()
   }
 
@@ -99,10 +143,16 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
         for (const event of events) {
           const delta = extractAssistantStreamDelta(event)
           if (delta.done) return
+          const hadContent = delta.content.length > 0
+          const hadChunks = delta.chunks.length > 0
           appendAssistantContent(assistantMessage, delta.content)
-          if (delta.chunks.length > 0) {
+          if (hadChunks) {
             sources.value = delta.chunks
           }
+
+          if (hadContent || hadChunks) {
+            await yieldAssistantStreamPaint()
+          }
         }
       }
     }
@@ -111,10 +161,16 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
       const events = parseServerSentEvents(`${buffer}\n\n`)
       for (const event of events) {
         const delta = extractAssistantStreamDelta(event)
+        const hadContent = delta.content.length > 0
+        const hadChunks = delta.chunks.length > 0
         appendAssistantContent(assistantMessage, delta.content)
-        if (delta.chunks.length > 0) {
+        if (hadChunks) {
           sources.value = delta.chunks
         }
+
+        if (hadContent || hadChunks) {
+          await yieldAssistantStreamPaint()
+        }
       }
     }
   }
@@ -123,6 +179,8 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     const prompt = String(content || '').trim()
     if (!prompt || loading.value) return
 
+    assistantSessionPersistencePaused = true
+    cancelPersistAssistantSession()
     error.value = ''
     sources.value = []
 
@@ -165,7 +223,7 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
       }
 
       const contentType = response.headers.get('content-type') || ''
-      if (contentType.includes('text/event-stream') && response.body) {
+      if (response.body && (contentType.includes('text/event-stream') || contentType.trim() === '')) {
         await consumeStream(response, liveAssistantMessage)
       } else {
         const payload = await response.json()
@@ -184,6 +242,10 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     } finally {
       loading.value = false
       abortController.value = null
+      assistantSessionPersistencePaused = false
+      // Persist once after the streamed response settles; writing the whole
+      // session on every chunk can block paints and make streaming appear buffered.
+      schedulePersistAssistantSession({ immediate: true })
     }
   }
 

package/src/i18n/helpers.js

@@ -83,6 +83,9 @@ const engineDefaults = {
       context: 'Based on your context',
       sources: 'Sources',
       sourcesCount: '{count} sources',
+      copyMessage: 'Copy message',
+      copied: 'Message copied',
+      loadEarlier: 'Load earlier messages',
       thinking: 'Searching the docs…',
       resize: 'Resize assistant',
       greeting: {
@@ -153,6 +156,9 @@ const engineDefaults = {
       context: 'Com base no seu contexto',
       sources: 'Fontes',
       sourcesCount: '{count} fontes',
+      copyMessage: 'Copiar mensagem',
+      copied: 'Mensagem copiada',
+      loadEarlier: 'Carregar mensagens anteriores',
       thinking: 'Consultando a documentação…',
       resize: 'Redimensionar assistente',
       greeting: {

package/src/i18n/languages/en-US.hjson

@@ -118,6 +118,9 @@
     context: 'Based on your context',
     sources: 'Sources',
     sourcesCount: '{count} sources',
+    copyMessage: 'Copy message',
+    copied: 'Message copied',
+    loadEarlier: 'Load earlier messages',
     thinking: 'Searching the docs…',
     resize: 'Resize assistant',
     greeting: {

package/src/i18n/languages/pt-BR.hjson

@@ -117,6 +117,9 @@
     context: 'Com base no seu contexto',
     sources: 'Fontes',
     sourcesCount: '{count} fontes',
+    copyMessage: 'Copiar mensagem',
+    copied: 'Mensagem copiada',
+    loadEarlier: 'Carregar mensagens anteriores',
     thinking: 'Consultando a documentação…',
     resize: 'Redimensionar assistente',
     greeting: {