Description:

The Livechat-widget does not allow for a proper use by blind visitors

Server Setup Information:

• Version of Rocket.Chat Server: 0.59.3

Steps to Reproduce:

1. Set up your screenreader
2. Open a page where the livechat-widget resides
3. Try to find the input using the keyboard
4. Type something in
5. Respond from the server as agent
6. You will only get a notification, that has sent a message, but you'll not be able to find the message-container to get the message read out loud.

Expected behavior:

When using a screenreader, the livechat widget's controls should be reachable via TAB

Actual behavior:

The widget's controls are being left out

• success
• error
• warning
• custom color
• apply on storybook
• multiple alerts
• auto close

Add the Select component in Register form to list de Livechat Departaments before starting the chat.

• apply on storybook

This feature depends on #10.

Description:

If an agent uses a smilie / emoticon like ";-)" or "rocket", it is not converted in a graphic in the livechat widget.

Server Setup Information:

• Version of Rocket.Chat Server: 0.56.0
• Operating System: Linux
• Deployment Method(snap/docker/tar/etc): AWS
• Number of Running Instances: 2
• Node Version: v4.8.2

Steps to Reproduce:

1. Start a livechat conversation by customer
2. Write some messages (customer & agent) and use smilie acronyms, e.g. ;-), 🚀
3. In the backend, the smilie is displayed as image / emoticon - in the widget it is displayed as plain text.

Expected behavior:

The presentation of the smilie emoticon should not differ (backend vs. frontend)

Actual behavior:

See description

• insert actions
• use <div contentEditable="true">
• autogrow
• apply on storybook
• render emoji
• render mentions
  

• option no animate
• improve the calc to define the arrow/container position if the tooltip pass the page boundaries
• check z-index

• Simple version
• option version
• apply on storybook

simple version

option version

• style size
• style border-radius
• prepare placeholder
• apply on storybook

• stack version
• normal version
• outline version
• small version
• group buttons
• loading
• icons
• apply on storybook

As in title, my question is how does Livechat will exchange data between frontend and RocketChat? Rest/Realtime API?

Right now when we start livechat it only appears if there is a live agent online (Live agent of ANY department).
It would be nice to set a department on startup, then the livechat should appears only if there is a live agent ONLINE for that department.
e.g

RocketChat('myDepartmentName', function() {
  this.setCustomField('foo', foo);
  this.setCustomField('bar', bar);
  this.setCustomField('baz', baz);
});

In this example livechat widget must appear ONLY if there is online live agents in department called myDepartmentName

Add the events to call the JS/SDK method: SDK.notifyVisitorTyping.
The new method was merged in this PR: RocketChat/Rocket.Chat.js.SDK#50 and is support on the @rocket.chat/sdk": "^1.0.0-alpha.20.

Description:

When a live chat agent uses markdown in order to structure and beautify its replys, the customer who uses the livechat widget will see the markdown syntax.

Actual behavior:

Examples:

• Bold text will be displayed with stars (*) at the widget side
• Italic text will be displayed with underscores (_) at the widget side
• ....

The biggest problem with this issue is, that the agent thinks that the client has the same representation of the text.

This issue is closly related to https://github.com/RocketChat/Rocket.Chat/issues/7700

Expected behavior:

Full support of markdown in the widget.

Server Setup Information:

• Version of Rocket.Chat Server: 0.56.0
• Operating System: Linux
• Deployment Method(snap/docker/tar/etc): AWS
• Number of Running Instances: 2
• Node Version: v4.8.2

Steps to Reproduce:

Format text with markdown in livechat. The widget will not display it correctly.

Additional information:
I think there is an issue which has the same scope: RocketChat/Rocket.Chat#3796 However this one is not described very well.

In our current version of Livechat, we display data from the agent's custom fields, such as 'Phone Number', etc.
This data is displayed in the contents of the header, as we can see below:

We need to support it in our new Livechat client.

• apply on storybook

Add the Tooltip Component(#5) to header buttons according the sketch below:

• left version
• top version
• right version
• bottom version
• auto position
• apply on storybook

• apply on storybook

• text version
• user version
• apply on storybook

text

user

extra information (edited)

Description:

Hello.
We noticed a problem with the offline mode detection of live chat.
On our server we have several agents on livechat, and we have a department where there is only one agent.
If this agent is disconnected, and there is another agent who is not part of the department and is connected, the livechat considers that there is someone available to answer. It does not display the offline form, so no one is available for this department.

Steps to reproduce:

1. Add multiple agents to the live chat
2. Create a department by associating a single agent
3. Have the agent of the department disconnected
4. Have an agent out of the department, connected
5. See on the livechat integrated to a site, that the offline mode is not active (whereas it is configured)

Expected behavior:

That the integrated live chat on the site goes offline when no agent of the department is connected.

Server Setup Information:

RC_VERSION 0.64.2

• Operating System: Debian 9.4

• Deployment Method: docker

• Number of Running Instances:
  1 rocket chat
  1 mongo db
  1 rocket hubot

• DB Replicaset Oplog:
  configured oplog size: 128MB
  log length start to end: 1021254secs (283.68hrs)
  oplog first event time: Wed May 30 2018 12:37:00 GMT+0000 (UTC)
  oplog last event time: Mon Jun 11 2018 08:17:54 GMT+0000 (UTC)
  now: Mon Jun 11 2018 08:17:55 GMT+0000 (UTC)

• NodeJS Version: v8.9.3
  NODE_ENV production

• MongoDB Version:
  MONGO_MAJOR 3.2
  MONGO_VERSION 3.2.19

Hi, I'm sorry for the stupid question. I am new to React Native and I would like to add the rocket.chat liveChat into the existing RN project. Will this work with React Native?

Currently Auto-translations works for channel users only. For live chat users the Auto-translations feature is not working.

Can we have Auto-translations feature for Live Chat with guest users also ?

Essentially phase 0 described here https://github.com/WideChat/Rocket.Chat.Android/wiki/Phased-approach-to-rich-message-support which is the same functionality supported by the Rocket.chat web client as soon as RocketChat/Rocket.Chat#11473 gets merged.

Add support for Livechat Triggers on new Livechat client.

Is your feature request related to a problem? Please describe.
In our company, we need the customer to be able to communicate with 2 departments at the same time. We already had a specific routing to 1 department like http://localhost:3000/livechat/uTHqz7pxYktvNFwAq

However, if a user accesses to 2 departments at the same time on the same browser, they cannot do that. The data are shared between 2 browser tabs. I think at this point, my fork may start working differently than the original livechat

I think the problem is with a shared localStorage and a shared in memory Mongo Collection

Describe the solution you'd like
A clear and concise description of what you want to happen.
I am thinking to fix the issue by having a specific local storage for each department id. I think that seems doable.

I just want to know what is the best way I should do it. And if this will conflict with any future development of our rocketchat's livechat?

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add auto register guest support when the "Registration Form" setting is not enabled.

Description:

When an operator uses a emoji in live chat, the guest see's only the text, and not the image.

Server Setup Information:

• Version of Rocket.Chat Server: 0.58.2
• Operating System: Ubuntu 16.04 LTS
• Deployment Method(snap/docker/tar/etc): snap
• Number of Running Instances: 1
• DB Replicaset Oplog: ?
• Node Version: 4.8.3

Steps to Reproduce:

1. Open new live chat between a guest and an operator.
2. As the operator, send a emoji in the chat

Expected behavior:

Guest sees emoji as it should be displayed

Actual behavior:

Guest see's text equivalent

Screenshots

we have 2 webpacks with default settings running (preactcli and storybook) its kind tricky use both with differences (like i18n and svg loaders).

We need to implement a component to overlap MessageBox/Composer. In some cases, the MessageBox/Composer needs to be hidden until it is displayed again.

• Develop component
• apply on storybook

The image below shows how we deal with this situation in our current Livechat version:

• develop component (using message template)
• multiple users
• apply on storybook
  

Rocket.Chat.Livechat project looks promising but what if I'll want to use it to no-livechat integration somewhere?

I know that primary target is Livechat but this client looks so awesome it would be useful to other integrations - to be used like standard-web version but more programatically customisable to embed somewhere else for example.

• seen flag
• group messages
• markdown parser
• use date-fns instead moment
• apply on storybook

Create new form to following the flow when the chat is finished.

• Create form
• apply on storybook

Improvements:

1. Why should we need a small buttons and inputs version? (If it must have, we need to review his paddings becouse is too tight):
   https://rocket.chat/Rocket.Chat.Livechat/?knob-description=user%20description&knob-text=Powered%20by%20Rocket.Chat&knob-loading=true&knob-value=&knob-placeholder=Insert%20your%20text%20here&knob-small=true&selectedKind=Components%7CButton&selectedStory=small&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

2. The icons in the header aren't center aligned:
   https://rocket.chat/Rocket.Chat.Livechat/?knob-group%20title=&knob-title=%40bertie.barton&knob-hasEmailField=true&knob-item%20text=A%20menu%20item&knob-text=Notification%20settings&knob-loading=true&knob-description=Description&knob-hasDepartmentField=true&knob-options=%5B%7B%22value%22%3A%221%22%2C%22label%22%3A%22Option%201%22%7D%2C%7B%22value%22%3A%222%22%2C%22label%22%3A%22Option%202%22%7D%2C%7B%22value%22%3A%223%22%2C%22label%22%3A%22Option%203%22%7D%5D&knob-multiple=1&knob-status=online&knob-departments=%5B%7B%22_id%22%3A1%2C%22name%22%3A%22Department%20%231%22%7D%2C%7B%22_id%22%3A2%2C%22name%22%3A%22Department%20%232%22%7D%2C%7B%22_id%22%3A3%2C%22name%22%3A%22Department%20%233%22%7D%5D&knob-color=%23175CC4&knob-hasNameField=true&knob-src=chime&knob-subtitle=Available&knob-emoji=true&knob-small=true&knob-message=Please%2C%20tell%20us%20some%20informations%20to%20start%20the%20chat&knob-error=&knob-button%20text%201=Yes&knob-buttonText=Ok&knob-button%20text%202=Cancel&knob-button%20text%203=No&knob-overlay=true&knob-value=&knob-uploads=true&knob-placeholder=Placeholder&knob-label=Label&knob-group%20%231%20title=&knob-group%20%232%20title=&selectedKind=Components%7CHeader&selectedStory=for%20user%20chat&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

3. Fix the padding-bottom for "Powered by Rocket.Chat":
   https://rocket.chat/Rocket.Chat.Livechat/?knob-group%20title=&knob-title=Need%20help%3F&knob-hasEmailField=true&knob-item%20text=A%20menu%20item&knob-text=guilherme.gazzo&knob-loading=true&knob-description=Description&knob-hasDepartmentField=true&knob-options=%5B%7B%22value%22%3A%221%22%2C%22label%22%3A%22Option%201%22%7D%2C%7B%22value%22%3A%222%22%2C%22label%22%3A%22Option%202%22%7D%2C%7B%22value%22%3A%223%22%2C%22label%22%3A%22Option%203%22%7D%5D&knob-multiple=1&knob-status=offline&knob-departments=%5B%7B%22_id%22%3A1%2C%22name%22%3A%22Department%20%231%22%7D%2C%7B%22_id%22%3A2%2C%22name%22%3A%22Department%20%232%22%7D%2C%7B%22_id%22%3A3%2C%22name%22%3A%22Department%20%233%22%7D%5D&knob-color=%23C1272D&knob-hasNameField=true&knob-src=chime&knob-subtitle=ccadsda%0A&knob-emoji=true&knob-small=true&knob-message=Please%2C%20tell%20us%20some%20informations%20to%20start%20the%20chat&knob-error=&knob-button%20text%201=Yes&knob-buttonText=Ok&knob-button%20text%202=Cancel&knob-button%20text%203=No&knob-overlay=true&knob-value=&knob-uploads=true&knob-placeholder=Placeholder&knob-label=Label&knob-group%20%231%20title=&knob-group%20%232%20title=&selectedKind=Screen%7CRegister&selectedStory=loading&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

4. Rocket.chat logo should be in grayscale, only the hover version should be colorful:
   https://rocket.chat/Rocket.Chat.Livechat/?knob-text=heyyy%20drop%20your%20files%20here%21&knob-loading=true&knob-description=user%20description&knob-small=true&knob-button%20text%201=Yes&knob-button%20text%202=Cancel&knob-button%20text%203=No&knob-value=&knob-placeholder=Insert%20your%20text%20here&selectedKind=Components%7CFooter&selectedStory=with%20Composer%20and%20options&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

• Develop component
• apply on storybook
  

• top
• left
• right
• bottom
• apply on storybook

Create support for Livechat user presence, handling the user status and sending it to backend side.

Description:

I need to have texts depending on the main page locale.
Could it be possible to have setLocale for livechat messages (menu, close conversation...) and setCustomTexts for titles and other custom texts.

Server Setup Information:

• Version of Rocket.Chat Server: 0.65.1
• Operating System: Linux
• Deployment Method(snap/docker/tar/etc): tar
• Number of Running Instances: 1
• DB Replicaset Oplog: no
• Node Version: v8.11.2
• mongoDB Version: 3.6

Your Rocket.Chat version: 0.40.0

Explanation of the idea

It could be great to introduce a ability to add additional fields on the livechat box.
Additional fields could be synchronized with custom fields.
And a possibility to require some fields.

Idea in image

https://github.com/storybooks/storybook#getting-started

• normal version
• small version
• right and left buttons
• description
• label
• inline label
• invalid version
• apply on storybook

We need to migrate support for iFrame API from our older version to new Livechat client.

As it stands, the Livechat widget can be triggered by either 'Visitor Page URL' or 'Visitor time on site'. It would be great if you could use both conditions at the same time. This would essentially result in the Livechat being triggered after a certain amount of time on a particular site/URL.

https://mail.google.com/mail/u/0?ui=2&ik=e517db076a&attid=0.1&permmsgid=msg-a:r-3578378209539080798&th=165f0e691070a943&view=att&disp=safe&realattid=f_jm8vekff0

Create new form to change Livechat departments.

• apply on storybook

This feature depends on #10 and #7.

I am looking to integrate Rocket.Chat.Livechat with (https://github.com/RocketChat/Rocket.Chat). but unable to get a way. How to do

• Create integration
• auto grow during the call
• apply on storybook

• no preview attachments
• preview attachments (like video and image)
• apply on storybook

no preview

preview

• normal version
• small version
• right and left buttons
• description
• label
• inline label
• invalid version
• apply on storybook

I know that Rocket.Chat.Livechat is under active development but on current master I'm getting console error:

Uncaught (in promise) ReferenceError: I18n is not defined
    at Profile.render (index.js?5f23:34)
    at renderComponent (preact.js?10a9:269)
    at renderComponent (preact.js?10a9:282)
    at rerender (preact.js?10a9:37)

And only "Need help?" is rendered.

	render({ user }, { time, count }) {
		return (
            <div class={style.profile}>
				<h1><I18n.ComponentInterpolator <--------
                        string={I18n.t("Profile: %{user}", {
                            "user": "%{user}"
                        })}