Feat: multiline text input for chat (#5317)

### What problem does this PR solve?

Improves the chat interface by adding a multiline chat area that grows
when multiple lines exists.

Some images:

* Empty:
<img width="1334" alt="image"
src="https://github.com/user-attachments/assets/e8a68b46-def9-45af-b5b1-db0f0b67e6d8"
/>

* With multiple lines and documents:
<img width="1070" alt="image"
src="https://github.com/user-attachments/assets/ff976c5c-08fa-492f-9fc0-17512c95f9f2"
/>


### Type of change
- [X] New Feature (non-breaking change which adds functionality)

web/src/components/message-input/index.less

@@ -1,29 +1,38 @@
 .messageInputWrapper {
   margin-right: 20px;
-  background-color: rgba(255, 255, 255, 0.1);
+  padding: '0px 0px 10px 0px';
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  &:hover {
+    border-color: #40a9ff;
+    box-shadow: #40a9ff;
+  }
   border-radius: 8px;
   :global(.ant-input-affix-wrapper) {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .documentCard {
-    :global(.ant-card-body) {
-      padding: 10px;
-      position: relative;
-    }
-  }
-  .listWrapper {
-    padding: 0 10px;
-    overflow: auto;
-    max-height: 170px;
-  }
-  .inputWrapper {
-    border-radius: 8px;
-  }
-  .deleteIcon {
-    position: absolute;
-    right: -4px;
-    top: -4px;
-    color: #d92d20;
+}
+
+.documentCard {
+  :global(.ant-card-body) {
+    padding: 10px;
+    position: relative;
+    width: 100%;
   }
 }
+.listWrapper {
+  padding: 0 10px;
+  overflow: auto;
+  max-height: 170px;
+  width: 100%;
+}
+.inputWrapper {
+  border-radius: 8px;
+}
+.deleteIcon {
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  color: #d92d20;
+}