ai-chat-bot-interface 1.3.2 → 1.4.0

package/package.json

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

package/src/App.vue

@@ -5,8 +5,8 @@ import ChatUi from './ChatUi.vue';
 <template>
   <div style="width: 100vw; height: 100vh">
     <chat-ui
-      bot-id="000"
-      token="pat_8888"
+      bot-id="555"
+      token="pat_88888"
       uid="262598"
       :def-msg="{ placeholder: '发消息...' }"
       :show-header="true"

package/src/ChatUi.vue

@@ -75,7 +75,7 @@
                   </p>
                 </template>
                 <template v-if="conv.content">
-                  <p class="text" v-html="conv.content"></p>
+                  <assistant-replay :content="conv.content" />
                   <template v-if="!isAnswering">
                     <div v-if="conv.extra.length">
                       <template v-for="(comp, idx) in conv.extra" :key="idx">
@@ -95,6 +95,7 @@
                         <plan-card
                           v-if="comp.showType === 'plan'"
                           :info="comp"
+                          :def-msg="finalDefMsg"
                           @select="handleCardTap({ type: 'match' }, comp)"
                         />
                       </template>
@@ -163,6 +164,7 @@ import LoadingIcon2 from './components/icons/loadingIcon2.vue';
 import ImgeList from './components/imgeList.vue';
 import ThinkingIcon from './components/icons/ThinkingIcon.vue';
 import OkIcon from './components/icons/OkIcon.vue';
+import AssistantReplay from './components/assistantReplay/assistantReplay.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -180,6 +182,8 @@ const msgObj = {
   placeholder: '發消息⋯',
   fileText: '請根據我上傳的體檢報告為我生成飲食方案',
   uploadingTips: '文件正在上傳，請稍候...',
+  matchText: '請用以上方案為我配餐',
+  matchContent: '請用以上方案為我配餐',
 };
 
 const props = defineProps({
@@ -583,13 +587,14 @@ const queryBotInfo = async () => {
 };
 
 const handleText = (str) => {
+  return str;
   // console.log(str);
-  let txt = '';
-
-  return str.replaceAll(
-    /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/gi,
-    '<a href="$2" target="_blank">[$1]</a>',
-  );
+  // let txt = '';
+  //
+  // return str.replaceAll(
+  //   /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/gi,
+  //   '<a href="$2" target="_blank">[$1]</a>',
+  // );
 };
 const handleBack = () => {
   Emits('call', { type: 'back' });
@@ -613,7 +618,10 @@ const handleCardTap = ({ type }, info) => {
       break;
     case 'match':
       chatConv([
-        { content: '請用以上方案為我配餐', text: '請用以上方案為我配餐' },
+        {
+          content: finalDefMsg.value.matchContent,
+          text: finalDefMsg.value.matchText,
+        },
       ]);
       break;
     default:

package/src/components/PlanCard.vue

@@ -46,6 +46,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  defMsg: {
+    type: Object,
+    required: true,
+  },
 });
 const Emits = defineEmits(['select']);
 const handleSel = () => {

package/src/components/assistantReplay/assistantReplay.vue

@@ -0,0 +1,92 @@
+<template>
+  <p class="text">
+    <template v-for="(item, idx) in msgList" :key="idx">
+      <template v-if="item.type === 'text'">{{ item.content }}</template>
+      <template v-if="item.type === 'link'">
+        <a class="link" @click.stop="previewImg(item)">{{ item.content }}</a>
+      </template>
+    </template>
+  </p>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { api as viewerApi } from 'v-viewer';
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+});
+
+const images = ref([]);
+const msgList = computed(() => {
+  const regEx = /\[([^\]]+)]\((https?:\/\/[^)]+)\)/gi;
+  const matches = [...props.content.matchAll(regEx)];
+  let remaining = props.content;
+  let pointer = 0;
+  const result = [];
+  if (matches.length) {
+    matches.forEach((match, index) => {
+      result.push({
+        type: 'text',
+        content: match.input.slice(pointer, match.index).replace(regEx, ''),
+      });
+      result.push({
+        type: 'link',
+        string: match[0],
+        ...JSON.parse(match[0].replace(regEx, '{"content":"[$1]","url":"$2"}')),
+      });
+      remaining = match.input.slice(match.index).replace(match[0], '');
+      pointer = match.index;
+    });
+    if (remaining.length) {
+      result.push({
+        type: 'text',
+        content: remaining,
+      });
+    }
+  } else {
+    result.push({
+      type: 'text',
+      content: remaining,
+    });
+  }
+  return result;
+});
+
+const previewImg = ({ url }) => {
+  images.value = [url];
+  viewerApi({
+    images: images.value,
+    options: {
+      navbar: false,
+      toolbar: {
+        flipHorizontal: false,
+        flipVertical: false,
+        next: false,
+        prev: false,
+        play: false,
+        reset: true,
+        oneToOne: true,
+        rotateLeft: true,
+        rotateRight: true,
+        zoomIn: true,
+        zoomOut: true,
+      },
+    },
+  });
+};
+</script>
+
+<style scoped lang="less">
+.text {
+  word-break: break-all;
+  white-space: pre-wrap;
+  margin: 0;
+}
+.link {
+  color: #039938;
+}
+</style>

package/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
+import 'viewerjs/dist/viewer.css';
 
 createApp(App).mount('#app');