ai-chat-bot-interface 1.0.1 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",

package/src/ChatUi.less

@@ -27,6 +27,7 @@
   }
   &_sug {
     cursor: pointer;
+    font-size: 14px;
     margin-bottom: 8px;
     padding: 6px 16px;
     border-radius: 8px;
@@ -40,7 +41,11 @@
   &_box {
     width: 100%;
     height: 100%;
+    font-size: 14px;
     background-color: @bg-color;
+    .btn {
+      border: none;
+    }
   }
 
   &_wrap {
@@ -127,6 +132,7 @@
         border-radius: @border-radius;
 
         /deep/ .text {
+          word-break: break-all;
           white-space: pre-wrap;
 
           a {
@@ -213,5 +219,6 @@
     color: #1d1c2359;
     background-color: #2e2e380a;
     font-size: 12px;
+    text-align: center;
   }
 }

package/src/ChatUi.vue

@@ -4,15 +4,17 @@
       <div class="cui_header">
         <div class="title" @click.stop="queryHistoryList">
           <img class="logo" :src="logo" alt="logo" style="width: 24px; height: 24px;"/>
-          {{ name }} {{ botId }}
+          {{ name }}
         </div>
         <div class="btn_group">
-          <button class="btn">
-            <clear-icon/>
-          </button>
-          <button class="btn">
-            <close-icon/>
-          </button>
+          <template v-show="false">
+            <button class="btn">
+              <clear-icon/>
+            </button>
+            <button class="btn">
+              <close-icon/>
+            </button>
+          </template>
         </div>
       </div>
       <div class="cui_content">
@@ -42,7 +44,8 @@
                 <p class="text" v-html="conv.content"></p>
                 <div v-if="conv.extra.length && !isAnswering">
                   <template v-for="(comp, idx) in conv.extra" :key="idx">
-                    <dishes-list :sku-list="comp.content.skuList" @select="handleCardTap"/>
+                    <dishes-list v-if="comp.showType === 'card'" :sku-list="comp.skuList" @select="handleCardTap"/>
+                    <plan-card v-if="comp.showType === 'plan'" @select="handleCardTap({ type: 'match'})" />
                   </template>
                 </div>
               </div>
@@ -50,23 +53,15 @@
           </div>
           <div v-else class="replay role_user">
             <div class="replay_content">
-
               <div class="name">User_{{ uid }} <!--<span class="time">12:30</span>--></div>
               <div class="box">
                 <p class="text" v-html="conv.content"></p>
-                <div v-if="conv.extra.length && !isAnswering">
-                  <template v-for="(comp, idx) in conv.extra" :key="idx">
-                    <dishes-list :sku-list="comp.content.skuList"
-                                 @select="handleCardTap"
-                    />
-                  </template>
-                </div>
               </div>
             </div>
             <img class="avatar" :src="avatar" alt="avatar">
           </div>
         </template>
-        <div ref="endTarget" style="height: 100px;" />
+        <div ref="endTarget" style="height: 100px;"/>
       </div>
       <div class="cui_operate">
         <button class="btn" @click.stop="createConv">
@@ -79,7 +74,7 @@
           </div>
         </div>
       </div>
-      <div class="cui_footer">Powered by Coze</div>
+      <div class="cui_footer">Powered by DeepSeek</div>
     </div>
   </div>
 
@@ -95,6 +90,7 @@ import mock from './mock';
 import {get, post} from './utils/request';
 import DishesCard from './components/DishesCard.vue';
 import DishesList from './components/DishesList.vue';
+import PlanCard from './components/PlanCard.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -102,7 +98,7 @@ const chatOptions = computed(() => {
       Authorization: `Bearer ${props.token}`,
       'Content-Type': 'application/json',
     },
-  }
+  };
 });
 const conversationId = ref('');
 const isAnswering = ref(false);
@@ -132,10 +128,13 @@ const props = defineProps({
   },
   token: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 
 });
+
+const Emits = defineEmits(['call']);
+
 const endTarget = ref(null);
 const inputText = ref('');
 const botInfo = ref({});
@@ -200,16 +199,18 @@ const messageCreate = async () => {
   );
 };
 const chatConv = async (data) => {
-  console.log('== user send ==');
-  let txt = '';
-  if (!(!isAnswering.value && (inputText || data.code))) {
+  let isInCode = data.hasOwnProperty('text') && data.hasOwnProperty('code');
+  if (!(!isAnswering.value && (inputText.value || isInCode))) {
     return;
   }
+  const inText = inputText.value;
+  console.log('== user send ==', isInCode, data, inText);
+  isAnswering.value = true;
   historyList.value.push({
     conversation_id: conversationId.value,
     bot_id: props.botId,
     role: 'user',
-    content: data.text ? data.text : inputText.value,
+    content: isInCode ? data.text : inText,
     status: 'ended',
     extra: [],
   });
@@ -230,7 +231,7 @@ const chatConv = async (data) => {
             {
               'role': 'user',
               'content_type': 'text',
-              'content': data.code ? data.code : inputText.value, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
+              'content': isInCode ? data.code : inText, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
             }],
         }),
         credentials: 'same-origin', // 默认同源策略
@@ -288,22 +289,25 @@ const chatConv = async (data) => {
             && strObj.hasOwnProperty('content_type')
             && strObj.content_type === 'text'
             && strObj.hasOwnProperty('type')
-            && strObj.type === 'answer') {
-          txt += JSON.parse(str).content;
-          historyList.value[idx].content = handleText(historyList.value[idx].content + JSON.parse(str).content);
+            && strObj.type === 'answer'
+            && !strObj.hasOwnProperty('created_at')) {
+          historyList.value[idx].content = handleText(historyList.value[idx].content + strObj.content);
         } else if (strObj.hasOwnProperty('type')
             && strObj.type === 'tool_response') {
           const extraObj = JSON.parse(strObj.content);
-          historyList.value[idx].extra.push({
-            type: strObj.type,
-            content: extraObj,
-          });
+          if(extraObj.hasOwnProperty('showType')) {
+            historyList.value[idx].extra.push({...extraObj});
+          }else if(extraObj.hasOwnProperty('response_for_model')){
+            const modelObj = JSON.parse(extraObj.response_for_model);
+            if(modelObj.hasOwnProperty('showType')) {
+              historyList.value[idx].extra.push({...modelObj});
+            }
+          }
         }
       }
     });
   }
   console.log('====', historyList.value);
-  console.log('== txt ==', txt);
 };
 
 const queryHistoryList = async () => {
@@ -314,16 +318,55 @@ const queryHistoryList = async () => {
   );
   if (res.code === 0 && res.data && res.data.length) {
     historyList.value = [];
+    const cardList = [];
     res.data.forEach(row => {
-      historyList.value.push({
-        conversation_id: row.conversation_id,
-        bot_id: row.bot_id,
-        role: row.role,
-        content: row.content,
-        status: 'ended',
-        extra: [],
-      });
+      if(row.hasOwnProperty('content_type')) {
+        if(row.content_type === 'text') {
+          historyList.value.push({
+            chat_id: row.chat_id,
+            conversation_id: row.conversation_id,
+            bot_id: row.bot_id,
+            role: row.role,
+            content: handleText(row.content),
+            status: 'ended',
+            extra: [],
+          });
+        }else if(row.content_type === 'card' && row.role === 'assistant') {
+          try {
+            const cardObj = JSON.parse(row.content);
+            if(cardObj.hasOwnProperty('showType')) {
+              cardList.push({
+                chat_id: row.chat_id,
+                conversation_id: row.conversation_id,
+                bot_id: row.bot_id,
+                role: row.role,
+                extra:[{...cardObj}]
+              })
+            }else if(cardObj.hasOwnProperty('response_for_model')){
+              const modelObj = JSON.parse(cardObj.response_for_model);
+              if(modelObj.hasOwnProperty('showType')) {
+                cardList.push({
+                  chat_id: row.chat_id,
+                  conversation_id: row.conversation_id,
+                  bot_id: row.bot_id,
+                  role: row.role,
+                  extra:[{...modelObj}]
+                })
+              }
+            }
+          }catch (e) {
+            console.log('== 解析错误 ==');
+          }
+        }
+      }
     });
+    cardList.forEach(card => {
+      const idx = historyList.value.findIndex(c => c.chat_id === card.chat_id && c.role === 'assistant');
+      if(idx > -1) {
+        historyList.value[idx].extra = [...card.extra];
+      }
+    })
+    console.log(historyList.value, cardList);
   }
 };
 
@@ -348,14 +391,19 @@ const handleCardTap = ({type}) => {
     case 'change':
       chatConv({code: '換一套菜品', text: '換一套菜品'});
       break;
+    case 'match':
+      chatConv({code: '請用以上方案為我配餐', text: '請用以上方案為我配餐'});
+      break;
+    default:
+      Emits('call', { type });
   }
 };
 
 const scrollToEnd = () => {
   nextTick(() => {
     endTarget.value.scrollIntoView();
-  })
-}
+  });
+};
 </script>
 
 <style scoped lang="less">

package/src/components/DishesList.vue

@@ -11,7 +11,7 @@
       </div>
     </template>
     <div class="btn_group">
-      <div class="btn btn_1" @click.stop="handleBtn('change')">換一套菜品</div>
+<!--      <div class="btn btn_1" @click.stop="handleBtn('change')">換一套菜品</div>-->
       <div class="btn btn_2" @click.stop="handleBtn('order')">去下單</div>
     </div>
   </div>
@@ -69,7 +69,7 @@ const handleBtn = (type) => {
 
       &_group {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr;
         grid-column-gap: 10px;
         margin-top: 20px;
       }

package/src/components/PlanCard.vue

@@ -0,0 +1,40 @@
+<template>
+<div class="btn_group">
+  <div class="btn btn_2" @click.stop="handleSel">用該方案配餐</div>
+  </div>
+</template>
+
+<script setup>
+
+const Emits = defineEmits(['select']);
+const handleSel = () => {
+  Emits('select', {})
+}
+</script>
+
+<style scoped lang="less">
+.btn {
+  cursor: pointer;
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  background-color: #E6F5EB;
+  border-radius: 19px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 13px;
+  color: #039938;
+
+  &_2 {
+    color: #fff;
+    background-color: #039938;
+  }
+
+  &_group {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-column-gap: 10px;
+    margin-top: 20px;
+  }
+}
+</style>