Использование компонентов sdk

Пример использования ChatInputBar.

import React from 'react';
import { text, background, gradient } from '@sberdevices/plasma-core/tokens';

// PlasmaTheme и ChatThemeProvider нужны, чтобы мы могли использовать переменные из Plasma
import {
    ChatThemeProvider,
    ChatInputBar,
    PlasmaTheme,
    ChatHistory,
    Message,
} from '@sberdevices/assistant-web-sdk';

const card = {
    type: "list_card",
    ...
};

const character = 'sber';

export const AssistantInputBar = () => {
    // Доступны два типа сообщений: Bubble и Card
    const [history, setHistory] = React.useState<Message[]>([
        {
            me: true, // сообщение от пользователя
            bubble: {
                text: 'Первое сообщение',
            },
        },
        {
            me: false,
            card,
        },
    ]);

    return (
            <PlasmaTheme character={character} themeColor="dark" >
                <ChatThemeProvider character={character}>
                        <div style={{
                            height: '100vh',
                            width: '100vw',
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'flex-end',
                            color: text,
                            overflowY: 'auto',
                            backgroundColor: background,
                            backgroundImage: gradient,
                        }}>
                            <ChatHistory history={history} />
                            <ChatInputBar
                                // callback, которы вызывается при отправке введенного текста
                                onSubmit={(message: string) => {
                                    // message - текст, указанный при вводе
                                    // можно добавить в историю
                                }}
                                className="" // настраиваемый css-класс. Необязательно
                                placeholder="Введите сообщение" // необязательно
                            />
                        </div>
                </ChatThemeProvider>
            </PlasmaTheme>
    )
};

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней