Images next to comments reactions are broken for bots

[webknjaz]

Example comment: aio-libs/aiohttp#3809 (comment)

[fregante]

Apparently the image URL is different for bots. Users have

github.com/bfred-it.png

Bots don't:

github.com/dependabot-preview.png

If we don't find the right URL, we can just drop the avatar from the list.

[notlmn]

just drop the avatar from the list.

This, reactions from bots don't matter for regular conversations, ignoring bots makes sense.

[webknjaz]

@bfred-it I've got some experience with writing bots. So here's some info about them and common mistakes of integration writers as well as GitHub itself.

1. Bots are GitHub Apps (https://developer.github.com/v3/apps/)
2. When bot posts some content it has a special label in the UI
3. GitHub tries to find the best picture to show:
   • priority goes to the App picture if the developer has uploaded it. For
     example, at https://github.com/apps/ansiwatch I've specified the picture
     so it'll be used.
   • if there's no picture, GitHub will use the developer's avatar.
     • if it's a user account, it'll take it from the profile: bot issue webknjaz/.me#1 (issue created by bot) / (app page image: https://github.com/identicons/app/app/dobby-ans) for https://github.com/apps/dobby-ans created by https://github.com/webknjaz (user)
     • if it's an organization, it'll user the org avatar: https://github.com/apps/diactoros (app page reveals that there's no image) but in the event GitHub broadcasts it'll point to https://avatars0.githubusercontent.com/u/40318227?v=4 which is the avatar of https://github.com/sanitizers ‒ org under which this App is created. Here's an excerpt of such event: https://gist.github.com/webknjaz/8590b205a8c14d888385dace75672938
4. Interestingly, when GitHub renders the App name as text it'll append [bot] in the end, like dobby-ans[bot]. It appears in a lot of places and there are even bugs where they render wrong URLs.
   Some places create links like https://github.com/dobby-ans[bot] which are obviously wrong and the right way to do this is to render them like https://github.com/apps/dobby-ans
   BTW refined-github does the same mistake in reactions: in that comment I linked above it produces https://github.com/dependabot-preview link which should be https://github.com/apps/dependabot-preview

[webknjaz]

So GET /apps/:app_slug endpoint has owner->avatar_url which could be used as one of the fallbacks

Ref: https://developer.github.com/v3/apps/#get-a-single-github-app

[webknjaz]

Here's an example of full app meta output for dependabot-preview:

$ curl -sH 'Accept: application/vnd.github.machine-man-preview+json' https://api.github.com/apps/dependabot-preview
{
  "id": 2141,
  "node_id": "MDM6QXBwMjE0MQ==",
  "owner": {
    "login": "github",
    "id": 9919,
    "node_id": "MDEyOk9yZ2FuaXphdGlvbjk5MTk=",
    "avatar_url": "https://avatars1.githubusercontent.com/u/9919?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/github",
    "html_url": "https://github.com/github",
    "followers_url": "https://api.github.com/users/github/followers",
    "following_url": "https://api.github.com/users/github/following{/other_user}",
    "gists_url": "https://api.github.com/users/github/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/github/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/github/subscriptions",
    "organizations_url": "https://api.github.com/users/github/orgs",
    "repos_url": "https://api.github.com/users/github/repos",
    "events_url": "https://api.github.com/users/github/events{/privacy}",
    "received_events_url": "https://api.github.com/users/github/received_events",
    "type": "Organization",
    "site_admin": false
  },
  "name": "Dependabot Preview",
  "description": "Dependabot helps you keep your dependencies secure and up to date. It works with most popular languages - you can see full details of the languages we support [here](https://dependabot.com/#languages).\r\n\r\nEach day:\r\n- Dependabot will scan your dependency files, looking for outdated requirements.\r\n- If any of your dependencies are out of date Dependabot will open pull requests to bump each one, including changelog links and release notes.\r\n- You check the linked changelog and release notes, and hit merge.\r\n\r\n### Great PRs that stay up-to-date\r\nDependabot pull requests include release notes, changelogs and commit links whenever they're available. They'll also automatically keep themselves conflict-free.\r\n\r\n### Compatibility scores for each update\r\nDependabot aggregates everyone's test results into a compatibility score, so you can be certain a dependency update is backwards compatible and bug-free.\r\n\r\n### Security advisories handled automatically\r\nDependabot monitors security advisories for Ruby, JavaScript, PHP, Java, .NET, Python, Elixir and Rust. We create PRs immediately in response to new advisories.\r\n\r\n### Simple getting started flow\r\nWe'll update five of your dependencies each day, until you're on the cutting edge. Request more PRs if you want, or close them to ignore a dependency until the next release.\r\n\r\n### Automatic merge options\r\nDependabot can be configured to automatically merge PRs if your tests pass on them, based on the size of the change (patch/minor/major) and the dependency type.\r\n\r\nDependabot is owned and maintained by GitHub.",
  "external_url": "https://dependabot.com/",
  "html_url": "https://github.com/apps/dependabot-preview",
  "created_at": "2017-04-21T12:03:36Z",
  "updated_at": "2019-05-29T13:49:40Z",
  "permissions": {
    "checks": "read",
    "contents": "write",
    "issues": "write",
    "metadata": "read",
    "pull_requests": "write",
    "statuses": "read"
  },
  "events": [
    "check_run",
    "check_suite",
    "commit_comment",
    "delete",
    "issues",
    "issue_comment",
    "label",
    "pull_request",
    "pull_request_review",
    "pull_request_review_comment",
    "push",
    "repository",
    "status"
  ]
}

[fregante]

We're not gonna use the API to get the avatar of a bot 😅 talk about overkill. The easy way out is to discard bots from reactions, which as @notlmn mentions aren't particularly useful (nor common, I'd add)

Related bot issue from the past #1978

[webknjaz]

Bots are becoming more common over time. They are actually useful. And they provide more control over ACL so GitHub aggressively recommends rewriting other integrations to use GitHub Apps.

Side note: Dependabot was actually recently acquired by GitHub itself btw. I suggest you give it a shot and see how it goes :)

[webknjaz]

We're not gonna use the API to get the avatar of a bot

Then just detect [bot] and use the image at https://github.com/identicons/app/app/{{ bot_name }}

[fregante]

That's a useless icon though: https://github.com/identicons/app/app/dependabot-preview

[notlmn]

Bots are becoming more common over time. They are actually useful.

I didn't say that bots are useless, in #2125 (comment) what I explicitly mentioned was that bots are not that relevant in conversations where reviews from a user are more important and something that I'd like to be a highlighted than some generated content from a bot.

Take this issue as example, to be frank I wouldn't care if a bot reacted to my comment more than a reaction from the project maintainers or collaborators (wink wink to #2108).

[webknjaz]

That's a useless icon though

Right, I thought I'd get resolved into a proper picture...

bots are not that relevant in conversations

They are relevant. In this specific case, bot indicates that it "saw" the mention.
It is very important with GitHub apps: they get events from webhooks which in turn are similar to UDP — GitHub sends events over the Internet without any attempts to do retries.
So this is extremely useful in terms of identification of whether the App isn't dead. It's like a ping or healthcheck.

As for human reactions: if they are more important, I'd organize the order of pictures to prioritize them.

[fregante]

Ideal solution: find another URL shortcut like github.com/bfred-it.png but for bots

Currently-possible solution: look for the image URL on the current page, e.g. avatar = select('[alt="@dependabot-preview"]').src, since bots probably also took some other action on the page. If this isn't found, the avatar won't be shown.

The solution should drop this replace and add the new select/conditions in a for-of loop (it'll be more readable)

https://github.com/sindresorhus/refined-github/blob/9b2acbbc0023c5df62c55b2595febd8277d652eb/source/features/reactions-avatars.tsx#L23-L29

[webknjaz]

look for the image URL on the current page

You're reading my mind 🤔