For MS Botframework webchat, Is there a way to intercept user message before being rendered in webchat and change it?
This is easy to accomplish using the createStore() method.
In the web chat script located in your page, create the store using the above method. In it, match the action.type to 'WEB_CHAT/SEND_MESSAGE'. This will capture every message that is passed thru the web chat component before it is displayed.
Be aware, this altered text (or whatever value you are changing) is what is sent to the bot. action is the root object. action.payload, effectively, represents the activity. This is where you will find the text value, etc.
Within the if statement, perform whatever change you are looking to make, then return the action object.
Lastly, include the store object within the renderWebChat component. This should set you up.
In the example below, I am appending text to the text field altering it before it is rendered and displayed.
<script>
( async function () {
const res = await fetch( 'http://somesite/directline/token', { method: 'POST' } );
const { token } = await res.json();
// 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' ) {
action.payload.text = action.payload.text + ' (Hello from behind the curtain)'
}
return next( action );
} );
window.WebChat.renderWebChat( {
directLine: window.WebChat.createDirectLine( { token } ),
userID: 'user123',
username: 'johndoe',
botAvatarInitials: 'BB',
userAvatarInitials: 'JD',
store
}, document.getElementById( 'webchat' ) );
document.querySelector( '#webchat > *' ).focus();
} )().catch( err => console.error( err ) );
</script>
Hope of help!
Related
I have a situation where I should get a song item by id to get the path for that song, and then navigate to that song on button click.
Is there any specific hook that can be used to navigate on data arrival, useEffect will be called any time that state changes but the problem is that first needs to be dispatched the action to get the song, check if it returns any item and then navigate. Typically if it is has been published on the list, it should exist on the db, but the problem might be at the API side, so that check results.length > 0 is why that check is necessary.
useEffect(() => {
const handleClick = (myId: string) => {
dispatch(SongActions.searchSong(myId));
if (results.length > 0) {
if (Object.keys(results[0]).length > 0) {
// navigate(`/songs/${results[0].myPath}`);
}
}
}
}, [dispatch, results])
When user clicks on list item which has a song title, it should call the function handleClick(id) with id of the song as parameter, that is to get the metadata of the song, src path etc.
<Typography onClick={() => handleClick(songItem.songId)} sx={styles.songListItemText}>{songItem.Title}</Typography>
Edit
And this is how I have setup the searchSong action:
searchSong: (obj: SearchSongInputModel): AppThunk<SearchPayload> => async (dispatch) => {
dispatch({
payload: { isLoading: true },
type: SearchActionType.REQUEST,
});
try {
const response = await SearchApi.searchSongAsync(obj);
if (response.length === 0) {
toast.info(`No data found: ${obj.SongId}`)
}
dispatch({
type: SearchActionType.RECEIVED_SONG,
payload: { results: response },
});
} catch (e) {
console.error("Error: ", e);
}
}
You appear to be mixing up the purpose of the useEffect hook and asynchronous event handlers like button element's onClick handlers. The useEffect hook is to meant to issue intentional side-effects in response to some dependency value updating and is tied to the React component lifecycle, while onClick handlers/etc are meant to respond to asynchronous events, i.e. a user clicking a button. They don't mix.
Assuming SongActions.searchSong is an asynchronous action, you've correctly setup Redux middleware to handle them (i.e. Thunks), and the action returns the fetched response data, then the dispatched action returns a Promise that the callback can wait for.
Example:
const navigate = useNavigate();
const dispatch = useDispatch();
const handleClick = async (myId: string) => {
const results = await dispatch(SongActions.searchSong(myId));
if (results.length > 0 && Object.keys(results[0]).length > 0) {
navigate(`/songs/${results[0].myPath}`);
}
};
...
<Typography
onClick={() => handleClick(songItem.songId)}
sx={styles.songListItemText}
>
{songItem.Title}
</Typography>
The searchSong action creator should return a resolved value for consumers to await for.
searchSong: (obj: SearchSongInputModel): AppThunk<SearchPayload> => async (dispatch) => {
dispatch(startRequest());
try {
const results = await SearchApi.searchSongAsync(obj);
if (!results.length) {
toast.info(`No data found: ${obj.SongId}`)
}
dispatch(receivedSong({ results }));
return results; // <-- return resolved value here
} catch (e) {
console.error("Error: ", e);
} finally {
dispatch(completeRequest());
}
}
You can create a state such as const [isDataPresent, setIsDataPresent] = useState(false) to keep track of if the data has arrived or not. And as David has mentioned in the comments you cannot call the function inside the useEffect on handleClick. Instead what you can do is create that function outside the useEffect hook and inside the same function you fetch the data and check if the data is at all present, if present then you can set the above boolean state to true and then redirect from that function itself.
Since you are already fetching the data from the same API and different endpoint, what you can do is -
Create a new component.
Since you are mapping over the data send the data to this component by rendering it inside the map function. It'd allow the data to be passed and components to be rendered one by one.
Create a state in the new component.
Use useEffect hook to fetch the data for a single song since when you are passing the data from the previous component to this one you would also get access to the ID and store it inside the state. This would be occurring inside the newly created component.
I'm trying to write a custom hook that uses useQuery from react-query. The custom hook takes in the id of an employee and fetches some data and returns it to the consuming component. I want to be able to dispatch a redux action to show a loading indicator or show an error message if it fails. Here is my custom hook.
export default function useEmployee(id) {
const initial = {
name: '',
address: '',
}
const query = useQuery(['fetchEmployee', id], () => getEmployee(id), {
initialData: initial,
onSettled: () => dispatch(clearWaiting()),
onError: (err) => dispatch(showError(err)),
})
if (query.isFetching || query.isLoading) {
dispatch(setWaiting())
}
return query.data
}
When I refresh the page, I get this error in the browser's console and I'm not sure how to fix this error?
Warning: Cannot update a component (`WaitIndicator`) while rendering a different component (`About`).
To locate the bad setState() call inside `About`, follow the stack trace as described in
The issue is likely with dispatching the setWaiting action outside any component lifecycle, i.e. useEffect. Move the dispatch logic into a useEffect hook with appropriate dependency.
Example:
export default function useEmployee(id) {
const initial = {
name: '',
address: '',
};
const { data, isFetching, isLoading } = useQuery(['fetchEmployee', id], () => getEmployee(id), {
initialData: initial,
onSettled: () => dispatch(clearWaiting()),
onError: (err) => dispatch(showError(err)),
});
useEffect(() => {
if (isFetching || isLoading) {
dispatch(setWaiting());
}
}, [isFetching, isLoading]);
return data;
}
We have implemented bot framework-webchat to create a bot. Currently, we handle the minimize and maximize with the event passed in component (code shown below) but the challenge occurs when I minimize and then maximize the chatbot I am seeing 'Unable to connect' message and then it flashes away and if after an hour-long later if we minimize and maximize I am getting 'Network interruption occurred, Reconnecting...' How do I keep webchat potentially automatically reconnect when I minimize and maximize Chabot.
MaximizeChatWndow () {
if (this.state.token === null &&
this.state.productService === null) {
return
}
this.setState({
directLine: this.createDirectLine()
}, () => {
this.setState({
minimized: false,
newMessage: false,
userId: 'User_' + Math.random
})
})
this.checkExpandFlag = true
}
The component:
render () {
const {
state: { minimized, store }
} = this
return (
<Row>
<Col md={12}>
<div>
{minimized ? (
<ChatDon
handleMaximizeButtonClick={this.handleMaximizeButtonClick}
/>
) : (
<ChatWin
handleMinimizeButtonClick={this.handleMinimizeButtonClick}
directLine={this.state.directLine}
userId={this.state.userId}
store={store}
/>
)}
</div>
</Col>
</Row>
)
}
It looks like you creating your directLine object in "MaximizeChatWndow()" which I think is the problem. In "MaximizeChatWndow()", you should be fetching your token and passing that to your web chat component. It is in the web chat component that you should use the token to call createDirectLine().
It appears that there have been various updates to the 06.recomposing-us/a.minimizable-web-chat sample. (The docs also look like they are out of date and no longer match the code). However, if comparing to the available sample code, you will want to do something like the following. Please look at the full code in the above link as I am only including the most relevant parts here.
When I tested, I had no issues with the conversation resetting or the network disconnecting/reconnecting.
MinimizableWebChat.js
import WebChat from './WebChat';
const MinimizableWebChat = () => {
[...]
const [token, setToken] = useState();
const handleFetchToken = useCallback(async () => {
if (!token) {
const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
const { token } = await res.json();
setToken(token);
}
}, [setToken, token]);
[...]
return (
[...]
<WebChat
className="react-web-chat"
onFetchToken={handleFetchToken}
store={store}
styleSet={styleSet}
token={token}
/>
)
WebChat.js
const WebChat = ({ className, onFetchToken, store, token }) => {
const directLine = useMemo(() => createDirectLine({ token }), [token]);
[...]
useEffect(() => {
onFetchToken();
}, [onFetchToken]);
return token ? (
<ReactWebChat ...
);
};
Hope of help!
I am using the Customization Plain UI sample and need to add custom data to the channelData. What is the best way to accomplish this when using this sample?
You can add a store middleware to the Customization Plain UI sample that adds custom channel data by passing a custom store as a prop to the Composer component. For more details, take a look at the Piggyback Data Web Chat Sample.
export default () => {
...
const store = useMemo(() => createStore({}, () => next => action => {
if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
action = simpleUpdateIn(
action,
['payload', 'activity', 'channelData', 'email'],
() => 'johndoe#example.com'
);
}
return next(action);
}), []);
...
return (
<React.Fragment>
...
{!!directLine && (
<Components.Composer directLine={directLine} store={store}>
<PlainWebChat />
</Components.Composer>
)}
</React.Fragment>
);
};
I have created a post back dialog but trying to post some arguments while calling the postback dialog in microsoft bot framework in v#4 doesn't work as expected.
I have written this code to call the post back dialog from hero card. Here i am able to call the post back but i'm not able to send values(arguments) to postback dialog.
var card1 = CardFactory.heroCard(
Name,
Address1+", "City",
CardFactory.images([Image]),
CardFactory.actions([
{
type: 'postBack',
title: Service,
value: PostBack_DIALOG,
text: 'arguments for postback dialog'
},
{
type: 'call',
title: phone ,
value: "tel:" + phoneNumber
}
])
Please suggest how to send the arguments to post back dialog in bot framework v#4
You can achieve this via sending the argument, not as part of the card, but as part of a successive sendActivities step once the hero card has rendered and the user has selected a button.
In the following code example, I have two steps. One for rendering the card and one for sending the data after the user has interacted with the card. In the first step, called postBackCardStep, I am capturing a previous value from a suggested action where the user selected either 'blue' or 'green'. That value is then passed in the Service button when that button is pressed.
In the second step, called postBackPostStep, I capture and send the user's selection in resultDetails. I also define a property, called postBackArg, and send a property vlaue for validation on the client side. I send this in a data dictionary object in a sendActivities activity. This allows me to send, as one action, both a message and the data.
async postBackCardStep ( stepContext ) {
const PostBack_DIALOG = stepContext.context.activity.text;
const reply = { type: ActivityTypes.Message };
const postBackBtn = { type: ActionTypes.PostBack, title: 'Service', value: PostBack_DIALOG }
const callBtn = { type: ActionTypes.Call, title: 'Phone', value: '123-456-7890' }
const card = CardFactory.heroCard(
'<Name>',
'<Address>',
['<link to some image>'],
[
postBackBtn,
callBtn
]
);
reply.attachments = [ card ];
await stepContext.context.sendActivity( reply );
return { status: DialogTurnStatus.waiting };
}
async postBackPostStep ( stepContext ) {
const resultDetails = stepContext.context.activity.text;
const data = { value: resultDetails, postBackArg: 'true' };
await stepContext.context.sendActivities( [
{ text: `Sending ${ resultDetails } via postBack`, type: 'message' },
{ name: 'data', type: 'event', channelData: { 'data': data } }
] );
return await stepContext.next();
}
Next, in the web chat script in the html page, I have the following code. I create a store, create and name an event, and pass the acquired data from the bot into that event. I then create an event listener that validates the data by checking if the received data is an event type and a postBackArg value of 'true' (this value should be passed from the bot as a string and validated as a string). If both checks pass, then the console message is posted with the values. The store is then passed into renderWebChat.
const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
const event = new Event('incomingActivity');
event.data = action.payload.activity;
window.dispatchEvent(event);
}
return next( action );
} );
window.addEventListener('incomingActivity', ({ data }) => {
const type = data.type;
if (type === 'event' && data.channelData.data.postBackArg === 'true') {
console.log('DATA ', data);
const resultDetails = data.channelData.data.value;
const args = data.channelData.data.postBackArg;
console.log(`Received a message from the bot (${resultDetails}) with argument value ${args}.`);
}
} );
window.WebChat.renderWebChat( {
directLine: directLine,
store
}, document.getElementById( 'webchat' ) );
document.querySelector( '#webchat > *' ).focus();
Here, you can see the data has successfully been passed from the bot to the page which, as specified in the incomingActivity event listener, only occurs if the correct data properties were passed and successfully validated.
Unless I'm much mistaken, at this point you should be good to go!
Hope of help!