feat(chatbot): add AI-powered landing page assistant with FAQ suggestions and styled UI

[SanikaDahiwal0015]

🧾 PR Description

This PR introduces a floating AI chatbot assistant on the FlipTrack landing page to improve user onboarding and product understanding. It provides instant answers to common questions using a hybrid approach (FAQ-based responses + API-ready structure).

✨ Features Added

💬 Floating chatbot widget on landing page
⚡ Quick suggestion prompts for common FlipTrack questions
🧠 Hybrid response system (FAQ-ready structure + API integration support)
🎨 Styled UI using brand color #00ff88
✨ Modern pill-shaped suggestion buttons with hover effects
📱 Responsive design for mobile and desktop
⏳ Loading state (“Typing…” indicator)

🧩 Starter Questions Included

What is FlipTrack?
Who is FlipTrack designed for?
How does inventory tracking work?
How are profits calculated?
What AI features are available?
How do I get started?

🎨 UI Improvements

Neon green theme (#00ff88) aligned with FlipTrack branding
Glassmorphic chat window design
Hover glow effects on suggestion chips
Smooth open/close transitions

⚙️ Technical Notes

Built using React + TypeScript
Modular CSS (no external UI library dependency)
Structured for future Groq AI / Vercel AI SDK integration
Clean separation of UI and message logic

🚀 Future Improvements (optional roadmap)

Integrate Groq LLM streaming responses
Add rate limiting for API safety
Smart context-aware replies based on inventory data
Analytics for user questions

📸 Screenshots

Issue <#109>

[vercel]

@SanikaDahiwal is attempting to deploy a commit to the participationcorner2025-8967's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

📝 Summary

The provided pull request introduces a new chat widget feature to the FlipTrack application. The chat widget is implemented using Remix and Prisma, and it includes a floating button, chat window, and input box. The chat widget also includes suggested questions and a local FAQ match function to provide fast responses. The changes include updates to the .env.example file, addition of new files in the app/blocks/home directory, and updates to the app/root.tsx and app/routes.ts files.

📂 Files Changed

• .env.example: updated with new Supabase project URL and anon key
• app/blocks/home/ChatWidget.module.css: new file with CSS styles for the chat widget
• app/blocks/home/ChatWidget.tsx: new file with the chat widget component
• app/blocks/home/StarterPrompts.ts: new file with starter prompts for the chat widget
• app/blocks/home/chatbotData.ts: new file with chatbot data
• app/root.tsx: updated to include the chat widget component
• app/routes.ts: updated to include a new route for the chat API
• app/routes/api.chat.ts: new file with the chat API route
• package-lock.json: updated with new dependencies

🎭 Code Poem

Code changes abound, a new feature's found,
Chat widget's here, with styles all around,
Remix and Prisma, a perfect pair,
FlipTrack's got a new feature to share.

🚨 Bugs & Architectural Violations

* The `app/routes/api.chat.ts` file uses `any` as the type for the `request` parameter, which can lead to type errors and should be replaced with a more specific type. * The `app/blocks/home/ChatWidget.tsx` file uses the `useState` hook to store the chat messages, but it does not handle the case where the user closes the chat window and then reopens it. This can cause the chat messages to be lost. * The `app/blocks/home/ChatWidget.module.css` file uses the `box-shadow` property to create a glow effect, but this can cause performance issues on low-end devices. Consider using the `transform` property instead. * The `app/routes/api.chat.ts` file returns a response with a status code of 500 when an error occurs, but it does not provide any additional error information. Consider adding more detailed error messages to help with debugging. * The `app/blocks/home/ChatWidget.tsx` file does not include any accessibility features, such as ARIA attributes, to make the chat widget accessible to users with disabilities.

💡 Suggestions & Best Practices

* Consider adding a loading indicator to the chat widget to indicate when the chat API is being called. * Consider adding a feature to allow the user to upload files or images to the chat widget. * Consider adding a feature to allow the user to delete or edit their previous messages. * Consider using a more robust error handling mechanism, such as a try-catch block, to handle errors that occur when calling the chat API. * Consider adding more detailed logging to the chat API to help with debugging and monitoring. * Consider using a library or framework, such as React Query, to handle the chat API calls and caching. * Consider adding a feature to allow the user to customize the appearance of the chat widget, such as changing the color scheme or font size.

[SanikaDahiwal0015]

Hi @rushikesh-bobade
I just wanted to let you know that my PR #116 is ready for review. I've implemented the AI chatbot feature as described, and I'd appreciate any feedback or suggestions for improvement. Thanks for your time!

[rushikesh-bobade]

@SanikaDahiwal0015 Thank you for getting this PR up so quickly! The glassmorphic UI and the pill-shaped suggestion buttons look incredibly premium and perfectly match the FlipTrack brand. Great job!

Before we can merge this, there are a few architectural adjustments we need you to make:

1. Component Placement: You placed <ChatWidget /> inside app/root.tsx. This causes the chatbot to appear on every single page of the application (including private dashboards). Please remove it from app/root.tsx and place it inside app/routes/_index.tsx so it only appears on the landing page.
2. Remove Unused Dependencies: I noticed you added ai and @vercel/functions to package.json, but they aren't currently being used in your api.chat.ts implementation. To keep our bundle size fast and clean, please run npm uninstall ai @vercel/functions and remove them from your package-lock.json.
3. TypeScript: In app/routes/api.chat.ts, please replace { request }: any with Remix's standard type: { request }: ActionFunctionArgs (you'll need to import ActionFunctionArgs from react-router). We try to strictly avoid any in this codebase!

Once you push those 3 minor fixes to your branch, we'll get this merged immediately!

[github-actions]

Codesense Ai: This PR is too large to review automatically. A human maintainer will take a look!

[SanikaDahiwal0015]

Hi @rushikesh-bobade,

Thanks again for the review! I've addressed the requested changes:

• Moved the ChatWidget so it only appears on the landing page.
• Removed the unused ai and @vercel/functions dependencies.
• Replaced any with ActionFunctionArgs in api.chat.ts to follow the project's TypeScript standards.

The updates have been pushed to the same PR.
Please let me know if there's anything else you'd like me to improve.
Thanks!

[rushikesh-bobade]

Hi @SanikaDahiwal0015,

Thanks for addressing those initial architectural points!

However, after doing a deep code review and testing the widget, there are a few critical logic bugs and UI issues we need to fix before this meets the FlipTrack production standard.

1. Merge Conflict in .env.example

We just merged another PR that modified .env.example, so you currently have a merge conflict. Please run git pull origin main and resolve the conflict in .env.example by keeping both their new GROQ_API_KEY and your new Supabase keys.

2. Completely Broken FAQ Matching (Logic Bug)

In app/blocks/home/ChatWidget.tsx, your findLocalAnswer function is broken due to a case-sensitivity mismatch. You do msg = text.toLowerCase().trim(), but you never lowercase item.question!
Because of this, msg.includes(item.question) will always evaluate to false if the original question has any capital letters. This means the FAQ matcher never works, and the app always falls back to the backend API.

3. Echo Bot Fallback (Architecture Flaw)

In app/routes/api.chat.ts, if the local FAQ matcher fails, the API route currently just echoes the user's message back with the prefix "FlipTrack AI: ". This isn't actually an AI! Since this is a fallback, you either need to integrate a real LLM here (like the Groq API), or return a graceful failure message like "I'm sorry, I don't know the answer to that yet."

4. Missing Auto-Scroll

When a user asks multiple questions, the chat window does not automatically scroll to the bottom. You need to use a React useRef attached to the bottom of the message container and call scrollIntoView() whenever the messages array changes.

5. UI/UX Overhaul Needed

We hold FlipTrack to a very high standard of modern SaaS design, and the current UI feels a bit too raw and retro. Please revamp ChatWidget.module.css:

• Glassmorphism: Instead of a solid #111 background, use a semi-transparent dark background with backdrop-filter: blur(10px).
• Remove Neon Text Shadows: Remove text-shadow from the chat messages. It makes text blurry and hard to read.
• Performance: Do not use box-shadow for your glowing animation, as it forces the browser to repaint every frame and kills mobile battery. Use opacity or transform instead.
• Inputs & Buttons: The input and send button look like default browser inputs. Please add proper border-radiuses, padding, and smooth hover transitions.

Once you resolve the merge conflict, fix the case-sensitivity bug, update the API fallback, and give the UI a modern premium facelift, this will be ready to merge! Let me know if you need any help with the CSS or auto-scrolling logic!