Bot Framework Webchat 中的加载器图标
Loader icon in Bot Framework Webchat
我正在使用 Bot Framework Webchat。我正在 post 使用后台渠道 post activity 通过 store
选项向用户问候的用户相关数据很少。
<ReactWebChat
activityMiddleware={ activityMiddleware }
directLine={ window.WebChat.createDirectLine( this.state.token ) }
store = {this.handleGetStore()}
styleOptions={styleOptions}
/>
handleGetStore
returns店铺数据:
handleGetStore(){
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'userDetail',
value: this.state.userDetail
}
});
}
return next(action);
});
return store;
}
当连接启动时加载程序出现。
在此之后,在欢迎消息出现之前会有大约 3-5 秒的延迟,同时 Webchat 似乎已为用户准备就绪。
3 秒的轻微延迟是可以接受的,但延迟通常高达 10 秒或更长时间。我知道这可以通过使用应用服务的 Always On
功能并扩大计划来略微改善。有什么方法可以等待后台频道欢迎消息出现并显示加载程序吗?
参考:https://github.com/microsoft/BotFramework-WebChat/pull/1866
不幸的是,连接状态显示依赖于从 DirectLineJs 接收的事件,Web Chat 目前不支持自定义其行为。也就是说,有一种 hacky 方法可以通过分派伪 DirectLine 事件来完成您想要做的事情。
步骤如下:
创建一个标志,指示机器人是否已发送欢迎消息 - received_welcome_message
。
当 Web Chat 调度连接完成事件时,检查标志
以确保已收到欢迎消息。如果机器人没有
发送欢迎消息,将欢迎事件发送给机器人并重置
连接状态到 fulfilling。
当网络聊天收到 activity
从机器人中,检查它是否是欢迎消息。我会推荐
在 bot 端向消息添加名称属性以检查 - await
context.sendActivity({ text: 'Welcome', name: 'welcome'})
。如果
activity 是欢迎消息,发送连接完成事件并将标志设置为 true。
有关详细信息,请查看下面的代码片段。
let received_welcome_message = false;
const store = createStore(
{},
({ dispatch}) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
if (!received_welcome_message) {
dispatch({
type: 'DIRECT_LINE/CONNECT_FULFILLING'
});
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: { name: 'webchat/join' }
});
return
}
} else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name === 'welcome') {
received_welcome_message = true;
dispatch({
type: 'DIRECT_LINE/CONNECT_FULFILLED',
});
}
return next(action);
}
);
编辑
一种不太老套的方法是在与机器人的连接完成时发送一个 post activity 挂起事件,以模仿机器人发送欢迎消息。请注意,机器人不知道被模仿的 activity。请参阅下面的代码片段。
const store = createStore(
{},
({ dispatch}) => next => action => {
console.log(action)
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'DIRECT_LINE/POST_ACTIVITY_PENDING',
meta: { method: 'keyboard' },
payload: {
activity: {
from: { role: "bot" },
text: "Welcome Message",
textFormat: "plain",
timestamp: new Date().toString(),
type: "message"
}
}
})
}
return next(action);
}
希望对您有所帮助!
我正在使用 Bot Framework Webchat。我正在 post 使用后台渠道 post activity 通过 store
选项向用户问候的用户相关数据很少。
<ReactWebChat
activityMiddleware={ activityMiddleware }
directLine={ window.WebChat.createDirectLine( this.state.token ) }
store = {this.handleGetStore()}
styleOptions={styleOptions}
/>
handleGetStore
returns店铺数据:
handleGetStore(){
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'userDetail',
value: this.state.userDetail
}
});
}
return next(action);
});
return store;
}
当连接启动时加载程序出现。
在此之后,在欢迎消息出现之前会有大约 3-5 秒的延迟,同时 Webchat 似乎已为用户准备就绪。
3 秒的轻微延迟是可以接受的,但延迟通常高达 10 秒或更长时间。我知道这可以通过使用应用服务的 Always On
功能并扩大计划来略微改善。有什么方法可以等待后台频道欢迎消息出现并显示加载程序吗?
参考:https://github.com/microsoft/BotFramework-WebChat/pull/1866
不幸的是,连接状态显示依赖于从 DirectLineJs 接收的事件,Web Chat 目前不支持自定义其行为。也就是说,有一种 hacky 方法可以通过分派伪 DirectLine 事件来完成您想要做的事情。
步骤如下:
创建一个标志,指示机器人是否已发送欢迎消息 -
received_welcome_message
。当 Web Chat 调度连接完成事件时,检查标志 以确保已收到欢迎消息。如果机器人没有 发送欢迎消息,将欢迎事件发送给机器人并重置 连接状态到 fulfilling。
当网络聊天收到 activity 从机器人中,检查它是否是欢迎消息。我会推荐 在 bot 端向消息添加名称属性以检查 -
await context.sendActivity({ text: 'Welcome', name: 'welcome'})
。如果 activity 是欢迎消息,发送连接完成事件并将标志设置为 true。
有关详细信息,请查看下面的代码片段。
let received_welcome_message = false;
const store = createStore(
{},
({ dispatch}) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
if (!received_welcome_message) {
dispatch({
type: 'DIRECT_LINE/CONNECT_FULFILLING'
});
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: { name: 'webchat/join' }
});
return
}
} else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name === 'welcome') {
received_welcome_message = true;
dispatch({
type: 'DIRECT_LINE/CONNECT_FULFILLED',
});
}
return next(action);
}
);
编辑
一种不太老套的方法是在与机器人的连接完成时发送一个 post activity 挂起事件,以模仿机器人发送欢迎消息。请注意,机器人不知道被模仿的 activity。请参阅下面的代码片段。
const store = createStore(
{},
({ dispatch}) => next => action => {
console.log(action)
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'DIRECT_LINE/POST_ACTIVITY_PENDING',
meta: { method: 'keyboard' },
payload: {
activity: {
from: { role: "bot" },
text: "Welcome Message",
textFormat: "plain",
timestamp: new Date().toString(),
type: "message"
}
}
})
}
return next(action);
}
希望对您有所帮助!