docs(search): move ai assistant at the top

Author: benjamincanac

docs/app/components/search/Search.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { UIMessage } from 'ai'
 import type { ContentNavigationItem } from '@nuxt/content'
 
 interface ContentSearchFile {
@@ -15,46 +14,11 @@ defineProps<{
   navigation?: ContentNavigationItem[]
 }>()
 
-const chat = ref(false)
-const fullscreen = ref(false)
-const searchTerm = ref('')
-const messages = ref<UIMessage[]>([])
-
-const { frameworks } = useFrameworks()
-const { links } = useSearch()
-
-const groups = computed(() => [{
-  id: 'ai',
-  label: 'Assistant',
-  ignoreFilter: true,
-  items: [{
-    label: 'Ask Nuxt AI',
-    icon: 'i-lucide-bot',
-    ui: {
-      itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
-    },
-    onSelect: (e: any) => {
-      e.preventDefault()
-
-      messages.value = searchTerm.value
-        ? [{
-            id: '1',
-            role: 'user',
-            parts: [{ type: 'text', text: searchTerm.value }]
-          }]
-        : []
-
-      chat.value = true
-    }
-  }]
-}, {
-  id: 'framework',
-  label: 'Framework',
-  items: frameworks.value
-}])
+const { links, groups, fullscreen, chat, searchTerm, messages } = useSearch()
 
 function onClose() {
   chat.value = false
+
   fullscreen.value = false
 }
 </script>

docs/app/components/search/SearchChat.vue

@@ -98,13 +98,14 @@ const getCachedToolMessage = useMemoize((state: State, toolName: string, input:
 <template>
   <UChatPalette>
     <UChatMessages
+      should-auto-scroll
       :messages="chat.messages"
       :status="chat.status"
       :user="{ side: 'left', variant: 'naked', icon: 'i-lucide-user' }"
       :assistant="{ icon: 'i-lucide-bot' }"
     >
       <template #content="{ message }">
-        <template v-for="(part, index) in message.parts" :key="`${message.id}-${index}`">
+        <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'"
             :value="part.text"

docs/app/composables/useSearch.ts

@@ -1,7 +1,41 @@
+import type { UIMessage } from 'ai'
+
 export function useSearch() {
   const route = useRoute()
+  const { frameworks } = useFrameworks()
+
+  const chat = ref(false)
+  const fullscreen = ref(false)
+  const searchTerm = ref('')
+  const messages = ref<UIMessage[]>([])
+
+  function onSelect(e: any) {
+    e.preventDefault()
 
-  const links = computed(() => [{
+    messages.value = searchTerm.value
+      ? [{
+          id: '1',
+          role: 'user',
+          parts: [{ type: 'text', text: searchTerm.value }]
+        }]
+      : [{
+          id: '1',
+          role: 'assistant',
+          parts: [{ type: 'text', text: 'Hello, how can I help you today?' }]
+        }]
+
+    chat.value = true
+  }
+
+  const links = computed(() => [!searchTerm.value && {
+    label: 'Ask AI',
+    description: 'Ask the AI assistant powered by our custom MCP server for help.',
+    icon: 'i-lucide-bot',
+    ui: {
+      itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
+    },
+    onSelect
+  }, {
     label: 'Get Started',
     description: 'Learn how to get started with Nuxt UI.',
     icon: 'i-lucide-square-play',
@@ -61,9 +95,34 @@ export function useSearch() {
     icon: 'i-simple-icons-github',
     to: 'https://github.com/nuxt/ui/releases',
     target: '_blank'
+  }].filter(link => !!link))
+
+  const groups = computed(() => [{
+    id: 'ai',
+    label: 'AI',
+    ignoreFilter: true,
+    items: searchTerm.value
+      ? [{
+          label: `Ask AI for “${searchTerm.value}”`,
+          icon: 'i-lucide-bot',
+          ui: {
+            itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
+          },
+          onSelect
+        }]
+      : []
+  }, {
+    id: 'framework',
+    label: 'Framework',
+    items: frameworks.value
   }])
 
   return {
-    links
+    links,
+    groups,
+    chat,
+    fullscreen,
+    searchTerm,
+    messages
   }
 }

playgrounds/nuxt/app/pages/chat.vue

@@ -47,16 +47,33 @@ function onSubmit() {
       :spacing-offset="48"
     >
       <template #content="{ message }">
-        <template v-for="(part, index) in message.parts" :key="`${message.id}-${index}`">
-          <MDC v-if="part.type === 'text'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
-          <p v-else-if="part.type === 'reasoning'" class="text-sm text-muted my-5">
+        <template
+          v-for="(part, index) in message.parts"
+          :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
+        >
+          <MDC
+            v-if="part.type === 'text'"
+            :value="part.text"
+            :cache-key="`${message.id}-${index}`"
+            class="*:first:mt-0 *:last:mb-0"
+          />
+          <p
+            v-else-if="part.type === 'reasoning'"
+            class="text-sm text-muted my-5"
+          >
             {{ part.state === 'done' ? 'Thoughts' : 'Thinking...' }}
           </p>
         </template>
       </template>
     </UChatMessages>
 
-    <UChatPrompt v-model="input" :error="chat.error" variant="subtle" class="sticky bottom-0" @submit="onSubmit">
+    <UChatPrompt
+      v-model="input"
+      :error="chat.error"
+      variant="subtle"
+      class="sticky bottom-0"
+      @submit="onSubmit"
+    >
       <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
     </UChatPrompt>
   </div>