fix: chatbot input fixes (#376)

* fix: chatbot input fixes
awslabs · Sep 15, 2024 · 8acadca · 8acadca
1 parent 7397044
commit 8acadca
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 15 deletions.
diff --git a/packages/react-components/src/components/assistant-chatbot/Chatbot.spec.tsx b/packages/react-components/src/components/assistant-chatbot/Chatbot.spec.tsx
@@ -193,4 +193,42 @@ describe(Chatbot, () => {
     });
     expect(mockOnClose).toBeCalled();
   });
+
+  it('should resize message container when customer types breakline', async () => {
+    const user = userEvent.setup();
+    render(
+      <Chatbot
+        height={500}
+        messages={[
+          {
+            content: '',
+            sender: SenderType.ASSISTANT,
+            type: MessageType.TEXT,
+            id: 'UniqueID',
+            loading: false,
+          },
+        ]}
+        onSubmit={jest.fn()}
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText(
+      'Ask me anything about your IoT data'
+    );
+    expect(textarea).toBeInTheDocument();
+
+    await act(async () => {
+      return await user.type(textarea!, 'some text\n');
+    });
+
+    await act(async () => {
+      return await user.type(textarea!, 'some text\n');
+    });
+
+    const inputContainer = screen.getByTestId(
+      'assistant-chatbot-conversation-container'
+    );
+    expect(inputContainer).toBeInTheDocument();
+    expect(inputContainer.style.height).toBe('450px');
+  });
 });
diff --git a/packages/react-components/src/components/assistant-chatbot/Chatbot.tsx b/packages/react-components/src/components/assistant-chatbot/Chatbot.tsx
@@ -15,6 +15,8 @@ export interface ChatbotProps {
   onClose?: () => void;
 }
 
+const MIN_HEIGHT = 400;
+
 export const Chatbot = ({
   messages,
   visible,
@@ -25,26 +27,34 @@ export const Chatbot = ({
   const [adjustedHeight, setAdjustedHeight] = useState<number>(height || 400);
   const lastMessage = messages[messages.length - 1];
 
+  const adjustHeight = () => {
+    const chatbotInput = document.querySelector(
+      '.iot-app-kit-assistant-chatbot-input'
+    ) as HTMLElement;
+    const chatbotHeader = document.querySelector(
+      '.iot-app-kit-assistant-chatbot-header'
+    ) as HTMLElement;
+    const chatbotInputHeight = chatbotInput?.clientHeight || 0;
+    const chatbotHeaderHeight = chatbotHeader?.clientHeight || 0;
+    const newHeight = height - chatbotHeaderHeight - chatbotInputHeight - 50;
+    setAdjustedHeight(newHeight);
+  };
+
   useEffect(() => {
-    if (height > 400) {
-      const chatbotInput = document.querySelector(
-        '.iot-app-kit-assistant-chatbot-input'
-      ) as HTMLElement;
-      const chatbotHeader = document.querySelector(
-        '.iot-app-kit-assistant-chatbot-header'
-      ) as HTMLElement;
-      const chatbotInputHeight = chatbotInput?.clientHeight || 0;
-      const chatbotHeaderHeight = chatbotHeader?.clientHeight || 0;
-      const newHeight = height - chatbotHeaderHeight - chatbotInputHeight - 50;
-      setAdjustedHeight(newHeight);
+    if (height > MIN_HEIGHT) {
+      adjustHeight();
     }
   }, [visible, height]);
 
   return (
     <div className='iot-app-kit assistant-chatbot'>
       <Container
         footer={
-          <ChatbotInputBox onSubmit={onSubmit} lastMessage={lastMessage} />
+          <ChatbotInputBox
+            onSubmit={onSubmit}
+            onResize={adjustHeight}
+            lastMessage={lastMessage}
+          />
         }
         header={
           <ChatbotHeader headerText='Sitewise Assistant' onClose={onClose} />

diff --git a/packages/react-components/src/components/assistant-chatbot/ChatbotInputBox.tsx b/packages/react-components/src/components/assistant-chatbot/ChatbotInputBox.tsx
@@ -6,13 +6,22 @@ import Textarea from '@cloudscape-design/components/textarea';
 import Button from '@cloudscape-design/components/button';
 import Box from '@cloudscape-design/components/box';
 import { IMessage, SenderType } from '../../hooks/useAssistant/types';
+import {
+  InputProps,
+  NonCancelableCustomEvent,
+} from '@cloudscape-design/components';
 
 export interface ChatbotInputBox {
   onSubmit: (utterance: string) => void;
+  onResize: () => void;
   lastMessage?: IMessage;
 }
 
-export const ChatbotInputBox = ({ onSubmit, lastMessage }: ChatbotInputBox) => {
+export const ChatbotInputBox = ({
+  lastMessage,
+  onSubmit,
+  onResize,
+}: ChatbotInputBox) => {
   const [value, setValue] = useState<string>('');
   const [disabled, setDisabled] = useState<boolean>(false);
 
@@ -39,13 +48,33 @@ export const ChatbotInputBox = ({ onSubmit, lastMessage }: ChatbotInputBox) => {
     }
   };
 
+  const handleChange = (
+    event: NonCancelableCustomEvent<InputProps.ChangeDetail>
+  ) => {
+    const { value: newValue } = event.detail;
+    setValue(newValue);
+
+    if (newValue.match(/\n/g)) {
+      onResize();
+    }
+  };
+
+  const handleKeyDown = (
+    event: NonCancelableCustomEvent<InputProps.KeyDetail>
+  ) => {
+    if (event.detail.key === 'Enter' && !event.detail.shiftKey) {
+      handleClick();
+    }
+  };
+
   return (
     <div className='iot-app-kit-assistant-chatbot-input'>
       <Grid gridDefinition={[{ colspan: 11 }, { colspan: 1 }]}>
         <Textarea
           value={value}
           placeholder='Ask me anything about your IoT data'
-          onChange={(event) => setValue(event.detail.value)}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
           rows={1}
           disabled={disabled}
         />

diff --git a/packages/react-components/src/components/assistant-chatbot/chatbot.css b/packages/react-components/src/components/assistant-chatbot/chatbot.css
@@ -4,6 +4,10 @@
   min-width: 290px;
 }
 
+.iot-app-kit-assistant-chatbot-input textarea {
+  max-height: 150px;
+}
+
 .iot-app-kit.assistant-chatbot .conversation-container {
   overflow: auto;
   overflow-x: hidden;

diff --git a/...components/src/components/assistant-chatbot/conversation/ChatbotConversationContainer.tsx b/...components/src/components/assistant-chatbot/conversation/ChatbotConversationContainer.tsx
@@ -34,7 +34,12 @@ export const ChatbotConversationContainer = ({
   }, [lastMessageId, ref.current]);
 
   return (
-    <div ref={ref} className='conversation-container' style={{ height }}>
+    <div
+      ref={ref}
+      className='conversation-container'
+      data-testid='assistant-chatbot-conversation-container'
+      style={{ height }}
+    >
       <Box padding={{ top: 'm' }}>
         <SpaceBetween size='s'>
           {messages.map((message) => {