Merge branch 'main' of gitcode.com:git_bot/ai-fe

composables/useFetchRequest.js

-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
     }
 }

pages/index.vue

@@ -3,3 +3,26 @@
         <ICreate />
     </div>
 </template>
+<script setup>
+const { fetchRequest } = useFetchRequest()
+const query = ref('')
+const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
+const repos = ['keycloak', 'ViewUIPlus']
+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>

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

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)