cs

components/message-input.vue

@@ -7,21 +7,20 @@
     />
 </template>
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import ChatInput, {
+    import { Component, Ref, Vue, Watch } from "vue-property-decorator";
+    import ChatInput, {
         FILE_INFO_CLASS,
         isImageOrFile,
-} from "../hybrid-input/index.vue";
-import { Message, MessageType } from "../model";
-import { uploadFile } from "../service/upload";
-import { ChatLoggerService } from "../xim/logger";
-import xim from "../xim/xim";
-import { ChatStore, chatStore } from "@/customer-service/store/model";
+    } from "../hybrid-input/index.vue";
+    import { Message, MessageType } from "../model";
+    import { uploadFile } from "../service/upload";
+    import xim from "../xim/xim";
+    import { ChatStore, chatStore } from "@/customer-service/store/model";
 
-let sendingMessageIndex = 1;
+    let sendingMessageIndex = 1;
 
-@Component({ components: { ChatInput } })
-export default class MessageInput extends Vue {
+    @Component({ components: { ChatInput } })
+    export default class MessageInput extends Vue {
         @chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE)
         private readonly chatRoomVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
 
@@ -58,26 +57,30 @@ export default class MessageInput extends Vue {
             this.chatInput.focus();
         }
 
-    private async sendMessage(msg: ChildNode[], done: () => void) {
+        private async sendMessage(msg: ChildNode[]) {
             if (this.chatIniting) {
                 return;
             }
             for (const item of msg) {
                 if (isImageOrFile(item)) {
                     if ((item as Element).classList.contains(FILE_INFO_CLASS)) {
-                    await this.sendFile(item, MessageType.File);
+                        await this.sendFile(item, MessageType.File).catch((e) =>
+                            this.onError(e)
+                        );
                     } else {
-                    await this.sendFile(item, MessageType.Image);
+                        await this.sendFile(item, MessageType.Image).catch((e) =>
+                            this.onError(e)
+                        );
                     }
                     continue;
                 }
 
                 if (item.textContent) {
-                await this.sendText(item.textContent);
+                    await this.sendText(item.textContent).catch((e) =>
+                        this.onError(e)
+                    );
                 }
             }
-        ChatLoggerService.logger?.debug("all messages sent");
-        done();
             this.$emit("sent");
         }
 
@@ -92,11 +95,17 @@ export default class MessageInput extends Vue {
                 if (this.source) {
                     Object.assign(msg, { source: this.source });
                 }
-            return this.sendMsg({ msgType: MessageType.Text, msg: JSON.stringify(msg) });
+                return this.sendMsg({
+                    msgType: MessageType.Text,
+                    msg: JSON.stringify(msg),
+                });
             }
         }
 
-    private async sendFile(file: any, type: MessageType.Image | MessageType.File) {
+        private async sendFile(
+            file: any,
+            type: MessageType.Image | MessageType.File
+        ) {
             const src = JSON.parse(
                 file.attributes[`data-${type}`]?.value || ""
             ) as {
@@ -186,5 +195,5 @@ export default class MessageInput extends Vue {
         private onError(e: any) {
             this.$emit("error", e.message || e);
         }
-}
+    }
 </script>

hybrid-input/index.vue

@@ -60,9 +60,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import { namespace } from "vuex-class";
-import {
+    import { Component, Ref, Vue, Watch } from "vue-property-decorator";
+    import { namespace } from "vuex-class";
+    import {
         getFileType,
         getSvg,
         MAX_FILE_SIZE,
@@ -72,48 +72,48 @@ import {
         MESSAGE_FILE_EMPTY,
         MESSAGE_FILE_TOO_LARGE,
         MESSAGE_IMAGE_TOO_LARGE,
-} from "../components/message-item/file-controller";
-import { EmojiItem, EmojiService } from "../service/emoji";
-import { ChatStore } from "../store/model";
-import { formatFileSize } from "../utils";
+    } from "../components/message-item/file-controller";
+    import { EmojiItem, EmojiService } from "../service/emoji";
+    import { ChatStore } from "../store/model";
+    import { formatFileSize } from "../utils";
 
-export const enum InputMessageType {
+    export const enum InputMessageType {
         Text = "text",
         Image = "image",
         File = "file",
-}
+    }
 
-export interface InputMessageBody {
+    export interface InputMessageBody {
         text?: string;
         url?: string;
         name?: string;
         size?: number;
-}
+    }
 
-export interface InputMessage {
+    export interface InputMessage {
         type: InputMessageType;
         body: InputMessageBody;
         file?: File | null;
-}
+    }
 
-const chatStore = namespace("chatStore");
+    const chatStore = namespace("chatStore");
 
-const chatCache: { [key: number]: any } = {};
+    const chatCache: { [key: number]: any } = {};
 
-export const IMAGE_INFO_CLASS = "img-info";
-export const FILE_INFO_CLASS = "file-info";
+    export const IMAGE_INFO_CLASS = "img-info";
+    export const FILE_INFO_CLASS = "file-info";
 
-export function isImageOrFile(node: ChildNode) {
+    export function isImageOrFile(node: ChildNode) {
         const e = node as HTMLElement;
         return (
             e.classList &&
             (e.classList.contains(IMAGE_INFO_CLASS) ||
                 e.classList.contains(FILE_INFO_CLASS))
         );
-}
+    }
 
-@Component({ components: {} })
-export default class Input extends Vue {
+    @Component({ components: {} })
+    export default class Input extends Vue {
         @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
         private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
@@ -300,22 +300,13 @@ export default class Input extends Vue {
             if (e.shiftKey || e.ctrlKey || e.altKey) {
                 return;
             }
-        return new Promise((resolve, reject) => {
-            try {
             const data = this.getNodeListFromInputBox();
-                this.$emit("send", data, resolve);
-            } catch (e) {
-                this.$emit("error", e);
-                reject(e);
-            }
-        })
-            .then(() => {
+            this.$emit("send", data);
             this.clearInput();
             if (this.chatId) {
                 chatCache[this.chatId] = [];
             }
-            })
-            .finally(() => setTimeout(() => this.getMyChatList(), 120));
+            setTimeout(() => this.getMyChatList(), 120);
         }
 
         /**
@@ -543,11 +534,11 @@ export default class Input extends Vue {
                 });
             });
         }
-}
+    }
 </script>
 
 <style lang="less" scoped>
-.input-wrap {
+    .input-wrap {
         position: relative;
         padding-left: 20px;
 
@@ -619,9 +610,9 @@ export default class Input extends Vue {
             top: -225px;
             outline: 0;
         }
-}
+    }
 
-.tool-bar {
+    .tool-bar {
         padding-top: 10px;
         user-select: none;
 
@@ -634,9 +625,9 @@ export default class Input extends Vue {
         .offset {
             margin: 0 22px;
         }
-}
+    }
 
-.emoji-picker {
+    .emoji-picker {
         position: absolute;
         z-index: 2;
         top: -232px;
@@ -664,10 +655,10 @@ export default class Input extends Vue {
             justify-content: center;
             align-items: center;
         }
-}
+    }
 
-#chat-upload-file {
+    #chat-upload-file {
         visibility: hidden;
         position: absolute;
-}
+    }
 </style>