@plteam/chat-ui/dist/views/message/reasoning/MessageReasoningTitle.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 { ArrowForwardIosIcon } from '../../../icons';
import { useObserverValue } from '../../hooks/useObserverValue';
import { useChatSlots } from '../../core/ChatSlotsContext';
import { styled } from '@mui/material/styles';
import { StatusBoxStyled } from '../MessageAssistantProgress';
import { useReasoningTimeText } from './useReasoningTimeText';
import { useLocalizationContext } from '../../core/LocalizationContext';
const arrowClassName = 'chat-ui-message-reasoning-arrow';
const TitleStackStyled = styled(StatusBoxStyled)(({ theme }) => ({
    cursor: 'pointer',
    [`& .${arrowClassName}`]: {
        transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest,
        }),
        fontSize: '0.75rem',
    }
}));
const MessageReasoningTitle = ({ message, isExpanding, handleExpandedChange, inProgress }) => {
    const locale = useLocalizationContext();
    const reasoningTitle = useObserverValue(message.reasoningManager.title) || locale.thinking;
    const reasoningEnded = !inProgress;
    useReasoningTimeText(message);
    const { slots, slotProps } = useChatSlots();
    return (React.createElement(TitleStackStyled, { direction: "row", gap: 1, alignItems: "center", sx: reasoningEnded
            ? {
                animation: 'none',
                background: 'none',
                color: 'inherit',
                textFillColor: 'currentcolor',
            } : {}, onClick: handleExpandedChange },
        React.createElement(slots.messageAssistantProgressText, { variant: "body1", ...slotProps.messageAssistantProgressText }, reasoningTitle),
        React.createElement(ArrowForwardIosIcon, { className: arrowClassName, style: {
                transform: isExpanding ? 'rotate(90deg)' : 'rotate(0deg)',
            } })));
};
export default React.memo(MessageReasoningTitle, (prevProps, nextProps) => {
    return prevProps.message.id === nextProps.message.id
        && prevProps.isExpanding === nextProps.isExpanding
        && prevProps.inProgress === nextProps.inProgress;
});