From 2c9bf1db3406f30c4a23cb311b9a07ccc22adf9f Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sun, 31 Dec 2023 14:57:37 +0800
Subject: [PATCH] update input box

---
 src/components/chat/InputBox.vue | 13 +++++++++--
 src/components/chat/Message.vue  | 23 +++++++++++++++----
 src/operators/chat/models.ts     |  8 ++++++-
 src/pages/chat/Conversation.vue  | 39 ++++++++++++++++++++++++--------
 4 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
index d9fb2d0..df2f6e1 100644
--- a/src/components/chat/InputBox.vue
+++ b/src/components/chat/InputBox.vue
@@ -100,6 +100,14 @@ export default defineComponent({
     },
     questionValue(val: string) {
       this.$emit('update:question', val);
+    },
+    question(val: string) {
+      this.questionValue = val;
+    },
+    references(val: string[]) {
+      if (val.length === 0) {
+        this.fileList = [];
+      }
     }
   },
   methods: {
@@ -127,7 +135,8 @@ export default defineComponent({
       background: none;
       box-shadow: none;
       resize: none;
-      line-height: 25px;
+      line-height: 30px;
+      height: 40px;
     }
   }
   .el-upload-list {
@@ -176,7 +185,7 @@ export default defineComponent({
     z-index: 10000;
     cursor: pointer;
     position: absolute;
-    top: 4px;
+    top: 7px;
     &.btn-upload {
       left: 10px;
       .icon-attachment {
diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
index 85ef14a..73bea08 100644
--- a/src/components/chat/Message.vue
+++ b/src/components/chat/Message.vue
@@ -1,11 +1,17 @@
 <template>
   <div :class="'message ' + message.role" :role="message.role">
     <div class="content">
-      <markdown-renderer :content="message?.content" />
+      <markdown-renderer v-if="!Array.isArray(message.content)" :content="message?.content" />
+      <div v-else>
+        <div v-for="(item, index) in message.content" :key="index">
+          <img v-if="item.type === 'image_url'" :src="item.image_url" fit="cover" class="image" />
+          <markdown-renderer v-if="item.type === 'text'" :key="index" :content="item.text" />
+        </div>
+      </div>
       <answering-mark v-if="message.state === messageState.PENDING" />
     </div>
     <div class="operations">
-      <copy-to-clipboard :content="message.content" class="btn-copy" />
+      <copy-to-clipboard v-if="!Array.isArray(message.content)" :content="message.content" class="btn-copy" />
     </div>
   </div>
 </template>
@@ -14,6 +20,7 @@
 import { defineComponent } from 'vue';
 import AnsweringMark from './AnsweringMark.vue';
 import copy from 'copy-to-clipboard';
+import { ElImage } from 'element-plus';
 import MarkdownRenderer from '@/components/common/MarkdownRenderer.vue';
 import { IChatMessage, IChatMessageState } from '@/operators';
 import CopyToClipboard from '../common/CopyToClipboard.vue';
@@ -27,7 +34,8 @@ export default defineComponent({
   components: {
     CopyToClipboard,
     AnsweringMark,
-    MarkdownRenderer
+    MarkdownRenderer,
+    ElImage
   },
   props: {
     message: {
@@ -49,7 +57,7 @@ export default defineComponent({
   },
   methods: {
     onCopy() {
-      copy(this.message.content, {
+      copy(this.message.content.toString(), {
         debug: true
       });
       this.copied = true;
@@ -91,7 +99,12 @@ export default defineComponent({
     border-radius: 10px;
     padding: 8px 15px;
     max-width: 800px;
-    // background-color: aqua;
+    .image {
+      max-width: 100%;
+      max-height: 300px;
+      margin: 5px 0;
+      border-radius: 10px;
+    }
   }
 
   .operations {
diff --git a/src/operators/chat/models.ts b/src/operators/chat/models.ts
index d8e85ab..b26446f 100644
--- a/src/operators/chat/models.ts
+++ b/src/operators/chat/models.ts
@@ -36,9 +36,15 @@ export enum IChatMessageState {
   FAILED = 'failed'
 }
 
+export interface IChatMessageContentItem {
+  type: string;
+  text?: string;
+  image_url?: string;
+}
+
 export interface IChatMessage {
   state?: IChatMessageState;
-  content: string;
+  content: string | IChatMessageContentItem[];
   role?: typeof ROLE_SYSTEM | typeof ROLE_ASSISTANT | typeof ROLE_USER;
   error?: IError;
 }
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index 7ade15e..9b912b0 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -19,7 +19,7 @@
         :references="references"
         @update:question="question = $event"
         @update:references="references = $event"
-        @submit="onSubmitQuestion"
+        @submit="onSubmit"
       />
     </div>
   </div>
@@ -126,12 +126,29 @@ export default defineComponent({
       await this.onCreateNewConversation();
       await this.$store.dispatch('chat/getApplications');
     },
-    async onSubmitQuestion() {
-      this.messages.push({
-        content: this.question,
-        role: ROLE_USER
-      });
-      this.question = '';
+    async onSubmit() {
+      if (this.references.length > 0) {
+        let content = [];
+        content.push({
+          type: 'text',
+          text: this.question
+        });
+        for (let i = 0; i < this.references.length; i++) {
+          content.push({
+            type: 'image_url',
+            image_url: this.references[i]
+          });
+        }
+        this.messages.push({
+          content: content,
+          role: ROLE_USER
+        });
+      } else {
+        this.messages.push({
+          content: this.question,
+          role: ROLE_USER
+        });
+      }
       await this.onFetchAnswer();
     },
     async onScrollDown() {
@@ -144,11 +161,15 @@ export default defineComponent({
       const token = this.application?.credential?.token;
       const endpoint = this.application?.api?.endpoint;
       const path = this.application?.api?.path;
-      const question = this.messages[this.messages.length - 1].content?.trim();
+      const question = this.question;
+      const references = this.references;
       if (!token || !endpoint || !question || !path) {
         console.error('no token or endpoint or question');
         return;
       }
+      // reset question and references
+      this.question = '';
+      this.references = [];
       let conversationId = this.conversationId;
       this.messages.push({
         content: '',
@@ -161,7 +182,7 @@ export default defineComponent({
         .askQuestion(
           {
             question,
-            references: this.references,
+            references,
             conversation_id: this.conversationId,
             stateful: true
           },