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,75 +43,108 @@ 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={{
-              <List.Item.Meta
+              backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
-                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"} />}
+              borderBottom: "1px solid rgb(229, 229, 229)",
-                title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "70px"}}>{item.text}</div>}
+              position: "relative",
-              />
+            }}>
-              <div style={{position: "absolute", top: "10px", right: "10px"}}
+              <div style={{width: "800px", margin: "0 auto", position: "relative"}}>
-              >
+                <List.Item.Meta
-                <CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                  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"} />}
-                <LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                  title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "80px"}}>{item.text}</div>}
-                <DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                />
+                <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
+        <div style={{
-          style={{
+          position: "absolute",
-            position: "fixed",
+          bottom: 0,
-            bottom: "100px",
+          left: 0,
-            width: "100%",
+          right: 0,
-            display: "flex",
+          height: "120px",
-            justifyContent: "center",
+          background: "linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 50%, white 100%)",
-            backgroundColor: "white",
+          pointerEvents: "none",
-          }}
+        }} />
-        >
+      </div>
-          <div style={{position: "relative", width: "770px", marginLeft: "-315px"}}>
+    );
-            <TextArea
+  }
-              placeholder={"Send a message..."}
+
-              autoSize
+  renderInput() {
-              value={this.state.inputValue}
+    return (
-              onChange={(e) => this.setState({inputValue: e.target.value})}
+      <div
-              onKeyDown={this.handleKeyDown}
+        style={{
-              style={{
+          position: "fixed",
-                fontSize: "16px",
+          bottom: "90px",
-                fontWeight: "normal",
+          width: "100%",
-                lineHeight: "24px",
+          display: "flex",
-                width: "770px",
+          justifyContent: "center",
-                height: "48px",
+        }}
-                borderRadius: "6px",
+      >
-                borderColor: "rgb(229,229,229)",
+        <div style={{position: "relative", width: "760px", marginLeft: "-280px"}}>
-                boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
+          <TextArea
-                paddingLeft: "17px",
+            placeholder={"Send a message..."}
-                paddingRight: "17px",
+            autoSize={{maxRows: 8}}
-                paddingTop: "12px",
+            value={this.state.inputValue}
-                paddingBottom: "12px",
+            onChange={(e) => this.setState({inputValue: e.target.value})}
-              }}
+            onKeyDown={this.handleKeyDown}
-              suffix={<SendOutlined style={{color: "rgb(210,210,217"}} onClick={() => this.send(this.state.inputValue)} />}
+            style={{
-              autoComplete="off"
+              fontSize: "16px",
-            />
+              fontWeight: "normal",
-            <SendOutlined
+              lineHeight: "24px",
-              style={{
+              width: "770px",
-                color: this.state.inputValue === "" ? "rgb(210,210,217)" : "rgb(142,142,160)",
+              height: "48px",
-                position: "absolute",
+              borderRadius: "6px",
-                bottom: "17px",
+              borderColor: "rgb(229,229,229)",
-                right: "17px",
+              boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
-              }}
+              paddingLeft: "17px",
-              onClick={() => this.send(this.state.inputValue)}
+              paddingRight: "17px",
-            />
+              paddingTop: "12px",
-          </div>
+              paddingBottom: "12px",
+            }}
+            suffix={<SendOutlined style={{color: "rgb(210,210,217"}} onClick={() => this.send(this.state.inputValue)} />}
+            autoComplete="off"
+          />
+          <SendOutlined
+            style={{
+              color: this.state.inputValue === "" ? "rgb(210,210,217)" : "rgb(142,142,160)",
+              position: "absolute",
+              bottom: "17px",
+              right: "17px",
+            }}
+            onClick={() => this.send(this.state.inputValue)}
+          />
         </div>
       </div>
     );
   }
+
+  render() {
+    return (
+      <div>
+        {
+          this.renderList()
+        }
+        {
+          this.renderInput()
+        }
+      </div>
+    );
+  }
 }
 
 export default ChatBox;

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;