Improve UI effect

web/src/App.js

@@ -629,7 +629,7 @@ class App extends Component {
           }
         </Header>
         <Content style={{display: "flex", flexDirection: "column"}} >
-          {Setting.isMobile() ?
+          {(Setting.isMobile() || window.location.pathname === "/chat") ?
             this.renderRouter() :
             <Card className="content-warp-card">
               {this.renderRouter()}

web/src/ChatBox.js

@@ -43,41 +43,62 @@ class ChatBox extends React.Component {
     this.setState({inputValue: ""});
   };
 
-  render() {
+  renderList() {
     return (
-      <div>
+      <div style={{position: "relative"}}>
         <List
+          style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}
           itemLayout="horizontal"
           dataSource={this.props.messages}
           renderItem={(item, index) => (
-            <List.Item style={{backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)", borderBottom: "1px solid rgb(229, 229, 229)", position: "relative"}}>
+            <List.Item style={{
+              backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
+              borderBottom: "1px solid rgb(229, 229, 229)",
+              position: "relative",
+            }}>
+              <div style={{width: "800px", margin: "0 auto", position: "relative"}}>
                 <List.Item.Meta
                   avatar={<Avatar style={{width: "30px", height: "30px", borderRadius: "3px"}} src={item.author === `${this.props.account.owner}/${this.props.account.name}` ? this.props.account.avatar : "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png"} />}
-                title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "70px"}}>{item.text}</div>}
+                  title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "80px"}}>{item.text}</div>}
                 />
-              <div style={{position: "absolute", top: "10px", right: "10px"}}
+                <div style={{position: "absolute", top: "0px", right: "0px"}}
                 >
                   <CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
                   <LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
                   <DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
                 </div>
+              </div>
             </List.Item>
           )}
         />
+        <div style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "120px",
+          background: "linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 50%, white 100%)",
+          pointerEvents: "none",
+        }} />
+      </div>
+    );
+  }
+
+  renderInput() {
+    return (
       <div
         style={{
           position: "fixed",
-            bottom: "100px",
+          bottom: "90px",
           width: "100%",
           display: "flex",
           justifyContent: "center",
-            backgroundColor: "white",
         }}
       >
-          <div style={{position: "relative", width: "770px", marginLeft: "-315px"}}>
+        <div style={{position: "relative", width: "760px", marginLeft: "-280px"}}>
           <TextArea
             placeholder={"Send a message..."}
-              autoSize
+            autoSize={{maxRows: 8}}
             value={this.state.inputValue}
             onChange={(e) => this.setState({inputValue: e.target.value})}
             onKeyDown={this.handleKeyDown}
@@ -109,6 +130,18 @@ class ChatBox extends React.Component {
           />
         </div>
       </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.renderList()
+        }
+        {
+          this.renderInput()
+        }
       </div>
     );
   }

web/src/ChatPage.js

@@ -22,7 +22,7 @@ import * as MessageBackend from "./backend/MessageBackend";
 import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 
-class ChatListPage extends BaseListPage {
+class ChatPage extends BaseListPage {
   newChat() {
     const randomName = Setting.getRandomName();
     return {
@@ -77,7 +77,7 @@ class ChatListPage extends BaseListPage {
 
   renderTable(chats) {
     return (
-      <div style={{display: "flex", height: "calc(100vh - 197px)"}}>
+      <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
         <div style={{width: "250px", height: "100%", backgroundColor: "lightblue"}}>
           <ChatMenu chats={this.state.data} onSelect={(i) => {
             const chat = chats[i];
@@ -136,4 +136,4 @@ class ChatListPage extends BaseListPage {
   }
 }
 
-export default ChatListPage;
+export default ChatPage;