SUSI Desktop is a cross platform desktop application based on electron which presently uses chat.susi.ai as a submodule and allows the users to interact with susi right from their desktop.

Any electron app essentially comprises of the following components

• • Main Process (Managing windows and other interactions with the operating system)
  • Renderer Process (Manage the view inside the BrowserWindow)

Steps to setup development environment

• • • Clone the repo locally.

$ git clone https://github.com/fossasia/susi_desktop.git
$ cd susi_desktop

• • • Install the dependencies listed in package.json file.

$ npm install

• • • Start the app using the start script.

$ npm start

Structure of the project

The project was restructured to ensure that the working environment of the Main and Renderer processes are separate which makes the codebase easier to read and debug, this is how the current project is structured.

The root directory of the project contains another directory ‘app’ which contains our electron application. Then we have a package.json which contains the information about the project and the modules required for building the project and then there are other github helper files.

Inside the app directory-

Webview Tag

Display external web content in an isolated frame and process, this is used to load chat.susi.ai in a BrowserWindow as

<webview src="https://chat.susi.ai/"></webview>

Adding event listeners to the app

Various electron APIs were used to give a native feel to the application.

win.on('focus', () => {
	win.webContents.send('focus');
});

const page = mainWindow.webContents;
...
page.on('dom-ready', () => {
	mainWindow.show();
});

win.once('ready-to-show', () => {
	win.show();
});

Resources

1. A quick article to understand electron’s main and renderer process by Cameron Nokes at Medium link
2. Official documentation about the webview tag at https://electron.atom.io/docs/api/webview-tag/
3. Read more about electron processes at https://electronjs.org/docs/glossary#process
4. SUSI Desktop repository at https://github.com/fossasia/susi_desktop.