papercups-io/chat-widget

Papercups chat widget

chat-widget's Issues

Isolate CSS with shadow-dom/iframe

Figure out whichever is the easiest first, but eventually we'll very likely need to use an iframe here

Error: "Attempted to send event papercups:plan with payload {"plan":null} before iframeRef was ready"

Seems like this happens only within the React component implementation, particularly when hooks are being used (e.g. useEffect, useContext)

My suspicion is that the message passing between the iframe and the wrapper component cause this to happen when the component is re-rendered in rapid succession.

Potential solutions:

• Short term: change error to warning so it doesn't clutter up Sentry
• Pass some kind of unique identifier to/from the iframe so that we can verify the "correct" iframe is loaded

Reduce size of bundle

A couple things to try:

• find a bundle analyzer to let us know what dependencies are the largest
• try switching from react to preact
• remove all unused code!

Anything else?

Persist open/closed state across pages

If a user opens/closes the chat widget on one page and then navigates to another page, it should remain in the same state.

(This is particularly important when defaulting the chat to "open", because it's annoying to have to keep closing it on every new page.)

Add Powered by Papercups at the bottom of the widget

Build widget.js

Is there any documentation on how to build the widget.js for HTML sites?

Can you support either (tweaking the bot name / image) or allowing a default support member, or both?

I'd like to either make the bot more friendly, or preferably, set a default team member to start the conversation.

Allow us to turn off debug messages via prop

The debug messages are polluting the console in production. Can we have a prop that lets us turn them off?

When requireEmailUpfront is on a user should not be able to upload a file until they entered their email

Right now a user can bypass the email requirement by uploading a file.

How to change password and delete a user?

Is there anywhere to change a users password and remove a user from the app?

Papercups widget on React no longer working - Element type is invalid

Server Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Source

../../pages/_document.tsx (91:33) @ Function.getInitialProps

  89 |     }
  90 | 
> 91 |     const { html, head } = await ctx.renderPage({ enhanceApp })
     |                                 ^
  92 |     const styles = [...flush()]
  93 |     return { html, head, styles }
  94 |   }

Call Stack

Function.getInitialProps

pages/_document.js (5:40)

Cannot read property 'contentWindow' of undefined

I'm using React with react-helmet to include the scripts and getting a lot of errors via Sentry:

Cannot read property 'contentWindow' of undefined

undefined is not an object (evaluating 'n.iframeRef.contentWindow')

It looks like it's tracing back to

chat-widget/src/components/EmbeddableWidget.tsx

Lines 238 to 240 in c7e70fd

	const el = this.iframeRef as any;
	el.contentWindow.postMessage({event, payload}, this.getIframeUrl());

<Helmet>
<script>
        {`
          window.Papercups = {
            config: {
              accountId: 'my-account-id',
              title: 'Welcome!',
              subtitle: 'Ask us anything in the chat window below 😊',
              primaryColor: '#1c64f2',
              greeting: '',
              newMessagePlaceholder: 'Start typing...',
              baseUrl: 'https://app.papercups.io'
            },
          };
        `}
      </script>
      <script
        type="text/javascript"
        async
        defer
        src="https://app.papercups.io/widget.js"
      ></script>
    </Helmet>

Does my config look right? Should I switch over to @papercups-io/chat-widget?

Add `styles` prop for easier customization

Rather than requiring devs to override CSS classes, let's add a styles prop that enabled overriding the chat container properties as well as the chat toggle button properties.

For example, something like this should allow devs to render the widget on the left side of the page rather than the right:

styles={{
  container: {left: 20, right: 'auto'},
  button: {left: 20, right: 'auto'}
}}

[React Native, Expo] UI elements slide up when keyboard opens?

Encountered this somewhat puzzling UI behaviour: when you start typing and the keyboard slides up, the header and previous messages slide up out of view too?
Would be great to keep as much context as possible for the user - is there a way to do this?

Note this is in React Native on iOS with Expo.

Before:

After:

API to raise a ticket through a customized form

Once again, thanks for amazing work as always.🚀

Is there an API for devs to implement a form for say, raising a ticket?
That would be soooo amazing

Timezone issue

I can see Papercups · Sent 5 hours ago whenever I open the chat widget (see screenshot attached). I am in IST, so I guess it defaults to GMT.

[Question] When will the iframe option be ready?

I was just curious, being able to implement an iframe on the support page will be so awesome!

Write bash script to make developing chat-widget easier

Right now you need to run 3 separate repos to get the development environment setup lets make it so that you only need a single one

Widget scrolling broken in Firefox 82 OSX

Scroll behavior is broken in Firefox due to different way it implements flexbox.
Resulting in a double scrollbar and the window is not auto scrolled to the bottom when a client messages.

Cause:
#__next, body, html {
display: flex;
flex-direction: column;
}

Fix:
#__next{
display: flex;
flex-direction: column;
}
body, html {
display: flex;
flex-direction: row;
}

Tested in Firefox, Chrome and Safari

High vulnerability detected for axios dependency

When I run yarn audit I get the following high vulnerability report:

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Incorrect Comparison in axios                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ axios                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.21.2                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ frontend                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ frontend > @papercups-io/chat-widget > @papercups-io/browser │
│               │ > axios                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1005018                     │
└───────────────┴──────────────────────────────────────────────────────────────┘

Difficult to find (X) close button

A potential UX issue --- the (X) in the bottom right to close the chat is at an unexpected place

I was like "how do I close this?" and kept looking around (my eyes didn't even saccade to the bottom right of the screen as I don't expect actions to be there)

Support react-native push notification for android

Only render ~20 most recent messages

(Note: the code for this lives in the https://github.com/papercups-io/chat-window repo)

Only load the remaining messages if the customer scrolls up.

The problem we're trying to solve is that when too many messages are rendered, it slows down the animation of new messages being displays. So my thinking is that even if we have 100 messages in this.state.messages, we don't need to render them all.

Open to other solutions as well!

Chat content does not display correctly in Firefox

Using Firefox 80.0 (64-bit) on a mac, I try to load the chat widget on this page and this is what I see:

Its weird because the iframe src URL seems to have the right content when opened in a separate window.

Some more context about js lib versions:

yarn list --depth 0 | grep '\(webpack\|paper\|react\)'
├─ @mdx-js/[email protected]
├─ @papercups-io/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

Add a callback prop for `onLoaded`

In case anyone wants to display some loading indicator in the meantime

Please make placeholder "Start typing..." customisable

Hello, I really like the papercups.
Would love if the placeholder could be a customisable for i18n.

Typing indicator

It would be really handy to see when the other party is typing.

As the site owner, it might also be nice to see what the user is typing so that I can provide a faster reply.

Export ChatWindow component

Hello there!

My team is using this module to talk to a custom papercups instance.

We'd like to make sure our users aren't running external code as much as possible, which is why we chose papercups.

However when using this module, we noticed that the window is placed in a separate domain. We'd like to place the ChatWindow component within our app code (possibly even using React.lazy and suspense to only load it ondemand much like what the iframe achieved)

The workaround we're currently evaluating is to add this line to the package.json dependencies field:

"chat-widget-raw": "papercups-io/chat-widget#0293e84"

And include that chat-widget-raw module in our typescript loader configuration.

Is there a plan to expose this component in the future?

Thanks in advance :)

Security concerns

Is the accountId the only thing protecting hackers from accessing our papercups account? Coz that is totally insecure.

Seems to me the best solution for you would be some kind of Auth0 integration.

Using the chat widget with different backends like Twilio

I'm a Twilio user and looking to provide a chat experience on our web platform. The widget looks awesome, would it be possible to use it outside of the Papercup ecosystem - ie integrate with Twilio APIs for the messaging layer?

Fix some potential iframe security issues

Google Ads is flagging the widget for some reason, need to figure out exactly what is causing this...

TODOs:

• Add sandbox attribute (https://www.w3schools.com/tags/att_iframe_sandbox.asp)
• Update how we hide the iframe (google ads may be flagging us due to how we currently hide it, i.e. https://github.com/papercups-io/chat-widget/blob/master/src/components/EmbeddableWidget.tsx#L295)
• Re-read https://documentation.unbounce.com/hc/en-us/articles/360001219286-Rejected-by-Google-Ads-Malicious-or-Unwanted-Software

Customize chat widget icon option

[Question] Is there a way to have multiple chats for a single user's browser session?

I am trying to let a single browser user have multiple, isolated chat sessions at once, on different web pages on the same domain. Is there a way to force this to happen? I am happy for them, for the moment, to appear as multiple customers.

I have tried to provide a different external_id in the config in each place when I would like an isolated/seperate chat session. The call to https://app.papercups.io/api/customers/identify sends the unique external_id but then always returns the same customer_id.

It's a great piece of software -- looking forward to using it more!

Rich response templates

It would be really nice if the widget supported rich responses or at least quick replies. This is very important for chatbot integrations. The way facebook does it could be an inspiration: Facebook conversation components.

Support callback for when chat window opens, closes, and message is sent.

I'd like to hook into callbacks for when the chat window is opened, it closes, and when a customer sends a message so that I may push events to Mixpanel / Google Analytics.

Font customization

Hi. Thanks for your work. I woud like to have a way to set the font (Google fonts) and size to harmonize the design of the chat with the site. See here https://ecordl.ca

Chatwidget shouldn't auto send messages for file uploads

I've accidentally uploaded the wrong file it should send when you press send

requireEmailUpfront not working

The requireEmailUpfront option appears not to be working in the latest version available for Heroku Deployment.

Style newMessagesNotificationText

Would be nice to be able to style "View new messages" component as well. For example to override the primary color or add the background color to the container so you can style it in case you have a different background as I have here

I can imagine it adding it styles attribute newMessagesNotificationContainer like this:

                    <ChatWidget
                            styles={{
                                toggleContainer: {...},
                                chatContainer: {...},
                                toggleButton: {...},
                                newMessagesNotificationContainer: {
                                    color: "#ffffff"
                                },
                            }}

Add sound on new notifications

It's hard to tell sometimes if a new message has arrived in the chat widget. Let's add a small sound like we do in the dashboard.

When submitting a markdown image it stretches and breaks the chat-widget

Related to this issue #90

Time ago in chat messages does not periodically update

For example the chat widget shows sent just now, even though it's been long I sent it
The widget wont update the fuzzy timestamps until you send a new messgage

React Native Support

Hi, I can see that this project uses theme-ui for it's UI. I think it can easily be ported to the react-native using theme-ui-native. It can be on a separate repo but that would mean maintaining the same codebase twice.

And because there are no native modules for this to work, it can be used with expo too. There are not that many chat products that work on the expo.

Widget is not working on IE11

Seems like our widget is breaking on Internet Explorer 😢

(Seems to be related to the framer-motion dependency)

Add ability to parse Markdown images

Right now if you send an image in markdown (e.g. ![image](https://i.imgur.com/XC13fLf.png)) you get an empty message:

Eventhough the papercups backend does not (yet) support uploading images it would be nice to have the ability to send images from a 3rd party service such as Imgur and have them render correctly. This could also be good preparation for when the backend does support images.

Fix/Improve UX on mobile

From email:

I tested this on a physical iphone 6s and it seems that the chat widget doesn’t work. It does not display the keyboard when you try to click and type some text.

React: Could not resolve dependency

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @papercups-io/[email protected]
npm ERR! node_modules/@papercups-io/chat-widget
npm ERR!   @papercups-io/chat-widget@"^1.1.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\karti\AppData\Local\npm-cache\eresolve-report.txt for a full report.

Installing with --legacy-peer-deps breaks craco

Chat widget color shows as solid aka no design features or graphics within...

Wondering how to fix this as I am not facile with CSS. Running the chatwidget on an MVP landing page, everything runs properly and all CSS on the site renders except for the chat widget label at the bottom (the button you click to open the chat window). Welcome any tips or tricks. Thanks in advance.

Support for react 18+

Seems like the widget only has support for react between 16 and 17

When can we expect support for react 18? In the meantime we'll use the raw JS script to add it in as a workaround

npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0 || ^17.0.0" from @papercups-io/[email protected]
npm ERR! node_modules/@papercups-io/chat-widget
npm ERR!   @papercups-io/chat-widget@"*" from the root project

Add option to hide widget outside working hours

Let's add a new prop: hideOutsideWorkingHours.

If this is true, we'll check the widget settings settings.account?.is_outside_working_hours and completely hide the widget if this value is true.