docus 5.4.4 → 5.5.0

package/modules/assistant/runtime/components/AssistantFloatingInput.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { AnimatePresence, motion } from 'motion-v'
+import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
+
+const route = useRoute()
+const appConfig = useAppConfig()
+const { open, isOpen } = useAssistant()
+const { t } = useDocusI18n()
+const input = ref('')
+const isVisible = ref(true)
+const inputRef = ref<{ inputRef: HTMLInputElement } | null>(null)
+
+const isDocsRoute = computed(() => route.meta.layout === 'docs')
+const isFloatingInputEnabled = computed(() => appConfig.assistant?.floatingInput !== false)
+const focusInputShortcut = computed(() => appConfig.assistant?.shortcuts?.focusInput || 'meta_i')
+const placeholder = computed(() => t('assistant.placeholder'))
+
+const shortcutDisplayKeys = computed(() => {
+  const shortcut = focusInputShortcut.value
+  const parts = shortcut.split('_')
+  return parts.map(part => part === 'meta' ? 'meta' : part.toUpperCase())
+})
+
+function handleSubmit() {
+  if (!input.value.trim()) return
+
+  const message = input.value
+  isVisible.value = false
+
+  setTimeout(() => {
+    open(message, true)
+    input.value = ''
+    isVisible.value = true
+  }, 200)
+}
+
+const shortcuts = computed(() => ({
+  [focusInputShortcut.value]: {
+    usingInput: true,
+    handler: () => {
+      if (!isDocsRoute.value || !isFloatingInputEnabled.value) return
+      inputRef.value?.inputRef?.focus()
+    },
+  },
+  escape: {
+    usingInput: true,
+    handler: () => {
+      inputRef.value?.inputRef?.blur()
+    },
+  },
+}))
+
+defineShortcuts(shortcuts)
+</script>
+
+<template>
+  <AnimatePresence>
+    <motion.div
+      v-if="isFloatingInputEnabled && isDocsRoute && isVisible && !isOpen"
+      key="floating-input"
+      :initial="{ y: 20, opacity: 0 }"
+      :animate="{ y: 0, opacity: 1 }"
+      :exit="{ y: 100, opacity: 0 }"
+      :transition="{ duration: 0.2, ease: 'easeOut' }"
+      class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 px-4"
+      style="will-change: transform"
+    >
+      <form @submit.prevent="handleSubmit">
+        <UInput
+          ref="inputRef"
+          v-model="input"
+          :placeholder="placeholder"
+          size="lg"
+          maxlength="1000"
+          :ui="{
+            root: 'group w-72 focus-within:w-96 transition-all duration-300 ease-out hover:scale-105 focus-within:scale-105',
+            base: 'bg-default shadow-lg rounded-xl',
+            trailing: 'pe-2',
+          }"
+          @keydown.enter.exact.prevent="handleSubmit"
+        >
+          <template #trailing>
+            <div class="flex items-center gap-2">
+              <div class="hidden sm:flex group-focus-within:hidden items-center gap-1">
+                <UKbd
+                  v-for="key in shortcutDisplayKeys"
+                  :key="key"
+                  :value="key"
+                />
+              </div>
+
+              <UButton
+                type="submit"
+                icon="i-lucide-arrow-up"
+                color="primary"
+                size="xs"
+                :disabled="!input.trim()"
+              />
+            </div>
+          </template>
+        </UInput>
+      </form>
+    </motion.div>
+  </AnimatePresence>
+</template>

package/modules/assistant/runtime/components/AssistantLoading.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { motion } from 'motion-v'
+import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
+
+interface ToolCall {
+  toolCallId: string
+  toolName: string
+  args: Record<string, unknown>
+}
+
+const props = defineProps<{
+  text?: string
+  toolCalls?: ToolCall[]
+  isLoading?: boolean
+}>()
+
+const { t } = useDocusI18n()
+
+const messages = computed(() => [
+  t('assistant.loading.searching'),
+  t('assistant.loading.reading'),
+  t('assistant.loading.analyzing'),
+  t('assistant.loading.finding'),
+])
+
+const finishedMessage = computed(() => t('assistant.loading.finished'))
+
+const currentIndex = ref(0)
+const targetText = computed(() => {
+  if (!props.isLoading) {
+    return finishedMessage.value
+  }
+  return props.text || messages.value[currentIndex.value]
+})
+const displayedText = ref(targetText.value)
+
+const chars = 'abcdefghijklmnopqrstuvwxyz'
+
+function scrambleText(from: string, to: string) {
+  const maxLength = Math.max(from.length, to.length)
+  let frame = 0
+  const totalFrames = 15
+
+  const animate = () => {
+    frame++
+    let result = ''
+
+    for (let i = 0; i < maxLength; i++) {
+      const progress = frame / totalFrames
+      const charProgress = progress * maxLength
+
+      if (i < charProgress - 2) {
+        result += to[i] || ''
+      }
+      else if (i < charProgress) {
+        result += chars[Math.floor(Math.random() * chars.length)]
+      }
+      else {
+        result += from[i] || ''
+      }
+    }
+
+    displayedText.value = result
+
+    if (frame < totalFrames) {
+      requestAnimationFrame(animate)
+    }
+    else {
+      displayedText.value = to
+    }
+  }
+
+  requestAnimationFrame(animate)
+}
+
+let textInterval: ReturnType<typeof setInterval> | null = null
+
+watch(targetText, (newText, oldText) => {
+  if (newText !== oldText && newText && oldText) {
+    scrambleText(oldText, newText)
+  }
+})
+
+// Stop text rotation when loading finishes
+watch(() => props.isLoading, (isLoading) => {
+  if (!isLoading && textInterval) {
+    clearInterval(textInterval)
+    textInterval = null
+  }
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getToolLabel(toolName: string, args: any) {
+  const path = args?.path || ''
+
+  if (toolName === 'list-pages') {
+    return t('assistant.toolListPages')
+  }
+
+  if (toolName === 'get-page') {
+    return `${t('assistant.toolReadPage')} ${path || '...'}`
+  }
+
+  return toolName
+}
+
+onMounted(() => {
+  // Text rotation only when loading
+  if (!props.text && props.isLoading) {
+    textInterval = setInterval(() => {
+      currentIndex.value = (currentIndex.value + 1) % messages.value.length
+    }, 3500)
+  }
+})
+
+onUnmounted(() => {
+  if (textInterval) clearInterval(textInterval)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <!-- Main loader with matrix and text -->
+    <div class="flex items-center text-xs text-muted overflow-hidden">
+      <motion.div
+        v-if="isLoading"
+        :initial="{ opacity: 1, width: 'auto' }"
+        :exit="{ opacity: 0, width: 0 }"
+        :transition="{ duration: 0.2 }"
+        class="shrink-0 mr-2"
+      >
+        <AssistantMatrix />
+      </motion.div>
+      <motion.span
+        :animate="{ x: 0 }"
+        :transition="{ duration: 0.2 }"
+        class="font-mono tracking-tight"
+      >
+        {{ displayedText }}
+      </motion.span>
+    </div>
+
+    <!-- Tool calls displayed below -->
+    <div
+      v-if="toolCalls?.length"
+      class="flex flex-col gap-1"
+      :class="isLoading ? 'pl-[22px]' : 'pl-0'"
+    >
+      <motion.div
+        v-for="tool in toolCalls"
+        :key="`${tool.toolCallId}-${JSON.stringify(tool.args)}`"
+        :initial="{ opacity: 0, x: -4 }"
+        :animate="{ opacity: 1, x: 0 }"
+        :transition="{ duration: 0.15 }"
+        class="flex items-center gap-1.5"
+      >
+        <span class="size-1 rounded-full bg-current opacity-40" />
+        <span class="text-[11px] text-dimmed truncate max-w-[200px]">
+          {{ getToolLabel(tool.toolName, tool.args) }}
+        </span>
+      </motion.div>
+    </div>
+  </div>
+</template>

package/modules/assistant/runtime/components/AssistantMatrix.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+interface Props {
+  size?: number
+  dotSize?: number
+  gap?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 4,
+  dotSize: 2,
+  gap: 2,
+})
+
+const totalDots = computed(() => props.size * props.size)
+const activeDots = ref<Set<number>>(new Set())
+
+// Patterns for 4x4 grid (indices 0-15)
+// Grid layout:
+//  0  1  2  3
+//  4  5  6  7
+//  8  9 10 11
+// 12 13 14 15
+const patterns = [
+  // Spiral inward
+  [[0], [1], [2], [3], [7], [11], [15], [14], [13], [12], [8], [4], [5], [6], [10], [9]],
+  // Wave horizontal
+  [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]],
+  // Diamond pulse
+  [[5, 6, 9, 10], [1, 4, 7, 8, 11, 14], [0, 3, 12, 15], [1, 4, 7, 8, 11, 14], [5, 6, 9, 10]],
+  // Loading bar
+  [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
+  // Corners rotate
+  [[0], [3], [15], [12]],
+  // Cross pulse
+  [[5, 6, 9, 10], [1, 2, 4, 7, 8, 11, 13, 14], [0, 3, 12, 15]],
+  // Snake
+  [[0], [1], [2], [3], [7], [6], [5], [4], [8], [9], [10], [11], [15], [14], [13], [12]],
+  // Diagonal wave
+  [[0], [1, 4], [2, 5, 8], [3, 6, 9, 12], [7, 10, 13], [11, 14], [15]],
+]
+
+let patternIndex = 0
+let stepIndex = 0
+let interval: ReturnType<typeof setInterval> | null = null
+
+function nextStep() {
+  const pattern = patterns[patternIndex]
+  if (!pattern) return
+
+  activeDots.value = new Set(pattern[stepIndex])
+  stepIndex++
+
+  if (stepIndex >= pattern.length) {
+    stepIndex = 0
+    patternIndex = (patternIndex + 1) % patterns.length
+  }
+}
+
+const gridStyle = computed(() => ({
+  display: 'grid',
+  gridTemplateColumns: `repeat(${props.size}, 1fr)`,
+  gap: `${props.gap}px`,
+  width: `${props.size * props.dotSize + (props.size - 1) * props.gap}px`,
+  height: `${props.size * props.dotSize + (props.size - 1) * props.gap}px`,
+}))
+
+const dotStyle = computed(() => ({
+  width: `${props.dotSize}px`,
+  height: `${props.dotSize}px`,
+}))
+
+onMounted(() => {
+  interval = setInterval(nextStep, 120)
+  nextStep()
+})
+
+onUnmounted(() => {
+  if (interval) clearInterval(interval)
+})
+</script>
+
+<template>
+  <div :style="gridStyle">
+    <span
+      v-for="i in totalDots"
+      :key="i"
+      class="rounded-[0.5px] bg-current transition-opacity duration-100"
+      :class="activeDots.has(i - 1) ? 'opacity-100' : 'opacity-20'"
+      :style="dotStyle"
+    />
+  </div>
+</template>

package/modules/assistant/runtime/components/AssistantPanel.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+import { DefaultChatTransport } from 'ai'
+import { createReusableTemplate } from '@vueuse/core'
+import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const components: Record<string, any> = {
+  pre: defineAsyncComponent(() => import('./AssistantPreStream.vue')),
+}
+
+const [DefineChatContent, ReuseChatContent] = createReusableTemplate<{ showExpandButton?: boolean }>()
+
+const { isOpen, isExpanded, isMobile, panelWidth, toggleExpanded, messages, pendingMessage, clearPending, faqQuestions } = useAssistant()
+const config = useRuntimeConfig()
+const toast = useToast()
+const { t } = useDocusI18n()
+const input = ref('')
+
+const displayTitle = computed(() => t('assistant.title'))
+const displayPlaceholder = computed(() => t('assistant.placeholder'))
+
+const chat = new Chat({
+  messages: messages.value,
+  transport: new DefaultChatTransport({
+    api: config.public.assistant.apiPath,
+  }),
+  onError: (error: Error) => {
+    const message = (() => {
+      try {
+        const parsed = JSON.parse(error.message)
+        return parsed?.message || error.message
+      }
+      catch {
+        return error.message
+      }
+    })()
+
+    toast.add({
+      description: message,
+      icon: 'i-lucide-alert-circle',
+      color: 'error',
+      duration: 0,
+    })
+  },
+  onFinish: () => {
+    messages.value = chat.messages
+  },
+})
+
+watch(pendingMessage, (message: string | undefined) => {
+  if (message) {
+    if (messages.value.length === 0 && chat.messages.length > 0) {
+      chat.messages.length = 0
+    }
+    chat.sendMessage({
+      text: message,
+    })
+    clearPending()
+  }
+}, { immediate: true })
+
+watch(messages, (newMessages: UIMessage[]) => {
+  if (newMessages.length === 0 && chat.messages.length > 0) {
+    chat.messages.length = 0
+  }
+}, { deep: true })
+
+const lastMessage = computed(() => chat.messages.at(-1))
+const showThinking = computed(() =>
+  chat.status === 'streaming'
+  && lastMessage.value?.role === 'assistant'
+  && !lastMessage.value?.parts?.some((p: { type: string }) => p.type === 'text'),
+)
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getMessageToolCalls(message: any) {
+  if (!message?.parts) return []
+  return message.parts
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    .filter((p: any) => p.type === 'data-tool-calls')
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    .flatMap((p: any) => p.data?.tools || [])
+}
+
+function handleSubmit(event?: Event) {
+  event?.preventDefault()
+
+  if (!input.value.trim()) {
+    return
+  }
+
+  chat.sendMessage({
+    text: input.value,
+  })
+
+  input.value = ''
+}
+
+function askQuestion(question: string) {
+  chat.sendMessage({
+    text: question,
+  })
+}
+
+function resetChat() {
+  chat.stop()
+  messages.value = []
+  chat.messages.length = 0
+}
+
+onMounted(() => {
+  if (pendingMessage.value) {
+    chat.sendMessage({
+      text: pendingMessage.value,
+    })
+    clearPending()
+  }
+  else if (chat.lastMessage?.role === 'user') {
+    chat.regenerate()
+  }
+})
+</script>
+
+<template>
+  <DefineChatContent v-slot="{ showExpandButton = true }">
+    <div class="flex h-full flex-col">
+      <div class="flex h-16 shrink-0 items-center justify-between border-b border-default px-4">
+        <span class="font-medium text-highlighted">{{ displayTitle }}</span>
+        <div class="flex items-center gap-1">
+          <UTooltip
+            v-if="showExpandButton"
+            :text="isExpanded ? t('assistant.collapse') : t('assistant.expand')"
+          >
+            <UButton
+              :icon="isExpanded ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              class="text-muted hover:text-highlighted"
+              @click="toggleExpanded"
+            />
+          </UTooltip>
+          <UTooltip
+            v-if="chat.messages.length > 0"
+            :text="t('assistant.clearChat')"
+          >
+            <UButton
+              icon="i-lucide-trash-2"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              class="text-muted hover:text-highlighted"
+              @click="resetChat"
+            />
+          </UTooltip>
+          <UTooltip :text="t('assistant.close')">
+            <UButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              class="text-muted hover:text-highlighted"
+              @click="isOpen = false"
+            />
+          </UTooltip>
+        </div>
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-y-auto">
+        <UChatMessages
+          v-if="chat.messages.length > 0"
+          :messages="chat.messages"
+          compact
+          :status="chat.status"
+          :user="{ ui: { content: 'text-sm' } }"
+          :ui="{ indicator: '*:bg-accented', root: 'h-auto!' }"
+          class="px-4 py-4"
+        >
+          <template #content="{ message }">
+            <div class="flex flex-col gap-2">
+              <AssistantLoading
+                v-if="message.role === 'assistant' && (getMessageToolCalls(message).length > 0 || (showThinking && message.id === lastMessage?.id))"
+                :tool-calls="getMessageToolCalls(message)"
+                :is-loading="showThinking && message.id === lastMessage?.id"
+              />
+              <template
+                v-for="(part, index) in message.parts"
+                :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
+              >
+                <MDCCached
+                  v-if="part.type === 'text' && part.text"
+                  :value="part.text"
+                  :cache-key="`${message.id}-${index}`"
+                  :components="components"
+                  :parser-options="{ highlight: false }"
+                  class="*:first:mt-0 *:last:mb-0"
+                />
+              </template>
+            </div>
+          </template>
+        </UChatMessages>
+
+        <div
+          v-else
+          class="p-4"
+        >
+          <div
+            v-if="!faqQuestions?.length"
+            class="flex h-full flex-col items-center justify-center py-12 text-center"
+          >
+            <div class="mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10">
+              <UIcon
+                name="i-lucide-message-circle-question"
+                class="size-6 text-primary"
+              />
+            </div>
+            <h3 class="mb-2 text-base font-medium text-highlighted">
+              {{ t('assistant.askMeAnything') }}
+            </h3>
+            <p class="max-w-xs text-sm text-muted">
+              {{ t('assistant.askMeAnythingDescription') }}
+            </p>
+          </div>
+
+          <template v-else>
+            <p class="mb-4 text-sm font-medium text-muted">
+              {{ t('assistant.faq') }}
+            </p>
+
+            <div class="flex flex-col gap-5">
+              <div
+                v-for="category in faqQuestions"
+                :key="category.category"
+                class="flex flex-col gap-1.5"
+              >
+                <h4 class="text-xs font-medium uppercase tracking-wide text-dimmed">
+                  {{ category.category }}
+                </h4>
+                <div class="flex flex-col">
+                  <button
+                    v-for="question in category.items"
+                    :key="question"
+                    class="py-1.5 text-left text-sm text-muted transition-colors hover:text-highlighted"
+                    @click="askQuestion(question)"
+                  >
+                    {{ question }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="w-full shrink-0 p-3">
+        <UChatPrompt
+          v-model="input"
+          :rows="2"
+          :placeholder="displayPlaceholder"
+          maxlength="1000"
+          :ui="{
+            root: 'shadow-none!',
+            body: '*:p-0! *:rounded-none! *:text-sm!',
+          }"
+          @submit="handleSubmit"
+        >
+          <template #footer>
+            <div class="flex items-center gap-1 text-xs text-muted">
+              <span>{{ t('assistant.lineBreak') }}</span>
+              <UKbd
+                size="sm"
+                value="shift"
+              />
+              <UKbd
+                size="sm"
+                value="enter"
+              />
+            </div>
+            <UChatPromptSubmit
+              class="ml-auto"
+              size="xs"
+              :status="chat.status"
+              @stop="chat.stop()"
+              @reload="chat.regenerate()"
+            />
+          </template>
+        </UChatPrompt>
+        <div class="mt-1 flex text-xs text-dimmed items-center justify-between">
+          <span>{{ t('assistant.chatCleared') }}</span>
+          <span>
+            {{ input.length }}/1000
+          </span>
+        </div>
+      </div>
+    </div>
+  </DefineChatContent>
+
+  <aside
+    v-if="!isMobile"
+    class="left-auto! fixed top-0 z-50 h-dvh overflow-hidden border-l border-default bg-default/95 backdrop-blur-xl transition-[right,width] duration-200 ease-linear will-change-[right,width]"
+    :style="{
+      width: `${panelWidth}px`,
+      right: isOpen ? '0' : `-${panelWidth}px`,
+    }"
+  >
+    <div
+      class="h-full transition-[width] duration-200 ease-linear"
+      :style="{ width: `${panelWidth}px` }"
+    >
+      <ReuseChatContent :show-expand-button="true" />
+    </div>
+  </aside>
+
+  <USlideover
+    v-else
+    v-model:open="isOpen"
+    side="right"
+    :ui="{
+      content: 'ring-0 bg-default',
+    }"
+  >
+    <template #content>
+      <ReuseChatContent :show-expand-button="false" />
+    </template>
+  </USlideover>
+</template>