diff --git a/web/src/views/chat/ChatDetailView.vue b/web/src/views/chat/ChatDetailView.vue
index 86695d2..b3e57ce 100644
--- a/web/src/views/chat/ChatDetailView.vue
+++ b/web/src/views/chat/ChatDetailView.vue
@@ -143,16 +143,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { NButton, NInput, NPopconfirm, NIcon } from 'naive-ui'
 import { TrashOutline } from '@vicons/ionicons5'
 
 import AppShell from '@/layouts/AppShell.vue'
 import { useChatStore } from '@/stores/chat'
-import MessageBubble from './components/MessageBubble.vue'
+const MessageBubble = defineAsyncComponent(() => import('./components/MessageBubble.vue'))
 import AttachmentUploader from './components/AttachmentUploader.vue'
-import ConversationCreateModal from './ConversationCreateModal.vue'
+const ConversationCreateModal = defineAsyncComponent(() => import('./ConversationCreateModal.vue'))
 import { modelsApi } from '@/api/models'
 import type { LLMModel, ModelCapabilities } from '@/api/llmAdmin'