search

microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.58k stars 1.53k forks source link

How to add attachment control under chat window? #5250

Closed bhoomesh-spe closed 3 weeks ago

bhoomesh-spe commented 1 month ago

I have a question

I have integrate chat bot window in my angular project. Below is the screenshot for the same.

SS1

I have added below files to achieve the above chat bot in my angular project.

  1. botchat.min.js and 2. webchat.js (https://cdn.botframework.com/botframework-webchat/4.14.1/webchat.js)

Now I need to add attachment control in the chat bot window. Below is the screenshot for the same.

SS2

Can anyone help me with the same?

Thanks

stevkan commented 1 month ago

@bhoomesh-spe - What is the 'botchat.min.js' file you are using? If that is associated with Web Chat, then please do not use it. BotChat was the v3 version of Web Chat that has been deprecated for somewhere around a decade. Additionally, using it could conflict with Web Chat's v4 (webchat.js) functionality and/or you may rely on a method or process that shouldn't be used. The webchat.js CDN / BotFramework-WebChat NPM package are the only Web Chat libraries you need.

Regarding the attachment control, or file upload button, that can be enabled/disabled via Web Chat's hideUploadButton style option. This sample, 02.branding-styling-and-customization/f.hide-upload-button demonstrates exactly how this can be done, generally speaking.

For an example using Angular, you can checkout this repo, angular-web-chat, in my GitHub. Please be aware that I didn't write most of this and that is should not be considered an official Microsoft sample. It is not. Furthermore, I am not an Angular developer. I got it from another developer's repo that, at one time, the Web Chat repo linked to but has since disappeared. However, I have had it working in the past. I'm sure many of the libraries are out-dated, including the BotFramework-WebChat one located in the package.json. So, keep that in mind, if you decide to clone it. For reference, this file shows how styleOptions are passed into the Web Chat component in this Angular project, at least.

stevkan commented 3 weeks ago

Closing due to inactivity.