Layout Components

Layout helper components: Layout, FillAdapter.

Layout

Flex layout container component, provides flexible layout capabilities.

Basic Usage

import {PilotKit, Layout, ConversationList, ControlPanel} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

function App() {
    return (
        <PilotKit {...props}>
            <Layout direction="vertical" hCenter>
                <ConversationList />
                <ControlPanel />
            </Layout>
        </PilotKit>
    );
}

Vertical Center Layout

<Layout direction="vertical" vCenter hCenter>
    <div>Vertically and horizontally centered content</div>
</Layout>

Horizontal Layout

<Layout direction="horizontal" vCenter>
    <div>Left content</div>
    <FillAdapter />
    <div>Right content</div>
</Layout>

Props

Property	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	Layout direction
fill	'full' | 'auto'	'full'	Fill mode
vCenter	boolean	false	Vertical center
hCenter	boolean	false	Horizontal center
className	string	-	Custom class name
style	CSSProperties	-	Custom style

fill Property Description

Value	Description
'full'	Fill parent container (width: 100%, height: 100%)
'auto'	Size determined by content

Style Customization

Class Name	Description
.apk-layout	Root container
.apk-layout--horizontal	Horizontal layout
.apk-layout--vertical	Vertical layout
.apk-layout--v-center	Vertical center
.apk-layout--h-center	Horizontal center
.apk-layout-fill--full	Full fill mode
.apk-layout-fill--auto	Auto size mode

---

FillAdapter

Adaptive fill component, works with Layout to occupy remaining space.

Basic Usage

import {Layout, FillAdapter, ControlPanel} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

function App() {
    return (
        <Layout direction="vertical">
            <FillAdapter />  {/* Occupy remaining space above */}
            <ControlPanel /> {/* Fixed at bottom */}
        </Layout>
    );
}

Multiple FillAdapter

You can use multiple FillAdapter components with different flex values:

<Layout direction="vertical">
    <FillAdapter flex={1} />  {/* Occupy 1 part */}
    <div>Middle content</div>
    <FillAdapter flex={2} />  {/* Occupy 2 parts */}
</Layout>

Props

Property	Type	Default	Description
flex	number	1	Flex growth factor
className	string	-	Custom class name
style	CSSProperties	-	Custom style

Adaptive Direction

FillAdapter automatically detects the parent Layout direction:

• Vertical layout: Occupy vertical space (minHeight: 0)
• Horizontal layout: Occupy horizontal space (minWidth: 0)

Using Context

FillAdapter uses the useLayout Hook to get the parent Layout direction:

import {useLayout} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

function CustomFiller() {
    const {direction} = useLayout();

    return (
        <div style={{
            flex: 1,
            ...(direction === 'vertical'
                ? {minHeight: 0}
                : {minWidth: 0})
        }} />
    );
}

Style Customization

Class Name	Description
.apk-fill-adapter	Root container

Typical Layout Examples

Digital Employee Standard Layout

<PilotKit {...props}>
    <Layout direction="vertical" hCenter>
        {/* Top: Occupy remaining space, digital human avatar displays here */}
        <FillAdapter />

        {/* Middle: Conversation list */}
        <ConversationList />

        {/* Middle: Recommended questions */}
        <RecommendedQuestions
            questions={['Question 1', 'Question 2']}
            style={{marginBottom: 10}}
        />

        {/* Bottom: Subtitle */}
        <Subtitle style={{marginBottom: 10}} />

        {/* Bottom: Control panel */}
        <ControlPanel style={{marginBottom: 30}} />
    </Layout>
</PilotKit>

Mobile Adaptation Layout

const isMobile = useIsMobile();

<PilotKit {...props}>
    <Layout direction="vertical" hCenter>
        <FillAdapter />

        {/* Show conversation list on mobile, show subtitle on PC */}
        {isMobile ? (
            <ConversationList />
        ) : (
            <Subtitle expandable onExpand={handleExpand} />
        )}

        <ControlPanel />
    </Layout>
</PilotKit>

Related

• Quick Start - Complete layout example
• Responsive Adaptation - Responsive layout guide