llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 21:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add loading to chat box

Browse Source
This commit is contained in:
Yang Luo
2023-04-23 00:25:09 +08:00
parent d25508fa56
commit 0ee98e2582
2 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/ChatBox.js
View File

@ -13,8 +13,9 @@
// limitations under the License. // limitations under the License.
import React from "react"; import React from "react";
import {Avatar, Input, List} from "antd"; import {Avatar, Input, List, Spin} from "antd";
import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons"; import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons";
import i18next from "i18next";
const {TextArea} = Input; const {TextArea} = Input;
@ -29,7 +30,7 @@ class ChatBox extends React.Component {
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (prevProps.messages !== this.props.messages) { if (prevProps.messages !== this.props.messages && this.props.messages !== null) {
this.scrollToListItem(this.props.messages.length); this.scrollToListItem(this.props.messages.length);
} }
} }
@ -74,11 +75,19 @@ class ChatBox extends React.Component {
}; };
renderList() { renderList() {
if (this.props.messages === undefined || this.props.messages === null) {
return (
<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
<Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "20%"}} />
</div>
);
}
return ( return (
<div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}> <div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}>
<List <List
itemLayout="horizontal" itemLayout="horizontal"
dataSource={this.props.messages === undefined ? undefined : [...this.props.messages, {}]} dataSource={[...this.props.messages, {}]}
renderItem={(item, index) => { renderItem={(item, index) => {
if (Object.keys(item).length === 0 && item.constructor === Object) { if (Object.keys(item).length === 0 && item.constructor === Object) {
return <List.Item id={`chatbox-list-item-${index}`} style={{ return <List.Item id={`chatbox-list-item-${index}`} style={{

37
web/src/ChatPage.js
View File

@ -122,28 +122,33 @@ class ChatPage extends BaseListPage {
<div style={{width: "250px", height: "100%", backgroundColor: "white", borderRight: "1px solid rgb(245,245,245)"}}> <div style={{width: "250px", height: "100%", backgroundColor: "white", borderRight: "1px solid rgb(245,245,245)"}}>
<ChatMenu chats={chats} onSelect={(i) => { <ChatMenu chats={chats} onSelect={(i) => {
const chat = chats[i]; const chat = chats[i];
this.getMessages(chat.name);
this.setState({ this.setState({
chatName: chat.name, chatName: chat.name,
messages: null,
}); });
this.getMessages(chat.name);
}} /> }} />
</div> </div>
<div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}> <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}>
<div style={{ {
position: "absolute", this.state.messages === null ? null : (
top: 0, <div style={{
left: 0, position: "absolute",
right: 0, top: -50,
bottom: 0, left: 0,
backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)", right: 0,
backgroundPosition: "center", bottom: 0,
backgroundRepeat: "no-repeat", backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)",
backgroundSize: "200px auto", backgroundPosition: "center",
backgroundBlendMode: "luminosity", backgroundRepeat: "no-repeat",
filter: "grayscale(80%) brightness(140%) contrast(90%)", backgroundSize: "200px auto",
opacity: 0.5, backgroundBlendMode: "luminosity",
}}> filter: "grayscale(80%) brightness(140%) contrast(90%)",
</div> opacity: 0.5,
}}>
</div>
)
}
<ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} /> <ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} />
</div> </div>
</div> </div>