Overlay Components

Overlay related components: StartupScreen, LoadingOverlay, StatusOverlay.

StartupScreen

Startup guide page component, used for scenarios requiring manual user activation (e.g., iOS iframe).

Basic Usage

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

const showStartup = ref(false);
</script>

<template>
    <PilotKit
        @needManualActivation="showStartup = true"
        v-bind="props"
    >
        <StartupScreen
            :show="showStartup"
            title="Start Conversation"
            buttonText="Activate"
            hintText="For better recognition results, please experience in a quiet environment"
            @ready="showStartup = false"
        >
            <template #avatar>
                <img src="/avatar.jpg" alt="" />
            </template>
        </StartupScreen>
    </PilotKit>
</template>

Props

Property	Type	Default	Description
show	boolean	false	Whether to show
class	string	-	Custom class name
style	CSSProperties	-	Custom style
backgroundUrl	string	-	Background image URL
title	string	'Start Conversation'	Title
buttonText	string	'Start'	Button text
hintText	string	-	Hint text

Events

Event	Type	Description
@ready	() => void	Activation success callback

Slots

Slot	Props	Description
default	{onStart, isActivating}	Custom render
avatar	-	Avatar element

Custom Rendering

<template>
    <StartupScreen :show="showStartup" v-slot="{onStart, isActivating}">
        <div class="my-startup">
            <h1>Welcome</h1>
            <button @click="onStart" :disabled="isActivating">
                {{ isActivating ? 'Activating...' : 'Start Experience' }}
            </button>
        </div>
    </StartupScreen>
</template>

Style Customization

Class Name	Description
.apk-startup-screen-wrapper	Outer container
.apk-startup-screen	Inner container
.apk-startup-screen__content	Content area
.apk-startup-screen__avatar-wrapper	Avatar wrapper
.apk-startup-screen__avatar-outer	Avatar outer layer
.apk-startup-screen__title	Title
.apk-startup-screen__hint	Hint text
.apk-startup-screen__button	Button

---

LoadingOverlay

Loading overlay component.

Basic Usage

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

const showLoading = ref(true);
</script>

<template>
    <PilotKit @ready="showLoading = false" v-bind="props">
        <LoadingOverlay
            :show="showLoading"
            title="Calling"
            description="Connecting to digital employee..."
        >
            <template #avatar>
                <img src="/avatar.jpg" alt="" />
            </template>
        </LoadingOverlay>
    </PilotKit>
</template>

Props

Property	Type	Default	Description
show	boolean	false	Whether to show
class	string	-	Custom class name
style	CSSProperties	-	Custom style
backgroundUrl	string	-	Background image URL
title	string	'Calling'	Title
description	string	''	Description text

Slots

Slot	Description
avatar	Avatar element (with breathing animation)

Style Customization

Class Name	Description
.apk-loading-overlay-wrapper	Outer container
.apk-loading-overlay	Inner container (frosted glass effect)
.apk-loading-overlay__content	Content area
.apk-loading-overlay__avatar-wrapper	Avatar wrapper (with pulse animation)
.apk-loading-overlay__avatar-outer	Avatar outer layer
.apk-loading-overlay__text	Title text
.apk-loading-overlay__tip	Description text

Animation

Avatar wrapper has pulse breathing animation, implemented through CSS @keyframes apk-calling-pulse.

---

StatusOverlay

Generic status overlay component, used for displaying busy, timeout, and other states.

Basic Usage

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

const showBusy = ref(false);
</script>

<template>
    <StatusOverlay
        v-if="showBusy"
        show
        message="Sorry, I'm busy right now, please try again later"
        buttonText="Call Again"
        backgroundUrl="/background.jpg"
        @buttonClick="showBusy = false"
    >
        <template #avatar>
            <img src="/avatar.jpg" alt="" />
        </template>
    </StatusOverlay>

    <PilotKit v-else @busy="showBusy = true" v-bind="props">
        <!-- ... -->
    </PilotKit>
</template>

Responsive Adaptation

Feature	PC	Mobile
Content Alignment	Vertical center	Top alignment + padding
Avatar Size	120px	100px
Font Size	16px	14px

Props

Property	Type	Default	Description
show	boolean	false	Whether to show
variant	'auto' | 'mobile' | 'desktop'	'auto'	Display mode
class	string	-	Custom class name
style	CSSProperties	-	Custom style
backgroundUrl	string	-	Background image URL
avatar	-	Avatar element
message	string	-	Status message
buttonText	string	'OK'	Button text

Events

Event	Type	Description
@buttonClick	() => void	Button click callback

Slots

Slot	Props	Description
default	{avatar, message, buttonText, onButtonClick}	Custom render
avatar	-	Avatar element

Custom Rendering

<template>
    <StatusOverlay
        :show="showStatus"
        v-slot="{avatar, message, buttonText, onButtonClick}"
    >
        <div class="my-status">
            <div class="avatar">
                <slot name="avatar" />
            </div>
            <p class="message">{{ message }}</p>
            <button @click="onButtonClick">{{ buttonText }}</button>
        </div>
    </StatusOverlay>
</template>

Style Customization

Class Name	Description
.apk-status-overlay-wrapper	Outer container
.apk-status-overlay	Inner container (frosted glass effect)
.apk-status-overlay__content	Content area
.apk-status-overlay__avatar-wrapper	Avatar wrapper
.apk-status-overlay__avatar-outer	Avatar outer layer
.apk-status-overlay__message	Status message
.apk-status-overlay__button	Action button

Common Scenarios

<template>
    <!-- Busy state -->
    <StatusOverlay
        :show="isBusy"
        message="Sorry, I'm busy right now, please try again later"
        buttonText="Call Again"
        @buttonClick="handleRetry"
    />

    <!-- Timeout state -->
    <StatusOverlay
        :show="isTimeout"
        message="This conversation flow has ended, I've hung up"
        buttonText="Start Again"
        @buttonClick="handleRestart"
    />

    <!-- Error state -->
    <StatusOverlay
        :show="hasError"
        message="Connection failed, please check network and retry"
        buttonText="Retry"
        @buttonClick="handleRetry"
    />
</template>

Related

• PilotKit Events - @busy, @inactivity and other events
• Quick Start - Complete example