fossasia / susi_chromebot

SUSI.AI Chrome Extension

Chrome extension to access SUSI.AI

This is a chrome extension to access SUSI.AI.

In certain situations the user wants to access certain functionalities of SUSI.AI without leaving the tab they are currently browsing. In those situations, using a chrome extension could turn out to be a viable option, and that is exactly what we're trying to accomplish.

Installation

$ git clone https://github.com/fossasia/susi_chromebot
$ cd susi_chromebot
$ cd src

1. Clone this repository.
2. Goto chrome://extensions on your chrome browser.
3. Turn on developer mode if not already on.
4. Load unpacked extension from src folder.
5. Click on the SUSI icon you see on your browser toolbar (or) Use the keybkeyboard shortcut Alt+Shift+s to open.
6. Right click on the manifest icon (SUSI.AI icon on chrome), then click on Options. Allow mic-access from there.

Working GIF

Want to Contribute?

Check Issues here.

Read CONTRIBUTING.md here.

Communication

Our chat channel on gitter can be found here.

susi_chromebot's Issues

Add .jshintrc file for automatic detection on codacy

With the .jshintrc file provided, I won't have to manually configure it.

I will be adding .jshintrc if thats fine with you guys @ms10398 @gabru-md ?

When asked to show image it shows URL instead of the image

Expected Behavior

It should display the image

Actual Behaviour

It shows the URL

Screenshot is attached below

Message should be sent on hitting return key as Susi Chat

Actual Behaviour

We have to explicitly click on Submit for sending the message.

Expected Behaviour

It should be automatically sent when we hit return key.

Yes I would like to work on it.

Wrong response read from server

actual behaviour
Currently, the answers[0].data[0] field is being read. This is not the correct response to read. Wrongly, the request is being send twice from the client side.

Expected behaviour
Send the request only once for one query. Read the correct response which is the actions attribute.
Please refer to the API doc at https://dev.susi.ai/skills/susi_chat_api.html

Would you like to work on this ?
No

Integrate google webspeech api

Integrate google webspeech api for :-

• Text To Speech
• Speech input

Yes, I would work on this.

There is an issue when I ask susi to get me a meme

Reduce redundancy in code

Currently there is too much redundancy in creating new messages. I will put them into separate methods so that redundancy is reduced.

Yes I will work on this.

Add Codacy badge to the repository

@zamhaq You can integrate the codacy badge to the Project readme as you have the write access to the repository.

Keyboard shortcut for popup.

I'm submitting a ... (check one with "x")

• bug report
• [x ] feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/susi_server

Current behavior:

n.a
Expected behavior:

A keyboard keys combinations for opening the popup
This is similar to the work in susi_firefoxbot.

Would you like to work on the issue?
Yes

Fixing UI issues

As we can see some fixing needs to be taken care of.

Would you like to work on this one?
Yes

Can we replace the settings icon menu with a drop down or side menu

The main purpose of making the susi chrome bot was that the user doesn't have to leave his work to use SUSI .But having to open a seperate page really destroys the purpose.

If yes
I would like work on this issue

alerting the user if the mic is not allowed

**Actual Behaviour **

Expected Behaviour
An alert message for user to change the setting on the top.
Would you like to do it?
Yes

UI Enchancement(Scrollbar)

Its a UI enchancement now the scrollbar is really simple I would like to enchance its look and make it attractive.

@zamhaq @gabru-md Whats your opinion?

Travis build badge is not in the Readme

Yes, I will make a relevant PR soon.

Clean up the repo and add a GIF

move all the Extension related data inside a src folder.
Leaving only README and LICENSE outside it.

And add a GIF to the README demonstrating the working of extension.

@ms10398 @zamhaq I will work on this only if you guys agree to it as an enhancement.
Thanks!

Add permissions to manifest.json

Add proper permissions to use jquery, ajax and susi api in chrome extension.

YES I want to work on it.

fixing UI bug

This is basically small bug regarding size of input text by increasing its size.

Would you want to work on this issue?
Yes

Add .eslintrc file

For javascript linting purposes.

Would you like to work in this issue?
Yes

Autofocus on textarea when extension pops up

Actual Behaviour

When extension is clicked focus is not on the textarea

Expected Behaviour

When extension is clicked focus should be on the textarea

Yes I would like to work on it and make a relevant PR soon.

UI Improvement

Input box can be adjusted to fill the white space available.
@zamhaq @gabru-md
Whats your opinion

Screenshot of the issue

Yes I would like to work on the issue if this change is required

Uneven spaces between mic, textbox and send icon

Yes I would like to work on it and will make relevant PR soon.

Fix the settings icon displayed on the header.

Fix the background of the settings icon and move it to the extreme left on the header.

Clear all button

Current Behaviour:
There is no option to clear the chats

Expected Behaviour:
There should be clear option in the chat

I want to work on this issue

Mic is not working

On clicking mic, there is no response, "SPEAK NOW" comes on top and vanishes quickly.
It is not registering our chat using mic.

Would you like to work on it?
Yes.

Failed to load extension

Chrome is failing to load the unpacked extension.

Yes I would like to work on this.

Add different icon sizes in manifest.json

This is to ensure susi.ai icon'size on the toolbar is compatible with the platform used.
I had done similar type in fossasia/susi_firefoxbot https://github.com/fossasia/susi_firefoxbot/pull/22 where I used an svg icon.
But Chrome does not show svg icon so will do something else.
Also, recommended sizes are:
https://developer.chrome.com/apps/manifest/icons .

Would you like to work on it?
Yes.

copy previous message in chat when 'up/down' key is pressed

Actual Behaviour

Nothing happens on pressing the "up" or the "down" key in chat

Expected Behaviour

On pressing the "up" key the previous message should be copied. And on pressing the "down" key, the following message should be copied.
Often the user wants to copy the previous message. This would enable the user to easily send previous messages with little or no modification to the message.

Steps to reproduce it

Open the chat, and press the "up" or "down". Nothing happens.

Would you like to work on the issue?

Yes, I would like to work on this feature.

Susi Messages dont follow the Susi Chat color in dark mode

Screenshot of issue-

Color of Susi Message and Extensions Susi message is different

Yes I would like to work on it and make a relevant PR soon.

Add issue and pull request template

Following other FOSSAsia project templates are needed.

Would you like to work in this one?
Yes

Make chat data persistent

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/susi_server

Current behavior:
Once the browser action is closed all chat data is lost.

Expected behavior:
Chat data should be preserved unless user closes it.

Yes. I would work on this.

Add some information on the new tab that opens

Actual Behaviour :-

When the new tab opens on clicking settings, it is completely blank.

Expected Behaviour :-

Add some information into the page regarding microphone access.

Yes, I would work on this.

integrating SUSI API

Integrate SUSI in this chromebot using susi api.
So that a decent platform can be established for further refurbishments in UI and UX.

I would like to work on this.

Theme Change error

Expected Behaviour
Changing the theme causes the previous messages to remain in same way.

Actual Behaviour
It must be changed and should adapt to the changed theme.

Yes I will work on this.

Theme Preferences

Feature Request

There should be light and dark theme supported as Susi Chat.

Would you like to work on it?

Yes I would like to work on it.

Add SUSI Chat styled send button

Remove the ordinary Submit button and replace it with SUSI style send button.

Yes I'll be working on it and sending a PR soon

Disable the mic input until the first event completely ends.

Actual Behaviour :-
The mic input can be pressed several times which will lead to multiple events being registered.

Expected Behaviour :-
Disable the mic input until the first speech recognition event completely ends.

Add Travis and Codacy checks

Please add Travis and Codacy.

Auto scrolling when text overflows

Actual behaviour
When messages overflow the div that contains messages then scroll is added, but it does not scrolls automatically.
Expected behaviour
Scroll automatically when messages overflow.

Fixing arrows which are always visible

Actual Behavior

Scrolling arrows are always visible even when text is not overflowing

Expected Behaviour

Arrows should be visible only when there is overflowing text.

Yes I would like to work on it

Display error message when unable to connect to susi api

Actual Behaviour
When message is sent, if susi_chromebot fails to connect to SUSI api then SUSI does not responds anything and stay idle.

Expected Behaviour
Show "could not connect" message to user.

Would you like to work on this ?
Yes.

JSLint Errors in script.js file

Script.js file has several JSLint Errors

Yes I would like to work on this and make a relevant PR soon.

Fix the width of the extension window it fills the whole screen

Screenshots are attached below:-

Incoroporate chat.susi.ai theme into susi_chromebot

Currently the susi_chromebot has a very basic look.

It would be great if it looks something similar to https://chat.susi.ai/.

The UI improvements would include the following changes :-

1. Colors from chat.susi.ai
2. fonts similar to as used in chat.susi.ai
3. speech bubbles for sent messages.

Yes I would like to work on it.

Susi styled side menu and navbar

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/susi_server

Current behavior:
A settings icon is used

Expected behavior:
Replacing setting icon with navbar

Your operating system
Mac OS

Would you like to work on the issue?
Yes , I would like to work on this issue.

add loading animation

Display a loading animation like chat.susi.ai while message is being generated.

Yes I would like to work on this

Add animation to mic button

Add some animation to the mic button when user is speaking.

Yes. I would work on this.

UI improvement

@zamhaq @gabru-md Time of the message being sent can be shown with the message.
Whats your thought
Yes I would like to work on it if you approve this improvement

Replace the gif in readme with the lastest gif

The Gif in the readme is of the old extension so it should be replaced with the latest extension

Yes I would like to work on it and make a relevant PR soon.

Add google font link for Lato font

The style.css file has body font set to Lato but it is not imported anywhere in popup.html.
Add google link for Lato font.
Thanks.

Leading spaces

Leading space in chat :

How to reproduce it?
Follow the steps in readme to make SUSI work, then start chatting.

I would like to work on it, if thats an issue.
A little guide where to look for will be really helpful?
Thanks.
I am new to Javascript.