Input, Search & Dialogs

Add custom styling to the agent input (the tab completion and suggestions overlay), the Search bar and the Dialogs.

Configuring the custom styles

The custom styles object is passed as argument when mounting the DeepdeskSDK:

deepdeskSDK.mount(inputElement, {
    customStyles
});

Components and class names

Example of passing class names to the suggestions overlay components using BEM notation.

const customStyles = {
    /**
     * Adds class to root node of the tab completion overlay
     */
    rootNode: 'exampleRootNode',
    portalRootNode: 'examplePortalRootNode',
    /**
     * Adds class to root node of the suggestions overlay
     */
    suggestionsRootNode: 'exampleSuggestionsRootNode',
    CommandPalette: {
        root: 'exampleCommandPalette',
        list: 'exampleCommandPalette__list',
        listWrapper: 'exampleCommandPalette__listWrapper',
        listHorizontal: 'exampleCommandPalette__listHorizontal',
        page: 'exampleCommandPalette__page',
        pageNav: 'exampleCommandPalette__page',
        pageBackButton: 'exampleCommandPalette__page',
        listHeading: 'exampleCommandPalette__listHeading',
        listItem: 'exampleCommandPalette__listItem',
        listItemContent: 'exampleCommandPalette__listItemContent',
        listItemText: 'exampleCommandPalette__listItemText',
        listItemDescription: 'exampleCommandPalette__listItemDescription',
        truncate: 'exampleCommandPalette__truncate',
        lineClamp: 'exampleCommandPalette__lineClamp',
        listItemTitle: 'exampleCommandPalette__listItemTitle',
        listItemAction: 'exampleCommandPalette__listItemAction',
        listItemSelected: 'exampleCommandPalette__listItemSelected',
        sources: 'exampleCommandPalette__sources',
        sourcesTitle: 'exampleCommandPalette__sourcesTitle',
        source: 'exampleCommandPalette__source',
        icon: 'exampleCommandPalette__icon',
        search: 'exampleCommandPalette__search',
        searchIcon: 'exampleCommandPalette__searchIcon',
        searchInputWrapper: 'exampleCommandPalette__searchInputWrapper',
        searchInput: 'exampleCommandPalette__searchInput',
        select: 'exampleCommandPalette__select',
        selectType: 'exampleCommandPalette__selectType',
        selectWrapper: 'exampleCommandPalette__selectWrapper',
        image: 'exampleCommandPalette__image',
        imageSrc: 'exampleCommandPalette__imageSrc',
        imageTitle: 'exampleCommandPalette__imageTitle',
        actions: 'exampleCommandPalette__actions',
        actionsWrapper: 'exampleCommandPalette__actionsWrapper',
        actionsBar: 'exampleCommandPalette__actionsBar',
        actionButton: 'exampleCommandPalette__actionButton',
        actionShortcut: 'exampleCommandPalette__actionShortcut',
        actionShortcutFixKerning: 'exampleCommandPalette__actionShortcutFixKerning',
    },
    Dialog: {
        root: 'exampleDialog',
        content: 'exampleDialog__content',
    },
    EditSuggestionForm: {
        root: 'exampleEditSuggestionForm',
        content: 'exampleEditSuggestionForm__content',
        title: 'exampleEditSuggestionForm__title',
        actions: 'exampleEditSuggestionForm__actions',
        pagination: 'exampleEditSuggestionForm__pagination',
        primaryButton: 'exampleEditSuggestionForm__primaryButton',
        primaryButtons: 'exampleEditSuggestionForm__primaryButtons',
    },
    EntitiesList: {
        root: 'exampleEntitiesList',
        title: 'exampleEntitiesList__title',
        empty: 'exampleEntitiesList__empty',
    },
    Label: {
        root: 'exampleLabel'
    },
    Chip: {
        root: 'exampleChip',
    },
    Login: {
        root: 'exampleLogin',
        anchor: 'exampleLogin__anchor',
        anchorButton: 'exampleLogin__anchorButton',
    },
    SearchTrigger: {
        root: 'exampleSearchTrigger',
        text: 'exampleSearchTrigger__text',
    },
    Suggestion: {
        root: 'exampleSuggestion',
        fadein: 'exampleSuggestion--fadein',
        isSelected: 'exampleSuggestion--isSelected',
        isClickable: 'exampleSuggestion--isClickable',
        actions: 'exampleSuggestion__actions',
        actionsIsFixed: 'exampleSuggestion__actions--isFixed',
        actionButton: 'exampleSuggestion__actionButton',
        actionButtonIsPrimary: 'exampleSuggestion__actionButton--isPrimary',
        actionButtonIsDisabled: 'exampleSuggestion__actionButton--isDisabled',
        dropdownList: 'exampleSuggestion__dropdownList',
        dropdownButton: 'exampleSuggestion__dropdownButton',
        dropdownItem: 'exampleSuggestion__dropdownItem',
        dropdownItemButton: 'exampleSuggestion__dropdownItemButton',
        label: 'exampleSearchTrigger__label',
        labels: 'exampleSearchTrigger__labels',
    },
    SuggestionList: {
        root: 'exampleSuggestionList',
        isWithDivider: 'exampleSuggestionList--isWithDivider'
    },
    SuggestionsOverlay: {
        root: 'exampleSuggestionsOverlay',
        isInline: 'exampleSuggestionsOverlay--isInline',
        isCollapsed: 'exampleSuggestionsOverlay--isCollapsed',
        toggleButton: 'exampleSuggestionsOverlay__toggleButton',
        toggleButtonWrapper: 'exampleSuggestionsOverlay__toggleButtonWrapper',
        toggleButtonWrapperHidden: 'exampleSuggestionsOverlay__toggleButtonWrapperHidden',
        collapsible: 'exampleSuggestionsOverlay__collapsible',
        hints: 'exampleSuggestionsOverlay__hints',
        hintsHidden: 'exampleSuggestionsOverlay__hintsHidden',
        triggers: 'exampleSuggestionsOverlay__triggers',
        triggersRight: 'exampleSuggestionsOverlay__triggersRight',
    },
    TextSuggestion: {
        badge: 'exampleTextSuggestion__badge',
        formattedText: 'exampleTextSuggestion__formattedText',
    },
    KeyboardHint: {
        root: 'exampleKeyboardHint',
    },
    ToggleButton: {
        root: 'exampleToggleButton',
        isCollapsed: 'exampleToggleButton--isCollapsed', // modifier on root element
    },
    TabCompletion: {
        root: 'exampleTabCompletion',
        container: 'exampleTabCompletion__container',
        agentText: 'exampleTabCompletion__agentText',
        tabText: 'exampleTabCompletion__tabText',
        hint: 'exampleTabCompletion__hint',
        focus: 'exampleTabCompletion__focus',
        resetIndent: 'exampleTabCompletion__resetIndent',
        matchSelection: 'exampleTabCompletion__matchSelection',
        matchKeyword: 'exampleTabCompletion__matchKeyword',
        matchPlaceholder: 'exampleTabCompletion__matchPlaceholder',
        hover: 'exampleTabCompletion__hover',
        hintText: 'exampleTabCompletion__hintText',
        popover: 'exampleTabCompletion__popover',
        popoverRoot: 'exampleTabCompletion__popoverRoot',
        popoverContentContainer: 'exampleTabCompletion__popoverContentContainer',
        popoverContent: 'exampleTabCompletion__popoverContent',
        selectionOptions: 'exampleTabCompletion__selectionOptions',
        selectionOptionsIsHidden: 'exampleTabCompletion__selectionOptionsIsHidden',
        selectionOptionsButton: 'exampleTabCompletion__selectionOptionsButton',
        caret: 'exampleTabCompletion__caret',
        popoverSuggestionsRoot: 'exampleTabCompletion__popoverSuggestionsRoot',
        suggestionsOverlayInputStyles: 'exampleTabCompletion__suggestionsOverlayInputStyles',
    },
};

CSS variables

Note that on the TabCompletion root has the following css variables set inline:

• --dd-color
• --dd-font-size
• --dd-font-family
• --dd-font-variant

These variables are the computed style values of the agent input field where the DeepdeskSDK is mounted. So --dd-color contains the computed css color value of the agent input, and so on.

You could use the TabCompletion container class name to override these values.