Skip to content
14 changes: 13 additions & 1 deletion src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ 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'
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That way, this will never be necessary. From UX perspective, it's easier for the user to edit their message before sending in order to fit the character limit, as opposed to having to copy and paste their previous message and send it again. Not to mention, if you do it like this, there will be a mismatch between the conversation history stored in the FE state with the one stored in the DB

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right;
it is more intuitive to do let the user trigger this in the first place;
this also pollute the chat history, making it less readable.


const scrollToBottom = (ref: React.RefObject<HTMLDivElement>) => {
ref.current?.scrollTo({ top: ref.current?.scrollHeight });
};
Expand All @@ -32,6 +37,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>) => {
Expand All @@ -42,6 +48,10 @@ 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);
Expand All @@ -56,7 +66,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 => {
Expand All @@ -71,7 +81,9 @@ 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);
});
}, [getSection, getText, tokens]);
Expand Down
1 change: 1 addition & 0 deletions src/pages/sicp/subcomponents/chatbot/types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ type ChatMessage = {
type InitChatResponse = {
response: ChatMessage;
conversationId: string;
maxContentSize: number;
};

type ContinueChatResponse = {
Expand Down