feat: change chat box style (#606)

controllers/chat.go

@@ -31,8 +31,7 @@ func (c *ApiController) GetGlobalChats() {
 }
 
 func (c *ApiController) GetChats() {
-	owner := c.Input().Get("owner")
-
+	owner := "admin"
 	chats, err := object.GetChats(owner)
 	if err != nil {
 		c.ResponseError(err.Error())
@@ -81,6 +80,7 @@ func (c *ApiController) AddChat() {
 		return
 	}
 
+	chat.Owner = "admin"
 	success, err := object.AddChat(&chat)
 	if err != nil {
 		c.ResponseError(err.Error())

controllers/message.go

@@ -35,27 +35,26 @@ func (c *ApiController) GetGlobalMessages() {
 }
 
 func (c *ApiController) GetMessages() {
-	owner := c.Input().Get("owner")
+	owner := "admin"
 	chat := c.Input().Get("chat")
 
-	if owner != "" && chat == "" {
+	if chat == "" {
 		messages, err := object.GetMessages(owner)
 		if err != nil {
 			c.ResponseError(err.Error())
 			return
 		}
 		c.ResponseOk(messages)
-	} else if chat != "" && owner == "" {
-		messages, err := object.GetChatMessages(chat)
-		if err != nil {
-			c.ResponseError(err.Error())
-			return
-		}
-		c.ResponseOk(messages)
-	} else {
-		c.ResponseError("Invalid get messages request")
 		return
 	}
+
+	messages, err := object.GetChatMessages(chat)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.ResponseOk(messages)
 }
 
 func (c *ApiController) GetMessage() {

controllers/provider.go

@@ -31,7 +31,7 @@ func (c *ApiController) GetGlobalProviders() {
 }
 
 func (c *ApiController) GetProviders() {
-	owner := c.Input().Get("owner")
+	owner := "admin"
 
 	providers, err := object.GetProviders(owner)
 	if err != nil {
@@ -81,6 +81,7 @@ func (c *ApiController) AddProvider() {
 		return
 	}
 
+	provider.Owner = "admin"
 	success, err := object.AddProvider(&provider)
 	if err != nil {
 		c.ResponseError(err.Error())

object/chat.go

@@ -58,7 +58,7 @@ func GetChats(owner string) ([]*Chat, error) {
 }
 
 func getChat(owner, name string) (*Chat, error) {
-	chat := Chat{Owner: owner, Name: name}
+	chat := Chat{Owner: "admin", Name: name}
 	existed, err := adapter.engine.Get(&chat)
 	if err != nil {
 		return nil, err

util/string.go

@@ -72,7 +72,7 @@ func GetOwnerAndNameFromId(id string) (string, string) {
 		panic(errors.New("GetOwnerAndNameFromId() error, wrong token count for ID: " + id))
 	}
 
-	return tokens[0], tokens[1]
+	return "admin", tokens[1]
 }
 
 func GetOwnerAndNameFromId3(id string) (string, string, string) {

web/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.12.0",
     "@ant-design/icons": "4.6.2",
+    "@chatscope/chat-ui-kit-react": "^1.10.1",
+    "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "@craco/craco": "6.4.5",
     "@cyntler/react-doc-viewer": "^1.5.2",
     "aliplayer-react": "^0.7.0",
@@ -19,6 +21,7 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "file-saver": "^2.0.2",
     "i18next": "^19.8.9",
+    "markdown-it": "^13.0.1",
     "moment": "^2.29.1",
     "papaparse": "^5.4.1",
     "rc-bullets": "^1.5.16",

web/src/App.less

@@ -100,3 +100,23 @@ img {
     color: black;
   }
 }
+
+.cs-message--incoming .cs-message__content {
+  background-color: #f3ecfc !important;
+}
+
+.cs-message-input__content-editor-wrapper {
+  background-color: #f3ecfc !important;
+}
+
+.cs-message-input__content-editor {
+  background-color: #f3ecfc !important;
+}
+
+.cs-button--send {
+  color: #614d99;
+}
+
+.cs-message--outgoing .cs-message__content {
+  background-color: #f3ecfc !important;
+}

web/src/ChatBox.js

@@ -13,205 +13,47 @@
 // limitations under the License.
 
 import React from "react";
-import {Alert, Avatar, Input, List, Spin} from "antd";
-import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons";
-import i18next from "i18next";
+import {Avatar, ChatContainer, ConversationHeader, MainContainer, Message, MessageInput, MessageList} from "@chatscope/chat-ui-kit-react";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 
-const {TextArea} = Input;
+const robot = "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png";
 
 class ChatBox extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      inputValue: "",
-    };
-
-    this.listContainerRef = React.createRef();
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.messages !== this.props.messages && this.props.messages !== undefined && this.props.messages !== null) {
-      this.scrollToListItem(this.props.messages.length);
-    }
-  }
-
-  handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-
-      if (this.state.inputValue !== "") {
-        this.send(this.state.inputValue);
-        this.setState({inputValue: ""});
-      }
-    }
+  handleSend = (innerHtml, textContent) => {
+    this.props.sendMessage(textContent);
   };
 
-  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) => {
-    this.props.sendMessage(text);
-    this.setState({inputValue: ""});
-  };
-
-  renderText(text) {
-    const lines = text.split("\n").map((line, index) => (
-      <React.Fragment key={index}>
-        {line}
-        <br />
-      </React.Fragment>
-    ));
-
-    return <div>{lines}</div>;
-  }
-
-  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 (
-      <React.Fragment>
-        <div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}>
-          <List
-            itemLayout="horizontal"
-            dataSource={[...this.props.messages, {}]}
-            renderItem={(item, index) => {
-              if (Object.keys(item).length === 0 && item.constructor === Object) {
-                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)",
-                  position: "relative",
-                }} />;
-              }
-
-              return (
-                <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",
-                }}>
-                  <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.includes("#ERROR#") ? this.renderText(item.text) : (
-                              <Alert message={item.text.slice("#ERROR#: ".length)} type="error" showIcon />
-                            )
-                          }
-                        </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>
-        <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",
-        }} />
-      </React.Fragment>
-    );
-  }
-
-  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() {
+    let messages = this.props.messages;
+    if (messages === null) {
+      messages = [];
+    }
     return (
-      <div>
-        {
-          this.renderList()
-        }
-        {
-          this.renderInput()
-        }
-      </div>
+      <MainContainer style={{display: "flex", width: "100%", height: "100%"}} >
+        <ChatContainer style={{display: "flex", width: "100%", height: "100%"}}>
+          <ConversationHeader>
+            <Avatar src={robot} name="AI" />
+            <ConversationHeader.Content userName="AI" />
+          </ConversationHeader>
+          <MessageList>
+            {messages.map((message, index) => (
+              <Message key={index} model={{
+                message: message.text,
+                sentTime: "just now",
+                sender: message.name,
+                direction: message.author === "AI" ? "incoming" : "outgoing",
+              }} avatarPosition={message.author === "AI" ? "tl" : "tr"}>
+                <Avatar src={message.author === "AI" ? robot : this.props.account.avatar} name="GPT" />
+              </Message>
+            ))}
+          </MessageList>
+          <MessageInput placeholder="Type message here" onSend={this.handleSend} />
+        </ChatContainer>
+      </MainContainer>
     );
   }
 }

web/yarn.lock

@@ -1250,6 +1250,24 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@chatscope/chat-ui-kit-react@^1.10.1":
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@chatscope/chat-ui-kit-react/-/chat-ui-kit-react-1.10.1.tgz#cdf7ebef607bc527205eb8614ce4b8ac9f585b1e"
+  integrity sha512-pJIxvM9zR2oPk601P/S3Du1lZZSQcv76+8/IUhhWo88oy1iqiw2yk71T3nzE0sr8kRfZ8FoSSxOjVx9j7amjow==
+  dependencies:
+    "@chatscope/chat-ui-kit-styles" "^1.2.0"
+    "@fortawesome/fontawesome-free" "^5.12.1"
+    "@fortawesome/fontawesome-svg-core" "^1.2.26"
+    "@fortawesome/free-solid-svg-icons" "^5.12.0"
+    "@fortawesome/react-fontawesome" "^0.1.8"
+    classnames "^2.2.6"
+    prop-types "^15.7.2"
+
+"@chatscope/chat-ui-kit-styles@^1.2.0", "@chatscope/chat-ui-kit-styles@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@chatscope/chat-ui-kit-styles/-/chat-ui-kit-styles-1.4.0.tgz#17ded0439d306f7cd2a81f40a2ef197a6ce6bb7b"
+  integrity sha512-016mBJD3DESw7Nh+lkKcPd22xG92ghA0VpIXIbjQtmXhC7Ve6wRazTy8z1Ahut+Tbv179+JxrftuMngsj/yV8Q==
+
 "@craco/craco@6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.4.5.tgz#471e67082a2ffd3edf73759b215bdc16250d27b3"
@@ -1471,6 +1489,42 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.44.0.tgz#961a5903c74139390478bdc808bcde3fc45ab7af"
   integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-common-types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
+  integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==
+
+"@fortawesome/fontawesome-free@^5.12.1":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
+  integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.26":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz#343fac91fa87daa630d26420bfedfba560f85885"
+  integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
+
+"@fortawesome/free-solid-svg-icons@^5.12.0":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.1.8":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz#2b36917578596f31934e71f92b7cf9c425fd06e4"
+  integrity sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.7"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.7.tgz#6d53769fd0c222767e6452e8ebda825c22e9f0dc"
@@ -4668,6 +4722,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 errno@^0.1.1:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -7136,6 +7195,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^13.0.3:
   version "13.2.3"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.2.3.tgz#f899aad6c093473467e9c9e316e3c2d8a28f87a7"
@@ -7379,6 +7445,17 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -7394,6 +7471,11 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -11011,6 +11093,11 @@ ua-parser-js@^0.7.24:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
   integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"