advanced-chat/vue-advanced-chat

A beautiful chat rooms web component compatible with all Javascript frameworks

vue-advanced-chat's Issues

How can i adjust the room list width, on wide screen device ?

Can you help about adjusting the width of room list panel please ?

Add system messages

Hello,

Is it possible to have "system" message types which can be used for notification purposes. For example, when a new user joins a room, we could use it to send "UserX has joined chat" or something similar. I don't see any such ability in the current Docs.

Let me know if there's some alternative to do this quickly.

Thank you!

(DOCS) singleRoom should be boolean

singleRoom is documented as type: Number where it is type: Boolean.

[Firebase] Heavy database usage

Describe the bug

I've implemented the chat using firebase and it is using a lot of resources with few user interaction. I've achieved the free limits in 2 hours with few users logged in.

Steps to reproduce

Just the regular code implemented, online and typing features are disabled (I thought it was causing the problem, but it is happening even if commented)

Expected behavior

Minimize the read and write operations.

Image https://drive.google.com/file/d/1MRXTmzdKcEssZV7fRmKyRP82LwS28up7/preview

typingUsers not refresh UI with dynamic data

Describe the bug

typingUsers works with static data. but When I am using websocket's whisper to get the dynamic typingUsers id and update room's typingUsers array, the UI not reflect the change, or UI doesn't show typing at all.

Keep device keyboard opened after sending message

On mobile browsers, keyboard closes when a message is sent.
A better solution is to keep keyboard opened and prevent footer bouncing.

roomInfo event 's room undefined

`
<chat-window
...
@roomInfo="roomInfo"

methods: {
roomInfo({room}) {
console.log(room)
},
room undefined

`
although there is a workaround to get the room by this.selectedRoom.

(BUG) singleRoom fails to render specified room

When navigating via the RoomList:

fetchRoom is triggered, which defines room:

https://github.com/antoine92190/vue-advanced-chat/blob/c6ce2a905dc9e2f8be800e309d33a4759e8d2824/src/ChatWindow/ChatWindow.vue#L198-L202

The computed for room is then triggered which looks up the associated room by roomId.

https://github.com/antoine92190/vue-advanced-chat/blob/c6ce2a905dc9e2f8be800e309d33a4759e8d2824/src/ChatWindow/Room.vue#L384-L386

Subsequently the Room.room watcher is triggered:

https://github.com/antoine92190/vue-advanced-chat/blob/c6ce2a905dc9e2f8be800e309d33a4759e8d2824/src/ChatWindow/Room.vue#L325-L331

However...

When using singleRoom: true and specifying roomId: '1' with rooms: [{roomId: '1'...}] this code-flow is not followed and the result is instead messages being hidden.

fetchRoom is not triggered and none of the computed or watcher methods are executed.

Unread messages counter for each room

Thank you for making such a great plugin!!

Is there any plan to provide an unread message counter for each room? It would help to know what rooms have unread messages.
like as below:

Please provide the corrent data format

In the document, the room props
timestamp: '10:20',
date: 123242424,

the timestamp looks like a time instead of unix timestamp, while the date looks like a timestamp. is the date is valid php date like "2020-10-12 10:30", please provide the correct data format even for dummy data. or specify the props types like string or unix timestamp. thanks.

[Vue warn]: <transition-group> children must be keyed: <div>

[Vue warn]: children must be keyed:

The project can not run because of the

LAST_SEEN is translated but not reflect on UI

HI,
I translated all the textMessages into another languages, UI show the other translation correctly. However, in the right chat panel top bar, the 'last seen 2020-11-28 22:45:01' still show the english. Is it a bug? thx.

Emoji component is not positioned correctly

Conditions to reproduce - try to "play" with diferrrent screen sizes.

Possible fix - use popper.js

vue-cli-service serve #error

INFO Starting development server...
98% after emitting

ERROR Failed to compile with 2 errors 23:40:34
This relative module was not found:

• ./src/main.js in multi

View and Download selection not getting when openFile function called

In the room messages, If we have media(file attachments) in messages then it displays two options(View and download icons). so, when we click on any of these two icons it calls "openFile" function. Can you put one argument in this function with a type like "view" or "download"? so, we can display file or direct download it based on selection.

Steps to reproduce

Create a room and send the file and it will display a file with two options in room message.

Expected behaviour

It should return selection in openFile function.

Screenshots

embed into a vue app

Hi, is possible I plug this chat into my vue app?
I´d like something as a fab button visible on all my pages to open and close the chat.

(FEATURE REQUEST) how to make a division room in message

Hi, I have a question.

how to make a division room in message?

I can't find roomId in Message prop.

When I'm sent messages and I have multi channels, How I know that this messages come from?

And I want to control room selection event (FetchRoom). How to control this?

Thank you.

Why not exist fetchRoom?

I was implementing your repository and I noticed that there is no a event for when change of room, I have been working with fetchMessages and check if the option.reset is true and I discovered this after parsing the code or it would be nice to mention it in the documentation.

(BUG) Image file uppercase extension

If an image has uppercase extension (.JPEG), it is shown as a file

Messages sent by user not appearing on the correct side

Messages sent by the current user do not appear on the right or with the correct class styling. I am sending the currentUserId prop and well as having sender_id on the messages.

Looking at the src code it looks like currentUserId is always a string whereas in the docs you write sender_id as a number so this comparison will fail? is sender_id supposed to also be a string or am I possibly missing something.

How to notify a user of new messages

@antoine92190 Thanks so much for this application, i was wondering how i would go about notifying a user they have a new message? am using firebase

Cannot send file in sendMessage by axios post

Hi,
in the sendMessage method,
sendMessage({roomId, content, file, replyMessage}) {
let data = new FormData()
data.append('file', file)
axios({
method: 'post',
url: '/add-message',
data: data,
headers: {
'Content-Type' : 'multipart/form-data'
}
})

but in the server side, i cannot get the file from the request. Is anything wrong in the above code? thanks.

Run with demo firebase

I can't run because I don't have a firebase.
Can you create an account demo firebase or provider template to create a firebase database to run the demo of you?
The other solution is don't use firebase to easy to run the demo.

(BUG) error while clicking at room with empty messages

Geeting this error while clicking at room with empty messages:

...
vue.runtime.esm.js?5593:619 [Vue warn]: Error in callback for watcher "loadingMessages": "TypeError: Cannot read property 'focus' of undefined"

found in

--->


at src/pages/Consult.vue


at src/layouts/MainLayout.vue
at src/App.vue

[...]
vue.runtime.esm.js?5593:1888 TypeError: Cannot read property 'focus' of undefined
at VueComponent.focusTextarea (vue-advanced-chat.common.js?93dc:12339)
at VueComponent.loadingMessages (vue-advanced-chat.common.js?93dc:12174)
[...]

The code is:

focusTextarea: function focusTextarea(disableMobileFocus) {
      if (detectMobile() && disableMobileFocus) return;
      this.$refs['roomTextarea'].focus();
    },

I think it should be something like:

if (!this.$refs['roomTextarea'] || (detectMobile() && disableMobileFocus)) return;
this.$refs['roomTextarea'].focus();

Spinner errors

Hey. I wanted to try using your chat. Installed through npm. I added the necessary parameters, but when sending a message, I get an error from the spinner. What could be wrong?
Even when I just try to run your code and another question.

<template>
  <chat-window
    :currentUserId="1234"
    :rooms="rooms"
    :loadingRooms="loadingRooms"
    :messages="messages"
    :messagesLoaded="messagesLoaded"
  >
  </chat-window>
</template>

<script>
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'

export default {
  components: {
    ChatWindow
  },

  data() {
    return {
      rooms: [],
      loadingRooms: true,
      messages: [],
      messagesLoaded: false
    }
  },

  mounted() {
    this.rooms = [
      {
        roomId: 1,
        roomName: 'Room 1',
        unreadCount: 4,
        lastMessage: {
          content: 'Last message received',
          sender_id: 1234,
          username: 'John Doe',
          timestamp: '10:20',
          date: 123242424,
          seen: false,
          new: true
        },
        users: [
          {
            _id: 1234,
            username: 'John Doe',
            status: {
              state: 'online',
              last_changed: 'today, 14:30'
            }
          },
          {
            _id: 4321,
            username: 'John Snow',
            status: {
              state: 'offline',
              last_changed: '14 July, 20:00'
            }
          }
        ],
        typingUsers: [4321]
      }
    ]

    this.messages = [
      {
        _id: 12345,
        roomId: 1,
        content: 'Heeeey',
        sender_id: 4321,
        username: 'Tu',
        date: '13 November',
        timestamp: '10:20',
        seen: true,
        disable_actions: false,
        disable_reactions: true
      }
    ]

    this.loadingRooms = false
    this.messagesLoaded = true
  }
}
</script>

(BUG) Link with underscore split

When sending a message with a url link which contains an underscore, the link is split.
Testing example: https://youtu.be/aaa_aaa

Where to provide user photo

Hello,

I'm trying to make something exactly the same as your real-world example using firebase google authentication. What I can't figure out is where to provide the component the photo URL of the user, or how to change the default?

Thank you!

(BUG) New Messages blue line popping up even after seen flag is set

This seems to occur even when the seen flag is set.

In the repo I see that my message then should not be treated as new but it still is:
https://github.com/antoine92190/vue-advanced-chat/blob/df56ddfc1e8908ce06c44f86b0da3755dfe4ae2b/src/ChatWindow/Message.vue#L300-L306

I am not sure if this.start or this.end has any role in this (I am not using those since I don't need them), but for now I've solved my problem with css 😄

Can typingMessage method get User who is typing

typingMessage | { message, roomId } | A user is typing a message

can typingMessage get user id who is typing?

Room name will not display

As shown in the picture above, the room name will not display
I use your sample room data as shown below.

I guess the problem lies in the CSS style

how can I contact you?

Interested in your chat, we want to talk to you, do you have a telegram?

(BUG) Error when the lastMessage user has left the room

Describe the bug

When the lastMessage is from a user who is not in the room anymore an error is thrown.

Steps to reproduce

1. Write a message
2. Remove this user from the room
3. RoomList is loading and an error is thrown

Expected behavior

The lastMessage get's shown with the username of the removed user.

https://github.com/antoine92190/vue-advanced-chat/blob/c4056d40f0e424f26a8af1ef0e6341cb677910ea/src/ChatWindow/RoomsList.vue#L162-L164

user is null -> TypeError: Cannot read property '_id' of undefined

Messages will not load if I will try to hard code it on the script

I will be pushing a new object which is working but if I will try to instantiate the message variable, the message will not load.

The display is like this

Information about messages sent.(FEATURE REQUEST)

Is your feature request related to a problem? Please describe

No.
Users need to know who sen't a content (video, photo, etc..) and the basic information (who saw it, who recieved it).

Describe the solution you'd like

Add optional prop with this purpose.

Additional context

Like in What'sApp and Facebook.

In that btn menu you would add an "info" option, or "information", the name doesn't matter.

embed into a vue app

Hi, is possible I plug this chat into my vue app?
I´d like something as a fab button visible on all my pages to open and close the chat.

Further customization

The customization of the component is currently very limited, mainly colors can be changed. I want to go one step further and make the component more adaptable to meet the users needs.

• Customizable icons
• More opportunities to change the presentation and styling

Here is an example screenshot of how I imagine the component could look like when customized:

What do you think about this idea? I would be very happy to make a pull request.

(FEATURE REQUEST) Internationalization of dates and message actions

Hello!

First of all I love your project, it makes developing a chat in Vue amazingly easy, especially your firebase example!

But since I'm developing an app in german, I need to translate some parts of the chat component. Is there currently any way to customize the date output and the message actions to fit for other languages? This feature would be awesome!

Kind regards,
Jonas

Room list is not sorted correctly with empty room

Hi,
i have three chat rooms. two are empty room(without messages and last message). all rooms in DB, the last_message is null. However last_message is calculated in client js side. one room has last message date '2020-11-28 10:38', while two other empty rooms's last message is undefined. but the empty room is show first in the room list. is it possible to improve if last message is null or undefined (empty rooms), then the empty rooms show after the room which has last message date. thx.

loadingMessages fails to update even after setting messageLoaded (BUG)

Describe the bug

After switching to a new room to fetch messages, the loadingMessages variable fails to update resulting in infinite spinner.

Steps to reproduce

The following snippet from my code filters messages based on the selected room and sets the messagesLoaded prop.

Expected behavior

A clear and concise description of what you expected to happen when you encounter the bug.

    fetchMessages: function({ room, options }) {
      this.messagesLoaded = false;
      this.messages = [];
      this.selectedRoom = room.roomId;
      this.messages = this.allMessages.filter(message => message.roomId === this.selectedRoom);
      this.messagesLoaded = true;
    }

Screenshots

As seen in the image above, messagesLoaded is set to true but the spinner continues running. Not sure if I'm missing something obvious here.

Device (please complete the following information)

• OS: Arch Linux
• Browser: Firefox 81.0.2
• Package version: 0.5.1

Thank you!

(BUG) Images don't get displayed in messages

Hi!

Could you implement an option for showing uploaded images directly in a message instead of opening it in a new tab when clicking on the download icon? Would be awesome and the chat would feel much more native!

Kind regards,
Jonas

(BUG) Messages not being included inside room

Describe the bug

I'm just hardcoding a room and messages, and these messages are not being included inside the room

Steps to reproduce

        return {
            rooms: [
                {
                    roomId: 1,
                    roomName: 'Tu',
                    unreadCount: 4,
                    lastMessage: {
                        content: 'Heeeeyooooo!!',
                        sender_id: 4321,
                        username: 'John snow',
                        timestamp: '10:20',
                        date: 123242424,
                        seen: false,
                        new: true
                    },
                    users: [
                        {
                            _id: 1234,
                            username: 'John snow',
                            status: {
                                state: 'online',
                                last_changed: 'today, 14:30'
                            }
                        },
                        {
                            _id: 4321,
                            username: 'Ingrid',
                            status: {
                            state: 'offline',
                            last_changed: '14 July, 20:00'
                            }
                        }
                    ]
                }
            ],
            messages: [
                {
                    _id: 12345,
                    roomId: 1,
                    content: 'Heeeey',
                    sender_id: 4321,
                    username: 'Tu',
                    date: '13 November',
                    timestamp: '10:20',
                    seen: true,
                    disable_actions: false,
                    disable_reactions: true,
                }
            ],
            currentUserId: 1234,
            messagesLoaded: true,
        }
    }```

## Expected behavior

This message should be included inside the room

Send voice messages

Send voice message

(BUG) TypeError: Cannot read property 'roomId' of undefined

Describe the bug

I just imported the library to a new vue-cli project and tried to run with adding example rooms data but got this error. All changes are in App.vue file.

App.Vue:

<template>
  <div id="app">
    <chat-window :currentUserId="currentUserId" :rooms="rooms" :messages="messages" />
  </div>
</template>

<script>
import ChatWindow from "vue-advanced-chat";
import "vue-advanced-chat/dist/vue-advanced-chat.css";
export default {
  name: "App",
  components: { ChatWindow },
  data() {
    return {
      messages: [],
      currentUserId: 1234
    };
  },
  computed: {
    rooms() {
      return [
        {
          roomId: "1",
          roomName: "Room 1",
          lastMessage: {
            content: "Last message received",
            sender_id: 1234,
            username: "John Doe",
            timestamp: "10:20",
            date: 123242424,
            seen: false,
            new: true
          },
          users: [
            {
              _id: 1234,
              username: "John Doe",
              status: {
                state: "online",
                last_changed: "today, 14:30"
              }
            },
            {
              _id: 4321,
              username: "John Snow",
              status: {
                state: "offline",
                last_changed: "14 July, 20:00"
              }
            }
          ],
          typingUsers: [4321]
        }
      ];
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

package.json:

{
  "name": "message-to-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-advanced-chat": "^0.4.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Screenshots

Device

• OS: MacOS Mojave
• Browser: Chrome 83
• Package version: 0.4.2
• Vue version: 2.6.11

Error font and color of emoji

Describe the bug

Error font and color of emoji

Config firebase with demo

Hi, I am trying to use the demo with firebase.
But I get an error as below.

I have used the next config in demo app:

const config = {
    apiKey: "mykey",
    authDomain: "gestandev.firebaseapp.com",
    databaseURL: "https://gestandev.firebaseio.com",
    projectId: "gestandev",
    storageBucket: "gestandev.appspot.com",
    messagingSenderId: "702434346623",
    appId: "1:702434346623:web:cb4b57d585e8571175614a",
    measurementId: "G-30135K4QVE"
  };

//my firebase rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

error:

Uncaught (in promise) TypeError: Cannot read property 'username' of undefined
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/ChatContainer.vue?vue&type=script&lang=js&:234)
    at async Promise.all (:8080/index 1)
webpack-internal:///./node_modules/@firebase/database/dist/index.cjs.js:12881 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
    at eval (webpack-internal:///./node_modules/@firebase/database/dist/index.cjs.js:12881)
    at exceptionGuard (webpack-internal:///./node_modules/@firebase/database/dist/index.cjs.js:702)
    at Repo.callOnCompleteCallback (webpack-internal:///./node_modules/@firebase/database/dist/index.cjs.js:12871)
    at eval (webpack-internal:///./node_modules/@firebase/database/dist/index.cjs.js:12765)
    at eval (webpack-internal:///./node_modules/@firebase/database/dist/index.cjs.js:11846)

add more detail information about the room in the right chat window Room name bar

Hi,

Vue-advanced-chat has left side chat room list and right side chat main panel. Current the left side chat room name and right side chat main panel's chat room name show exact the same information. But as right side chat main panel has more space, i want to add more detailed information of the chat room . E.g. left side chat room is Leia (person name), but in right side chat room name, can I add extra information such as the short introduction of Leia. (Leia's profile ). as sometimes, many people has same names, a profile introduction might be useful to differentiate who is who. thanks.

How to refresh room list

Hi, I have a question.

How do I refresh room list? I added refresh room buttion in slot area.
And when I button click, reset data like below.

        this.me = {}
        this.currentUserId = ''
        this.rooms = []
        this.currentRoom = {}
        this.currentRoomId = ''
        this.messages = []
        this.messagesLoaded = false

But seleted room was not changed to empty. (It still remains previous seleted room.)

Can I reset room data or refresh room list?

Thank you.

(BUG) roomId type inconsistent

ChatWindow has roomId as either Number or String:

https://github.com/antoine92190/vue-advanced-chat/blob/ef876a70b869cc0025841e30420b6de9a6e9b065/src/ChatWindow/ChatWindow.vue#L83

Where Room has it as String only:

https://github.com/antoine92190/vue-advanced-chat/blob/ef876a70b869cc0025841e30420b6de9a6e9b065/src/ChatWindow/Room.vue#L260

Add user is typing is rooms list

Add sent/seen checkmark

I would like to change the checkmark icon as follows:

• If the message is sent and saved to the database there should be one checkmark
• If the message is read by the other user there should be two checkmarks

This change would make it more intuitive for the user because other chat apps handle it the same (whatsapp, telegram).
In addition to that the user would know if the message was actually sent or not. Currently there is no feedback to the user.

Tell me what you think about this idea, i would be happy to make a pull request.