ai-chat-bot-interface 1.4.11 → 1.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.4.11",
+  "version": "1.5.1",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",
@@ -17,6 +17,7 @@
     "bot"
   ],
   "dependencies": {
+    "markdown-it": "^14.1.0",
     "v-viewer": "^3.0.21",
     "vue": "^3.5.13"
   },

package/src/App.vue

@@ -5,11 +5,13 @@ import ChatUi from './ChatUi.vue';
 <template>
   <div style="width: 100vw; height: 100vh">
     <chat-ui
-      bot-id="7471093458661720104"
-      token="pat_2yVcSFJUZB6c9Kdcv9iktIVFeGRuzyK3bAJY6GcqKrdGxTdjKMd1iDB09ipJ6YX8"
+      bot-id="7485656400967516197"
+      token="pat_gYSCaegGxJ7qZXl4fBkCc4KYhV1t7YPQ5PVwggWdZnFmSKtgSHs8SoebV4epdQvj"
       uid="262598"
       :def-msg="{ placeholder: '发消息...' }"
       :show-header="true"
+      :card-list="{dishes: false}"
+      content-tye="markdown"
     />
   </div>
 </template>

package/src/ChatUi.vue

@@ -77,7 +77,8 @@
                   </p>
                 </template>
                 <template v-if="conv.content">
-                  <assistant-replay :content="conv.content" />
+                  <assistant-replay v-if="contentTye === 'text'" :content="conv.content" />
+                  <markdown-viewer v-else-if="contentTye ==='markdown'" :content="conv.content" />
                   <template v-if="!isAnswering">
                     <div v-if="conv.extra.length">
                       <template v-for="(comp, idx) in conv.extra" :key="idx">
@@ -89,7 +90,7 @@
                           {{ comp.planParse }}
                         </p>-->
                         <dishes-list
-                          v-if="comp.showType === 'card'"
+                          v-if="finalCardList.dishes && comp.showType === 'card'"
                           :sku-list="comp.skuList"
                           :is-mini="!showHeader"
                           :def-msg="finalDefMsg"
@@ -97,13 +98,13 @@
                           @select="(data) => handleCardTap(data, comp)"
                         />
                         <plan-card
-                          v-if="comp.showType === 'plan'"
+                          v-if="finalCardList.plan && comp.showType === 'plan'"
                           :info="comp"
                           :def-msg="finalDefMsg"
                           @select="handleCardTap({ type: 'match' }, comp)"
                         />
                         <store-list
-                          v-if="comp.showType === 'store'"
+                          v-if="finalCardList.store && comp.showType === 'store'"
                           :list="comp.storeList"
                           @select="handleStoreSel"
                         />
@@ -117,7 +118,7 @@
                     </div>
                   </template>
                 </template>
-                <loading-icon2 v-else/>
+                <loading-icon2 v-if="isAnswering"/>
               </div>
             </div>
           </div>
@@ -129,7 +130,7 @@
                 <img class="avatar" :src="avatar" alt="avatar"/>
               </div>
               <div class="box">
-                <p class="text" v-html="conv.content"></p>
+                <p class="text" v-html="conv.content" />
                 <div v-if="conv.extra.length">
                   <imge-list :list="conv.extra"/>
                 </div>
@@ -173,6 +174,8 @@ import ThinkingIcon from './components/icons/ThinkingIcon.vue';
 import OkIcon from './components/icons/OkIcon.vue';
 import AssistantReplay from './components/assistantReplay/assistantReplay.vue';
 import StoreList from './components/StoreList/StoreList.vue';
+import MarkdownViewer from "./components/MarkdownPlan/MarkdownViewer.vue";
+
 
 const chatOptions = computed(() => {
   return {
@@ -201,6 +204,11 @@ const msgObj = {
   thinkCompleted: '思考完成',
   useSolution: '用該方案配餐'
 };
+const defCardList = {
+  store: true,
+  dishes: true,
+  plan: true,
+}
 
 const props = defineProps({
   logo: {
@@ -248,6 +256,18 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  contentTye: {
+    type: String,
+    default: 'text'
+  },
+  cardList: {
+    type: Object,
+    default: () => ({
+      store: true,
+      dishes: true,
+      plan: true,
+    })
+  },
   storage: {
     type: String,
     default: 'sessionStorage'
@@ -262,6 +282,12 @@ const finalDefMsg = computed(() => {
     ...props.defMsg,
   };
 });
+const finalCardList = computed(() => {
+  return {
+    ...defCardList,
+    ...props.cardList
+  }
+})
 
 const endTarget = ref(null);
 const inputText = ref('');
@@ -399,7 +425,6 @@ const chatConv = async (data) => {
       }
     }
   });
-
   historyList.value.push(uObj);
   const res = await fetch(
       `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
@@ -694,6 +719,8 @@ const scrollToEnd = () => {
   });
 };
 
+
+
 const handleTextNeedBtn = (str) => {
   const regExp = /#全日總熱量：(\d*?)kcal/g;
   return regExp.test(str);

package/src/components/MarkdownPlan/MarkdownViewer.vue

@@ -0,0 +1,36 @@
+<script setup>
+import {computed, onMounted, ref} from "vue";
+import MarkdownIt from "markdown-it";
+
+const md = new MarkdownIt()
+const props = defineProps({
+  content: {
+    type: String,
+    default: `
+# 这是一个 Markdown 标题
+
+这是一段普通的 Markdown 文本。
+
+- 列表项 1
+- 列表项 2
+
+**加粗文本**
+
+[链接到百度](https://www.baidu.com)
+`
+  }
+})
+const parsedHtml = computed(() => {
+  return md.render(props.content)
+})
+
+
+</script>
+
+<template>
+  <div v-html="parsedHtml"></div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/OperateModule.vue

@@ -212,11 +212,13 @@ const sendMsg = () => {
     return;
   }
   const list = [{ content: textValue.value, text: textValue.value }];
+  console.log("====== u file list =======", uFileList.value);
   if (uFileList.value.length) {
     list.push({
       type: 'object_string',
       content: uFileList.value.map((file) => ({
-        type: 'image',
+        type: handleMsgType(file.file_type),
+        name: file.file.name,
         file_id: file.data.id,
         file_url: file.file_url,
       })),
@@ -338,6 +340,20 @@ const handleFocus = () => {
     });
   });
 };
+const handleMsgType = (file_type) => {
+/* text：文本类型。
+ * file：文件类型。
+ * image：图片类型。
+ * audio：音频类型。
+ * */
+  if(file_type.includes('image')) {
+    return 'image'
+  }else if(file_type.includes('application')) {
+    return 'file'
+  }else if(file_type.includes('audio')) {
+    return 'audio'
+  }
+}
 const handleBlur = () => {};
 </script>
 

package/src/components/imgeList.vue

@@ -5,7 +5,7 @@
       :key="info.file_id"
       class="img"
       width="100%"
-      :src="info.file_url"
+      :src="caseExtra(info)"
       :alt="info.name"
       @click.stop="previewImg"
     />
@@ -22,12 +22,25 @@ const props = defineProps({
     required: true,
   },
 });
+const pdfIcon = 'https://prodstatic.weis1606.cn/api/smartFood/icon/pdf_icon.png';
 
 const previewImg = () => {
-  viewerApi({
-    images: props.list.map((item) => item.file_url),
-  });
+  const imgList = props.list.filter((item) => item.type === 'image' && item.file_url);
+  if(imgList.length) {
+    viewerApi({
+      images: imgList.map(item => item.file_url),
+    });
+  }
 };
+const caseExtra = ({type, name, file_url}) => {
+  console.log(props.list);
+  let url = file_url;
+  if(type === 'file' && name.toLowerCase().endsWith('pdf')) {
+    url = pdfIcon;
+  }
+  return url;
+}
+
 </script>
 
 <style scoped lang="less">