Botframework-webchat: Question: What is your plan about this V4?

[enessoylu]

Hi @compulim,

It seems you are rewriting WebChat from scratch, what is the reason for that and what is the plan actually, if I may ask?

[compulim]

Thanks for asking this, I have been waiting for people to dig up the mysterious v4 branch for quite some time.

Many things for sure, rewrite is hardly a good thing for our users. But we believe we have very good reasons doing it.

In short, we are trying to fulfill wishes we gathered from the GitHub issue log:

• Customization stories
  
  
  
  • "I don't want to fork Web Chat to customize it, I want to do it right out of the box."
  
  
  • Attachment
    
    
    
    
    
    • Custom render (add/replace/remove)
      
      
      
      
      
      
      
      • "I want to show a map."
      
      
      
      
      • "I want to use another version of Adaptive Cards."
      
      
      
      
      • "I don't like Markdown."
      
      
      
      
    
    
    
    • Decorators: "I want to add a border."
    
    
    
  
  
  • Activity
    
    
    
    
    
    • Custom render (add/replace/remove)
    
    
    
    • Decorators
      
      
      
      
      
      
      
      • "I want to add a button bar."
      
      
      
      
      • "I want to show a nicely-formatted welcome message."
      
      
      
      
    
    
    
  
  
  • Deep customizations, i.e. recompose Web Chat in the way you want it
    
    
    
    
    
    • "I want the send box on top, and the transcript log in reverse chronological order."
    
    
    
    • "I want the microphone button on left hand side."
    
    
    
    • "I want to add persistent menu."
    
    
    
    • "I don't like Web Chat and I want to rewrite it."
    
    
    
  
  
  • Simple styling
    
    
    
    
    
    • "I just want to modify padding, resize the bubble, or change the accent color."
    
    
    
    • "I want to add avatar."
    
    
    
  
  
  • Bundling options
    
    
    
    
    
    • "Web Chat is huge, I don't want Adaptive Cards and Markdown."
    
    
    
  
  
• Separation of backend (Redux store) and UI (React component)
  
  
  
  • "I want to talk to a bot using command-line interface."
  
  
  • "I want to write a Visual Studio Code extension that talk to the bot."
  
  
  • "I want to use Web Chat for Slack, but not Direct Line."
  
  
  • "I want to downscale/process images before uploading it."
  
  
  • "I want my bot to control my website. I want the bot to able to click that button for the user."
  
  
  • "I want to do machine-translation before showing the activity."
  
  
  • "I want to send my location."
  
  
  • "I want to control Web Chat programmatically, e.g. turning on microphone, setting the send box content, speak the last message from bot again, post to the bot without the user noticing it."
  
  
• Speech enhancements
  
  
  
  • Bing Speech is now polyfilled as Web Speech
  
  
  • "I want to use Google Cloud Speech in Web Chat."
  
  

Our plan:

• All the wishes above, can be fulfilled in the next Web Chat (almost done!)
• We will write a Proof-of-Concept for each of the wishes
  
  
  
  • It takes time, but we want to teach people how to do something right, we also want to learn why Web Chat is not working the way they think
  
  
  • We will try our best to keep up this tradition for all the future wishes
  
  

Like it? Stay tuned. We have something big coming up at Ignite conference next-next Monday.

[enessoylu]

Cool! Why did you give up from using TypeScript and redux-observable?

[compulim]

We are still going back to TypeScript. But coding in JavaScript is much faster when the team is small (imagine we scrap out the code 3-5 times until we satisfy with the coding pattern). We will migrate the code back to TypeScript soon.

redux-observable:

• RxJS bloated up the package
• Debuggability is bad (how one action is chained to another?)

We opted for redux-saga instead:

• We use it to sequence events into actions (more or less a state machine)
  
  
  
  • After we setup the CONNECT/DISCONNECT action pair. And you will see INCOMING_ACTIVITY while it's connected, and never see it when it's disconnected, even the external systems is buggy
  
  
  • I.e. we use saga to interface external systems (event/observable-based) into Redux actions
  
  
• We use it as a helper to convert actions
  
  
  
  • If we receive SEND_MESSAGE/SEND_FILES, we will convert it to POST_ACTIVITY for easier consumption
  
  
• The coding pattern allow us to easily write "do something while it is connected"

Saga can do everything, but we tried to do it in a minimal way to make sure we don't abuse its power and turn it into a beast.

We still love Observable as the public interface of DirectLineJS and will keep it as-is.

So our architecture is more like:

For DirectLineJS and Web Chat backend, they are in pure JavaScript. That means, you can use it outside of a browser, probably inside CLI or VSCode.

[compulim]

If you have more questions, keep them coming.

p.s. head down on one thing and not looking elsewhere may make us building a beast.

[blrchen]

Thanks @compulim for the awesome work. How soon can we expect first v4 release rolling out?

[compulim]

We are expecting v4 preview release to be dropped within days. 😉

[compulim]

Preview release is now under preview branch. 🎉

It is also on NPM here.

[hhasenauer]

Is there any roadmap for this? When can we expect the first stable version?
I'm really torn between building an integration with this preview, or the old version.

[deepumi]

Are you guys planning to write some docs that how to migrate V3 to V4 specific to APIs and other interfaces?.
May be the future is IBot interface according to V4

[compulim]

@hhasenauer We try not to announce a public schedule until we are very certain about it. The date won't be far. I can share you things we need to do to get it to stable:

• Accessibility test pass
• Documentations and more samples

When we design Web Chat v4, we focus deeply on developer experience (DX). We want to make sure every lines you write for a specific customization, is intuitive and minimal. We write samples before documentations to make sure the Web Chat architecture looks great to you. Then we extract code from samples into documentations, so the documentation is both solid and proven.

Since we focus a lot on DX, before getting to stable, I am expecting some samples may require us to refactor things in Web Chat. It is to make sure the code that you write to enhance Web Chat will look smooth and straightforward.

For migration, did you forked Web Chat v3 and customized the Web Chat code on your existing project?

If you didn't forked, then the migration you need to work on will be focused on CSS. The traditional SASS approach was plagued with issues. We decided to move to a modern CSS-in-JS approach (via glamor). The new style system allow you to style things in bulk (e.g. change all paddings), or update style of a specific component. You can also replace styles for your selected components, so you don't need to undo the style we applied (some styles are not undo-able, like outline). We also added bunches of options, for example, you can now set how timestamps are grouped.

If you have forked, as v3 and v4 codebase are very different, you will need to refactor your code out into a component and consume it in v4. We designed v4 as breakable components and this concept is similar to create-react-app eject or "snappable circuit board". Web Chat can be used as-is, but if you are advanced enough, you can break/snap all components apart and recompose them the way you want. Not to mention we added a new API so you can write a new UI component that works with other Web Chat components.

[compulim]

Closing this issue. We are shipping stable very soon.