В новой версии стандартного канала веб-чата ("Близнецы") убрано все форматирование. Мне удалось воспроизвести большую часть старого интерфейса с помощью настроек в реализации botframework-webchat, но я не могу настроить адаптивное форматирование карты. С общим форматированием я смог приблизиться к нему, и настройки AdaptiveCardHostConfig, показанные здесь на Github , стали немного ближе, но я все еще не могу понять, как его воспроизвести. В частности, пузырь чата (который в моей реализации серый) больше не появляется за адаптивной картой. Это особенно заметно для каруселей, где раньше был один «пузырь» с несколькими карточками и теперь это дискретные карточки. Кроме того, кнопки больше не являются интерактивными (синяя рамка используется для наведения мыши), а всплывающая подсказка отсутствует. Пожалуйста, смотрите ниже для примеров. Обратите внимание, что я действительно знаю, как сделать фон для самой карты серым, чтобы он соответствовал пузырькам, но это не тот вид, который я хочу или отображал ранее.
В заключение я прошу
- Как я могу отформатировать серый фон, как это было в предыдущей версии.
- Как я могу добавить пузырьковую карточку на карту (или, точнее, сделать так, чтобы карта появлялась внутри пузыря) ).
- Как сделать кнопки на адаптивной карте интерактивными
Одиночная карта (новая слева, старая справа) 
Карусель (новая слева, старая справа) 
А вот код сайта
<!DOCTYPE html>
<html>
<head>
<title>Support Bot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
#chatbotTitle {
display: flex;
align-items: center;
height: 40px;
width: 100%;
background-color: #0067CC;
color: #FFFFFF;
font-family: Calibri, Helvetica Neue, Arial, sans-serif;
justify-content: space-between;
}
#webchat {
height: calc(100% - 40px);
width: 100%;
}
.btn {
display: flex;
background-color: white;
border: 1px solid #767676;
color: #0067CC;
text-align: center;
margin: 15px;
}
.btn:hover {
border-color: #444444;
}
.btn:active {
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="chatbotTitle"><h3 style="padding-left:10px;">Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>
<script>
let interval;
var PageTitleNotification = {
Vars:{
OriginalTitle: document.title,
Interval: null
},
On: function(notification, intervalSpeed){
var _this = this;
_this.Vars.Interval = setInterval(function(){
document.title = (_this.Vars.OriginalTitle == document.title)
? notification
: _this.Vars.OriginalTitle;
}, (intervalSpeed) ? intervalSpeed : 1000);
},
Off: function(){
clearInterval(this.Vars.Interval);
document.title = this.Vars.OriginalTitle;
}
}
// We are using a customized store to add hooks to connect event
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'WEB_CHAT/SEND_MESSAGE') {
// Message sent by the user
PageTitleNotification.Off();
clearTimeout(interval);
} else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name !== "inactive") {
// Message sent by the bot
clearInterval(interval);
interval = setTimeout(() => {
// Change title to flash the page
PageTitleNotification.On('Are you still there?');
// Notify bot the user has been inactive
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'inactive',
value: ''
}
});
}, 300000)
}
return next(action);
});
const adaptiveCardHostConfig = {
"spacing": {
"small": 3,
"default": 8,
"medium": 20,
"large": 30,
"extraLarge": 40,
"padding": 10
},
"separator": {
"lineThickness": 1,
"lineColor": "#EEEEEE"
},
"supportsInteractivity": true,
"fontTypes": {
"default": {
"fontFamily": "Calibri, sans-serif",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
},
"monospace": {
"fontFamily": "'Courier New', Courier, monospace",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
}
},
"containerStyles": {
"default": {
"backgroundColor": "#FFFFFF",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#767676"
},
"accent": {
"default": "#0063B1",
"subtle": "#0063B1"
},
"attention": {
"default": "#FF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#c3ab23",
"subtle": "#DDc3ab23"
}
}
},
"emphasis": {
"backgroundColor": "#F0F0F0",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#767676"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#c3ab23",
"subtle": "#DDc3ab23"
}
}
},
"accent": {
"backgroundColor": "#C7DEF9",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
},
"good": {
"backgroundColor": "#CCFFCC",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
},
"attention": {
"backgroundColor": "#FFC5B2",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
},
"warning": {
"backgroundColor": "#FFE2B2",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
}
},
"imageSizes": {
"small": 40,
"medium": 80,
"large": 160
},
"actions": {
"maxActions": 100,
"spacing": "default",
"buttonSpacing": 8,
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 8
},
"actionsOrientation": "vertical",
"actionAlignment": "stretch"
},
"adaptiveCard": {
"allowCustomStyle": false
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"factSet": {
"title": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "bolder",
"wrap": true,
"maxWidth": 150
},
"value": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "default",
"wrap": true
},
"spacing": 8
}
};
window.WebChat.renderWebChat(
{
adaptiveCardHostConfig,
directLine: window.WebChat.createDirectLine({
token: 'MYTOKENHERE'
}),
store: store,
userID: 'userID',
username: 'userName',
locale: 'en-US',
styleOptions: {
botAvatarInitials: 'BOT',
userAvatarInitials: 'USR',
accent: '#0067CC',
backgroundColor: 'White',
cardEmphasisBackgroundColor: '#F0F0F0',
paddingRegular: 10,
paddingWide: 10 * 2,
messageActivityWordBreak: 'break-word',
fontSizeSmall: '80%',
avatarSize: 40,
botAvatarBackgroundColor: '#0067CC',
botAvatarImage: '',
botAvatarInitials: '',
userAvatarBackgroundColor: '#ECEFF1',
userAvatarImage: '',
userAvatarInitials: '',
bubbleBackground: '#ECEFF1',
bubbleBorderColor: '#E6E6E6',
bubbleBorderRadius: 8,
bubbleBorderStyle: 'solid',
bubbleBorderWidth: 1,
bubbleFromUserBackground: '#0067CC',
bubbleFromUserBorderColor: '#E6E6E6',
bubbleFromUserBorderRadius: 8,
bubbleFromUserBorderStyle: 'solid',
bubbleFromUserBorderWidth: 1,
bubbleFromUserNubOffset: 'bottom',
bubbleFromUserNubSize: 10,
bubbleFromUserTextColor: 'White',
bubbleImageHeight: 240,
bubbleMaxWidth: 480,
bubbleMinHeight: 30,
bubbleMinWidth: 250,
bubbleNubOffset: 'bottom',
bubbleNubSize: 10,
bubbleTextColor: 'Black',
markdownRespectCRLF: true,
richCardWrapTitle: false,
rootHeight: '100%',
rootWidth: '100%',
hideScrollToEndButton: false,
hideSendBox: false,
hideUploadButton: true,
microphoneButtonColorOnDictate: '#F33',
sendBoxBackground: 'White',
sendBoxButtonColor: '#767676',
sendBoxButtonColorOnDisabled: '#CCC',
sendBoxButtonColorOnFocus: '#0067CC',
sendBoxButtonColorOnHover: '#0067CC',
sendBoxDisabledTextColor: '#767676', // defaults to subtle
sendBoxHeight: 40,
sendBoxMaxHeight: 200,
sendBoxTextColor: 'Black',
sendBoxBorderBottom: 'solid 5px #DBDEE1',
sendBoxBorderLeft: 'solid 5px #DBDEE1',
sendBoxBorderRight: 'solid 5px #DBDEE1',
sendBoxBorderTop: 'solid 5px #DBDEE1',
sendBoxPlaceholderColor: undefined, // defaults to subtle
sendBoxTextWrap: false,
showSpokenText: false,
suggestedActionBackground: 'White',
suggestedActionBorder: undefined,
suggestedActionBorderColor: '#CCCCCC',
suggestedActionBorderRadius: 0,
suggestedActionBorderStyle: 'solid',
suggestedActionBorderWidth: 1,
suggestedActionDisabledBackground: '#F9F9F9',
suggestedActionDisabledBorder: null,
suggestedActionDisabledBorderColor: '#E6E6E6',
suggestedActionDisabledBorderStyle: 'solid',
suggestedActionDisabledBorderWidth: 1,
suggestedActionDisabledTextColor: '#767676',
suggestedActionHeight: 30,
suggestedActionImageHeight: 20,
suggestedActionLayout: 'carousel',
suggestedActionTextColor: null,
groupTimestamp: false,
sendTimeout: 20000,
sendTimeoutForAttachments: 120000,
timestampColor: '#767676',
timestampFormat: 'relative',
transcriptOverlayButtonBackground: 'rgba(0, 0, 0, .6)',
transcriptOverlayButtonBackgroundOnFocus: 'rgba(0, 0, 0, .8)',
transcriptOverlayButtonBackgroundOnHover: 'rgba(0, 0, 0, .8)',
transcriptOverlayButtonColor: 'White',
transcriptOverlayButtonColorOnFocus: 'White',
transcriptOverlayButtonColorOnHover: 'White',
typingAnimationBackgroundImage: null,
typingAnimationDuration: 5000,
typingAnimationHeight: 20,
typingAnimationWidth: 64,
subtle: '#767676'
}
},
document.getElementById('webchat')
);
document.querySelector('#transcriptButton').addEventListener('click', () => {
store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE',
payload: { text: 'Email me a transcript' }
});
});
</script>
</body>
</html>