Add input count and input limit

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

@@ -22,11 +22,6 @@ const BOT_ERROR_MESSAGE: Readonly<ChatMessage> = {
   role: 'assistant'
 };
 
-const MESSAGE_TOO_LONG_MESSAGE: Readonly<ChatMessage> = {
-  content: 'Your message is too long. Please try again with a shorter message.',
-  role: 'assistant'
-};
-
 const scrollToBottom = (ref: React.RefObject<HTMLDivElement>) => {
   ref.current?.scrollTo({ top: ref.current?.scrollHeight });
 };
@@ -48,10 +43,6 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     if (userInput.trim() === '') {
       return;
     }
-    if (userInput.length > maxContentSize) {
-      setMessages(prev => [...prev, MESSAGE_TOO_LONG_MESSAGE]);
-      return;
-    }
     setUserInput('');
     setMessages(prev => [...prev, { role: 'user', content: userInput }]);
     setIsLoading(true);
@@ -85,6 +76,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       setMessages([message]);
       setMaxContentSize(maxMessageSize);
       setChatId(conversationId);
+      setUserInput('');
     });
   }, [getSection, getText, tokens]);
 
@@ -112,6 +104,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
         ))}
         {isLoading && <p>loading...</p>}
       </div>
+      <div className={classes['control-container']}>
       <input
         type="text"
         disabled={isLoading}
@@ -120,7 +113,14 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
         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
@@ -129,6 +129,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
           Clean
         </Button>
       </div>
+      </div>
     </div>
   );
 };

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,15 +68,7 @@
   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%;
@@ -82,7 +92,7 @@
   background-color: #a3a3a4;
   color: #fff;
   font-size: 15px;
-  text-align: right;
+  text-align: left;
   padding: 10px;
   line-height: 1.5;
   border-radius: 10px;
@@ -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;
+}