perf: Improving the conversation to a left-right layout(#2286)

* refactor: Optimize code

* feat: Improving the conversation to a left-right layout(#2286)

Author: wangdan-fit2cloud

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",

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>

ui/src/components/markdown/MdRenderer.vue

@@ -30,7 +30,6 @@
       ></FormRander>
       <MdPreview
         v-else
-        noIconfont
         ref="editorRef"
         editorId="preview-only"
         :modelValue="item.content"

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"

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 {