Olá, Rafael, eu procurava um componente bacana de chat para a implementação em um sistema particular, e achei o seu muito legal e servia muito bom nos meus propósitos, porém estou enfrentando um problema.

O sistema em desenvolvimento se baseia em Angular e uma API em Spring, ou seja, as requisições de dados que eu tenho de fazer, são métodos que vem de um serviço chamado BaseService, logo, eu obrigatoriamente preciso extender o BaseService no MyAdapter, para fazer as requisições e conseguir utilizar o chat e todas as suas funções.

Meu objetivo era pegar o MyAdapter e extendê-lo, porém, até onde eu entendi o MyAdapter tem por obrigação extender o ChatAdapter. Tentei de várias formas driblar essa estrutura, resultado: todas falhas.

Por fim, eu gostaria de saber se há alguma forma de eu conseguir usar meus métodos trazendo o ChatAdapter de outra forma.

Segue imagem do BaseService

Hi I am using the Offline Bot Adapter. The issue that I face is that even if I set my getMessageHistory() method lilke below, I am not getting different messages from UserID1 and UserID2 , infact I am getting same two messages for all the users. How should I configure message history so that different message history is shown in different message window?

getMessageHistory(userId: any): Observable<Message[]> {
console.log("getMessageHistoryCalled --> Only Once");
let mockedHistory: Array;

    mockedHistory = [                    
        {
            fromId: 1,
            toId: 999,
            message: "Hi there, just type any message bellow to test this Angular module."
        },
        {
            fromId: 2,
            toId: 999,
            message: "my custom msg"
        }
    ];

    return of(mockedHistory);
}

A couple of ideas on this:

• Every label and text visible to users must be customizable
• Support/Use Angular's i18n localization
• Refactor existing properties for placeholders to be passed as an Object to reduce the number of Input parameters and increase extensibility
• Must be released within a new minor version

I'm trying to get the chat history to work.
I've enable "[historyEnabled]" and "getMessageHistory" is being called properly.

This is my method:

getMessageHistory(userId: any): Observable<Message[]> {
   return this._chatService.getChatHistory(this.userId, userId);

}

"getChatHistory" is working fine, since I'm able to console.log() the messages.

Did I forget something?

Thanks

I am using firebase real-time database for chat feature so how do I integrate this library with firebase.

getting this ERROR TypeError: Cannot read property 'triggerOpenChatWindow' of undefined

calling from another component

Hi. I'm trying to get your ng-chat-nodejs sample application running as a first step. I followed the instructions in readme.md file and get as far as getting the node application running.
It fails when I open terminal window and run "ng serve --open" with the error message "The serve command requires to be run in an Angular project, but a project definition could not be found.".

Some of my research suggests that its an Angular versioning problem. The recommended solution is running the following command to upgrade the project to the latest version of Angular:
ng update @angular/cli --migrate-only --from=

I have installed Angular globally previously and have run other new Angular projects. My version of Angular is 7.1.4. What makes me think the error is generated by an Angular versioning problem is that when I run "ng --version" in one of my other Angular projects it indicates the Angular version as "7.1.4", but when I run it in the "ng-chat-nodejs" directory it says the Angular version is "undefined". Also when I've tried to import your module in another project, there are errors with the import module references.

So if you could indicate what Angular version your module was developed in and/or the latest Angular version it is updated for. Any other advice or insights would be useful.

This looks like a really great module. Really looking forward to getting this working. Thanks in advance.
PS:

1. If this is a versioning problem, any advice on upgrading the ng-chat module to work in a current version of Angular project.
2. Would like to add users entering emojis, and am thinking of using angular-emoji module. Any advice?

I am opening this issue to discuss on how to allow people who are using this component to style and change its looks.

This was already requested by different users on #29 and #34

At the moment, changing the size of the chat windows, friends list or the space between these elements is a challenge as their sizes are used to calculate how many windows can fit on each viewport, and the sizes are configured within the component main class and are not exposed as settings.

It would be nice to get some feedback on what is most valuable for users right now regarding to style, such as:

• Colors
• Fonts
• Sizes
• Elements placements

Knowing what is most valuable will help on prioritizing what gets done and released first.

I am wondering how to change avatar for a picture?

All I did was intall ng-chat and then import into app module

ERROR in ./~/ng-chat/ng-chat/ng-chat.component.ts
Module not found: Error: Can't resolve ''

Hello There,

Thanks for the great chat application, helps me a lot. I would like to talk about a strange behavior. I do not know if it is just for me or if it is a normal one but here it is:

When a user received a message from another user (both of them are online), the receiver has a pop up opened for the new message. Everything is great up to this. But, onMessagesSeen method (I am using it for persisting the read status to a database), "messages" parameter is always empty unless the receiver specifically closes the chat window, reopen it and click on the message text box. Then the messages are filled for the method. This is not a desirable behavior for me.

Am I missing something? Is this a normal behavior? How can I find a way around?

Thanks in advance.

FS

Hi @rpaschoal,

i am facing pagination issue, i want to load old messages when scroll up, is there any option for this.
currently i am using firebase, can you give me any example for it.

Hi,

I can open friend chat window from anywhere.
But I want to open direct chat window for use to use from anywhere.
Currently we have to click from Friend list only.
How to call it from anywhere?

add a simple example with express - backend.

Kind regards,
chris

Hi @rpaschoal!

Currently, if the url of the avatar image is something like "blob:http://..." then getting the avatar throws an exception as using an unsafe value. Unfortunatelly, because of the missing property binding, sanitizing the url does not help. However, if the src="{{user.avatar}}" in line 31 of ng-chat.component.html would be replaced by [src]="user.avatar" and the avatar would be a string | SafeResourceUrl type then it would solve the issue.

What do you think?

Thanks in advance,
Peter

Hello, How can I import NgChat component in my component so that I can get a reference of it using ViewChild? I tried with importing NgChat component
import { NgChat } from 'ng-chat';
but this gives error: No exported member NgChat. Please help in this regard.

Also I need to change 2-3 lines of your code in file: ng-chat/fesm5/ng-chat.js. How can I change those?
For example one of the change I need to do in this file is call the this.fetchMessageHistory(openedWindow); method openChatWindow method, even when the window is opened, so that I can fetch the latest history. Please help in this regard, stuck in a project.

myadapter.ts
`import { Injectable } from '@angular/core';
import { ChatAdapter, User, Message, UserStatus } from 'ng-chat';
import { Observable, of } from 'rxjs';
import { delay } from "rxjs/operators";
import { map, catchError } from 'rxjs/operators';
import { ChatsService } from '../services/chats.service';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { TokenService } from '../services/token.service';
@Injectable()
export class MyAdapter extends ChatAdapter
{ private historyMessages: Message[] = [];
public SubmitData: Object = {};
public LoggedInUserDetails: any;
public friends: any;
public roomids: any;
public Onloadchat:boolean = false;
constructor(private _chatService: ChatsService,
public db: AngularFireDatabase,
private token: TokenService,) {
super();
this.LoggedInUserDetails = this.token.getUser();
this.roomids = [];
}
listFriends(): Observable<User[]> {
this._chatService.Friendlist().
subscribe(
data => this.FriendlistResponse(data),
error => this.handleError(error));
return of([]);
}
FriendlistResponse(data){
if(data){
this.friends = data;
this.onFriendsListChanged(data);
data.forEach(element => {
console.log(element);
this.OnLoadMessage(element);
});
}
}
getMessageHistory(userId: any): Observable<Message[]> {
this.historyMessages=[];
this.SubmitData['guid'] = userId;
if(userId != this.LoggedInUserDetails.user_guid){
this._chatService.UpdateChatRoom(this.SubmitData).
subscribe(
data => this.ChatRoomhandleResponse(data),
error => this.handleError(error));
}
return of(this.historyMessages).pipe(delay(5000));
}
ChatRoomhandleResponse(data) {
if(data.room){
// this.roomid =data.room;
if(data.sender != this.LoggedInUserDetails.user_guid){
var receiverid = data.sender;
}else{
var receiverid = data.receiver;
}
this.roomids.push({
roomid: data.room,
receiverid: receiverid
});
this.messagehistory(data);
}
}

OnLoadMessage(data){
  //  var x = this.onloadchatObj(data.room);
    if(data.sender != this.LoggedInUserDetails.user_guid){
    var user = this.friends.find(x => x.id == data.sender);
    }else{
    var user = this.friends.find(x => x.id == data.receiver);
    }
    console.log(user);
    this.db.list('/chats/'+data.room, ref => ref.orderByChild('new').limitToLast(1))
        .snapshotChanges().pipe(
            map(changes =>
                changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))  
            )
          ).subscribe(item => {
      item.forEach(element => {
        var y = element;
           if(this.LoggedInUserDetails.user_guid==y["receiverID"]){
               if(typeof(user) != "undefined" ){
                var firebasedata = new Message();
                firebasedata.fromId = y["senderID"];
                firebasedata.toId = y["receiverID"];
                firebasedata.message =  y["messageText"];
                this.onMessageReceived(user, firebasedata);
               }
          }
      });
    });
  }
  messagehistory(data){
    //  var x = this.onloadchatObj(data.room);
      this.db.list('/chats/'+data.room, ref => ref.orderByChild('new').limitToLast(99))
          .snapshotChanges().pipe(
              map(changes =>
                  changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))  
              )
            ).subscribe(item => {
        item.forEach(element => {
                   this.historyMessages.push({
                       fromId: element["senderID"],
                       toId: element["receiverID"],
                       message: element["messageText"]
                   });
        });
      });
    }
  onloadchatObj(chatRoom){
    var items = this.db.list('/chats/'+chatRoom);
    //console.log(items);
    return items;
  }
  handleError(error) {
    console.log(error);
    // return false;
  }
sendMessage(message: Message): void {
    var roomid;
    this.roomids.forEach(function(value,key) {  
        if(message.toId == value.receiverid){
            roomid = value.roomid;
        }
    });
    if(roomid){
        let time = new Date();
        var firebasedb = this.onloadchatObj(roomid);
        firebasedb.push({
        messageText: message.message,
        receiverID: message.toId,
        senderID: message.fromId,
        timestamp: time.getTime()
        });
    }
        var user = this.friends.find(x => x.id == message.fromId);
    setTimeout(() => {
      //  this.onMessageReceived(user, message);
    }, 1000);
}

}`

i am getting two problems
1 when click any two user for chat at time message history coming in wrong window chat
2 when page load chat window is automatic open with notification

Hi,
I've a requirement in which my GUI itself has list of friends. So, using ng-chat, is it possible to open chat window for selected the user directly, without ng-chat showing list of friends.
Regards,
Rashmi

I would like to give some suggestions for improvements to the component.

There could be a property on the user to populate with an unread message counter and appear in the contact list, just as it appears in the title of a window when it is not in focus.

You might also have an option not to open the window automatically when you receive a message. For example, I send a message to a certain user who is online, that other user's window does not open automatically, or open but by default minimized, in order to have a certain privacy.

Hello @rpaschoal

This chat is amazing.
Would it be possible for the chat to start minimize?

I am working on angular 6 app and I want to send a image/Doc as a message into chat. Can you please explain how to make it possible?

An error is occurring in the emitBrowserNotification function that is caused by attempting to access the empty message array.

let message = window.messages[window.messages.length - 1].message;

I noticed this happens when I send a new message to a user I did not talk to earlier or when I start a new conversation.

When a receiver gets a message , and the conversation window is not already opened , the user will see the message twice.

This happens because the method onMessageReceived in ng-chat.component.ts

private onMessageReceived(user: User, message: Message)
   {
       if (user && message)
       {
           let chatWindow = this.openChatWindow(user);

           if (chatWindow){
               chatWindow.messages.push(message);

               this.scrollChatWindowToBottom(chatWindow);
           }
       }
   }

Here the method call this.openChatWindow(user); loads the message from messageHistory i.e. this.adapter.getMessageHistory

And then again
chatWindow.messages.push(message); appends the message.

The fix would be to keep a memory of whether the window returned from this.openChatWindow(user);
returned a new window or an already returned window. and depending on this flag , only push the message if it is an already opened window

I received this message on my first try to run after importing the module.

./node_modules/ng-chat/index.ts
Module build failed: Error: ...\node_modules\ng-chat\index.ts is missing from the TypeScript 
compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign 
of a badly packaged library. Please open an issue in the library repository to alert its author and ask 
them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

My dependencies:

 "dependencies": {
   "@angular/animations": "^5.2.0",
   "@angular/cdk": "^5.0.4",
   "@angular/common": "^5.2.0",
   "@angular/compiler": "^5.2.0",
   "@angular/core": "^5.2.0",
   "@angular/flex-layout": "^2.0.0-beta.12",
   "@angular/forms": "^5.2.0",
   "@angular/http": "^5.2.0",
   "@angular/material": "^5.0.4",
   "@angular/platform-browser": "^5.2.0",
   "@angular/platform-browser-dynamic": "^5.2.0",
   "@angular/router": "^5.2.0",
   "@covalent/core": "^1.0.0-rc.1",
   "angular-pipes": "^6.5.3",
   "angular2-moment": "^1.7.0",
   "core-js": "^2.4.1",
   "hammerjs": "^2.0.8",
   "ng-chat": "^1.0.1",
   "ng2-img-cropper": "^0.9.0",
   "ng2-img-tools": "^1.1.2",
   "ng2-validation": "^4.2.0",
   "rxjs": "^5.5.2",
   "zone.js": "^0.8.14"
 },

Hello,

iIm trying to use your ng-chat on 42's school project but I can't understand how work the history chat by demo (offline chat).

I see history from id : 1 to id : 999 on every window.

Can you give me some help ?

Thanks.

Please consider the option of using chat on mobile devices. Since at the moment, as flat because of the lack of space (interface) there is no possibility to correspond. Only a window with a list of users is available, then the chat window does not open. More precisely, it does not respond to the choice of the user with whom they would like to exchange messages. I think you have ideas for this.
And I apologize for my English.

I know this is not part of this issue, but please check this:
https://stackoverflow.com/questions/54894884/cant-receive-messages-from-groups-ng-chat

Originally posted by @JosePolanco18 in #105 (comment)

Hi,
When I try to run the "ng build --prod" command, it returns the error:

ERROR in node_modules\ng-chat\ng-chat.d.ts.ɵa.html(2,25): : Property 'unsupportedViewport' is protected and only accessible within class 'NgChat' and its subclasses.

"ng build" works fine.

Hi @rpaschoal,

I need help with another issue. I have a "SignalR" method which has been signaled whenever a "read" occurs on unread messages. Then, the user who is the owner of the message receives this signal by listening to the correspondent method (assuming he/she is online). This is working perfectly up to this point. Now, after the message owner received the signal that his/her message has been read by the receiver, I need to manipulate the message status and I am planning to put a read mark (like the one in WhatsApp) near the message. On the hand, since messages are loading using observable, I do not know how to access the necessary message to make its status as "read".

Can you tell me how I am going to accomplish this?

Thanks in advance.

FS

Show the message date and time in messages history.

It was nice to use the library. It works great.

In the lower resolution (for mobile or ipad), the chat window is not visible. Is there a way to make it responsive so that it works for lower resolution as well ?

Thanks

Hi, Rafael!
The chat is really great, thank you! I'd like to use it within my application, but I have a couple of questions.

1. We have listFriends() and getMessageHistory(userId) methods. First one will be invoked on chat initialization giving us an array of users available to talk with and the second is invoked when the chat window is opened. What if user has received a message while being offline, how should I notify him about unread message on next login? My idea is to receive users and unread messages amount within listFriends() method, and explicitly call getMessageHistory() for every user, who has unreadMessages > 0.
   Is this a good way to go or am I missing something?
2. The Message class has seenOn property, which is being set when the chat window gets a focus. Is there a way to send a message to the server on this event? In order to update corresponding message record in DB as read.
   Sorry for my english. Feel free to edit this question if you find mistakes.

I'm try to open a chat when tap(click) on name of user chat, in google chrome's mobile view and google chrome mobile, and return an error "Cannot read property 'nativeElement' of undefined".

I search in your code and error occurs in line 378 - ng-chat.component.ts

The tap(click) event trigger openChatWindow(user, true, true) function line 10 - ng-chat.component.html
I see that it's depends of viewport, but this not to have to return an error. I don't understand why this.chatMessageClusters.toArray()[windowIndex] it's undefined.

To have a mobile compatibility, could hide list of users (# ng-chat-people) and show windows and when hide window. show list of users.

Thanks.!

this project is grate!
i'd miss some customisation options:

• hide the search input
• hide the friends list and pop chat window by click on icon e.g in HelpDesk support chat

hello, I have a question more of programming than ngChat, I'm stuck 3 days with this, that's why I see the need to open this issue.
how can I get the messages from the database without an observable?, since I cant get the messages outside de http.get because it is a synchronous function.

public getMessageHistoryByPage(userId: any, size: number, page: number): Observable<Message[]> {
        let mockedHistory: Array<Message>;
        let url = 'http://localhost:3000/historial/' + userId + '/' + this.user.id;
        this.http.get(url)
            .pipe(map((result) => {
                    mockedHistory = result['messages'];
                    let startPosition: number = (page - 1) * size;
                    let endPosition: number = page * size;
                    mockedHistory = mockedHistory.slice(startPosition, endPosition);
                },
            )).subscribe();
        // In this line mockedHistory is empty and i can't return mockedHistory inside de get request.
        return of(mockedHistory.reverse()).pipe(delay(1000));
    }

Thanks for answer and sorry for the noob question.

Moving this to a new issue as we can discuss it further here and within context:

How i can get call when onMessagesSeen event triggered. how to implement this in my adapter or component, any sample code.(i want to mark them read in my database).
thanks in advance.

Originally posted by @MuhammadRizwanBashir in #72 (comment)

Could you please add the functionality to send image, link or some attachment.
Thanks

Hi Rafael,

I'm a Brazilian developer. I have a doubt, would have some way to change the placeholder "translate to Portuguese" and stylize all component ?

Code coverage used to be reported for ng test after each successful build as seen on #26

For some reason it has stopped to report even though the build and tests are still running on Travis.

This might be related to one of the changes included in #32 when --sourcemaps=false was added in order to fix an issue where the tests on Travis were failing.

Why would you do this to her?

Hi,
I am relatively new to Angular so please excuse the stupid question but I really want to contribute to your excellent project. I have quite a bit of experience writing chat bots and chat end points and want to add the ability to do "quick responses" if the client is talking to a bot. I cannot use your component as-is because Angular strips the button tags and the "onClick=" from the Message.message when you put it into the innerHtml. More on that later...

I have forked your repository to my own GitHub account and cloned it to my local machine. I know how to use npm link to create a symlink from my local ng-chat to my client. I believe that I now need to run ng build ng-chat but when I try it from the command line in the root directory I get:

C:\development\src\ChatBots\AngularClient\ng-chat>ng build ng-chat

Date: 2018-11-28T21:15:36.323Z
Hash: 9c5150967a8f50ad6392
Time: 14006ms
chunk {main} main.js, main.js.map (main) 657 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 105 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]

ERROR in demo/offline_bot/src/app/app.component.ts(2,29): error TS2307: Cannot find module 'ng-chat'.
demo/offline_bot/src/app/app.module.ts(7,30): error TS2307: Cannot find module 'ng-chat'.
demo/offline_bot/src/app/demo-adapter-paged-history.ts(1,109): error TS2307: Cannot find module 'ng-chat'.
demo/offline_bot/src/app/demo-adapter-paged-history.ts(69,18): error TS2339: Property 'onMessageReceived' does not exist
on type 'DemoAdapterPagedHistory'.
demo/offline_bot/src/app/demo-adapter.ts(1,84): error TS2307: Cannot find module 'ng-chat'.
demo/offline_bot/src/app/demo-adapter.ts(106,18): error TS2339: Property 'onMessageReceived' does not exist on type 'Dem
oAdapter'.
src/spec/ng-chat.component.spec.ts(15,12): error TS2416: Property 'listFriends' in type 'MockableAdapter' is not assigna
ble to the same property in base type 'ChatAdapter'.
Type '() => Observable<User[]>' is not assignable to type '() => Observable<UserResponse[]>'.
Type 'Observable<User[]>' is not assignable to type 'Observable<UserResponse[]>'.
Type 'User[]' is not assignable to type 'UserResponse[]'.
Type 'User' is not assignable to type 'UserResponse'.
Property 'User' is missing in type 'User'.

when I try the same thing from the src/ directory I get:

C:\development\src\ChatBots\AngularClient\ng-chat\src>ng build ng-chat

Date: 2018-11-28T21:16:51.402Z
Hash: 986c8962b77a2394797b
Time: 13871ms
chunk {main} main.js, main.js.map (main) 657 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 105 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]

ERROR in ../demo/offline_bot/src/app/app.component.ts(2,29): error TS2307: Cannot find module 'ng-chat'.
../demo/offline_bot/src/app/app.module.ts(7,30): error TS2307: Cannot find module 'ng-chat'.
../demo/offline_bot/src/app/demo-adapter-paged-history.ts(1,109): error TS2307: Cannot find module 'ng-chat'.
../demo/offline_bot/src/app/demo-adapter-paged-history.ts(69,18): error TS2339: Property 'onMessageReceived' does not ex
ist on type 'DemoAdapterPagedHistory'.
../demo/offline_bot/src/app/demo-adapter.ts(1,84): error TS2307: Cannot find module 'ng-chat'.
../demo/offline_bot/src/app/demo-adapter.ts(106,18): error TS2339: Property 'onMessageReceived' does not exist on type '
DemoAdapter'.
spec/ng-chat.component.spec.ts(15,12): error TS2416: Property 'listFriends' in type 'MockableAdapter' is not assignable
to the same property in base type 'ChatAdapter'.
Type '() => Observable<User[]>' is not assignable to type '() => Observable<UserResponse[]>'.
Type 'Observable<User[]>' is not assignable to type 'Observable<UserResponse[]>'.
Type 'User[]' is not assignable to type 'UserResponse[]'.
Type 'User' is not assignable to type 'UserResponse'.
Property 'User' is missing in type 'User'.

Again, I apologize for the noob question but this is my first attempt to work with a github based project.

Stephen G.

Hi, i need to open a chat window from a button, without friends bar, how can i do it? Friends bar needs to be not visible.

Chat button:
https://ibb.co/fvtx6V

Hi,
I use in my project two chats, one for mobile app and one for web application (ng-chat). I need to the user receive a push notification on webapp when a client send a message.

I'm using Firebase RealTime Database for storage chat messages. I can get and send messages but I can't receive push notification when the mobile user send message to webapp user

I was testing the chat and got errors.
this happens when chat windows are closed and some one messaged you and window automatically opens with errors. if you have already opened the chat window for the user who is messaging you will not get error. if you get error on above situation you will always get error on onMessageSeen event.

how to change postion Friend list to left side and change width and height?
thanks

Hi @rpaschoal,

It was nice to use your library, which is the perfect fine for P2P chat but as came across Group chat this is not working or do I need to do some additional settings in Adapter.

Will love to listen from you!

A couple of ideas on this:

• Every label and text visible to users must be customizable
• Support/Use Angular's i18n localization
• Refactor existing properties for placeholders to be passed as an Object to reduce the number of Input parameters and increase extensibility
• Must be released within a new minor version

This was brought on #37