perf: 对话文本输入框自适应调整(#616)

perf: 对话文本输入框自适应调整(#616)

ui/src/components/ai-chat/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="aiChatRef" class="ai-chat" :class="log ? 'chart-log' : ''">
     <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
-      <div ref="dialogScrollbar" class="ai-chat__content p-24">
+      <div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width">
         <div class="item-content mb-16" v-if="!props.available || (props.data?.prologue && !log)">
           <div class="avatar">
             <AppAvatar class="avatar-gradient">
@@ -141,12 +141,13 @@
       </div>
     </el-scrollbar>
     <div class="ai-chat__operate p-24" v-if="!log">
-      <div class="operate-textarea flex">
+      <slot name="operateBefore" />
+      <div class="operate-textarea flex chat-width">
         <el-input
           ref="quickInputRef"
           v-model="inputValue"
           placeholder="请输入"
-          :rows="1"
+          :autosize="{ minRows: 1, maxRows: 4 }"
           type="textarea"
           :maxlength="1024"
           @keydown.enter="sendChatHandle($event)"
@@ -529,6 +530,7 @@ function chatMessage(chat?: any, problem?: string, re_chat?: boolean) {
         if (props.chatId === 'new') {
           emit('refresh', chartOpenId.value)
         }
+        quickInputRef.value.textareaStyle.height = '45px'
         return (id || props.data?.show_source) && getSourceDetail(chat)
       })
       .finally(() => {
@@ -628,7 +630,6 @@ defineExpose({
   }
   &__content {
     padding-top: 0;
-    padding-bottom: 96px;
     box-sizing: border-box;
 
     .avatar {
@@ -670,9 +671,7 @@ defineExpose({
   }
   &__operate {
     background: #f3f7f9;
-    position: absolute;
-    bottom: 0;
-    left: 0;
+    position: relative;
     width: 100%;
     box-sizing: border-box;
     z-index: 10;
@@ -726,4 +725,8 @@ defineExpose({
     border-radius: 8px;
   }
 }
+.chat-width {
+  max-width: var(--app-chat-width, 860px);
+  margin: 0 auto;
+}
 </style>

ui/src/views/chat/embed/index.vue

@@ -5,7 +5,7 @@
         <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
       </div>
     </div>
-    <div class="chat-embed__main chat-width">
+    <div class="chat-embed__main">
       <AiChat
         ref="AiChatRef"
         v-model:data="applicationDetail"
@@ -17,12 +17,14 @@
         @scroll="handleScroll"
         class="AiChat-embed"
       >
+        <template #operateBefore>
+          <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+            <el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
+          </el-button>
+        </template>
       </AiChat>
     </div>
 
-    <el-button type="primary" link class="new-chat-button" @click="newChat">
-      <el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
-    </el-button>
     <!-- 历史记录弹出层 -->
     <div @click.prevent.stop="show = !show" class="chat-popover-button cursor color-secondary">
       <AppIcon iconName="app-history-outlined"></AppIcon>
@@ -226,9 +228,9 @@ onMounted(() => {
     overflow: hidden;
   }
   .new-chat-button {
-    position: absolute;
-    bottom: 80px;
-    left: 18px;
+    // position: absolute;
+    // bottom: 80px;
+    // left: 18px;
     z-index: 11;
   }
   // 历史对话弹出层
@@ -280,16 +282,12 @@ onMounted(() => {
       top: 50%;
     }
   }
-  .chat-width {
-    max-width: var(--app-chat-width, 860px);
-    margin: 0 auto;
-  }
   .AiChat-embed {
     .ai-chat__operate {
-      padding-top: 38px;
+      padding-top: 12px;
     }
     .ai-chat__content {
-      padding-bottom: 104px
+      padding-bottom: 104px;
     }
   }
 }

ui/src/views/chat/pc/index.vue

@@ -69,7 +69,7 @@
             </el-dropdown>
           </span>
         </div>
-        <div class="right-height chat-width">
+        <div class="right-height">
           <!-- 对话 -->
           <AiChat
             ref="AiChatRef"
@@ -80,7 +80,8 @@
             :chatId="currentChatId"
             @refresh="refresh"
             @scroll="handleScroll"
-          ></AiChat>
+          >
+          </AiChat>
         </div>
       </div>
     </div>
@@ -362,10 +363,6 @@ onMounted(() => {
     }
   }
 
-  .chat-width {
-    max-width: var(--app-chat-width, 860px);
-    margin: 0 auto;
-  }
   .collapse {
     display: none;
   }