App Design: Show Image and Description on bot cards

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to view a list of all my bots.

Description

The bots view is as shown below:

The page needs to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.
The height and width of the components should be the same (same goes for the story image). The bot cards should also have a "space-between" alignment to ensure they are evenly distributed with a maximum of 3 on each line.

The description should only span 3 lines, if it's too long limit the number of characters and add "...." to the end of the last line.

Technical Analysis

This feature can be found in libs/features/convs-mgr/stories/home.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

Bot Overview Component

When a user logs in, they are sent to the bot builder homepage. Here they can view all the bots they are building and go to their builder.

Quick links: Summary | Description | Template | Example | Resources

Summary

As a user, I wish to view my bots in a user friendly and nicely structured way even if I have many.

Description

Right now, the bot overview looks as follows:

In this screen I can (1) view all active bots, (2) navigate to the bot-builder of one of my bots and (3) create a new bot (and navigate straight to the bot-builder). T

This covers the functionality of this screen, yet could be a bit nicer looking and more user friendly.
We therefore prepared the following design:

Your assignment, make it look like that picture :) Ignore the search bar for now as that is in another issue (TODO Link).

Technical Analysis

The feature we're editing is located in libs/features/convs-mgr/home. Currently the functionality is split across the home page and the story-list-item component.

For this feature, you'll have to :

1. Extend the "Story" interface model to include a description and image field
2. Implement the design by extending and modifying the components in the feature package (ref _libs/features/convs-mgr/home_)
2.1. When doing so, you'll need to create some new child-components of story-list-item
2.2. You will also want to create a new component story-list and move the state layer touchpoint their (= the import of StoriesStore). Remove that import from the home component.
3. Use reusable css variables

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the image
2. The component is well structured following the Technical Analysis

Resources:

• Mockups: [Here goes a URL to or the name of the mockup(s) in XD];

Base architecture for bot control

As a user, I want the scenarios I develop with the story editor to be controlled by a WhatsApp bot.

Quick links: Summary | Description | Considerations | Acceptance Criteria

Summary

To allow users to render their stories as (WhatsApp) bots, we need to develop a backend infrastructure which can take the input of the user i.e. the bot scenario, and render it as a chat conversation.

A clean architecture needs to be developed which allows:

• The ability to register a bot to a channel endpoint (WhatsApp, Messenger, Telegram, ... - Start with whatsapp)

• The bot to register a starting point (the first StoryBlock) of the conversation when a user engages a conversation over a specific channel, i.e. the ability to link a "Story" to a channel.

• The bot to interpret a StoryBlock and communicate it to the user. Key here is that a framework is developed which allows for the easy and clean development of new types of blocks (and how they should be interpreted by the bot).

• The bot to be able to remember where a user is in the conversation and pick up from there based on the next user input.

• Ability for operators to directly communicate with users (pause the bot).

• Ability for operators to send a user to specific story/block.

Description

A user story looks as follows:

From a model's perspective, the whole conversation can be considered a state machine.

The whole page represents a story which can be linked to a page. This is captured in the Story Model.

The story model will need to either: - extended with an "entryPoint" which is a FK to the first block OR;

• a convention needs to be created where the first connection origin on the editor has the same ID as the story. Then, stories always start with the fictive block where Block ID = Story ID.

The bot needs to be able to interpret the directional flow of the different types of StoryBlocks. The directional flow is laid out in the form of "connections".

Some story blocks to consider:

**QuestionBlock**
Provides different options to the user in the form of whatsapp buttons. Depending on the answer/input of the user, can route to the next block and provide the correct output.

Considerations

• State machines can endlessly loop. This poses a severe danger given the serverless architecture on which we run things. A validation of state machines needs to be incorporated which avoids endless loops. This is not a complete solution, as due to the halting problem we can never proof that there are no loops within a design beyond the basic graph layout validation (Graph layout validation still necessary!!). Therefore, the bot needs to have a counter which halts the conversation after 50 messages from the bot to the user without an input in between.

• In case the block has no output and the user provides a new input, have a default way of handling these holes in the stories.

Acceptance Criteria

1. A basic architecture for channels is implemented, with whatsapp being the first channel implemented on top of the abstract architecture. At least, it should be possible to send standard message and question blocks over whatsapp.
2. The channels have a clean extensibility for later block types to
3. Strict seperation between the bot interpretation and the channels
4. Clean and straightforward project structure
5. Decent documentation on how to develop new blocks and integrate new channels
6. A bot can be loaded onto a channel (i.e. whatsapp)
7. State machine validation is in place to protect against loops. This is baked into the base layer infrastructure so channel-agnostic.
8. There is a way to handle defaults

Tips

• Channel integration can be powered by the GOF Template pattern
• Same for bot interpretation.
• Some sort of polymorph design with a factory needs to be developed for interpretation of the different blocks.
• An event-driven user cursor tracks the position of the user. Use event versioning to track the latest position of the user and never delete events (so don't update a single user-position record but take an event-driven approach)

Question: buttons block - Output

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to send a question to a user and provide some options

Description

The question (buttons) block is used to send a simple question to the user and provide some options they can choose from, it has the following features:

1. A header (Inherited from the block component)
2. One input field where the user can type in their question.
3. A list of options presented to the user

Currently the question (buttons) block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, add option and rendering of the block.

Image Block - Output

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to add images to my stories

Description

The Image block is used to send a simple image to the user, it has the following features:

1. A header (Inherited from the block component)
2. An input field where the user can type a caption for the image (optional).
3. An input field that contains the link to the image (online url) - Use AngularFireStorage to save file on Storage

Currently the Image block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, upload image and rendering of the block.

Create a new Bot dialog

When a user logs in, they are navigated to the application homepage (Dashboard). Here they can view an analysis of all their bots and all the bots they are building and go to their builder.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I need an interface that provides a button which enables me to create a new bot in my bots section by providing a name and a description.

Description

Please finish #24 first before attempting this.

The button need to appear as shown in this design:

The create new bot modal needs to appear as shown in this design:

Clicking the button opens the dialog above.

On this dialog I can :

1. Enter the name of my new bot.
2. Enter the description of my new bot.
3. Click cancel to abort the journey by closing the dialog.

Your assignment is to create a button that opens the modal and a modal that contains the name and description fields.

Technical Analysis

You're adding this feature in libs/features/convs-mgr/home. Currently the functionality is split across the home page and the story-list-item component.

For this feature you'll have to:

1. Create the button in the home-page of the lib above.
2. Create a modals folder in libs/features/convs-mgr/home/src/lib.
3. Generate a create-bot-modal component in the modals folder.
4. Edit the component by including the input fields and buttons.
5. Create an openDialog function in the home-page that opens the dialog.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.

Depends on #13 !

Summary

When a user clicks copy on the side menu of a block, a new block needs to be spawned on the editor with exactly the same fields as the originating block

Technical analysis

Use deepClone of lodash to copy the block data, to avoid the two block pointers pointing to the same adress

Acceptance criteria

• Upon saving and reloading, the new block is there with its own configuration

Semi-Collapsible SideNav

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to view the side navigation

Description

The current sidenav collapses completely when a user clicks on the menu icon, this behaviour should change and instead minimize the sidenav to only shoe the nav icons as shown below:

When sidenav is fully active (show text and icons) To be left as is (do not edit):

When sidenav is collapsed (show only icons):

Your assignment is to redesign the component to appear as above.

Please take note of the sidenav icons

Technical Analysis

This feature can be found in libs/elements/layout/page-convl

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e clicks and nav.

Delete a Bot

NOTE: this feature is dependent on #102, please complete that issue first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to delete bots that I no longer need.

Description

Currently, users are only able to create the bots but once they are created they can't Delete any of their bots. To enable this feature, we'll need to add a delete operation on the bot cards that is accessed through a delete dialog. Selecting "Delete Bot" removes the bot from the application and selecting "Cancel" closes the dialog.

The design for this feature is as shown below:

The Dialog needs to appear and function as described above.

On the update dialog I can:

1. Delete my bot.
2. Cancel the delete operation.

Your assignment is to create the dialog to enable this feature.

Technical Analysis

This feature can be added in libs/features/convs-mgr/home/modals

For this feature you'll have to:

1. Create the modal described above.
2. Write a function to remove the bot from the application via the story store. 

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.
3. All functions of the form work seamlessly.

User stories

Login and registration are a key feature of the application. Though already possible, the design is outdated and could be better.

Quick links: Summary | Description | Technical Description | Resources

Summary

As a user, I want to login to the application so that I can use it.
As a user, I want to create an account on the application so I can start to use it.

Description

The design looks as follows:

Technical description

Two tabs differentiate between the login and register functionality. The pages and components are all located in features/app/auth/login.

The code should keep the current multi-language implementation.

Acceptance Criteria

As the authentication and authorisation flow are already decently implemented, the developer should focus on UI only. Some components will still need to be re-arranged. As much as possible, components should be re-used over duplication.

Resources:

• Mockups: [Here goes a URL to or the name of the mockup(s) in XD];

Describe the bug
Some icons are missing

• Search icon
• Bot menu icon

You can also fix any other icons in the ui that might not be rendered properly.

Screenshots

Currently the home page looks like this:

It should be:

This plan captures our work in August. This is a 4-week iteration.

EndGame

• August 22, 2022: Endgame begins
• August 31, 2022: Endgame done

Plan Items

Issues

• [] 🏃 [Feature] Add an image upload to the bot overview #26
• [] 🏃 [Application Design] Create a new Bot dialog #25 @Daniel-darnell

Create the Block components list

When a user navigates to the bot builder page, they can view a list of block components they can use to build their bot on the bot builder viewport.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a menu that contains the different bot block components I can use to build my bot.

Description

Please finish #24 first before attempting this.

The bot builder page block components list appears as shown below currently:

The page does not contain an interface for selecting different types of bot block components that can be used to build the bots. The page has been improved to accommodate this features as shown below:

The menu list needs to appear as shown in the design above.

On the block menu list I can:

1. View a list of block components.
2. Select a block component by clicking on it.
3. Filter the list using a search-box to quickly find a block (Leave this out as it's implemented in another feature).

Your assignment is to create the block menu list with the buttons for all the block elements.

Technical Analysis

This feature can be found in libs/features/convs-mgr/stories/blocks/library/main.

For this feature you'll have to:

1. Generate the block components in the components folder of the library above.
2. Create the interfaces for the block components in (@app/model/convs-mgr/stories/blocks/messaging).

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.

Create a Bot Choose file Input

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to add an image, name and description of my bots when creating them.

Description

Currently, users are able to create new bots and add an image to it but the design is not user friendly. The Image should also only be saved when the user clicks the create button. This ensures we do not upload images incase the user cancels the creation of the bot.

The current design for this feature is as shown below:

The Modal needs to appear as shown below when an image has been uploaded:

The Modal needs to appear as shown below when no image has been uploaded:

The Dialog needs to appear and function as described above.

On the update dialog I can:

1. Attach an image when creating the bot
2. Add my bot name.
3. Add my bot description.

Your assignment is to redesign the modal to appear as shown, make sure the modal height is correct too to avoid overflow issues.

Technical Analysis

This feature can be found in libs/features/convs-mgr/home/modals/create-bot-modal

For this feature you'll have to:

1. Redesign the modal

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.
3. All functions of the form work seamlessly.

Add a filter for the blocks components list

NOTE: this feature is dependent on #27, please complete that issue first.

When a user navigates to the bot builder page, they can view a list of block components they can use to build their bot on the bot builder viewport.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to able to filter the menu list that contains the different bot block components for easy access of the blocks.

Description

The filter required is as shown below:

The filter needs to appear as shown in the design above.
When I type in a character or series of characters, only block components whose names' match the characters should be shown.

Your assignment is to create the input control and implement the search.

Technical Analysis

This feature can be found in libs/features/convs-mgr/stories/editor.

For this feature you'll have to:

1. Create the input field in the block components list.
2. Implement a filter that searches through all the block components in the menu list and returns those whose names match the characters in the input field.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.

Here we add info about the issues done for this specified month and points awarded (if moringa contributor ).

• 08/31 #10 1pt awarded to @LemmyMwaura PR #47
• 08/26 #20 3pts awarded to @trevin-livele PR #39

Overview

For consistency, we wish a base design template for each of the blocks. This base design is managed from the BlockComponent, from which all other blocks are loaded.

Technical analysis

• Update all the changes in the convl-block component (features/convs-mgr/stories/blocks/library/main -> components/block)

• Add blockTitle and blockIcon (type string) to the StoryBlock model

User stories

As a chatbot designer, I wish to use a control which asks a question to my users and allows them to answer via simple buttons on whatsapp. This is a design control for the new buttons control of WhatsApp Business API:

Quick links: Summary | Description | Technical Analysis | Acceptance Criteria | Resources

Summary

As a chatbot designer, I wish to use a control which asks a question to my users and allows them to answer via simple buttons on whatsapp.

Description

The control we are creating needs to be added to the chatbot designer. When a user clicks the "Question Buttons" component in the left sided control-library of the chatbot designer, a new "QuestionBlockComponent" is injected into the designer pane (right hand side).

The envisioned block looks as follows:

We differentiate different elements and child components in this design, namely

1. The message field - The question that will be asked by the bot before showing the buttons
2. An array of buttons - Each button has a source anchor which can connect with a next block.

Important is that the array of buttons can be increased and decreased in a natural way. The minimum number of options is 1, the maximum is 6.

Technical Analysis

AS THIS IMPLEMENTATION REQUIRES MULTIPLE STEPS, IT'S IMPORTANT TO WORK WITH A BASE FEATURE BRANCH AND TO BRANCH ALL SMALL CHANGES OF THE BASE FEATURE BRANCH. For example, create a branch questions-button-component which will hold the full component, then create branches off it e.g. qbc-data-model, qbc-...

1. The Data Model

Before creating a component, a data modal for the component needs to be defined. The data model acts as the language between both the chatbot designer and the chatbot. The model is required to inherit the StoryBlock interface.

Submit your proposed data model as a PR to your base branch for review.

2. The component

The component needs to be created in a new module called 'features/convs-mgr/stories/blocks/library/question-buttons'.

Create all necessary html, scss, jspl (JsPlumb annotations) & ts changes in this module. Create as much components as possible over putting all logic in a single component. Use the TextMessage component as a guide.

3. Wiring it all up

Once the component is created, wire it up in the block.component.html switch (located in 'features/convs-mgr/stories/blocks/library/main' and in the jsplumb-decorator switch (located in the same library).

Add an entry into the 'convl-blocks-library' component ( 'features/convs-mgr/stories/blocks/editor') which allows you to inject the blocks into the editor. In the story-editor-frame.model, a default model for this block-type needs to be added to make that happen.

Acceptance Criteria

1. The component should be injected into the editor on click in the library
2. The component should be well designed and fully implement the design spec.
3. The component should be able to add and remove buttons
4. The component should be able to connect buttons to next components.
5. The component should be able to save and load properly

Resources:

• Mockups: [Here goes a URL to or the name of the mockup(s) in Xd];

Question: Email block - Input Variable

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to ask for my user's email and save for later use.

Description

The question (email) block is used to inquire of the users email and save the response in a variable, it has the following features:

1. A header (Inherited from the block component)
2. One input field where the user can type in their question (default - What's your email?).
3. A variable name used to store the user response

Currently the question (email) block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library
Currently the block is called "email-message-block", rename to "email-question-block"

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, variable and rendering of the block.

Depends on #13 !

Summary

When a user clicks delete on the side menu of a block, the block needs to be deleted from the editor.

Acceptance criteria

• Upon saving and reloading, the block needs to be removed

User stories

A user story is implemented as well as it is communicated.
If the context and the goals are made clear, it will be easier for everyone to implement it, test it, refer to it…

Quick links: Summary | Description | Template | Example | Resources

Summary

On the user home page (bot dashboard), the page currently looks empty when no bots are created yet. As depicted below:

To increase my user experience, as a user I'd like to be guided by a larger and more inviting card in case I have no bots, as depicted below:

Filtering bots

NOTE: This feature depends on implementation of #20 ! Please complete that issue first.

When a user logs in, they are sent to the bot builder homepage. Here they can view all the bots they are building and go to their builder.

To manage many bots, it would be handy to have a filter functionality here.

Quick links: Summary | Description | Template | Example | Resources

Summary

As a user, I want to search my bots on name so that I can manage large number of bots.

Description

Please finish implementation of #20 first and only then do this task.
A filter field needs to be added to the component using following template:

When I type in a character or series of characters, only bots which names' match the characters should be shown.

Technical analysis

This feature requires us to dive into the state layer. We're going to use component-level state for this feature.

On our story-list component:

1. Add a small form which holds a mat-form-field and mat-input of type text. Use reactive forms only! - [Reference](https://angular.io/guide/reactive-forms).
2. **OnInit**, wire together the reactive form field and the _stories$$ using an rxjs "combineLatest".
3.  Map the values of the result (= has to be a filtered list based on the search field!) to your stories$ observable, becoming local state.

Acceptance criteria

1. Needs to meet design spec
2. State needs to be properly implemented

Describe the bug
On the user dashboard (bots list page), when clicking create bot the bots are no longer created.

To Reproduce
Steps to reproduce the behavior:

1. Go to the user dashboard

2. Click on 'New bot', you'll see the below:

PROBLEM 1 - DEFAULT NAME OF BOT SHOULD BE FILLED
A default name for the bot should be added. Create a "generate name" function in the newstory.service.ts

PROBLEM 2 - Scroll icons

The modal shows a scroll-left and scroll-right icon. Those shouldn't be there.

PROBLEM 3 - Translations
Please add translations for the modal in the app/assets/en.json and fr.json files

3. Create the bot by clicking the create button

PROBLEM 4 - Bot not added
The bot is not created. Use the newstory.service to make this happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

User stories

As part of the initial application design, which can be viewed here, a user menu where the user can manage his/her information and configuration is key to the basic user journey on the platform.

Quick links: Summary | Description | Technical Analysis | Resources

Summary

We cover the following user stories :

As a user, I want to access my information to review and manage my information at any time in my user journey through a visible user menu.

As a user, I want to be able to log out of the platform at any time in my user journey through a visible user menu.

Description

At this point, we are only covering the basic cases of the user menu.

The user menu is designed as follows:

It is placed in the top right corner of the top menu bar.

--
When hovering, background colour changes to '#fafafa'. The button's border-radius of 5 pixels should clearly be shown.

When clicked :

1. I click on user menu 
2. A dropdown appears which showcases the different options I have:
  2.1. Logout

Technical analysis

1. The User Menu

- The component should be called 'app-user-menu'
- It resides in project 'elements/layout/user-control' which exports the UserControlModule module, of which the component is a part. (use cmd 'nx generate @nrwl/angular:library elements/layout/user-control' to generate)
- Convl-Layout module to import UserControlModule
- 'app-user-menu' to be imported in 'convl-page'

- The design should be built on top of Angular Material.
- The button relies on mat-button
- The menu relies on mat-menu
]

2. The log out

- Seperate component for the logout-button inside of the menu
- Component is called 'app-logout'
- Component uses the UserService to perform the log out.

Acceptance Criteria

1. Button should be placed correctly
2. Should implement correct architectural constraints as described

Resources:

• Mockups: [Here goes a URL to or the name of the mockup(s) in XD];

Blocks List Layout

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to view a list of all available blocks.

Description

The blocks list is as shown below:

The component needs to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.
When a user hovers over a block the background color changed to the primary purple and the text and icon to white, a slight box shadow should also be applied to convey an elevation effect.

Take note of the different blocks categories.

Technical Analysis

This feature can be found in libs/features/convs-mgr/stories/editor/blocks-library.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e search and clicks.

Edit a Bot

NOTE: this feature is dependent on #102, please complete that issue first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to edit the image, name and description of my bots even after they are created.

Description

Currently, users are only able to create the bots but once they are created they can't edit any detail about their bots. To help the user achieve this we'll utilise the same dialog used for creating the bots. The Dialog will have a "Create Mode" and an "Edit Mode", On the edit mode the title changes to "Edit Bot " and the submit button changes to "Update Bot". The current bot details i.e name and description will also be autofilled on the form when the user selects the edit button on their bot menu.

The design for this feature is as shown below:

The Dialog needs to appear and function as described above.

On the update dialog I can:

1. Edit my bot name.
2. Edit my bot description.

Your assignment is to reuse the current create dialog to support this feature.

Technical Analysis

This feature can be found in libs/features/convs-mgr/home/modals/create-bot-modal

For this feature you'll have to:

1. Create a function that returns a FormGroup patched will the current bot details.
2. Utilise Angular's ng-template to switch between texts on the FrontEnd based on the Form Mode.
3. Create a function that uses the story store to update the story.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.
3. All functions of the form work seamlessly.

Application layout

When a user logs in, they are navigated to the application homepage (Dashboard). Here they can view an analysis of all their bots and all the bots they are building and go to their builder.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I wish to view a navigation pane to other features of the application and a toolbar with my user menu.

Description

The application layout at the moment looks like below:

From here I can :

1. Interact with the sidenav at the left which contains my navigation.
2. Interact with the user component which contains my user menu.
3. Interact with the application pages which contain the various features of the application.

We have prepared a new design to improve the current UI as shown below:

Your assignment, make it look like that picture. Ignore the sections filled in gray colour for now as those are in another feature.

Technical Analysis

This original page layout is located in libs/elements/layout/page-convl/src/lib/components. The functionality is spread across the different components in this library.

For this feature you'll have to:

1. Edit the convl-sidemenu component to match the new design.
2. Edit the convl-navbar component to match the new design.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the image.
2. The component is well structured following the Technical Analysis

Create the bot actions Menu

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a menu that contains the different bot actions I can use for editing and deleting my bots.

Description

The bots list appears as shown below currently:

The bot card does not contain an interface for displaying the different actions a user can perform on their bots. The card has been improved to accommodate this features as shown below:

The menu list needs to appear as shown in the design above.

On the block menu list I can:

1. Edit my bot -> clicking here opens an edit dialog.
2. Delete my bot -> opens a dialog to confirm the operation

Your assignment is to create the bot menu list with the buttons for all the operations.

Technical Analysis

This feature can be found in libs/features/convs-mgr/home/story-list-item

For this feature you'll have to:

1. Add a mat-menu on the story-list-item with the more-horiz font awesome icon.
2. Add the functions for edit and delete on the component file.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.

Block Layout and Functionality

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to see blocks I can use to create my story

Description

Every block inherits it's main layout from a source block-component, we want to change the layout of the various controls in these blocks. Every block needs to have the following base functionality:

1. Icon and name of the block
2. A copy button
3. A delete button
4. An anchor on the left side

Currently the blocks header is as shown below:

We need to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note that the blocks will have different names and icons. For the names they can be passed as an input to the block for the icons you can consider using an ng-content instead.
Also not the shape and color of the left side anchor that should be on all blocks.

Technical Analysis

This feature can be found in libs/features/stories/blocks/main

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete and rendering of the different blocks.

Describe the bug
The translations of the app sidemenu are missing. Please add them in en.json and fr.json

Image depicting the bug:

User stories

As a user, I want a multi-level and cleanly designed sidenav menu to enable me to effectively navigate the application.

Quick links: Summary | Technical description

Summary

Currently, the sidenav looks as follows:

This is not in line with the design specification, which is as follows:

Design specification

Technical description

There are different elements to consider when implementing this design:

1. Link hierarchy

Links can be structured hierarchically.

In the above case, create a parent link "Active bots". When child-links are navigated too (e.g. www.app.com/bots/child-link, bots being the parent link), the parent link expands and shows the children.

This dynamic showing of submenus can be done using "routerLinkActive" as in the code below:

<div [routerLink]="['/org', orgId, 'flows', flowId]"  routerLinkActive #rlaHome="routerLinkActive"
         mat-list-item class="header" 
        [class.active]="rlaHome.isActive" [class.hov]="!rlaHome.isActive" fxLayout="column">

In the above case we create a template variable #rlaHome via the statement #rlaHome="routerLinkActive"

We can then use that to dynamically toggle a submenu by querying the template variable with *ngIf:

<div class="category-children" *ngIf="rlaHome.isActive" fxLayout="column" fxLayoutGap="5px">
  <div [routerLink]="['/org', orgId, 'flows', flowId]"
           mat-list-item class="child-header child-1">
     Dashboard
  </div>
</div>

2. Active links

Active links require a specific colour and design, as depicted below:

Use template variables as shown below to make this happen: [class.active]="rlaHome.isActive"

3. Translations

Please make sure to provide standard translations for each of the menu items in the design. Use en.json and fr.json for this

Audio Block - Output

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to send audio (mp3) to my users.

Description

The audio block is used to send a simple audio files to the user, it has the following features:

1. A header (Inherited from the block component)
2. An input field that contains the link to the audio (online url) - Use AngularFireStorage to save file on Storage

Currently the Audio block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, upload image and rendering of the block.

Describe the bug
In the dashboard page, the bot image is not matching the design.

The current design is as follows:

The following are missing:

1. Bot images should have an image placeholder. Now it just shows an empty text (Tip: use https://place-hold.it/ as image source for now e.g. https://place-hold.it/300x500 [but put correct dimensions!])
2. The label (6 bots) is a constant. Remove it for now)
3. When hovering over the vertical '...', the cursor(mouse) should look clickable

App Design: Sign up Page

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to Sign up to use the application with my credentials or use a google sign up.

Description

The current sign up page is as shown below:

The page needs to be updated to appear as shown below:

Your assignment is to redesign the page to appear as above.

When a user clicks on the "Create Account" Button, the text should change to "Please wait..." with a material spinner next to it. The text fields on the page should also be disabled when saving the user.

Technical Analysis

This feature can be found in libs/features/app/auth/register.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

Location Block - Output

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to send maps locations to my users.

Description

The location block is used to send map location to the user and provide some context for the pin i.e name and address of an office building etc, it has the following features:

1. A header (Inherited from the block component)
2. A search input field that is used to add a geopoint on the map (Uses google places API with @agm/core)
3. A name input field where the user can type the name of the location (optional).
4. An address input field where the user can enter a custom address (optional)

Currently the location block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features, the API's needed for the map and search field have already been added but the search field dropdown is not working as expected. Find out why.
Add a google Maps API key you can get from your cloud console to use the map features.

Note: The map needs to provide a latitude and longitude value for the area the user selected.

Technical Analysis

This feature can be found in libs/features/stories/blocks/library

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, map feature and rendering of the block.

Persistence of Bot Editor Connections

Right now, only the bot blocks are stored & can be reloaded on the editor. When the editor is reloaded, the connections are gone. For the editor to be useful as a bot-interpretation engine, the connections are a key item to store as well.

Objective: Story and load connections within the bot editor

--
This feature requires either an extension of the StoryBlock model, or a seperate subcollection of the Story which can be packed together with the StoryBlocks to come to an editor model. Reference the JsPlumb documentation and stave your design choice.

StoryEditor component state is managed by the StoryEditorFrame class located in features/convs-mgr/stories/editor

Question: name block - Input Variable

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to ask for my user's name and save for later use.

Description

The question (name) block is used to inquire of the users name and save the response in a variable, it has the following features:

1. A header (Inherited from the block component)
2. One input field where the user can type in their question (default - What's your name?).
3. A variable name used to store the user response

Currently the question (name) block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library
Currently the block is called "name-message-block", rename to "name-question-block"

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, variable and rendering of the block.

Question: Phone block - Input Variable

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to ask for my user's phone number and save for later use.

Description

The question (phone) block is used to inquire of the users phone number and save the response in a variable, it has the following features:

1. A header (Inherited from the block component)
2. One input field where the user can type in their question (default - What's your phone number?).
3. A variable name used to store the user response

Currently the question (phone) block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library
Currently the block is called "phone-message-block", rename to "phone-question-block"

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete, variable and rendering of the block.

Message Block - Output

Note this issue is dependent on #143, please complete that one first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a block I can use to send a message to the user

Description

The message block is used to send a simple message to the user, it has the following features:

1. A header (Inherited from the block component)
2. One input field where the user can type in their message.

Currently the message block is as shown below:

We need it to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note of all the design features

Technical Analysis

This feature can be found in libs/features/stories/blocks/library

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete and rendering of the block.

Edit a Bot with image file

NOTE: this feature is dependent on #103, please complete that issue first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to edit the image, name and description of my bots even after they are created.

Description

Currently, users are only able to create the bots but once they are created they can't edit any detail about their bots. To help the user achieve this we'll utilise the same dialog used for creating the bots. The Dialog will have a "Create Mode" and an "Edit Mode", On the edit mode the title changes to "Edit Bot " and the submit button changes to "Update Bot". The current bot details i.e name and description will also be autofilled on the form when the user selects the edit button on their bot menu.

The design for this feature is as shown below:

If the bot has no image:

If the bot already had an image:

The Dialog needs to appear and function as described above.

On the update dialog I can:

1. Edit my bot Image
2. Edit my bot name.
3. Edit my bot description.

Your assignment is to redesign the current dialog. If the bot had a previous image when a new one is uploaded the previous one should be deleted from storage first.

Technical Analysis

This feature can be found in libs/features/convs-mgr/home/modals/create-bot-modal

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is well structured following the Technical Analysis.
3. All functions of the form work seamlessly.

Describe the bug

When going to the bot/story-editor, the translations are missing of the different block types. Please add them in en.json and fr.json

Please also translate the page title

Bot image

This feature allows the user to identify his/her bots with an image. The feature has #25 as a prerequisite.

Feature

This PR has a very limited description intentionally as it requires some creative input. Please add an image upload input to the "Create Bot" dialog form. Once uploaded, show the image on the correct card.

To implement this PR, you'll have to:

1. Integrate Google Cloud Storage for Firebase in a clean way. Develop a package _state/util/storage/main_ in which to add your document service.
2. Propose a data structure which links the correct image to the correct card.
3. Develop a seperate component for the image in the card, and propose a way to load the image from the new component

Remove deleted connections from the database

NOTE: This feature depends on #29, ensure you understand how the state is handled there first.

When a user navigates to the bot builder page, they can view a list of block components they can use to build their bot on the bot builder viewport.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to be able to permanently delete connections connecting my blocks.

Description

The connections information are stored in a story sub-collection [connections], please refer to the StoryBlocksConnections store in state. Every time a new connection is created/updated the data is saved as a document in the collection above. The important information the document contains are :

1. id(connection-id).
2. sourceId(identifies option where the connection is from).
3. targetId(identifies the block where the connection is linked to).

Your assignment is to check for all the deleted connections when saving the story and make sure they are removed from the connections collection.

Technical Analysis

This feature can be found in :

• libs/features/convs-mgr/stories/editor/model
• libs/state/convs-mgr/stories/block-connections

For this feature you'll have to:

1. Understand the state layer of the editor frame.
2. Implement a function that determines which connections were deleted.
3. Use the story connections store to remove the documents from the database.

Acceptance Criteria

1. When rendered the deleted connections are not present in the view.

Styling story-editor connectors

Implement the connectors and endpoints design spec on the StoryEditor.

Description

Block endpoints and connectors should look like this:

Technical Description

The connectors and endpoints do not live in Angular but live in JsPlumb. They are drawn on top of the Angular components. Therefore, we need to refer to the JsPlumb documentation and decorate the connectors with classes which can be configured from CSS.

Refer to the following documentation:

• Using the FlowChart connector

https://docs.jsplumbtoolkit.com/community-2.x/current/articles/connectors.html

• Styling of JsPlumb using CSS

https://docs.jsplumbtoolkit.com/community/lib/connectivity
https://docs.jsplumbtoolkit.com/community/lib/endpoints

App Design: Log In Page

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to Log In to the application with my credentials or use a google log In.

Description

The current Log In page is as shown below:

The page needs to be updated to appear as shown below:

Your assignment is to redesign the page to appear as above.
When a user clicks on the "Log In" Button, the text should change to "Please wait..." with a material spinner next to it. The text fields on the page should also be disabled when logging in the user.

Technical Analysis

This feature can be found in libs/features/app/auth/login.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

Add coding style guide in the docs section as a guide document that has information about various coding standards to be followed when writing code.

TODO

• Add TypeScript style guide
• Add Angular style guide
• Document Instructions of using global scss variables

Bug alert

On the user dashboard (bot list) page, the search filter is not in line with the specification which is as follows:

(This is what the page should like!)

Instead, the design looks like this:

There are the following obvious problems with this design, which need to be resolved:

1. White background (rectangle behind) of the search box container should not be there
2. Colour of the buttons is off (yellow instead of orange)
3. Positioning of the text and icon within the container is off (icon/text too small & height of search field to high)
4. The form field should have a shadow and not a gray border as is now the case
5. Positioning of the button
6. Positioning of the text ttle

Editor Background

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a suitable background for my editor

Description

The current editor background is a graph pattern.

Your assignment is to apply a new background as shown below:

The background can be found here

Technical Analysis

This feature can be found in libs/features/editor

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

User stories

As a user, I want to install the app on my desktop or phone for easy access.
As a user, I wish to easily retrieve the correct application tab in my browser via a favicon.

Technical analysis

To make a web app installable, we can turn it into a PWA. Please follow the Angular guide on PWAs and research how this can work in an NX repository (so using the NX instead of NG CLI).

Use the images in the zip folder below for the PWA & favicon icons:

ele-icons.zip

Describe the bug

When clicking a bot on the bot dashboard, I should navigate to the bot.

Currently, only when clicking the "Open bot" button, I navigate to the bot. This navigation should happen when clicking the whole bot, except when clicking the vertical '...'. Clicking the ... should open a user-menu with options