Skip to main content

Responsive Adaptation

React Widget has built-in complete responsive adaptation solution, components automatically adjust layout and styles based on screen size.

Breakpoint Definitions​

BreakpointWidth RangeDescription
mobile< 768pxMobile devices
tablet768px - 1024pxTablet devices
desktop> 1024pxDesktop devices

variant Attribute​

All responsive-enabled components provide variant attribute:

type Variant = 'auto' | 'mobile' | 'desktop';
ValueDescription
'auto'Automatically detect screen size, dynamically switch (default value)
'mobile'Force mobile styles
'desktop'Force desktop styles

Usage Example​

// Auto adaptation (default)
<ControlPanel variant="auto" />

// Force mobile styles
<ControlPanel variant="mobile" />

// Force desktop styles
<ConversationList variant="desktop" />

Application Scenarios​

  • Embedded scenario: Force use mobile mode when embedding in small size area on PC page
  • Debug scenario: Test specific platform style behavior
  • Fixed layout: Don't want component to change with screen

Responsive Hooks​

Widget exports responsive detection Hooks:

import {
    useIsMobile,
    useIsTablet,
    useIsDesktop,
    useResponsive
} from '@bdky/aaas-pilot-kit-react-widget';

useIsMobile​

Detect if mobile:

function MyComponent() {
    const isMobile = useIsMobile();

    return (
        <div>
            {isMobile ? 'Mobile View' : 'Desktop View'}
        </div>
    );
}

useIsTablet​

Detect if tablet:

function MyComponent() {
    const isTablet = useIsTablet();

    if (isTablet) {
        return <TabletLayout />;
    }
    // ...
}

useIsDesktop​

Detect if desktop:

function MyComponent() {
    const isDesktop = useIsDesktop();

    return (
        <div style={{width: isDesktop ? 800 : '100%'}}>
            Content
        </div>
    );
}

useResponsive​

Get complete responsive information:

function MyComponent() {
    const {isMobile, isTablet, isDesktop} = useResponsive();

    return (
        <div className={
            isMobile ? 'layout-mobile' :
            isTablet ? 'layout-tablet' :
            'layout-desktop'
        }>
            Content
        </div>
    );
}

CSS Class Name Convention​

Components automatically add corresponding CSS class names based on current mode:

Class Name SuffixDescription
--mobileMobile mode
--desktopDesktop mode
/* Example: Customize mobile styles */
.apk-control-panel--mobile {
    padding: 10px;
}

/* Example: Customize desktop styles */
.apk-control-panel--desktop {
    padding: 20px;
}

Component Differences Quick Reference​

ConversationList​

FeaturePCMobile
Conversation displayShow all historyShow only latest one
Close buttonShowHide
Scroll follow buttonShowHide
PositionAbsolute positioning left sideRelative positioning

ControlPanel​

FeaturePCMobile
Input box width479px fixed100% adaptive
Button size54-55px50px
LayoutCentered absolute positioningFull-width flex
Hangup buttonOptional displayAlways display

Input​

FeaturePCMobile
Width479px100%
Height55px50px
Border radius28px20px
Padding24px16px

RecommendedQuestions​

FeaturePCMobile
LayoutHorizontal arrangementVertical arrangement
BackgroundSemi-transparent capsuleTransparent
Question itemText + arrowCard style
TitleShowDefault hidden
SeparatorShowHide

StatusOverlay​

FeaturePCMobile
Content alignmentVertically centeredTop aligned + padding
Avatar size120px100px
Font size16px14px

Conversation​

FeaturePCMobile
Border radius20pxDifferent corners different radius
MarginLeft/right 30pxLeft/right 39px
BackgroundSemi-transparentDeeper semi-transparent

Best Practices​

1. Prioritize auto Mode​

Unless there are special requirements, it's recommended to use default auto mode to let components automatically adapt:

// Recommended
<ControlPanel />

// Only specify when necessary
<ControlPanel variant="mobile" />

2. Conditional Rendering Optimization​

For completely different layouts, use conditional rendering instead of style switching:

const isMobile = useIsMobile();

// Recommended: Completely different component structures
{isMobile ? (
    <MobileLayout>
        <ConversationList />
        <ControlPanel />
    </MobileLayout>
) : (
    <DesktopLayout>
        <Sidebar>
            <ConversationList />
        </Sidebar>
        <Main>
            <Subtitle />
            <ControlPanel />
        </Main>
    </DesktopLayout>
)}

3. Combine variant​

Keep parent-child component's variant consistent:

const variant = 'mobile'; // Or get from props/state

<Layout direction="vertical">
    <ConversationList variant={variant} />
    <ControlPanel variant={variant} />
</Layout>

4. Custom Responsive Styles​

Use CSS class name hooks to add custom responsive styles:

/* Base styles */
.apk-control-panel {
    transition: all 0.3s ease;
}

/* Mobile special styles */
.apk-control-panel--mobile {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Desktop special styles */
.apk-control-panel--desktop {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

5. Combine with Media Queries​

When you need more fine-grained control, combine with CSS media queries:

@media (max-width: 768px) {
    .my-custom-layout {
        flex-direction: column;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .my-custom-layout {
        padding: 20px;
    }
}

@media (min-width: 1025px) {
    .my-custom-layout {
        max-width: 1200px;
        margin: 0 auto;
    }
}