ai-chat-bot-interface 1.0.8 → 1.1.0

package/src/ChatUi.vue

@@ -3,94 +3,129 @@
     <div class="cui_wrap">
       <div class="cui_header">
         <div class="title" @click.stop="queryHistoryList">
-          <img class="logo" :src="logo" alt="logo" style="width: 24px; height: 24px;"/>
-          {{ name }}
+          <div class="back" @click.stop="handleBack">
+            <back-icon />
+          </div>
+          <img
+            class="logo"
+            :src="logo"
+            alt="logo"
+            style="width: 24px; height: 24px"
+          />
+          <div class="name_box">
+            <div class="name">{{ name }}</div>
+            <div class="name_sub">nutribite.com</div>
+          </div>
         </div>
         <div class="btn_group">
+          <button class="btn" @click.stop="createConv">
+            <new-chat class="icon" />
+          </button>
           <template v-show="false">
             <button class="btn">
-              <clear-icon/>
+              <clear-icon />
             </button>
             <button class="btn">
-              <close-icon/>
+              <close-icon />
             </button>
           </template>
         </div>
       </div>
       <div class="cui_content">
-        <div v-if="botInfo && botInfo.onboarding_info" style="text-align: left; margin-top: 50px;">
+        <div
+          v-if="botInfo && botInfo.onboarding_info"
+          style="text-align: left; margin-top: 50px"
+        >
           <div style="text-align: center">
-            <img :src="botInfo.icon_url" alt="icon" width="64" height="64"
-                 style="border-radius: 15px;"
+            <img
+              :src="botInfo.icon_url"
+              alt="icon"
+              width="64"
+              height="64"
+              style="border-radius: 15px"
             />
             <p class="board_name">{{ botInfo.name }}</p>
           </div>
 
           <div class="board_desc">{{ botInfo.onboarding_info.prologue }}</div>
           <div class="flexcss">
-            <span v-for="(item, idx) in botInfo.onboarding_info.suggested_questions"
-                  :key="idx"
-                  class="board_sug"
-                  @click.stop="chatConv({code: item, text: item});"
-            >{{ item }}</span>
+            <span
+              v-for="(item, idx) in botInfo.onboarding_info.suggested_questions"
+              :key="idx"
+              class="board_sug"
+              @click.stop="chatConv({ code: item, text: item })"
+              >{{ item }}</span
+            >
           </div>
         </div>
         <template v-for="(conv, index) in historyList" :key="index">
           <div v-if="conv.role === 'assistant'" class="replay role_sys">
-            <img class="avatar" :src="logo" alt="avatar">
             <div class="replay_content">
-              <div class="name">{{ name }}  <!--<span class="time">12:30</span>--></div>
+              <div class="name">
+                <img class="avatar" :src="logo" alt="avatar" />
+                {{ name }}
+                <!--<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 v-if="comp.showType === 'card'" :sku-list="comp.skuList" @select="handleCardTap"/>
-                    <plan-card v-if="comp.showType === 'plan'" @select="handleCardTap({ type: 'match'})" />
-                  </template>
-                </div>
+                <template v-if="conv.content">
+                  <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
+                        v-if="comp.showType === 'card'"
+                        :sku-list="comp.skuList"
+                        @select="(data) => handleCardTap(data, comp)"
+                      />
+                      <plan-card
+                        v-if="comp.showType === 'plan'"
+                        @select="handleCardTap({ type: 'match' }, comp)"
+                      />
+                    </template>
+                  </div>
+                </template>
+                <loading-icon2 v-else />
               </div>
             </div>
           </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="name">
+                User_{{ uid }}
+                <!--<span class="time">12:30</span>-->
+                <img class="avatar" :src="avatar" alt="avatar" />
+              </div>
               <div class="box">
                 <p class="text" v-html="conv.content"></p>
               </div>
             </div>
-            <img class="avatar" :src="avatar" alt="avatar">
           </div>
         </template>
-<!--        <div ref="endTarget" style="height: 100px;"/>-->
-      </div>
-      <div class="cui_operate">
-        <button class="btn" @click.stop="createConv">
-          <new-session-icon/>
-        </button>
-        <div class="input_group">
-          <input v-model="inputText" class="input" @keyup.enter="chatConv"/>
-          <div class="send" @click.stop="chatConv">
-            <send-icon :style="{ color: !isAnswering && inputText ? '#333': '#ccc'}"/>
-          </div>
-        </div>
+        <div ref="endTarget" style="height: 100px" />
       </div>
-      <div class="cui_footer">Powered by DeepSeek</div>
+      <operate-module
+        v-model="inputText"
+        @send="chatConv"
+        @tag="handleTagSel"
+      />
     </div>
   </div>
-
 </template>
 
 <script setup>
-import {computed, nextTick, onMounted, ref} from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 import ClearIcon from './components/icons/ClearIcon.vue';
 import CloseIcon from './components/icons/CloseIcon.vue';
 import NewSessionIcon from './components/icons/NewSessionIcon.vue';
 import SendIcon from './components/icons/SendIcon.vue';
-import mock from './mock';
-import {get, post} from './utils/request';
+import { get, post } from './utils/request';
 import DishesCard from './components/DishesCard.vue';
 import DishesList from './components/DishesList.vue';
 import PlanCard from './components/PlanCard.vue';
+import OperateModule from './components/OperateModule.vue';
+import BackIcon from './components/icons/BackIcon.vue';
+import NewChat from './components/icons/newChat.vue';
+import LoadingIcon from './components/icons/loadingIcon.vue';
+import LoadingIcon2 from './components/icons/loadingIcon2.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -111,7 +146,8 @@ const props = defineProps({
   },
   avatar: {
     type: String,
-    default: 'https://prodstatic.weis1606.cn/api/smartFood/Nutribite/icons/home/icon_3.png',
+    default:
+      'https://prodstatic.weis1606.cn/api/smartFood/Nutribite/icons/home/icon_3.png',
   },
   name: {
     type: String,
@@ -130,12 +166,11 @@ const props = defineProps({
     type: String,
     required: true,
   },
-
 });
 
 const Emits = defineEmits(['call']);
 
-// const endTarget = ref(null);
+const endTarget = ref(null);
 const inputText = ref('');
 const botInfo = ref({});
 
@@ -152,9 +187,9 @@ onMounted(async () => {
 
 const createConv = async () => {
   const res = await post(
-      'https://api.coze.cn/v1/conversation/create',
-      {'bot_id': props.botId, 'connector_id': '999'},
-      {...chatOptions.value},
+    'https://api.coze.cn/v1/conversation/create',
+    { bot_id: props.botId, connector_id: '999' },
+    { ...chatOptions.value },
   );
   console.log(res);
   if (res.code === 0 && res.data) {
@@ -162,6 +197,7 @@ const createConv = async () => {
     localStorage.setItem('conversationId', conversationId.value);
     historyList.value = [];
     await queryBotInfo();
+    // await messageCreate();
   }
 };
 // const messageCreate = async () => {
@@ -171,7 +207,7 @@ const createConv = async () => {
 //       { "role":"user","content":`#userid_${props.uid}`,"content_type":"text"},
 //       {...chatOptions.value});
 // };
-const messageCreate = async () => {
+/*const messageCreate = async () => {
   const res = await fetch(
       `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
       {
@@ -190,6 +226,7 @@ const messageCreate = async () => {
               'role': 'user',
               'content_type': 'text',
               'content': `#userid_${props.uid}`,
+
             }],
         }),
         credentials: 'same-origin', // 默认同源策略
@@ -197,7 +234,7 @@ const messageCreate = async () => {
         cache: 'default', // 默认缓存策略
       },
   );
-};
+};*/
 const chatConv = async (data) => {
   let isInCode = data.hasOwnProperty('text') && data.hasOwnProperty('code');
   if (!(!isAnswering.value && (inputText.value || isInCode))) {
@@ -215,29 +252,33 @@ const chatConv = async (data) => {
     extra: [],
   });
   const res = await fetch(
-      `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
-      {
-        method: 'POST',
-        headers: {
-          ...chatOptions.value.headers,
-          // 'Content-Type': 'text/event-stream',
-        },
-        body: JSON.stringify({
-          bot_id: props.botId,
-          user_id: props.uid,
-          stream: true,
-          connector_id: '999',
-          additional_messages: [
-            {
-              'role': 'user',
-              'content_type': 'text',
-              'content': isInCode ? data.code : inText, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
-            }],
-        }),
-        credentials: 'same-origin', // 默认同源策略
-        mode: 'cors', // 默认跨域模式
-        cache: 'default', // 默认缓存策略
+    `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
+    {
+      method: 'POST',
+      headers: {
+        ...chatOptions.value.headers,
+        // 'Content-Type': 'text/event-stream',
       },
+      body: JSON.stringify({
+        bot_id: props.botId,
+        user_id: props.uid,
+        stream: true,
+        connector_id: '999',
+        additional_messages: [
+          {
+            role: 'user',
+            content_type: 'text',
+            content: isInCode ? data.code : inText, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
+          },
+        ],
+        custom_variables: {
+          uid: props.uid,
+        },
+      }),
+      credentials: 'same-origin', // 默认同源策略
+      mode: 'cors', // 默认跨域模式
+      cache: 'default', // 默认缓存策略
+    },
   );
   historyList.value.push({
     conversation_id: '',
@@ -255,7 +296,7 @@ const chatConv = async (data) => {
   let buffer = '';
   // 逐块读取数据
   while (true) {
-    const {done, value} = await reader.read();
+    const { done, value } = await reader.read();
     if (done) {
       console.log('Stream has ended.');
       isAnswering.value = false;
@@ -265,14 +306,14 @@ const chatConv = async (data) => {
     }
 
     // 解码数据块
-    const chunk = decoder.decode(value, {stream: true});
+    const chunk = decoder.decode(value, { stream: true });
     buffer += chunk;
 
     // 处理数据块
     const lines = buffer.split('\n');
     buffer = lines.pop(); // 保留未处理的片段
 
-    lines.forEach(line => {
+    lines.forEach((line) => {
       if (line.trim().length > 0 && line.trim().startsWith('data:')) {
         const str = line.replace(/^data:\s*/, '');
         const strObj = JSON.parse(str);
@@ -285,22 +326,28 @@ const chatConv = async (data) => {
         if (!historyList.value[idx].conversation_id && strObj.conversation_id) {
           historyList.value[idx].conversation_id = strObj.conversation_id;
         }
-        if (strObj.hasOwnProperty('content')
-            && strObj.hasOwnProperty('content_type')
-            && strObj.content_type === 'text'
-            && strObj.hasOwnProperty('type')
-            && 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') {
+        if (
+          strObj.hasOwnProperty('content') &&
+          strObj.hasOwnProperty('content_type') &&
+          strObj.content_type === 'text' &&
+          strObj.hasOwnProperty('type') &&
+          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);
-          if(extraObj.hasOwnProperty('showType')) {
-            historyList.value[idx].extra.push({...extraObj});
-          }else if(extraObj.hasOwnProperty('response_for_model')){
+          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});
+            if (modelObj.hasOwnProperty('showType')) {
+              historyList.value[idx].extra.push({ ...modelObj });
             }
           }
         }
@@ -312,16 +359,16 @@ const chatConv = async (data) => {
 
 const queryHistoryList = async () => {
   const res = await post(
-      `https://api.coze.cn/v1/conversation/message/list?conversation_id=${conversationId.value}`,
-      {order: 'asc'},
-      {...chatOptions.value},
+    `https://api.coze.cn/v1/conversation/message/list?conversation_id=${conversationId.value}`,
+    { order: 'asc' },
+    { ...chatOptions.value },
   );
   if (res.code === 0 && res.data && res.data.length) {
     historyList.value = [];
     const cardList = [];
-    res.data.forEach(row => {
-      if(row.hasOwnProperty('content_type')) {
-        if(row.content_type === 'text') {
+    res.data.forEach((row) => {
+      if (row.hasOwnProperty('content_type')) {
+        if (row.content_type === 'text') {
           historyList.value.push({
             chat_id: row.chat_id,
             conversation_id: row.conversation_id,
@@ -331,81 +378,100 @@ const queryHistoryList = async () => {
             status: 'ended',
             extra: [],
           });
-        }else if(row.content_type === 'card' && row.role === 'assistant') {
+        } else if (row.content_type === 'card' && row.role === 'assistant') {
           try {
             const cardObj = JSON.parse(row.content);
-            if(cardObj.hasOwnProperty('showType')) {
+            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')){
+                extra: [{ ...cardObj }],
+              });
+            } else if (cardObj.hasOwnProperty('response_for_model')) {
               const modelObj = JSON.parse(cardObj.response_for_model);
-              if(modelObj.hasOwnProperty('showType')) {
+              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}]
-                })
+                  extra: [{ ...modelObj }],
+                });
               }
             }
-          }catch (e) {
+          } 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) {
+    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);
   }
 };
 
 const queryBotInfo = async () => {
   const res = await get(
-      `https://api.coze.cn/v1/bot/get_online_info?bot_id=${props.botId}`,
-      {...chatOptions.value},
+    `https://api.coze.cn/v1/bot/get_online_info?bot_id=${props.botId}`,
+    { ...chatOptions.value },
   );
   console.log(res);
   if (res.code === 0 && res.data) {
-    botInfo.value = {...res.data};
+    botInfo.value = { ...res.data };
   }
 };
 
 const handleText = (str) => {
   // console.log(str);
-  return str.replaceAll(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/ig, '<a href="$2" target="_blank">[$1]</a>');
+  return str.replaceAll(
+    /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/gi,
+    '<a href="$2" target="_blank">[$1]</a>',
+  );
+};
+const handleBack = () => {
+  Emits('call', { type: 'back' });
 };
 
-const handleCardTap = ({type}) => {
+const handleTagSel = (info) => {
+  switch (info.type) {
+    case 'chat':
+      chatConv({ code: info.msg, text: info.msg });
+      break;
+    case 'call':
+      Emits('call', { ...info });
+      break;
+  }
+};
+
+const handleCardTap = ({ type }, info) => {
   switch (type) {
     case 'change':
-      chatConv({code: '換一套菜品', text: '換一套菜品'});
+      chatConv({ code: '換一套菜品', text: '換一套菜品' });
       break;
     case 'match':
-      chatConv({code: '請用以上方案為我配餐', text: '請用以上方案為我配餐'});
+      chatConv({ code: '請用以上方案為我配餐', text: '請用以上方案為我配餐' });
       break;
     default:
-      Emits('call', { type });
+      Emits('call', { type, info });
   }
 };
 
 const scrollToEnd = () => {
-  // nextTick(() => {
-  //   endTarget.value.scrollIntoView();
-  // });
+  nextTick(() => {
+    endTarget.value.scrollIntoView();
+  });
 };
 </script>
 
 <style scoped lang="less">
-@import "./ChatUi";
+@import './ChatUi';
 </style>

package/src/assets/styles/public.less

@@ -1,8 +1,11 @@
 @border-color: rgba(68, 83, 130, 0.25);
-@border-radius: 8px;
+@border-radius: 10px;
 @box-max: 290px;
 @max-width: 630px;
-@bg-color: #F3F4F5;
+@bg-color: #fff;
+@sys-bg: #f3f4f5;
+@user-bg: #28d465;
+@primary-color: #039938;
 
 .flexr {
   display: flex;

package/src/components/DishesCard.vue

@@ -3,28 +3,27 @@
     <img class="img" :src="info.primaryImgUrl" alt="img" />
     <div>
       <div class="name">
-        <span>{{info.skuname}}</span>
+        <span>{{ info.skuname }}</span>
         <span>×1</span>
       </div>
-      <div class="sub">{{subStr}}</div>
+      <div class="sub">{{ subStr }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {computed} from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   info: {
     type: Object,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
 const subStr = computed(() => {
-  return `热量${props.info.energy}kcal，蛋白质${props.info.protein}g，脂肪${props.info.fat}g，碳水${props.info.carbonwater}g`
-})
-
+  return `热量${props.info.energy}kcal，蛋白质${props.info.protein}g，脂肪${props.info.fat}g，碳水${props.info.carbonwater}g`;
+});
 </script>
 
 <style scoped lang="less">

package/src/components/DishesList.vue

@@ -2,21 +2,27 @@
   <div class="dl_wrap">
     <template v-for="cate in skuList" :key="cate.category">
       <div v-if="cate.list && cate.list.length">
-        <p class="title">{{ cate.category }}</p>
+        <p class="title">{{ cate.categoryType }}</p>
         <div>
           <template v-for="dList in cate.list" :key="dList.id">
-            <dishes-card v-for="(info, idx) in dList.categoryList" :key="idx" :info="info"/>
+            <dishes-card
+              v-for="(info, idx) in dList.getCategoryList"
+              :key="idx"
+              :info="info"
+            />
           </template>
         </div>
       </div>
     </template>
     <div class="btn_group">
-<!--      <div class="btn btn_1" @click.stop="handleBtn('change')">換一套菜品</div>-->
-      <div class="btn btn_2" @click.stop="handleBtn('order')">去下單</div>
+      <div class="btn btn_1" @click.stop="handleBtn('ship_order')">
+        配送下单
+      </div>
+      <div class="btn btn_2" @click.stop="handleBtn('pick_order')">
+        自取下单
+      </div>
     </div>
   </div>
-
-
 </template>
 
 <script setup>
@@ -26,14 +32,13 @@ const props = defineProps({
   skuList: {
     type: Array,
     required: true,
-    default: () => ([]),
+    default: () => [],
   },
 });
 const Emits = defineEmits(['select']);
 
-
 const handleBtn = (type) => {
-  Emits('select', {type});
+  Emits('select', { type });
 };
 </script>
 
@@ -55,7 +60,7 @@ const handleBtn = (type) => {
       width: 100%;
       height: 38px;
       line-height: 38px;
-      background-color: #E6F5EB;
+      background-color: #e6f5eb;
       border-radius: 19px;
       text-align: center;
       font-weight: 600;
@@ -69,12 +74,11 @@ const handleBtn = (type) => {
 
       &_group {
         display: grid;
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr 1fr;
         grid-column-gap: 10px;
         margin-top: 20px;
       }
     }
   }
 }
-
 </style>