import { jsx, jsxs } from "react/jsx-runtime";
import { styled } from "@mui/material";
import apollo_core, { FontVariantToken } from "@uipath/apollo-core";
import react from "react";
import { ApTypography } from "../../../ap-typography/index.js";
import { useChatState } from "../../providers/chat-state-provider.js";
import { AutopilotChatHistoryItem } from "./chat-history-item.js";
const GroupContainer = styled('div')(({ compactMode })=>({
        marginBottom: compactMode ? apollo_core.Spacing.SpacingXs : apollo_core.Spacing.SpacingBase
    }));
const GroupTitle = styled('h2')(()=>({
        '&&': {
            padding: `${apollo_core.Padding.PadXl} ${apollo_core.Padding.PadL}`,
            margin: `0 ${apollo_core.Spacing.SpacingBase}`
        }
    }));
const AutopilotChatHistoryGroupComponent = ({ group, isHistoryOpen })=>{
    const { spacing } = useChatState();
    return /*#__PURE__*/ jsxs(GroupContainer, {
        compactMode: spacing.compactMode,
        children: [
            /*#__PURE__*/ jsx(GroupTitle, {
                children: /*#__PURE__*/ jsx(ApTypography, {
                    variant: FontVariantToken.fontSizeSBold,
                    color: 'var(--color-foreground)',
                    children: group.title
                })
            }),
            /*#__PURE__*/ jsx("div", {
                children: group.items.map((item)=>/*#__PURE__*/ jsx(AutopilotChatHistoryItem, {
                        item: item,
                        isHistoryOpen: isHistoryOpen
                    }, item.id))
            })
        ]
    });
};
const AutopilotChatHistoryGroup = /*#__PURE__*/ react.memo(AutopilotChatHistoryGroupComponent);
export { AutopilotChatHistoryGroup };
