Issue: UI changes for JB Manager frontend with respect to channels

[Lekhanrao]

Ticket Contents

To modify the existing UI page (JB Manager frontend) to allow for users to provide data for all channels (whatsapp/telegram/custom).

Goals

Modify the JB Manager frontend UI page to allow inputs for different channels.

Expected Outcome

The users should be able to select the channel that they want to install the bot in and provide appropriate keys.

Acceptance Criteria

1. Create three different channels input components (Whatsapp, Telegram, custom) with required keys input boxes.
2. Successfully install the bot by running bash scripts/run.sh flow command after providing the input for a channel.

Implementation Details

The current implementation only allows users to provide whatsapp channel related keys. Create different UI components to allow for user input for different channels and integrate it with the endpoints in api service.

Mockups/Wireframes

### Product Name Jugalbandi ### Organisation Name OpenNyAI ### Domain Legal ### Tech Skills Needed Python, React ### Mentor(s) @Lekhanrao @KaranrajM ### Complexity Medium ### Category Frontend

[c4gt-community-support[bot]]

Hi! Important Details - These following details are helpful for contributors to effectively identify and contribute to tickets.

• Sub-Category - Please mention the sub-category if any for the ticket

Please update the ticket

[Lekhanrao]

@c4gt-community-support, What are the sub-category types and where do we update that in the Issue template?

[Ris-code]

@Lekhanrao could you please assign me this issue? I want to contribute.

[Lekhanrao]

Assigned ticket to @Ris-code

[Alekh-Srivastava]

Hey @Lekhanrao I can work with the frontend react and alter it to allow user to directly enter the keys of the platform in which user want the bot ,can I also take up the issue?

[Lekhanrao]

@Alekh-Srivastava , assigned this ticket to you as well. We'll pick the best solution. Thanks!

[Lekhanrao]

@Ris-code , any update on this please?

[Ris-code]

@Ris-code , any update on this please?

Actually I am getting some sort of error while running the docker container. I am fixing it. Will post it here if its not fixed by evening.

[Ris-code]

Here whenever I am trying to install the bot this error occurs. Whenever I click save, the request is pending. How to fix this?

[KaranrajM]

Here whenever I am trying to install the bot this error occurs. Whenever I click save, the request is pending. How to fix this?

Hi @Ris-code the error that you are facing is because of kafka queues. Please check whether kafka is running in your machine and also double check the env values and try sourcing it as well before starting the application.

[Ris-code]

Here whenever I am trying to install the bot this error occurs. Whenever I click save, the request is pending. How to fix this?

Hi @Ris-code the error that you are facing is because of kafka queues. Please check whether kafka is running in your machine and also double check the env values and try sourcing it as well before starting the application.

Actually, Kafka container has exited because it is saying create-topics. sh not found. When I saw it in the scripts directory, it was create-topic. sh was present but no create-topics. sh. So is it a name error? And I also changed the directory name from create-topic.sh to create-topics.sh but the issue remains the same.

[KaranrajM]

Here whenever I am trying to install the bot this error occurs. Whenever I click save, the request is pending. How to fix this?

Hi @Ris-code the error that you are facing is because of kafka queues. Please check whether kafka is running in your machine and also double check the env values and try sourcing it as well before starting the application.

Actually, Kafka container has exited because it is saying create-topics. sh not found. When I saw it in the scripts directory, it was create-topic. sh was present but no create-topics. sh. So is it a name error? And I also changed the directory name from create-topic.sh to create-topics.sh but the issue remains the same.

If you take a look at the kafka service configuration in docker-compose.yaml, it actually takes ./scripts/create-all-topics.sh and mounting it to /usr/bin/create-topics.sh inside the container. When running, it will try to run this file. So if the topics have already been created, can u remove the & /usr/bin/create-topics.sh from the command in docker-compose.yaml and try again?

[Ris-code]

Here whenever I am trying to install the bot this error occurs. Whenever I click save, the request is pending. How to fix this?

Hi @Ris-code the error that you are facing is because of kafka queues. Please check whether kafka is running in your machine and also double check the env values and try sourcing it as well before starting the application.

Actually, Kafka container has exited because it is saying create-topics. sh not found. When I saw it in the scripts directory, it was create-topic. sh was present but no create-topics. sh. So is it a name error? And I also changed the directory name from create-topic.sh to create-topics.sh but the issue remains the same.

If you take a look at the kafka service configuration in docker-compose.yaml, it actually takes ./scripts/create-all-topics.sh and mounting it to /usr/bin/create-topics.sh inside the container. When running, it will try to run this file. So if the topics have already been created, can u remove the & /usr/bin/create-topics.sh from the command in docker-compose.yaml and try again?

Thanks, its finally working. The bot is installed.

[Lekhanrao]

@KaranrajM , can we close this issue now?

[KaranrajM]

@KaranrajM , can we close this issue now?

No, Lekha. The issue they are facing in their local system is just fixed. No PRs have been raised for this issue and not merged yet. So we cannot close this issue.

[yashpal2104]

Can you assign this to me, I can try to solve and make a PR for it

[Lekhanrao]

@yashpal2104, Assigned ticket to you as well.

[Ris-code]

>  => ERROR [frontend internal] load metadata for docker.io/library/node:21-bookworm                                                                                1.4s 
> ------
>  > [frontend internal] load metadata for docker.io/library/node:21-bookworm:
> ------
> failed to solve: node:21-bookworm: failed to resolve source metadata for docker.io/library/node:21-bookworm: error getting credentials - err: exit status 1, out: ``   
> Running docker-compose with existing images

why is this error occuring while building frontend. How to fix this ?

[KaranrajM]

>  => ERROR [frontend internal] load metadata for docker.io/library/node:21-bookworm                                                                                1.4s 
> ------
>  > [frontend internal] load metadata for docker.io/library/node:21-bookworm:
> ------
> failed to solve: node:21-bookworm: failed to resolve source metadata for docker.io/library/node:21-bookworm: error getting credentials - err: exit status 1, out: ``   
> Running docker-compose with existing images

why is this error occuring while building frontend. How to fix this ?

Hi @Ris-code it is a docker issue. Are you still facing this?

[Ris-code]

>  => ERROR [frontend internal] load metadata for docker.io/library/node:21-bookworm                                                                                1.4s 
> ------
>  > [frontend internal] load metadata for docker.io/library/node:21-bookworm:
> ------
> failed to solve: node:21-bookworm: failed to resolve source metadata for docker.io/library/node:21-bookworm: error getting credentials - err: exit status 1, out: ``   
> Running docker-compose with existing images

why is this error occuring while building frontend. How to fix this ?

Hi @Ris-code it is a docker issue. Are you still facing this?

No, now its working fine.

[Ris-code]

These are the changes I have made to the frontend to add the channels. Do I need to make any modifications or open a PR?

[KaranrajM]

Hi @Ris-code I hope you have done the latest migration of the db tables. The screens look really good. Can you confirm whether you are able to put the right data into the jb_channel table. Also can you test some sample bot with telegram as it is easy to acquire telegram keys with BotFather after uploading the bot data? Let me know if you face any troubles. I am happy to walk you through the whole process.

[Ris-code]

Hi @Ris-code I hope you have done the latest migration of the db tables. The screens look really good. Can you confirm whether you are able to put the right data into the jb_channel table. Also can you test some sample bot with telegram as it is easy to acquire telegram keys with BotFather after uploading the bot data? Let me know if you face any troubles. I am happy to walk you through the whole process.

No, not done yet. Will do it today.

[Ris-code]

Hi @Ris-code I hope you have done the latest migration of the db tables. The screens look really good. Can you confirm whether you are able to put the right data into the jb_channel table. Also can you test some sample bot with telegram as it is easy to acquire telegram keys with BotFather after uploading the bot data? Let me know if you face any troubles. I am happy to walk you through the whole process.

No, not done yet. Will do it today.

so for this do I need to make changes in the backend or test the key in any other python file ?

[KaranrajM]

Hi @Ris-code I hope you have done the latest migration of the db tables. The screens look really good. Can you confirm whether you are able to put the right data into the jb_channel table. Also can you test some sample bot with telegram as it is easy to acquire telegram keys with BotFather after uploading the bot data? Let me know if you face any troubles. I am happy to walk you through the whole process.

No, not done yet. Will do it today.

so for this do I need to make changes in the backend or test the key in any other python file ?

yes you can setup the backend as shown in the quickstart tutorial and run the services along with frontend. Once they are up and running, please provide input for telegram keys in frontend along with the bot installation which should store the data in jb_channel and jb_bot tables in postgres database, do verify it once. Then you can set the webhook to telegram by sending the callback url of api. Finally, you can try testing the bot in telegram

[shreypandey]

@KaranrajM Instead of making multiple UI components, can we make one unified UI which follows the bot and channel convention as well. Please refer #152 for this.

[KaranrajM]

Hi @Ris-code can you please check out the mocks present in issue #152 and follow the styling convention?

[Ris-code]

Hi @Ris-code can you please check out the mocks present in issue #152 and follow the styling convention?

Ok, I will follow the same convention while building.

[Lekhanrao]

@Ris-code, Is there an update on this please?