From c56ab7925d2f35227fdb43f68b6ebf8ec7ee27f9 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sun, 31 Dec 2023 15:27:30 +0800
Subject: [PATCH] update error handling

---
 src/components/chat/InputBox.vue              |  2 +-
 src/components/chat/Message.vue               | 39 ++++++++++++++++---
 src/components/chat/SidePanel.vue             | 10 ++++-
 .../midjourney/tasks/TaskPreview.vue          |  2 +-
 src/constants/errorCode.ts                    |  3 +-
 src/pages/chat/Conversation.vue               |  2 +-
 6 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
index df2f6e1..e26038a 100644
--- a/src/components/chat/InputBox.vue
+++ b/src/components/chat/InputBox.vue
@@ -155,7 +155,7 @@ export default defineComponent({
   border-radius: 10px;
   background: none;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
-  top: 40px;
+  top: 50px;
   .upload {
     display: inline-block;
     &.disabled {
diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
index 73bea08..2cec732 100644
--- a/src/components/chat/Message.vue
+++ b/src/components/chat/Message.vue
@@ -9,6 +9,7 @@
         </div>
       </div>
       <answering-mark v-if="message.state === messageState.PENDING" />
+      <el-alert v-if="errorText && message.role === 'assistant'" :title="errorText" type="error" :closable="false" />
     </div>
     <div class="operations">
       <copy-to-clipboard v-if="!Array.isArray(message.content)" :content="message.content" class="btn-copy" />
@@ -20,10 +21,19 @@
 import { defineComponent } from 'vue';
 import AnsweringMark from './AnsweringMark.vue';
 import copy from 'copy-to-clipboard';
-import { ElImage } from 'element-plus';
+import { ElAlert } from 'element-plus';
 import MarkdownRenderer from '@/components/common/MarkdownRenderer.vue';
 import { IChatMessage, IChatMessageState } from '@/operators';
 import CopyToClipboard from '../common/CopyToClipboard.vue';
+import {
+  ERROR_CODE_API_ERROR,
+  ERROR_CODE_BAD_REQUEST,
+  ERROR_CODE_CONTENT_TOO_LARGE,
+  ERROR_CODE_TIMEOUT,
+  ERROR_CODE_TOO_MANY_REQUESTS,
+  ERROR_CODE_UNKNOWN,
+  ERROR_CODE_USED_UP
+} from '@/constants';
 interface IData {
   copied: boolean;
   messageState: typeof IChatMessageState;
@@ -35,7 +45,7 @@ export default defineComponent({
     CopyToClipboard,
     AnsweringMark,
     MarkdownRenderer,
-    ElImage
+    ElAlert
   },
   props: {
     message: {
@@ -51,9 +61,28 @@ export default defineComponent({
     };
   },
   computed: {
-    // conversationId() {
-    //   return this.$route.params?.id?.toString();
-    // }
+    errorText() {
+      if (!this.message.error || !this.message.error?.code) {
+        return undefined;
+      }
+      switch (this.message.error?.code) {
+        case ERROR_CODE_USED_UP:
+          return this.$t('chat.message.errorUsedUp');
+        case ERROR_CODE_API_ERROR:
+          return this.$t('chat.message.errorApiError');
+        case ERROR_CODE_BAD_REQUEST:
+          return this.$t('chat.message.errorBadRequest');
+        case ERROR_CODE_TIMEOUT:
+          return this.$t('chat.message.errorTimeout');
+        case ERROR_CODE_TOO_MANY_REQUESTS:
+          return this.$t('chat.message.errorTooManyRequests');
+        case ERROR_CODE_CONTENT_TOO_LARGE:
+          return this.$t('chat.message.errorContentTooLarge');
+        case ERROR_CODE_UNKNOWN:
+        default:
+          return this.$t('chat.message.errorUnknown');
+      }
+    }
   },
   methods: {
     onCopy() {
diff --git a/src/components/chat/SidePanel.vue b/src/components/chat/SidePanel.vue
index 28503eb..03a9c29 100644
--- a/src/components/chat/SidePanel.vue
+++ b/src/components/chat/SidePanel.vue
@@ -13,7 +13,7 @@
       <div
         v-for="(conversation, conversationIndex) in conversations"
         :key="conversationIndex"
-        class="conversation"
+        :class="{ conversation: true, active: conversation.id === conversationId }"
         @click="onClick(conversation.id)"
       >
         <div class="icons">
@@ -84,6 +84,9 @@ export default defineComponent({
   props: {},
   emits: ['click'],
   computed: {
+    conversationId() {
+      return this.$route.params?.id?.toString();
+    },
     conversations() {
       return this.$store.state.chat.conversations;
     },
@@ -156,6 +159,11 @@ export default defineComponent({
       color: #666;
       cursor: pointer;
 
+      &.active,
+      &:hover {
+        background-color: #eee;
+      }
+
       .icons {
         width: 30px;
         padding-left: 10px;
diff --git a/src/components/midjourney/tasks/TaskPreview.vue b/src/components/midjourney/tasks/TaskPreview.vue
index ddf64e3..2e78648 100644
--- a/src/components/midjourney/tasks/TaskPreview.vue
+++ b/src/components/midjourney/tasks/TaskPreview.vue
@@ -19,7 +19,7 @@
         </el-tag>
       </div>
     </div>
-    <div v-if="!full" class="extra">
+    <div class="extra">
       <p v-if="modelValue?.request?.prompt" class="prompt">
         <font-awesome-icon icon="fa-solid fa-magic" class="mr-1" />
         {{ modelValue?.request?.prompt }}
diff --git a/src/constants/errorCode.ts b/src/constants/errorCode.ts
index e569758..40cadc2 100644
--- a/src/constants/errorCode.ts
+++ b/src/constants/errorCode.ts
@@ -3,8 +3,9 @@ export const ERROR_CODE_DUPLICATION = 'duplication';
 export const ERROR_CODE_BUSY = 'busy';
 export const ERROR_CODE_API_ERROR = 'api_error';
 export const ERROR_CODE_BAD_REQUEST = 'bad_request';
-export const ERROR_CODE_NO_CONVERSATION = 'no_conversation';
 export const ERROR_CODE_USED_UP = 'used_up';
 export const ERROR_CODE_UNKNOWN = 'unknown';
 export const ERROR_CODE_CANCELED = 'canceled';
 export const ERROR_CODE_TIMEOUT = 'timeout';
+export const ERROR_CODE_CONTENT_TOO_LARGE = 'content_too_large';
+export const ERROR_CODE_TOO_MANY_REQUESTS = 'too_many_requests';
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index 9b912b0..9cd8a78 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -275,7 +275,7 @@ export default defineComponent({
   }
   .bottom {
     width: 100%;
-    height: 100px;
+    height: 110px;
   }
 }
 </style>