update conversation ui

ZhiShuYun · Dec 11, 2023 · 66291b8 · 66291b8
1 parent 0a0bfab
commit 66291b8
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 29 deletions.
diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
@@ -4,24 +4,20 @@
       v-model="value"
       :rows="2"
       type="textarea"
-      placeholder="Please input"
+      :placeholder="$t('chat.message.newMessagePlaceholder')"
       @keydown.enter.exact.prevent="onSubmit"
     />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElInput, ElButton } from 'element-plus';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ROUTE_CHAT_INDEX } from '@/router/constants';
+import { ElInput } from 'element-plus';
 
 export default defineComponent({
   name: 'InputBox',
   components: {
-    ElInput,
-    ElButton,
-    FontAwesomeIcon
+    ElInput
   },
   props: {
     modelValue: {

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -11,10 +11,8 @@
 </template>
 
 <script lang="ts">
-import { IContent, IError, IMessage } from '@/operators/message/models';
 import { defineComponent } from 'vue';
 import AnsweringMark from './AnsweringMark.vue';
-// import MessageContent from './MessageContent.vue';
 import { ElImage, ElButton } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import copy from 'copy-to-clipboard';
@@ -29,11 +27,7 @@ interface IData {
 export default defineComponent({
   name: 'Message',
   components: {
-    // MessageContent,
-    // ElImage,
-    ElButton,
     CopyToClipboard,
-    // FontAwesomeIcon,
     AnsweringMark,
     MarkdownRenderer
   },

diff --git a/src/components/chat/Sidebar.vue b/src/components/chat/Sidebar.vue
@@ -12,13 +12,44 @@
           <font-awesome-icon icon="fa-regular fa-comment" class="icon" />
         </div>
         <div class="title">
-          <span v-if="conversation?.messages">{{
-            conversation?.messages[conversation?.messages.length - 1]?.content
+          <span v-if="conversation?.deleting">
+            {{ `${$t('chat.message.confirmDelete')}?` }}
+          </span>
+          <span v-else-if="conversation?.editing">
+            <el-input v-model="conversation.title" @keydown.enter="onConfirm(conversation)" />
+          </span>
+          <span v-else-if="conversation?.title || conversation?.messages">{{
+            conversation?.title || conversation?.messages[conversation?.messages.length - 1]?.content
           }}</span>
         </div>
         <div class="operations">
-          <font-awesome-icon icon="fa-solid fa-edit" class="icon icon-edit" />
-          <font-awesome-icon icon="fa-solid fa-trash" class="icon icon-delete" />
+          <font-awesome-icon
+            v-if="!conversation?.editing && !conversation.deleting"
+            icon="fa-solid fa-edit"
+            class="icon icon-edit"
+            @click.stop="conversation.editing = true"
+          />
+          <font-awesome-icon
+            v-if="!conversation?.editing && !conversation.deleting"
+            icon="fa-solid fa-trash"
+            class="icon icon-delete"
+            @click.stop="conversation.deleting = true"
+          />
+          <font-awesome-icon
+            v-if="conversation?.editing || conversation.deleting"
+            icon="fa-solid fa-check"
+            class="icon icon-confirm"
+            @click.stop="onConfirm(conversation)"
+          />
+          <font-awesome-icon
+            v-if="conversation?.editing || conversation.deleting"
+            icon="fa-solid fa-xmark"
+            class="icon icon-cancel"
+            @click.stop="
+              conversation.editing = false;
+              conversation.deleting = false;
+            "
+          />
         </div>
       </div>
     </div>
@@ -27,7 +58,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElTooltip, ElButton, ElSkeleton } from 'element-plus';
+import { ElTooltip, ElButton, ElSkeleton, ElInput } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { ROUTE_CHAT_CONVERSATION } from '@/router/constants';
 import { apiUsageOperator, IApplication, chatOperator } from '@/operators';
@@ -42,6 +73,7 @@ export default defineComponent({
   name: 'Sidebar',
   components: {
     ElButton,
+    ElInput,
     FontAwesomeIcon,
     ElSkeleton
   },
@@ -67,6 +99,17 @@ export default defineComponent({
   },
   mounted() {},
   methods: {
+    async onConfirm(conversation: IChatConversation) {
+      if (conversation?.deleting) {
+        await chatOperator.deleteConversation(conversation.id);
+        await this.onFetchAllConversations();
+      } else if (conversation?.editing) {
+        await chatOperator.updateConversation(conversation);
+        this.onFetchAllConversations();
+      } else {
+        conversation.editing = true;
+      }
+    },
     async onFetchAllConversations() {
       this.loading = true;
       const {
@@ -84,7 +127,7 @@ export default defineComponent({
         .map((apiUsage) => apiUsage.metadata?.conversation_id)
         .filter((id) => id);
       const uniqueConversationIds = [...new Set(conversationIds)];
-      const conversations = (await chatOperator.conversations(uniqueConversationIds)).data;
+      const conversations = (await chatOperator.getConversations(uniqueConversationIds)).data;
       this.conversations = conversations;
     },
     onClick(id: string) {
@@ -116,7 +159,7 @@ export default defineComponent({
     align-items: center;
     .conversation {
       width: 100%;
-      height: 50px;
+      height: 55px;
       display: flex;
       flex-direction: row;
       padding: 10px;
@@ -138,13 +181,16 @@ export default defineComponent({
         flex: 1;
         font-size: 14px;
         overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 8px;
+        color: #666;
       }
       .operations {
-        width: 45px;
+        width: 40px;
         .icon {
           cursor: pointer;
           font-size: 14px;
-          margin-right: 8px;
+          margin-right: 6px;
         }
       }
     }

diff --git a/src/i18n/zh/chat/message.ts b/src/i18n/zh/chat/message.ts
@@ -23,6 +23,5 @@ export default {
   errorUsedUp: '您的套餐次数已经用完，请购买更多次数继续使用',
   errorUnknown: '服务器出现未知错误，请稍后重试或联系客服',
   errorTimeout: '回答问题超时，请稍后重试',
-  howToBreakLine: '按 Shift+Enter 键可以换行',
-
+  howToBreakLine: '按 Shift+Enter 键可以换行'
 };
diff --git a/src/operators/chat/models.ts b/src/operators/chat/models.ts
@@ -44,6 +44,9 @@ export interface IChatMessage {
 export interface IChatConversation {
   id: string;
   messages: IChatMessage[];
+  title?: string;
+  deleting?: boolean;
+  editing?: boolean;
 }
 
 export interface IChatAskOptions {

diff --git a/src/operators/chat/operator.ts b/src/operators/chat/operator.ts
@@ -9,7 +9,7 @@ import {
 import { ENDPOINT_API } from '../common/contants';
 
 class ChatOperator {
-  async ask(data: IChatAskRequest, options: IChatAskOptions): Promise<AxiosResponse<IChatAskResponse>> {
+  async askQuestion(data: IChatAskRequest, options: IChatAskOptions): Promise<AxiosResponse<IChatAskResponse>> {
     return await axios.post(options.path, data, {
       headers: {
         authorization: `Bearer ${options.token}`,
@@ -32,7 +32,7 @@ class ChatOperator {
     });
   }
 
-  async conversation(id: string | undefined): Promise<AxiosResponse<IChatConversation>> {
+  async getConversation(id: string | undefined): Promise<AxiosResponse<IChatConversation>> {
     return await axios.post(
       `/chatgpt/conversations`,
       {
@@ -48,7 +48,7 @@ class ChatOperator {
     );
   }
 
-  async conversations(ids: string[]): Promise<AxiosResponse<IChatConversation[]>> {
+  async getConversations(ids: string[]): Promise<AxiosResponse<IChatConversation[]>> {
     return await axios.post(
       `/chatgpt/conversations`,
       {
@@ -63,6 +63,38 @@ class ChatOperator {
       }
     );
   }
+
+  async deleteConversation(id: string): Promise<AxiosResponse<IChatConversation>> {
+    return await axios.post(
+      `/chatgpt/conversations`,
+      {
+        action: IChatConversationAction.DELETE,
+        id: id
+      },
+      {
+        headers: {
+          'content-type': 'application/json'
+        },
+        baseURL: ENDPOINT_API
+      }
+    );
+  }
+
+  async updateConversation(payload: IChatConversation): Promise<AxiosResponse<IChatConversation>> {
+    return await axios.post(
+      `/chatgpt/conversations`,
+      {
+        action: IChatConversationAction.UPDATE,
+        ...payload
+      },
+      {
+        headers: {
+          'content-type': 'application/json'
+        },
+        baseURL: ENDPOINT_API
+      }
+    );
+  }
 }
 
 export const chatOperator = new ChatOperator();
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -122,7 +122,7 @@ export default defineComponent({
       await this.onFetchAnswer();
     },
     async onFetchHistory(id?: string) {
-      const { data: data } = await chatOperator.conversation(id || this.conversationId);
+      const { data: data } = await chatOperator.getConversation(id || this.conversationId);
       this.messages = data.messages || [];
     },
     async onFetchAnswer() {
@@ -141,7 +141,7 @@ export default defineComponent({
       });
       // request server to get answer
       chatOperator
-        .ask(
+        .askQuestion(
           {
             question,
             conversation_id: this.conversationId,
@@ -231,6 +231,8 @@ export default defineComponent({
 
     .dialogue {
       flex: 1;
+      overflow-y: scroll;
+      margin: 20px 0;
       .messages {
         padding-top: 30px;
         .message {

diff --git a/src/pages/chat/Index.vue b/src/pages/chat/Index.vue
@@ -27,6 +27,9 @@ import {
 } from '@/operators/chat/constants';
 
 interface IData {
+  model: string;
+  drawer: boolean;
+  question: string;
   initializing: boolean;
   applications: IApplication[];
 }
@@ -108,6 +111,10 @@ export default defineComponent({
         font-size: 14px;
         margin-bottom: 15px;
       }
+
+      .el-button {
+        border-radius: 20px;
+      }
     }
   }
 }