@movk/nuxt-docs 1.5.2 → 1.6.0

package/app/utils/unicode.ts

@@ -0,0 +1,12 @@
+/**
+ * 解码字符串中的 Unicode 转义序列
+ * @param str 包含 Unicode 转义序列的字符串（如 '\u5411 AI \u63D0\u95EE'）
+ * @returns 解码后的字符串（如 '向 AI 提问'）
+ * @example
+ * decodeUnicodeEscapes("'\\u5411 AI \\u63D0\\u95EE'") // => "'向 AI 提问'"
+ */
+export function decodeUnicodeEscapes(str: string): string {
+  return str.replace(/\\u[\dA-Fa-f]{4}/g, (match) => {
+    return String.fromCharCode(Number.parseInt(match.replace('\\u', ''), 16))
+  })
+}

package/modules/ai-chat/index.ts

@@ -0,0 +1,90 @@
+import { addComponentsDir, addImportsDir, addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export interface AiChatModuleOptions {
+  /**
+   * 是否启用 AI 聊天功能
+   * @default import.meta.env.AI_GATEWAY_API_KEY || import.meta.env.OPENROUTER_API_KEY
+   */
+  enable?: boolean
+  /**
+   * 聊天 API 端点路径
+   * @default '/api/ai-chat'
+   */
+  apiPath?: string
+  /**
+   * MCP 服务器连接路径
+   * @default '/mcp'
+   */
+  mcpPath?: string
+  /**
+   * 通过 AI SDK Gateway 、OpenRouter 使用的 AI 模型
+   */
+  model?: string
+  /**
+   * 可用模型列表
+   * - 格式为 "provider/model" 或 "model"
+   */
+  models?: string[]
+}
+
+export default defineNuxtModule<AiChatModuleOptions>({
+  meta: {
+    name: 'ai-chat',
+    configKey: 'aiChat'
+  },
+  defaults: {
+    enable: !!(
+      import.meta.env.AI_GATEWAY_API_KEY
+        || import.meta.env.OPENROUTER_API_KEY
+    ),
+    apiPath: '/api/ai-chat',
+    mcpPath: '/mcp',
+    model: '',
+    models: []
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+
+    nuxt.options.runtimeConfig.public.aiChat = {
+      enable: options.enable!,
+      apiPath: options.apiPath!,
+      model: options.model!,
+      models: options.models!
+    }
+    nuxt.options.runtimeConfig.aiChat = {
+      mcpPath: options.mcpPath!
+    }
+
+    if (!options.enable) {
+      console.info('[ai-chat] Module disabled: no AI_GATEWAY_API_KEY or OPENROUTER_API_KEY found')
+    }
+
+    addComponentsDir({
+      path: resolve('runtime/components')
+    })
+
+    addImportsDir(resolve('runtime/composables'))
+
+    const routePath = options.apiPath!.replace(/^\//, '')
+    addServerHandler({
+      route: `/${routePath}`,
+      handler: resolve('./runtime/server/api/search')
+    })
+  }
+})
+
+declare module 'nuxt/schema' {
+  interface PublicRuntimeConfig {
+    aiChat: {
+      enable: boolean
+      apiPath: string
+      model: string
+      models: string[]
+    }
+  }
+  interface RuntimeConfig {
+    aiChat: {
+      mcpPath: string
+    }
+  }
+}

package/modules/ai-chat/runtime/components/AiChat.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const { tooltipText = '向 AI 提问' } = defineProps<{
+  /**
+   * 鼠标悬停时的提示文本
+   * @defaultValue 向 AI 提问
+   */
+  tooltipText?: string
+}>()
+
+const { toggle } = useAIChat()
+</script>
+
+<template>
+  <UTooltip :text="tooltipText">
+    <UButton
+      icon="i-lucide-sparkles"
+      variant="ghost"
+      class="rounded-full"
+      @click="toggle"
+    />
+  </UTooltip>
+</template>

package/modules/ai-chat/runtime/components/AiChatFloatingInput.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { sleep } from '@movk/core'
+import { AnimatePresence, motion } from 'motion-v'
+
+const { open, isOpen } = useAIChat()
+const input = ref('')
+const isVisible = ref(true)
+const inputRef = ref<{ inputRef: HTMLInputElement } | null>(null)
+
+function handleSubmit() {
+  if (!input.value.trim()) return
+
+  const message = input.value
+  isVisible.value = false
+
+  sleep(200).then(() => {
+    open(message, true)
+    input.value = ''
+    isVisible.value = true
+  })
+}
+
+defineShortcuts({
+  meta_i: {
+    usingInput: true,
+    handler: () => {
+      inputRef.value?.inputRef?.focus()
+    }
+  },
+  escape: {
+    usingInput: true,
+    handler: () => {
+      inputRef.value?.inputRef?.blur()
+    }
+  }
+})
+</script>
+
+<template>
+  <AnimatePresence>
+    <motion.div
+      v-if="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"
+    >
+      <UForm @submit="handleSubmit">
+        <UInput
+          ref="inputRef"
+          v-model="input"
+          placeholder="输入你的问题..."
+          size="lg"
+          :ui="{
+            root: 'w-72 py-0.5 focus-within:w-96 transition-all duration-300 ease-out',
+            base: 'bg-default/80 backdrop-blur-xl shadow-lg',
+            trailing: 'pe-2'
+          }"
+          @keydown.enter.exact.prevent="handleSubmit"
+        >
+          <template #trailing>
+            <div class="flex items-center gap-2">
+              <div class="hidden sm:!flex items-center gap-1">
+                <UKbd value="meta" />
+                <UKbd value="I" />
+              </div>
+
+              <UButton
+                type="submit"
+                icon="i-lucide-arrow-up"
+                color="primary"
+                size="xs"
+                :disabled="!input.trim()"
+                class="rounded-lg"
+              />
+            </div>
+          </template>
+        </UInput>
+      </UForm>
+    </motion.div>
+  </AnimatePresence>
+</template>

package/modules/ai-chat/runtime/components/AiChatModelSelect.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { model, models, formatModelName, getModelIcon } = useModels()
+
+const items = computed(() => models.map(model => ({
+  label: formatModelName(model),
+  value: model,
+  icon: getModelIcon(model)
+})))
+</script>
+
+<template>
+  <USelectMenu
+    v-model="model"
+    :items="items"
+    size="sm"
+    :icon="getModelIcon(model)"
+    variant="ghost"
+    value-key="value"
+    class="hover:bg-default focus:bg-default data-[state=open]:bg-default"
+    :ui="{
+      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+    }"
+  />
+</template>

package/modules/ai-chat/runtime/components/AiChatPreStream.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ShikiCachedRenderer } from 'shiki-stream/vue'
+
+const colorMode = useColorMode()
+const highlighter = await useHighlighter()
+const props = defineProps<{
+  /**
+   * 要高亮显示的代码内容
+   */
+  code: string
+  /**
+   * 代码语言（如 'vue'、'javascript'、'typescript'）
+   */
+  language: string
+  /**
+   * 自定义 CSS 类名
+   */
+  class?: string
+  /**
+   * 代码块元数据
+   */
+  meta?: string
+}>()
+
+const trimmedCode = computed(() => {
+  return props.code.trim().replace(/`+$/, '')
+})
+
+const lang = computed(() => {
+  switch (props.language) {
+    case 'vue':
+      return 'vue'
+    case 'javascript':
+      return 'js'
+    case 'typescript':
+      return 'ts'
+    case 'css':
+      return 'css'
+    default:
+      return props.language
+  }
+})
+const key = computed(() => {
+  return `${lang.value}-${colorMode.value}`
+})
+</script>
+
+<template>
+  <ProsePre v-bind="props">
+    <ShikiCachedRenderer
+      :key="key"
+      :highlighter="highlighter"
+      :code="trimmedCode"
+      :lang="lang"
+      :theme="colorMode.value === 'dark' ? 'material-theme-palenight' : 'material-theme-lighter'"
+    />
+  </ProsePre>
+</template>

package/modules/ai-chat/runtime/components/AiChatReasoning.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const { isStreaming = false } = defineProps<{
+  /**
+   * 思考过程的文本内容
+   */
+  text: string
+  /**
+   * 是否正在流式接收思考内容
+   * @defaultValue false
+   */
+  isStreaming?: boolean
+}>()
+
+const open = ref(false)
+const { ui } = useAppConfig()
+
+watch(() => isStreaming, () => {
+  open.value = isStreaming
+}, { immediate: true })
+
+function cleanMarkdown(text: string): string {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, '$1') // Remove bold
+    .replace(/\*(.+?)\*/g, '$1') // Remove italic
+    .replace(/`(.+?)`/g, '$1') // Remove inline code
+    .replace(/^#+\s+/gm, '') // Remove headers
+}
+</script>
+
+<template>
+  <UCollapsible v-model:open="open" class="flex flex-col gap-1 my-5">
+    <UButton
+      class="p-0 group"
+      color="neutral"
+      variant="link"
+      :trailing-icon="ui.icons.chevronDown"
+      :ui="{
+        trailingIcon: text.length > 0 ? 'group-data-[state=open]:rotate-180 transition-transform duration-200' : 'hidden'
+      }"
+      :label="isStreaming ? '思考中...' : '思考过程'"
+    />
+
+    <template #content>
+      <div v-for="(value, index) in cleanMarkdown(text).split('\n').filter(Boolean)" :key="index">
+        <span class="whitespace-pre-wrap text-sm text-muted font-normal">{{ value }}</span>
+      </div>
+    </template>
+  </UCollapsible>
+</template>

package/modules/ai-chat/runtime/components/AiChatSlideover.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { DefineComponent } from 'vue'
+import { Chat } from '@ai-sdk/vue'
+import { DefaultChatTransport } from 'ai'
+import AiChatPreStream from './AiChatPreStream.vue'
+import type { FaqCategory } from './AiChatSlideoverFaq.vue'
+
+const {
+  title = 'AI 助手',
+  description = ' ',
+  placeholder = '输入你的问题...',
+  faqQuestions = []
+} = defineProps<{
+  /**
+   * 标题栏显示的标题
+   * @defaultValue AI 助手
+   */
+  title?: string
+  /**
+   * 标题栏显示的描述
+   * @defaultValue ' '
+   */
+  description?: string
+  /**
+   * 输入框占位符文本
+   * @defaultValue 输入你的问题...
+   */
+  placeholder?: string
+  /**
+   * 聊天为空时显示的常见问题分类
+   * @defaultValue []
+   */
+  faqQuestions?: FaqCategory[]
+}>()
+
+const components = {
+  pre: AiChatPreStream as unknown as DefineComponent
+}
+
+const { messages, isOpen, pendingMessage, clearPending } = useAIChat()
+const { apiPath } = useRuntimeConfig().public.aiChat
+
+const { getToolLabel } = useTools()
+const { model } = useModels()
+
+const input = ref('')
+
+watch(pendingMessage, (message) => {
+  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) => {
+  if (newMessages.length === 0 && chat.messages.length > 0) {
+    chat.messages.length = 0
+  }
+}, { deep: true })
+
+const toast = useToast()
+const lastMessage = computed(() => chat.messages.at(-1))
+
+const chat = new Chat({
+  messages: messages.value,
+  transport: new DefaultChatTransport({
+    api: apiPath,
+    body: () => ({ model: model.value })
+  }),
+  onError(error) {
+    const { message } = typeof error.message === 'string' && error.message[0] === '{' ? JSON.parse(error.message) : error
+    toast.add({
+      description: message,
+      icon: 'i-lucide-circle-alert',
+      color: 'error',
+      duration: 0
+    })
+  },
+  onFinish: () => {
+    messages.value = chat.messages
+  }
+})
+
+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>
+  <USlideover
+    v-model:open="isOpen"
+    :description="description"
+    :close="{ size: 'sm' }"
+    :ui="{
+      body: 'flex p-4!',
+      title: 'flex w-100 pr-6',
+      overlay: 'bg-default/60 backdrop-blur-sm',
+      content: 'w-full sm:max-w-md bg-default/95 backdrop-blur-xl shadow-2xl'
+    }"
+  >
+    <template #title>
+      <div class="flex items-center gap-2 flex-1">
+        <UBadge icon="i-lucide-sparkles" variant="soft" square />
+        <span class="font-medium text-highlighted">{{ title }}</span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <UTooltip v-if="chat.messages.length > 0" text="清空聊天">
+          <UButton
+            icon="i-lucide-trash-2"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            @click="resetChat"
+          />
+        </UTooltip>
+      </div>
+    </template>
+
+    <template #body>
+      <UChatPalette class="flex-1" :ui="{ prompt: 'border-0 px-2.5' }">
+        <UChatMessages
+          v-if="chat.messages.length > 0"
+          should-auto-scroll
+          :messages="chat.messages"
+          compact
+          :status="chat.status"
+          :user="{ ui: { container: 'pb-2', content: 'text-sm' } }"
+          :ui="{ indicator: '*:bg-accented' }"
+        >
+          <template #content="{ message }">
+            <div class="flex flex-col gap-2">
+              <template
+                v-for="(part, index) in message.parts"
+                :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
+              >
+                <AiChatReasoning v-if="part.type === 'reasoning'" :text="part.text" :is-streaming="part.state !== 'done'" />
+                <MDCCached
+                  v-else-if="part.type === 'text'"
+                  :value="part.text"
+                  :cache-key="`${message.id}-${index}`"
+                  :components="components"
+                  :parser-options="{ highlight: false }"
+                  class="*:first:mt-0 *:last:mb-0"
+                />
+                <template v-else-if="part.type === 'data-tool-calls'">
+                  <AiChatToolCall
+                    v-for="tool in (part as any).data.tools"
+                    :key="tool.toolCallId"
+                    :text="getToolLabel(tool.toolName, tool.input)"
+                    :is-loading="false"
+                  />
+                </template>
+              </template>
+              <UButton
+                v-if="chat.status === 'streaming' && message.id === lastMessage?.id"
+                class="px-0"
+                color="neutral"
+                variant="link"
+                size="sm"
+                label="Loading..."
+                loading
+                loading-icon="i-lucide-loader"
+              />
+            </div>
+          </template>
+        </UChatMessages>
+        <div v-else class="flex-1 overflow-y-auto px-4 py-4">
+          <p class="text-sm font-medium text-muted mb-4">
+            FAQ 建议
+          </p>
+          <AiChatSlideoverFaq :faq-questions="faqQuestions" @ask-question="askQuestion" />
+        </div>
+        <template #prompt>
+          <UChatPrompt
+            v-model="input"
+            :error="chat.error"
+            :placeholder="placeholder"
+            variant="subtle"
+            class="[view-transition-name:chat-prompt]"
+            :ui="{ base: 'px-1.5 text-sm' }"
+            @submit="handleSubmit"
+          >
+            <template #footer>
+              <div class="flex items-center gap-1">
+                <AiChatModelSelect v-model="model" />
+                <div class="flex gap-1 justify-between items-center px-1 text-xs text-dimmed">
+                  换行
+                  <UKbd value="shift" />
+                  <UKbd value="enter" />
+                </div>
+              </div>
+
+              <UChatPromptSubmit
+                :status="chat.status"
+                color="neutral"
+                size="sm"
+                @stop="chat.stop()"
+                @reload="chat.regenerate()"
+              />
+            </template>
+          </UChatPrompt>
+        </template>
+      </UChatPalette>
+    </template>
+  </USlideover>
+</template>

package/modules/ai-chat/runtime/components/AiChatSlideoverFaq.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+export interface FaqCategory {
+  category: string
+  items: string[]
+}
+
+defineProps<{
+  /**
+   * 聊天为空时显示的常见问题分类
+   */
+  faqQuestions: FaqCategory[]
+}>()
+
+defineEmits<{
+  (e: 'ask-question', question: string): void
+}>()
+</script>
+
+<template>
+  <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 text-dimmed uppercase tracking-wide">
+        {{ category.category }}
+      </h4>
+      <div class="flex flex-col">
+        <button
+          v-for="question in category.items"
+          :key="question"
+          class="text-left text-sm text-muted hover:text-highlighted py-1.5 transition-colors"
+          @click="$emit('ask-question', question)"
+        >
+          {{ question }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/modules/ai-chat/runtime/components/AiChatToolCall.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { motion } from 'motion-v'
+
+defineProps<{
+  /**
+   * 工具调用的标签文本
+   */
+  text: string
+  /**
+   * 为 true 时显示加载旋转圈
+   * @defaultValue false
+   */
+  isLoading?: boolean
+}>()
+</script>
+
+<template>
+  <motion.div
+    :initial="{ opacity: 0, y: 4 }"
+    :animate="{ opacity: 1, y: 0 }"
+    :transition="{ duration: 0.2 }"
+    class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-elevated/50 border border-default text-xs text-muted"
+  >
+    <UIcon
+      :name="isLoading ? 'i-lucide-loader-circle' : 'i-lucide-file-text'"
+      :class="[isLoading && 'animate-spin']"
+      class="size-4 shrink-0 text-muted"
+    />
+    <span class="truncate">{{ text }}</span>
+  </motion.div>
+</template>