From baa8e9246524ba6fcbd585354d03a217eb28ea25 Mon Sep 17 00:00:00 2001 From: Wang Yiwen <121547057+yiwen101@users.noreply.github.com> Date: Mon, 12 Aug 2024 18:30:10 +0800 Subject: [PATCH 1/4] Add payload_size_limit --- src/pages/sicp/subcomponents/chatbot/ChatBox.tsx | 14 +++++++++++++- src/pages/sicp/subcomponents/chatbot/types.tsx | 1 + 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx index eb211bab27..5806ac8a8f 100644 --- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx +++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx @@ -22,6 +22,11 @@ const BOT_ERROR_MESSAGE: Readonly = { role: 'assistant' }; +const MESSAGE_TOO_LONG_MESSAGE: Readonly = { + content: 'Your message is too long. Please try again with a shorter message.', + role: 'assistant' +}; + const scrollToBottom = (ref: React.RefObject) => { ref.current?.scrollTo({ top: ref.current?.scrollHeight }); }; @@ -32,6 +37,7 @@ const ChatBox: React.FC = ({ getSection, getText }) => { const [chatId, setChatId] = useState(); const [messages, setMessages] = useState([INITIAL_MESSAGE]); const [userInput, setUserInput] = useState(''); + const [maxContentSize, setMaxContentSize] = useState(1000); const tokens = useTokens(); const handleUserInput = (event: React.ChangeEvent) => { @@ -42,6 +48,10 @@ const ChatBox: React.FC = ({ 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); @@ -56,7 +66,7 @@ const ChatBox: React.FC = ({ getSection, getText }) => { .finally(() => { setIsLoading(false); }); - }, [chatId, tokens, userInput]); + }, [chatId, tokens, userInput, maxContentSize]); const keyDown: React.KeyboardEventHandler = useCallback( e => { @@ -71,7 +81,9 @@ const ChatBox: React.FC = ({ 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); }); }, [getSection, getText, tokens]); diff --git a/src/pages/sicp/subcomponents/chatbot/types.tsx b/src/pages/sicp/subcomponents/chatbot/types.tsx index 2f742cf396..07eaf5c22e 100644 --- a/src/pages/sicp/subcomponents/chatbot/types.tsx +++ b/src/pages/sicp/subcomponents/chatbot/types.tsx @@ -6,6 +6,7 @@ type ChatMessage = { type InitChatResponse = { response: ChatMessage; conversationId: string; + maxContentSize: number; }; type ContinueChatResponse = { From 2f51a3d9c6c452960f805e583bd221beef7cbe9e Mon Sep 17 00:00:00 2001 From: Wang Yiwen <121547057+yiwen101@users.noreply.github.com> Date: Tue, 24 Sep 2024 03:04:47 -0700 Subject: [PATCH 2/4] Add input count and input limit --- .../sicp/subcomponents/chatbot/ChatBox.tsx | 19 ++++---- src/styles/Chatbot.module.scss | 45 ++++++++++++++----- 2 files changed, 45 insertions(+), 19 deletions(-) diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx index 5806ac8a8f..66ea9a1bb2 100644 --- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx +++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx @@ -22,11 +22,6 @@ const BOT_ERROR_MESSAGE: Readonly = { role: 'assistant' }; -const MESSAGE_TOO_LONG_MESSAGE: Readonly = { - content: 'Your message is too long. Please try again with a shorter message.', - role: 'assistant' -}; - const scrollToBottom = (ref: React.RefObject) => { ref.current?.scrollTo({ top: ref.current?.scrollHeight }); }; @@ -48,10 +43,6 @@ const ChatBox: React.FC = ({ 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 = ({ getSection, getText }) => { setMessages([message]); setMaxContentSize(maxMessageSize); setChatId(conversationId); + setUserInput(''); }); }, [getSection, getText, tokens]); @@ -112,6 +104,7 @@ const ChatBox: React.FC = ({ getSection, getText }) => { ))} {isLoading &&

loading...

} +
= ({ getSection, getText }) => { value={userInput} onChange={handleUserInput} onKeyDown={keyDown} + maxLength={maxContentSize} /> +
+
+ {`${userInput.length}/${maxContentSize}`} +
+
+
+
); }; diff --git a/src/styles/Chatbot.module.scss b/src/styles/Chatbot.module.scss index e541767836..86d162e6cd 100644 --- a/src/styles/Chatbot.module.scss +++ b/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; +} From 1857e24001980fdee0c060208164081b585cfc0c Mon Sep 17 00:00:00 2001 From: Wang Yiwen <121547057+yiwen101@users.noreply.github.com> Date: Tue, 24 Sep 2024 03:05:41 -0700 Subject: [PATCH 3/4] Add asymmetrical margin for ease of reading --- src/styles/Chatbot.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/Chatbot.module.scss b/src/styles/Chatbot.module.scss index 86d162e6cd..d05d76ae7a 100644 --- a/src/styles/Chatbot.module.scss +++ b/src/styles/Chatbot.module.scss @@ -97,6 +97,7 @@ line-height: 1.5; border-radius: 10px; display: block; + margin-bottom: 5px; } .assistant { @@ -108,6 +109,7 @@ line-height: 1.5; border-radius: 10px; display: block; + margin-bottom: 10px; } .button-container { From 3db9d0effd5e6a4b1889439c0d9c9631451af4ef Mon Sep 17 00:00:00 2001 From: Wang Yiwen <121547057+yiwen101@users.noreply.github.com> Date: Tue, 24 Sep 2024 03:15:33 -0700 Subject: [PATCH 4/4] Fix format --- .../sicp/subcomponents/chatbot/ChatBox.tsx | 46 +++++++++---------- src/styles/Chatbot.module.scss | 4 +- 2 files changed, 23 insertions(+), 27 deletions(-) diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx index 66ea9a1bb2..9fc43e66b0 100644 --- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx +++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx @@ -105,30 +105,28 @@ const ChatBox: React.FC = ({ getSection, getText }) => { {isLoading &&

loading...

}
- -
-
- {`${userInput.length}/${maxContentSize}`} -
-
- -
- - -
+ +
+
{`${userInput.length}/${maxContentSize}`}
+
+ +
+ + +
); diff --git a/src/styles/Chatbot.module.scss b/src/styles/Chatbot.module.scss index d05d76ae7a..e734ecb647 100644 --- a/src/styles/Chatbot.module.scss +++ b/src/styles/Chatbot.module.scss @@ -68,8 +68,6 @@ border-radius: 50%; } - - .chat-message { height: 80%; border: 1px solid #ddd; @@ -147,7 +145,7 @@ justify-content: flex-end; display: flex; align-items: center; - height:20px + height: 20px; } .input-count { font-size: 10px;