Fix Animation Render

[vverma022]

When user enters a prompt the typewriter animation is used to display the output. The animation is taking the whole height to render in the component.

https://github.com/user-attachments/assets/649eabe5-83ab-4a7c-a14a-a7b554e5808a

[NatsuDrag9]

Please assign the issue to me. I'd like to solve it.

[vverma022]

Please assign the issue to me. I'd like to solve it.

Sure. Do explain the approach so that it is easier to understand.

[NatsuDrag9]

I've not really thought about the solution yet. Currently, I'm facing issues in setting up the project. Why is node_modules included in the backend/? As far as I know, node_modules is added in .gitignore and is usually not pushed to the repo.

[vverma022]

I've not really thought about the solution yet. Currently, I'm facing issues in setting up the project.

Why is node_modules included in the backend/? As far as I know, node_modules is added in .gitignore and is usually not pushed to the repo.

I'll resolve it. Thank you for pointing that out.

[NatsuDrag9]

I've not really thought about the solution yet. Currently, I'm facing issues in setting up the project. Why is node_modules included in the backend/? As far as I know, node_modules is added in .gitignore and is usually not pushed to the repo.

I'll resolve it. Thank you for pointing that out.

Sure, no issue. Despite adding node_modules to backend/.gitignore, I'm unable to resolve it at my end. Not sure what's the problem.

[vverma022]

I've not really thought about the solution yet. Currently, I'm facing issues in setting up the project.

Why is node_modules included in the backend/? As far as I know, node_modules is added in .gitignore and is usually not pushed to the repo.

I'll resolve it. Thank you for pointing that out.

Sure, no issue.

Despite adding node_modules to backend/.gitignore, I'm unable to resolve it at my end. Not sure what's the problem.

Please ensure the backend is setup correctly.

• .env file with API keys for Groq
• The issue is primarily on the frontend bit of the project.
• Check the search component, main component and the index.css file where the control of the animation is defined.

[NatsuDrag9]

Sorry, I wasn't clear about my problem. The issue that I am facing right now concerns with node_modules not being ignored despite adding node_modules to backend/.gitignore file. As the new files in node_modules are being tracked by git, I can't make a sensible commit.

[vverma022]

Try creating a branch and solve both the issues.

[NatsuDrag9]

Ok, will do that.

[vverma022]

Ok, will do that.

I'll assign it to you. Thank you

[NatsuDrag9]

I'll assign it to you. Thank you

Sure

[vverma022]

I'll assign it to you. Thank you

Sure

Please comment on the issue to be assigned.

[NatsuDrag9]

I'll assign it to you. Thank you

Sure

Please comment on the issue to be assigned.

Commented

[NatsuDrag9]

Changing the .typewriter-container and its corresponding animations in index.css did not solve the bug. The issue was related to Tailwind's animate-typing class and the custom wrap class. I couldn't exactly pinpoint the bug. Instead, I made some changes to the the text rendering logic in useEffect. Instead of setTimer, I'm using setInterval based on this reference.

The output which is shown below.

https://github.com/user-attachments/assets/125e4d2a-cb9c-4c05-a1bb-0b7f87dd3065

Let me know if this is works so that I can create a pull request.

[vverma022]

Please make a pull request.

[NatsuDrag9]

I created two pull requests. After accepting the pull requests, please close this issue.