microsoft / botframework-webchat Goto Github PK

if we have other input filed in our reactjs page, the bot chat keeps stealing focus from it. the net result is that user can only type 1 character a time in the other inupt field

Where should the text sit?
How shall we decide which is the current locale?

We aren't refreshing tokens, so after about 30 minutes the connection to the bot fails.

Not sure when that happened!

We may get this "for free", but should verify the experience is good on mobile.

We can expect the web control to be housed in fairly narrow iframes (not to mention mobile displays) and right now at width=300 all the cards are cropped. Obviously there will be a minimum width below which we can make no guarantees, so let's decide what that is and code the CSS accordingly.

I'm using a simple "wc-" prefix for CSS class names to avoid collision. If we standardize on BotChat perhaps I should change to "bc-", or even something else. Also, I'm considering the SUIT naming convention, if it's not too heavyweight. The high level consideration is avoiding naming collision when this is embedded.

The input box loses focus after the user presses Enter to send a message, requiring the user to click or tab back to it before they can type another message.

Looks like we've still got a little work to do in terms of getting this set up right.

Here is one approach: http://frontendinsights.com/how-create-react-component-publish-npm/

We'll need a strong test framework in place at some point to make sure we don't break stuff :)

WebChat might be able to provide the user's location if they so choose. This feature might be lower priority but just getting this on the books.

Best practice seems to be to have each reducer in its own file under a 'modules' directory.

Needs some speccing.

That was a fun experiment, but it's super inefficient and buys us nothing.

This looks basically right, just needs more spacing between attachments

On Safari on a Mac, clicking the "scroll right" button doesn't go anywhere.

This works correctly on Chrome on a Mac.

In the case where the WebChat is initiated with a token (not a secret), we can keep refreshing the token. But if the user closes their laptop, we break the token refresh cycle and need to start over. It would be nice if we had a way for the hosting page/server to reissue the token from their secret.

When I extracted the DebugView from the BotChat, I created a new component called App to display them both. I also extracted their headers into App. This leaves BotChat itself with no header. This is evident when viewing index.html

Create Sagas for actions with side effects

What would we do with them? Is it important to ape the old control?

We need a way for the web page to send information to the bot via the control.

When the BotChat component is included on a page containing other text input controls, it is impossible to use the other inputs because BotChat's Shell component takes focus back aggressively.

according to a comment, plain text needs a look over as well.

The user may enter long text into the chat text box. Currently this will "side-scroll" but the textbox should become taller as if it were multi-line.

At the very least this is visual customization

I removed timestamps to make it simpler to move to Activities + Redux. Now that they're there, they can come back.

But it's worth talking about how we want them to work first.

Not new message contentTypes, but new non-"message" activities

When the DebugView panel is visible, the two panes should stack when width becomes very narrow.

After a carousel is displayed and then a few more messages are sent and received, if I scroll up to the carousel and navigate it left or right, after clicking on the nav button the chat window scrolls to the bottom (autoscroll, presumably).

See video: https://kodu.blob.core.windows.net/kodu/eanders/capture-2.mp4

Maybe use Connect from React-Redux.

A few of our selectors are global - this may mess with the host's rules.

Right now we generate a GUID but let's talk this out.

If we get the dreaded 403, show some kind of UI that says unauthorized and stop trying to call the service.

Probably in two stages:

1. Move to new endpoint, use polling GET
2. Move to WebSocket

this.autoscrollSubscription might be undefined.

    History.prototype.componentWillUnmount = function () {
        this.autoscrollSubscription.unsubscribe();
        this.storeUnsubscribe();
    };

The button press for imBack (and possibly postBack also) sends the user's id rather than user's name in the message.from.id field. Unsure which one is correct. Screen capture:

I've been told that if an array field exists we don't need to check if it's an array, but we should check that it has elements. In other words:
if (message.attachments) HandleAttachment(message.attachments[0])
should become:
if (message.attachments && message.attachments.length > 0) HandleAttachment(message.attachments[0])
but we don't need to do:
if (message.attachments && message.attachments.isArray() && message.attachments.length > 0) HandleAttachment(message.attachments[0])
One possible approach is to clean this up on intake inside DirectLine().