From ebe8ad86695484011f6e43a07ee9de7a27af1889 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Mon, 10 Apr 2023 00:55:43 +0800
Subject: [PATCH] Improve UI effect

---
 web/src/App.js      |   2 +-
 web/src/ChatBox.js  | 145 +++++++++++++++++++++++++++-----------------
 web/src/ChatPage.js |   6 +-
 3 files changed, 93 insertions(+), 60 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index a5f2581c..b87a659d 100644
--- a/web/src/App.js
+++ b/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()}
diff --git a/web/src/ChatBox.js b/web/src/ChatBox.js
index 592f1795..8bf1f218 100644
--- a/web/src/ChatBox.js
+++ b/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.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>}
-              />
-              <div style={{position: "absolute", top: "10px", right: "10px"}}
-              >
-                <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"}} />
+            <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: "80px"}}>{item.text}</div>}
+                />
+                <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: "fixed",
-            bottom: "100px",
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            backgroundColor: "white",
-          }}
-        >
-          <div style={{position: "relative", width: "770px", marginLeft: "-315px"}}>
-            <TextArea
-              placeholder={"Send a message..."}
-              autoSize
-              value={this.state.inputValue}
-              onChange={(e) => this.setState({inputValue: e.target.value})}
-              onKeyDown={this.handleKeyDown}
-              style={{
-                fontSize: "16px",
-                fontWeight: "normal",
-                lineHeight: "24px",
-                width: "770px",
-                height: "48px",
-                borderRadius: "6px",
-                borderColor: "rgb(229,229,229)",
-                boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
-                paddingLeft: "17px",
-                paddingRight: "17px",
-                paddingTop: "12px",
-                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 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: "90px",
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <div style={{position: "relative", width: "760px", marginLeft: "-280px"}}>
+          <TextArea
+            placeholder={"Send a message..."}
+            autoSize={{maxRows: 8}}
+            value={this.state.inputValue}
+            onChange={(e) => this.setState({inputValue: e.target.value})}
+            onKeyDown={this.handleKeyDown}
+            style={{
+              fontSize: "16px",
+              fontWeight: "normal",
+              lineHeight: "24px",
+              width: "770px",
+              height: "48px",
+              borderRadius: "6px",
+              borderColor: "rgb(229,229,229)",
+              boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
+              paddingLeft: "17px",
+              paddingRight: "17px",
+              paddingTop: "12px",
+              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;
diff --git a/web/src/ChatPage.js b/web/src/ChatPage.js
index a2ef6bb0..b37105d7 100644
--- a/web/src/ChatPage.js
+++ b/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;