Fix chat send

object/message.go

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

web/src/ChatBox.js

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

web/src/ChatMenu.js

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

web/src/ChatPage.js

@@ -42,13 +42,59 @@ class ChatPage extends BaseListPage {
     };
   }
 
-  addChat() {
+  // addChat() {
-    const newChat = this.newChat();
+  //   const newChat = this.newChat();
-    ChatBackend.addChat(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"});
+          this.getMessages(this.state.chatName);
-          Setting.showMessage("success", i18next.t("general:Successfully added"));
         } else {
           Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
         }
@@ -58,21 +104,14 @@ class ChatPage extends BaseListPage {
       });
   }
 
-  deleteChat(i) {
+  getMessages(chatName) {
-    ChatBackend.deleteChat(this.state.data[i])
+    MessageBackend.getChatMessages(chatName)
-      .then((res) => {
+      .then((messages) => {
-        if (res.status === "ok") {
+        this.setState({
-          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          messages: messages,
-          this.setState({
+        });
-            data: Setting.deleteRow(this.state.data, i),
+
-            pagination: {total: this.state.pagination.total - 1},
+        Setting.scrollToDiv(`chatbox-list-item-${messages.length}`);
-          });
-        } 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}`);
       });
   }
 
@@ -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;