@plteam/chat-ui/dist/views/thread/ThreadComponent.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';
import ChatMessages from '../message/MessagesComponent';
import ChatTextFieldRow from '../form/ChatTextFieldRow';
import Box from '@mui/material/Box';
import { ChatViewConstants } from '../ChatViewConstants';
import MessageSelectedMobile from '../message/MessageSelectedMobile';
import ChatScroller from './ChatScroller';
import { ThreadProvider } from './ThreadContext';
import { useChatContext } from '../core/ChatGlobalContext';
import { NOOP } from '../../utils/NOOP';
import { useChatSlots } from '../core/ChatSlotsContext';
import { useObserverValue } from '../hooks/useObserverValue';
const MessagesRowStyled = styled(Stack)({
    width: '100%',
    alignItems: 'center',
    flex: 1,
    paddingBottom: ChatViewConstants.MESSAGE_ROW_PADDING_BOTTOM,
    paddingTop: ChatViewConstants.MESSAGE_ROW_PADDING_TOP,
    boxSizing: 'border-box',
});
const TextRowBlock = styled(Box)(({ theme }) => ({
    width: '100%',
    minHeight: ChatViewConstants.TEXT_BLOCK_HEIGHT,
    display: 'flex',
    justifyContent: 'center',
    background: theme.palette.background.paper,
}));
const ThreadComponent = ({ contentRef, className, loading, apiManager, enableBranches, initialThread }) => {
    const scrollApiRef = React.useRef({ handleBottomScroll: NOOP });
    const { handleCreateNewThread, onAssistantMessageTypingFinish, onFirstMessageSent, getCurrentBranch, model, beforeUserMessageSend, getConversationBlockHeightMin } = useChatContext();
    const thread = useObserverValue(model.currentThread);
    const { slots, slotProps } = useChatSlots();
    React.useEffect(() => {
        if (!initialThread && !loading) {
            apiManager.apiRef.current?.openNewThread(handleCreateNewThread());
        }
    }, [loading]);
    return (React.createElement(ThreadProvider, { thread: thread, model: model, apiManager: apiManager, globalProps: {
            onAssistantMessageTypingFinish,
            enableBranches,
            onFirstMessageSent,
            beforeUserMessageSend,
            getCurrentBranch,
            getConversationBlockHeightMin,
        }, scrollRef: scrollApiRef },
        React.createElement(slots.thread, { id: ChatViewConstants.DIALOGUE_ROOT_ID, ...slotProps.thread, className: className },
            React.createElement(MessagesRowStyled, { justifyContent: thread?.messages.length ? 'stretch' : 'center' }, !!thread && (React.createElement(React.Fragment, null,
                React.createElement(ChatMessages, null)))),
            React.createElement(Stack, { position: "sticky", bottom: 0, zIndex: 1 },
                React.createElement(TextRowBlock, null,
                    React.createElement(ChatScroller, { thread: thread, contentRef: contentRef, scrollApiRef: scrollApiRef, apiManager: apiManager }),
                    React.createElement(ChatTextFieldRow, { thread: thread }))),
            React.createElement(MessageSelectedMobile, null))));
};
export default ThreadComponent;