From ab2112121e95379e038f495bf1b1438f52a22b99 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sun, 28 Jan 2024 02:13:18 +0800
Subject: [PATCH] update conversation

---
 src/components/chat/Message.vue          |   3 -
 src/components/chatdoc/AnsweringMark.vue |  40 ++++
 src/components/chatdoc/Conversations.vue |  26 ++-
 src/components/chatdoc/InputBox.vue      | 223 +++++++++++++++++++++++
 src/components/chatdoc/Message.vue       | 175 ++++++++++++++++++
 src/i18n/zh/chatdoc/message.ts           |  13 +-
 src/operators/chat/models.ts             |   2 +-
 src/operators/chatdoc/models.ts          |  15 ++
 src/operators/chatdoc/operator.ts        |   7 +-
 src/pages/chatdoc/Conversation.vue       | 218 +++++++++++++++++++++-
 10 files changed, 699 insertions(+), 23 deletions(-)
 create mode 100644 src/components/chatdoc/AnsweringMark.vue
 create mode 100644 src/components/chatdoc/InputBox.vue
 create mode 100644 src/components/chatdoc/Message.vue

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
index ccaa925..3e4c20d 100644
--- a/src/components/chat/Message.vue
+++ b/src/components/chat/Message.vue
@@ -126,9 +126,6 @@ export default defineComponent({
         }
       });
     }
-    // onStop() {
-    //   this.$emit('stop');
-    // }
   }
 });
 </script>
diff --git a/src/components/chatdoc/AnsweringMark.vue b/src/components/chatdoc/AnsweringMark.vue
new file mode 100644
index 0000000..91e9102
--- /dev/null
+++ b/src/components/chatdoc/AnsweringMark.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="box"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'AnsweringMark',
+  data() {
+    return {};
+  },
+  computed: {
+    conversationId() {
+      return this.$route.params?.conversationId?.toString();
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.box {
+  width: 2px;
+  height: 16px;
+  margin-top: 3px;
+  background-color: var(--el-color-black);
+  animation: blink 1s infinite;
+}
+</style>
diff --git a/src/components/chatdoc/Conversations.vue b/src/components/chatdoc/Conversations.vue
index 3a1f965..ec9851c 100644
--- a/src/components/chatdoc/Conversations.vue
+++ b/src/components/chatdoc/Conversations.vue
@@ -68,9 +68,8 @@
 import { defineComponent } from 'vue';
 import { ElSkeleton, ElInput } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ROUTE_CHAT_CONVERSATION } from '@/router/constants';
-import { IChatdocRepository, chatdocOperator } from '@/operators';
-import { IChatdocConversation } from '@/operators';
+import { ROUTE_CHATDOC_CONVERSATION, ROUTE_CHATDOC_CONVERSATION_NEW } from '@/router/constants';
+import { IChatdocRepository, chatdocOperator, IChatdocConversation } from '@/operators';
 
 export default defineComponent({
   name: 'SidePanel',
@@ -82,11 +81,14 @@ export default defineComponent({
   props: {},
   emits: ['click'],
   computed: {
+    repositoryId() {
+      return this.$route.params?.repositoryId?.toString();
+    },
     conversationId() {
-      return this.$route.params?.id?.toString();
+      return this.$route.params?.conversationId?.toString();
     },
     repository(): IChatdocRepository | undefined {
-      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.id);
+      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.repositoryId);
     },
     conversations() {
       return this.repository?.conversations;
@@ -97,9 +99,12 @@ export default defineComponent({
   },
   methods: {
     async onNewConversation() {
-      // this.$router.push({
-      //   name: ROUTE_CHATDOC_CONVERSATION
-      // });
+      this.$router.push({
+        name: ROUTE_CHATDOC_CONVERSATION_NEW,
+        params: {
+          repositoryId: this.repositoryId
+        }
+      });
     },
     async onConfirm(conversation: IChatdocConversation) {
       if (conversation?.deleting) {
@@ -117,9 +122,10 @@ export default defineComponent({
         return;
       }
       this.$router.push({
-        name: ROUTE_CHAT_CONVERSATION,
+        name: ROUTE_CHATDOC_CONVERSATION,
         params: {
-          id
+          repositoryId: this.repositoryId,
+          conversationId: id
         }
       });
       this.$emit('click', id);
diff --git a/src/components/chatdoc/InputBox.vue b/src/components/chatdoc/InputBox.vue
new file mode 100644
index 0000000..d8f7343
--- /dev/null
+++ b/src/components/chatdoc/InputBox.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="input-box">
+    <el-upload
+      v-model:file-list="fileList"
+      :class="{
+        upload: true,
+        disabled: !canUpload
+      }"
+      :disabled="!canUpload"
+      name="file"
+      :show-file-list="true"
+      :limit="1"
+      :multiple="false"
+      action="/api/v1/files/"
+      :on-exceed="onExceed"
+      :on-error="onError"
+      :headers="headers"
+    >
+      <el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="top">
+        <span class="btn btn-upload">
+          <font-awesome-icon icon="fa-solid fa-paperclip" class="icon icon-attachment" />
+        </span>
+      </el-tooltip>
+    </el-upload>
+    <span
+      :class="{
+        btn: true,
+        'btn-send': true,
+        disabled: !question
+      }"
+      @click="onSubmit"
+    >
+      <font-awesome-icon icon="fa-solid fa-location-arrow" class="icon icon-send" />
+    </span>
+    <el-input
+      v-model="questionValue"
+      :rows="1"
+      :disabled="disabled"
+      class="input"
+      type="textarea"
+      :placeholder="$t('chat.message.newMessagePlaceholder')"
+      @keydown.enter.exact.prevent="onSubmit"
+    >
+    </el-input>
+    <p class="info">{{ $t('chat.message.howToUse') }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElInput, ElMessage, ElTooltip, ElUpload } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { CHAT_MODEL_CHATGPT4_VISION, IChatModel } from '@/operators';
+
+export default defineComponent({
+  name: 'InputBox',
+  components: {
+    ElInput,
+    ElTooltip,
+    FontAwesomeIcon,
+    ElUpload
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    references: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    question: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:question', 'update:references', 'submit'],
+  data() {
+    return {
+      questionValue: this.question,
+      fileList: []
+    };
+  },
+  computed: {
+    headers() {
+      return {
+        Authorization: `Bearer ${this.$store.state.token.access}`
+      };
+    },
+    urls(): string[] {
+      // @ts-ignore
+      return this.fileList.map((file: UploadFile) => file?.response?.file_url);
+    },
+    canUpload() {
+      return [CHAT_MODEL_CHATGPT4_VISION.name].includes(this.model.name);
+    },
+    model(): IChatModel {
+      return this.$store.state.chat.model;
+    }
+  },
+  watch: {
+    urls(val) {
+      this.$emit('update:references', val);
+    },
+    questionValue(val: string) {
+      this.$emit('update:question', val);
+    },
+    question(val: string) {
+      if (val !== this.questionValue) {
+        this.questionValue = val;
+      }
+    },
+    references(val: string[]) {
+      if (val.length === 0) {
+        this.fileList = [];
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (!this.question) {
+        return;
+      }
+      this.$emit('submit');
+    },
+    onExceed() {
+      ElMessage.warning(this.$t('chat.message.uploadReferencesExceed'));
+    },
+    onError() {
+      ElMessage.error(this.$t('chat.message.uploadReferencesError'));
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+.input-box {
+  .input {
+    textarea {
+      border: none;
+      background: none;
+      box-shadow: none;
+      resize: none;
+      line-height: 30px;
+      height: 40px;
+    }
+  }
+  .el-upload-list {
+    position: absolute;
+    width: 400px;
+    bottom: 45px;
+  }
+
+  .el-textarea.is-disabled .el-textarea__inner {
+    background-color: initial;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.input-box {
+  position: relative;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  background: none;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
+  top: 30px;
+  .upload {
+    display: inline-block;
+    &.disabled {
+      .btn-upload {
+        cursor: not-allowed;
+        .icon-attachment {
+          color: #eee;
+        }
+      }
+    }
+  }
+  .input {
+    border: none;
+    width: calc(100% - 80px);
+    margin-left: 30px;
+  }
+  .info {
+    display: block;
+    position: absolute;
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+    margin-left: 3px;
+  }
+  .btn {
+    display: block;
+    z-index: 100;
+    cursor: pointer;
+    position: absolute;
+    top: 7px;
+    &.btn-upload {
+      left: 10px;
+      .icon-attachment {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+    &.btn-send {
+      right: 15px;
+      &.disabled {
+        .icon-send {
+          color: #eee;
+        }
+        cursor: not-allowed;
+      }
+      .icon-send {
+        font-size: 16px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/chatdoc/Message.vue b/src/components/chatdoc/Message.vue
new file mode 100644
index 0000000..23941d6
--- /dev/null
+++ b/src/components/chatdoc/Message.vue
@@ -0,0 +1,175 @@
+<template>
+  <div
+    :class="{
+      message: true,
+      [message.role as string]: true,
+      hidden: errorText && message.role === 'assistant'
+    }"
+    :role="message.role"
+  >
+    <div class="content">
+      <markdown-renderer :content="message?.content" />
+      <answering-mark v-if="message.state === messageState.PENDING" />
+    </div>
+    <div class="operations">
+      <copy-to-clipboard :content="message.content!" class="btn-copy" />
+    </div>
+  </div>
+  <el-alert v-if="errorText" class="error" :title="errorText" type="error" :closable="false" />
+  <el-button v-if="showBuyMore" type="primary" class="btn btn-buy" size="small" @click="onBuyMore">
+    {{ $t('common.button.buyMore') }}
+  </el-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import AnsweringMark from './AnsweringMark.vue';
+import copy from 'copy-to-clipboard';
+import { ElAlert, ElButton } from 'element-plus';
+import MarkdownRenderer from '@/components/common/MarkdownRenderer.vue';
+import { IChatdocMessage, IChatdocMessageState } from '@/operators';
+import CopyToClipboard from '../common/CopyToClipboard.vue';
+import {
+  ERROR_CODE_API_ERROR,
+  ERROR_CODE_BAD_REQUEST,
+  ERROR_CODE_CONTENT_TOO_LARGE,
+  ERROR_CODE_NOT_APPLIED,
+  ERROR_CODE_TIMEOUT,
+  ERROR_CODE_TOO_MANY_REQUESTS,
+  ERROR_CODE_UNKNOWN,
+  ERROR_CODE_USED_UP,
+  ROLE_ASSISTANT
+} from '@/constants';
+import message from '@/i18n/zh/common/message';
+
+interface IData {
+  copied: boolean;
+  messageState: typeof IChatdocMessageState;
+}
+
+export default defineComponent({
+  name: 'Message',
+  components: {
+    CopyToClipboard,
+    AnsweringMark,
+    MarkdownRenderer,
+    ElAlert,
+    ElButton
+  },
+  props: {
+    message: {
+      type: Object as () => IChatdocMessage,
+      required: true
+    }
+  },
+  emits: ['stop'],
+  data(): IData {
+    return {
+      copied: false,
+      messageState: IChatdocMessageState
+    };
+  },
+  computed: {
+    errorText() {
+      if (!this.message.error || !this.message.error?.code) {
+        return undefined;
+      }
+      switch (this.message.error?.code) {
+        case ERROR_CODE_USED_UP:
+          return this.$t('chatdoc.message.errorUsedUp');
+        case ERROR_CODE_API_ERROR:
+          return this.$t('chatdoc.message.errorApiError');
+        case ERROR_CODE_BAD_REQUEST:
+          return this.$t('chatdoc.message.errorBadRequest');
+        case ERROR_CODE_TIMEOUT:
+          return this.$t('chatdoc.message.errorTimeout');
+        case ERROR_CODE_TOO_MANY_REQUESTS:
+          return this.$t('chatdoc.message.errorTooManyRequests');
+        case ERROR_CODE_CONTENT_TOO_LARGE:
+          return this.$t('chatdoc.message.errorContentTooLarge');
+        case ERROR_CODE_NOT_APPLIED:
+          return this.$t('chatdoc.message.errorNotApplied');
+        case ERROR_CODE_UNKNOWN:
+        default:
+          return this.$t('chatdoc.message.errorUnknown');
+      }
+    },
+    showBuyMore() {
+      return this.message.role === ROLE_ASSISTANT && this.message.error?.code === ERROR_CODE_USED_UP;
+    }
+  },
+  methods: {
+    onCopy() {
+      copy(this.message.content!.toString(), {
+        debug: true
+      });
+      this.copied = true;
+      setTimeout(() => {
+        this.copied = false;
+      }, 3000);
+    },
+    onBuyMore() {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.error {
+  width: fit-content;
+  padding: 10px 5px 8px 5px;
+  height: 45px;
+  border-radius: 10px;
+  border-bottom-left-radius: 0;
+}
+
+.btn-buy {
+  margin: 10px auto;
+  border-radius: 20px;
+}
+.message {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+  &[role='system'] {
+    display: none;
+  }
+  &.hidden {
+    display: none;
+  }
+  &.assistant {
+    align-items: start;
+    .content {
+      background-color: var(--el-bg-color-page);
+      color: var(--el-color-black);
+      border-bottom-left-radius: 0;
+    }
+  }
+  &.user {
+    align-items: end;
+    .content {
+      background-color: var(--el-color-primary);
+      color: var(--el-color-white);
+      border-bottom-right-radius: 0;
+    }
+  }
+  .content {
+    border-radius: 10px;
+    padding: 8px 15px;
+    max-width: 800px;
+    .image {
+      max-width: 100%;
+      max-height: 300px;
+      margin: 5px 0;
+      border-radius: 10px;
+    }
+  }
+
+  .operations {
+    display: block;
+    .btn-copy {
+      color: var(--el-text-color-regular);
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/i18n/zh/chatdoc/message.ts b/src/i18n/zh/chatdoc/message.ts
index 707f0f7..792051f 100644
--- a/src/i18n/zh/chatdoc/message.ts
+++ b/src/i18n/zh/chatdoc/message.ts
@@ -8,5 +8,16 @@ export default {
   createDocumentError: '录入文档失败',
   dragOrClickToUpload: '拖拽或点击上传',
   learningDocument: '学习中，请稍后...',
-  startNewChat: '开始新会话'
+  startNewChat: '开始新会话',
+  errorApiError: '回答失败，请稍后重试',
+  errorBadRequest: '请求内容不规范，请重新提问',
+  errorNoConversation: '对话内容不存在或者已经过期，请发起新的会话',
+  errorContentTooLarge: '问题内容过长，请缩短后重试',
+  errorTooManyRequests: '您的操作过于频繁，请稍后重试',
+  errorUsedUp: '您的套餐次数已经用完，请购买更多次数继续使用',
+  errorUnknown: '服务器出现未知错误，请稍后重试或联系客服',
+  errorTimeout: '回答问题超时，请稍后重试',
+  errorNotApplied: '您尚未申请该服务，请先申请再继续提问',
+  confirmDelete: '确定删除',
+  howToUse: '按 Shift+Enter 键可以换行'
 };
diff --git a/src/operators/chat/models.ts b/src/operators/chat/models.ts
index 51447de..905ad2f 100644
--- a/src/operators/chat/models.ts
+++ b/src/operators/chat/models.ts
@@ -23,7 +23,7 @@ export interface IChatModel {
   description: string;
 }
 
-export interface IError {
+interface IError {
   code: string;
   detail?: string;
 }
diff --git a/src/operators/chatdoc/models.ts b/src/operators/chatdoc/models.ts
index dbd5101..ce07606 100644
--- a/src/operators/chatdoc/models.ts
+++ b/src/operators/chatdoc/models.ts
@@ -1,5 +1,10 @@
 import { ACTION_CREATE, ACTION_DELETE, ACTION_UPDATE, ROLE_ASSISTANT, ROLE_SYSTEM, ROLE_USER } from '@/constants';
 
+export interface IError {
+  code: string;
+  detail?: string;
+}
+
 export interface IChatdocRepository {
   id: string;
   name?: string;
@@ -27,9 +32,18 @@ export interface IChatdocConversation {
 
 export interface IChatdocMessage {
   content?: string;
+  error?: IError;
+  state?: IChatdocMessageState;
   role?: typeof ROLE_SYSTEM | typeof ROLE_ASSISTANT | typeof ROLE_USER;
 }
 
+export enum IChatdocMessageState {
+  PENDING = 'pending',
+  ANSWERING = 'answering',
+  FINISHED = 'finished',
+  FAILED = 'failed'
+}
+
 export interface IChatdocChatRequest {
   repository_id: string;
   messages: IChatdocMessage[];
@@ -58,4 +72,5 @@ export interface IChatdocChatResponse {
   answer: string;
   delta_answer: string;
   repository_id?: string;
+  conversation_id?: string;
 }
diff --git a/src/operators/chatdoc/operator.ts b/src/operators/chatdoc/operator.ts
index d97c7d4..d716499 100644
--- a/src/operators/chatdoc/operator.ts
+++ b/src/operators/chatdoc/operator.ts
@@ -254,13 +254,16 @@ class ChatdocOperator {
   }
 
   async chat(
-    repositoryId: string,
+    payload: { repositoryId: string; question: string; conversationId?: string; knowledgeFallback?: boolean },
     options: { token: string; stream: (response: IChatdocChatResponse) => void }
   ): Promise<AxiosResponse<IChatdocChatResponse>> {
     return await axios.post(
       `/chatdoc/chat`,
       {
-        repository_id: repositoryId
+        repository_id: payload.repositoryId,
+        question: payload.question,
+        conversation_id: payload.conversationId,
+        stateful: true
       },
       {
         headers: {
diff --git a/src/pages/chatdoc/Conversation.vue b/src/pages/chatdoc/Conversation.vue
index 2d5a3c7..c2214bb 100644
--- a/src/pages/chatdoc/Conversation.vue
+++ b/src/pages/chatdoc/Conversation.vue
@@ -3,7 +3,27 @@
     <template #chatdoc>
       <div class="wrapper">
         <conversations class="side" />
-        <div class="chat"></div>
+        <div class="chat">
+          <div class="dialogue">
+            <div class="messages">
+              <message
+                v-for="(message, messageIndex) in messages"
+                :key="messageIndex"
+                :message="message"
+                class="message"
+              />
+            </div>
+          </div>
+          <div class="bottom">
+            <input-box
+              :disabled="answering"
+              :question="question"
+              @update:question="question = $event"
+              @update:references="references = $event"
+              @submit="onSubmit"
+            />
+          </div>
+        </div>
       </div>
     </template>
   </layout>
@@ -12,27 +32,74 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Layout from '@/layouts/Chatdoc.vue';
-import { IChatdocRepository } from '@/operators';
+import {
+  IApplication,
+  IChatdocChatResponse,
+  IChatdocConversation,
+  IChatdocMessageState,
+  IChatdocRepository,
+  chatdocOperator
+} from '@/operators';
 import Conversations from '@/components/chatdoc/Conversations.vue';
+import Message from '@/components/chatdoc/Message.vue';
+import InputBox from '@/components/chatdoc/InputBox.vue';
+import {
+  ERROR_CODE_CANCELED,
+  ERROR_CODE_NOT_APPLIED,
+  ERROR_CODE_UNKNOWN,
+  ROLE_ASSISTANT,
+  ROLE_USER
+} from '@/constants';
+import { API_ID_CHATDOC_CHAT } from '@/operators/chatdoc/constants';
+import { log } from '@/utils';
+import { ROUTE_CHATDOC_CONVERSATION } from '@/router';
+import axios from 'axios';
+import { isJSONString } from '@/utils/is';
 
 export default defineComponent({
   name: 'ChatdocChat',
   components: {
     Layout,
-    Conversations
+    Conversations,
+    Message,
+    InputBox
   },
   data() {
     return {
       loading: false,
-      repositoryId: this.$route.params.repositoryId.toString()
+      repositoryId: this.$route.params.repositoryId.toString(),
+      answering: false,
+      question: '',
+      references: []
     };
   },
   computed: {
+    messages: {
+      get() {
+        return (
+          this.conversations?.find(
+            (conversation: IChatdocConversation) => conversation.id === this.$route.params.conversationId?.toString()
+          )?.messages || []
+        );
+      },
+      set(messages: any[]) {
+        console.log('set messages', messages);
+      }
+    },
     repository(): IChatdocRepository | undefined {
-      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.id);
+      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.repositoryId);
     },
     conversations() {
       return this.repository?.conversations;
+    },
+    conversationId(): string | undefined {
+      return this.$route.params.conversationId?.toString();
+    },
+    application() {
+      return this.applications?.find((application: IApplication) => application.api?.id === API_ID_CHATDOC_CHAT);
+    },
+    applications() {
+      return this.$store.state.chatdoc.applications;
     }
   },
   async mounted() {
@@ -47,7 +114,124 @@ export default defineComponent({
         this.loading = false;
       });
   },
-  methods: {}
+  methods: {
+    async onSubmit() {
+      this.messages.push({
+        content: this.question,
+        role: ROLE_USER
+      });
+      console.debug('onSubmit', this.question, this.references);
+      await this.onFetchAnswer();
+    },
+    async onScrollDown() {
+      setTimeout(() => {
+        const container = document.querySelector('.dialogue') as HTMLDivElement;
+        if (!container || !this.messages || this.messages.length === 0) {
+          return;
+        }
+        container.scrollTop = container?.scrollHeight;
+      }, 0);
+    },
+    async onFetchAnswer() {
+      const token = this.application?.credential?.token;
+      const endpoint = this.application?.api?.endpoint;
+      const path = this.application?.api?.path;
+      const question = this.question;
+      const references = this.references;
+      log(this.onFetchAnswer, 'validated', question, references);
+      // reset question and references
+      this.question = '';
+      this.references = [];
+      if (!token || !endpoint || !question || !path) {
+        console.error('no token or endpoint or question');
+        this.messages.push({
+          error: {
+            code: ERROR_CODE_NOT_APPLIED
+          },
+          role: ROLE_ASSISTANT,
+          state: IChatdocMessageState.FAILED
+        });
+        return;
+      }
+      let conversationId = this.conversationId;
+      this.messages.push({
+        content: '',
+        role: ROLE_ASSISTANT,
+        state: IChatdocMessageState.PENDING
+      });
+      log(this.onFetchAnswer, 'start to get answer', this.messages);
+      this.onScrollDown();
+      // request server to get answer
+      this.answering = true;
+      chatdocOperator
+        .chat(
+          {
+            repositoryId: this.repositoryId,
+            question,
+            conversationId: this.conversationId
+          },
+          {
+            token,
+            stream: (response: IChatdocChatResponse) => {
+              this.messages[this.messages.length - 1] = {
+                role: ROLE_ASSISTANT,
+                content: response.answer,
+                state: IChatdocMessageState.ANSWERING
+              };
+              conversationId = response.conversation_id;
+              this.onScrollDown();
+            }
+          }
+        )
+        .then(async () => {
+          log(this.onFetchAnswer, 'finished fetch answer');
+          this.messages[this.messages.length - 1].state = IChatdocMessageState.FINISHED;
+          await this.$store.dispatch('chat/setConversation', {
+            id: conversationId,
+            messages: this.messages
+          });
+          this.answering = false;
+          if (!this.conversationId) {
+            await this.$router.push({
+              name: ROUTE_CHATDOC_CONVERSATION,
+              params: {
+                conversationId: this.conversationId,
+                repositoryId: this.repositoryId
+              }
+            });
+          }
+          this.onScrollDown();
+          await this.$store.dispatch('chat/getConversations');
+          await this.$store.dispatch('chat/getApplications');
+        })
+        .catch((error) => {
+          if (this.messages && this.messages.length > 0) {
+            this.messages[this.messages.length - 1].state = IChatdocMessageState.FAILED;
+          }
+          console.error(error);
+          if (axios.isCancel(error)) {
+            this.messages[this.messages.length - 1].error = {
+              code: ERROR_CODE_CANCELED
+            };
+          } else if (error?.response?.data) {
+            let data = error?.response?.data;
+            if (isJSONString(data)) {
+              data = JSON.parse(data);
+            }
+            if (this.messages && this.messages.length > 0) {
+              this.messages[this.messages.length - 1].error = data;
+            }
+          } else {
+            if (this.messages && this.messages.length > 0) {
+              this.messages[this.messages.length - 1].error = {
+                code: ERROR_CODE_UNKNOWN
+              };
+            }
+          }
+          this.answering = false;
+        });
+    }
+  }
 });
 </script>
 
@@ -56,9 +240,31 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   height: 100%;
+  width: 100%;
 }
 .chat {
   flex: 1;
   width: calc(100% - 300px);
+  padding: 15px;
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+
+  .dialogue {
+    flex: 1;
+    overflow-y: scroll;
+    margin: 20px 0;
+    position: relative;
+    .messages {
+      padding-top: 30px;
+      .message {
+        margin-bottom: 15px;
+      }
+    }
+  }
+  .bottom {
+    width: 100%;
+    height: 90px;
+  }
 }
 </style>