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.