@docsector/docsector-reader 4.5.6 → 4.6.0

package/README.md

@@ -59,7 +59,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, preserve the assistant panel open state across reloads, include per-message copy actions, and show a floating quick return to the bottom
+- 💬 **Assistant Chat UX Enhancements** — Long conversations keep focus on recent messages, load earlier history progressively, deduplicate repeated sources, preserve the assistant panel open state across reloads, include per-message copy actions and hover-revealed message times, and show a floating quick return to the bottom
 - 📱 **Responsive** — Mobile-friendly with collapsible sidebar and drawers
 - 🏷️ **Clickable Header Branding** — The configured `branding.logo` and `branding.name` render as a home link in the global header, aligned left on desktop with a compact mobile treatment
 - 📚 **Book Tabs with Per-State Colors** — Define `*.book.js` tabs with icons, order, and `color.active` / `color.inactive`
@@ -301,7 +301,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. Conversations restore at the latest message, reveal earlier history progressively in long chats, deduplicate repeated source links, preserve the panel open state across page reloads, and provide per-message copy actions.
+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, preserve the panel open state across page reloads, and provide per-message copy actions with hover-revealed message times.
 
 ### Configure
 
@@ -332,8 +332,8 @@ export default {
       accountIdEnv: 'CLOUDFLARE_ACCOUNT_ID',
       apiTokenEnv: 'CLOUDFLARE_API_TOKEN',
       model: '@cf/meta/llama-3.3-70b-instruct-fp8-fast',
-      retrievalType: 'hybrid',
-      maxResults: 6,
+      retrievalType: 'vector',
+      maxResults: 10,
       matchThreshold: 0.4,
       contextExpansion: 1,
       queryRewrite: { enabled: true },
@@ -886,8 +886,8 @@ export default {
       instanceNameEnv: 'AI_SEARCH_INSTANCE_NAME',
       accountIdEnv: 'CLOUDFLARE_ACCOUNT_ID',
       apiTokenEnv: 'CLOUDFLARE_API_TOKEN',
-      retrievalType: 'hybrid',
-      maxResults: 6,
+      retrievalType: 'vector',
+      maxResults: 10,
       stream: true
     }
   },

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.5.6'
+const VERSION = '4.6.0'
 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.5.6",
+  "version": "4.6.0",
   "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",
@@ -57,7 +57,8 @@
     "url": "https://github.com/docsector/docsector-reader/issues"
   },
   "scripts": {
-    "dev": "npx wrangler pages dev dist/spa",
+    "dev": "quasar dev",
+    "dev:pages": "npx wrangler pages dev dist/spa",
     "build": "quasar build",
     "lint": "eslint --ext .js,.vue ./",
     "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",

package/src/ai-assistant/panel.js

@@ -2,6 +2,39 @@ export function hasAssistantMessageContent(message) {
   return String(message?.content || '').trim().length > 0
 }
 
+export function getAssistantMessageTimestamp(message) {
+  const timestamp = Number(message?.timestamp)
+  if (Number.isFinite(timestamp) && timestamp > 0) {
+    return timestamp
+  }
+
+  const id = String(message?.id || '')
+  const match = id.match(/^(?:user|assistant)-(\d{12,})-/)
+  if (!match) {
+    return null
+  }
+
+  const legacyTimestamp = Number(match[1])
+  return Number.isFinite(legacyTimestamp) && legacyTimestamp > 0 ? legacyTimestamp : null
+}
+
+export function formatAssistantMessageTime(message, locale = 'en-US') {
+  const timestamp = getAssistantMessageTimestamp(message)
+  if (!timestamp) {
+    return ''
+  }
+
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime())) {
+    return ''
+  }
+
+  return new Intl.DateTimeFormat(locale || 'en-US', {
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(date)
+}
+
 export function listVisibleAssistantMessages(messages = []) {
   return messages.filter((message) => {
     if (message?.role !== 'assistant') {
@@ -12,6 +45,26 @@ export function listVisibleAssistantMessages(messages = []) {
   })
 }
 
+export function hasVisibleAssistantHistoryAfter(messages = [], messageId = '') {
+  const targetId = String(messageId || '')
+  if (!targetId) {
+    return false
+  }
+
+  const targetIndex = messages.findIndex(message => String(message?.id || '') === targetId)
+  if (targetIndex === -1) {
+    return false
+  }
+
+  return messages.slice(targetIndex + 1).some((message) => {
+    if (message?.role === 'assistant') {
+      return hasAssistantMessageContent(message)
+    }
+
+    return hasAssistantMessageContent(message)
+  })
+}
+
 export const ASSISTANT_MESSAGE_WINDOW_SIZE = 60
 export const ASSISTANT_MESSAGE_WINDOW_STEP = 40
 

package/src/ai-assistant/session.js

@@ -1,4 +1,5 @@
 import { dedupeAssistantSources } from './stream'
+import { getAssistantMessageTimestamp } from './panel'
 
 export const ASSISTANT_SESSION_STORAGE_KEY = 'docsector.assistant.session.v1'
 
@@ -17,6 +18,11 @@ function cleanString (value = '', maxLength = Number.MAX_SAFE_INTEGER) {
   return String(value || '').slice(0, maxLength)
 }
 
+function normalizeMessageTimestamp (message) {
+  const timestamp = getAssistantMessageTimestamp(message)
+  return timestamp ? { timestamp } : {}
+}
+
 export function normalizeAssistantSession (session = {}) {
   const messages = (Array.isArray(session?.messages) ? session.messages : [])
     .map((message, index) => {
@@ -24,11 +30,16 @@ export function normalizeAssistantSession (session = {}) {
       const content = cleanString(message?.content, MAX_MESSAGE_CONTENT_LENGTH)
       if (!VALID_ROLES.has(role) || !content.trim()) return null
 
-      return {
+      const normalizedMessage = {
         id: cleanString(message?.id || `${role}-${index + 1}`, 160),
         role,
         content
       }
+
+      return {
+        ...normalizedMessage,
+        ...normalizeMessageTimestamp(message)
+      }
     })
     .filter(Boolean)
     .slice(-MAX_PERSISTED_MESSAGES)
@@ -90,4 +101,4 @@ export function clearAssistantSession ({ storage = null, key = ASSISTANT_SESSION
   } catch {
     // Ignore storage failures.
   }
-}
+}

package/src/components/DAssistantPanel.vue

@@ -8,7 +8,9 @@ import useAssistant from '../composables/useAssistant'
 import {
   ASSISTANT_MESSAGE_WINDOW_SIZE,
   ASSISTANT_MESSAGE_WINDOW_STEP,
+  formatAssistantMessageTime,
   getAssistantMessageWindow,
+  hasVisibleAssistantHistoryAfter,
   isAssistantThinkingState
 } from '../ai-assistant/panel'
 import DPageTokens from './DPageTokens.vue'
@@ -57,6 +59,8 @@ const scrollArea = ref(null)
 const visibleMessageLimit = ref(ASSISTANT_MESSAGE_WINDOW_SIZE)
 const copiedMessageId = ref('')
 const showScrollToBottom = ref(false)
+const retryHistoryDialogOpen = ref(false)
+const pendingRetryMessageId = ref('')
 let scrollFrame = 0
 let copiedMessageTimer = null
 let revealingOlderMessages = false
@@ -131,6 +135,10 @@ const hasMessageContent = (message) => {
   return String(message?.content || '').trim().length > 0
 }
 
+const messageTime = (message) => {
+  return formatAssistantMessageTime(message, locale.value)
+}
+
 const messageHasSources = (message) => {
   return hasSources.value && String(message?.id || '') === latestAssistantMessageId.value
 }
@@ -281,6 +289,41 @@ const messageCopyIcon = (message) => {
   return copiedMessageId.value === String(message?.id || '') ? 'check' : 'content_copy'
 }
 
+const runRetryMessage = async (messageId) => {
+  const id = String(messageId || '')
+  if (!id) return
+  await assistant.retryFromUserMessage(id)
+}
+
+const retryMessage = async (message) => {
+  const id = String(message?.id || '')
+  if (!id || assistant.loading.value) return
+
+  if (hasVisibleAssistantHistoryAfter(assistant.messages.value, id)) {
+    pendingRetryMessageId.value = id
+    retryHistoryDialogOpen.value = true
+    return
+  }
+
+  await runRetryMessage(id)
+}
+
+const clearPendingRetryMessage = () => {
+  pendingRetryMessageId.value = ''
+}
+
+const cancelRetryMessage = () => {
+  retryHistoryDialogOpen.value = false
+  clearPendingRetryMessage()
+}
+
+const confirmRetryMessage = async () => {
+  const id = pendingRetryMessageId.value
+  retryHistoryDialogOpen.value = false
+  clearPendingRetryMessage()
+  await runRetryMessage(id)
+}
+
 const submit = async (value = input.value) => {
   const prompt = String(value || '').trim()
   if (!prompt) return
@@ -419,7 +462,7 @@ onBeforeUnmount(() => {
           <q-btn
             flat dense
             text-color="primary"
-            class="d-assistant-message__copy d-assistant-message__copy--assistant"
+            class="d-assistant-message__action d-assistant-message__copy d-assistant-message__copy--assistant"
             :icon="messageCopyIcon(message)"
             :aria-label="t('assistant.copyMessage')"
             @click="copyMessage(message)"
@@ -483,6 +526,11 @@ onBeforeUnmount(() => {
               </q-list>
             </q-menu>
           </q-chip>
+
+          <span
+            v-if="messageTime(message)"
+            class="d-assistant-message__timestamp"
+          >{{ messageTime(message) }}</span>
         </div>
 
         <div
@@ -491,15 +539,30 @@ onBeforeUnmount(() => {
         >
           <div class="d-assistant-message__hoverlayer">
             <q-btn
+              v-if="!assistant.loading.value"
               flat dense
               text-color="primary"
-              class="d-assistant-message__copy d-assistant-message__copy--user"
+              class="d-assistant-message__action d-assistant-message__retry"
+              icon="refresh"
+              :aria-label="t('assistant.retryMessage')"
+              @click="retryMessage(message)"
+            >
+              <q-tooltip>{{ t('assistant.retryMessage') }}</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat dense
+              text-color="primary"
+              class="d-assistant-message__action 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>
+            <span
+              v-if="messageTime(message)"
+              class="d-assistant-message__timestamp"
+            >{{ messageTime(message) }}</span>
           </div>
         </div>
       </div>
@@ -572,6 +635,33 @@ onBeforeUnmount(() => {
       </div>
     </div>
   </footer>
+
+  <q-dialog v-model="retryHistoryDialogOpen" @hide="clearPendingRetryMessage">
+    <q-card class="d-assistant-retry-dialog">
+      <q-card-section class="d-assistant-retry-dialog__header">
+        <q-icon name="warning_amber" size="24px" />
+        <div>
+          <h3>{{ t('assistant.retryHistoryTitle') }}</h3>
+          <p>{{ t('assistant.retryHistoryMessage') }}</p>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="d-assistant-retry-dialog__actions">
+        <q-btn
+          unelevated no-caps
+          color="grey-7"
+          text-color="white"
+          :label="t('assistant.retryHistoryCancel')"
+          @click="cancelRetryMessage"
+        />
+        <q-btn
+          unelevated no-caps
+          color="primary"
+          :label="t('assistant.retryHistoryConfirm')"
+          @click="confirmRetryMessage"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </aside>
 </template>
 
@@ -636,7 +726,7 @@ onBeforeUnmount(() => {
       color: rgba(255, 255, 255, 0.86)
       border-color: rgba(255, 255, 255, 0.12)
 
-    .d-assistant-message__copy
+    .d-assistant-message__action
       color: rgba(255, 255, 255, 0.84)
 
     .d-assistant-sources-chip__avatar
@@ -862,10 +952,12 @@ onBeforeUnmount(() => {
       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
+    &:hover .d-assistant-message__hoverlayer .d-assistant-message__action,
+    &:focus-within .d-assistant-message__hoverlayer .d-assistant-message__action,
+    .d-assistant-message__hoverlayer:hover .d-assistant-message__action,
+    .d-assistant-message__hoverlayer:focus-within .d-assistant-message__action,
+    &:hover .d-assistant-message__timestamp,
+    &:focus-within .d-assistant-message__timestamp
       opacity: 1
       pointer-events: auto
 
@@ -881,6 +973,10 @@ onBeforeUnmount(() => {
     .d-assistant-message__footer
       justify-content: flex-start
 
+    &:hover .d-assistant-message__timestamp,
+    &:focus-within .d-assistant-message__timestamp
+      opacity: 1
+
   &__content
     max-width: 88%
     min-width: 0
@@ -935,7 +1031,7 @@ onBeforeUnmount(() => {
 
     .d-assistant-sources-chip
       flex: 0 1 auto
-      max-width: calc(100% - 38px)
+      max-width: calc(100% - 92px)
 
     &--user
       width: auto
@@ -946,7 +1042,7 @@ onBeforeUnmount(() => {
       align-items: center
       justify-content: center
 
-  &__copy
+  &__action
     flex: 0 0 auto
     width: 30px
     height: 30px
@@ -960,25 +1056,45 @@ onBeforeUnmount(() => {
 
       i
         font-size: 17px !important
-        margin-left: 3px
+        margin: 0
 
+  &__copy
     &--assistant
       margin-left: -2px
 
+  &__retry
+    color: currentColor
+
   &__hoverlayer
     display: flex
     align-items: center
-    justify-content: center
-    width: 30px
+    justify-content: flex-end
+    gap: 6px
+    width: auto
     height: 30px
     min-width: 30px
     min-height: 30px
 
-    .d-assistant-message__copy
+    .d-assistant-message__action
       opacity: 0
       pointer-events: none
       transition: opacity 0.14s ease
 
+  &__timestamp
+    flex: 0 0 auto
+    margin-left: auto
+    color: currentColor
+    font-size: 0.72rem
+    font-weight: 700
+    font-variant-numeric: tabular-nums
+    line-height: 30px
+    opacity: 0
+    pointer-events: none
+    transition: opacity 0.14s ease
+
+  &__hoverlayer &__timestamp
+    margin-left: 0
+
   &__thinking
     display: flex
     align-items: center
@@ -987,6 +1103,31 @@ onBeforeUnmount(() => {
     opacity: 0.78
     font-weight: 600
 
+.d-assistant-retry-dialog
+  width: min(360px, calc(100vw - 32px))
+  border-radius: 8px
+
+  &__header
+    display: flex
+    align-items: flex-start
+    gap: 12px
+    padding: 18px 18px 10px
+
+    h3
+      margin: 0 0 6px
+      font-size: 1rem
+      line-height: 1.3
+      font-weight: 800
+
+    p
+      margin: 0
+      color: currentColor
+      opacity: 0.72
+      line-height: 1.45
+
+  &__actions
+    padding: 8px 12px 14px
+
 .d-assistant-sources-chip
   max-width: 100%
   min-width: 0

package/src/composables/useAssistant.js

@@ -17,10 +17,13 @@ let assistantSessionPersistencePaused = false
 const ASSISTANT_SESSION_PERSIST_DEBOUNCE = 180
 
 function createMessage (role, content = '') {
+  const timestamp = Date.now()
+
   return {
-    id: `${role}-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+    id: `${role}-${timestamp}-${Math.random().toString(16).slice(2)}`,
     role,
-    content
+    content,
+    timestamp
   }
 }
 
@@ -121,6 +124,11 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     message.content += content
   }
 
+  const appendAssistantPlaceholder = () => {
+    messages.value.push(createMessage('assistant'))
+    return messages.value[messages.value.length - 1]
+  }
+
   const consumeStream = async (response, assistantMessage) => {
     const reader = response.body.getReader()
     const decoder = new TextDecoder()
@@ -175,22 +183,14 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     }
   }
 
-  const send = async (content) => {
-    const prompt = String(content || '').trim()
-    if (!prompt || loading.value) return
-
+  const prepareRequest = () => {
     assistantSessionPersistencePaused = true
     cancelPersistAssistantSession()
     error.value = ''
     sources.value = []
+  }
 
-    const userMessage = createMessage('user', prompt)
-    const assistantMessage = createMessage('assistant')
-    messages.value.push(userMessage, assistantMessage)
-    // Use the reactive proxy from the array so streamed mutations trigger
-    // live re-renders (raw object mutations bypass Vue reactivity).
-    const liveAssistantMessage = messages.value[messages.value.length - 1]
-
+  const requestAssistantResponse = async (liveAssistantMessage) => {
     abortController.value = new AbortController()
     loading.value = true
 
@@ -249,6 +249,36 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     }
   }
 
+  const send = async (content) => {
+    const prompt = String(content || '').trim()
+    if (!prompt || loading.value) return
+
+    prepareRequest()
+
+    messages.value.push(createMessage('user', prompt))
+    const liveAssistantMessage = appendAssistantPlaceholder()
+
+    await requestAssistantResponse(liveAssistantMessage)
+  }
+
+  const retryFromUserMessage = async (messageId) => {
+    const targetId = String(messageId || '')
+    if (!targetId || loading.value) return
+
+    const targetIndex = messages.value.findIndex(message => String(message?.id || '') === targetId)
+    const targetMessage = messages.value[targetIndex]
+    if (targetIndex === -1 || targetMessage?.role !== 'user' || !String(targetMessage?.content || '').trim()) {
+      return
+    }
+
+    prepareRequest()
+
+    messages.value = messages.value.slice(0, targetIndex + 1)
+    const liveAssistantMessage = appendAssistantPlaceholder()
+
+    await requestAssistantResponse(liveAssistantMessage)
+  }
+
   return {
     config: assistantConfig,
     messages,
@@ -257,6 +287,7 @@ export default function useAssistant ({ route, locale, getContext } = {}) {
     error,
     hasMessages,
     send,
+    retryFromUserMessage,
     stop,
     clear
   }

package/src/i18n/helpers.js

@@ -84,6 +84,11 @@ const engineDefaults = {
       sources: 'Sources',
       sourcesCount: '{count} sources',
       copyMessage: 'Copy message',
+      retryMessage: 'Reload message',
+      retryHistoryTitle: 'Reload from this message?',
+      retryHistoryMessage: 'Messages after this question will be removed from the conversation.',
+      retryHistoryConfirm: 'Reload',
+      retryHistoryCancel: 'Cancel',
       copied: 'Message copied',
       loadEarlier: 'Load earlier messages',
       thinking: 'Searching the docs…',
@@ -157,6 +162,11 @@ const engineDefaults = {
       sources: 'Fontes',
       sourcesCount: '{count} fontes',
       copyMessage: 'Copiar mensagem',
+      retryMessage: 'Reenviar mensagem',
+      retryHistoryTitle: 'Reenviar desta mensagem?',
+      retryHistoryMessage: 'As mensagens depois desta pergunta serão removidas da conversa.',
+      retryHistoryConfirm: 'Reenviar',
+      retryHistoryCancel: 'Cancelar',
       copied: 'Mensagem copiada',
       loadEarlier: 'Carregar mensagens anteriores',
       thinking: 'Consultando a documentação…',

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

@@ -119,6 +119,11 @@
     sources: 'Sources',
     sourcesCount: '{count} sources',
     copyMessage: 'Copy message',
+    retryMessage: 'Reload message',
+    retryHistoryTitle: 'Reload from this message?',
+    retryHistoryMessage: 'Messages after this question will be removed from the conversation.',
+    retryHistoryConfirm: 'Reload',
+    retryHistoryCancel: 'Cancel',
     copied: 'Message copied',
     loadEarlier: 'Load earlier messages',
     thinking: 'Searching the docs…',

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

@@ -118,6 +118,11 @@
     sources: 'Fontes',
     sourcesCount: '{count} fontes',
     copyMessage: 'Copiar mensagem',
+    retryMessage: 'Reenviar mensagem',
+    retryHistoryTitle: 'Reenviar desta mensagem?',
+    retryHistoryMessage: 'As mensagens depois desta pergunta serão removidas da conversa.',
+    retryHistoryConfirm: 'Reenviar',
+    retryHistoryCancel: 'Cancelar',
     copied: 'Mensagem copiada',
     loadEarlier: 'Carregar mensagens anteriores',
     thinking: 'Consultando a documentação…',