如何像老版网聊一样格式化自适应卡片
How to format adaptive cards like the old version of webchat
新版标准网络聊天频道 ("gemini") 删除了所有格式。我能够通过 botframework-webchat 实现中的调整来复制大部分旧界面，但我无法获得匹配的自适应卡片格式。通过一般格式，我能够将其关闭，显示 here on Github 的 adaptiveCardHostConfig 调整更接近一点，但我仍然无法弄清楚如何复制它。具体来说，聊天气泡（在我的实现中是灰色的）不再出现在自适应卡片后面。这对于轮播尤其明显，它曾经是一个 "bubble" 有多张卡片，现在是离散卡片。此外，按钮不再是交互式的（蓝色边框曾经出现在鼠标悬停时），并且气泡 "nub" 不存在。请参阅下面的示例。请注意，我确实知道如何将卡片本身的背景设为灰色以匹配气泡，但这不是我想要的外观或之前显示的外观。
综上所述，我在问
- 我怎样才能像以前版本中那样格式化灰色背景。
- 如何将气泡块添加到卡片中（或者更准确地说，使卡片出现在气泡中）。
- 如何让自适应卡上的按钮具有交互性
单卡（左新右旧）
旋转木马（左新右旧）
这是网站代码
<!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>
Web Chat and Adaptive Cards are both open source, so it's a good idea to download their source code if you want to figure out how they work. In the Web Chat repo you can switch to the v3 branch to see how v3 works. Web Chat uses the Adaptive Cards JavaScript SDK, and the code that handles parsing and rendering is in card-elements.ts.
在botchat.css中，您可以在此处查看创建所需背景的样式：
.wc-message-content {
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
padding: 8px;
word-break: break-word; }
.wc-message-from-bot .wc-message-content {
background-color: #eceff1;
color: #000000; }
网络聊天 v4 中未使用这些 类，但您可以像这样将其应用于附件和轮播：
div.attachment.bubble,
div.content > ul.webchat__carousel__item_indented {
background-color: #eceff1;
color: #000000;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
padding: 8px;
}
我对选择器非常具体，因为还有另一种样式会尝试将填充设置为 0。如果需要，您可以只使用 !important 关键字。
您已经看到网络聊天不允许在 v4 中的附件上使用气泡小块。负责此的行是 here:
<Bubble className="attachment bubble" fromUser={fromUser} key={index} nub={false}>
您可以根据 this sample 使用 activity 中间件修改活动呈现的方式。在您的情况下，您需要在 activity.
旁边呈现一个 SVG 元素
要为您的按钮添加悬停样式，您可以再次查看 botchat.css:
.wc-card button:hover {
background-color: transparent;
border-color: #0078d7;
color: #0078d7; }
您可以使用所有这三个声明或只使用 border-color:
.ac-adaptiveCard button:hover {
border-color: #0078d7;
}
新版标准网络聊天频道 ("gemini") 删除了所有格式。我能够通过 botframework-webchat 实现中的调整来复制大部分旧界面，但我无法获得匹配的自适应卡片格式。通过一般格式，我能够将其关闭，显示 here on Github 的 adaptiveCardHostConfig 调整更接近一点，但我仍然无法弄清楚如何复制它。具体来说，聊天气泡（在我的实现中是灰色的）不再出现在自适应卡片后面。这对于轮播尤其明显，它曾经是一个 "bubble" 有多张卡片，现在是离散卡片。此外，按钮不再是交互式的（蓝色边框曾经出现在鼠标悬停时），并且气泡 "nub" 不存在。请参阅下面的示例。请注意，我确实知道如何将卡片本身的背景设为灰色以匹配气泡，但这不是我想要的外观或之前显示的外观。
综上所述，我在问
- 我怎样才能像以前版本中那样格式化灰色背景。
- 如何将气泡块添加到卡片中（或者更准确地说，使卡片出现在气泡中）。
- 如何让自适应卡上的按钮具有交互性
单卡（左新右旧）
旋转木马（左新右旧）
这是网站代码
<!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>
Web Chat and Adaptive Cards are both open source, so it's a good idea to download their source code if you want to figure out how they work. In the Web Chat repo you can switch to the v3 branch to see how v3 works. Web Chat uses the Adaptive Cards JavaScript SDK, and the code that handles parsing and rendering is in card-elements.ts.
在botchat.css中，您可以在此处查看创建所需背景的样式：
.wc-message-content { border-radius: 2px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); padding: 8px; word-break: break-word; } .wc-message-from-bot .wc-message-content { background-color: #eceff1; color: #000000; }
网络聊天 v4 中未使用这些 类，但您可以像这样将其应用于附件和轮播：
div.attachment.bubble,
div.content > ul.webchat__carousel__item_indented {
background-color: #eceff1;
color: #000000;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
padding: 8px;
}
我对选择器非常具体，因为还有另一种样式会尝试将填充设置为 0。如果需要，您可以只使用 !important 关键字。
您已经看到网络聊天不允许在 v4 中的附件上使用气泡小块。负责此的行是 here:
<Bubble className="attachment bubble" fromUser={fromUser} key={index} nub={false}>
您可以根据 this sample 使用 activity 中间件修改活动呈现的方式。在您的情况下，您需要在 activity.
旁边呈现一个 SVG 元素要为您的按钮添加悬停样式，您可以再次查看 botchat.css:
.wc-card button:hover { background-color: transparent; border-color: #0078d7; color: #0078d7; }
您可以使用所有这三个声明或只使用 border-color:
.ac-adaptiveCard button:hover {
border-color: #0078d7;
}