chartedit

frontend/src/components/ReasoningView/index.vue

@@ -18,7 +18,8 @@
       >
         <div class="title">
           <img src="../../assets/logo.png" alt="" />
-          <span v-if="item.title">{{generateTitle(item.title =='Planner'?'角色':'模型名称')}}（{{ item.title }}）</span>
+          <span v-if="item.group_name === 'Planner'">{{generateTitle('角色')}}（{{ item.group_name }}）</span>
+          <span v-else>{{generateTitle('模型名称')}}（{{ `${item.group_name}: ${item.agent_name}` }}）</span>
           <p
             class="active_item"
             v-if="reasonStatus.index === index && reasonStatus.show"

frontend/src/components/StepsView.vue

@@ -14,7 +14,7 @@
           v-for="(key, num) in item.children"
           :key="num"
         >
-          <div v-if="key.title !== 'Planner'" class="li">
+          <div v-if="key.group_name !== 'Planner'" class="li">
             <div
               class="p-box"
               :class="{
@@ -31,7 +31,7 @@
                 src="../assets/layout/vector.png"
                 alt=""
               />
-              <span>{{ key.title }}</span>
+              <span>{{ `${key.group_name?key.group_name+':':''} ${key.agent_name}` }}</span>
             </div>
             <img
               class="next"
@@ -161,7 +161,6 @@ const toContent = (index: number, num: number) => {
           span {
             width: 100%;
             word-wrap: break-word;
-            text-align: justify;
           }
         }
         .active_item {

frontend/src/components/collapseView/index.vue

@@ -37,13 +37,13 @@
                     <img src="../../assets/chart/round-arrow.png" alt="" />
                   </div>
                 </div>
-                <div class="model-box" :class="{'chart-active': getStatus(item.title)}">
+                <div class="model-box" :class="{'chart-active': getStatus(item.group_name)}">
                 <div
                   class="chart-bg"
-                  v-if="getStatus(item.title)"
+                  v-if="getStatus(item.group_name)"
                 ></div>
                   <div class="type-box">{{ item.type }}</div>
-                  <div class="model-title">{{ item.title }}</div>
+                  <div class="model-title">{{ item.group_name }}</div>
                 </div>
               </div>
             </div>
@@ -75,14 +75,14 @@
               </div>
             </div>
             <div class="bottom-list">
-              <div class="model-box" :class="{'chart-active': getStatus(chartList[0].title)}">
+              <div class="model-box" :class="{'chart-active': getStatus(chartList[0].group_name)}">
                 <div
                   class="chart-bg"
-                  v-if="getStatus(chartList[0].title)"
+                  v-if="getStatus(chartList[0].group_name)"
                 ></div>
                 <div class="type-box">{{ chartList[0].type }}</div>
                 <div class="model-title">
-                  {{ chartList[0].title.substr(0, 4) }}
+                  {{ chartList[0].group_name.substr(0, 4) }}
                 </div>
               </div>
             </div>
@@ -110,27 +110,27 @@ const props = defineProps({
 const chartList = ref<Array<any>>([
   {
     type: "G1",
-    title: "Planner",
+    group_name: "Planner",
   },
   {
     type: "G2",
-    title: "Retrieval",
+    group_name: "Retrieval",
   },
   {
     type: "G3",
-    title: "Generate",
+    group_name: "Generate",
   },
   {
     type: "G4",
-    title: "Converter",
+    group_name: "Converter",
   },
   {
     type: "G5",
-    title: "Executor",
+    group_name: "Executor",
   },
   {
     type: "G6",
-    title: "Optimize",
+    group_name: "Optimize",
   },
 ]);
 const emits = defineEmits(["changeStatusFun"]);
@@ -141,8 +141,8 @@ const getStatus = (val: any) => {
     if (!children.length) {
       return false;
     }
-    let title = children[children.length - 1].title.split(":")[0].toLowerCase();
-    return title === val.toLowerCase();
+    let group_name = children[children.length - 1].group_name.toLowerCase();
+    return group_name === val.toLowerCase();
   } else {
     return false;
   }

frontend/src/view/reasoning/index.vue

@@ -3,7 +3,7 @@
     <div
       class="content-left"
       :style="{
-        width: isCollapse ? 'calc(100% - 200px)' : 'calc(100% - 7px)'
+        width: isCollapse ? 'calc(100% - 200px)' : 'calc(100% - 7px)',
       }"
     >
       <div class="body-box" ref="container">
@@ -17,10 +17,10 @@
         <div class="tip-box">
           <p class="active_item">
             <el-icon size="6" color="#fff"><Plus /></el-icon>
-            {{ generateTitle('新建对话') }}
+            {{ generateTitle("新建对话") }}
           </p>
           <div class="tip-text" v-show="disableStatus">
-            {{ generateTitle('回答输出中，暂不能再次提问') }}
+            {{ generateTitle("回答输出中，暂不能再次提问") }}
           </div>
         </div>
         <TextareaView ref="textareaRef" :minRows="1" @submitFun="submitFun" />
@@ -34,25 +34,25 @@
   </div>
 </template>
 <script setup lang="ts">
-import ReasoningView from '../../components/ReasoningView/index.vue'
-import TextareaView from '../../components/TextareaView.vue'
-import collapseView from '../../components/collapseView/index.vue'
-import { Plus } from '@element-plus/icons-vue'
-import { ref, onMounted, nextTick } from 'vue'
+import ReasoningView from "../../components/ReasoningView/index.vue";
+import TextareaView from "../../components/TextareaView.vue";
+import collapseView from "../../components/collapseView/index.vue";
+import { Plus } from "@element-plus/icons-vue";
+import { ref, onMounted, nextTick } from "vue";
 // import { getModelList } from '../../api/user'
-import { useRoute } from 'vue-router'
-import useWebSocket from '../../utils/websocket'
-import { getAgent } from '../../utils/agent'
-import { generateTitle } from '../../utils/i18n'
-const route: any = useRoute()
-const reasoningRef = ref<any>(null)
-const textareaRef = ref<any>(null)
-const collapseRef = ref<any>(null)
-const isCollapse = ref<boolean>(true)
+import { useRoute } from "vue-router";
+import useWebSocket from "../../utils/websocket";
+// import { getAgent } from '../../utils/agent'
+import { generateTitle } from "../../utils/i18n";
+const route: any = useRoute();
+const reasoningRef = ref<any>(null);
+const textareaRef = ref<any>(null);
+const collapseRef = ref<any>(null);
+const isCollapse = ref<boolean>(true);
 const changeStatusFun = (val: boolean) => {
-  isCollapse.value = val
-}
-const reasoningList = ref<Array<any>>([])
+  isCollapse.value = val;
+};
+const reasoningList = ref<Array<any>>([]);
 // const getModelListFun = async () => {
 //   try {
 //     const { data, code } = await getModelList()
@@ -64,150 +64,75 @@ const reasoningList = ref<Array<any>>([])
 //   }
 // }
 const submitFun = (val: any) => {
-  completeFun()
-  addMode(JSON.parse(val).message)
-  ws.send(val)
-}
+  completeFun();
+  addMode(JSON.parse(val).message);
+  ws.send(val);
+};
 const addMode = (val: any) => {
-  endStatus.value = false
+  endStatus.value = false;
   reasoningList.value.push({
     title: val,
-    children: []
-  })
+    children: [],
+  });
   reasoningRef.value.completeList.push({
     show: false,
-    index: reasoningRef.value.completeList.length
-  })
-}
-const disableStatus = ref(false)
+    index: reasoningRef.value.completeList.length,
+  });
+};
+const disableStatus = ref(false);
 const completeFun = () => {
-  disableStatus.value = true
-  textareaRef.value.disableStatus = true
-}
+  disableStatus.value = true;
+  textareaRef.value.disableStatus = true;
+};
 const handleMessage = (e: any) => {
-  getMessage(e.data)
-  getHeight()
-}
-const startStatus = ref(false)
-const contentStatus = ref(false)
-const endStatus = ref(false)
+  getMessage(e.data);
+  getHeight();
+};
+const endStatus = ref(false);
 const getMessage = async (e: any) => {
-  // if (e.split('TERMINATE')[1]) {
-  //   talkList.value += e.split('TERMINATE')[0]
-  //   reasonStatus.value.show = false
-  //   endShow.value = true
-  //   extractSynthesisProcess()
-  // } else {
-  //   talkList.value += e
-  // }
-  reasoningRef.value.reasonStatus.show = true
-  // talkList.value += e
-  // console.log(talkList.value);
-  let list = reasoningList.value
-  let children = list[list.length - 1].children
-  // if (
-  //   e.includes(
-  //     '--------------------------------------------------------------------------------'
-  //   )
-  // ) {
-  //   startStatus.value = true
-  // } else if (startStatus.value) {
-  if (parseChatData(e)) {
-    if (parseChatData(e)?.type) {
-      children.push({
-        title: parseChatData(e)?.title,
-        content: ''
-      })
-      reasoningRef.value.reasonStatus.index = children.length - 1
-    } else {
-      if (children[children.length - 1].content) {
-        children[children.length - 1].content += parseChatData(e)?.current
-      } else {
-        children[children.length - 1].content = parseChatData(e)?.current
+  reasoningRef.value.reasonStatus.show = true;
+  console.log(JSON.parse(e), "e::");
+  let data = JSON.parse(e);
+  let list = reasoningList.value[reasoningList.value.length - 1].children;
+  let status = list.filter((key: any) => key.group_name === data.group_name &&
+  key.agent_name === data.agent_name)[0]
+  if (list.length && status && status.agent_name) {
+    for (let i = 0; i < list.length; i++) {
+      const item = list[i];
+      if (
+        item.group_name === data.group_name &&
+        item.agent_name === data.agent_name
+      ) {
+        item.content += data.content;
       }
     }
+  } else {
+    list.push(
+      JSON.parse(e)
+    );
   }
-
-  // }
-}
-function parseChatData(e: any) {
-  let condition =
-    !e.includes(
-      '--------------------------------------------------------------------------------'
-    ) &&
-    !e.includes(
-      `********************************************************************************`
-    ) &&
-    !e.includes('Starting a new chat....') &&
-    !e.includes('>>>>>>>>')
-  let title = ''
-  let current = ''
-  let regex = /Next speaker: (.*)/
-  if (condition) {
-    if (e.includes('Planer') || e.includes('Planner')) {
-      title = getAgent('Planer')
-      return {
-        title,
-        type: true
-      }
-    }
-    if (e.match(regex) && e.match(regex)[1]) {
-      // if (!getAgent(e.match(regex)[1])) {
-      //   contentStatus.value = true
-      //   return
-      // }
-      // contentStatus.value = false
-      // title = getAgent(e.match(regex)[1])
-      title = getAgent(e.match(regex)[1]) || e.match(regex)[1]
-      return {
-        title,
-        type: true
-      }
-    }
-    if (contentStatus.value) {
-      return
-    }
-    if (e.includes('TERMINATE')) {
-      endStatus.value = true
-      reasoningRef.value.reasonStatus.show = false
-      reasoningRef.value.completeList[
-        reasoningRef.value.completeList.length - 1
-      ].show = true
-      disableStatus.value = false
-      textareaRef.value.disableStatus = false
-      startStatus.value = false
-    }
-    current = e.replace(
-      /(?<!`)TERMINATE(?<!\*\*)|TERMINATE(?!\*\*)|`TERMINATE`/g,
-      ''
-    )
-    return {
-      current,
-      type: false
-    }
-  }
-}
-const ws = useWebSocket(handleMessage)
+};
+const ws = useWebSocket(handleMessage);
 const sendFun = () => {
   setTimeout(() => {
-    addMode(JSON.parse(route.query.message).message)
-    completeFun()
-    ws.send(JSON.stringify(route.query.message))
-  }, 300)
-}
-const container = ref<any>(null)
+    addMode(JSON.parse(route.query.message).message);
+    completeFun();
+    ws.send(JSON.stringify(route.query.message));
+  }, 300);
+};
+const container = ref<any>(null);
 const getHeight = () => {
-  container.value.scrollTop = container.value.scrollHeight + 150
-  collapseRef.value.scrollTop = collapseRef.value.scrollHeight + 50
-}
+  container.value.scrollTop = container.value.scrollHeight + 150;
+  collapseRef.value.scrollTop = collapseRef.value.scrollHeight + 50;
+};
 onMounted(() => {
   // getModelListFun();
   nextTick(() => {
-    getHeight()
-    sendFun()
-  })
-})
+    getHeight();
+    sendFun();
+  });
+});
 </script>
 <style scoped>
-@import './index.less';
+@import "./index.less";
 </style>