ai-chat-bot-interface 1.3.1 → 1.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.3.1",
+  "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,9 +5,10 @@ import ChatUi from './ChatUi.vue';
 <template>
   <div style="width: 100vw; height: 100vh">
     <chat-ui
-      bot-id="7471093458661720104"
-      token="pat_2yVcSFJUZB6c9Kdcv9iktIVFeGRuzyK3bAJY6GcqKrdGxTdjKMd1iDB09ipJ6YX8"
+      bot-id="555"
+      token="pat_88888"
       uid="262598"
+      :def-msg="{ placeholder: '发消息...' }"
       :show-header="true"
     />
   </div>

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>
@@ -136,6 +137,7 @@
         :new-chat="!showHeader"
         :token="token"
         :tag-list="tagList"
+        :def-msg="finalDefMsg"
         @send="chatConv"
         @tag="handleTagSel"
         @call="handleCall"
@@ -162,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 {
@@ -175,6 +178,14 @@ const conversationId = ref('');
 const isAnswering = ref(false);
 const historyList = ref([]);
 
+const msgObj = {
+  placeholder: '發消息⋯',
+  fileText: '請根據我上傳的體檢報告為我生成飲食方案',
+  uploadingTips: '文件正在上傳，請稍候...',
+  matchText: '請用以上方案為我配餐',
+  matchContent: '請用以上方案為我配餐',
+};
+
 const props = defineProps({
   logo: {
     type: String,
@@ -213,10 +224,21 @@ const props = defineProps({
       { name: '体检报告', value: 'exam', type: 'upload', msg: '体检报告' },
     ],
   },
+  defMsg: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
 const Emits = defineEmits(['call']);
 
+const finalDefMsg = computed(() => {
+  return {
+    ...msgObj,
+    ...props.defMsg,
+  };
+});
+
 const endTarget = ref(null);
 const inputText = ref('');
 const botInfo = ref({});
@@ -285,7 +307,7 @@ const createConv = async () => {
 
 const chatConv = async (data) => {
   let isInCode = Array.isArray(data); //  data.hasOwnProperty('text') && data.hasOwnProperty('code');
-  let botId = props.botId;
+  const botId = props.botId;
   if (!(!isAnswering.value && (inputText.value || isInCode))) {
     return;
   }
@@ -308,7 +330,7 @@ const chatConv = async (data) => {
     if (item.hasOwnProperty('content') && item.content) {
       if (item.hasOwnProperty('type') && item.type === 'object_string') {
         console.log('=== item ====', item);
-        botId = '7474884145253023795';
+        // botId = '7474884145253023795';
         additional_messages.push({
           content: JSON.stringify(
             item.content.map((con) => ({
@@ -565,11 +587,14 @@ const queryBotInfo = async () => {
 };
 
 const handleText = (str) => {
+  return str;
   // console.log(str);
-  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' });
@@ -593,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/OperateModule.vue

@@ -52,7 +52,7 @@
             ref="txtEle"
             class="input"
             rows="1"
-            placeholder="發消息⋯"
+            :placeholder="defMsg.placeholder"
             @input="handleInput"
             @keyup.enter="sendMsg"
           />
@@ -140,6 +140,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  defMsg: {
+    type: Object,
+    required: true,
+  },
 });
 const Emits = defineEmits(['update:modelValue', 'send', 'tag', 'call']);
 
@@ -194,7 +198,7 @@ const sendMsg = () => {
     uFileList.value.findIndex((f) => f.percent < 100) > -1
   ) {
     Emits('call', {
-      message: '文件正在上傳，請稍候...',
+      message: props.defMsg.uploadingTips,
       reason: 'is_uploading',
       value: 'toast',
       type: 'call',
@@ -245,7 +249,7 @@ const handleUpload = async (idx) => {
   const file = uFileList.value[idx].file;
   console.log('========', file);
   if (!textValue.value) {
-    textValue.value = '請根據我上傳的體檢報告為我生成飲食方案';
+    textValue.value = props.defMsg.fileText;
   }
   const formDate = new FormData();
   formDate.append('file', file);

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');