Ability to react to clicks on user names and avatars

[ilyakonrad]

I have a feature request to open user profile when clicking on avatars and names in the chat. I think it makes a lot of sense, since all messengers do similar things.

Right now my only option to achieve this seems to be to create custom avatar and channel header components so that I can put click listeners wherever I want.

I believe it would be much simpler if stream-chat-angular implemented click listeners and passed the events through some exposed observables which clients could use to their liking. The event could include user object and potentially other metadata. The feature seems to be pretty simple while bringing a lot of value.

The usually interactive elements such as names and avatars would also have to be tababble, meaning fully accessible without a mouse and thus require listening to keydown.enter and keydown.space events as well. Not the highest priority on this one though. Here's the directive we use to make any html element accessible with use of a simple (click) listener:

import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core'

@Directive({
  selector: '[appInteractive]',
  host: { role: 'button' },
  standalone: true
})
export class InteractiveElementDirective {
  @Input() appInteractive: boolean | ''

  get isInteractive(): boolean {
    return this.appInteractive !== false
  }

  @HostListener('keydown.enter', ['$event'])
  @HostListener('keydown.space', ['$event'])
  handleEnterKeydown(event: MouseEvent & { currentTarget: HTMLElement }): void {
    if (this.el.nativeElement === event.target && this.isInteractive) {
      event.currentTarget.click()
    }
  }

  @HostBinding('tabindex')
  get tabIndex() {
    return this.isInteractive ? 0 : -1
  }

  constructor(private el: ElementRef) {}
}

The only thing to decide is how to react to clicks on a group chat name (where you have first 5 names separated by commas) vs a 2 person chat name (where you only have one name). I think listening to clicks on each individual name in a group chat name isn't that valuable, since it's pretty easy to create a custom channelHeaderInfoTemplate which would usually open some sort of custom member list anyway.

[szuperaz]

Thanks for the suggestion, it makes sense, but I'm not 100% sure about all the details, and therefore I'm not sure when I would be able to implement this, but I'll keep the issue open. Until then, the suggested workaround is what you mentioned as well:

• use a custom avatar
• use a custom channel header (or add an event listener to the stream-channel-header element)

The advantage of this solution is that you can attach any event listener, not just click (even though arguably, click event is the most common, but for example, Slack has a hover handler for avatars/usernames as well).