Layout Components

Layout helper components: Layout, FillAdapter.

Layout

Flex layout container component, provides flexible layout capabilities.

Basic Usage

<script setup lang="ts">
import {PilotKit, Layout, ConversationList, ControlPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';
</script>

<template>
    <PilotKit v-bind="props">
        <Layout direction="vertical" hCenter>
            <ConversationList />
            <ControlPanel />
        </Layout>
    </PilotKit>
</template>

Vertical Center Layout

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

Horizontal Layout

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

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
class	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

<script setup lang="ts">
import {Layout, FillAdapter, ControlPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';
</script>

<template>
    <Layout direction="vertical">
        <FillAdapter />  {/* Occupy remaining space above */}
        <ControlPanel /> {/* Fixed at bottom */}
    </Layout>
</template>

Multiple FillAdapter

You can use multiple FillAdapter components with different flex values:

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

Props

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

Adaptive Direction

FillAdapter automatically detects parent Layout direction:

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

Using Composable

FillAdapter uses useLayout Composable to get parent Layout direction:

<script setup lang="ts">
import {useLayout} from '@bdky/aaas-pilot-kit-vue3-widget';

const {direction} = useLayout();
</script>

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

Style Customization

Class Name	Description
.apk-fill-adapter	Root container

Typical Layout Examples

Digital Employee Standard Layout

<script setup lang="ts">
import {
    PilotKit,
    Layout,
    FillAdapter,
    ConversationList,
    RecommendedQuestions,
    Subtitle,
    ControlPanel
} from '@bdky/aaas-pilot-kit-vue3-widget';
</script>

<template>
    <PilotKit v-bind="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: '10px'}"
            />

            <!-- Bottom: Subtitle -->
            <Subtitle :style="{marginBottom: '10px'}" />

            <!-- Bottom: Control panel -->
            <ControlPanel :style="{marginBottom: '30px'}" />
        </Layout>
    </PilotKit>
</template>

Mobile Adaptation Layout

<script setup lang="ts">
import {
    PilotKit,
    Layout,
    FillAdapter,
    ConversationList,
    Subtitle,
    ControlPanel,
    useIsMobile
} from '@bdky/aaas-pilot-kit-vue3-widget';

const isMobile = useIsMobile();
</script>

<template>
    <PilotKit v-bind="props">
        <Layout direction="vertical" hCenter>
            <FillAdapter />

            <!-- Show conversation list on mobile, show subtitle on PC -->
            <ConversationList v-if="isMobile" />
            <Subtitle v-else expandable @expand="handleExpand" />

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

Related

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