diff --git a/user/src/components/chatbot/Chatbot.jsx b/user/src/components/chatbot/Chatbot.jsx index 6f97ff0..cfd31bd 100644 --- a/user/src/components/chatbot/Chatbot.jsx +++ b/user/src/components/chatbot/Chatbot.jsx @@ -1,24 +1,23 @@ // frontend/src/components/Chatbot/Chatbot.jsx import { useState, useEffect, useRef } from "react"; -import { MessageSquare, X, SendHorizonal, HelpCircle, Languages } from "lucide-react"; +import { MessageSquare, X, SendHorizonal, HelpCircle } from "lucide-react"; +import { useTranslation } from "react-i18next"; import "./Chatbot.css"; const FAQ_EN = [ - // 1. General help { triggers: ["help", "assist", "support", "what can you do"], response: "Hello! I am SevaMittra. I can guide you on applying for services, tracking requests, managing your account, and navigating the platform professionally.", }, - // 2. Account/Login { triggers: ["login", "account", "register", "signin", "signup"], response: "Use 'Login/Register' to access your account. You may also sign in using Google for convenience.", }, { - triggers: ["update profile", "edit profile", "profile settings", "change profile"], - response: ` + triggers: ["update profile", "edit profile", "profile settings", "change profile"], + response: `

Update Your Profile:

To update your profile, follow these steps:

@@ -29,81 +28,47 @@ const FAQ_EN = [
` -}, - // 3. Service Application -{ - triggers: ["How to apply for a service?","grievance", "lodge grievance", "submit grievance", "apply for service", "service application"], - response: ` + }, + { + triggers: ["How to apply for a service?", "grievance", "lodge grievance", "submit grievance", "apply for service", "service application"], + response: `

Lodge a Grievance / Apply for a Service:

To submit a new grievance or service request, you must be logged in or registered. Please sign in before proceeding.

-

Once logged in, go to the Grievances / Services page and fill out the form:

-

Grievance Registration Form:

-

After submitting, you can:

- - Register Now + Register Now
`, -}, - // 4. Request Tracking + }, { - triggers: ["How to track my request?","status", "check status", "application status", "track request", "grievance status", "scheme status"], - response: ` + triggers: ["How to track my request?", "status", "check status", "application status", "track request", "grievance status", "scheme status"], + response: `

Check Application / Grievance Status:

Enter your registration number on the Status page to track the progress of your application or grievance.

-

You can check:

-

Enter your scheme or grievance number to view updates.

- - Check Status + Check Status
`, -}, - // 5. How Government Schemes Work - { - triggers: [ - "how government schemes work", - "scheme steps", - "work", - "how it works", - "government schemes process", - ], + }, + { + triggers: ["how government schemes work", "scheme steps", "work", "how it works", "government schemes process"], response: `

Government Schemes, Simplified in 3 Steps:

@@ -114,50 +79,38 @@ const FAQ_EN = [
`, }, -{ - triggers: ["my applied schemes", "applied schemes", "schemes applied"], - response: ` + { + triggers: ["my applied schemes", "applied schemes", "schemes applied"], + response: `

My Applied Schemes:

You can view all the schemes you have applied for by clicking the button below.

-
` -}, - // 6. Scheme Information / Beneficiaries + }, { triggers: ["scheme", "beneficiary", "scheme detail", "yojna"], response: "To view scheme information or beneficiaries, please visit the Schemes page from the navigation bar. You will find all the details organized there.", }, - // 7. Scheme Eligibility { triggers: ["eligibility", "scheme eligibility", "yojna ki patrata"], response: "For checking scheme eligibility, go to the Home page and select the card labeled 'Scheme Eligibility / Yojnao Ki Patrata'. It will guide you on whether you are eligible for the scheme.", }, - // 8. Scheme Penetration / Coverage { triggers: ["penetration", "coverage", "yojna ki pohch"], response: "To see scheme penetration or coverage details, please go to the Dashboard from the navigation menu. It provides the latest statistics and insights for each scheme.", }, - // 10. About SaralSeva / Mission -{ - triggers: ["about saralseva", "mission", "objective", "what is saralseva", "about portal"], - response: ` + { + triggers: ["about saralseva", "mission", "objective", "what is saralseva", "about portal"], + response: `

Our Mission:

To strengthen e-Governance in Panchayati Raj Institutions (PRIs) across the country, the Ministry of Panchayati Raj (MoPR) has launched SaralSeva, a user-friendly web-based portal. SaralSeva aims to bring in better transparency in decentralised planning, progress reporting, and work-based accounting.

@@ -165,12 +118,10 @@ const FAQ_EN = [

About SaralSeva: Our Objective is to provide an easy-to-use, transparent system for citizens and PRIs to manage applications and services digitally.

`, -}, - -// 11. Application Statistics -{ - triggers: ["applications", "stats", "statistics", "total applications", "application status"], - response: ` + }, + { + triggers: ["applications", "stats", "statistics", "total applications", "application status"], + response: `

Application Statistics:

`, -}, -// Privacy Policy -{ - triggers: ["privacy policy", "privacy", "data privacy"], - response: ` + }, + { + triggers: ["privacy policy", "privacy", "data privacy"], + response: `

Privacy Policy:

To read our privacy policy, click the button below:

-
` -}, - -// Linking Policy -{ - triggers: ["linking policy", "link policy", "account linking"], - response: ` + }, + { + triggers: ["linking policy", "link policy", "account linking"], + response: `

Linking Policy:

To read about our linking policy, click the button below:

-
` -}, - -// FAQs -{ - triggers: ["faq", "frequently asked questions", "questions"], - response: ` + }, + { + triggers: ["faq", "frequently asked questions", "questions"], + response: `

FAQs:

For frequently asked questions, click the button below:

-
` -}, -{ - triggers: ["contact", "contact us", "support", "reach us", "get in touch"], - response: ` + }, + { + triggers: ["contact", "contact us", "support", "reach us", "get in touch"], + response: `

Contact Us:

You can reach out to the appropriate authorities via the following channels:

-

By Email & Phone:
Email: info@dgs.gov.in
Phone: 9876543210

-

Our Address:
National Portal Secretariat
CGO Complex, Lodhi Road,
New Delhi - 110 003, India.

- - Contact Us + Contact Us
`, -}, -{ - triggers: [], // No triggers; default fallback - response: ` + }, + { + triggers: [], + response: `

I'm sorry, I did not understand your query.

-

You can select from the Help Menu for quick guidance or try rephrasing your question. -

+

You can select from the Help Menu for quick guidance or try rephrasing your question.

` -} + } ]; -// Hindi FAQ const FAQ_HI = [ - // 1. सामान्य सहायता { triggers: ["help", "assist", "support", "सहायता", "मदद", "what can you do"], response: "नमस्ते! मैं सेवामित्र हूं। मैं आपको सेवाओं के लिए आवेदन करने, अनुरोध ट्रैक करने, अपने खाते को प्रबंधित करने और प्लेटफ़ॉर्म पर नेविगेट करने में मार्गदर्शन कर सकता हूं।", }, - // 2. खाता/लॉगिन { triggers: ["login", "account", "register", "signin", "signup", "लॉगिन", "रजिस्टर", "खाता"], response: @@ -322,82 +228,46 @@ const FAQ_HI = [ ` }, - // 3. सेवा आवेदन { triggers: ["How to apply for a service?", "grievance", "lodge grievance", "submit grievance", "apply for service", "service application", "शिकायत", "सेवा के लिए आवेदन"], response: `

शिकायत दर्ज करें / सेवा के लिए आवेदन करें:

नई शिकायत या सेवा अनुरोध सबमिट करने के लिए, आपको लॉग इन या पंजीकृत होना चाहिए। कृपया आगे बढ़ने से पहले साइन इन करें।

-

लॉग इन करने के बाद, शिकायत / सेवा पेज पर जाएं और फॉर्म भरें:

-

शिकायत पंजीकरण फॉर्म:

-

सबमिट करने के बाद, आप:

- - अभी पंजीकरण करें + अभी पंजीकरण करें
`, }, - // 4. अनुरोध ट्रैकिंग { triggers: ["How to track my request?", "status", "check status", "application status", "track request", "grievance status", "scheme status", "स्थिति जांचें", "आवेदन की स्थिति"], response: `

आवेदन / शिकायत स्थिति जांचें:

अपने आवेदन या शिकायत की प्रगति ट्रैक करने के लिए स्थिति पेज पर अपना पंजीकरण नंबर दर्ज करें।

-

आप जांच सकते हैं:

-

अपडेट देखने के लिए अपनी योजना या शिकायत संख्या दर्ज करें।

- - स्थिति जांचें + स्थिति जांचें
`, }, - // 5. सरकारी योजनाएं कैसे काम करती हैं - { - triggers: [ - "how government schemes work", - "scheme steps", - "work", - "how it works", - "government schemes process", - "योजनाएं कैसे काम करती हैं", - "सरकारी योजनाएं" - ], + { + triggers: ["how government schemes work", "scheme steps", "work", "how it works", "government schemes process", "योजनाएं कैसे काम करती हैं", "सरकारी योजनाएं"], response: `

सरकारी योजनाएं, 3 चरणों में सरलीकृत:

@@ -415,40 +285,28 @@ const FAQ_HI = [

मेरी आवेदित योजनाएं:

आप नीचे दिए गए बटन पर क्लिक करके अपनी सभी आवेदित योजनाओं को देख सकते हैं।

-
` }, - // 6. योजना जानकारी { triggers: ["scheme", "beneficiary", "scheme detail", "yojna", "योजना", "लाभार्थी"], response: "योजना की जानकारी या लाभार्थियों को देखने के लिए, कृपया नेविगेशन बार से योजनाएं पेज पर जाएं। आपको वहां सभी विवरण व्यवस्थित मिलेंगे।", }, - // 7. योजना पात्रता { triggers: ["eligibility", "scheme eligibility", "yojna ki patrata", "पात्रता", "योजना की पात्रता"], response: "योजना पात्रता की जांच के लिए, होम पेज पर जाएं और 'योजना पात्रता / Scheme Eligibility' लेबल वाले कार्ड को चुनें। यह आपको मार्गदर्शन देगा कि आप योजना के लिए पात्र हैं या नहीं।", }, - // 8. योजना पहुंच { triggers: ["penetration", "coverage", "yojna ki pohch", "योजना की पहुंच", "कवरेज"], response: "योजना की पहुंच या कवरेज विवरण देखने के लिए, कृपया नेविगेशन मेनू से डैशबोर्ड पर जाएं। यह प्रत्येक योजना के लिए नवीनतम आंकड़े और अंतर्दृष्टि प्रदान करता है।", }, - // 10. सरलसेवा के बारे में { triggers: ["about saralseva", "mission", "objective", "what is saralseva", "about portal", "सरलसेवा के बारे में", "उद्देश्य"], response: ` @@ -460,7 +318,6 @@ const FAQ_HI = [ `, }, - // 11. आवेदन सांख्यिकी { triggers: ["applications", "stats", "statistics", "total applications", "application status", "आवेदन", "सांख्यिकी"], response: ` @@ -475,7 +332,6 @@ const FAQ_HI = [ `, }, - // गोपनीयता नीति { triggers: ["privacy policy", "privacy", "data privacy", "गोपनीयता नीति", "गोपनीयता"], response: ` @@ -483,22 +339,13 @@ const FAQ_HI = [

गोपनीयता नीति:

हमारी गोपनीयता नीति पढ़ने के लिए, नीचे दिए गए बटन पर क्लिक करें:

- ` }, - // लिंकिंग नीति { triggers: ["linking policy", "link policy", "account linking", "लिंकिंग नीति"], response: ` @@ -506,22 +353,13 @@ const FAQ_HI = [

लिंकिंग नीति:

हमारी लिंकिंग नीति के बारे में पढ़ने के लिए, नीचे दिए गए बटन पर क्लिक करें:

- ` }, - // FAQs { triggers: ["faq", "frequently asked questions", "questions", "सवाल", "प्रश्न"], response: ` @@ -529,15 +367,7 @@ const FAQ_HI = [

FAQs:

अक्सर पूछे जाने वाले प्रश्नों के लिए, नीचे दिए गए बटन पर क्लिक करें:

- @@ -550,36 +380,23 @@ const FAQ_HI = [

हमसे संपर्क करें:

आप निम्नलिखित माध्यमों से संबंधित अधिकारियों से संपर्क कर सकते हैं:

-

ईमेल और फोन द्वारा:
ईमेल: info@dgs.gov.in
फोन: 9876543210

-

हमारा पता:
राष्ट्रीय पोर्टल सचिवालय
CGO कॉम्प्लेक्स, लोधी रोड,
नई दिल्ली - 110 003, भारत।

- - हमसे संपर्क करें + हमसे संपर्क करें
`, }, { - triggers: [], // फॉलबैक + triggers: [], response: `

क्षमा करें, मैं आपकी क्वेरी नहीं समझ पाया।

-

आप त्वरित मार्गदर्शन के लिए Help Menu से चुन सकते हैं या अपने प्रश्न को दोबारा लिखने का प्रयास कर सकते हैं। -

+

आप त्वरित मार्गदर्शन के लिए Help Menu से चुन सकते हैं या अपने प्रश्न को दोबारा लिखने का प्रयास कर सकते हैं।

` } @@ -622,12 +439,11 @@ const QUICK_QUESTIONS_HI = [ ]; const Chatbot = () => { + const { i18n } = useTranslation(); const [isOpen, setIsOpen] = useState(false); const [showQuick, setShowQuick] = useState(false); - const [language, setLanguage] = useState("en"); // Language state - const [messages, setMessages] = useState([ - { sender: "bot", text: "Hello! I am SevaMittra. How can I assist you today?" }, - ]); + const [language, setLanguage] = useState(i18n.language || "en"); + const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const chatEndRef = useRef(null); const chatBodyRef = useRef(null); @@ -639,6 +455,23 @@ const Chatbot = () => { ? "Hello! I am SevaMittra. How can I assist you today?" : "नमस्ते! मैं सेवामित्र हूं। आज मैं आपकी कैसे सहायता कर सकता हूं?"; + // Sync chatbot language with global i18n language + useEffect(() => { + const currentLang = i18n.language || "en"; + if (currentLang !== language) { + setLanguage(currentLang); + const newWelcome = currentLang === "en" + ? "Hello! I am SevaMittra. How can I assist you today?" + : "नमस्ते! मैं सेवामित्र हूं। आज मैं आपकी कैसे सहायता कर सकता हूं?"; + setMessages([{ sender: "bot", text: newWelcome }]); + } + }, [i18n.language, language]); + + // Initialize welcome message on mount + useEffect(() => { + setMessages([{ sender: "bot", text: welcomeMessage }]); + }, []); + // Disable page scroll when chatbot is open useEffect(() => { document.body.style.overflow = isOpen ? "hidden" : "auto"; @@ -648,7 +481,7 @@ const Chatbot = () => { const scrollToBottom = () => chatEndRef.current?.scrollIntoView({ behavior: "smooth" }); useEffect(() => scrollToBottom(), [messages]); - // Handle clicks on inline links inside bot responses (event delegation) + // Handle clicks on inline links inside bot responses useEffect(() => { const node = chatBodyRef.current; if (!node) return; @@ -667,18 +500,17 @@ const Chatbot = () => { const toggleChat = () => setIsOpen(!isOpen); const toggleQuick = () => setShowQuick(!showQuick); + const toggleLanguage = () => { const newLang = language === "en" ? "hi" : "en"; setLanguage(newLang); - // Update welcome message when language changes - setMessages([ - { - sender: "bot", - text: newLang === "en" - ? "Hello! I am SevaMittra. How can I assist you today?" - : "नमस्ते! मैं सेवामित्र हूं। आज मैं आपकी कैसे सहायता कर सकता हूं?" - } - ]); + i18n.changeLanguage(newLang); + localStorage.setItem("lang", newLang); + + const newWelcome = newLang === "en" + ? "Hello! I am SevaMittra. How can I assist you today?" + : "नमस्ते! मैं सेवामित्र हूं। आज मैं आपकी कैसे सहायता कर सकता हूं?"; + setMessages([{ sender: "bot", text: newWelcome }]); }; const findResponse = (text) => { @@ -700,7 +532,9 @@ const Chatbot = () => { // 3. Fallback const fallback = FAQ.find((item) => item.triggers.length === 0); - return fallback?.response || "I’m sorry, I did not understand your query."; + return fallback?.response || (language === "en" + ? "I'm sorry, I did not understand your query." + : "क्षमा करें, मैं आपकी क्वेरी नहीं समझ पाया।"); }; const sendMessage = (customText) => { @@ -726,26 +560,7 @@ const Chatbot = () => { SevaMittra
- + @@ -806,4 +621,4 @@ const Chatbot = () => { ); }; -export default Chatbot; +export default Chatbot; \ No newline at end of file diff --git a/user/src/components/pages/home/Home.jsx b/user/src/components/pages/home/Home.jsx index 135b577..7c46f4e 100644 --- a/user/src/components/pages/home/Home.jsx +++ b/user/src/components/pages/home/Home.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState, useMemo } from "react"; +import { useTranslation } from "react-i18next"; // ✅ Import i18n hook import Slider from "./Slider"; import image1 from "./../../../assets/home_slider1.jpg"; import image2 from "./../../../assets/home_slider2.jpg"; @@ -11,7 +12,6 @@ import apply from "./../../../assets/apply.svg"; import search from "./../../../assets/search.svg"; import check from "./../../../assets/check.svg"; import axios from "axios"; -// external tooltip library removed to avoid duplicate orange boxes // Wave background SVG component const WaveBackground = () => ( @@ -27,8 +27,9 @@ const WaveBackground = () => ( ); const Home = () => { + const { i18n } = useTranslation(); // ✅ Get i18n instance const [announcements, setAnnouncements] = useState([]); - const [lang, setLang] = useState("en"); + const lang = i18n.language || "en"; // ✅ Use i18n language instead of local state const t = useMemo( () => ({ @@ -166,9 +167,15 @@ const Home = () => { "/dashboard", ]; + // ✅ Handle language change - sync with global i18n + const handleLanguageChange = (newLang) => { + i18n.changeLanguage(newLang); + localStorage.setItem("lang", newLang); + }; + return (
- {/* Language Toggle */} + {/* Language Toggle - ✅ Now syncs with i18n */}
@@ -248,7 +255,6 @@ const Home = () => { {card.subtitle}

- {/* external tooltip removed for accessibility */} ))}
@@ -304,7 +310,6 @@ const Home = () => {

{step.title}

- {/* removed per-step tooltips to avoid duplicate labels */}

{step.description} @@ -318,4 +323,4 @@ const Home = () => { ); }; -export default Home; +export default Home; \ No newline at end of file