发表新帖
发表新帖

How to style chat window using CSS when using Microsoft Bot Framework

后端 未结
关注
2 1799
心在旅途
心在旅途 2020-12-12 01:45

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

相关标签:
2条回答
  • 遇见更好的自我
    2020-12-12 01:51

    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

    1. Clone (or fork) this repo
    2. npm install
    3. 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)
  • 南方客
    2020-12-12 02:08

    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)
 看不清?
提交回复
热议问题