auto resize the input element rows, when use inputed more than one line

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 更新日志
 ## v4.0.8
 * 功能优化：当数据库更新失败的时候记录错误日志
+* 功能优化：聊天输入框会随着输入内容的增多自动调整高度
 
 ## v4.0.7
 

web/src/assets/css/chat-plus.styl

@@ -129,7 +129,7 @@ $borderColor = #4676d0;
       --el-main-padding: 0;
       margin: 0;
 
-      .chat-box {
+      .chat-container {
         min-width: 0;
         flex: 1;
         background-color: var(--el-bg-color)
@@ -138,6 +138,7 @@ $borderColor = #4676d0;
         #container {
           overflow: hidden;
           width: 100%;
+          position relative
 
           ::-webkit-scrollbar {
             width: 0;
@@ -165,8 +166,13 @@ $borderColor = #4676d0;
           }
 
           .input-box {
+            position absolute
+            bottom 0
+            width 100%
+
+            .input-box-inner {
+              display flex
               background-color: #ffffff
-            display: flex;
               justify-content: center;
               align-items: center;
               box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
@@ -192,7 +198,7 @@ $borderColor = #4676d0;
                 }
               }
 
-            .input-container {
+              .input-body {
                 width 100%
                 margin: 0;
                 border: none;
@@ -201,24 +207,42 @@ $borderColor = #4676d0;
                 justify-content center
                 position relative
 
-              .el-textarea {
+                .hide-div {
-                .el-textarea__inner::-webkit-scrollbar {
+                  white-space: pre-wrap; /* 保持文本换行 */
+                  visibility: hidden; /* 隐藏 div */
+                  position: absolute; /* 脱离文档流 */
+                  line-height: 24px
+                  font-size 14px
+                  word-wrap: break-word; /* 允许单词换行 */
+                  overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
+                }
+
+                .input-border {
+                  display flex
+                  width 100%
+                  overflow hidden
+                  border: 2px solid #21AA93
+                  border-radius 10px
+                  padding 10px
+
+
+                  .prompt-input::-webkit-scrollbar {
                     width: 0;
                     height: 0;
                   }
-              }
 
-              .select-file {
+                  .prompt-input {
-                position absolute;
+                    width 100%
-                right 48px;
+                    line-height: 24px
-                top 20px;
+                    border none
+                    font-size 14px
+                    background none
+                    resize: none
                   }
 
                   .send-btn {
-                position absolute;
+                    width 32px
-                right 12px;
+                    margin-left 10px
-                top 20px;
-
                     .el-button {
                       padding 8px 5px;
                       border-radius 6px;
@@ -230,6 +254,9 @@ $borderColor = #4676d0;
               }
             }
 
+          }
+        }
+
         #container::-webkit-scrollbar {
           width: 0;
           height: 0;

web/src/views/ChatPlus.vue

@@ -65,9 +65,9 @@
         </div>
       </el-aside>
       <el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
-        <div class="chat-box" :style="{height: mainWinHeight+'px'}">
+        <div class="chat-container">
           <div>
-            <div id="container">
+            <div id="container" :style="{height: mainWinHeight+'px'}">
               <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
                 <div v-if="showHello">
                   <welcome @send="autofillPrompt"/>
@@ -84,8 +84,8 @@
                 </div>
               </div><!-- end chat box -->
 
-              <el-affix position="bottom" :offset="0">
               <div class="input-box">
+                <div class="input-box-inner">
                   <span class="tool-item">
                       <el-popover
                           :width="300"
@@ -151,19 +151,19 @@
                     </el-tooltip>
                   </span>
 
-                  <div class="input-container">
+                  <div class="input-body">
-                    <el-input
+                    <div ref="textHeightRef" class="hide-div">{{prompt}}</div>
-                        ref="textInput"
+                    <div class="input-border">
+                      <textarea
+                            ref="inputRef"
+                            class="prompt-input"
+                            :rows="row"
                             v-model="prompt"
-                        v-on:keydown="inputKeyDown"
+                            @keydown="onInput"
-                        autofocus
+                            @input="onInput"
-                        type="textarea"
-                        :rows="2"
-                        style="--el-input-focus-border-color:#21AA93;
-                        border: 1px solid #21AA93;--el-input-border-color:#21AA93;
-                        border-radius: 5px; --el-input-hover-border-color:#21AA93;"
                             placeholder="按 Enter 键发送消息，使用 Ctrl + Enter 换行"
-                    />
+                            autofocus>
+                      </textarea>
                       <span class="send-btn">
                         <el-button type="info" v-if="showStopGenerate" @click="stopGenerate" plain>
                           <el-icon>
@@ -175,8 +175,10 @@
                         </el-button>
                       </span>
                     </div>
+
+                  </div>
                 </div><!-- end input box -->
-              </el-affix>
+              </div>
             </div><!-- end container -->
           </div><!-- end loading -->
         </div>
@@ -237,11 +239,13 @@ const roleId = ref(0)
 const newChatItem = ref(null);
 const isLogin = ref(false)
 const showHello = ref(true)
-const textInput = ref(null)
+const inputRef = ref(null)
+const textHeightRef = ref(null)
 const showNotice = ref(false)
 const notice = ref("")
 const noticeKey = ref("SYSTEM_NOTICE")
 const store = useSharedStore();
+const row = ref(1)
 
 if (isMobile()) {
   router.replace("/mobile/chat")
@@ -705,8 +709,19 @@ const enableInput = () => {
   showStopGenerate.value = false;
 }
 
-// 登录输入框输入事件处理
+const onInput = (e) => {
-const inputKeyDown = function (e) {
+  // 根据输入的内容自动计算输入框的行数
+  const lineHeight = parseFloat(window.getComputedStyle(inputRef.value).lineHeight)
+  textHeightRef.value.style.width = inputRef.value.clientWidth + 'px'; // 设定宽度和 textarea 相同
+  const lines = Math.floor(textHeightRef.value.clientHeight / lineHeight);
+  inputRef.value.scrollTo(0, inputRef.value.scrollHeight)
+  if (prompt.value.length === 0) {
+    row.value = 1
+  } else if (row.value <= 7) {
+    row.value = lines
+  }
+
+  // 输入回车自动提交
   if (e.keyCode === 13) {
     if (e.ctrlKey) { // Ctrl + Enter 换行
       prompt.value += "\n";
@@ -720,7 +735,7 @@ const inputKeyDown = function (e) {
 // 自动填充 prompt
 const autofillPrompt = (text) => {
   prompt.value = text
-  textInput.value.focus()
+  inputRef.value.focus()
   // sendMessage()
 }
 // 发送消息