bleed into message block

web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { useChatContextSelector } from '../../ChatContext';
 import { ChatMessageBlock } from './ChatMessageBlock';
+import { ChatInput } from './ChatInput';
 
 export const ChatContent: React.FC<{ chatContentRef: React.RefObject<HTMLDivElement> }> =
   React.memo(({ chatContentRef }) => {
     const chatMessages = useChatContextSelector((state) => state.chatMessages);
 
     return (
-      <div ref={chatContentRef} className="h-full w-full overflow-y-auto">
+      <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="mx-auto max-w-[600px]">
+        <div ref={chatContentRef} className="h-full w-full overflow-y-auto">
-          {chatMessages?.map((message) => <ChatMessageBlock key={message.id} message={message} />)}
+          <div className="mx-auto max-w-[600px] pb-8">
+            {chatMessages?.map((message) => (
+              <ChatMessageBlock key={message.id} message={message} />
+            ))}
+          </div>
         </div>
+        <ChatInput />
       </div>
     );
   });

web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Input, Button } from 'antd';
+import { Text } from '@/components/text';
+import { createStyles } from 'antd-style';
+
+export const ChatInput: React.FC = () => {
+  const { styles, cx } = useStyles();
+
+  return (
+    <div
+      className={cx(
+        styles.inputContainer,
+        'relative z-10 flex flex-col items-center space-y-1 px-3 pb-2 pt-0.5'
+      )}>
+      <Input.TextArea />
+      <Text size="xs" type="tertiary">
+        Our AI may make mistakes. Check important info.
+      </Text>
+    </div>
+  );
+};
+
+const useStyles = createStyles(({ token, css }) => ({
+  inputContainer: css`
+    box-shadow: 0px -10px 18px 10px ${token.colorBgContainerDisabled};
+  `
+}));

web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/index.ts

@@ -0,0 +1 @@
+export * from './ChatInput';

web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_Thought.tsx

@@ -13,7 +13,7 @@ export const ChatResponseMessage_Thought: React.FC<ChatResponseMessageProps> = R
   ({ responseMessage: responseMessageProp, isCompletedStream, isLastMessageItem }) => {
     const responseMessage = responseMessageProp as BusterChatMessage_thought;
     const { thought_title, thought_secondary_title, thought_pills, in_progress } = responseMessage;
-    const { styles, cx } = useStyles();
+    const { cx } = useStyles();
     const hasPills = thought_pills && thought_pills.length > 0;
 
     const showLoadingIndicator = in_progress ?? (isLastMessageItem && !isCompletedStream);

web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_ThoughtPills.tsx

@@ -193,6 +193,8 @@ const OverflowPill = React.memo(
   }
 );
 
+OverflowPill.displayName = 'OverflowPill';
+
 const useStyles = createStyles(({ token, css }) => ({
   pill: css`
     color: ${token.colorTextSecondary};

web/src/context/Chats/MOCK_CHAT.ts

@@ -70,10 +70,22 @@ export const MOCK_CHAT: BusterChat = {
       request_message: createMockUserMessage(),
       response_messages: [
         createMockResponseMessageText(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
+        createMockResponseMessageThought(),
         createMockResponseMessageThought()
-        // createMockResponseMessageThought(),
-        // createMockResponseMessageThought(),
-        // createMockResponseMessageThought(),
         //  createMockResponseMessageFile(),
         // createMockResponseMessageFile()
       ]