Fix chat send

This commit is contained in:
Yang Luo 2023-04-17 20:40:35 +08:00
parent ee5c3f3f39
commit df741805cd
4 changed files with 110 additions and 39 deletions

View File

@ -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)
}

View File

@ -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",

View File

@ -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);
}
};

View File

@ -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;