Add payload size limit (#3017)

* Add payload_size_limit

* Add input count and input limit

* Add asymmetrical margin for ease of reading

* Fix format

Author: yiwen101

src/pages/sicp/subcomponents/chatbot/ChatBox.tsx

@@ -32,6 +32,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   const [chatId, setChatId] = useState<string>();
   const [messages, setMessages] = useState<ChatMessage[]>([INITIAL_MESSAGE]);
   const [userInput, setUserInput] = useState('');
+  const [maxContentSize, setMaxContentSize] = useState(1000);
   const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -56,7 +57,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       .finally(() => {
         setIsLoading(false);
       });
-  }, [chatId, tokens, userInput]);
+  }, [chatId, tokens, userInput, maxContentSize]);
 
   const keyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
     e => {
@@ -71,8 +72,11 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     initChat(tokens, getSection(), getText()).then(resp => {
       const message = resp.response;
       const conversationId = resp.conversationId;
+      const maxMessageSize = resp.maxContentSize;
       setMessages([message]);
+      setMaxContentSize(maxMessageSize);
       setChatId(conversationId);
+      setUserInput('');
     });
   }, [getSection, getText, tokens]);
 
@@ -100,22 +104,29 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
         ))}
         {isLoading && <p>loading...</p>}
       </div>
-      <input
-        type="text"
-        disabled={isLoading}
-        className={classes['user-input']}
-        placeholder={isLoading ? 'Waiting for response...' : 'Type your message here...'}
-        value={userInput}
-        onChange={handleUserInput}
-        onKeyDown={keyDown}
-      />
-      <div className={classes['button-container']}>
-        <Button disabled={isLoading} className={classes['button-send']} onClick={sendMessage}>
-          Send
-        </Button>
-        <Button className={classes['button-clean']} onClick={resetChat}>
-          Clean
-        </Button>
+      <div className={classes['control-container']}>
+        <input
+          type="text"
+          disabled={isLoading}
+          className={classes['user-input']}
+          placeholder={isLoading ? 'Waiting for response...' : 'Type your message here...'}
+          value={userInput}
+          onChange={handleUserInput}
+          onKeyDown={keyDown}
+          maxLength={maxContentSize}
+        />
+        <div className={classes['input-count-container']}>
+          <div className={classes['input-count']}>{`${userInput.length}/${maxContentSize}`}</div>
+        </div>
+
+        <div className={classes['button-container']}>
+          <Button disabled={isLoading} className={classes['button-send']} onClick={sendMessage}>
+            Send
+          </Button>
+          <Button className={classes['button-clean']} onClick={resetChat}>
+            Clean
+          </Button>
+        </div>
       </div>
     </div>
   );

src/pages/sicp/subcomponents/chatbot/types.tsx

@@ -6,6 +6,7 @@ type ChatMessage = {
 type InitChatResponse = {
   response: ChatMessage;
   conversationId: string;
+  maxContentSize: number;
 };
 
 type ContinueChatResponse = {

src/styles/Chatbot.module.scss

@@ -6,6 +6,24 @@
   z-index: 1000;
 }
 
+.chat-container {
+  position: relative;
+  width: 400px;
+  height: 450px;
+  border-radius: 5px;
+  background-color: #f1f1f1;
+  padding: 16px;
+  z-index: 1000;
+}
+
+.control-container {
+  display: flex;
+  flex-direction: column;
+  & > :first-child {
+    margin-top: 10px;
+  }
+}
+
 .bot-area {
   position: relative;
 }
@@ -50,16 +68,6 @@
   border-radius: 50%;
 }
 
-.chat-container {
-  position: relative;
-  width: 400px;
-  height: 450px;
-  border-radius: 5px;
-  background-color: #f1f1f1;
-  padding: 16px;
-  z-index: 1000;
-}
-
 .chat-message {
   height: 80%;
   border: 1px solid #ddd;
@@ -82,11 +90,12 @@
   background-color: #a3a3a4;
   color: #fff;
   font-size: 15px;
-  text-align: right;
+  text-align: left;
   padding: 10px;
   line-height: 1.5;
   border-radius: 10px;
   display: block;
+  margin-bottom: 5px;
 }
 
 .assistant {
@@ -98,6 +107,7 @@
   line-height: 1.5;
   border-radius: 10px;
   display: block;
+  margin-bottom: 10px;
 }
 
 .button-container {
@@ -130,3 +140,18 @@
   border-radius: 10px;
   vertical-align: top;
 }
+
+.input-count-container {
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.input-count {
+  font-size: 10px;
+  color: #666;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}