web-chat | React/Redux/Stanza based XMPP web chat | Frontend Framework library
kandi X-RAY | web-chat Summary
kandi X-RAY | web-chat Summary
This project was bootstrapped with Create React App.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Register new swagger worker
- Checks the service worker to see if it exists
- Create a new client
- Build a message from the form
- Saves session details to session storage .
- Wrap a channel event in a group
- Build the contentMeta object
- Sends a message to the current user .
- Get saved session storage .
- Deserialize text
web-chat Key Features
web-chat Examples and Code Snippets
Community Discussions
Trending Discussions on web-chat
QUESTION
After successfully connecting my locally hosted (botkit-based) bot to Microsoft's Bot Framework Emulator (using a localhost address for the messaging endpoint), I'm now trying to connect it to the framework's webchat (using an ngrok's hostname for my local bot). However, I get an 'unauthorized' when webchat tries to connect. More on my bot:
- The bot integrates with the Bot Framework via botkit's own Botkit Framework Adapter (see https://github.com/howdyai/botkit/blob/main/packages/docs/core.md#using-bot-framework-channels for details) *The bot is hosted locally (dev version, which is the one I'm trying to test), and exposed via ngrok. Its production version will be hosted on AWS.
Here's what I've tried so far:
- Using methods #1 and #2 described in https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat?view=azure-bot-service-4.0 to embed the webchat using an iframe with the provided webchat secret and also a token (obtained separately via POSTMAN).
- Using a modification of method #3 in the same web page, in which I obtained a Direct Line token instead (via POSTMAN) and then tried to use it in the html provided in there.
- I've also tried 'Test in Web Chat' in the Azure console.
In all those cases my bot's own log displays the same: "Experienced an error inside the turn handler Error: BotFrameworkAdapter.processActivity(): 401 ERROR Error: Unauthorized. Invalid AppId passed on token: blah".
The browser console shows different results for the last case compared to the website embeds as follows:
- (website embeds), I see a 502 in the browser's console, which I believe is expected given the 401 response from the bot (as explained by other sources).
- (Test in Web Chat'), I see several other errors in the browser web console in addition to the 502. One of those errors makes me think that perhaps 'Test in Web Chat' does not actually support non-Azure hosted bots (MsPortalFx/Base/Base.Net Base.Net: Security issue: Request to send auth token to untrusted domain 'myngrokhostname.scm.azurewebsites.net'. Only a fixed set of domains should be configured to receive auth tokens).
So here are my immediate questions:
- Does the 'Test in web chat' feature require an Azure-hosted bot?
- Given that I don't specify myself an appId and password when configuring the webchat channel (since it gets automatically configured), how could I be getting an error indicating that the wrong appId is being used? (note: the appId and password are part of the bot's adapter configuration as explained in the link I shared earlier; this is the only spot in which I entered them, and they were copied directly from the AzureBot configuration console)
Aside from the above questions, do you have any other suggestions on what could be wrong/missing in my environment? BTW, by now I believe I have read all of the similar posts that refer to 'unauthorized' errors while using webchat and none of them has helped so far, including those referenced in the first comment provided below. For the record, here are the posts (not mentioned in the comment) that I've also read:
- There was an error sending this message to your bot - Test in Web Chat
- Test in Web Chat typing message returns "Not found" HTTP status code after deploying bot to Azure
- Getting a 403 while connecting local bot to local WebChat client (works with Emulator though) (note: a comment in the last post suggests that I should be looking into offline-directline to get this to work; I may try this although I don't understand why it should be needed). Any further help would be much appreciated.
ANSWER
Answered 2022-Feb-03 at 12:27• I will suggest you to please check the below Github community forum for details on your issue regarding the turn handler and the ‘BotFrameworkAdapter.processActivity():401 ERROR’ in which they state that they tried to connect through two types by local bot: -
- By entering the URL, appID/password
- To select the bot which is defined by bot file from "My bots" form in the Welcome section.
In the above two types of connections made, the 1st one always fails while the 2nd one executes successfully always. So, according to them, they are suggesting downloading the latest version of Emulator over.
https://github.com/microsoft/BotFramework-Emulator/issues/1417
Kindly refer to it as it may be helpful to you. And as far as ‘Test in webchat’ feature is concerned, it does require an Azure hosted bot because the Bot Framework Emulator that runs on the local device has the Azure Bot service endpoint link embedded in its runtime configuration for which during the execution of the emulator, we have to enter the AppID and password of the Azure Bot service to connect to.
https://docs.microsoft.com/en-us/composer/test/test-bots-in-web-chat
QUESTION
I'm just started exploring botframework webchat with React. I have tried to come until below UI.
In docs, its mentioned like we can control each parts of the UI using React. But I couldn't see samples that could modify webchat message styles like (user/bot message height, customize message input field). In the ReactWebChat component, there is a className prop.
...ANSWER
Answered 2022-Feb-15 at 11:03This document should get you started. Most basic styling is available via configuration-settings.
The border of a textmessage for instance could be implemented via styleoptions:
QUESTION
I am building a web-chat application using django and django-channels. I have figured out the actual chat part, however I was trying to implement a random chat pairing feature which would allow to pair any two user who choose to chat randomly. I cannnot figure out how to implement this in the backend to create a sort of list which would update automatically and from which I can take two user, pair them and thus remove them from the list. I hope, my question is clear.
...ANSWER
Answered 2021-Nov-10 at 15:17Keep a model in which you track all logged in users that are not in a chat. When 2 people enter a chat, remove them from the model same for log-out/disconnecting from the websocket in the waiting room. To match 2 people, you can select 2 random people from the model, remove them and send them to the correct chatroom
QUESTION
Basically, this is a question: How to detect if the user left web-chat preliminary? Let's say the user closes a web page of the browser. Is there any way to catch this very moment?
Ideally, I'd like to catch an event and react to that - if such exist, but if there are any possible solutions to solve this problem - please reply.
More details - I'm using direct-line and web-chat only - there are no other channels.
...ANSWER
Answered 2021-Jul-13 at 21:24You can attach an event listener to the beforeunload event to trigger whatever code you want before the window closes.
QUESTION
I develop chat application using azure communication service chat. For that I follow https://github.com/Azure-Samples/communication-services-web-chat-hero this example and its work. Now I am try to send attachment in this chat but I am not able to find any salutation.
Is it possible to add attachment?
...ANSWER
Answered 2021-May-31 at 21:18Currently attaching files to chat messages is not natively supported by the Azure Communication Services JavaScript Chat SDK.
I would recommend filing a feature request here for built-in support: https://github.com/Azure/azure-sdk-for-js/issues/new?assignees=&labels=&template=feature_request.md
Conceptually this is totally possible however, if we take the example of embedding a video inside a chat message:
- The web client sending the video would need to first upload the video to a storage space you own. This could be to your server or a third party storage solution such as Azure Blob Storage.
- The chat message would need to include a placeholder value that indicates there should be a video file here e.g.
Take a look at this video: {{video src=VIDEO_SRC}}. - Web clients receiving chat messages would need to first parse through the message and look for special indicators (in our case this would be
{{video src=VIDEO_SRC}}). If one is found, the message would need to be specially constructed to support a video. In this case the message html may end up something like:
QUESTION
I am working on a HTML/JS based web-chat application. And I would like to search through the chat window for all the occurrences of a particular word. The current idea for implementing this search is, I would filter through chat message history and scan each chat message. Each chat message is wrapped within a specified HTML element and if the chat message element contains the searched word, I will manipulate the DOM to highlight this particular searched word.
So as of now, I have a dummy implementation which goes through all the chat messages and searches for the word within each chat message. However, in cases where there are multiple occurrences of the word within a single chat message, the search function is only able to highlight the first occurrence. How can I highlight (manipulate DOM) for all such occurrences of words in a single chat message.
The following is the current code snippet that I have written:
...ANSWER
Answered 2021-Mar-02 at 15:12Dusted off an old jsFiddle, maybe it gives you ideas:
QUESTION
I am trying to set up IBM Watson Assistant Web Chat and from the documentation, it seems pretty simple (just do the config and copy and paste the embed code) https://cloud.ibm.com/docs/assistant?topic=assistant-deploy-web-chat
However, I have found that when I paste this onto my website, navigating to a different page or reloading will just refresh the session. This is not what I want as I want the session to continue off from where it was in the chat (and for all this to be displayed in the window). I have tried looking through the detailed documentation as well, but there doesn't seem to be what I'm looking for: https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=
I have also tried passing in the userid but still on navigation the chat refreshes.
Does anyone know if there's a way to solve this? I really need a solution since the same problem occurs on the live chat integration I have set up with salesforce.
Thanks, in advance
...ANSWER
Answered 2021-Jan-22 at 07:02A feature update to support session history is coming soon.
QUESTION
I'm trying to integrate botframework-webchat to a gatsby.js website, gatsby develop builds successfully, however when i run the production build using the command gatsby build, it throws the following error.
...ANSWER
Answered 2020-Dec-24 at 08:57I've been aware of you have followed up the suggested link https://www.gatsbyjs.com/docs/debugging-html-builds/#fixing-third-party-modules to fix window issue.
BUT it this way is likely to prevent webpack compile the commonjs web chat packages properly which ended up with the issue.
I was also aware of the configuration the stage of build-html isn't called during dev that's why you wouldn't see the error as you yarn start // gatsby develop.
However, the document also suggests another way to fix is to use code splitting technique by using loadable-component. Personally, I think this way is best for you project since the chat is supposed to be rendered at the client side only.
Here's a few thing you would change:
- Remove your configuration in
gatsby-node:
QUESTION
For the following javascript code snippet found at Health Bot Container Sample, the string literal values in the code sample, does anyone know where they are coming from? Where can I find the Microsoft documentation explaining more about them and finding out more about what other string literal values are offered and available for usage? The string literal values I am referring to in the code snippet are: 'DIRECT_LINE/CONNECT_FULFILLED', 'DIRECT_LINE/POST_ACTIVITY'.
At the moment, I don't know what's available for useage, and I don't know where I could find some Microsoft documentation detailing more about this. I googled around for it but with no luck. I tried searching through several of Microsoft's documentation but also with no luck.
I was able to locate a little something at this person's page, but I am not sure if this is a complete list or a partial list.
...ANSWER
Answered 2020-Oct-17 at 00:40The various action types can be found in the BotFramework-WebChat repo. There isn't any specific documentation provided that describes each action, but in a number of cases you can refer to the provided samples for examples on how to implement. From there, you can extrapolate how to implement other actions.
All of the types (for example, WEB_CHAT/START_DICTATE), can be checked to catch when called. Additionally, each is available as an exported function which means, like the code you supplied, an action can be dispatched because of, or in support of, some other activity that has occurred.
Here is a small snippet of code I use in my test instance of Web Chat. The switch statement this comes from checks action types as they come thru. When they do, I perform some other action.
QUESTION
For the following javascript code snippet found at Health Bot Container Sample, the "store" object created from window.WebChat.createStore, what does the "store" object do? What is the "store" object's purpose?
I am reading the web chat api documentation, but the description and explanation of the "store" object is not clear.
Thank you very much for your help on this matter.
...ANSWER
Answered 2020-Oct-13 at 18:48The store is a Redux store. You will need to be familiar with Redux to fully understand it, but for the purposes of Web Chat you can think of it as an object that allows you to dispatch actions and use middleware. The samples in this folder should help you get the hang of it.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
Install web-chat
Screencast: Getting Started with React Storybook
GitHub Repo
Documentation
Snapshot Testing UI with Storybook + addon/storyshot
Styleguidist combines a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground.
GitHub Repo
Documentation
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
