| | |
| | | <template> |
| | | <div class="absolute bottom-0 left-0 right-0 top-0"> |
| | | <div class="absolute bottom-0 left-0 right-0 top-0 bg-page text-base"> |
| | | <div class="relative flex h-full w-full flex-col"> |
| | | <Header v-if="flowAgent" :flowAgent="flowAgent" :queryId="queryId" /> |
| | | <main class="relative flex h-full w-full flex-1"> |
| | | <Sidebar @dragstart="handleOnDragStart" /> |
| | | <Sidebar class="w-52" @dragstart="handleOnDragStart" /> |
| | | <div class="relative h-full flex-1 overflow-hidden" v-if="flowJson"> |
| | | <MainCanvas :flowJson="flowJson" :agentNames="agentNames" /> |
| | | <MainCanvas :flowJson="flowJson" :agentNames="agentNames" :funcNames="funcNames" :llmInfoList="llmInfoList"/> |
| | | </div> |
| | | </main> |
| | | </div> |
| | |
| | | import { computed, onMounted, ref } from 'vue'; |
| | | import Header from './components/Header.vue'; |
| | | import Sidebar from './components/Sidebar.vue'; |
| | | import { get_agent_names, get_workflow_agent_list, get_workflow_json_flow } from '/@/api/workflow'; |
| | | import { get_agent_names, get_flow_func_names, get_workflow_agent_list, get_workflow_json_flow, get_llm_info_list } from '/@/api/workflow'; |
| | | import MainCanvas from '/@/components/vue-flow/MainCanvas.vue'; |
| | | import router from '/@/router'; |
| | | |
| | |
| | | const res = await get_agent_names(); |
| | | agentNames.value = res.agents ?? []; |
| | | }; |
| | | const funcNames = ref([]); |
| | | |
| | | const getFuncNames = async () => { |
| | | const res = await get_flow_func_names(); |
| | | funcNames.value = res.funcs ?? []; |
| | | }; |
| | | |
| | | const llmInfoList = ref([]); |
| | | const getLlmInfoList = async () => { |
| | | const res = await get_llm_info_list(); |
| | | const factorys = res.factorys ?? []; |
| | | const connections = res.connections ?? []; |
| | | const logicTree = []; |
| | | factorys.forEach((factory: any) => { |
| | | logicTree.push({ |
| | | id: factory.factory_id, |
| | | name: factory.factory_name, |
| | | type:'factory', |
| | | model: factory, |
| | | children: connections.filter((connection: any) => connection.factory_id === factory.factory_id).map((item: any) => ({ |
| | | id: item.connect_id, |
| | | name: item.connect_title, |
| | | type: 'connection', |
| | | model: item, |
| | | })), |
| | | }); |
| | | }); |
| | | llmInfoList.value = logicTree; |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | onMounted(() => { |
| | | if (!queryId.value) return; |
| | | handleGetJSON(queryId.value); |
| | | getFlowAgent(); |
| | | getAgentNames(); |
| | | getFuncNames(); |
| | | getLlmInfoList(); |
| | | }); |
| | | </script> |