删除MS-bot框架中的图像上载按钮

Question

我想删除MS-botframwork中的图片上传按钮。我正在对botchat.scss文件进行更改，然后运行npm run prepublish但没有发生任何事情。我不想在botchat.css文件中进行更改。你能告诉我到底要做什么吗？

感谢。

Answer 1

使用React动态创建网络聊天的结构，代码放在botchat.js文件中。您必须在文件botchat.js中评论或删除以下行：

React.createElement("label", { className: "wc-upload", onKeyPress: function (evt) { return _this.handleUploadButtonKeyPress(evt); }, tabIndex: 0 },
React.createElement("svg", null,
React.createElement("path", { d: "M19.96 4.79m-2 0a2 2 0 0 1 4 0 2 2 0 0 1-4 0zM8.32 4.19L2.5 15.53 22.45 15.53 17.46 8.56 14.42 11.18 8.32 4.19ZM1.04 1L1.04 17 24.96 17 24.96 1 1.04 1ZM1.03 0L24.96 0C25.54 0 26 0.45 26 0.99L26 17.01C26 17.55 25.53 18 24.96 18L1.03 18C0.46 18 0 17.55 0 17.01L0 0.99C0 0.45 0.47 0 1.03 0Z" })),
React.createElement("input", { id: "wc-upload-input", tabIndex: -1, type: "file", ref: function (input) { return _this.fileInput = input; }, multiple: true, onChange: function () { return _this.onChangeFile(); }, "aria-label": this.props.strings.uploadFile, role: "button" })),

这些线条渲染并显示图像上传按钮，取消注释线条以再次显示按钮。

Answer 2

嵌入式网络聊天没有直接配置来禁用上传按钮和功能。但是，嵌入式Web聊天是由项目BotFramework-WebChat构建的，因此您可以修改源代码，并编译成您自己的版本以满足您的需求。

1. 将repo https://github.com/Microsoft/BotFramework-WebChat克隆到您的本地工作空间，运行npm install以安装所有node.js依赖项。
2. 在/src/Shell.tsx处注释第114到132行的代码部分。
3. 运行npm run build将源代码编译为javascript文件。
4. 关注Easy: In your non-React website, run Web Chat inline部分，在您的网站中利用您自己的js文件。

Answer 3

您可以通过更改 CSS 来实现。

请勿更改botchat.css，因为它将在网络版本中被覆盖。

您必须在botchat.scss中进行更改，然后重建CSS：npm run build-css

.wc-upload {
            cursor: pointer;
            position: relative;
            display: none; // add this to hide image for upload

            svg {
                height: 18px;
                width: 26px;
            }
        }

&.has-upload-button .wc-textbox {
            left: 15px; // change the value from 48px to 15px to move to left input control
        }