mirror of
https://github.com/casdoor/casdoor.git
synced 2025-05-24 08:20:31 +08:00
Fix chat send
This commit is contained in:
parent
ee5c3f3f39
commit
df741805cd
@ -69,7 +69,7 @@ func GetMessages(owner string) []*Message {
|
||||
|
||||
func GetChatMessages(chat string) []*Message {
|
||||
messages := []*Message{}
|
||||
err := adapter.Engine.Desc("created_time").Find(&messages, &Message{Chat: chat})
|
||||
err := adapter.Engine.Asc("created_time").Find(&messages, &Message{Chat: chat})
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
|
@ -15,7 +15,6 @@
|
||||
import React from "react";
|
||||
import {Avatar, Input, List} from "antd";
|
||||
import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons";
|
||||
import * as Setting from "./Setting";
|
||||
|
||||
const {TextArea} = Input;
|
||||
|
||||
@ -25,6 +24,14 @@ class ChatBox extends React.Component {
|
||||
this.state = {
|
||||
inputValue: "",
|
||||
};
|
||||
|
||||
this.listContainerRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.messages !== this.props.messages) {
|
||||
this.scrollToListItem(this.props.messages.length);
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyDown = (e) => {
|
||||
@ -38,21 +45,43 @@ class ChatBox extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
scrollToListItem(index) {
|
||||
const listContainerElement = this.listContainerRef.current;
|
||||
|
||||
if (!listContainerElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetItem = listContainerElement.querySelector(
|
||||
`#chatbox-list-item-${index}`
|
||||
);
|
||||
|
||||
if (!targetItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollDistance = targetItem.offsetTop - listContainerElement.offsetTop;
|
||||
|
||||
listContainerElement.scrollTo({
|
||||
top: scrollDistance,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
send = (text) => {
|
||||
Setting.showMessage("success", text);
|
||||
this.props.sendMessage(text);
|
||||
this.setState({inputValue: ""});
|
||||
};
|
||||
|
||||
renderList() {
|
||||
return (
|
||||
<div style={{position: "relative"}}>
|
||||
<div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}>
|
||||
<List
|
||||
style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}
|
||||
itemLayout="horizontal"
|
||||
dataSource={this.props.messages === undefined ? undefined : [...this.props.messages, {}]}
|
||||
renderItem={(item, index) => {
|
||||
if (Object.keys(item).length === 0 && item.constructor === Object) {
|
||||
return <List.Item style={{
|
||||
return <List.Item id={`chatbox-list-item-${index}`} style={{
|
||||
height: "160px",
|
||||
backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
|
||||
borderBottom: "1px solid rgb(229, 229, 229)",
|
||||
@ -61,7 +90,7 @@ class ChatBox extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<List.Item style={{
|
||||
<List.Item id={`chatbox-list-item-${index}`} style={{
|
||||
backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
|
||||
borderBottom: "1px solid rgb(229, 229, 229)",
|
||||
position: "relative",
|
||||
|
@ -47,7 +47,7 @@ class ChatMenu extends React.Component {
|
||||
const globalChatIndex = chats.indexOf(chat);
|
||||
return {
|
||||
key: `${index}-${chatIndex}`,
|
||||
dataIndex: globalChatIndex,
|
||||
index: globalChatIndex,
|
||||
label: chat.displayName,
|
||||
};
|
||||
}),
|
||||
@ -61,7 +61,7 @@ class ChatMenu extends React.Component {
|
||||
this.setState({selectedKeys: [`${categoryIndex}-${chatIndex}`]});
|
||||
|
||||
if (this.props.onSelect) {
|
||||
this.props.onSelect(selectedItem.dataIndex);
|
||||
this.props.onSelect(selectedItem.index);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -42,13 +42,59 @@ class ChatPage extends BaseListPage {
|
||||
};
|
||||
}
|
||||
|
||||
addChat() {
|
||||
const newChat = this.newChat();
|
||||
ChatBackend.addChat(newChat)
|
||||
// addChat() {
|
||||
// const newChat = this.newChat();
|
||||
// ChatBackend.addChat(newChat)
|
||||
// .then((res) => {
|
||||
// if (res.status === "ok") {
|
||||
// this.props.history.push({pathname: `/chats/${newChat.name}`, mode: "add"});
|
||||
// Setting.showMessage("success", i18next.t("general:Successfully added"));
|
||||
// } else {
|
||||
// Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// deleteChat(i) {
|
||||
// ChatBackend.deleteChat(this.state.data[i])
|
||||
// .then((res) => {
|
||||
// if (res.status === "ok") {
|
||||
// Setting.showMessage("success", i18next.t("general:Successfully deleted"));
|
||||
// this.setState({
|
||||
// data: Setting.deleteRow(this.state.data, i),
|
||||
// pagination: {total: this.state.pagination.total - 1},
|
||||
// });
|
||||
// } else {
|
||||
// Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
|
||||
// });
|
||||
// }
|
||||
|
||||
newMessage(text) {
|
||||
const randomName = Setting.getRandomName();
|
||||
return {
|
||||
owner: "admin", // this.props.account.messagename,
|
||||
name: `message_${randomName}`,
|
||||
createdTime: moment().format(),
|
||||
organization: this.props.account.owner,
|
||||
chat: this.state.chatName,
|
||||
author: `${this.props.account.owner}/${this.props.account.name}`,
|
||||
text: text,
|
||||
};
|
||||
}
|
||||
|
||||
sendMessage(text) {
|
||||
const newMessage = this.newMessage(text);
|
||||
MessageBackend.addMessage(newMessage)
|
||||
.then((res) => {
|
||||
if (res.status === "ok") {
|
||||
this.props.history.push({pathname: `/chats/${newChat.name}`, mode: "add"});
|
||||
Setting.showMessage("success", i18next.t("general:Successfully added"));
|
||||
this.getMessages(this.state.chatName);
|
||||
} else {
|
||||
Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
|
||||
}
|
||||
@ -58,21 +104,14 @@ class ChatPage extends BaseListPage {
|
||||
});
|
||||
}
|
||||
|
||||
deleteChat(i) {
|
||||
ChatBackend.deleteChat(this.state.data[i])
|
||||
.then((res) => {
|
||||
if (res.status === "ok") {
|
||||
Setting.showMessage("success", i18next.t("general:Successfully deleted"));
|
||||
this.setState({
|
||||
data: Setting.deleteRow(this.state.data, i),
|
||||
pagination: {total: this.state.pagination.total - 1},
|
||||
});
|
||||
} else {
|
||||
Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
|
||||
getMessages(chatName) {
|
||||
MessageBackend.getChatMessages(chatName)
|
||||
.then((messages) => {
|
||||
this.setState({
|
||||
messages: messages,
|
||||
});
|
||||
|
||||
Setting.scrollToDiv(`chatbox-list-item-${messages.length}`);
|
||||
});
|
||||
}
|
||||
|
||||
@ -84,6 +123,9 @@ class ChatPage extends BaseListPage {
|
||||
<ChatMenu chats={chats} onSelect={(i) => {
|
||||
const chat = chats[i];
|
||||
this.getMessages(chat.name);
|
||||
this.setState({
|
||||
chatName: chat.name,
|
||||
});
|
||||
}} />
|
||||
</div>
|
||||
<div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}>
|
||||
@ -102,7 +144,7 @@ class ChatPage extends BaseListPage {
|
||||
opacity: 0.5,
|
||||
}}>
|
||||
</div>
|
||||
<ChatBox messages={this.state.messages} account={this.props.account} />
|
||||
<ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -133,6 +175,15 @@ class ChatPage extends BaseListPage {
|
||||
searchText: params.searchText,
|
||||
searchedColumn: params.searchedColumn,
|
||||
});
|
||||
|
||||
const chats = res.data;
|
||||
if (this.state.chatName === undefined && chats.length > 0) {
|
||||
const chat = chats[0];
|
||||
this.getMessages(chat.name);
|
||||
this.setState({
|
||||
chatName: chat.name,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (Setting.isResponseDenied(res)) {
|
||||
this.setState({
|
||||
@ -143,15 +194,6 @@ class ChatPage extends BaseListPage {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getMessages(chatName) {
|
||||
MessageBackend.getChatMessages(chatName)
|
||||
.then((messages) => {
|
||||
this.setState({
|
||||
messages: messages,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatPage;
|
||||
|
Loading…
x
Reference in New Issue
Block a user