diff --git a/composables/useFetchRequest.js b/composables/useFetchRequest.js
index 5d873093f4568f80048d0eca491c1c3b5e0bd4ad..0531269e493201b404e16d952b782ebaeddce17e 100644
--- a/composables/useFetchRequest.js
+++ b/composables/useFetchRequest.js
@@ -1,27 +1,17 @@
-const BASE_URL = 'http://localhost:3000';
+const BASE_URL = 'https://gpu-pod656e861afe3d944d6b3ce77e-7862.node.inscode.run';
 const useFetchRequest = (baseUrl) => {
     baseUrl = baseUrl || BASE_URL;
     const config = {
         headers: {}
     };
-    const loading = ref(false);
     const fetchRequest = (url, fetchConfig) => {
         url = `${BASE_URL}${url}`;
         fetchConfig = fetchConfig || {};
         fetchConfig.method = (fetchConfig.method || 'get').toLocaleUpperCase();
-        if (!fetchConfig['Content-Type']) {
-            fetchConfig['Content-Type'] = 'application/json';
-        }
         fetchConfig = Object.assign(config, fetchConfig);
-        return $fetch(url, fetchConfig).then(async (response) => {
-            console.log(`response:`, response)
-            return response;
-        }).finally(() => {
-            loading.value = false
-        })
+        return $fetch(url, fetchConfig);
     }
     return {
-        loading,
         fetchRequest
     }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 2ae0f07811350966c3eb01cf907b0075d2de22d0..fb4290d0001003553f08564778a050aacab51f3f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,10 +24,25 @@
     </div>
 </template>
 <script setup>
+const { fetchRequest } = useFetchRequest()
 const query = ref('')
 const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
 const repos = ['keycloak', 'ViewUIPlus']
-const handleSearch = () => {
-    navigateTo(`/search/1?query=${query.value}&repo=${selectedRepo.value}`);
+const loading = ref(false);
+const handleSearch = async () => {
+    if (loading.value) return;
+    loading.value = true;
+    const result = await fetchRequest('/v1/chat/completion/create', {
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    });
+    if (result && result.data) {
+        navigateTo(`/search/${result.data.c_id}?query=${query.value}&repo=${selectedRepo.value}`);
+        nextTick(() => {
+            loading.value = false;
+        })
+    }    
 }
 </script>
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index 61dcd962a16e64468f4786b70cc3be8ffb381b89..4affa35c5ee475676980c1ab83372210958d7ebc 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -133,9 +133,11 @@
 <script setup>
 const toast = useToast()
 const route = useRoute()
+const { fetchRequest } = useFetchRequest()
 const state = reactive({
     query: route.query.query || '',
-    repo: route.query.repo || ''
+    repo: route.query.repo || '',
+    id: route.params.id
 })
 const isEditTitle = ref(false)
 const titleRef = ref(null)
@@ -170,62 +172,62 @@ const stepColor = (step) => {
 
 const data = ref([])
 
-data.value = [
-    {
-        step: 4,
-        question: 'Select组件怎样远程搜索',
-        article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
-        source: [
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            }
-        ]
-    },
-    {
-        step: 1,
-        question: 'Select组件怎样远程搜索',
-        article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
-        source: [
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            }
-        ]
-    }
-]
+// data.value = [
+//     {
+//         step: 4,
+//         question: 'Select组件怎样远程搜索',
+//         article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
+//         source: [
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             }
+//         ]
+//     },
+//     {
+//         step: 1,
+//         question: 'Select组件怎样远程搜索',
+//         article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
+//         source: [
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             }
+//         ]
+//     }
+// ]
 
 const recommendQuestions = [
     {
@@ -244,4 +246,64 @@ const handleContinueAsk = (question) => {
     if (asking.value) return;
     asking.value = true;
 }
+// 处理generate
+let generateFetchObj = null; // 用户取消操作方法
+const marked = 'data:';
+const handleFormFetchData = (fetchData) => {
+    if (fetchData === 'data:[DONE]') return;
+    fetchData = fetchData.slice(marked.length , fetchData.length);
+    let message = {};
+    try {
+        message = JSON.parse(fetchData);
+    } catch(error) {
+        console.log(error)
+    }
+    if (Object.keys(message).length === 0) return;
+    console.log(`message:`, message)
+    if (message.data.meta.type === 'answer') {
+        // step: 4,
+        // question: 'Select组件怎样远程搜索',
+        // article: 
+        const index = data.value.length === 0 ? 0 : data.value.length - 1;
+        data.value[index] = {
+            step: 4,
+            question: state.query,
+            article: message.data.choices[0].message.content
+        }
+    }
+}
+const getHistoryMessage = () => {
+    const messages = []
+    data.value.forEach(item => {
+        messages.push(...[
+            { role: 'user', content: item.question },
+            { role: 'assistant', content: item.article }
+        ])
+    })
+    return messages;
+}
+const generateFetchData = () => {
+    const { repo, id } = state;
+    const messages = getHistoryMessage();
+    messages.push({ role: 'user', content: state.query });
+    generateFetchObj = fetchRequest('/v1/chat/completions', {
+        method: 'post',
+        headers: {
+            'Accept': '*/*'
+        },
+        body: {
+            repo_path: repo,
+            c_id: id,
+            stream: true,
+            messages
+        }
+    }).then((response) => {
+        handleFormFetchData(response);
+    }).finally(() => {
+        asking.value = false;
+    })
+}
+onMounted(() => {
+    generateFetchData();
+})
 </script>
\ No newline at end of file
diff --git a/server/api/mock/[...slug].js b/server/api/mock/[...slug].js
index 51e2c61371fbeb112284ea4855dcf13ba0d78b72..ca5447bc617b5fcd030cb0a83d93e0b1ee78315d 100644
--- a/server/api/mock/[...slug].js
+++ b/server/api/mock/[...slug].js
@@ -3,7 +3,7 @@ import { createRouter, defineEventHandler, useBase } from 'h3'
 const router = createRouter()
 
 router.get('/test', defineEventHandler(() => {
-    return { data: 'Hello World' }
+    return 'data:{"message":"success","data":{"id":"c_20240516095719_bfaJkBJyg4KTwL8g","object":"chat.completion","created":1715824958,"model":"chat_qwen110b","choices":[{"index":0,"message":{"role":"assistant","content":"Hello! I\'m here to help you with any questions or tasks related to the Byzer-LLM project or its usage. Whether you need assistance with deployment, querying models, understanding the integration process, or exploring its features, feel free to ask. For instance, if you\'re looking to set up a model like `sparkdesk_chat`, run a simple inference, validate the model, or even understand how to use Python scripts for interacting with Byzer-LLM, just let me know your specific inquiry!"},"finish_reason":"stop"}],"usage":{"prompt_tokens":6653,"completion_tokens":104,"total_tokens":6757},"meta":{"type":"answer"}}}';
 }))
 
 export default useBase('/api/mock', router.handler)