How to style chat window using CSS when using Micr

I have created a simple Chat bot through the use of Microsoft Q&A maker and deployment to azure. Out of the box, the bot has its own default style.

I want to be able to edit the look and feel of the chat window, possibly using CSS. I have found a couple of questions here but they do not give the complete answer I am looking for. I have done some research and found information at these URLs:

https://github.com/Microsoft/BotFramework-WebChat https://github.com/Microsoft/BotBuilder/issues/202

The first link above gives this explanation under the heading of 'Styling':

"In the /src/scss/ folder you will find the source files for generating /botchat.css . Run npm run build-css to compile once you've made your changes. For basic branding, change colors.scss to match your color scheme. For advanced styling, change botchat.scss ."

I do not fully understand how these files are connected to my project. I also do not know how to implement the techniques outlined above. I cannot find a specific set of steps to take to change the style of the chat window. Hopefully someone can explain in detail how I can use the techniques above (or that they know already) to change my bot styles.

If anyone knows the most straight forward method to style the Microsoft Bot chat window, or could point me in the right direction, that would be great!

标签： c# css azure bots botframework

2条回答

Explosion°爆炸

2楼-- · 2019-07-22 15:04

How is it working now?

I do not fully understand how these files are connected to my project: assuming that you are using iframe implementation, it means that you are using the compiled version of the source code you found.

If you have a look to the iframe content (doing a GET on the URL), it looks like the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>MyBotId</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
        <link href="/css/adaptive/botchat.css" rel="stylesheet" />
        <link href="/css/adaptive/botchat-fullwindow.css" rel="stylesheet" />
    </head>
    <body>
        <div id="BotChatElement"></div>
        <script src="/scripts/adaptive/botchat.js"></script>
        <script>
            var model = {
                 "userId": "demo1234",
                 "userName": "You",
                 "botId": "MyBotId",
                 "botIconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
                 "botName": "MyBotId",
                 "secret": "mySecret",
                 "iconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
                 "directLineUrl": "https://webchat.botframework.com/v3/directline",
                 "webSocketEnabled": "false"
            };
        </script>
        <script>
        BotChat.App({
            directLine: {
                secret: model.secret,
                token: model.token,
                domain: model.directLineUrl,
                webSocket: false
            },
            user: { id: model.userId, name: model.userName },
            bot: { id: model.botId, name: model.botName },
            resize: 'window'
        }, document.getElementById("BotChatElement"));

    </script>
    </body>
</html>

So as you can see, it is referencing a css file, the one compiled by the GitHub project.

How to add your custom css?

On your side, you can edit this css, edit it, and use the same implementation as above but replace the css link to yours.

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2019-07-22 15:16

To customize the WebChat module, head on over to https://github.com/Microsoft/BotFramework-WebChat and fork the repository, then you can add your own CSS customizations and deploy your own custom themed chat interface. You will find the styling options here: https://github.com/Microsoft/BotFramework-WebChat/tree/master/src/scss

Customizing WebChat

Styling

In the /src/scss/ folder you will find the source files for generating /botchat.css. Run npm run build-css to compile once you've made your changes. For basic branding, change colors.scss to match your color scheme. For advanced styling, change botchat.scss.

Card Sizes / Responsiveness

WebChat strives to use responsive design when possible. As part of this, WebChat cards come in 3 sizes: narrow (216px), normal (320px) and wide (416px). In a full-window chat, these sizes are invoked by a CSS media query in the /botchat-fullwindow.css style sheet. You may customize this style sheet for the media query breakpoints in your own application. Or, if your WebChat implementation is not a full-window experience, you can manually invoke card sizes by adding the CSS classes wc-narrow and wc-wide to the HTML element containing your chat.

Strings

You can alter or add localized strings in /src/Strings.ts:

Add one or more locales (with associated localized strings) to localizedStrings
Add logic to map the requested locale to the supported locale in strings
Please help the community by submitting a pull request.

Behaviors

Behavioral customization will require changing the TypeScript files in /src. A full description of the architecture of WebChat is beyond the scope of this document, but here are a few starters:

Architecture

Chat is the top-level React component
App creates a React application consists solely of Chat
Chat largely follows the Redux architecture laid out in this video series
To handle async side effects of Redux actions, Chat uses Epic from redux-observable - here's a video introduction
Underlying redux-observable (and also DirectLineJS) is the RxJS library, which implements the Observable pattern for wrangling async. A minimal grasp of RxJS is key to understanding WebChat's plumbing.

Building WebChat

Clone (or fork) this repo
npm install
npm run build (to build on every change npm run watch, to build production npm run prepublish)

This builds the following:

/built/*.js compiled from the TypeScript sources in /src/*.js - /built/BotChat.js is the root
/built/*.d.ts declarations for TypeScript users - /built/BotChat.d.ts is the root
/built/*.js.map sourcemaps for easier debugging
/botchat.js webpacked UMD file containing all dependencies (React, Redux, RxJS, polyfills, etc.)
/botchat.css base stylesheet
/botchat-fullwindow.css media query stylesheet for a full-window experience

0人赞添加讨论(0) 举报