[chat] Implement unread messages counter

Blaumaus commented 1 year ago

Currently the counter is always displayed as 1 if cookie chatwasopened is not set (i.e. user never opened the chat or opened and 20 days passed).

If opened, the chat displays the message Hi, how can I help?, this is the correct behaviour and the counter 1 should be shown.

But if user writes something into this chat, leaves the page and received a reply later - the counter does not represent newly received messages (i.e. if I reply to the user in the chat 2 times - there won't be a 2 badge displayed).

When chat gets opened - there's a websocket request happening and in case there are unread messages - they're getting received via this WS connection. I need you to get the unread messages via this connections, and if there are:

no messages - display the re-open chat button (as it currently does).
messages - you should display the correct message counter like on the following screenshot

BONUS POINTS for displaying the correct counter on the 2nd screenshot instead.

Pranavvks commented 1 year ago

Hi @Blaumaus , I would like to work on this issue.

Pranavvks commented 1 year ago

Hey @kruzhambus. While setting up the development environment for swetrix-api, I have been running into an issue resolving ioredis dependency. However, I'm not sure that this could be the only reason to it.

Do you recommend any specific version of node to be used for the project ?. I have also attached the debug log.

Also, the configuration documentation website (for selfhosting) is not accessible. swetrix-api-debug-0.log

Cheers ✌️

kruzhambus commented 1 year ago

Try npm i -f and watch CONTRIBUTIONS.md

Pranavvks commented 1 year ago

Try npm i -f and watch CONTRIBUTIONS.md

It worked , but for the setup of environment variables the webpage mentioned in the contributions file is not reachable.

Pranavvks commented 1 year ago

Hi @kruzhambus. The link given within the CONTRIBUTIONS.md for environment variables configuration seems to be broken. However I was able to find it , I believe this is the one we must refer to : https://docs.swetrix.com/selfhosting/configuring.

I was able to get the swetrix-api and swetrix-fe up and running. However, it appears that the process of creating a dummy account within the development environment (swetrix-fe) is not concluding successfully.

Could you kindly assist me in setting up the development environment or provide any helpful links for the same ?.

kruzhambus commented 1 year ago

Hi @kruzhambus. The link given within the CONTRIBUTIONS.md for environment variables configuration seems to be broken. However I was able to find it , I believe this is the one we must refer to : https://docs.swetrix.com/selfhosting/configuring.

I was able to get the swetrix-api and swetrix-fe up and running. However, it appears that the process of creating a dummy account within the development environment (swetrix-fe) is not concluding successfully.

Could you kindly assist me in setting up the development environment or provide any helpful links for the same ?.

so sorry I left the wrong link. If you want to run our project for development, then this is what you need https://github.com/Swetrix/swetrix-api/blob/main/CONTRIBUTING.MD

Pranavvks commented 1 year ago

No worries @kruzhambus 🙂. I was in fact referring to the same (https://github.com/Swetrix/swetrix-api/blob/main/CONTRIBUTING.MD). Within the same guidelines under the set up envrionment variables (part 3) of the CONTRIBUTING.MD file the configuration link is broken. I have attached the screenshot below. I guess it hasn't been updated. I found the link mentioned previously from a search.

Further what should I do to resolve the earlier mentioned issue of not being able to create an account within the development environment ?.

kruzhambus commented 1 year ago

how did you run dev Swetrix on your machine (was it docker or just npm run start:dev)? which error does the backend throw when you try to sign up locally? @Pranavvks

Pranavvks commented 1 year ago

Hi @kruzhambus. I am running the swetrix-api using docker followed by the npm run start:dev command. Currently the backend throws an error:

[ioredis] Unhandled error event: Error: getaddrinfo ENOTFOUND redis at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:26)

This happens after the logger shows the Nestjs application has started successfully.

yevheniikulisidi commented 1 year ago

Hello there, @Pranavvks! I wanted to make sure you're aware of a crucial step you might have overlooked: setting up environment variables. This step is essential for the process. Don't forget to give it a look!

Pranavvks commented 1 year ago

Hi @yevheniikulisidi. Yup, I did follow the environment configuration setup as per your guidelines listed in this webpage : https://docs.swetrix.com/selfhosting/configuring. Upon your comment, I also made a check confirming whether my env configuration matches your spec and there seems to be no problem.

For your reference I have attached the env configuration : Env.txt

yevheniikulisidi commented 1 year ago

I noticed that you've made changes to the environment variables like REDIS_HOST, REDIS_PASSWORD, and CLICKHOUSE_HOST, @Pranavvks. However, I'd recommend avoiding these changes and sticking to the original specifications outlined in the .env.example file. This approach would be more preferable.

Pranavvks commented 1 year ago

Thank you! @yevheniikulisidi.

I was able to resolve that issue after making the changes to the env conifguration. However I am still not able to create an account within the dev environment. Nothing happens in the sign up process , it remains in an indefinite cycle.

Additionaly, there are no error messages within the console.

yevheniikulisidi commented 1 year ago

To create an account, @Pranavvks, you can utilize the API by sending a direct request. Here's how:

Navigate to the Swagger documentation page: Swagger Documentation - AuthController_register.
Click on the "Try it out" button.
Then, click on "Execute".

Once you've completed these steps, you can try logging into the newly created account through the Swetrix FE interface.

Pranavvks commented 1 year ago

@yevheniikulisidi I tried out the steps mentioned, but still not able to log in through the Swetrix FE interface.

The account gets created via the swagger ui. However using the same account credentials I'm not able to log in. Currently I'm receiving the following error in the frontend :

ErrorResponse { status: 405, statusText: 'Method Not Allowed', internal: true, data: 'Error: You made a POST request to "/v1/auth/login" but did not provide an action for route "routes/$", so there is no way to handle the request.', error: Error: You made a POST request to "/v1/auth/login" but did not provide an action for route "routes/$", so there is no way to handle the request. at getInternalRouterError (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:4132:5) at submit (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:2816:19) at queryImpl (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:2764:28) at Object.query (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:2650:24) at handleDocumentRequestRR (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/server-runtime/dist/server.js:170:35) at requestHandler (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/server-runtime/dist/server.js:61:24) at /Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/express/dist/server.js:39:28 at processTicksAndRejections (node:internal/process/task_queues:96:5) }

Blaumaus commented 1 year ago

@yevheniikulisidi I tried out the steps mentioned, but still not able to log in through the Swetrix FE interface.

The account gets created via the swagger ui. However using the same account credentials I'm not able to log in. Currently I'm receiving the following error in the frontend :

ErrorResponse { status: 405, statusText: 'Method Not Allowed', internal: true, data: 'Error: You made a POST request to "/v1/auth/login" but did not provide an action for route "routes/$", so there is no way to handle the request.', error: Error: You made a POST request to "/v1/auth/login" but did not provide an action for route "routes/$", so there is no way to handle the request. at getInternalRouterError (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:4132:5) at submit (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:2816:19) at queryImpl (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:2764:28) at Object.query (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/router/router.ts:2650:24) at handleDocumentRequestRR (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/server-runtime/dist/server.js:170:35) at requestHandler (/Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/server-runtime/dist/server.js:61:24) at /Users/pranavsudhir/Documents/Development/swetrix-fe/node_modules/@remix-run/express/dist/server.js:39:28 at processTicksAndRejections (node:internal/process/task_queues:96:5) }

As I understand it, you're only running dependencies via docker (i.e. just clickhouse and redis), right? If that's the case, you need to set up a link to the Swetrix API (should be something like http://localhost:5005) in the swetrix-fe .env file. This will solve the problem.

I'm not sure if you can run the Swetrix frontend itself via Docker as we recently migrated to Remix and I haven't really tested it with Docker.

So the setup process should look like this:

Run the dependency container (docker-compose-dev.yml in swetrix-api)
Set up the .env for the API (I see you've already done this) and run it using the npm run start:dev command.
Set up .env for swetrix-fe and run it with npm run dev:staging.

I'll send you my swetrix-fe .env config in the next message.

P.S. If you're curious, this exact issue occurred because the API domain was not set in the swetrix-fe config and all the requests were set to the FE server (Remix actions) instead. But because we don't use Remix actions that much, it returned that 405 error.

Blaumaus commented 1 year ago

@Pranavvks here's my swetrix-fe .env config:

API_URL=https://api.swetrix.com/
API_STAGING_URL=http://localhost:5005/
CDN_URL=https://cdn.swetrix.com/
BLOG_URL=https://blog.swetrix.com/
AIAPI_URL=https://aiapi.swetrix.com/

Blaumaus commented 1 year ago

Also @Pranavvks, this may not be a priority at the moment as the chat itself is a bit broken after we moved to Remix. It should only be visible on the /contact page, but I'm not sure if that's the case at the moment. Feel free to work on that, but if you'd like to contribute in some other way, I'd suggest the following tasks (they're not too difficult and perfect for people who are just getting to know our codebase):

https://github.com/Swetrix/roadmap/issues/161 - add a textarea element to the account deletion confirmation modal to collect feedback (and create a deletion_feedback table in our database to store it (we can help you with this)).
https://github.com/Swetrix/roadmap/issues/165

Pranavvks commented 1 year ago

Hi @Blaumaus.

Thank you for the detailed response. Finally after making changes to the swetrix-fe env config , I have got the project working 🥳. The API_URL parameter that I had intially set was pointing to the backend service running in port 8080.

Also @Pranavvks, this may not be a priority at the moment as the chat itself is a bit broken after we moved to Remix. It should only be visible on the /contact page, but I'm not sure if that's the case at the moment. Feel free to work on that, but if you'd like to contribute in some other way, I'd suggest the following tasks (they're not too difficult and perfect for people who are just getting to know our codebase):

Improve account deletion process #161 - add a textarea element to the account deletion confirmation modal to collect feedback (and create a deletion_feedback table in our database to store it (we can help you with this)).

If for the last 2-3 month there has been 0 pageviews on users project - the email reports frequency should be set to none #165

If that's the case, then I am willing to take up issue: Swetrix/roadmap#161. Please do assign it to me.

Blaumaus commented 1 year ago

@Pranavvks I can't assign that task to you unless you leave a comment there (some sort of Github restrictions). Please do that and I'll assign it to you afterwards

Blaumaus commented 21 hours ago

Closing this issue as we don't use this chat widget anymore.

Swetrix / swetrix

[chat] Implement unread messages counter #295