Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

bleed into message block

This commit is contained in:
Nate Kelley 2025-01-28 14:20:39 -07:00
parent f41c4da9ff
commit 29b2c8996f
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
6 changed files with 55 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
View File

@ -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="mx-auto max-w-[600px]">
{chatMessages?.map((message) => <ChatMessageBlock key={message.id} message={message} />)}
<div className="flex h-full w-full flex-col overflow-hidden">
<div ref={chatContentRef} className="h-full w-full overflow-y-auto">
<div className="mx-auto max-w-[600px] pb-8">
{chatMessages?.map((message) => (
<ChatMessageBlock key={message.id} message={message} />
))}
</div>
</div>
<ChatInput />
</div>
);
});

27
web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx Normal file
View File

@ -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};
`
}));

1
web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/index.ts Normal file
View File

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

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

@ -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);

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

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

18
web/src/context/Chats/MOCK_CHAT.ts
View File

@ -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()
]