opsdroid / opsdroid-web

🌍 A minimal web chat client for speaking to opsdroid

An open source chat-ops bot framework

---

Quick Start • Documentation • Playground • Blog • Community

---

An open source chatbot framework written in Python. It is designed to be extendable, scalable and simple.

This framework is designed to take events from chat services and other sources and execute Python functions (skills) based on their contents. Those functions can be anything you like, from simple conversational responses to running complex tasks. The true power of this project is to act as a glue library to bring the multitude of natural language APIs, chat services and third-party APIs together.

See our full documentation to get started.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

opsdroid-web's Issues

Update manifest.json

Opsdroid web v2 contains a manifest.json which allows users to install the app on a mobile or desktop.
We need to update the default manifest.json to match our app and styles, this includes:

• Updating logos
• Updating name
• Updating theme colours

---

Reference:

• web.dev

Handle voice commands

As part of the redesign of opsdroid-web, I thought that letting users use voice to send messages could be interesting.

The current app has a microphone icon, but it doesn't do anything. We should change that and let users send voice commands.

Add section for command center

Since the command center will allow users to toggle modules on/off and opsdroid web can be available to the public internet, we should make sure to implement #21 before adding this section. Only users with the token will have access to this section.

The command center section will have a few things:

• List of all modules found in the configuration
• List of stats from the /stats endpoint
• Possibility to add a new module

Implement websocket reconnect

On v1 we have a reconnect method that is triggered when we lose connection or when we change the websocket URL. We should implement a similar thing in v2.

For reference:

  reconnectToWebSocket() {
    if (this.active_connection && this.active_connection.connected) {
      this.active_connection.close();
    }
    if (this.connectionTimeout) {
      clearTimeout(this.connectionTimeout);
    }
    console.log(`Reconnecting in ${this.connectionCooldown} seconds.`);
    this.connectionTimeout = setTimeout(this.connectToWebsocket, this.connectionCooldown * 1000);
    this.backoffCooldown();
  }

Show connection errors

When trying to connect to a server which isn't localhost there is no feedback on why it won't connect.

Reduce payload size

After webpacking the application we get a warning saying it is quite big. We should look at reducing this.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.js (1.19 MiB)

Migrate from greenskeeper to Snyk

Greenkeeper stopped working on June 3rd 2020, it was recommended that users using Greenkeeper should migrate to Snyk.

GitHub already had some alerts when certain versions of a library are vulnerable to some attacks, but perhaps we could give Snyk a try and see how it is. A quick glance at the webpage, it seems we should be able to use the free version.

Screenshot

Add state to each message and allow users to resend failed messages

On opsdroid v 2 each message contains the following:

export type MessageType = {
  text: string;
  user: string;
  timestamp: Date;
  image?: string;
};

We should also add a state which will be one of the following:

• Sending
• Sent
• Error

If we have a message in an error state, we should do the following:

• Show an error icon next to he message
• Show a tooltip above the icon with the error message
• Upon clicking we will try to resend the message again

Improve release process and docs

We should have docs on how to perform a manual release of the app. Currently, I've been simply tagging new versions of the app, but these aren't being sent to NPM because I forgot that we need to update the package.json and then push to npm as well.

These are the docs we need:

• Changelog (Could use github)
• Release process to mention manual steps (example)
• GitHub action to release to npm for us

Redesign app

Opsdroid Web doesn't look bad, but it might be a good idea to give it a fresh new look. Here are the two proposals for the redesign, I'm wondering if perhaps we should have these two colours and let users select whichever they prefer. I'm also wondering which style for the chat bubbles to choose from.

Here's the figma link so you can see the design better. I will also be updating this with the settings tab

Add history

The up and down arrows keys could cycle through the history of messages. This would be really useful as when testing opsdroid you may want to send the same message repeatedly.

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Render link preview

If the user or bot mentions a web url a preview could be shown inline.

An in-range update of websocket is breaking the build 🚨

The dependency websocket was updated from 1.0.30 to 1.0.31.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

websocket is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Commits

The new version differs by 5 commits.

• 1f7ffba Releasing v1.0.31
• 574b703 Fix infinite loop in error handling. (#332)
• e60f68d Fix memory leak with multiple WebSocket servers on the same HTTP server (#339)
• 60a132d Use es5-ext/global as a more robust way to resolve browser's window (#362)
• 6c3ac5a adding compatibility with V8 release greater than v7.6 (node and electron engines) (#376)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Replace plain fetch with something else

For now using fetch is working okay, but after testing the websocket token, I've noticed that once we get a forbidden request from the server all we get as an error message was: Failed to fetch which is as useful as you would expect.

We probably should replace fetch with something more useful. The motivation behind that is that we have a way to keep errors in our state store and in the future we should present that to the user. So it would be good to get a lot more information why a request failed.

Useful things:

• status code
• message
• any extra data that we can add to the state

Implement a proper settings component that can be toggled on/off

Currently, the only settings available to opsdroid web are fields to toggle SSL on/off and fields to include the domain and port for the WebSocket connection.

We should create a settings component in which users have more knots to turn if they which to configure the app. These could be things such as:

• Toggle for SSL
• domain/port for websocket connection
• Authentication token field (for interaction with the command center and maybe websockets)
• Toggle for light/dark mode
• ...

For the connection settings, we should support both settings on this new settings component or by clicking on the 'connect/disconnect' icon in the prompt and showing the connection settings as shown in the picture.

Fix update logic

When moving opsdroid-web to v2 I implemented the same logic as we used to have in v1. Although, the logic only works for releases that we do with github. This is because we are hitting a github endpoint to check the latest release.

With opsdroid-desktop, the release was done with GitHub since it is an electron app, but opsdroid-web is released to npm so the endpoint always hits a 404 (because we don't have any release in github).

We should update the logic to check npm instead of Github so the update message works

Allow users to change their avatar

At the moment users can't change their avatar. It might be a nice thing to implement

Allow users to close the connection error message

Currently, users can't close the error message when they can't connect to opsdroid, ideally they should be able to close the message if they wish to do so

Add logic to change appearance

We need to add logic to change the appearance of the app based on the user's settings. This will include:

• Change of accent colour
• Toggle between light and dark theme

Add authentication to opsdroid web

The goal for opsdroid web v2 is to work together with opsdroid's command center (opsdroid/opsdroid#1872). On the open PR that implements the command center, we require users to provide a token in which we can toggle modules on/off.

As part of #20 we should allow users to provide a token in which we can use to authenticate the user and interactions between opsdroid web and opsdroid itself.