docus 5.10.1 → 5.12.0

package/app/app.config.ts

@@ -3,6 +3,9 @@ export default defineAppConfig({
     locale: 'en',
     colorMode: '',
   },
+  search: {
+    fts: false,
+  },
   ui: {
     colors: {
       primary: 'emerald',
@@ -17,7 +20,7 @@ export default defineAppConfig({
     },
     contentToc: {
       defaultVariants: {
-        highlight: true,
+        highlightVariant: 'circuit',
       },
     },
     contentNavigation: {

package/app/app.vue

@@ -2,15 +2,15 @@
 import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
 import * as nuxtUiLocales from '@nuxt/ui/locale'
 import { transformNavigation } from './utils/navigation'
-import { useDocusColorMode } from './composables/useDocusColorMode'
+import { useDocusShortcuts } from './composables/useDocusShortcuts'
 import { useSubNavigation } from './composables/useSubNavigation'
 
 const appConfig = useAppConfig()
 const { seo } = appConfig
-const { forced: forcedColorMode } = useDocusColorMode()
+useDocusShortcuts()
 const site = useSiteConfig()
 const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
-const { isEnabled: isAssistantEnabled, panelWidth: assistantPanelWidth, shouldPushContent } = useAssistant()
+const { isEnabled: isAssistantEnabled } = useAssistant()
 
 const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
 const lang = computed(() => nuxtUiLocale.value.code)
@@ -53,10 +53,6 @@ const { data: navigation } = await useAsyncData(() => `navigation_${collectionNa
   transform: (data: ContentNavigationItem[]) => transformNavigation(data, isEnabled.value, locale.value),
   watch: [locale],
 })
-const { data: files } = useLazyAsyncData(`search_${collectionName.value}`, () => queryCollectionSearchSections(collectionName.value as keyof PageCollections), {
-  server: false,
-  watch: [locale],
-})
 
 provide('navigation', navigation)
 
@@ -67,28 +63,27 @@ const { subNavigationMode } = useSubNavigation(navigation)
   <UApp :locale="nuxtUiLocale">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
-    <div
-      :class="['transition-[margin-right] duration-200 ease-linear will-change-[margin-right]', { 'docus-sub-header': subNavigationMode === 'header' }]"
-      :style="{ marginRight: shouldPushContent ? `${assistantPanelWidth}px` : '0' }"
-    >
-      <AppHeader v-if="$route.meta.header !== false" />
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-      <AppFooter v-if="$route.meta.footer !== false" />
-    </div>
+    <div class="flex">
+      <div
+        class="flex-1 min-w-0"
+        :class="{ 'docus-sub-header': subNavigationMode === 'header' }"
+      >
+        <AppHeader v-if="$route.meta.header !== false" />
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+        <AppFooter v-if="$route.meta.footer !== false" />
 
-    <ClientOnly>
-      <LazyUContentSearch
-        :files="files"
-        :navigation="navigation"
-        :color-mode="!forcedColorMode"
-      />
-      <template v-if="isAssistantEnabled">
+        <ClientOnly>
+          <AppSearch :navigation="navigation" />
+          <LazyAssistantFloatingInput v-if="isAssistantEnabled" />
+        </ClientOnly>
+      </div>
+
+      <ClientOnly v-if="isAssistantEnabled">
         <LazyAssistantPanel />
-        <LazyAssistantFloatingInput />
-      </template>
-    </ClientOnly>
+      </ClientOnly>
+    </div>
   </UApp>
 </template>
 

package/app/components/app/AppSearch.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
+
+const props = defineProps<{
+  navigation?: ContentNavigationItem[]
+}>()
+
+const appConfig = useAppConfig()
+const { forced: forcedColorMode } = useDocusColorMode()
+const { locale, isEnabled } = useDocusI18n()
+
+const collectionName = computed(() => (isEnabled.value ? `docs_${locale.value}` : 'docs') as keyof PageCollections)
+const useFts = appConfig.search.fts
+
+const { data: files } = useFts
+  ? { data: ref(null) }
+  : useLazyAsyncData(`search_${collectionName.value}`, () => queryCollectionSearchSections(collectionName.value), {
+      server: false,
+      watch: [locale],
+    })
+
+const { search, status: searchStatus, init } = useFts
+  ? useSearchCollection(collectionName, { immediate: false, ignoredTags: ['style'] })
+  : { search: undefined, status: ref(undefined), init: () => {} }
+
+if (useFts) {
+  const { open } = useContentSearch()
+  watch(open, (value) => {
+    if (value && searchStatus.value === 'idle') {
+      init()
+    }
+  })
+}
+
+const links = computed(() => useFts
+  ? props.navigation?.filter(item => item.children?.length).map(item => ({
+      label: item.title,
+      icon: item.icon,
+      to: item.children![0]!.path,
+    }))
+  : undefined,
+)
+</script>
+
+<template>
+  <LazyUContentSearch
+    :files="files"
+    :search="search"
+    :search-status="searchStatus"
+    :links="links"
+    :navigation="navigation"
+    :color-mode="!forcedColorMode"
+  />
+</template>

package/app/components/docs/DocsAsideRight.vue

@@ -8,7 +8,6 @@ const props = defineProps<{
 
 const links = computed(() => props.page?.body?.toc?.links || [])
 
-const { shouldPushContent: shouldHideToc } = useAssistant()
 const { subNavigationMode } = useSubNavigation()
 const appConfig = useAppConfig()
 const { t } = useDocusI18n()
@@ -19,7 +18,7 @@ const contentTocVariants = useUIConfig('contentToc')
 <template>
   <div>
     <UContentToc
-      v-if="links.length && !shouldHideToc"
+      v-if="links.length"
       :highlight="contentTocVariants.highlight ?? true"
       :highlight-color="contentTocVariants.highlightColor"
       :highlight-variant="contentTocVariants.highlightVariant"

package/app/components/docs/DocsAsideRightBottom.vue

@@ -4,10 +4,10 @@ const route = useRoute()
 const pageUrl = route.path
 const appConfig = useAppConfig()
 const { t } = useDocusI18n()
-const { isEnabled, open } = useAssistant()
+const { isEnabled, isStudioExpanded, open } = useAssistant()
 
 const showExplainWithAi = computed(() => {
-  return isEnabled.value && appConfig.assistant?.explainWithAi !== false
+  return isEnabled.value && appConfig.assistant?.explainWithAi !== false && !isStudioExpanded.value
 })
 
 const explainIcon = computed(() => appConfig.assistant?.icons?.explain || 'i-lucide-brain')

package/app/components/docs/DocsPageHeaderLinks.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
+import { joinURL, withTrailingSlash } from 'ufo'
 import { useRuntimeConfig } from '#imports'
 
 const route = useRoute()
 const toast = useToast()
-const appBaseURL = useRuntimeConfig().app?.baseURL || '/'
+const runtimeConfig = useRuntimeConfig()
+const appBaseURL = runtimeConfig.app?.baseURL || '/'
+const mcpRoute = (runtimeConfig.public.mcp as { route?: string } | undefined)?.route || '/mcp'
 
 const { copy, copied } = useClipboard()
 const { t } = useDocusI18n()
 
-const markdownLink = computed(() => `${window?.location?.origin}${appBaseURL}raw${route.path}.md`)
-const items = [
+const markdownLink = computed(() => `${window?.location?.origin}${withTrailingSlash(appBaseURL)}raw${route.path}.md`)
+const mcpServerUrl = computed(() => `${window?.location?.origin}${joinURL(appBaseURL, mcpRoute)}`)
+const mcpDeeplink = computed(() => `${window?.location?.origin}${joinURL(appBaseURL, mcpRoute, 'deeplink')}`)
+const items = computed(() => [
   [{
     label: t('docs.copy.link'),
     icon: 'i-lucide-link',
@@ -41,7 +46,7 @@ const items = [
       label: 'Copy MCP Server URL',
       icon: 'i-lucide-link',
       onSelect() {
-        copy(`${window?.location?.origin}${appBaseURL}mcp`)
+        copy(mcpServerUrl.value)
         toast.add({
           title: 'Copied to clipboard',
           icon: 'i-lucide-check-circle',
@@ -52,10 +57,10 @@ const items = [
       label: 'Add MCP Server',
       icon: 'i-simple-icons:cursor',
       target: '_blank',
-      to: `/mcp/deeplink`,
+      to: mcpDeeplink.value,
     },
   ],
-]
+])
 
 async function copyPage() {
   const page = await $fetch<string>(`/raw${route.path}.md`)

package/app/composables/useDocusShortcuts.ts

@@ -0,0 +1,24 @@
+import { useDocusColorMode } from './useDocusColorMode'
+
+export function useDocusShortcuts() {
+  const appConfig = useAppConfig()
+  const { forced: forcedColorMode } = useDocusColorMode()
+  const colorMode = useColorMode()
+  const toggleColorModeShortcut = computed(() => appConfig.docus?.shortcuts?.toggleColorMode ?? 'd')
+
+  const shortcuts = computed(() => {
+    const key = toggleColorModeShortcut.value
+    if (!key) return {}
+
+    return {
+      [key]: {
+        handler: () => {
+          if (forcedColorMode) return
+          colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+        },
+      },
+    }
+  })
+
+  defineShortcuts(shortcuts)
+}

package/app/composables/useUIConfig.ts

@@ -24,7 +24,7 @@ interface UIConfigMap {
 export function useUIConfig<K extends keyof UIConfigMap>(componentName: K): ComputedRef<UIConfigMap[K]> {
   const appConfig = useAppConfig()
   return computed(() => {
-    const ui = appConfig.ui as Record<string, Record<string, Record<string, unknown>>>
+    const ui = appConfig.ui
     return (ui?.[componentName]?.defaultVariants || {}) as UIConfigMap[K]
   })
 }

package/app/error.vue

@@ -3,13 +3,11 @@ import type { NuxtError } from '#app'
 import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
 import * as nuxtUiLocales from '@nuxt/ui/locale'
 import { transformNavigation } from './utils/navigation'
-import { useDocusColorMode } from './composables/useDocusColorMode'
 
 const props = defineProps<{
   error: NuxtError
 }>()
 
-const { forced: forcedColorMode } = useDocusColorMode()
 const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
 
 const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
@@ -53,9 +51,6 @@ const { data: navigation } = await useAsyncData(`navigation_${collectionName.val
   transform: (data: ContentNavigationItem[]) => transformNavigation(data, isEnabled.value, locale.value),
   watch: [locale],
 })
-const { data: files } = useLazyAsyncData(`search_${collectionName.value}`, () => queryCollectionSearchSections(collectionName.value as keyof PageCollections), {
-  server: false,
-})
 
 provide('navigation', navigation)
 </script>
@@ -69,11 +64,7 @@ provide('navigation', navigation)
     <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch
-        :files="files"
-        :navigation="navigation"
-        :color-mode="!forcedColorMode"
-      />
+      <AppSearch :navigation="navigation" />
     </ClientOnly>
   </UApp>
 </template>

package/app/pages/[[lang]]/[...slug].vue

@@ -9,10 +9,9 @@ definePageMeta({
 
 const route = useRoute()
 const { locale, isEnabled, t } = useDocusI18n()
+const { isOpen } = useAssistant()
 const appConfig = useAppConfig()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-const { shouldPushContent: shouldHideToc } = useAssistant()
-
 const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
 
 const [{ data: page }, { data: surround }] = await Promise.all([
@@ -75,7 +74,7 @@ addPrerenderPath(`/raw${route.path}.md`)
 <template>
   <UPage
     v-if="page"
-    :key="`page-${shouldHideToc}`"
+    :ui="isOpen ? { center: 'lg:col-span-10' } : undefined"
   >
     <UPageHeader
       :title="page.title"
@@ -135,7 +134,10 @@ addPrerenderPath(`/raw${route.path}.md`)
       <UContentSurround :surround="surround" />
     </UPageBody>
 
-    <template #right>
+    <template
+      v-if="!isOpen"
+      #right
+    >
       <DocsAsideRight
         :page="page"
       />

package/app/plugins/i18n.ts

@@ -1,7 +1,7 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import { consola } from 'consola'
 
-const log = consola.withTag('Docus')
+const log = consola.withTag('docus')
 
 // Lazy import functions for locale files (bundled but not eagerly loaded)
 const localeFiles = import.meta.glob<{ default: Record<string, unknown> }>('../../i18n/locales/*.json')

package/app/types/index.d.ts

@@ -6,6 +6,20 @@ declare module 'nuxt/schema' {
   interface AppConfig {
     docus: {
       locale: string
+      /**
+       * Force a specific color mode. Leave empty for system preference with toggle.
+       */
+      colorMode?: '' | 'light' | 'dark'
+      /**
+       * Keyboard shortcuts configuration.
+       */
+      shortcuts?: {
+        /**
+         * Shortcut to toggle light and dark mode.
+         * @default 'd'
+         */
+        toggleColorMode?: string
+      }
     }
     seo: {
       titleTemplate: string
@@ -48,6 +62,14 @@ declare module 'nuxt/schema' {
       branch: string
       rootDir?: string
     } | false
+    search: {
+      /**
+       * Use SQLite FTS5 full-text search instead of Fuse.js.
+       * Requires @nuxt/content v3.14+.
+       * @default false
+       */
+      fts: boolean
+    }
     assistant?: {
       /**
        * Show the floating input at the bottom of documentation pages.

package/i18n/locales/pl.json

@@ -34,7 +34,7 @@
     "copyWordmarkFailed": "Nie udało się skopiować wordmarku"
   },
   "assistant": {
-    "title": "Zapytaj SI",
+    "title": "Zapytaj AI",
     "placeholder": "Zadaj pytanie...",
     "tooltip": "Zadaj AI pytanie",
     "tryAsking": "Spróbuj zadać pytanie",
@@ -49,7 +49,7 @@
     "faq": "Często zadawane pytania",
     "chatCleared": "Czat został wyczyszczony po odświeżeniu",
     "lineBreak": "Podział wiersza",
-    "explainWithAi": "Wyjaśnij za pomocą sztucznej inteligencji",
+    "explainWithAi": "Wyjaśnij z AI",
     "toolListPages": "Wymienione strony dokumentacji",
     "toolReadPage": "Czytaj",
     "loading": {

package/modules/assistant/index.ts

@@ -21,7 +21,7 @@ export interface AssistantModuleOptions {
   model?: string
 }
 
-const log = logger.withTag('Docus')
+const log = logger.withTag('docus')
 
 const defaults: Required<AssistantModuleOptions> = {
   apiPath: '/__docus__/assistant',
@@ -33,6 +33,9 @@ export default defineNuxtModule<AssistantModuleOptions>({
   meta: {
     name: 'assistant',
   },
+  moduleDependencies: {
+    '@comark/nuxt': {},
+  },
   setup(_options, nuxt) {
     const legacyOptions = nuxt.options.assistant
     if (legacyOptions && Object.keys(legacyOptions).length > 0) {
@@ -63,8 +66,6 @@ export default defineNuxtModule<AssistantModuleOptions>({
       'AssistantChat',
       'AssistantPanel',
       'AssistantFloatingInput',
-      'AssistantLoading',
-      'AssistantMatrix',
     ]
 
     components.forEach(name =>
@@ -77,7 +78,9 @@ export default defineNuxtModule<AssistantModuleOptions>({
     )
 
     if (!hasAiGatewayAuth) {
-      log.warn('AI assistant disabled: neither AI_GATEWAY_API_KEY nor VERCEL_OIDC_TOKEN found')
+      nuxt.hook('modules:done', () => {
+        log.warn('AI assistant disabled: neither `AI_GATEWAY_API_KEY` nor `VERCEL_OIDC_TOKEN` found')
+      })
       return
     }
 
@@ -86,7 +89,12 @@ export default defineNuxtModule<AssistantModuleOptions>({
       model: options.model,
     }
 
-    const routePath = options.apiPath.replace(/^\//, '')
+    addComponent({
+      name: 'AssistantComark',
+      filePath: resolve('./runtime/components/AssistantComark'),
+    })
+
+    const routePath = options.apiPath!.replace(/^\//, '')
     addServerHandler({
       route: `/${routePath}`,
       handler: resolve('./runtime/server/api/search'),

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

@@ -2,7 +2,7 @@
 import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
 
 const appConfig = useAppConfig()
-const { toggle } = useAssistant()
+const { toggle, isStudioExpanded } = useAssistant()
 const { t } = useDocusI18n()
 
 const tooltipText = computed(() => t('assistant.tooltip'))
@@ -10,7 +10,10 @@ const triggerIcon = computed(() => appConfig.assistant?.icons?.trigger || 'i-cus
 </script>
 
 <template>
-  <UTooltip :text="tooltipText">
+  <UTooltip
+    v-if="!isStudioExpanded"
+    :text="tooltipText"
+  >
     <UButton
       :icon="triggerIcon"
       color="neutral"

package/modules/assistant/runtime/components/AssistantComark.ts

@@ -0,0 +1,9 @@
+import highlight from '@comark/nuxt/plugins/highlight'
+
+export default defineComarkComponent({
+  name: 'AssistantComark',
+  plugins: [
+    highlight(),
+  ],
+  class: '*:first:mt-0 *:last:mb-0',
+})

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

@@ -4,7 +4,7 @@ import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
 
 const route = useRoute()
 const appConfig = useAppConfig()
-const { open, isOpen } = useAssistant()
+const { open, isOpen, isStudioExpanded } = useAssistant()
 const { t } = useDocusI18n()
 const input = ref('')
 const isVisible = ref(true)
@@ -42,31 +42,29 @@ const shortcuts = computed(() => ({
       inputRef.value?.inputRef?.focus()
     },
   },
-  escape: {
-    usingInput: true,
-    handler: () => {
-      inputRef.value?.inputRef?.blur()
-    },
-  },
 }))
 
 defineShortcuts(shortcuts)
+
+function onEscape() {
+  inputRef.value?.inputRef?.blur()
+}
 </script>
 
 <template>
   <AnimatePresence>
     <motion.div
-      v-if="isFloatingInputEnabled && isDocsRoute && isVisible && !isOpen"
+      v-if="isFloatingInputEnabled && isDocsRoute && isVisible && !isOpen && !isStudioExpanded"
       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="pointer-events-none fixed inset-x-0 z-10 bottom-[max(1.5rem,env(safe-area-inset-bottom))] px-4 sm:px-80"
+      class="pointer-events-none fixed inset-x-0 z-10 bottom-[max(1.5rem,env(safe-area-inset-bottom))] px-4 sm:px-24"
       style="will-change: transform"
     >
       <form
-        class="pointer-events-none flex w-full justify-center"
+        class="pointer-events-none flex w-full min-w-3xs justify-center"
         @submit.prevent="handleSubmit"
       >
         <div class="pointer-events-auto w-full max-w-96">
@@ -82,6 +80,7 @@ defineShortcuts(shortcuts)
               trailing: 'pe-2',
             }"
             @keydown.enter.exact.prevent="handleSubmit"
+            @keydown.escape="onEscape"
           >
             <template #trailing>
               <div class="flex items-center gap-2">

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+const size = 4
+const dotSize = 2
+const gap = 2
+const totalDots = size * size
+
+const patterns = [
+  [[0], [1], [2], [3], [7], [11], [15], [14], [13], [12], [8], [4], [5], [6], [10], [9]],
+  [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]],
+  [[5, 6, 9, 10], [1, 4, 7, 8, 11, 14], [0, 3, 12, 15], [1, 4, 7, 8, 11, 14], [5, 6, 9, 10]],
+  [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
+  [[0], [3], [15], [12]],
+  [[5, 6, 9, 10], [1, 2, 4, 7, 8, 11, 13, 14], [0, 3, 12, 15]],
+  [[0], [1], [2], [3], [7], [6], [5], [4], [8], [9], [10], [11], [15], [14], [13], [12]],
+  [[0], [1, 4], [2, 5, 8], [3, 6, 9, 12], [7, 10, 13], [11, 14], [15]],
+]
+
+const activeDots = ref<Set<number>>(new Set())
+let patternIndex = 0
+let stepIndex = 0
+
+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 statusMessages = ['Thinking...', 'Searching...', 'Reading...', 'Analyzing...']
+const currentIndex = ref(0)
+const displayedText = ref(statusMessages[0]!)
+const chars = 'abcdefghijklmnopqrstuvwxyz'
+
+function scramble(from: string, to: string) {
+  const maxLength = Math.max(from.length, to.length)
+  let frame = 0
+  const totalFrames = 15
+
+  const step = () => {
+    frame++
+    let result = ''
+    const progress = (frame / totalFrames) * maxLength
+
+    for (let i = 0; i < maxLength; i++) {
+      if (i < progress - 2) {
+        result += to[i] || ''
+      }
+      else if (i < progress) {
+        result += chars[Math.floor(Math.random() * chars.length)]
+      }
+      else {
+        result += from[i] || ''
+      }
+    }
+
+    displayedText.value = result
+
+    if (frame < totalFrames) {
+      requestAnimationFrame(step)
+    }
+    else {
+      displayedText.value = to
+    }
+  }
+
+  requestAnimationFrame(step)
+}
+
+let matrixInterval: ReturnType<typeof setInterval> | undefined
+let textInterval: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  nextStep()
+  matrixInterval = setInterval(nextStep, 120)
+  textInterval = setInterval(() => {
+    const prev = displayedText.value
+    currentIndex.value = (currentIndex.value + 1) % statusMessages.length
+    scramble(prev, statusMessages[currentIndex.value]!)
+  }, 3500)
+})
+
+onUnmounted(() => {
+  clearInterval(matrixInterval)
+  clearInterval(textInterval)
+})
+</script>
+
+<template>
+  <div class="flex items-center text-xs text-muted overflow-hidden">
+    <div
+      class="shrink-0 mr-2 grid"
+      :style="{
+        gridTemplateColumns: `repeat(${size}, 1fr)`,
+        gap: `${gap}px`,
+        width: `${size * dotSize + (size - 1) * gap}px`,
+        height: `${size * dotSize + (size - 1) * gap}px`,
+      }"
+    >
+      <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="{ width: `${dotSize}px`, height: `${dotSize}px` }"
+      />
+    </div>
+
+    <UChatShimmer :text="displayedText" class="font-mono tracking-tight" />
+  </div>
+</template>