Веб-чат botframework V4 создает и генерирует собственный файл CSS и JS

Я клонировал репозиторий из https://github.com/microsoft/BotFramework-WebChat и смог построить проект после некоторых изменений с помощью следующей команды npm

npm запустить сборку

Однако в этой сборке не были созданы файлы botchat.css и botchat.js, которые создавались более ранними версиями веб-чата. Причина моей нестандартной сборки в том, что мне нужно отображать форматирование HTML в веб-чате. Любые шаги по получению файлов .css и .js были бы действительно полезны.


azure botframework direct-line-botframework azure-language-understanding
person Vijay    schedule 07.08.2019    source источник
comment
Отметка решения как принятого служит большему сообществу Stack Overflow и всем, у кого есть аналогичный вопрос. Если вы считаете, что моего ответа было достаточно, примите его. Если нет, дайте мне знать, чем еще я могу помочь!   -  person tdurnford    schedule 16.08.2019

Ответы (2)


arrow_upward
2
arrow_downward

Веб-чат больше не генерирует пользовательские файлы CSS из сборки. Я бы порекомендовал взглянуть на веб-чат с v3 по v4 Образец миграции и другие образцы настройки веб-чата, в частности образец пользовательского стиля брендинга.

person tdurnford    schedule 07.08.2019
comment
Чтобы увидеть наше обсуждение, перейдите сюда github.com/microsoft/BotFramework-WebChat/issues/2289 < / а> - person Vijay; 23.08.2019

arrow_upward
4
arrow_downward

Предложения от @tdurnford по репозиторию WebChat сработали хорошо. Приведем окончательный HTML-код ниже:

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <script>
    </script>
</head>

<body>
    <div id="webchat" role="main"></div>
    <script>	
        // const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
        const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
        window.WebChat.renderWebChat(
            {
                username: username,
                userID: userid,
                locale: 'en-US',
                directLine: window.WebChat.createDirectLine({
                    secret: [YOUR_SECRET],
                }),
                renderMarkdown: markdownIt.render.bind(markdownIt),
                styleOptions: {     
                    bubbleMaxWidth: 1200,               
                    botAvatarInitials: 'M',                
                    userAvatarInitials: 'V',  
                }
                // Passing 'styleOptions' when rendering Web Chat

            },
            document.getElementById('webchat')
        );
    </script>
</body>

</html>

Настройка средства визуализации уценки с помощью html: ключ здесь - true.

const markdownIt = window.markdownit ({html: true, linkify: true, typographer: true});

person Vijay    schedule 23.08.2019