Merge pull request #41 from TencentCloudBase/dev

Dev

Author: Mrjing

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/chatFile/index.js

@@ -1,22 +1,22 @@
 // components/agent-ui-new/chatFIle/chatFile.js
-import { getCloudInstance, compareVersions } from "../tools";
+import { getCloudInstance, compareVersions, commonRequest } from "../tools";
 Component({
   lifetimes: {
     attached: async function () {
       console.log("enableDel", this.data.enableDel);
-      const { tempFileName, rawFileName, rawType, tempPath, fileId, botId, parsed } = this.data.fileData;
+      const { tempFileName, rawFileName, rawType, tempPath, fileId, botId, status } = this.data.fileData;
       const type = this.getFileType(rawFileName || tempFileName);
       console.log("type", type);
       if (!fileId) {
         this.setData({
-          formatSize: "上传中",
           iconPath: "../imgs/" + type + ".svg",
         });
+
+        this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, status: "uploading" });
       }
 
-      if (fileId && parsed) {
+      if (fileId && status === "parsed") {
         this.setData({
-          formatSize: this.transformSize(this.data.fileData.fileSize),
           iconPath: "../imgs/" + type + ".svg",
         });
         return;
@@ -34,15 +34,13 @@ Component({
         success: async (res) => {
           const appBaseInfo = wx.getAppBaseInfo();
           const fileId = res.fileID;
-          this.setData({
-            formatSize: "解析中",
-          });
+          this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, status: "parsing" });
 
           console.log("当前版本", appBaseInfo.SDKVersion);
           // 3.8.1 及以上版本走sdk 内置方法
           if (compareVersions(appBaseInfo.SDKVersion, "3.8.1") < 0) {
             const { token } = await cloudInstance.extend.AI.bot.tokenManager.getToken();
-            wx.request({
+            commonRequest({
               url: `https://${
                 cloudInstance.env || cloudInstance.extend.AI.bot.context.env
               }.api.tcloudbasegateway.com/v1/aibot/bots/${botId}/files`,
@@ -61,13 +59,11 @@ Component({
               method: "POST",
               success: (res) => {
                 console.log("old resolve agent file res", res);
-                this.setData({
-                  formatSize: this.transformSize(this.data.fileData.fileSize),
-                });
-                this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, fileId, parsed: true });
+                this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, fileId, status: "parsed" });
               },
-              fail(e) {
+              fail: (e) => {
                 console.log("resolve agent file e", e);
+                this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, fileId, status: "parseFailed" });
               },
             });
           } else {
@@ -87,13 +83,11 @@ Component({
               timeout: 30000,
               success: (res) => {
                 console.log("resolve agent file res", res);
-                this.setData({
-                  formatSize: this.transformSize(this.data.fileData.fileSize),
-                });
-                this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, fileId, parsed: true });
+                this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, fileId, status: "parsed" });
               },
               fail: (e) => {
                 console.log("e", e);
+                this.triggerEvent("changeChild", { tempId: this.data.fileData.tempId, fileId, status: "parseFailed" });
               },
               complete: () => {},
               header: {},
@@ -107,14 +101,9 @@ Component({
     },
   },
   observers: {
-    "fileData.fileId": function (fileId) {
-      this.setData({
-        formatSize: fileId ? this.transformSize(this.data.fileData.fileSize) : "上传中",
-      });
-    },
-    "fileData.parsed": function (parsed) {
+    "fileData.status": function (status) {
       this.setData({
-        formatSize: parsed ? this.transformSize(this.data.fileData.fileSize) : "解析中",
+        statusTxt: this.getFormatStatusText(status),
       });
     },
   },
@@ -137,7 +126,7 @@ Component({
         fileSize: 0,
         fileUrl: "",
         fileId: "",
-        parsed: false,
+        status: "",
       },
     },
   },
@@ -148,11 +137,23 @@ Component({
   data: {
     formatSize: "",
     iconPath: "../imgs/file.svg",
+    statusTextMap: {
+      uploading: "上传中",
+      parsing: "解析中",
+      parseFailed: "解析失败",
+    },
+    statusTxt: "",
   },
   /**
    * 组件的方法列表，
    */
   methods: {
+    getFormatStatusText: function (status) {
+      if (status === "parsed") {
+        return this.transformSize(this.data.fileData.fileSize);
+      }
+      return this.data.statusTextMap[status] || "";
+    },
     generateCosUploadPath: function (botId, fileName) {
       return `agent_file/${botId}/${fileName}`;
     },

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/chatFile/index.wxml

@@ -5,8 +5,8 @@
     <image class="chat_file__icon" src="{{iconPath}}" />
     <view class="chat_file__info">
       <view class="chat_file__name">{{fileData.rawFileName || fileData.tempFileName}}</view>
-      <view class="chat_file__size">{{formatSize}}
-      <image wx:if="{{!fileData.fileId || !fileData.parsed}}" style="width: 15px;height:15px;margin-left: 5px" src="../imgs/loading.svg" mode=""/>
+      <view class="chat_file__size">{{statusTxt}}
+      <image wx:if="{{fileData.status === 'uploading' || fileData.status === 'parsing'}}" style="width: 15px;height:15px;margin-left: 5px" src="../imgs/loading.svg" mode=""/>
       </view>
     </view>
   </view>

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.js

@@ -460,7 +460,7 @@ Component({
                   };
                   if (item.role === "user" && item.fileInfos) {
                     transformItem.fileList = item.fileInfos.map((item) => ({
-                      parsed: true,
+                      status: "parsed",
                       rawFileName: item.fileName,
                       rawType: item.type,
                       fileId: item.cloudId,
@@ -569,7 +569,7 @@ Component({
               fileUrl: "",
               fileId: "",
               botId: self.data.agentConfig.botId,
-              parsed: false,
+              status: "",
             };
           });
 
@@ -679,7 +679,7 @@ Component({
               fileUrl: "",
               fileId: "",
               botId: self.data.agentConfig.botId,
-              parsed: false,
+              status: "",
             };
           });
           // 过滤掉已选择中的 image 文件（保留file)
@@ -780,7 +780,7 @@ Component({
     },
     handleSendMessage: async function (event) {
       // 发送消息前校验所有文件上传状态
-      if (this.data.sendFileList.some((item) => !item.fileId || !item.parsed)) {
+      if (this.data.sendFileList.some((item) => !item.fileId || item.status !== "parsed")) {
         wx.showToast({
           title: "文件上传解析中",
           icon: "error",
@@ -1255,15 +1255,21 @@ Component({
     },
     handleChangeChild: function (e) {
       console.log("change", e.detail);
-      const { fileId, tempId, parsed } = e.detail;
+      const { fileId, tempId, status } = e.detail;
       // const curFile = this.data.sendFileList.find(item => item.tempId === tempId)
       // curFile.fileId = fileId
       const newSendFileList = this.data.sendFileList.map((item) => {
         if (item.tempId === tempId) {
+          const obj = {}
+          if(fileId) {
+            obj.fileId = fileId
+          }
+          if(status) {
+            obj.status = status
+          }
           return {
             ...item,
-            fileId,
-            parsed,
+            ...obj
           };
         }
         return item;

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.wxss

@@ -7,6 +7,7 @@
   flex-direction: column;
   overflow:hidden;
   color: #333;
+  background-color: #fff;
 }
 
 .nav {
@@ -19,7 +20,7 @@
 }
 
 .navBar {
-  height: 72px;
+  height: 62px;
   width: 100%;
   box-shadow: 0 16px 16px #fff;
   /* background: linear-gradient(to bottom, 
@@ -70,7 +71,7 @@
 }
 
 .nav-content {
-  height:100%;
+  height:62px;
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -128,7 +129,7 @@
 
 .footer {
   width: 100%;
-  min-height: 80px;
+  min-height: 65px;
   max-height: 380px;
   flex-shrink: 0;
   /* background-color: aquamarine; */
@@ -488,14 +489,18 @@
   flex-wrap: nowrap;
   overflow-x: scroll;
   /* margin-bottom: 15px; */
-  padding: 20rpx 0rpx;
+  padding: 20rpx 0rpx 0rpx;
 }
 
 .tool_box .function {
   /* flex: 0 0 calc(25% - 20px); */
   background-color: #f3f4f6;
 }
 
+.function:active {
+  transform: scale(0.95);
+}
+
 .webSearchSwitch {
   width: 200rpx;
   height: 30px;

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/tools.js

@@ -89,3 +89,39 @@ export const compareVersions = (version1, version2) => {
   }
   return 0;
 };
+
+let isDomainWarn = false
+
+export const commonRequest = (options) => {
+  const self = this
+  return wx.request({
+    ...options,
+    fail: (e) => {
+      if(options.fail) {
+        options.fail.bind(self)(e)
+        if(e.errno === 600002 || e.errMsg.includes("url not in domain list")) {
+          const { url } = options
+          let msg = `请前往微信公众平台 request 合法域名配置中添加云开发域名 https://{envid}.api.tcloudbasegateway.com`
+          if(url) {
+            const regex = /^(https?:\/\/[^/?#]+)/i;
+            const matches = url.match(regex);
+            console.log('matches', matches)
+            if(matches[1]) {
+              msg = `请前往微信公众平台 request 合法域名配置中添加云开发域名 ${matches[1]}`
+            }
+          }
+          if(!isDomainWarn) {
+            isDomainWarn = true
+            wx.showModal({
+              title: "提示",
+              content: msg,
+              complete: () => {
+                isDomainWarn = false
+              }
+            })
+          }
+        }
+      }
+    }
+  })
+}