ai-chat-bot-interface 1.2.0 → 1.2.2

package/package.json

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

package/src/App.vue

@@ -4,7 +4,7 @@ import ChatUi from './ChatUi.vue';
 
 <template>
   <div style="width: 100vw; height: 100vh">
-    <chat-ui bot-id="000" token="pat_28888" uid="262598" />
+    <chat-ui bot-id="000" token="pat_88888" uid="262598" :show-header="true" />
   </div>
 </template>
 <style></style>

package/src/ChatUi.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cui_box">
     <div class="cui_wrap">
-      <div class="cui_header">
+      <div v-if="showHeader" class="cui_header">
         <div class="title" @click.stop="queryHistoryList">
           <div class="back" @click.stop="handleBack">
             <back-icon />
@@ -14,6 +14,7 @@
         <div class="btn_group">
           <button class="btn" @click.stop="createConv">
             <new-chat class="icon" />
+            <span style="font-size: 14px">新對話</span>
           </button>
           <template v-show="false">
             <button class="btn">
@@ -119,10 +120,12 @@
       </div>
       <operate-module
         v-model="inputText"
+        :new-chat="!showHeader"
         :token="token"
         :tag-list="tagList"
         @send="chatConv"
         @tag="handleTagSel"
+        @call="handleCall"
       />
     </div>
   </div>
@@ -183,6 +186,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
   tagList: {
     type: Array,
     default: () => [
@@ -568,6 +575,17 @@ const handleCardTap = ({ type }, info) => {
       Emits('call', { type, info });
   }
 };
+const handleCall = (data) => {
+  switch (data.type) {
+    case 'new_chat':
+      createConv();
+      break;
+    default:
+      Emits('call', data);
+
+      break;
+  }
+};
 
 const handlePlanParse = (list) => {
   const pIdx = list.findIndex((p) => p.showType === 'plan');

package/src/components/OperateModule.less

@@ -42,6 +42,20 @@
     grid-template-columns: 1fr auto;
     background: #fff;
     align-items: center;
+    &_box {
+      .flexrsc();
+      gap: 10px;
+      .new_chat {
+        .flexrcc();
+        cursor: pointer;
+        width: 46px;
+        height: 46px;
+        font-size: 30px;
+        border-radius: 23px;
+        background: #ffffff;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+      }
+    }
     &_wrap {
       margin: 10px 0;
       width: 100%;

package/src/components/OperateModule.vue

@@ -11,54 +11,60 @@
         {{ item.name }}
       </div>
     </div>
-    <div class="om_operate_wrap">
-      <div class="file_list_box" :class="{ hidden: !uploadPlane }">
-        <div class="file_list">
-          <div
-            v-for="(item, index) in uFileList"
-            :key="index"
-            class="file_card"
-          >
-            <img class="img" :src="item.file_url" width="100%" alt="img" />
-            <div v-if="item.percent < 100" class="process">
-              <progress-ring :percent="item.percent" />
+    <div class="om_operate_box">
+      <div v-if="newChat" class="new_chat" @click.stop="newChatFunc">
+        <new-chat />
+      </div>
+      <div class="om_operate_wrap">
+        <div class="file_list_box" :class="{ hidden: !uploadPlane }">
+          <div class="file_list">
+            <div
+              v-for="(item, index) in uFileList"
+              :key="index"
+              class="file_card"
+            >
+              <img class="img" :src="item.file_url" width="100%" alt="img" />
+              <div v-if="item.percent < 100" class="process">
+                <progress-ring :percent="item.percent" />
+              </div>
+              <close-border-icon
+                v-else
+                class="close"
+                @click.stop="clearFile(index)"
+              />
+            </div>
+            <div
+              v-if="uFileList.length < 4"
+              class="file_add"
+              @click.stop="triggerUploadInput"
+            >
+              <add-icon />
+            </div>
+            <div class="file_close" @click.stop="closeUpload">
+              <close-icon />
             </div>
-            <close-border-icon
-              v-else
-              class="close"
-              @click.stop="clearFile(index)"
-            />
-          </div>
-          <div
-            v-if="uFileList.length < 4"
-            class="file_add"
-            @click.stop="triggerUploadInput"
-          >
-            <add-icon />
-          </div>
-          <div class="file_close" @click.stop="closeUpload">
-            <close-icon />
           </div>
         </div>
-      </div>
 
-      <div class="om_operate">
-        <textarea
-          v-model="textValue"
-          ref="txtEle"
-          class="input"
-          rows="1"
-          placeholder="發消息⋯"
-          @input="handleInput"
-          @keyup.enter="sendMsg"
-        />
-        <div class="btn_group">
-          <div class="btn" @click.stop="sendMsg">
-            <send-icon :style="{ color: textValue ? '#039938' : '#ccc' }" />
+        <div class="om_operate">
+          <textarea
+            v-model="textValue"
+            ref="txtEle"
+            class="input"
+            rows="1"
+            placeholder="發消息⋯"
+            @input="handleInput"
+            @keyup.enter="sendMsg"
+          />
+          <div class="btn_group">
+            <div class="btn" @click.stop="sendMsg">
+              <send-icon :style="{ color: textValue ? '#039938' : '#ccc' }" />
+            </div>
           </div>
         </div>
       </div>
     </div>
+
     <div class="om_extra" style="display: none">
       <input
         ref="captureInput"
@@ -103,6 +109,7 @@ import ProgressRing from './icons/progressRing.vue';
 import AddIcon from './icons/addIcon.vue';
 import CloseBorderIcon from './icons/closeBorderIcon.vue';
 import CloseIcon from './icons/CloseIcon.vue';
+import NewChat from './icons/newChat.vue';
 
 const extraList = [
   // { name: '相機', icon: CameraIcon, type: 'camera' },
@@ -129,8 +136,12 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  newChat: {
+    type: Boolean,
+    default: false,
+  },
 });
-const Emits = defineEmits(['update:modelValue', 'send', 'tag']);
+const Emits = defineEmits(['update:modelValue', 'send', 'tag', 'call']);
 
 const fetchOptions = computed(() => {
   return {
@@ -178,7 +189,19 @@ const handleTag = (info) => {
     Emits('tag', { ...info });
   }
 };
-const sendMsg = (e) => {
+const sendMsg = () => {
+  if (
+    uFileList.value.length &&
+    uFileList.value.findIndex((f) => f.percent < 100) > -1
+  ) {
+    Emits('call', {
+      message: '文件正在上傳，請稍候...',
+      reason: 'is_uploading',
+      value: 'toast',
+      type: 'call',
+    });
+    return;
+  }
   const list = [{ content: textValue.value, text: textValue.value }];
   if (uFileList.value.length) {
     list.push({
@@ -279,6 +302,12 @@ const clearFile = (idx) => {
   uploadInput.value ? (uploadInput.value.value = '') : '';
 };
 
+const newChatFunc = () => {
+  Emits('call', {
+    type: 'new_chat',
+  });
+};
+
 const resizeTextarea = () => {
   nextTick(() => {
     if (txtEle.value) {