From cc7f49fa8b05f73df14e5aafc6cb44df22b7c47c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Wed, 19 Feb 2025 15:48:04 +0800
Subject: [PATCH] perf: Improving the conversation to a left-right
 layout(#2286)

* refactor: Optimize code

* feat: Improving the conversation to a left-right layout(#2286)
---
 ui/package.json                               |  1 -
 .../component/question-content/index.vue      | 61 ++++++++++---------
 ui/src/components/markdown/MdRenderer.vue     |  1 -
 .../components/markdown/ReasoningRander.vue   |  1 -
 ui/src/views/chat/base/index.vue              | 16 ++++-
 5 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 3ec76495a..df369cee5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -33,7 +33,6 @@
     "lodash": "^4.17.21",
     "marked": "^12.0.2",
     "md-editor-v3": "^4.16.7",
-    "medium-zoom": "^1.1.0",
     "mermaid": "^10.9.0",
     "mitt": "^3.0.0",
     "moment": "^2.30.1",
diff --git a/ui/src/components/ai-chat/component/question-content/index.vue b/ui/src/components/ai-chat/component/question-content/index.vue
index c5b38aaf7..d60625c49 100644
--- a/ui/src/components/ai-chat/component/question-content/index.vue
+++ b/ui/src/components/ai-chat/component/question-content/index.vue
@@ -1,19 +1,7 @@
 <template>
   <!-- 问题内容 -->
-  <div class="item-content mb-16 lighter">
-    <div class="avatar">
-      <el-image
-        v-if="application.user_avatar"
-        :src="application.user_avatar"
-        alt=""
-        fit="cover"
-        style="width: 32px; height: 32px; display: block"
-      />
-      <AppAvatar v-else>
-        <img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
-      </AppAvatar>
-    </div>
-    <div class="content">
+  <div class="qustion-content item-content mb-16 lighter">
+    <div class="content mr-16">
       <div class="text break-all pre-wrap">
         <div class="mb-8" v-if="document_list.length">
           <el-row :gutter="10">
@@ -90,6 +78,18 @@
         {{ chatRecord.problem_text }}
       </div>
     </div>
+    <div class="avatar">
+      <el-image
+        v-if="application.user_avatar"
+        :src="application.user_avatar"
+        alt=""
+        fit="cover"
+        style="width: 32px; height: 32px; display: block"
+      />
+      <AppAvatar v-else>
+        <img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
+      </AppAvatar>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -137,26 +137,31 @@ function downloadFile(item: any) {
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>
-.download-file {
-  height: 43px;
+.qustion-content {
+  display: flex;
+  justify-content: flex-end;
 
-  &:hover {
-    color: var(--el-color-primary);
-    border: 1px solid var(--el-color-primary);
+  .download-file {
+    height: 43px;
 
-    .download-button {
-      display: block;
-      text-align: center;
-      line-height: 26px;
+    &:hover {
+      color: var(--el-color-primary);
+      border: 1px solid var(--el-color-primary);
+
+      .download-button {
+        display: block;
+        text-align: center;
+        line-height: 26px;
+      }
+
+      .show {
+        display: none;
+      }
     }
 
-    .show {
+    .download-button {
       display: none;
     }
   }
-
-  .download-button {
-    display: none;
-  }
 }
 </style>
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index 1cbdc7deb..5761bce44 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -30,7 +30,6 @@
       ></FormRander>
       <MdPreview
         v-else
-        noIconfont
         ref="editorRef"
         editorId="preview-only"
         :modelValue="item.content"
diff --git a/ui/src/components/markdown/ReasoningRander.vue b/ui/src/components/markdown/ReasoningRander.vue
index 41886b90c..b42ae7fed 100644
--- a/ui/src/components/markdown/ReasoningRander.vue
+++ b/ui/src/components/markdown/ReasoningRander.vue
@@ -7,7 +7,6 @@
     <el-collapse-transition>
       <div class="border-l mt-8" v-show="showThink">
         <MdPreview
-          noIconfont
           ref="editorRef"
           editorId="preview-only"
           :modelValue="content"
diff --git a/ui/src/views/chat/base/index.vue b/ui/src/views/chat/base/index.vue
index b017339ae..e42bfb6b9 100644
--- a/ui/src/views/chat/base/index.vue
+++ b/ui/src/views/chat/base/index.vue
@@ -29,7 +29,16 @@
         type="ai-chat"
         :available="applicationAvailable"
         :appId="applicationDetail?.id"
-      ></AiChat>
+        :record="recordList"
+      >
+        <template #operateBefore>
+          <div>
+            <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+              <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
+            </el-button>
+          </div>
+        </template>
+      </AiChat>
     </div>
     <div class="chat__footer"></div>
   </div>
@@ -57,6 +66,11 @@ const applicationDetail = computed({
   },
   set: (v) => {}
 })
+const recordList = ref([])
+
+function newChat() {
+  recordList.value = []
+}
 </script>
 <style lang="scss">
 .chat {