diff --git a/src/.figma_internal/CurrentLearningHeaderIcon.tsx b/src/.figma_internal/CurrentLearningHeaderIcon.tsx deleted file mode 100644 index f401546..0000000 --- a/src/.figma_internal/CurrentLearningHeaderIcon.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import svgPaths from "./svg-50ykfce76w"; - -export default function CurrentLearningHeaderIcon() { - return ( -
- - - - - -
- ); -} \ No newline at end of file diff --git a/src/.figma_internal/svg-50ykfce76w.ts b/src/.figma_internal/svg-50ykfce76w.ts deleted file mode 100644 index b9f4bcc..0000000 --- a/src/.figma_internal/svg-50ykfce76w.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { -p3fb52080: "M12.4789 3.26119C12.1804 3.09839 11.8196 3.09839 11.5211 3.26119L2.61015 8.12174C1.91514 8.50083 1.91532 9.49885 2.61045 9.8777L4.47854 10.8958C4.79998 11.071 5 11.4078 5 11.7739V16.5865C5 16.9524 5.19981 17.289 5.52097 17.4643L11.521 20.7386C11.8195 20.9015 12.1805 20.9015 12.479 20.7386L18.479 17.4643C18.8002 17.289 19 16.9524 19 16.5865V11.7739C19 11.4078 19.2 11.071 19.5215 10.8958V10.8958C20.1878 10.5326 21 11.015 21 11.7739V16C21 16.5523 21.4477 17 22 17V17C22.5523 17 23 16.5523 23 16V9.59363C23 9.22769 22.8001 8.89097 22.4789 8.71574L12.4789 3.26119ZM17.2105 8.1221C17.9054 8.50112 17.9054 9.49888 17.2105 9.8779L12.4789 12.4588C12.1804 12.6216 11.8196 12.6216 11.5211 12.4588L6.78947 9.87789C6.09461 9.49888 6.09461 8.50112 6.78948 8.1221L11.5211 5.54119C11.8196 5.37839 12.1804 5.37839 12.4789 5.54119L17.2105 8.1221ZM17 15.4056C17 15.772 16.7997 16.109 16.4779 16.284L12.4779 18.46C12.1799 18.6221 11.8201 18.6221 11.5221 18.46L7.52213 16.284C7.20032 16.109 7 15.772 7 15.4056V13.9554C7 13.1961 7.81284 12.7138 8.47922 13.0777L11.5208 14.7383C11.8195 14.9014 12.1806 14.9014 12.4792 14.7383L15.5208 13.0777C16.1872 12.7138 17 13.1961 17 13.9553V15.4056Z", -} diff --git a/src/App.tsx b/src/App.tsx index 5967aed..f477a77 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,34 +1,122 @@ -import { Routes, Route } from "react-router-dom"; -// import AppLayout from "./components/AppLayout"; +import React, { useState } from 'react'; +import { AppShell } from './components/AppShell'; +import { MyCourses } from './components/MyCourses'; +import { Leaderboard } from './components/Leaderboard'; +import { ReportsAndCertificates } from './components/ReportsAndCertificates'; +import { Notes } from './components/Notes'; +import { AIMentor } from './components/AIMentor'; +import { Blog } from './components/Blog'; +import { DiscussionForums } from './components/DiscussionForums'; +import { Notifications } from './components/Notifications'; +import { Settings } from './components/Settings'; +import { CoursePlayer } from './components/CoursePlayer'; -// Pages -import IndividualWebinars from "./pages/IndividualWebinars"; -import Leaderboard from "./pages/Leaderboard"; -import HomePage from "./pages/HomePage"; -import Dashboard from "./pages/learner/Dashboard"; -import { Library } from "./pages/learner/Library"; -import { CourseTimeline } from "./pages/learner/CourseTimeline"; -import { Settings } from "./pages/Settings"; -import { Surveys } from "./pages/Surveys"; +// Mock user data - in real app this would come from authentication +const mockUser = { + id: '1', + firstName: 'Priya', + lastName: 'Sharma', + email: 'priya.sharma@techsolutions.com', + persona: 'corporate' as const, + orgName: 'Tech Solutions Pvt Ltd', + canSwitchMode: true, + canSwitchAccount: true, + avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=64&h=64&fit=crop&crop=face' +}; export default function App() { - return ( - <> - - {/* Main */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + const [currentPage, setCurrentPage] = useState('my-courses'); + const [currentCourse, setCurrentCourse] = useState<{ courseId: string; lessonId?: string } | null>(null); - {/* Fallback */} - } /> - - + const handleCourseClick = (courseId: string, lessonId?: string) => { + setCurrentCourse({ courseId, lessonId }); + }; + + const handleBackToLibrary = () => { + setCurrentCourse(null); + setCurrentPage('my-courses'); + }; + + const handleNavigate = (page: string) => { + // If navigating to my-courses, clear any active course + if (page === 'my-courses') { + setCurrentCourse(null); + } + setCurrentPage(page); + }; + + const renderCurrentPage = () => { + // If viewing a course, show the course player + if (currentCourse) { + return ( + + ); + } + + // Otherwise show the normal pages + switch (currentPage) { + case 'my-courses': + return ; + case 'leaderboard': + return ; + case 'reports-certificates': + return ; + case 'notes': + return ; + case 'blog': + return ; + case 'forums': + return ; + case 'notifications': + return ; + case 'settings': + return ; + default: + return ; + } + }; + + return ( +
+ {/* Always show AppShell with top navigation */} + + {renderCurrentPage()} + + + {/* AI Mentor FAB - Always visible */} + +
); } + +// Placeholder component for unimplemented pages +function PlaceholderPage({ title, description }: { title: string; description: string }) { + return ( +
+
+

{title}

+

{description}

+
+ +
+

+ {title} Coming Soon +

+

+ This feature is currently under development and will be available soon. +

+
+
+ ); +} \ No newline at end of file diff --git a/src/Guidelines.md b/src/Guidelines.md deleted file mode 100644 index 82e40b0..0000000 --- a/src/Guidelines.md +++ /dev/null @@ -1,140 +0,0 @@ -# KLC Website Guidelines - -## Query Parameter Dashboard System - -### Unified Dashboard Routing -* **Primary Route**: `/dashboard` - Auto-detects user type or defaults to individual -* **Explicit Routes**: - - `/dashboard?view=individual` - Forces individual learner view - - `/dashboard?view=corporate` - Forces corporate learner view -* **All Learner Portal Pages** now support query parameters: - - `/library?view=individual` or `/library?view=corporate` - - `/settings?view=individual` or `/settings?view=corporate` - - `/surveys?view=individual` or `/surveys?view=corporate` - - `/webinars?view=individual` or `/webinars?view=corporate` - - `/leaderboard?view=individual` or `/leaderboard?view=corporate` - -### Legacy Route Handling -* **Automatic Redirects**: Old `/corporate/*` routes redirect to query parameter equivalents -* **Backward Compatibility**: Legacy routes still work but redirect users to new URLs -* **URL Updates**: Browser history automatically updates to new query parameter format - -## Page Header & Navigation Standards - -### Universal Back Button Requirements -* **All internal pages must include a back button** in the header for consistent navigation -* **Header structure**: Use `pt-24 pb-8` to account for fixed navbar (70px + padding) -* **Back button placement**: Position in top-left of header with proper spacing and alignment -* **Navigation logic**: Back button should return users to their expected previous page: - - Individual learner pages → Individual dashboard (`/dashboard?view=individual`) - - Corporate learner pages → Corporate dashboard (`/dashboard?view=corporate`) - - Service pages → Services overview (`/services`) [Deprecated - redirects to home] - - About pages → About overview (`/about-us/our-vision`) [Deprecated - redirects to home] - - Learning pages → Learning hub (`/learning/articles`) [Deprecated - redirects to home] - - General pages → Home page (`/`) - -### Header Component Pattern -```tsx -// Standard header pattern for all pages -
-
-
{/* Adjust max-width based on content */} -
- -
-

[Page Title]

-

- [Page description] -

-
-
-
-
-
-``` - -### Required Imports for Back Navigation -```tsx -import { ArrowLeft } from 'lucide-react'; - const navigate = useNavigate(); -``` - -### Standard Navigation Handler -```tsx -const handleBackNavigation = () => { - // Choose appropriate navigation based on page context - navigate('/dashboard?view=individual'); // or /dashboard?view=corporate for corporate learners -}; -``` - -## Typography & Font Sizing - -### Minimum Font Size Requirements -* **Absolute minimum font size**: 14px (0.875rem at 14px base) -* **Preferred minimum font size**: 16px (1rem at 14px base) -* **Never use font sizes smaller than 14px** for any text content -* Use 16px (1rem) for all body text, labels, buttons, and form inputs -* Use 14px (0.875rem) only for small text elements like captions, metadata, or legal text - -### Typography Hierarchy -* **H1**: 36px (2.25rem) - Page titles -* **H2**: 30px (1.875rem) - Section headings -* **H3**: 24px (1.5rem) - Subsection headings -* **H4**: 20px (1.25rem) - Component titles -* **H5**: 18px (1.125rem) - Card titles -* **H6**: 16px (1rem) - Small headings -* **Body text**: 16px (1rem) - All paragraph text -* **Labels/Buttons**: 16px (1rem) - Form labels, button text -* **Small text**: 14px (0.875rem) - Captions, metadata, fine print - -### Font Implementation Rules -* Always use explicit font sizes in Tailwind classes when overriding defaults -* Use `text-base` (16px) as the default for most text content -* Use `text-sm` (14px) sparingly for secondary information -* Never use `text-xs` (12px) - override with `text-sm` minimum -* Ensure good contrast ratios (minimum 4.5:1) with all font sizes - -## Layout & Spacing - -### Horizontal Padding -* Apply consistent horizontal padding to all page sections using the same values as the navigation bar -* Use `px-4 lg:px-8` pattern for consistent horizontal spacing -* Container sections should use `container mx-auto px-4 lg:px-8` - -### Accessibility -* Minimum 44×44px touch targets for buttons and interactive elements -* Respect `prefers-reduced-motion` for animations -* Maintain WCAG 2.1 AA compliance -* Test all font sizes for readability across devices - -## Component Guidelines - -### Text Elements -* Override default component font sizes if they fall below 14px -* Explicitly set typography classes on all text elements -* Use semantic HTML elements with appropriate font sizes -* Ensure form inputs and labels are minimum 16px for mobile usability - -### Responsive Design -* Test font sizes across all breakpoints -* Ensure readability on mobile devices (minimum 16px for body text) -* Use responsive typography classes where appropriate - -## Quality Checks - -Before finalizing any page or component: -1. ✅ Verify no text is smaller than 14px -2. ✅ Confirm body text and interactive elements are 16px -3. ✅ Test readability across different screen sizes -4. ✅ Check contrast ratios meet accessibility standards -5. ✅ Ensure consistent horizontal padding with navigation - -Some of the base components you are using may have styling (eg. gap/typography) baked in as defaults. Make sure you explicitly set any styling information from the guidelines in the generated React to override the defaults. \ No newline at end of file diff --git a/src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png b/src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png deleted file mode 100644 index 2f28f66..0000000 Binary files a/src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png and /dev/null differ diff --git a/src/assets/0c4562ded1d0bd9c2bc15a4240e05c7fa92725f6.png b/src/assets/0c4562ded1d0bd9c2bc15a4240e05c7fa92725f6.png new file mode 100644 index 0000000..621d3cd Binary files /dev/null and b/src/assets/0c4562ded1d0bd9c2bc15a4240e05c7fa92725f6.png differ diff --git a/src/assets/1b56e6afe31d5744d2e7a38d3e2f8c3ce78a90af.png b/src/assets/1b56e6afe31d5744d2e7a38d3e2f8c3ce78a90af.png deleted file mode 100644 index f816613..0000000 Binary files a/src/assets/1b56e6afe31d5744d2e7a38d3e2f8c3ce78a90af.png and /dev/null differ diff --git a/src/assets/1bb9c22c86c0892d4716564b7135835f04869298.png b/src/assets/1bb9c22c86c0892d4716564b7135835f04869298.png deleted file mode 100644 index 89ce7f3..0000000 Binary files a/src/assets/1bb9c22c86c0892d4716564b7135835f04869298.png and /dev/null differ diff --git a/src/assets/1e150e43f238df3e08fcbf5d8f4899c233264e9f.png b/src/assets/1e150e43f238df3e08fcbf5d8f4899c233264e9f.png new file mode 100644 index 0000000..7879330 Binary files /dev/null and b/src/assets/1e150e43f238df3e08fcbf5d8f4899c233264e9f.png differ diff --git a/src/assets/209958db0c439ec78be82ab4f3e335a6aed5de89.png b/src/assets/209958db0c439ec78be82ab4f3e335a6aed5de89.png deleted file mode 100644 index b9b48a8..0000000 Binary files a/src/assets/209958db0c439ec78be82ab4f3e335a6aed5de89.png and /dev/null differ diff --git a/src/assets/2824e18f6ed39b8e82cf8a9fc215648cde48d2f4.png b/src/assets/2824e18f6ed39b8e82cf8a9fc215648cde48d2f4.png deleted file mode 100644 index baf8777..0000000 Binary files a/src/assets/2824e18f6ed39b8e82cf8a9fc215648cde48d2f4.png and /dev/null differ diff --git a/src/assets/3a97bc3c43824d72250953bd1d41ece20112a45a.png b/src/assets/3a97bc3c43824d72250953bd1d41ece20112a45a.png deleted file mode 100644 index 2f7a207..0000000 Binary files a/src/assets/3a97bc3c43824d72250953bd1d41ece20112a45a.png and /dev/null differ diff --git a/src/assets/468d85c60825612022ad15f5afa770440bd885e1.png b/src/assets/468d85c60825612022ad15f5afa770440bd885e1.png deleted file mode 100644 index fa17e8b..0000000 Binary files a/src/assets/468d85c60825612022ad15f5afa770440bd885e1.png and /dev/null differ diff --git a/src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png b/src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png deleted file mode 100644 index 7840c2b..0000000 Binary files a/src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png and /dev/null differ diff --git a/src/assets/50c9ddeeb90128ebffbfbfe2dea36d09c03b5335.png b/src/assets/50c9ddeeb90128ebffbfbfe2dea36d09c03b5335.png deleted file mode 100644 index a707dcc..0000000 Binary files a/src/assets/50c9ddeeb90128ebffbfbfe2dea36d09c03b5335.png and /dev/null differ diff --git a/src/assets/5fddc261d2e35ee810113f2537c5a59a97fd7fbd.png b/src/assets/5fddc261d2e35ee810113f2537c5a59a97fd7fbd.png deleted file mode 100644 index 67daf04..0000000 Binary files a/src/assets/5fddc261d2e35ee810113f2537c5a59a97fd7fbd.png and /dev/null differ diff --git a/src/assets/624ce058c9c961b32643853cf5c692afe9d3ed60.png b/src/assets/624ce058c9c961b32643853cf5c692afe9d3ed60.png deleted file mode 100644 index 306ac0d..0000000 Binary files a/src/assets/624ce058c9c961b32643853cf5c692afe9d3ed60.png and /dev/null differ diff --git a/src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png b/src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png deleted file mode 100644 index e8179a1..0000000 Binary files a/src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png and /dev/null differ diff --git a/src/assets/6cae567b6bf6a44cb03b767e4308c4c705340d08.png b/src/assets/6cae567b6bf6a44cb03b767e4308c4c705340d08.png deleted file mode 100644 index 1aa6694..0000000 Binary files a/src/assets/6cae567b6bf6a44cb03b767e4308c4c705340d08.png and /dev/null differ diff --git a/src/assets/75c17cf51744205abe7b7042766b8dfdb7b2e8a4.png b/src/assets/75c17cf51744205abe7b7042766b8dfdb7b2e8a4.png deleted file mode 100644 index bc93f8b..0000000 Binary files a/src/assets/75c17cf51744205abe7b7042766b8dfdb7b2e8a4.png and /dev/null differ diff --git a/src/assets/9852710543a90e291ecb85d77ea02234139264c5.png b/src/assets/9852710543a90e291ecb85d77ea02234139264c5.png deleted file mode 100644 index f63a105..0000000 Binary files a/src/assets/9852710543a90e291ecb85d77ea02234139264c5.png and /dev/null differ diff --git a/src/assets/9ebc01e8eb24f9d71683b2ee63d224583a979590.png b/src/assets/9ebc01e8eb24f9d71683b2ee63d224583a979590.png deleted file mode 100644 index e64680f..0000000 Binary files a/src/assets/9ebc01e8eb24f9d71683b2ee63d224583a979590.png and /dev/null differ diff --git a/src/assets/a224fb6efc954992c535e482fe88d93f1f4178d8.png b/src/assets/a224fb6efc954992c535e482fe88d93f1f4178d8.png deleted file mode 100644 index 2ffbc35..0000000 Binary files a/src/assets/a224fb6efc954992c535e482fe88d93f1f4178d8.png and /dev/null differ diff --git a/src/assets/ae07aac2d7927002260d7261da0eee0c09a8352f.png b/src/assets/ae07aac2d7927002260d7261da0eee0c09a8352f.png deleted file mode 100644 index 46f9018..0000000 Binary files a/src/assets/ae07aac2d7927002260d7261da0eee0c09a8352f.png and /dev/null differ diff --git a/src/assets/c2d0a01da274cef655bbdfb1b11ff3e9993ea278.png b/src/assets/c2d0a01da274cef655bbdfb1b11ff3e9993ea278.png deleted file mode 100644 index 22f6c26..0000000 Binary files a/src/assets/c2d0a01da274cef655bbdfb1b11ff3e9993ea278.png and /dev/null differ diff --git a/src/assets/c501c3d3f3a828828d4cb2dadb9558b43986718f.png b/src/assets/c501c3d3f3a828828d4cb2dadb9558b43986718f.png deleted file mode 100644 index 5459038..0000000 Binary files a/src/assets/c501c3d3f3a828828d4cb2dadb9558b43986718f.png and /dev/null differ diff --git a/src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png b/src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png deleted file mode 100644 index 7c12ba6..0000000 Binary files a/src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png and /dev/null differ diff --git a/src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png b/src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png deleted file mode 100644 index af42a55..0000000 Binary files a/src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png and /dev/null differ diff --git a/src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png b/src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png deleted file mode 100644 index 178eec3..0000000 Binary files a/src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png and /dev/null differ diff --git a/src/assets/f7fa2dab6765df7645e62459459afe9a6ff4959b.png b/src/assets/f7fa2dab6765df7645e62459459afe9a6ff4959b.png deleted file mode 100644 index 7d8e14f..0000000 Binary files a/src/assets/f7fa2dab6765df7645e62459459afe9a6ff4959b.png and /dev/null differ diff --git a/src/assets/fc9194a6dac9bc6614c0646ed0b66177408ca5e6.png b/src/assets/fc9194a6dac9bc6614c0646ed0b66177408ca5e6.png deleted file mode 100644 index e5d3cc3..0000000 Binary files a/src/assets/fc9194a6dac9bc6614c0646ed0b66177408ca5e6.png and /dev/null differ diff --git a/src/assets/klc-logo.png b/src/assets/klc-logo.png deleted file mode 100644 index ff70e16..0000000 Binary files a/src/assets/klc-logo.png and /dev/null differ diff --git a/src/components/AIChatbot.tsx b/src/components/AIChatbot.tsx deleted file mode 100644 index 884d67a..0000000 --- a/src/components/AIChatbot.tsx +++ /dev/null @@ -1,337 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { Button } from './ui/button'; -import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; -import { Badge } from './ui/badge'; -import { - MessageCircle, - X, - Send, - Bot, - User, - Minimize2, - Maximize2 -} from 'lucide-react'; -import { Input } from './ui/input'; -import { ScrollArea } from './ui/scroll-area'; - -interface Message { - id: string; - type: 'user' | 'bot'; - content: string; - timestamp: Date; - suggestions?: string[]; -} - -const initialMessage: Message = { - id: '1', - type: 'bot', - content: "Hi! I'm here to help you explore KLC's leadership programs and facilities. What are you looking for today?", - timestamp: new Date(), - suggestions: [ - "Show me leadership programs", - "Book a facility tour", - "Upcoming webinars", - "Contact information" - ] -}; - -const botResponses: Record = { - "programs": { - content: "Great! We offer various leadership development programs including Executive Leadership, Strategic Management, and Team Building workshops. Would you like to explore specific programs or see our full catalog?", - suggestions: ["View all programs", "Executive programs", "Team building", "Custom corporate training"] - }, - "facilities": { - content: "Our state-of-the-art facilities include modern conference rooms, training halls, and collaboration spaces. You can take a virtual tour or book a facility for your event.", - suggestions: ["Virtual tour", "Book conference room", "Training halls", "Facility pricing"] - }, - "webinars": { - content: "We host regular webinars on leadership topics. You can view upcoming sessions, register for live events, or access our library of recorded sessions.", - suggestions: ["Upcoming webinars", "Recorded sessions", "Register for webinar", "Webinar schedule"] - }, - "contact": { - content: "You can reach us at info@klc.edu.in or call +91 11 4567 8900. Our team is available Monday to Friday, 9 AM to 6 PM IST. You can also schedule a consultation.", - suggestions: ["Schedule consultation", "Email us", "Office locations", "Support hours"] - }, - "default": { - content: "I can help you with information about our programs, facilities, webinars, and more. What would you like to know?", - suggestions: ["Leadership programs", "Facility booking", "Webinars", "Contact us"] - } -}; - -export function AIChatbot() { - const [isVisible, setIsVisible] = useState(true); // Show immediately for testing - const [isOpen, setIsOpen] = useState(false); - const [isMinimized, setIsMinimized] = useState(false); - const [messages, setMessages] = useState([initialMessage]); - const [inputValue, setInputValue] = useState(''); - const [isTyping, setIsTyping] = useState(false); - const messagesEndRef = useRef(null); - const inactivityTimerRef = useRef(); - - // Show chatbot after shorter delay for better UX - useEffect(() => { - const resetTimer = () => { - if (inactivityTimerRef.current) { - clearTimeout(inactivityTimerRef.current); - } - - inactivityTimerRef.current = setTimeout(() => { - if (!isOpen) { - setIsVisible(true); - } - }, 5000); // Reduced to 5 seconds for better visibility - }; - - const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart']; - - const addEventListeners = () => { - events.forEach(event => { - document.addEventListener(event, resetTimer, true); - }); - }; - - const removeEventListeners = () => { - events.forEach(event => { - document.removeEventListener(event, resetTimer, true); - }); - }; - - addEventListeners(); - resetTimer(); - - return () => { - removeEventListeners(); - if (inactivityTimerRef.current) { - clearTimeout(inactivityTimerRef.current); - } - }; - }, [isOpen]); - - // Auto-scroll to bottom of messages - useEffect(() => { - messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); - }, [messages]); - - const getBotResponse = (userMessage: string): { content: string; suggestions?: string[] } => { - const message = userMessage.toLowerCase(); - - if (message.includes('program') || message.includes('course') || message.includes('training')) { - return botResponses.programs; - } else if (message.includes('facility') || message.includes('book') || message.includes('room')) { - return botResponses.facilities; - } else if (message.includes('webinar') || message.includes('session') || message.includes('online')) { - return botResponses.webinars; - } else if (message.includes('contact') || message.includes('phone') || message.includes('email')) { - return botResponses.contact; - } else { - return botResponses.default; - } - }; - - const handleSendMessage = async (content: string) => { - if (!content.trim()) return; - - // Add user message - const userMessage: Message = { - id: Date.now().toString(), - type: 'user', - content: content.trim(), - timestamp: new Date() - }; - - setMessages(prev => [...prev, userMessage]); - setInputValue(''); - setIsTyping(true); - - // Simulate typing delay - setTimeout(() => { - const response = getBotResponse(content); - const botMessage: Message = { - id: (Date.now() + 1).toString(), - type: 'bot', - content: response.content, - timestamp: new Date(), - suggestions: response.suggestions - }; - - setMessages(prev => [...prev, botMessage]); - setIsTyping(false); - }, 1000 + Math.random() * 1000); // 1-2 second delay - }; - - const handleSuggestionClick = (suggestion: string) => { - handleSendMessage(suggestion); - }; - - const formatTime = (date: Date) => { - return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); - }; - - if (!isVisible) return null; - - return ( - <> - {/* Chatbot Toggle Button */} - {!isOpen && ( - - )} - - {/* Chat Window */} - {isOpen && ( - - {/* Header */} - -
-
- -
-
- KLC Assistant -
-
- Online & Ready to Help -
-
-
-
- - -
- - - {/* Chat Content */} - {!isMinimized && ( - - {/* Messages */} - -
- {messages.map((message) => ( -
-
-
- {message.type === 'user' ? ( - - ) : ( - - )} -
-
-
-

{message.content}

-
- {message.suggestions && ( -
- {message.suggestions.map((suggestion, index) => ( - handleSuggestionClick(suggestion)} - > - {suggestion} - - ))} -
- )} -

- {formatTime(message.timestamp)} -

-
-
-
- ))} - - {isTyping && ( -
-
-
- -
-
-
-
-
-
-
-
-
-
- )} -
-
- - - {/* Input */} -
-
{ - e.preventDefault(); - handleSendMessage(inputValue); - }} - className="flex gap-2" - role="form" - aria-label="Chat message form" - > - setInputValue(e.target.value)} - placeholder="Type your message..." - className="flex-1 text-base min-h-[44px]" - disabled={isTyping} - aria-label="Chat message input" - /> - -
-
- - )} - - )} - - ); -} \ No newline at end of file diff --git a/src/components/AIMentor.tsx b/src/components/AIMentor.tsx new file mode 100644 index 0000000..ba2f7e5 --- /dev/null +++ b/src/components/AIMentor.tsx @@ -0,0 +1,439 @@ +import React, { useState } from 'react'; +import { + Send, + Bot, + User, + Lightbulb, + BookOpen, + Target, + TrendingUp, + MessageCircle, + X, + Youtube, + FileText, + Headphones, + ExternalLink, + Upload, + Edit3 +} from 'lucide-react'; +import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; +import { Button } from './ui/button'; +import { Input } from './ui/input'; +import { Badge } from './ui/badge'; +import { ScrollArea } from './ui/scroll-area'; +import { Separator } from './ui/separator'; +import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './ui/sheet'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'; +import { Textarea } from './ui/textarea'; + +// Mock conversation data +const mockConversation = [ + { + id: '1', + type: 'assistant', + content: "Hello! I'm your KLC Assistant. I'm here to help you with your learning journey. How can I assist you today?", + timestamp: '2024-09-03T09:00:00Z' + }, + { + id: '2', + type: 'user', + content: "What should I do next in my learning path?", + timestamp: '2024-09-03T09:01:00Z' + }, + { + id: '3', + type: 'assistant', + content: "Based on your current progress in the Strategic Leadership Development course, I recommend:\n\n1. **Complete Module 3, Lesson 2** - You're 65% through 'Risk Assessment Strategies'\n2. **Review your notes** - You have 4 notes that could benefit from additional practice\n3. **Join the upcoming webinar** - 'Future of Leadership in Digital Age' on Sep 15th\n\nWould you like me to explain any specific concept from your current lesson?", + timestamp: '2024-09-03T09:02:00Z' + } +]; + +const quickChips = [ + { id: '1', text: "What should I do next?", icon: Target }, + { id: '2', text: "Explain my Module 3 gap", icon: BookOpen }, + { id: '3', text: "Review my progress", icon: TrendingUp }, + { id: '4', text: "Find YouTube videos", icon: Youtube }, + { id: '5', text: "Get feedback on my notes", icon: Edit3 }, + { id: '6', text: "Leadership challenge help", icon: Lightbulb } +]; + +const mockRecommendations = [ + { + id: '1', + type: 'youtube', + title: 'KLC Leadership Interview: Digital Transformation', + description: 'CEO discusses modern leadership challenges in digital transformation', + url: 'https://youtube.com/watch?v=example1', + thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=200&fit=crop' + }, + { + id: '2', + type: 'article', + title: 'Research: Emotional Intelligence in Leadership', + description: 'Latest findings on EQ impact on team performance and organizational outcomes', + url: 'https://klc.edu/research/emotional-intelligence-2024', + thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=200&fit=crop' + }, + { + id: '3', + type: 'podcast', + title: 'Future Leaders Podcast: Episode 24', + description: 'Discussion on adaptive leadership strategies with industry experts', + url: 'https://podcasts.klc.edu/future-leaders-24', + thumbnail: 'https://images.unsplash.com/photo-1535015853489-4c0e8b7cd34e?w=400&h=200&fit=crop' + } +]; + +export function AIMentor() { + const [messages, setMessages] = useState(mockConversation); + const [inputValue, setInputValue] = useState(''); + const [isTyping, setIsTyping] = useState(false); + const [isOpen, setIsOpen] = useState(false); + const [activeTab, setActiveTab] = useState('chat'); + const [notesFeedback, setNotesFeedback] = useState(''); + + const handleSendMessage = async () => { + if (!inputValue.trim()) return; + + const newUserMessage = { + id: Date.now().toString(), + type: 'user' as const, + content: inputValue, + timestamp: new Date().toISOString() + }; + + setMessages(prev => [...prev, newUserMessage]); + setInputValue(''); + setIsTyping(true); + + // Enhanced AI response with recommendations + setTimeout(() => { + let responseContent = "I understand your question. Let me provide you with a helpful response based on your learning context and progress."; + + // Add contextual recommendations based on query + if (inputValue.toLowerCase().includes('youtube') || inputValue.toLowerCase().includes('video')) { + responseContent += "\n\nHere are some relevant KLC YouTube interviews I'd recommend:\n• Digital Transformation Leadership with Sarah Chen\n• Emotional Intelligence Masterclass with Dr. Kumar\n• Crisis Leadership Strategies - Executive Panel"; + } else if (inputValue.toLowerCase().includes('research') || inputValue.toLowerCase().includes('article')) { + responseContent += "\n\nBased on your current learning path, here are relevant research articles:\n• 'Adaptive Leadership in Remote Teams' - Harvard Business Review\n• 'Data-Driven Decision Making for Leaders' - KLC Research\n• 'Building Psychological Safety' - Stanford Leadership Institute"; + } else if (inputValue.toLowerCase().includes('leadership challenge')) { + responseContent += "\n\nFor leadership challenges, I recommend:\n1. Review Module 3 content on conflict resolution\n2. Practice scenario planning with the KLC Leadership Simulator\n3. Connect with mentor Dr. Patel for personalized guidance\n\nWould you like me to schedule a mentoring session?"; + } + + const aiResponse = { + id: (Date.now() + 1).toString(), + type: 'assistant' as const, + content: responseContent, + timestamp: new Date().toISOString() + }; + setMessages(prev => [...prev, aiResponse]); + setIsTyping(false); + }, 2000); + }; + + const handleNotesFeedback = async () => { + if (!notesFeedback.trim()) return; + + setIsTyping(true); + // Simulate AI feedback processing + setTimeout(() => { + const feedbackResponse = { + id: Date.now().toString(), + type: 'assistant' as const, + content: `I've analyzed your notes. Here's my feedback:\n\n**Strengths:**\n• Clear structure and logical flow\n• Good use of real-world examples\n• Well-connected to course concepts\n\n**Suggestions:**\n• Consider adding more specific metrics/data\n• Link to Module 4 content on implementation\n• Try the STAR method for case study format\n\n**Learning Resources:**\n• KLC Note-Taking Best Practices Guide\n• Strategic Thinking Framework Workshop\n\nWould you like me to suggest related courses based on your notes?`, + timestamp: new Date().toISOString() + }; + setMessages(prev => [...prev, feedbackResponse]); + setNotesFeedback(''); + setIsTyping(false); + setActiveTab('chat'); + }, 3000); + }; + + const handleChipClick = (chipText: string) => { + setInputValue(chipText); + }; + + const formatTime = (timestamp: string) => { + return new Date(timestamp).toLocaleTimeString('en-IN', { + hour: '2-digit', + minute: '2-digit', + timeZone: 'Asia/Kolkata' + }); + }; + + return ( + <> + {/* Floating Action Button */} +
+ +
+ + {/* Enhanced Chat Panel with Tabs */} + + +
+ {/* Header */} + +
+
+
+ +
+
+ KLC Assistant + + Strategic Leadership Development - Module 3 + +
+
+ +
+ + + + + Chat + Resources + Feedback + + + + {/* Quick Action Chips */} +
+

Quick questions:

+
+ {quickChips.map((chip) => { + const Icon = chip.icon; + return ( + + ); + })} +
+
+ + {/* Messages Area */} + +
+ {messages.map((message) => ( +
+ {message.type === 'assistant' && ( +
+ +
+ )} + +
+

{message.content}

+

+ {formatTime(message.timestamp)} +

+
+ + {message.type === 'user' && ( +
+ +
+ )} +
+ ))} + + {isTyping && ( +
+
+ +
+
+
+
+
+
+
+
+
+ )} +
+ + + {/* Input Area */} +
+
+ setInputValue(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleSendMessage(); + } + if (e.key === 'Escape') { + setIsOpen(false); + } + }} + className="flex-1 bg-white" + /> + +
+

+ Press Enter to send, Esc to close +

+
+ + + + +
+
+

Recommended for You

+
+ {mockRecommendations.map((rec) => ( + + +
+ {rec.title} +
+
+ {rec.type === 'youtube' && } + {rec.type === 'article' && } + {rec.type === 'podcast' && } + + {rec.type} + +
+

{rec.title}

+

{rec.description}

+ +
+
+ + + ))} +
+
+ +
+

External References

+
+
+ +
+

Harvard Business Review

+

Leadership in Crisis Management

+
+ +
+
+ +
+

MIT Leadership Center

+

Digital Leadership Strategies

+
+ +
+
+
+
+ + + + +
+
+

Get AI Feedback

+

+ Upload your notes, case studies, or learning reflections for personalized feedback. +

+
+ +
+
+
+ +