From 29b2c8996fa2d2b25ef6082c1c144092523465d5 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 28 Jan 2025 14:20:39 -0700 Subject: [PATCH] bleed into message block --- .../ChatContainer/ChatContent/ChatContent.tsx | 12 ++++++--- .../ChatContent/ChatInput/ChatInput.tsx | 27 +++++++++++++++++++ .../ChatContent/ChatInput/index.ts | 1 + .../ChatResponseMessage_Thought.tsx | 2 +- .../ChatResponseMessage_ThoughtPills.tsx | 2 ++ web/src/context/Chats/MOCK_CHAT.ts | 18 ++++++++++--- 6 files changed, 55 insertions(+), 7 deletions(-) create mode 100644 web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx create mode 100644 web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/index.ts diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx index 9744e63a4..77cf4726b 100644 --- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx +++ b/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 }> = React.memo(({ chatContentRef }) => { const chatMessages = useChatContextSelector((state) => state.chatMessages); return ( -
-
- {chatMessages?.map((message) => )} +
+
+
+ {chatMessages?.map((message) => ( + + ))} +
+
); }); diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx new file mode 100644 index 000000000..cd35bbc3f --- /dev/null +++ b/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 ( +
+ + + Our AI may make mistakes. Check important info. + +
+ ); +}; + +const useStyles = createStyles(({ token, css }) => ({ + inputContainer: css` + box-shadow: 0px -10px 18px 10px ${token.colorBgContainerDisabled}; + ` +})); diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/index.ts b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/index.ts new file mode 100644 index 000000000..39c48b4ab --- /dev/null +++ b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/index.ts @@ -0,0 +1 @@ +export * from './ChatInput'; diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_Thought.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_Thought.tsx index 1305202a4..7b216230d 100644 --- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_Thought.tsx +++ b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_Thought.tsx @@ -13,7 +13,7 @@ export const ChatResponseMessage_Thought: React.FC = 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); diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_ThoughtPills.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_ThoughtPills.tsx index 79d6fa171..bef7f4246 100644 --- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Thought/ChatResponseMessage_ThoughtPills.tsx +++ b/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}; diff --git a/web/src/context/Chats/MOCK_CHAT.ts b/web/src/context/Chats/MOCK_CHAT.ts index d12784245..beac77efd 100644 --- a/web/src/context/Chats/MOCK_CHAT.ts +++ b/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() ]