Spaces:

Nagi15
/

wiki-project

Runtime error

App Files Files Community

Nagi15 commited on Jul 1, 2025

Commit

fcb5a67

0 Parent(s):

Add codebase

Browse files

Files changed (35) hide show

.bolt/config.json +3 -0
.bolt/prompt +5 -0
.gitattributes +35 -0
.gitignore +25 -0
Dockerfile +12 -0
README.md +11 -0
eslint.config.js +28 -0
index.html +14 -0
package-lock.json +0 -0
package.json +34 -0
postcss.config.js +6 -0
src/App.tsx +250 -0
src/components/AIConfigModal.tsx +342 -0
src/components/AIStudyPlanGenerator.tsx +366 -0
src/components/ArticleViewer.tsx +327 -0
src/components/ContentTransformer.tsx +488 -0
src/components/ExploreSection.tsx +419 -0
src/components/Header.tsx +83 -0
src/components/Hero.tsx +88 -0
src/components/MultilingualExplorer.tsx +297 -0
src/components/ProgressSection.tsx +304 -0
src/components/SearchInterface.tsx +247 -0
src/components/StudyPlansSection.tsx +604 -0
src/index.css +3 -0
src/main.tsx +10 -0
src/types/index.ts +102 -0
src/utils/ai-enhanced-wikimedia.ts +491 -0
src/utils/ai-providers.ts +445 -0
src/utils/wikimedia-api.ts +429 -0
src/vite-env.d.ts +1 -0
tailwind.config.js +109 -0
tsconfig.app.json +24 -0
tsconfig.json +7 -0
tsconfig.node.json +22 -0
vite.config.ts +11 -0

.bolt/config.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "template": "bolt-vite-react-ts"
+}

.bolt/prompt ADDED Viewed

	@@ -0,0 +1,5 @@

+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+Use icons from lucide-react for logos.

.gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,25 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

Dockerfile ADDED Viewed

	@@ -0,0 +1,12 @@

+# Step 1: Build the React app
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npm run build
+# Step 2: Serve the build with a static server
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md ADDED Viewed

	@@ -0,0 +1,11 @@

+---
+title: Wikistro
+emoji: 🐨
+colorFrom: red
+colorTo: gray
+sdk: docker
+pinned: false
+license: gpl-3.0
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html ADDED Viewed

	@@ -0,0 +1,14 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wikistro - Transform Knowledge into Learning</title>
+    <meta name="description" content="Leverage Wikimedia APIs to create interactive learning experiences from Wikipedia, Wikibooks, and other open knowledge sources.">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,34 @@

+{
+  "name": "wikistro",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "dotenv": "^17.0.1",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.tsx ADDED Viewed

	@@ -0,0 +1,250 @@

+import React, { useState, useEffect } from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import SearchInterface from './components/SearchInterface';
+import ExploreSection from './components/ExploreSection';
+import StudyPlansSection from './components/StudyPlansSection';
+import AIStudyPlanGenerator from './components/AIStudyPlanGenerator';
+import ContentTransformer from './components/ContentTransformer';
+import MultilingualExplorer from './components/MultilingualExplorer';
+import ArticleViewer from './components/ArticleViewer';
+import { StudyPlan, StudyTopic, ProgressData } from './types';
+import { WikimediaAPI } from './utils/wikimedia-api';
+function App() {
+  const [activeTab, setActiveTab] = useState('hero');
+  const [studyPlans, setStudyPlans] = useState<StudyPlan[]>([]);
+  const [progressData, setProgressData] = useState<ProgressData>({
+    studyStreak: 0,
+    topicsCompleted: 0,
+    totalStudyTime: 0,
+    achievements: 0,
+    weeklyGoal: { current: 0, target: 12 },
+    recentActivity: [],
+    completedTopics: new Set()
+  });
+  // Article viewer state
+  const [viewingArticle, setViewingArticle] = useState<{
+    title: string;
+    project: string;
+    content: string;
+  } | null>(null);
+  // Load data from localStorage on component mount
+  useEffect(() => {
+    const storedPlans = WikimediaAPI.getStoredStudyPlans();
+    const storedProgress = WikimediaAPI.getStoredProgress();
+    setStudyPlans(storedPlans);
+    setProgressData({
+      ...storedProgress,
+      completedTopics: new Set(storedProgress.completedTopics || [])
+    });
+  }, []);
+  // Save data to localStorage whenever it changes
+  useEffect(() => {
+    WikimediaAPI.saveStudyPlans(studyPlans);
+  }, [studyPlans]);
+  useEffect(() => {
+    WikimediaAPI.saveProgress({
+      ...progressData,
+      completedTopics: Array.from(progressData.completedTopics)
+    });
+  }, [progressData]);
+  const handleGetStarted = () => {
+    setActiveTab('search');
+  };
+  const handlePlanGenerated = (plan: StudyPlan) => {
+    setStudyPlans(prev => [...prev, plan]);
+    setActiveTab('study');
+  };
+  const handlePlanCreated = (plan: StudyPlan) => {
+    setStudyPlans(prev => [...prev, plan]);
+  };
+  const handleTopicComplete = (planId: string, topicId: string) => {
+    // Update study plans
+    setStudyPlans(prev => prev.map(plan => {
+      if (plan.id === planId) {
+        return {
+          ...plan,
+          topics: plan.topics.map(topic => {
+            if (topic.id === topicId) {
+              return { ...topic, completed: true };
+            }
+            return topic;
+          })
+        };
+      }
+      return plan;
+    }));
+    // Update progress data
+    setProgressData(prev => {
+      const newCompletedTopics = new Set(prev.completedTopics);
+      newCompletedTopics.add(topicId);
+      const plan = studyPlans.find(p => p.id === planId);
+      const topic = plan?.topics.find(t => t.id === topicId);
+      const newActivity = {
+        type: 'completed' as const,
+        title: topic?.title || 'Unknown Topic',
+        course: plan?.title || 'Unknown Plan',
+        time: 'Just now',
+        icon: 'CheckCircle' as const,
+        color: 'text-success-600'
+      };
+      // Calculate study streak
+      const today = new Date().toDateString();
+      const lastStudyDate = prev.lastStudyDate;
+      let newStreak = prev.studyStreak;
+      if (!lastStudyDate || lastStudyDate !== today) {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        if (lastStudyDate === yesterday.toDateString()) {
+          newStreak += 1;
+        } else if (!lastStudyDate) {
+          newStreak = 1;
+        } else {
+          newStreak = 1; // Reset streak if gap
+        }
+      }
+      const newProgress = {
+        ...prev,
+        studyStreak: newStreak,
+        topicsCompleted: prev.topicsCompleted + 1,
+        totalStudyTime: prev.totalStudyTime + 2,
+        weeklyGoal: {
+          ...prev.weeklyGoal,
+          current: Math.min(prev.weeklyGoal.current + 2, prev.weeklyGoal.target)
+        },
+        completedTopics: newCompletedTopics,
+        recentActivity: [newActivity, ...prev.recentActivity.slice(0, 9)],
+        lastStudyDate: today
+      };
+      // Check for new achievements
+      const newAchievements = calculateAchievements(newProgress);
+      newProgress.achievements = newAchievements;
+      return newProgress;
+    });
+  };
+  const handleTopicStart = (planId: string, topicId: string) => {
+    const plan = studyPlans.find(p => p.id === planId);
+    const topic = plan?.topics.find(t => t.id === topicId);
+    const newActivity = {
+      type: 'started' as const,
+      title: topic?.title || 'Unknown Topic',
+      course: plan?.title || 'Unknown Plan',
+      time: 'Just now',
+      icon: 'BookOpen' as const,
+      color: 'text-primary-600'
+    };
+    setProgressData(prev => ({
+      ...prev,
+      recentActivity: [newActivity, ...prev.recentActivity.slice(0, 9)]
+    }));
+  };
+  const calculateAchievements = (progress: ProgressData): number => {
+    let count = 0;
+    if (progress.topicsCompleted >= 1) count++;
+    if (progress.studyStreak >= 7) count++;
+    if (progress.topicsCompleted >= 10) count++;
+    if (progress.totalStudyTime >= 25) count++;
+    if (progress.topicsCompleted >= 50) count++;
+    if (progress.studyStreak >= 30) count++;
+    return count;
+  };
+  const handleViewArticle = (title: string, project: string, content: string) => {
+    setViewingArticle({ title, project, content });
+  };
+  const handleBackFromArticle = () => {
+    setViewingArticle(null);
+  };
+  const handleTabChange = (tab: string) => {
+    // If viewing an article, go back to the previous tab first
+    if (viewingArticle) {
+      setViewingArticle(null);
+    }
+    setActiveTab(tab);
+  };
+  const renderContent = () => {
+    // If viewing an article, show the article viewer
+    if (viewingArticle) {
+      return (
+        <ArticleViewer
+          title={viewingArticle.title}
+          project={viewingArticle.project}
+          content={viewingArticle.content}
+          onBack={handleBackFromArticle}
+          onCreateStudyPlan={(topic) => {
+            setActiveTab('ai-generator');
+            setViewingArticle(null);
+          }}
+          onTransformContent={(title, content) => {
+            setActiveTab('transformer');
+            setViewingArticle(null);
+          }}
+        />
+      );
+    }
+    switch (activeTab) {
+      case 'search':
+        return <SearchInterface onViewArticle={handleViewArticle} />;
+      case 'explore':
+        return <ExploreSection onViewArticle={handleViewArticle} />;
+      case 'study':
+        return (
+          <StudyPlansSection
+            studyPlans={studyPlans}
+            onTopicComplete={handleTopicComplete}
+            onTopicStart={handleTopicStart}
+            onPlanCreated={handlePlanCreated}
+            onViewArticle={handleViewArticle}
+          />
+        );
+      case 'ai-generator':
+        return <AIStudyPlanGenerator onPlanGenerated={handlePlanGenerated} />;
+      case 'transformer':
+        return <ContentTransformer />;
+      case 'multilingual':
+        return <MultilingualExplorer onViewArticle={handleViewArticle} />;
+      default:
+        return <Hero onGetStarted={handleGetStarted} />;
+    }
+  };
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header activeTab={activeTab} onTabChange={handleTabChange} />
+      <main className="animate-fade-in">
+        {renderContent()}
+      </main>
+    </div>
+  );
+}
+export default App;

src/components/AIConfigModal.tsx ADDED Viewed

	@@ -0,0 +1,342 @@

+import React, { useState, useEffect } from 'react';
+import { X, Settings, Check, AlertCircle, ExternalLink, Download, Key, Server, Zap } from 'lucide-react';
+import { AI_PROVIDERS, AIProviderManager } from '../utils/ai-providers';
+const token = import.meta.env.VITE_HF_TOKEN;
+interface AIConfigModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+const AIConfigModal: React.FC<AIConfigModalProps> = ({ isOpen, onClose }) => {
+  const [config, setConfig] = useState(AIProviderManager.getConfig());
+  const [connectionStatus, setConnectionStatus] = useState<Record<string, boolean>>({});
+  const [testing, setTesting] = useState<string | null>(null);
+  const [showApiKey, setShowApiKey] = useState<Record<string, boolean>>({});
+  useEffect(() => {
+    if (isOpen) {
+      const currentConfig = AIProviderManager.getConfig();
+      setConfig(currentConfig);
+      // Auto-configure Hugging Face if not already set
+      if (!currentConfig.apiKeys?.huggingface) {
+        const newConfig = AIProviderManager.updateConfig({
+          selectedProvider: 'huggingface',
+          selectedModel: 'microsoft/DialoGPT-medium',
+          apiKeys: {
+            ...currentConfig.apiKeys,
+            huggingface: token
+          }
+        });
+        setConfig(newConfig);
+        // Test connection automatically
+        setTimeout(() => {
+          testConnection('huggingface');
+        }, 500);
+      }
+    }
+  }, [isOpen]);
+  const handleProviderChange = (providerId: string) => {
+    const provider = AI_PROVIDERS.find(p => p.id === providerId);
+    const newConfig = AIProviderManager.updateConfig({
+      selectedProvider: providerId,
+      selectedModel: provider?.models[0]?.id || ''
+    });
+    setConfig(newConfig);
+  };
+  const handleModelChange = (modelId: string) => {
+    const newConfig = AIProviderManager.updateConfig({
+      selectedModel: modelId
+    });
+    setConfig(newConfig);
+  };
+  const handleApiKeyChange = (providerId: string, apiKey: string) => {
+    const newConfig = AIProviderManager.updateConfig({
+      apiKeys: { ...config.apiKeys, [providerId]: apiKey }
+    });
+    setConfig(newConfig);
+  };
+  const handleEndpointChange = (providerId: string, endpoint: string) => {
+    const newConfig = AIProviderManager.updateConfig({
+      customEndpoints: { ...config.customEndpoints, [providerId]: endpoint }
+    });
+    setConfig(newConfig);
+  };
+  const testConnection = async (providerId: string) => {
+    setTesting(providerId);
+    try {
+      const isConnected = await AIProviderManager.testConnection(providerId);
+      setConnectionStatus(prev => ({ ...prev, [providerId]: isConnected }));
+      if (isConnected && providerId === 'huggingface') {
+        // Show success message
+        console.log('✅ Hugging Face connected successfully!');
+      }
+    } catch (error) {
+      setConnectionStatus(prev => ({ ...prev, [providerId]: false }));
+      console.error(`Connection test failed for ${providerId}:`, error);
+    } finally {
+      setTesting(null);
+    }
+  };
+  const selectedProvider = AI_PROVIDERS.find(p => p.id === config.selectedProvider);
+  const selectedModel = selectedProvider?.models.find(m => m.id === config.selectedModel);
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="p-6 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
+                <Settings className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <h2 className="text-xl font-bold text-gray-900">AI Configuration</h2>
+                <p className="text-gray-600">Configure your open-source AI providers</p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+        <div className="p-6 space-y-8">
+          {/* Success Banner for Hugging Face */}
+          {config.apiKeys?.huggingface && connectionStatus.huggingface === true && (
+            <div className="bg-green-50 border border-green-200 rounded-xl p-4">
+              <div className="flex items-center space-x-3">
+                <Check className="w-5 h-5 text-green-600" />
+                <div>
+                  <h4 className="font-medium text-green-900">🎉 Hugging Face Connected!</h4>
+                  <p className="text-green-700 text-sm">Your API key is working perfectly. AI enhancement is now available!</p>
+                </div>
+              </div>
+            </div>
+          )}
+          {/* Provider Selection */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Select AI Provider</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {AI_PROVIDERS.map((provider) => (
+                <div
+                  key={provider.id}
+                  onClick={() => handleProviderChange(provider.id)}
+                  className={`p-4 border-2 rounded-xl cursor-pointer transition-all ${
+                    config.selectedProvider === provider.id
+                      ? 'border-primary-500 bg-primary-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center space-x-2 mb-2">
+                        <h4 className="font-semibold text-gray-900">{provider.name}</h4>
+                        {provider.isLocal && (
+                          <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">
+                            Local
+                          </span>
+                        )}
+                        {provider.requiresApiKey && (
+                          <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">
+                            API Key
+                          </span>
+                        )}
+                        {provider.id === 'huggingface' && config.apiKeys?.huggingface && (
+                          <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">
+                            ✓ Configured
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-sm text-gray-600 mb-3">{provider.description}</p>
+                      <div className="text-xs text-gray-500">
+                        {provider.models.length} models available
+                      </div>
+                    </div>
+                    <div className="ml-4">
+                      {connectionStatus[provider.id] === true && (
+                        <Check className="w-5 h-5 text-green-600" />
+                      )}
+                      {connectionStatus[provider.id] === false && (
+                        <AlertCircle className="w-5 h-5 text-red-600" />
+                      )}
+                    </div>
+                  </div>
+                  <div className="mt-3 flex items-center space-x-2">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        testConnection(provider.id);
+                      }}
+                      disabled={testing === provider.id}
+                      className="flex items-center space-x-1 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors disabled:opacity-50"
+                    >
+                      <Zap className="w-3 h-3" />
+                      <span>{testing === provider.id ? 'Testing...' : 'Test'}</span>
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* Provider Configuration */}
+          {selectedProvider && (
+            <div className="space-y-6">
+              {/* API Key Configuration */}
+              {selectedProvider.requiresApiKey && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    API Key for {selectedProvider.name}
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showApiKey[selectedProvider.id] ? 'text' : 'password'}
+                      value={config.apiKeys[selectedProvider.id] || ''}
+                      onChange={(e) => handleApiKeyChange(selectedProvider.id, e.target.value)}
+                      placeholder="Enter your API key..."
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent pr-12"
+                    />
+                    <button
+                      onClick={() => setShowApiKey(prev => ({ ...prev, [selectedProvider.id]: !prev[selectedProvider.id] }))}
+                      className="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 hover:bg-gray-100 rounded"
+                    >
+                      <Key className="w-4 h-4 text-gray-400" />
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Your API key is stored locally and never sent to our servers
+                  </p>
+                  {selectedProvider.id === 'huggingface' && config.apiKeys?.huggingface && (
+                    <p className="text-xs text-green-600 mt-1">
+                      ✓ API key configured and ready to use
+                    </p>
+                  )}
+                </div>
+              )}
+              {/* Custom Endpoint Configuration */}
+              {(selectedProvider.id === 'openai-compatible') && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Custom Endpoint
+                  </label>
+                  <div className="relative">
+                    <input
+                      type="text"
+                      value={config.customEndpoints[selectedProvider.id] || selectedProvider.apiUrl}
+                      onChange={(e) => handleEndpointChange(selectedProvider.id, e.target.value)}
+                      placeholder="http://localhost:8080"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent pl-12"
+                    />
+                    <Server className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  </div>
+                </div>
+              )}
+              {/* Model Selection */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-3">
+                  Select Model
+                </label>
+                <div className="grid grid-cols-1 gap-3">
+                  {selectedProvider.models.map((model) => (
+                    <div
+                      key={model.id}
+                      onClick={() => handleModelChange(model.id)}
+                      className={`p-4 border-2 rounded-xl cursor-pointer transition-all ${
+                        config.selectedModel === model.id
+                          ? 'border-primary-500 bg-primary-50'
+                          : 'border-gray-200 hover:border-gray-300'
+                      }`}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <h4 className="font-medium text-gray-900">{model.name}</h4>
+                          <p className="text-sm text-gray-600 mt-1">{model.description}</p>
+                          <div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
+                            <span>Max tokens: {model.maxTokens.toLocaleString()}</span>
+                            <span>Capabilities: {model.capabilities.join(', ')}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+          {/* Installation Instructions */}
+          {selectedProvider?.isLocal && (
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+              <h4 className="font-medium text-blue-900 mb-2">Installation Instructions</h4>
+              {selectedProvider.id === 'ollama' && (
+                <div className="space-y-2 text-sm text-blue-800">
+                  <p>1. Install Ollama from <a href="https://ollama.ai" target="_blank" rel="noopener noreferrer" className="underline">ollama.ai</a></p>
+                  <p>2. Run: <code className="bg-blue-100 px-2 py-1 rounded">ollama pull llama3.2</code></p>
+                  <p>3. Start Ollama service: <code className="bg-blue-100 px-2 py-1 rounded">ollama serve</code></p>
+                </div>
+              )}
+              {selectedProvider.id === 'openai-compatible' && (
+                <div className="space-y-2 text-sm text-blue-800">
+                  <p>Compatible with LocalAI, vLLM, FastChat, and other OpenAI-compatible APIs</p>
+                  <p>Set your custom endpoint URL above</p>
+                </div>
+              )}
+            </div>
+          )}
+          {/* Current Configuration Summary */}
+          {selectedProvider && selectedModel && (
+            <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
+              <h4 className="font-medium text-gray-900 mb-2">Current Configuration</h4>
+              <div className="space-y-1 text-sm text-gray-600">
+                <p><strong>Provider:</strong> {selectedProvider.name}</p>
+                <p><strong>Model:</strong> {selectedModel.name}</p>
+                <p><strong>Max Tokens:</strong> {selectedModel.maxTokens.toLocaleString()}</p>
+                <p><strong>Capabilities:</strong> {selectedModel.capabilities.join(', ')}</p>
+                {config.apiKeys?.huggingface && (
+                  <p><strong>Status:</strong> <span className="text-green-600">✓ Ready to use</span></p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="p-6 border-t border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-600">
+              All configurations are stored locally in your browser
+            </div>
+            <button
+              onClick={onClose}
+              className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AIConfigModal;

src/components/AIStudyPlanGenerator.tsx ADDED Viewed

	@@ -0,0 +1,366 @@

+import React, { useState } from 'react';
+import { Sparkles, BookOpen, Clock, Target, Loader2, CheckCircle, ArrowRight, Settings, Zap, AlertCircle } from 'lucide-react';
+import { AIEnhancedWikimedia } from '../utils/ai-enhanced-wikimedia';
+import { AIProviderManager } from '../utils/ai-providers';
+import { StudyPlan } from '../types';
+interface AIStudyPlanGeneratorProps {
+  onPlanGenerated: (plan: StudyPlan) => void;
+}
+const AIStudyPlanGenerator: React.FC<AIStudyPlanGeneratorProps> = ({ onPlanGenerated }) => {
+  const [topic, setTopic] = useState('');
+  const [difficulty, setDifficulty] = useState<'beginner' | 'intermediate' | 'advanced'>('beginner');
+  const [loading, setLoading] = useState(false);
+  const [generatedPlan, setGeneratedPlan] = useState<StudyPlan | null>(null);
+  const [useAI, setUseAI] = useState(true);
+  const [aiStatus, setAiStatus] = useState<'checking' | 'available' | 'unavailable'>('checking');
+  const [showAIConfig, setShowAIConfig] = useState(false);
+  React.useEffect(() => {
+    checkAIAvailability();
+  }, []);
+  const checkAIAvailability = async () => {
+    setAiStatus('checking');
+    try {
+      const config = AIProviderManager.getConfig();
+      // Check if any provider is configured
+      if (!config.selectedProvider) {
+        setAiStatus('unavailable');
+        return;
+      }
+      // For providers that require API keys, check if key exists
+      const provider = AIProviderManager.getProviderById(config.selectedProvider);
+      if (provider?.requiresApiKey) {
+        const hasApiKey = config.apiKeys && config.apiKeys[config.selectedProvider];
+        if (!hasApiKey) {
+          setAiStatus('unavailable');
+          return;
+        }
+      }
+      // Test actual connection
+      const isAvailable = await AIProviderManager.testConnection(config.selectedProvider);
+      setAiStatus(isAvailable ? 'available' : 'unavailable');
+    } catch (error) {
+      console.error('AI availability check failed:', error);
+      setAiStatus('unavailable');
+    }
+  };
+  const handleGenerate = async () => {
+    if (!topic.trim()) return;
+    setLoading(true);
+    try {
+      let plan: StudyPlan;
+      if (useAI && aiStatus === 'available') {
+        // Use AI-enhanced generation
+        plan = await AIEnhancedWikimedia.generateEnhancedStudyPlan(topic, difficulty);
+      } else {
+        // Use standard Wikimedia-based generation
+        plan = await AIEnhancedWikimedia.generateStudyPlan(topic, difficulty);
+      }
+      setGeneratedPlan(plan);
+    } catch (error) {
+      console.error('Failed to generate study plan:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleAcceptPlan = () => {
+    if (generatedPlan) {
+      onPlanGenerated(generatedPlan);
+      setGeneratedPlan(null);
+      setTopic('');
+    }
+  };
+  const getDifficultyColor = (level: string) => {
+    switch (level) {
+      case 'beginner': return 'bg-success-100 text-success-800';
+      case 'intermediate': return 'bg-warning-100 text-warning-800';
+      case 'advanced': return 'bg-error-100 text-error-800';
+      default: return 'bg-gray-100 text-gray-800';
+    }
+  };
+  const getAIStatusMessage = () => {
+    const config = AIProviderManager.getConfig();
+    const provider = AIProviderManager.getProviderById(config.selectedProvider);
+    switch (aiStatus) {
+      case 'checking':
+        return 'Testing connection to configured AI provider...';
+      case 'available':
+        return `Using ${provider?.name || 'AI'} for enhanced study plan generation`;
+      case 'unavailable':
+        if (!config.selectedProvider) {
+          return 'No AI provider configured. Click "Configure AI" to set up open-source AI.';
+        }
+        if (provider?.requiresApiKey && !config.apiKeys?.[config.selectedProvider]) {
+          return `${provider.name} requires an API key. Click "Configure AI" to add it.`;
+        }
+        return `Cannot connect to ${provider?.name || 'AI provider'}. Using Wikimedia content analysis instead.`;
+      default:
+        return 'Checking AI availability...';
+    }
+  };
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="bg-gradient-to-br from-primary-50 to-secondary-50 rounded-2xl p-8 border border-primary-100">
+        <div className="flex items-center space-x-3 mb-6">
+          <div className="w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl flex items-center justify-center">
+            <Sparkles className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">AI Study Plan Generator</h2>
+            <p className="text-gray-600">Create personalized learning paths from Wikimedia content</p>
+          </div>
+        </div>
+        {/* AI Status Banner */}
+        <div className={`mb-6 p-4 rounded-xl border ${
+          aiStatus === 'available'
+            ? 'bg-green-50 border-green-200'
+            : aiStatus === 'unavailable'
+            ? 'bg-yellow-50 border-yellow-200'
+            : 'bg-gray-50 border-gray-200'
+        }`}>
+          <div className="flex items-start justify-between">
+            <div className="flex items-start space-x-3 flex-1">
+              {aiStatus === 'checking' && <Loader2 className="w-5 h-5 animate-spin text-gray-600 mt-0.5" />}
+              {aiStatus === 'available' && <Zap className="w-5 h-5 text-green-600 mt-0.5" />}
+              {aiStatus === 'unavailable' && <AlertCircle className="w-5 h-5 text-yellow-600 mt-0.5" />}
+              <div className="flex-1">
+                <div className="font-medium text-gray-900 mb-1">
+                  {aiStatus === 'checking' && 'Checking AI Availability...'}
+                  {aiStatus === 'available' && 'AI Enhancement Available'}
+                  {aiStatus === 'unavailable' && 'AI Enhancement Unavailable'}
+                </div>
+                <div className="text-sm text-gray-600">
+                  {getAIStatusMessage()}
+                </div>
+                {aiStatus === 'unavailable' && (
+                  <button
+                    onClick={() => setShowAIConfig(true)}
+                    className="mt-2 text-sm text-primary-600 hover:text-primary-700 font-medium underline"
+                  >
+                    Configure AI Provider
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center space-x-3 ml-4">
+              {aiStatus === 'available' && (
+                <label className="flex items-center space-x-2">
+                  <input
+                    type="checkbox"
+                    checked={useAI}
+                    onChange={(e) => setUseAI(e.target.checked)}
+                    className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span className="text-sm font-medium text-gray-700">Use AI Enhancement</span>
+                </label>
+              )}
+              <button
+                onClick={() => setShowAIConfig(true)}
+                className="flex items-center space-x-1 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors"
+              >
+                <Settings className="w-3 h-3" />
+                <span>Configure</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        {!generatedPlan ? (
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                What would you like to learn?
+              </label>
+              <input
+                type="text"
+                value={topic}
+                onChange={(e) => setTopic(e.target.value)}
+                placeholder="e.g., Machine Learning, Ancient History, Climate Science..."
+                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent text-lg"
+                onKeyDown={(e) => e.key === 'Enter' && handleGenerate()}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-3">
+                Difficulty Level
+              </label>
+              <div className="grid grid-cols-3 gap-3">
+                {(['beginner', 'intermediate', 'advanced'] as const).map((level) => (
+                  <button
+                    key={level}
+                    onClick={() => setDifficulty(level)}
+                    className={`p-4 rounded-xl border-2 transition-all ${
+                      difficulty === level
+                        ? 'border-primary-500 bg-primary-50 text-primary-700'
+                        : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="text-center">
+                      <div className="font-medium capitalize">{level}</div>
+                      <div className="text-sm text-gray-500 mt-1">
+                        {level === 'beginner' && '3-5 topics'}
+                        {level === 'intermediate' && '6-8 topics'}
+                        {level === 'advanced' && '9-12 topics'}
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <button
+              onClick={handleGenerate}
+              disabled={loading || !topic.trim()}
+              className="w-full flex items-center justify-center space-x-2 px-6 py-4 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-xl hover:from-primary-700 hover:to-secondary-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  <span>
+                    {useAI && aiStatus === 'available'
+                      ? 'AI is generating your study plan...'
+                      : 'Generating Study Plan...'
+                    }
+                  </span>
+                </>
+              ) : (
+                <>
+                  <Sparkles className="w-5 h-5" />
+                  <span>
+                    {useAI && aiStatus === 'available'
+                      ? 'Generate AI-Enhanced Study Plan'
+                      : 'Generate Study Plan'
+                    }
+                  </span>
+                </>
+              )}
+            </button>
+            {/* Quick Setup Guide */}
+            {aiStatus === 'unavailable' && (
+              <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                <h4 className="font-medium text-blue-900 mb-3">🚀 Quick AI Setup</h4>
+                <div className="space-y-3 text-sm text-blue-800">
+                  <div className="flex items-start space-x-2">
+                    <span className="font-medium">Option 1 (Privacy):</span>
+                    <div>
+                      <p>Install Ollama locally for complete privacy</p>
+                      <p className="text-blue-600">• Download from ollama.ai</p>
+                      <p className="text-blue-600">• Run: ollama pull llama3.2</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start space-x-2">
+                    <span className="font-medium">Option 2 (Cloud):</span>
+                    <div>
+                      <p>Get free Hugging Face API key</p>
+                      <p className="text-blue-600">• Sign up at huggingface.co</p>
+                      <p className="text-blue-600">• Add key in AI configuration</p>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  onClick={checkAIAvailability}
+                  className="mt-3 text-sm text-blue-600 hover:text-blue-700 font-medium"
+                >
+                  Recheck AI Availability
+                </button>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="bg-white rounded-xl p-6 border border-gray-200">
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2 mb-2">
+                    <h3 className="text-xl font-bold text-gray-900">{generatedPlan.title}</h3>
+                    {useAI && aiStatus === 'available' && (
+                      <span className="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
+                        AI Enhanced
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-gray-600 mb-4">{generatedPlan.description}</p>
+                  <div className="flex items-center space-x-4">
+                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${getDifficultyColor(generatedPlan.difficulty)}`}>
+                      {generatedPlan.difficulty}
+                    </span>
+                    <div className="flex items-center text-sm text-gray-600">
+                      <Clock className="w-4 h-4 mr-1" />
+                      {generatedPlan.estimatedTime}
+                    </div>
+                    <div className="flex items-center text-sm text-gray-600">
+                      <BookOpen className="w-4 h-4 mr-1" />
+                      {generatedPlan.topics.length} topics
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-3">
+                <h4 className="font-medium text-gray-900">Study Topics:</h4>
+                {generatedPlan.topics.slice(0, 5).map((topic, index) => (
+                  <div key={topic.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
+                    <div className="w-6 h-6 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 text-sm font-medium">
+                      {index + 1}
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium text-gray-900">{topic.title}</div>
+                      <div className="text-sm text-gray-600">{topic.estimatedTime}</div>
+                    </div>
+                    <CheckCircle className="w-5 h-5 text-gray-300" />
+                  </div>
+                ))}
+                {generatedPlan.topics.length > 5 && (
+                  <div className="text-sm text-gray-500 text-center py-2">
+                    +{generatedPlan.topics.length - 5} more topics...
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="flex space-x-3">
+              <button
+                onClick={() => setGeneratedPlan(null)}
+                className="flex-1 px-4 py-3 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                Generate New Plan
+              </button>
+              <button
+                onClick={handleAcceptPlan}
+                className="flex-1 flex items-center justify-center space-x-2 px-4 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors"
+              >
+                <span>Accept Plan</span>
+                <ArrowRight className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default AIStudyPlanGenerator;

src/components/ArticleViewer.tsx ADDED Viewed

	@@ -0,0 +1,327 @@

+import React, { useState } from 'react';
+import { ArrowLeft, ExternalLink, BookOpen, Clock, Share2, Bookmark, Eye, Sparkles, Wand2, Loader2 } from 'lucide-react';
+import { WikimediaAPI } from '../utils/wikimedia-api';
+interface ArticleViewerProps {
+  title: string;
+  project: string;
+  content: string;
+  onBack: () => void;
+  onCreateStudyPlan?: (topic: string) => void;
+  onTransformContent?: (title: string, content: string) => void;
+  onViewArticle?: (title: string, project: string, content: string) => void;
+}
+const ArticleViewer: React.FC<ArticleViewerProps> = ({
+  title,
+  project,
+  content,
+  onBack,
+  onCreateStudyPlan,
+  onTransformContent,
+  onViewArticle
+}) => {
+  const [fontSize, setFontSize] = useState('text-base');
+  const [readingTime, setReadingTime] = useState(0);
+  const [relatedArticles, setRelatedArticles] = useState<any[]>([]);
+  const [loadingRelated, setLoadingRelated] = useState(false);
+  const [showRelated, setShowRelated] = useState(false);
+  React.useEffect(() => {
+    // Calculate reading time (average 200 words per minute)
+    const wordCount = content.split(' ').length;
+    const time = Math.ceil(wordCount / 200);
+    setReadingTime(time);
+  }, [content]);
+  const formatContent = (text: string) => {
+    // Split content into paragraphs and format
+    const paragraphs = text.split('\n').filter(p => p.trim().length > 0);
+    return paragraphs.map((paragraph, index) => {
+      // Check if it's a heading (starts with ==)
+      if (paragraph.startsWith('==') && paragraph.endsWith('==')) {
+        const headingText = paragraph.replace(/=/g, '').trim();
+        return (
+          <h2 key={index} className="text-2xl font-bold text-gray-900 mt-8 mb-4 first:mt-0">
+            {headingText}
+          </h2>
+        );
+      }
+      // Regular paragraph
+      return (
+        <p key={index} className={`${fontSize} text-gray-700 leading-relaxed mb-4`}>
+          {paragraph}
+        </p>
+      );
+    });
+  };
+  const getProjectUrl = () => {
+    const baseUrls: Record<string, string> = {
+      wikipedia: 'https://en.wikipedia.org/wiki/',
+      'en-wikipedia': 'https://en.wikipedia.org/wiki/',
+      'es-wikipedia': 'https://es.wikipedia.org/wiki/',
+      'fr-wikipedia': 'https://fr.wikipedia.org/wiki/',
+      'de-wikipedia': 'https://de.wikipedia.org/wiki/',
+      wikibooks: 'https://en.wikibooks.org/wiki/',
+      wikiquote: 'https://en.wikiquote.org/wiki/',
+      wikiversity: 'https://en.wikiversity.org/wiki/',
+      wiktionary: 'https://en.wiktionary.org/wiki/',
+      wikisource: 'https://en.wikisource.org/wiki/',
+    };
+    const baseUrl = baseUrls[project] || baseUrls.wikipedia;
+    return baseUrl + encodeURIComponent(title.replace(/ /g, '_'));
+  };
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: title,
+          text: `Check out this article about ${title}`,
+          url: window.location.href,
+        });
+      } catch (error) {
+        console.log('Error sharing:', error);
+      }
+    } else {
+      // Fallback: copy to clipboard
+      navigator.clipboard.writeText(window.location.href);
+    }
+  };
+  const handleCreateStudyPlan = () => {
+    if (onCreateStudyPlan) {
+      onCreateStudyPlan(title);
+    }
+  };
+  const handleTransformContent = () => {
+    if (onTransformContent) {
+      onTransformContent(title, content);
+    }
+  };
+  const handleFindRelated = async () => {
+    setLoadingRelated(true);
+    setShowRelated(true);
+    try {
+      // Search for related articles using keywords from the title
+      const searchTerms = title.split(' ').filter(term => term.length > 3);
+      const relatedResults = [];
+      // Search for each term and collect results
+      for (const term of searchTerms.slice(0, 2)) {
+        const results = await WikimediaAPI.search(term, 'wikipedia', 3);
+        relatedResults.push(...results.filter(r => r.title !== title));
+      }
+      // Remove duplicates and limit to 6 results
+      const uniqueResults = relatedResults.filter((result, index, self) =>
+        index === self.findIndex(r => r.title === result.title)
+      ).slice(0, 6);
+      setRelatedArticles(uniqueResults);
+    } catch (error) {
+      console.error('Failed to find related articles:', error);
+      setRelatedArticles([]);
+    } finally {
+      setLoadingRelated(false);
+    }
+  };
+  const handleViewRelated = async (article: any) => {
+    try {
+      const content = await WikimediaAPI.getPageContent(article.title, article.project);
+      if (onViewArticle) {
+        onViewArticle(article.title, article.project, content);
+      }
+    } catch (error) {
+      console.error('Failed to load related article:', error);
+    }
+  };
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <button
+          onClick={onBack}
+          className="flex items-center space-x-2 text-primary-600 hover:text-primary-700 font-medium mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>Back</span>
+        </button>
+        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex-1">
+              <div className="flex items-center space-x-2 mb-2">
+                <span className="px-3 py-1 bg-primary-100 text-primary-700 text-sm rounded-full font-medium capitalize">
+                  {project.replace('-wikipedia', '')}
+                </span>
+                <div className="flex items-center text-sm text-gray-600">
+                  <Clock className="w-4 h-4 mr-1" />
+                  <span>{readingTime} min read</span>
+                </div>
+              </div>
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">{title}</h1>
+            </div>
+          </div>
+          {/* Article Controls */}
+          <div className="flex items-center justify-between pt-4 border-t border-gray-200">
+            <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-gray-600">Font size:</span>
+                <select
+                  value={fontSize}
+                  onChange={(e) => setFontSize(e.target.value)}
+                  className="text-sm border border-gray-300 rounded px-2 py-1"
+                >
+                  <option value="text-sm">Small</option>
+                  <option value="text-base">Medium</option>
+                  <option value="text-lg">Large</option>
+                  <option value="text-xl">Extra Large</option>
+                </select>
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={handleShare}
+                className="flex items-center space-x-1 px-3 py-2 text-gray-600 hover:text-gray-900 transition-colors"
+              >
+                <Share2 className="w-4 h-4" />
+                <span className="text-sm">Share</span>
+              </button>
+              <button className="flex items-center space-x-1 px-3 py-2 text-gray-600 hover:text-gray-900 transition-colors">
+                <Bookmark className="w-4 h-4" />
+                <span className="text-sm">Save</span>
+              </button>
+              <a
+                href={getProjectUrl()}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center space-x-1 px-3 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+              >
+                <ExternalLink className="w-4 h-4" />
+                <span className="text-sm">View Original</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Article Content */}
+      <div className="bg-white rounded-2xl p-8 border border-gray-200 shadow-sm">
+        <div className="prose max-w-none">
+          {formatContent(content)}
+        </div>
+        {content.length < 500 && (
+          <div className="mt-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <p className="text-yellow-800 text-sm">
+              This appears to be a short excerpt. For the complete article with images, references, and full content,
+              please visit the original source.
+            </p>
+          </div>
+        )}
+      </div>
+      {/* Related Actions */}
+      <div className="mt-8 bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">What's Next?</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <button
+            onClick={handleCreateStudyPlan}
+            className="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-primary-200 hover:bg-primary-50 transition-colors group"
+          >
+            <Sparkles className="w-6 h-6 text-primary-600 group-hover:scale-110 transition-transform" />
+            <div className="text-left">
+              <div className="font-medium text-gray-900">Create Study Plan</div>
+              <div className="text-sm text-gray-600">Generate a learning path from this topic</div>
+            </div>
+          </button>
+          <button
+            onClick={handleFindRelated}
+            disabled={loadingRelated}
+            className="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-primary-200 hover:bg-primary-50 transition-colors group disabled:opacity-50"
+          >
+            {loadingRelated ? (
+              <Loader2 className="w-6 h-6 text-primary-600 animate-spin" />
+            ) : (
+              <Eye className="w-6 h-6 text-primary-600 group-hover:scale-110 transition-transform" />
+            )}
+            <div className="text-left">
+              <div className="font-medium text-gray-900">Find Related</div>
+              <div className="text-sm text-gray-600">
+                {loadingRelated ? 'Searching...' : 'Discover similar articles'}
+              </div>
+            </div>
+          </button>
+          <button
+            onClick={handleTransformContent}
+            className="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-primary-200 hover:bg-primary-50 transition-colors group"
+          >
+            <Wand2 className="w-6 h-6 text-primary-600 group-hover:scale-110 transition-transform" />
+            <div className="text-left">
+              <div className="font-medium text-gray-900">Transform Content</div>
+              <div className="text-sm text-gray-600">Create quiz or summary</div>
+            </div>
+          </button>
+        </div>
+      </div>
+      {/* Related Articles Section */}
+      {showRelated && (
+        <div className="mt-8 bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Related Articles</h3>
+          {loadingRelated ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="w-6 h-6 animate-spin text-primary-600" />
+              <span className="ml-2 text-gray-600">Finding related articles...</span>
+            </div>
+          ) : relatedArticles.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {relatedArticles.map((article, index) => (
+                <div
+                  key={index}
+                  className="p-4 border border-gray-200 rounded-lg hover:border-primary-200 hover:bg-primary-50 transition-colors cursor-pointer"
+                  onClick={() => handleViewRelated(article)}
+                >
+                  <h4 className="font-medium text-gray-900 mb-2">{article.title}</h4>
+                  <p className="text-sm text-gray-600 mb-2">
+                    {article.snippet.replace(/<[^>]*>/g, '').substring(0, 100)}...
+                  </p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-primary-600 bg-primary-100 px-2 py-1 rounded-full">
+                      {article.project}
+                    </span>
+                    <button className="text-sm text-primary-600 hover:text-primary-700">
+                      Read more →
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8">
+              <p className="text-gray-600">No related articles found. Try searching for specific topics.</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+export default ArticleViewer;

src/components/ContentTransformer.tsx ADDED Viewed

	@@ -0,0 +1,488 @@

+import React, { useState } from 'react';
+import { Wand2, FileText, List, BookOpen, MessageSquare, Loader2, Settings, Zap } from 'lucide-react';
+import { AIEnhancedWikimedia } from '../utils/ai-enhanced-wikimedia';
+import { AIProviderManager } from '../utils/ai-providers';
+const ContentTransformer: React.FC = () => {
+  const [inputUrl, setInputUrl] = useState('');
+  const [transformationType, setTransformationType] = useState<'summary' | 'quiz' | 'outline' | 'flashcards'>('summary');
+  const [loading, setLoading] = useState(false);
+  const [transformedContent, setTransformedContent] = useState<any>(null);
+  const [selectedAnswers, setSelectedAnswers] = useState<Record<number, number>>({});
+  const [useAI, setUseAI] = useState(true);
+  const [aiStatus, setAiStatus] = useState<'checking' | 'available' | 'unavailable'>('checking');
+  React.useEffect(() => {
+    checkAIAvailability();
+  }, []);
+  const checkAIAvailability = async () => {
+    try {
+      const config = AIProviderManager.getConfig();
+      const isAvailable = await AIProviderManager.testConnection(config.selectedProvider);
+      setAiStatus(isAvailable ? 'available' : 'unavailable');
+    } catch (error) {
+      setAiStatus('unavailable');
+    }
+  };
+  const transformationTypes = [
+    {
+      id: 'summary' as const,
+      name: 'Summary',
+      description: 'Create concise summaries',
+      icon: FileText,
+      color: 'bg-primary-500'
+    },
+    {
+      id: 'quiz' as const,
+      name: 'Quiz',
+      description: 'Generate practice questions',
+      icon: MessageSquare,
+      color: 'bg-secondary-500'
+    },
+    {
+      id: 'outline' as const,
+      name: 'Study Outline',
+      description: 'Structured learning outline',
+      icon: List,
+      color: 'bg-accent-500'
+    },
+    {
+      id: 'flashcards' as const,
+      name: 'Flashcards',
+      description: 'Key concepts for memorization',
+      icon: BookOpen,
+      color: 'bg-success-500'
+    }
+  ];
+  const extractTitleFromUrl = (url: string): string => {
+    try {
+      const urlObj = new URL(url);
+      const pathParts = urlObj.pathname.split('/');
+      const title = pathParts[pathParts.length - 1];
+      return decodeURIComponent(title.replace(/_/g, ' '));
+    } catch {
+      return '';
+    }
+  };
+  const detectProject = (url: string): string => {
+    if (url.includes('wikipedia.org')) return 'wikipedia';
+    if (url.includes('wikibooks.org')) return 'wikibooks';
+    if (url.includes('wikiversity.org')) return 'wikiversity';
+    if (url.includes('wikiquote.org')) return 'wikiquote';
+    if (url.includes('wiktionary.org')) return 'wiktionary';
+    if (url.includes('wikisource.org')) return 'wikisource';
+    return 'wikipedia';
+  };
+  const handleTransform = async () => {
+    if (!inputUrl.trim()) return;
+    setLoading(true);
+    setSelectedAnswers({});
+    try {
+      const title = extractTitleFromUrl(inputUrl);
+      const project = detectProject(inputUrl);
+      const content = await AIEnhancedWikimedia.getPageContent(title, project);
+      let transformed;
+      if (useAI && aiStatus === 'available') {
+        // Use AI-enhanced transformation
+        switch (transformationType) {
+          case 'summary':
+            transformed = await AIEnhancedWikimedia.generateSummaryFromContent(content, title);
+            break;
+          case 'quiz':
+            transformed = await AIEnhancedWikimedia.generateQuizFromContent(content, title);
+            break;
+          case 'outline':
+            transformed = await AIEnhancedWikimedia.generateStudyOutline(content, title);
+            break;
+          case 'flashcards':
+            transformed = await AIEnhancedWikimedia.generateFlashcards(content, title);
+            break;
+        }
+      } else {
+        // Use fallback rule-based transformation
+        switch (transformationType) {
+          case 'summary':
+            transformed = generateSummary(content, title);
+            break;
+          case 'quiz':
+            transformed = generateQuiz(content, title);
+            break;
+          case 'outline':
+            transformed = generateOutline(content, title);
+            break;
+          case 'flashcards':
+            transformed = generateFlashcards(content, title);
+            break;
+        }
+      }
+      setTransformedContent(transformed);
+    } catch (error) {
+      console.error('Content transformation failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  // Fallback generation methods (existing code)
+  const generateSummary = (content: string, title: string) => {
+    const sentences = content.split('.').filter(s => s.trim().length > 20);
+    const keySentences = sentences.slice(0, 5);
+    return {
+      type: 'summary',
+      title: `Summary: ${title}`,
+      content: keySentences.join('. ') + '.',
+      keyPoints: sentences.slice(5, 10).map(s => s.trim()).filter(s => s.length > 0)
+    };
+  };
+  const generateQuiz = (content: string, title: string) => {
+    const questions = [
+      {
+        question: `What is the main topic discussed in the article about ${title}?`,
+        options: [
+          `The fundamental concepts and principles of ${title}`,
+          `The historical development of ${title}`,
+          `The practical applications of ${title}`,
+          `The criticism and controversies surrounding ${title}`
+        ],
+        correct: 0
+      }
+    ];
+    return {
+      type: 'quiz',
+      title: `Quiz: ${title}`,
+      questions
+    };
+  };
+  const generateOutline = (content: string, title: string) => {
+    return {
+      type: 'outline',
+      title: `Study Outline: ${title}`,
+      sections: [
+        {
+          title: 'Introduction',
+          points: [
+            `Overview and definition of ${title}`,
+            'Historical context and background',
+            'Key terminology and concepts'
+          ]
+        },
+        {
+          title: 'Main Concepts',
+          points: [
+            'Core principles and theories',
+            'Important characteristics and features',
+            'Fundamental mechanisms and processes'
+          ]
+        }
+      ]
+    };
+  };
+  const generateFlashcards = (content: string, title: string) => {
+    const cards = [
+      {
+        front: `What is ${title}?`,
+        back: `${title} is a comprehensive topic that encompasses various concepts, principles, and applications within its field of study.`
+      },
+      {
+        front: 'Key characteristics',
+        back: `The main features include fundamental principles, practical applications, and significant impact on related areas.`
+      }
+    ];
+    return {
+      type: 'flashcards',
+      title: `Flashcards: ${title}`,
+      cards
+    };
+  };
+  const handleAnswerSelect = (questionIndex: number, answerIndex: number) => {
+    setSelectedAnswers(prev => ({
+      ...prev,
+      [questionIndex]: answerIndex
+    }));
+  };
+  const renderTransformedContent = () => {
+    if (!transformedContent) return null;
+    switch (transformedContent.type) {
+      case 'summary':
+        return (
+          <div className="space-y-4">
+            <div className="prose max-w-none">
+              <p className="text-gray-700 leading-relaxed">{transformedContent.content}</p>
+            </div>
+            {transformedContent.keyPoints && (
+              <div>
+                <h4 className="font-medium text-gray-900 mb-3">Key Points:</h4>
+                <ul className="space-y-2">
+                  {transformedContent.keyPoints.map((point: string, index: number) => (
+                    <li key={index} className="flex items-start space-x-2">
+                      <div className="w-2 h-2 bg-primary-500 rounded-full mt-2 flex-shrink-0" />
+                      <span className="text-gray-700">{point}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        );
+      case 'quiz':
+        return (
+          <div className="space-y-6">
+            {transformedContent.questions.map((q: any, index: number) => (
+              <div key={index} className="p-6 bg-gray-50 rounded-xl">
+                <h4 className="font-medium text-gray-900 mb-4 text-lg">
+                  {index + 1}. {q.question}
+                </h4>
+                <div className="space-y-3">
+                  {q.options.map((option: string, optIndex: number) => (
+                    <label
+                      key={optIndex}
+                      className={`flex items-start space-x-3 cursor-pointer p-3 rounded-lg border-2 transition-all ${
+                        selectedAnswers[index] === optIndex
+                          ? selectedAnswers[index] === q.correct
+                            ? 'border-success-500 bg-success-50'
+                            : 'border-error-500 bg-error-50'
+                          : 'border-gray-200 hover:border-gray-300 bg-white'
+                      }`}
+                    >
+                      <input
+                        type="radio"
+                        name={`q${index}`}
+                        value={optIndex}
+                        checked={selectedAnswers[index] === optIndex}
+                        onChange={() => handleAnswerSelect(index, optIndex)}
+                        className="mt-1 text-primary-600 focus:ring-primary-500"
+                      />
+                      <span className="text-gray-700 flex-1">{option}</span>
+                      {selectedAnswers[index] !== undefined && optIndex === q.correct && (
+                        <span className="text-success-600 font-medium text-sm">✓ Correct</span>
+                      )}
+                    </label>
+                  ))}
+                </div>
+                {selectedAnswers[index] !== undefined && q.explanation && (
+                  <div className="mt-4 p-3 bg-blue-50 rounded-lg">
+                    <p className="text-sm text-blue-800">
+                      <strong>Explanation:</strong> {q.explanation}
+                    </p>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        );
+      case 'outline':
+        return (
+          <div className="space-y-6">
+            {transformedContent.sections.map((section: any, index: number) => (
+              <div key={index} className="border-l-4 border-primary-500 pl-6">
+                <h4 className="font-semibold text-gray-900 mb-3 text-lg">{section.title}</h4>
+                <ul className="space-y-2">
+                  {section.points.map((point: string, pointIndex: number) => (
+                    <li key={pointIndex} className="flex items-start space-x-2">
+                      <div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0" />
+                      <span className="text-gray-700">{point}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        );
+      case 'flashcards':
+        return (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {transformedContent.cards.map((card: any, index: number) => (
+              <div key={index} className="group perspective-1000">
+                <div className="relative w-full h-48 transition-transform duration-500 transform-style-preserve-3d group-hover:rotate-y-180">
+                  <div className="absolute inset-0 w-full h-full backface-hidden bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl p-6 flex items-center justify-center text-white">
+                    <div className="text-center">
+                      <h4 className="font-semibold text-lg mb-2">Question {index + 1}</h4>
+                      <p className="text-primary-100">{card.front}</p>
+                    </div>
+                  </div>
+                  <div className="absolute inset-0 w-full h-full backface-hidden rotate-y-180 bg-white border-2 border-primary-200 rounded-xl p-6 flex items-center justify-center">
+                    <div className="text-center">
+                      <p className="text-gray-700 leading-relaxed">{card.back}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-r from-accent-500 to-warning-500 rounded-xl flex items-center justify-center">
+            <Wand2 className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Content Transformer</h1>
+            <p className="text-gray-600">Transform Wikimedia content into interactive learning materials</p>
+          </div>
+        </div>
+      </div>
+      <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm mb-8">
+        {/* AI Status Banner */}
+        <div className={`mb-6 p-4 rounded-xl border ${
+          aiStatus === 'available'
+            ? 'bg-green-50 border-green-200'
+            : aiStatus === 'unavailable'
+            ? 'bg-yellow-50 border-yellow-200'
+            : 'bg-gray-50 border-gray-200'
+        }`}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              {aiStatus === 'checking' && <Loader2 className="w-5 h-5 animate-spin text-gray-600" />}
+              {aiStatus === 'available' && <Zap className="w-5 h-5 text-green-600" />}
+              {aiStatus === 'unavailable' && <Settings className="w-5 h-5 text-yellow-600" />}
+              <div>
+                <div className="font-medium text-gray-900">
+                  {aiStatus === 'available' && 'AI Enhancement Available'}
+                  {aiStatus === 'unavailable' && 'AI Enhancement Unavailable'}
+                  {aiStatus === 'checking' && 'Checking AI availability...'}
+                </div>
+                <div className="text-sm text-gray-600">
+                  {aiStatus === 'available' && 'Using open-source AI for intelligent content transformation'}
+                  {aiStatus === 'unavailable' && 'Using rule-based transformation (still creates useful content!)'}
+                </div>
+              </div>
+            </div>
+            {aiStatus === 'available' && (
+              <label className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  checked={useAI}
+                  onChange={(e) => setUseAI(e.target.checked)}
+                  className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                />
+                <span className="text-sm font-medium text-gray-700">Use AI Enhancement</span>
+              </label>
+            )}
+          </div>
+        </div>
+        <div className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Wikimedia Article URL
+            </label>
+            <input
+              type="url"
+              value={inputUrl}
+              onChange={(e) => setInputUrl(e.target.value)}
+              placeholder="https://en.wikipedia.org/wiki/Machine_Learning"
+              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-3">
+              Transformation Type
+            </label>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {transformationTypes.map((type) => {
+                const Icon = type.icon;
+                return (
+                  <button
+                    key={type.id}
+                    onClick={() => setTransformationType(type.id)}
+                    className={`p-4 rounded-xl border-2 transition-all ${
+                      transformationType === type.id
+                        ? 'border-primary-500 bg-primary-50'
+                        : 'border-gray-200 bg-white hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="text-center">
+                      <div className={`w-10 h-10 ${type.color} rounded-lg flex items-center justify-center mx-auto mb-2`}>
+                        <Icon className="w-5 h-5 text-white" />
+                      </div>
+                      <div className="font-medium text-gray-900">{type.name}</div>
+                      <div className="text-xs text-gray-500 mt-1">{type.description}</div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          <button
+            onClick={handleTransform}
+            disabled={loading || !inputUrl.trim()}
+            className="w-full flex items-center justify-center space-x-2 px-6 py-4 bg-gradient-to-r from-accent-600 to-warning-600 text-white rounded-xl hover:from-accent-700 hover:to-warning-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-5 h-5 animate-spin" />
+                <span>
+                  {useAI && aiStatus === 'available'
+                    ? 'AI is transforming content...'
+                    : 'Transforming Content...'
+                  }
+                </span>
+              </>
+            ) : (
+              <>
+                <Wand2 className="w-5 h-5" />
+                <span>
+                  {useAI && aiStatus === 'available'
+                    ? 'AI Transform Content'
+                    : 'Transform Content'
+                  }
+                </span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+      {transformedContent && (
+        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-xl font-bold text-gray-900">{transformedContent.title}</h2>
+            {useAI && aiStatus === 'available' && (
+              <span className="px-3 py-1 bg-purple-100 text-purple-700 text-sm rounded-full font-medium">
+                AI Enhanced
+              </span>
+            )}
+          </div>
+          {renderTransformedContent()}
+        </div>
+      )}
+    </div>
+  );
+};
+export default ContentTransformer;

src/components/ExploreSection.tsx ADDED Viewed

	@@ -0,0 +1,419 @@

+import React, { useState, useEffect } from 'react';
+import { Compass, Shuffle, BookOpen, Quote, GraduationCap, Languages, FileText, Sparkles, ExternalLink, ArrowLeft, Loader2 } from 'lucide-react';
+import { WikimediaAPI, WIKIMEDIA_PROJECTS } from '../utils/wikimedia-api';
+import { SearchResult } from '../types';
+interface ExploreSectionProps {
+  onViewArticle?: (title: string, project: string, content: string) => void;
+}
+const ExploreSection: React.FC<ExploreSectionProps> = ({ onViewArticle }) => {
+  const [randomArticles, setRandomArticles] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState('featured');
+  const [selectedProject, setSelectedProject] = useState<string | null>(null);
+  const [projectContent, setProjectContent] = useState<SearchResult[]>([]);
+  const [loadingProject, setLoadingProject] = useState(false);
+  const categories = [
+    { id: 'featured', name: 'Featured Content', icon: Sparkles },
+    { id: 'trending', name: 'Trending Topics', icon: Compass },
+    { id: 'random', name: 'Random Discovery', icon: Shuffle },
+  ];
+  const projectCards = WIKIMEDIA_PROJECTS.map(project => ({
+    ...project,
+    stats: {
+      articles: Math.floor(Math.random() * 1000000) + 100000,
+      languages: Math.floor(Math.random() * 100) + 50,
+      contributors: Math.floor(Math.random() * 50000) + 10000,
+    }
+  }));
+  const getIconComponent = (iconName: string) => {
+    const icons: { [key: string]: React.ComponentType<any> } = {
+      Book: BookOpen,
+      BookOpen: BookOpen,
+      Quote: Quote,
+      GraduationCap: GraduationCap,
+      Languages: Languages,
+      FileText: FileText,
+    };
+    return icons[iconName] || BookOpen;
+  };
+  const loadRandomContent = async () => {
+    setLoading(true);
+    try {
+      const allArticles: SearchResult[] = [];
+      // Get random articles from multiple projects
+      for (const project of WIKIMEDIA_PROJECTS.slice(0, 3)) {
+        const articles = await WikimediaAPI.getRandomArticles(project.id, 2);
+        allArticles.push(...articles);
+      }
+      // Shuffle the articles
+      const shuffled = allArticles.sort(() => 0.5 - Math.random());
+      setRandomArticles(shuffled.slice(0, 6));
+    } catch (error) {
+      console.error('Failed to load random content:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleProjectClick = async (projectId: string) => {
+    setSelectedProject(projectId);
+    setLoadingProject(true);
+    try {
+      // Get featured/popular content from the selected project
+      const content = await WikimediaAPI.getRandomArticles(projectId, 12);
+      setProjectContent(content);
+    } catch (error) {
+      console.error('Failed to load project content:', error);
+      setProjectContent([]);
+    } finally {
+      setLoadingProject(false);
+    }
+  };
+  const handleViewInWikistro = async (article: SearchResult) => {
+    try {
+      const content = await WikimediaAPI.getPageContent(article.title, article.project);
+      if (onViewArticle) {
+        onViewArticle(article.title, article.project, content);
+      }
+    } catch (error) {
+      console.error('Failed to load article content:', error);
+    }
+  };
+  useEffect(() => {
+    if (selectedCategory === 'random') {
+      loadRandomContent();
+    }
+  }, [selectedCategory]);
+  const featuredTopics = [
+    {
+      title: 'Artificial Intelligence',
+      description: 'Explore the fascinating world of AI, machine learning, and neural networks',
+      image: 'https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=400',
+      project: 'wikipedia',
+      readTime: '15 min read'
+    },
+    {
+      title: 'Climate Change',
+      description: 'Understanding global warming, its causes, effects, and potential solutions',
+      image: 'https://images.pexels.com/photos/60013/desert-drought-dehydrated-clay-soil-60013.jpeg?auto=compress&cs=tinysrgb&w=400',
+      project: 'wikipedia',
+      readTime: '12 min read'
+    },
+    {
+      title: 'Quantum Physics',
+      description: 'Dive into the mysterious world of quantum mechanics and particle physics',
+      image: 'https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?auto=compress&cs=tinysrgb&w=400',
+      project: 'wikipedia',
+      readTime: '20 min read'
+    },
+    {
+      title: 'Ancient History',
+      description: 'Journey through ancient civilizations and their remarkable achievements',
+      image: 'https://images.pexels.com/photos/161799/egypt-hieroglyphics-text-wall-161799.jpeg?auto=compress&cs=tinysrgb&w=400',
+      project: 'wikipedia',
+      readTime: '18 min read'
+    },
+    {
+      title: 'Space Exploration',
+      description: 'Discover the latest in space technology and cosmic discoveries',
+      image: 'https://images.pexels.com/photos/586056/pexels-photo-586056.jpeg?auto=compress&cs=tinysrgb&w=400',
+      project: 'wikipedia',
+      readTime: '16 min read'
+    },
+    {
+      title: 'Renewable Energy',
+      description: 'Learn about sustainable energy sources and green technologies',
+      image: 'https://images.pexels.com/photos/9800029/pexels-photo-9800029.jpeg?auto=compress&cs=tinysrgb&w=400',
+      project: 'wikipedia',
+      readTime: '14 min read'
+    }
+  ];
+  // If a project is selected, show project content
+  if (selectedProject) {
+    const project = WIKIMEDIA_PROJECTS.find(p => p.id === selectedProject);
+    const Icon = project ? getIconComponent(project.icon) : BookOpen;
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <button
+            onClick={() => setSelectedProject(null)}
+            className="flex items-center space-x-2 text-primary-600 hover:text-primary-700 font-medium mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            <span>Back to Explore</span>
+          </button>
+          {project && (
+            <div className="flex items-center space-x-4 mb-6">
+              <div className={`w-16 h-16 ${project.color} rounded-2xl flex items-center justify-center`}>
+                <Icon className="w-8 h-8 text-white" />
+              </div>
+              <div>
+                <h1 className="text-3xl font-bold text-gray-900">{project.name}</h1>
+                <p className="text-gray-600">{project.description}</p>
+              </div>
+            </div>
+          )}
+        </div>
+        {loadingProject ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="w-8 h-8 animate-spin text-primary-600" />
+            <span className="ml-3 text-gray-600">Loading {project?.name} content...</span>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {projectContent.map((article, index) => (
+              <div
+                key={index}
+                className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-md transition-all duration-200 hover:border-primary-200"
+              >
+                <div className="flex items-center space-x-2 mb-3">
+                  <span className="text-xs font-medium text-secondary-600 bg-secondary-50 px-2 py-1 rounded-full">
+                    {article.project}
+                  </span>
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  {article.title}
+                </h3>
+                <p className="text-gray-600 text-sm mb-4">{article.snippet}</p>
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => handleViewInWikistro(article)}
+                    className="flex-1 px-3 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm"
+                  >
+                    View in Wikistro
+                  </button>
+                  <a
+                    href={article.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                  >
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Explore Knowledge</h1>
+        <p className="text-gray-600">Discover amazing content across Wikimedia projects</p>
+      </div>
+      {/* Category Tabs */}
+      <div className="mb-8">
+        <div className="flex space-x-1 bg-gray-100 p-1 rounded-xl">
+          {categories.map((category) => {
+            const Icon = category.icon;
+            return (
+              <button
+                key={category.id}
+                onClick={() => setSelectedCategory(category.id)}
+                className={`flex items-center space-x-2 px-4 py-3 rounded-lg text-sm font-medium transition-all ${
+                  selectedCategory === category.id
+                    ? 'bg-white text-primary-700 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                <span>{category.name}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      {/* Wikimedia Projects Overview */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Wikimedia Projects</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {projectCards.map((project) => {
+            const Icon = getIconComponent(project.icon);
+            return (
+              <div
+                key={project.id}
+                onClick={() => handleProjectClick(project.id)}
+                className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-200 hover:border-primary-200 cursor-pointer group"
+              >
+                <div className="flex items-center space-x-3 mb-4">
+                  <div className={`w-12 h-12 ${project.color} rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform`}>
+                    <Icon className="w-6 h-6 text-white" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">{project.name}</h3>
+                    <p className="text-sm text-gray-600">{project.description}</p>
+                  </div>
+                  <ExternalLink className="w-5 h-5 text-gray-400 group-hover:text-primary-600 transition-colors" />
+                </div>
+                <div className="grid grid-cols-3 gap-4 text-center">
+                  <div>
+                    <div className="text-lg font-semibold text-gray-900">
+                      {(project.stats.articles / 1000).toFixed(0)}K
+                    </div>
+                    <div className="text-xs text-gray-600">Articles</div>
+                  </div>
+                  <div>
+                    <div className="text-lg font-semibold text-gray-900">
+                      {project.stats.languages}
+                    </div>
+                    <div className="text-xs text-gray-600">Languages</div>
+                  </div>
+                  <div>
+                    <div className="text-lg font-semibold text-gray-900">
+                      {(project.stats.contributors / 1000).toFixed(0)}K
+                    </div>
+                    <div className="text-xs text-gray-600">Contributors</div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      {/* Content based on selected category */}
+      {selectedCategory === 'featured' && (
+        <div>
+          <h2 className="text-2xl font-semibold text-gray-900 mb-6">Featured Topics</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {featuredTopics.map((topic, index) => (
+              <div
+                key={index}
+                className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer group"
+                onClick={() => handleViewInWikistro({
+                  title: topic.title,
+                  pageid: index,
+                  size: 0,
+                  snippet: topic.description,
+                  timestamp: new Date().toISOString(),
+                  project: topic.project,
+                  url: `https://en.wikipedia.org/wiki/${encodeURIComponent(topic.title)}`
+                })}
+              >
+                <div className="aspect-w-16 aspect-h-9 overflow-hidden">
+                  <img
+                    src={topic.image}
+                    alt={topic.title}
+                    className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+                <div className="p-6">
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-1 rounded-full">
+                      {topic.project}
+                    </span>
+                    <span className="text-xs text-gray-500">{topic.readTime}</span>
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary-600 transition-colors">
+                    {topic.title}
+                  </h3>
+                  <p className="text-gray-600 text-sm leading-relaxed">{topic.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {selectedCategory === 'random' && (
+        <div>
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-semibold text-gray-900">Random Discovery</h2>
+            <button
+              onClick={loadRandomContent}
+              disabled={loading}
+              className="flex items-center space-x-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
+            >
+              <Shuffle className="w-4 h-4" />
+              <span>{loading ? 'Loading...' : 'Shuffle'}</span>
+            </button>
+          </div>
+          {loading && (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="w-8 h-8 animate-spin text-primary-600" />
+              <span className="ml-3 text-gray-600">Finding random articles...</span>
+            </div>
+          )}
+          {!loading && randomArticles.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {randomArticles.map((article, index) => (
+                <div
+                  key={index}
+                  className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-md transition-all duration-200 hover:border-primary-200"
+                >
+                  <div className="flex items-center space-x-2 mb-3">
+                    <span className="text-xs font-medium text-secondary-600 bg-secondary-50 px-2 py-1 rounded-full">
+                      {article.project}
+                    </span>
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                    {article.title}
+                  </h3>
+                  <p className="text-gray-600 text-sm mb-4">{article.snippet}</p>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => handleViewInWikistro(article)}
+                      className="flex-1 px-3 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm"
+                    >
+                      View in Wikistro
+                    </button>
+                    <a
+                      href={article.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                      <ExternalLink className="w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+      {selectedCategory === 'trending' && (
+        <div>
+          <h2 className="text-2xl font-semibold text-gray-900 mb-6">Trending Topics</h2>
+          <div className="bg-white rounded-2xl p-8 text-center border border-gray-200">
+            <Compass className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">Coming Soon</h3>
+            <p className="text-gray-600">
+              We're working on bringing you the most trending topics across Wikimedia projects.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default ExploreSection;

src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,83 @@

+import React, { useState } from 'react';
+import { Search, BookOpen, Compass, Sparkles, Wand2, Globe, Settings } from 'lucide-react';
+import AIConfigModal from './AIConfigModal';
+interface HeaderProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}
+const Header: React.FC<HeaderProps> = ({ activeTab, onTabChange }) => {
+  const [showAIConfig, setShowAIConfig] = useState(false);
+  const tabs = [
+    { id: 'search', label: 'Search', icon: Search },
+    { id: 'explore', label: 'Explore', icon: Compass },
+    { id: 'study', label: 'Study Plans', icon: BookOpen },
+    { id: 'ai-generator', label: 'AI Generator', icon: Sparkles },
+    { id: 'transformer', label: 'Transform', icon: Wand2 },
+    { id: 'multilingual', label: 'Multilingual', icon: Globe },
+  ];
+  return (
+    <>
+      <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
+                <div className="w-8 h-8 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center">
+                  <BookOpen className="w-5 h-5 text-white" />
+                </div>
+                <h1 className="text-xl font-bold text-gray-900">Wikistro</h1>
+              </div>
+              <div className="hidden sm:block">
+                <p className="text-sm text-gray-600">Transform Knowledge into Learning</p>
+              </div>
+            </div>
+            <nav className="flex items-center space-x-1">
+              <div className="flex space-x-1 overflow-x-auto">
+                {tabs.map((tab) => {
+                  const Icon = tab.icon;
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => onTabChange(tab.id)}
+                      className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 whitespace-nowrap ${
+                        activeTab === tab.id
+                          ? 'bg-primary-50 text-primary-700 shadow-sm'
+                          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                      }`}
+                    >
+                      <Icon className="w-4 h-4" />
+                      <span className="hidden sm:inline">{tab.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="ml-2 pl-2 border-l border-gray-200">
+                <button
+                  onClick={() => setShowAIConfig(true)}
+                  className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-all duration-200"
+                  title="AI Configuration"
+                >
+                  <Settings className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm font-medium">AI Config</span>
+                </button>
+              </div>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <AIConfigModal
+        isOpen={showAIConfig}
+        onClose={() => setShowAIConfig(false)}
+      />
+    </>
+  );
+};
+export default Header;

src/components/Hero.tsx ADDED Viewed

	@@ -0,0 +1,88 @@

+import React from 'react';
+import { ArrowRight, BookOpen, Users, Globe, Sparkles } from 'lucide-react';
+interface HeroProps {
+  onGetStarted: () => void;
+}
+const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
+  const features = [
+    {
+      icon: BookOpen,
+      title: 'Interactive Learning',
+      description: 'Transform static content into engaging study experiences'
+    },
+    {
+      icon: Globe,
+      title: 'Multi-language Support',
+      description: 'Access knowledge in hundreds of languages'
+    },
+    {
+      icon: Users,
+      title: 'Community Driven',
+      description: 'Built on the foundation of collaborative knowledge'
+    },
+    {
+      icon: Sparkles,
+      title: 'Smart Recommendations',
+      description: 'Discover related topics and build comprehensive understanding'
+    }
+  ];
+  return (
+    <div className="relative bg-gradient-to-br from-primary-50 via-white to-secondary-50 py-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6 animate-fade-in">
+            Transform{' '}
+            <span className="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
+              Knowledge
+            </span>{' '}
+            into Learning
+          </h1>
+          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed animate-slide-up">
+            Leverage the power of Wikimedia APIs to create interactive learning experiences from Wikipedia,
+            Wikibooks, and other open knowledge sources. Build study plans, explore topics, and enhance
+            your understanding with AI-powered tools.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
+            <button
+              onClick={onGetStarted}
+              className="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-xl text-white bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
+            >
+              Get Started
+              <ArrowRight className="ml-2 w-5 h-5" />
+            </button>
+            <button className="inline-flex items-center px-8 py-4 border-2 border-primary-200 text-lg font-medium rounded-xl text-primary-700 bg-white hover:bg-primary-50 transition-all duration-200 shadow-sm hover:shadow-md">
+              View Documentation
+            </button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              return (
+                <div
+                  key={index}
+                  className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-1 animate-fade-in"
+                  style={{ animationDelay: `${index * 0.1}s` }}
+                >
+                  <div className="w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl flex items-center justify-center mb-4">
+                    <Icon className="w-6 h-6 text-white" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">{feature.title}</h3>
+                  <p className="text-gray-600 text-sm leading-relaxed">{feature.description}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Hero;

src/components/MultilingualExplorer.tsx ADDED Viewed

	@@ -0,0 +1,297 @@

+import React, { useState } from 'react';
+import { Globe, Languages, Search, ExternalLink, Loader2, Eye } from 'lucide-react';
+import { WikimediaAPI } from '../utils/wikimedia-api';
+interface MultilingualExplorerProps {
+  onViewArticle?: (title: string, project: string, content: string) => void;
+}
+const MultilingualExplorer: React.FC<MultilingualExplorerProps> = ({ onViewArticle }) => {
+  const [query, setQuery] = useState('');
+  const [selectedLanguages, setSelectedLanguages] = useState<string[]>(['en', 'es', 'fr']);
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState<any[]>([]);
+  const [loadingContent, setLoadingContent] = useState<string | null>(null);
+  const languages = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'es', name: 'Spanish', flag: '🇪🇸' },
+    { code: 'fr', name: 'French', flag: '🇫🇷' },
+    { code: 'de', name: 'German', flag: '🇩🇪' },
+    { code: 'it', name: 'Italian', flag: '🇮🇹' },
+    { code: 'pt', name: 'Portuguese', flag: '🇵🇹' },
+    { code: 'ru', name: 'Russian', flag: '🇷🇺' },
+    { code: 'ja', name: 'Japanese', flag: '🇯🇵' },
+    { code: 'zh', name: 'Chinese', flag: '🇨🇳' },
+    { code: 'ar', name: 'Arabic', flag: '🇸🇦' },
+    { code: 'hi', name: 'Hindi', flag: '🇮🇳' },
+    { code: 'ko', name: 'Korean', flag: '🇰🇷' }
+  ];
+  const toggleLanguage = (langCode: string) => {
+    setSelectedLanguages(prev =>
+      prev.includes(langCode)
+        ? prev.filter(l => l !== langCode)
+        : [...prev, langCode]
+    );
+  };
+  const handleSearch = async () => {
+    if (!query.trim() || selectedLanguages.length === 0) return;
+    setLoading(true);
+    try {
+      const searchResults = [];
+      for (const langCode of selectedLanguages) {
+        try {
+          const language = languages.find(l => l.code === langCode);
+          const apiUrl = `https://${langCode}.wikipedia.org/w/api.php`;
+          const params = {
+            action: 'query',
+            format: 'json',
+            list: 'search',
+            srsearch: query,
+            srlimit: '3',
+            srprop: 'snippet|size|timestamp',
+            origin: '*'
+          };
+          const url = new URL(apiUrl);
+          Object.entries(params).forEach(([key, value]) => {
+            url.searchParams.append(key, value);
+          });
+          const response = await fetch(url.toString());
+          const data = await response.json();
+          if (data.query?.search?.length > 0) {
+            const firstResult = data.query.search[0];
+            searchResults.push({
+              language: language?.name || langCode,
+              flag: language?.flag || '🌐',
+              code: langCode,
+              title: firstResult.title,
+              snippet: firstResult.snippet?.replace(/<[^>]*>/g, '') || `Article about ${query} in ${language?.name}`,
+              url: `https://${langCode}.wikipedia.org/wiki/${encodeURIComponent(firstResult.title)}`,
+              wordCount: Math.floor(firstResult.size / 5) || Math.floor(Math.random() * 3000) + 1000,
+              lastModified: new Date(firstResult.timestamp || Date.now()).toLocaleDateString(),
+              pageid: firstResult.pageid
+            });
+          }
+        } catch (error) {
+          console.error(`Failed to search in ${langCode}:`, error);
+          // Add fallback result
+          const language = languages.find(l => l.code === langCode);
+          searchResults.push({
+            language: language?.name || langCode,
+            flag: language?.flag || '🌐',
+            code: langCode,
+            title: `${query} (${language?.name})`,
+            snippet: `Information about ${query} in ${language?.name}. This content would be available in the ${language?.name} Wikipedia.`,
+            url: `https://${langCode}.wikipedia.org/wiki/${encodeURIComponent(query)}`,
+            wordCount: Math.floor(Math.random() * 3000) + 1000,
+            lastModified: new Date().toLocaleDateString(),
+            pageid: Math.floor(Math.random() * 1000000)
+          });
+        }
+      }
+      setResults(searchResults);
+    } catch (error) {
+      console.error('Multilingual search failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleViewInWikistro = async (result: any) => {
+    setLoadingContent(result.code);
+    try {
+      // Try to get content from the specific language Wikipedia
+      const apiUrl = `https://${result.code}.wikipedia.org/w/api.php`;
+      const params = {
+        action: 'query',
+        format: 'json',
+        titles: result.title,
+        prop: 'extracts',
+        exintro: 'false',
+        explaintext: 'true',
+        exsectionformat: 'plain',
+        origin: '*'
+      };
+      const url = new URL(apiUrl);
+      Object.entries(params).forEach(([key, value]) => {
+        url.searchParams.append(key, value);
+      });
+      const response = await fetch(url.toString());
+      const data = await response.json();
+      const pages = data.query?.pages || {};
+      const pageId = Object.keys(pages)[0];
+      let content = 'Content could not be loaded from this language version.';
+      if (pageId !== '-1' && pages[pageId]?.extract) {
+        content = pages[pageId].extract;
+      }
+      if (onViewArticle) {
+        onViewArticle(result.title, `${result.code}-wikipedia`, content);
+      }
+    } catch (error) {
+      console.error('Failed to load article content:', error);
+      if (onViewArticle) {
+        onViewArticle(result.title, `${result.code}-wikipedia`, 'Failed to load content. Please try viewing the original article.');
+      }
+    } finally {
+      setLoadingContent(null);
+    }
+  };
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-r from-secondary-500 to-success-500 rounded-xl flex items-center justify-center">
+            <Globe className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Multilingual Explorer</h1>
+            <p className="text-gray-600">Discover knowledge across languages and cultures</p>
+          </div>
+        </div>
+      </div>
+      <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm mb-8">
+        <div className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Search Topic
+            </label>
+            <div className="flex gap-3">
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="e.g., Artificial Intelligence, Climate Change..."
+                className="flex-1 px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              />
+              <button
+                onClick={handleSearch}
+                disabled={loading || !query.trim() || selectedLanguages.length === 0}
+                className="flex items-center space-x-2 px-6 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors disabled:opacity-50"
+              >
+                {loading ? (
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                ) : (
+                  <Search className="w-5 h-5" />
+                )}
+              </button>
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-3">
+              Select Languages ({selectedLanguages.length} selected)
+            </label>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+              {languages.map((lang) => (
+                <button
+                  key={lang.code}
+                  onClick={() => toggleLanguage(lang.code)}
+                  className={`flex items-center space-x-2 p-3 rounded-lg border-2 transition-all ${
+                    selectedLanguages.includes(lang.code)
+                      ? 'border-primary-500 bg-primary-50 text-primary-700'
+                      : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  <span className="text-lg">{lang.flag}</span>
+                  <span className="font-medium">{lang.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      {results.length > 0 && (
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold text-gray-900">
+            Results for "{query}" in {selectedLanguages.length} languages
+          </h2>
+          <div className="grid gap-6">
+            {results.map((result, index) => (
+              <div key={index} className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3 mb-3">
+                      <span className="text-2xl">{result.flag}</span>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900">{result.title}</h3>
+                        <p className="text-sm text-gray-600">{result.language} Wikipedia</p>
+                      </div>
+                    </div>
+                    <p className="text-gray-700 mb-4 leading-relaxed">{result.snippet}</p>
+                    <div className="flex items-center space-x-6 text-sm text-gray-500 mb-4">
+                      <div className="flex items-center space-x-1">
+                        <Languages className="w-4 h-4" />
+                        <span>{result.language}</span>
+                      </div>
+                      <div>~{result.wordCount.toLocaleString()} words</div>
+                      <div>Updated {result.lastModified}</div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <button
+                        onClick={() => handleViewInWikistro(result)}
+                        disabled={loadingContent === result.code}
+                        className="flex items-center space-x-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
+                      >
+                        {loadingContent === result.code ? (
+                          <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            <span>Loading...</span>
+                          </>
+                        ) : (
+                          <>
+                            <Eye className="w-4 h-4" />
+                            <span>View in Wikistro</span>
+                          </>
+                        )}
+                      </button>
+                      <a
+                        href={result.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center space-x-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                      >
+                        <ExternalLink className="w-4 h-4" />
+                        <span>Open Original</span>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {loading && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 animate-spin text-primary-600" />
+          <span className="ml-3 text-gray-600">Searching across {selectedLanguages.length} languages...</span>
+        </div>
+      )}
+    </div>
+  );
+};
+export default MultilingualExplorer;

src/components/ProgressSection.tsx ADDED Viewed

	@@ -0,0 +1,304 @@

+import React from 'react';
+import { TrendingUp, Award, Target, Calendar, BookOpen, Clock, Star, CheckCircle } from 'lucide-react';
+import { ProgressData } from '../types';
+interface ProgressSectionProps {
+  progressData: ProgressData;
+}
+const ProgressSection: React.FC<ProgressSectionProps> = ({ progressData }) => {
+  const stats = [
+    {
+      label: 'Study Streak',
+      value: `${progressData.studyStreak} days`,
+      icon: Calendar,
+      color: 'text-primary-600',
+      bgColor: 'bg-primary-50'
+    },
+    {
+      label: 'Topics Completed',
+      value: progressData.topicsCompleted.toString(),
+      icon: CheckCircle,
+      color: 'text-success-600',
+      bgColor: 'bg-success-50'
+    },
+    {
+      label: 'Study Time',
+      value: `${progressData.totalStudyTime} hours`,
+      icon: Clock,
+      color: 'text-secondary-600',
+      bgColor: 'bg-secondary-50'
+    },
+    {
+      label: 'Achievements',
+      value: progressData.achievements.toString(),
+      icon: Award,
+      color: 'text-accent-600',
+      bgColor: 'bg-accent-50'
+    }
+  ];
+  const getIconComponent = (iconName: string) => {
+    const icons: { [key: string]: React.ComponentType<any> } = {
+      CheckCircle,
+      BookOpen,
+      Award,
+      Calendar,
+      Clock
+    };
+    return icons[iconName] || BookOpen;
+  };
+  const achievements = [
+    {
+      title: 'First Steps',
+      description: 'Complete your first study topic',
+      earned: progressData.topicsCompleted >= 1,
+      icon: '🎯'
+    },
+    {
+      title: 'Week Warrior',
+      description: 'Study for 7 consecutive days',
+      earned: progressData.studyStreak >= 7,
+      icon: '🔥'
+    },
+    {
+      title: 'Knowledge Seeker',
+      description: 'Complete 10 study topics',
+      earned: progressData.topicsCompleted >= 10,
+      icon: '📚'
+    },
+    {
+      title: 'Time Master',
+      description: 'Study for 25 hours total',
+      earned: progressData.totalStudyTime >= 25,
+      icon: '⏰'
+    },
+    {
+      title: 'Dedicated Learner',
+      description: 'Complete 50 study topics',
+      earned: progressData.topicsCompleted >= 50,
+      icon: '🎓'
+    },
+    {
+      title: 'Explorer',
+      description: 'Study for 30 consecutive days',
+      earned: progressData.studyStreak >= 30,
+      icon: '🌍'
+    }
+  ];
+  const generateCalendarData = () => {
+    const today = new Date();
+    const startDate = new Date(today);
+    startDate.setDate(today.getDate() - 34); // Show last 35 days
+    const calendarData = [];
+    for (let i = 0; i < 35; i++) {
+      const date = new Date(startDate);
+      date.setDate(startDate.getDate() + i);
+      // Simulate activity based on study streak
+      const daysSinceToday = Math.floor((today.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
+      let intensity = 0;
+      if (daysSinceToday <= progressData.studyStreak) {
+        intensity = Math.random() * 0.8 + 0.2; // Active days
+      } else {
+        intensity = Math.random() * 0.3; // Less active days
+      }
+      calendarData.push({
+        date: date.toISOString().split('T')[0],
+        intensity,
+        isToday: daysSinceToday === 0
+      });
+    }
+    return calendarData;
+  };
+  const calendarData = generateCalendarData();
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Your Progress</h1>
+        <p className="text-gray-600">Track your learning journey and achievements</p>
+      </div>
+      {/* Stats Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat) => {
+          const Icon = stat.icon;
+          return (
+            <div key={stat.label} className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">{stat.label}</p>
+                  <p className="text-2xl font-bold text-gray-900 mt-1">{stat.value}</p>
+                </div>
+                <div className={`w-12 h-12 ${stat.bgColor} rounded-xl flex items-center justify-center`}>
+                  <Icon className={`w-6 h-6 ${stat.color}`} />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Weekly Goal */}
+        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-gray-900">Weekly Goal</h2>
+            <Target className="w-6 h-6 text-primary-600" />
+          </div>
+          <div className="mb-4">
+            <div className="flex items-center justify-between text-sm text-gray-600 mb-2">
+              <span>Study Time</span>
+              <span>{progressData.weeklyGoal.current} / {progressData.weeklyGoal.target} hours</span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-3">
+              <div
+                className="bg-gradient-to-r from-primary-500 to-secondary-500 h-3 rounded-full transition-all duration-500"
+                style={{ width: `${Math.min((progressData.weeklyGoal.current / progressData.weeklyGoal.target) * 100, 100)}%` }}
+              />
+            </div>
+          </div>
+          <p className="text-sm text-gray-600">
+            You're {Math.round(Math.min((progressData.weeklyGoal.current / progressData.weeklyGoal.target) * 100, 100))}% of the way to your weekly goal!
+          </p>
+        </div>
+        {/* Recent Activity */}
+        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-gray-900">Recent Activity</h2>
+            <TrendingUp className="w-6 h-6 text-primary-600" />
+          </div>
+          <div className="space-y-4">
+            {progressData.recentActivity.length > 0 ? (
+              progressData.recentActivity.slice(0, 5).map((activity, index) => {
+                const Icon = getIconComponent(activity.icon);
+                return (
+                  <div key={index} className="flex items-start space-x-3">
+                    <div className="flex-shrink-0">
+                      <Icon className={`w-5 h-5 ${activity.color}`} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-gray-900">{activity.title}</p>
+                      <p className="text-sm text-gray-600">{activity.course}</p>
+                      <p className="text-xs text-gray-500 mt-1">{activity.time}</p>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="text-center py-8">
+                <BookOpen className="w-12 h-12 text-gray-300 mx-auto mb-3" />
+                <p className="text-gray-500">No recent activity</p>
+                <p className="text-sm text-gray-400">Start studying to see your progress here!</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Achievements */}
+      <div className="mt-8">
+        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-xl font-semibold text-gray-900">Achievements</h2>
+            <Award className="w-6 h-6 text-accent-600" />
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {achievements.map((achievement, index) => (
+              <div
+                key={index}
+                className={`p-4 rounded-xl border-2 transition-all duration-200 ${
+                  achievement.earned
+                    ? 'border-success-200 bg-success-50'
+                    : 'border-gray-200 bg-gray-50 opacity-60'
+                }`}
+              >
+                <div className="flex items-start space-x-3">
+                  <div className="text-2xl">{achievement.icon}</div>
+                  <div className="flex-1">
+                    <h3 className={`font-medium ${achievement.earned ? 'text-success-900' : 'text-gray-700'}`}>
+                      {achievement.title}
+                    </h3>
+                    <p className={`text-sm ${achievement.earned ? 'text-success-700' : 'text-gray-600'}`}>
+                      {achievement.description}
+                    </p>
+                  </div>
+                  {achievement.earned && (
+                    <CheckCircle className="w-5 h-5 text-success-600 flex-shrink-0" />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {/* Study Calendar Heatmap */}
+      <div className="mt-8">
+        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+          <h2 className="text-xl font-semibold text-gray-900 mb-6">Study Activity</h2>
+          <div className="mb-4">
+            <div className="grid grid-cols-7 gap-1 text-xs text-gray-500 mb-2">
+              <div>Sun</div>
+              <div>Mon</div>
+              <div>Tue</div>
+              <div>Wed</div>
+              <div>Thu</div>
+              <div>Fri</div>
+              <div>Sat</div>
+            </div>
+            <div className="grid grid-cols-7 gap-1">
+              {calendarData.map((day, i) => (
+                <div
+                  key={i}
+                  className={`w-8 h-8 rounded-sm transition-colors ${
+                    day.isToday
+                      ? 'ring-2 ring-primary-500'
+                      : ''
+                  } ${
+                    day.intensity > 0.7
+                      ? 'bg-primary-500'
+                      : day.intensity > 0.4
+                      ? 'bg-primary-300'
+                      : day.intensity > 0.2
+                      ? 'bg-primary-100'
+                      : 'bg-gray-100'
+                  }`}
+                  title={`${day.date}: Activity level ${Math.round(day.intensity * 100)}%`}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="flex items-center justify-between text-sm text-gray-600">
+            <span>Less active</span>
+            <div className="flex items-center space-x-1">
+              <div className="w-3 h-3 bg-gray-100 rounded-sm" />
+              <div className="w-3 h-3 bg-primary-100 rounded-sm" />
+              <div className="w-3 h-3 bg-primary-300 rounded-sm" />
+              <div className="w-3 h-3 bg-primary-500 rounded-sm" />
+            </div>
+            <span>More active</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ProgressSection;

src/components/SearchInterface.tsx ADDED Viewed

	@@ -0,0 +1,247 @@

+import React, { useState, useEffect } from 'react';
+import { Search, Filter, ExternalLink, Clock, FileText, Loader2, BookOpen, Eye } from 'lucide-react';
+import { WikimediaAPI, WIKIMEDIA_PROJECTS } from '../utils/wikimedia-api';
+import { SearchResult } from '../types';
+interface SearchInterfaceProps {
+  onViewArticle?: (title: string, project: string, content: string) => void;
+}
+const SearchInterface: React.FC<SearchInterfaceProps> = ({ onViewArticle }) => {
+  const [query, setQuery] = useState('');
+  const [selectedProject, setSelectedProject] = useState('wikipedia');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showFilters, setShowFilters] = useState(false);
+  const [loadingContent, setLoadingContent] = useState<string | null>(null);
+  const handleSearch = async (searchQuery: string = query) => {
+    if (!searchQuery.trim()) return;
+    setLoading(true);
+    try {
+      const searchResults = await WikimediaAPI.search(searchQuery, selectedProject, 20);
+      setResults(searchResults);
+    } catch (error) {
+      console.error('Search failed:', error);
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleViewInWikistro = async (result: SearchResult) => {
+    setLoadingContent(result.pageid.toString());
+    try {
+      const content = await WikimediaAPI.getPageContent(result.title, result.project);
+      if (onViewArticle) {
+        onViewArticle(result.title, result.project, content);
+      }
+    } catch (error) {
+      console.error('Failed to load article content:', error);
+    } finally {
+      setLoadingContent(null);
+    }
+  };
+  const formatDate = (timestamp: string) => {
+    return new Date(timestamp).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+  const truncateSnippet = (snippet: string, maxLength: number = 200) => {
+    const cleanSnippet = snippet.replace(/<[^>]*>/g, '');
+    return cleanSnippet.length > maxLength
+      ? cleanSnippet.substring(0, maxLength) + '...'
+      : cleanSnippet;
+  };
+  useEffect(() => {
+    const delayedSearch = setTimeout(() => {
+      if (query.trim()) {
+        handleSearch(query);
+      }
+    }, 500);
+    return () => clearTimeout(delayedSearch);
+  }, [query, selectedProject]);
+  const currentProject = WIKIMEDIA_PROJECTS.find(p => p.id === selectedProject);
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <div className="flex flex-col lg:flex-row gap-4">
+          <div className="flex-1 relative">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search across Wikimedia projects..."
+              className="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent text-lg"
+              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setShowFilters(!showFilters)}
+              className="flex items-center px-4 py-4 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors"
+            >
+              <Filter className="w-5 h-5 mr-2" />
+              Filters
+            </button>
+            <button
+              onClick={() => handleSearch()}
+              disabled={loading}
+              className="flex items-center px-6 py-4 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors disabled:opacity-50"
+            >
+              {loading ? (
+                <Loader2 className="w-5 h-5 animate-spin" />
+              ) : (
+                <Search className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+        </div>
+        {showFilters && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-xl">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+              {WIKIMEDIA_PROJECTS.map((project) => (
+                <button
+                  key={project.id}
+                  onClick={() => setSelectedProject(project.id)}
+                  className={`p-3 rounded-lg text-sm font-medium transition-all ${
+                    selectedProject === project.id
+                      ? 'bg-primary-600 text-white shadow-md'
+                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-200'
+                  }`}
+                >
+                  {project.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      {currentProject && (
+        <div className="mb-6">
+          <div className="flex items-center space-x-3 p-4 bg-white rounded-xl border border-gray-200">
+            <div className={`w-3 h-3 rounded-full ${currentProject.color}`} />
+            <div>
+              <h3 className="font-semibold text-gray-900">{currentProject.name}</h3>
+              <p className="text-sm text-gray-600">{currentProject.description}</p>
+            </div>
+          </div>
+        </div>
+      )}
+      {loading && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 animate-spin text-primary-600" />
+          <span className="ml-3 text-gray-600">Searching {currentProject?.name}...</span>
+        </div>
+      )}
+      {!loading && results.length === 0 && query && (
+        <div className="text-center py-12">
+          <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No results found</h3>
+          <p className="text-gray-600">Try adjusting your search terms or selecting a different project.</p>
+        </div>
+      )}
+      {!loading && results.length > 0 && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-semibold text-gray-900">
+              Search Results ({results.length})
+            </h2>
+          </div>
+          <div className="grid gap-4">
+            {results.map((result) => (
+              <div
+                key={result.pageid}
+                className="bg-white border border-gray-200 rounded-xl p-6 hover:shadow-md transition-all duration-200 hover:border-primary-200"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-primary-600">
+                      <a
+                        href={result.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:underline"
+                      >
+                        {result.title}
+                      </a>
+                    </h3>
+                    <p className="text-gray-600 mb-3 leading-relaxed">
+                      {truncateSnippet(result.snippet)}
+                    </p>
+                    <div className="flex items-center space-x-6 text-sm text-gray-500 mb-4">
+                      <div className="flex items-center space-x-1">
+                        <Clock className="w-4 h-4" />
+                        <span>{formatDate(result.timestamp)}</span>
+                      </div>
+                      <div className="flex items-center space-x-1">
+                        <FileText className="w-4 h-4" />
+                        <span>{Math.round(result.size / 1024)}KB</span>
+                      </div>
+                      <div className="flex items-center space-x-1">
+                        <BookOpen className="w-4 h-4" />
+                        <span className="capitalize">{result.project}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <button
+                        onClick={() => handleViewInWikistro(result)}
+                        disabled={loadingContent === result.pageid.toString()}
+                        className="flex items-center space-x-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
+                      >
+                        {loadingContent === result.pageid.toString() ? (
+                          <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            <span>Loading...</span>
+                          </>
+                        ) : (
+                          <>
+                            <Eye className="w-4 h-4" />
+                            <span>View in Wikistro</span>
+                          </>
+                        )}
+                      </button>
+                      <a
+                        href={result.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center space-x-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                      >
+                        <ExternalLink className="w-4 h-4" />
+                        <span>Open Original</span>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default SearchInterface;

src/components/StudyPlansSection.tsx ADDED Viewed

	@@ -0,0 +1,604 @@

+import React, { useState, useCallback } from 'react';
+import { BookOpen, Clock, Target, Plus, CheckCircle, Circle, Star, TrendingUp, Play, ExternalLink, Loader2, Eye, ArrowRight, AlertCircle } from 'lucide-react';
+import { StudyPlan, StudyTopic } from '../types';
+import { WikimediaAPI } from '../utils/wikimedia-api';
+interface StudyPlansSectionProps {
+  studyPlans: StudyPlan[];
+  onTopicComplete?: (planId: string, topicId: string) => void;
+  onTopicStart?: (planId: string, topicId: string) => void;
+  onPlanCreated?: (plan: StudyPlan) => void;
+  onViewArticle?: (title: string, project: string, content: string) => void;
+}
+interface CreatePlanFormProps {
+  onPlanCreated?: (plan: StudyPlan) => void;
+  onCancel: () => void;
+}
+// Move the form component outside to prevent recreation
+const CreatePlanForm: React.FC<CreatePlanFormProps> = ({ onPlanCreated, onCancel }) => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [difficulty, setDifficulty] = useState<'beginner' | 'intermediate' | 'advanced'>('beginner');
+  const [estimatedTime, setEstimatedTime] = useState('');
+  const [creatingPlan, setCreatingPlan] = useState(false);
+  const [generationErrorMessage, setGenerationErrorMessage] = useState<string>('');
+  const clearForm = () => {
+    setTitle('');
+    setDescription('');
+    setDifficulty('beginner');
+    setEstimatedTime('');
+    setGenerationErrorMessage('');
+  };
+  const handleCreatePlan = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    setCreatingPlan(true);
+    setGenerationErrorMessage('');
+    try {
+      // Use AI to generate a real study plan
+      const generatedPlan = await WikimediaAPI.generateStudyPlan(title, difficulty);
+      // Override with user's custom details
+      const customPlan: StudyPlan = {
+        ...generatedPlan,
+        title: title,
+        description: description || generatedPlan.description,
+        estimatedTime: estimatedTime || generatedPlan.estimatedTime
+      };
+      if (onPlanCreated) {
+        onPlanCreated(customPlan);
+      }
+      onCancel();
+      clearForm();
+    } catch (error) {
+      console.error('Failed to create study plan:', error);
+      // Check if it's the "No content found" error
+      if (error instanceof Error && error.message === 'No content found for this topic') {
+        setGenerationErrorMessage(
+          'We couldn\'t find enough content for this topic. Try using a more general topic like "Physics", "History", "Biology", or "Computer Science".'
+        );
+      } else {
+        setGenerationErrorMessage(
+          'Failed to generate AI study plan. We\'ll create a basic plan for you instead.'
+        );
+        // Create a basic plan if API fails
+        const basicPlan: StudyPlan = {
+          id: `custom-${Date.now()}`,
+          title: title,
+          description: description || `Study plan for ${title}`,
+          difficulty: difficulty,
+          estimatedTime: estimatedTime || '4 weeks',
+          created: new Date().toISOString(),
+          topics: [
+            {
+              id: `${Date.now()}-1`,
+              title: `Introduction to ${title}`,
+              description: 'Getting started with the basics',
+              content: 'Introductory content will be loaded from Wikimedia sources.',
+              completed: false,
+              estimatedTime: '2 hours',
+              resources: []
+            }
+          ]
+        };
+        if (onPlanCreated) {
+          onPlanCreated(basicPlan);
+        }
+        onCancel();
+        clearForm();
+      }
+    } finally {
+      setCreatingPlan(false);
+    }
+  };
+  return (
+    <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">Create New Study Plan</h3>
+      {generationErrorMessage && (
+        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl flex items-start space-x-3">
+          <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+          <div>
+            <p className="text-red-800 font-medium">Unable to Generate Study Plan</p>
+            <p className="text-red-700 text-sm mt-1">{generationErrorMessage}</p>
+          </div>
+        </div>
+      )}
+      <form onSubmit={handleCreatePlan} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Plan Title</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => {
+              setTitle(e.target.value);
+              setGenerationErrorMessage(''); // Clear error when user types
+            }}
+            placeholder="e.g., Introduction to Quantum Physics"
+            className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            required
+            disabled={creatingPlan}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
+          <textarea
+            value={description}
+            onChange={(e) => {
+              setDescription(e.target.value);
+              setGenerationErrorMessage(''); // Clear error when user types
+            }}
+            placeholder="Brief description of what this study plan covers..."
+            rows={3}
+            className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            disabled={creatingPlan}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Difficulty</label>
+            <select
+              value={difficulty}
+              onChange={(e) => setDifficulty(e.target.value as 'beginner' | 'intermediate' | 'advanced')}
+              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+              disabled={creatingPlan}
+            >
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Estimated Time</label>
+            <input
+              type="text"
+              value={estimatedTime}
+              onChange={(e) => setEstimatedTime(e.target.value)}
+              placeholder="e.g., 4 weeks"
+              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+              disabled={creatingPlan}
+            />
+          </div>
+        </div>
+        <div className="flex space-x-3 pt-4">
+          <button
+            type="button"
+            onClick={() => {
+              onCancel();
+              clearForm();
+            }}
+            className="flex-1 px-4 py-3 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
+            disabled={creatingPlan}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={creatingPlan || !title.trim()}
+            className="flex-1 flex items-center justify-center space-x-2 px-4 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors disabled:opacity-50"
+          >
+            {creatingPlan ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                <span>Creating Plan...</span>
+              </>
+            ) : (
+              <span>Create Plan</span>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+const StudyPlansSection: React.FC<StudyPlansSectionProps> = ({
+  studyPlans,
+  onTopicComplete,
+  onTopicStart,
+  onPlanCreated,
+  onViewArticle
+}) => {
+  const [selectedPlan, setSelectedPlan] = useState<StudyPlan | null>(null);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [loadingResource, setLoadingResource] = useState<string | null>(null);
+  const [startingTopic, setStartingTopic] = useState<string | null>(null);
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty) {
+      case 'beginner': return 'bg-emerald-100 text-emerald-800 border-emerald-200';
+      case 'intermediate': return 'bg-amber-100 text-amber-800 border-amber-200';
+      case 'advanced': return 'bg-red-100 text-red-800 border-red-200';
+      default: return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+  const getCompletionPercentage = (topics: StudyTopic[]) => {
+    if (topics.length === 0) return 0;
+    const completed = topics.filter(t => t.completed).length;
+    return Math.round((completed / topics.length) * 100);
+  };
+  const handleTopicAction = async (planId: string, topicId: string, action: 'start' | 'complete') => {
+    if (action === 'start') {
+      setStartingTopic(topicId);
+      // Find the topic and load its content
+      const plan = studyPlans.find(p => p.id === planId);
+      const topic = plan?.topics.find(t => t.id === topicId);
+      if (topic && topic.resources.length > 0 && onViewArticle) {
+        try {
+          const resource = topic.resources[0];
+          const content = await WikimediaAPI.getPageContent(resource.title, resource.project);
+          onViewArticle(resource.title, resource.project, content);
+        } catch (error) {
+          console.error('Failed to load topic content:', error);
+        }
+      }
+      if (onTopicStart) {
+        onTopicStart(planId, topicId);
+      }
+      setStartingTopic(null);
+    } else if (action === 'complete' && onTopicComplete) {
+      // Immediately update the completion status
+      onTopicComplete(planId, topicId);
+    }
+  };
+  const handleViewResource = async (resource: any) => {
+    setLoadingResource(resource.url);
+    try {
+      const content = await WikimediaAPI.getPageContent(resource.title, resource.project);
+      if (onViewArticle) {
+        onViewArticle(resource.title, resource.project, content);
+      }
+    } catch (error) {
+      console.error('Failed to load resource content:', error);
+    } finally {
+      setLoadingResource(null);
+    }
+  };
+  const getNextTopic = (plan: StudyPlan) => {
+    const nextTopic = plan.topics.find(topic => !topic.completed);
+    return nextTopic;
+  };
+  if (selectedPlan) {
+    const nextTopic = getNextTopic(selectedPlan);
+    return (
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <button
+            onClick={() => setSelectedPlan(null)}
+            className="flex items-center space-x-2 text-primary-600 hover:text-primary-700 font-medium mb-6 transition-colors"
+          >
+            <ArrowRight className="w-4 h-4 rotate-180" />
+            <span>Back to Study Plans</span>
+          </button>
+          <div className="bg-white rounded-2xl p-8 border border-gray-200 shadow-sm">
+            <div className="flex items-start justify-between mb-6">
+              <div className="flex-1">
+                <div className="flex items-center space-x-3 mb-3">
+                  <h1 className="text-3xl font-bold text-gray-900">{selectedPlan.title}</h1>
+                  <span className="px-3 py-1 bg-gradient-to-r from-primary-100 to-secondary-100 text-primary-700 text-sm rounded-full font-medium border border-primary-200">
+                    AI Generated
+                  </span>
+                </div>
+                <p className="text-gray-600 mb-6 text-lg leading-relaxed">{selectedPlan.description}</p>
+                <div className="flex items-center space-x-6">
+                  <span className={`px-4 py-2 rounded-full text-sm font-medium border ${getDifficultyColor(selectedPlan.difficulty)}`}>
+                    {selectedPlan.difficulty.charAt(0).toUpperCase() + selectedPlan.difficulty.slice(1)}
+                  </span>
+                  <div className="flex items-center text-gray-600">
+                    <Clock className="w-5 h-5 mr-2" />
+                    <span className="font-medium">{selectedPlan.estimatedTime}</span>
+                  </div>
+                  <div className="flex items-center text-gray-600">
+                    <Target className="w-5 h-5 mr-2" />
+                    <span className="font-medium">{getCompletionPercentage(selectedPlan.topics)}% Complete</span>
+                  </div>
+                </div>
+              </div>
+              <div className="ml-6">
+                <div className="w-20 h-20 bg-gradient-to-br from-primary-100 to-secondary-100 rounded-2xl flex items-center justify-center border border-primary-200">
+                  <TrendingUp className="w-10 h-10 text-primary-600" />
+                </div>
+              </div>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-3 mb-6">
+              <div
+                className="bg-gradient-to-r from-primary-500 to-secondary-500 h-3 rounded-full transition-all duration-500"
+                style={{ width: `${getCompletionPercentage(selectedPlan.topics)}%` }}
+              />
+            </div>
+            {/* What's Next Section */}
+            {nextTopic && (
+              <div className="bg-gradient-to-r from-primary-50 to-secondary-50 rounded-2xl p-6 border border-primary-200">
+                <h3 className="font-semibold text-primary-900 mb-3 text-lg">🎯 What's Next?</h3>
+                <div className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <p className="text-primary-800 font-semibold text-lg">{nextTopic.title}</p>
+                    <p className="text-primary-600 mt-1">{nextTopic.estimatedTime} • {nextTopic.resources.length} resources available</p>
+                  </div>
+                  <button
+                    onClick={() => handleTopicAction(selectedPlan.id, nextTopic.id, 'start')}
+                    disabled={startingTopic === nextTopic.id}
+                    className="flex items-center space-x-2 px-6 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors shadow-md hover:shadow-lg disabled:opacity-50"
+                  >
+                    {startingTopic === nextTopic.id ? (
+                      <>
+                        <Loader2 className="w-5 h-5 animate-spin" />
+                        <span className="font-medium">Starting...</span>
+                      </>
+                    ) : (
+                      <>
+                        <Play className="w-5 h-5" />
+                        <span className="font-medium">Start Now</span>
+                      </>
+                    )}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="space-y-6">
+          {selectedPlan.topics.map((topic, index) => (
+            <div
+              key={topic.id}
+              className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200"
+            >
+              <div className="flex items-start space-x-4">
+                <div className="flex-shrink-0 mt-1">
+                  {topic.completed ? (
+                    <CheckCircle className="w-7 h-7 text-emerald-600" />
+                  ) : (
+                    <Circle className="w-7 h-7 text-gray-400" />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                        {index + 1}. {topic.title}
+                      </h3>
+                      <p className="text-gray-600 mb-4 leading-relaxed">{topic.description}</p>
+                      <div className="flex items-center space-x-6 text-sm text-gray-500 mb-4">
+                        <div className="flex items-center">
+                          <Clock className="w-4 h-4 mr-1" />
+                          <span>{topic.estimatedTime}</span>
+                        </div>
+                        <div className="flex items-center">
+                          <BookOpen className="w-4 h-4 mr-1" />
+                          <span>{topic.resources.length} resources</span>
+                        </div>
+                      </div>
+                      {topic.resources.length > 0 && (
+                        <div className="space-y-3">
+                          <h4 className="font-medium text-gray-900">📚 Resources:</h4>
+                          <div className="flex flex-wrap gap-3">
+                            {topic.resources.map((resource, resourceIndex) => (
+                              <div key={resourceIndex} className="flex items-center space-x-2">
+                                <button
+                                  onClick={() => handleViewResource(resource)}
+                                  disabled={loadingResource === resource.url}
+                                  className="inline-flex items-center px-4 py-2 bg-primary-100 text-primary-700 rounded-xl text-sm hover:bg-primary-200 transition-colors disabled:opacity-50 border border-primary-200"
+                                >
+                                  {loadingResource === resource.url ? (
+                                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                  ) : (
+                                    <Eye className="w-4 h-4 mr-2" />
+                                  )}
+                                  <span className="font-medium">{resource.title}</span>
+                                </button>
+                                <a
+                                  href={resource.url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="p-2 text-gray-400 hover:text-primary-600 transition-colors rounded-lg hover:bg-gray-100"
+                                >
+                                  <ExternalLink className="w-4 h-4" />
+                                </a>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <div className="ml-6 flex flex-col space-y-3">
+                      {!topic.completed ? (
+                        <>
+                          <button
+                            onClick={() => handleTopicAction(selectedPlan.id, topic.id, 'start')}
+                            disabled={startingTopic === topic.id}
+                            className="flex items-center space-x-2 px-5 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors shadow-md hover:shadow-lg disabled:opacity-50"
+                          >
+                            {startingTopic === topic.id ? (
+                              <>
+                                <Loader2 className="w-4 h-4 animate-spin" />
+                                <span className="font-medium">Starting...</span>
+                              </>
+                            ) : (
+                              <>
+                                <Play className="w-4 h-4" />
+                                <span className="font-medium">Start</span>
+                              </>
+                            )}
+                          </button>
+                          <button
+                            onClick={() => handleTopicAction(selectedPlan.id, topic.id, 'complete')}
+                            className="flex items-center space-x-2 px-5 py-3 border-2 border-emerald-600 text-emerald-600 rounded-xl hover:bg-emerald-50 transition-colors"
+                          >
+                            <CheckCircle className="w-4 h-4" />
+                            <span className="font-medium">Complete</span>
+                          </button>
+                        </>
+                      ) : (
+                        <button className="flex items-center space-x-2 px-5 py-3 bg-emerald-600 text-white rounded-xl shadow-md">
+                          <CheckCircle className="w-4 h-4" />
+                          <span className="font-medium">Completed</span>
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-bold text-gray-900 mb-3">Study Plans</h1>
+            <p className="text-gray-600 text-lg">Structured learning paths powered by Wikimedia content</p>
+            {studyPlans.length > 0 && (
+              <p className="text-primary-600 mt-2 font-medium">
+                {studyPlans.length} AI-generated plan{studyPlans.length > 1 ? 's' : ''} available
+              </p>
+            )}
+          </div>
+          <button
+            onClick={() => setShowCreateForm(true)}
+            className="flex items-center space-x-2 px-6 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors shadow-md hover:shadow-lg"
+          >
+            <Plus className="w-5 h-5" />
+            <span className="font-medium">Create Plan</span>
+          </button>
+        </div>
+      </div>
+      {showCreateForm && (
+        <div className="mb-8">
+          <CreatePlanForm
+            onPlanCreated={onPlanCreated}
+            onCancel={() => setShowCreateForm(false)}
+          />
+        </div>
+      )}
+      {studyPlans.length === 0 ? (
+        <div className="bg-white rounded-2xl p-12 text-center border border-gray-200 shadow-sm">
+          <BookOpen className="w-20 h-20 text-gray-300 mx-auto mb-6" />
+          <h3 className="text-2xl font-medium text-gray-900 mb-3">No Study Plans Yet</h3>
+          <p className="text-gray-600 mb-6 text-lg">
+            Create your first study plan or use the AI Generator to get started with personalized learning paths.
+          </p>
+          <button
+            onClick={() => setShowCreateForm(true)}
+            className="px-6 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors font-medium"
+          >
+            Create Your First Plan
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {studyPlans.map((plan) => {
+            const nextTopic = getNextTopic(plan);
+            return (
+              <div
+                key={plan.id}
+                onClick={() => setSelectedPlan(plan)}
+                className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer hover:border-primary-200 group"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-2 mb-3">
+                      <h3 className="text-xl font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">{plan.title}</h3>
+                      <span className="px-2 py-1 bg-primary-100 text-primary-700 text-xs rounded-full font-medium border border-primary-200">
+                        AI
+                      </span>
+                    </div>
+                    <p className="text-gray-600 text-sm mb-4 leading-relaxed">{plan.description}</p>
+                    <div className="flex items-center space-x-4 mb-4">
+                      <span className={`px-3 py-1 rounded-full text-xs font-medium border ${getDifficultyColor(plan.difficulty)}`}>
+                        {plan.difficulty.charAt(0).toUpperCase() + plan.difficulty.slice(1)}
+                      </span>
+                      <div className="flex items-center text-xs text-gray-600">
+                        <Clock className="w-3 h-3 mr-1" />
+                        <span>{plan.estimatedTime}</span>
+                      </div>
+                    </div>
+                    <div className="mb-4">
+                      <div className="flex items-center justify-between text-sm text-gray-600 mb-2">
+                        <span>Progress</span>
+                        <span className="font-medium">{getCompletionPercentage(plan.topics)}%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-2">
+                        <div
+                          className="bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full transition-all duration-300"
+                          style={{ width: `${getCompletionPercentage(plan.topics)}%` }}
+                        />
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between text-sm text-gray-600">
+                      <div className="flex items-center">
+                        <BookOpen className="w-4 h-4 mr-1" />
+                        <span>{plan.topics.length} topics</span>
+                      </div>
+                      {nextTopic && (
+                        <div className="text-primary-600 font-medium">
+                          Next: {nextTopic.title.substring(0, 15)}...
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="ml-4">
+                    <div className="w-14 h-14 bg-gradient-to-br from-primary-100 to-secondary-100 rounded-xl flex items-center justify-center border border-primary-200 group-hover:scale-110 transition-transform">
+                      <Star className="w-7 h-7 text-primary-600" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+export default StudyPlansSection;

src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/types/index.ts ADDED Viewed

	@@ -0,0 +1,102 @@

+export interface WikimediaProject {
+  id: string;
+  name: string;
+  description: string;
+  apiUrl: string;
+  color: string;
+  icon: string;
+}
+export interface SearchResult {
+  title: string;
+  pageid: number;
+  size: number;
+  snippet: string;
+  timestamp: string;
+  project: string;
+  url: string;
+}
+export interface StudyPlan {
+  id: string;
+  title: string;
+  description: string;
+  topics: StudyTopic[];
+  estimatedTime: string;
+  difficulty: 'beginner' | 'intermediate' | 'advanced';
+  created: string;
+}
+export interface StudyTopic {
+  id: string;
+  title: string;
+  description: string;
+  content: string;
+  resources: Resource[];
+  completed: boolean;
+  estimatedTime: string;
+}
+export interface Resource {
+  title: string;
+  url: string;
+  type: 'article' | 'book' | 'video' | 'reference';
+  project: string;
+}
+export interface Quiz {
+  id: string;
+  title: string;
+  questions: Question[];
+  topic: string;
+}
+export interface Question {
+  id: string;
+  question: string;
+  options: string[];
+  correctAnswer: number;
+  explanation: string;
+}
+export interface ContentTransformation {
+  id: string;
+  sourceUrl: string;
+  sourceTitle: string;
+  transformationType: 'summary' | 'quiz' | 'outline' | 'flashcards';
+  content: any;
+  created: string;
+}
+export interface MultilingualResult {
+  language: string;
+  languageCode: string;
+  title: string;
+  snippet: string;
+  url: string;
+  wordCount: number;
+  lastModified: string;
+}
+export interface ProgressData {
+  studyStreak: number;
+  topicsCompleted: number;
+  totalStudyTime: number;
+  achievements: number;
+  weeklyGoal: {
+    current: number;
+    target: number;
+  };
+  recentActivity: ActivityItem[];
+  completedTopics: Set<string>;
+  lastStudyDate?: string;
+}
+export interface ActivityItem {
+  type: 'completed' | 'started' | 'achievement';
+  title: string;
+  course: string;
+  time: string;
+  icon: string;
+  color: string;
+}

src/utils/ai-enhanced-wikimedia.ts ADDED Viewed

	@@ -0,0 +1,491 @@

+import { WikimediaAPI } from './wikimedia-api';
+import { AIProviderManager } from './ai-providers';
+import { StudyPlan, StudyTopic } from '../types';
+export class AIEnhancedWikimedia extends WikimediaAPI {
+  static async generateEnhancedStudyPlan(topic: string, difficulty: 'beginner' | 'intermediate' | 'advanced' = 'beginner'): Promise<StudyPlan> {
+    try {
+      // First, get base content from Wikimedia
+      const searchResults = await this.searchMultipleProjects(topic, ['wikipedia', 'wikibooks', 'wikiversity'], 15);
+      if (searchResults.length === 0) {
+        throw new Error('No content found for this topic');
+      }
+      // Check if AI is available and configured
+      let useAI = false;
+      try {
+        const config = AIProviderManager.getConfig();
+        const provider = AIProviderManager.getProviderById(config.selectedProvider);
+        if (provider) {
+          // Check if API key is required and available
+          if (provider.requiresApiKey) {
+            useAI = !!(config.apiKeys && config.apiKeys[config.selectedProvider]);
+          } else {
+            useAI = true; // Local providers don't need API keys
+          }
+          // Test connection if we think AI should be available
+          if (useAI) {
+            useAI = await AIProviderManager.testConnection(config.selectedProvider);
+          }
+        }
+      } catch (error) {
+        console.log('AI availability check failed, using fallback');
+        useAI = false;
+      }
+      if (useAI) {
+        // Use AI to enhance the study plan
+        const aiPrompt = `Create a comprehensive study plan for "${topic}" at ${difficulty} level.
+Available resources from Wikimedia:
+${searchResults.slice(0, 8).map((result, i) => `${i + 1}. ${result.title} - ${result.snippet.substring(0, 100)}...`).join('\n')}
+Please create a structured study plan with:
+1. A compelling title and description
+2. 5-8 learning topics in logical order
+3. For each topic, provide:
+   - Clear learning objectives
+   - Estimated study time
+   - Key concepts to focus on
+Format as JSON with this structure:
+{
+  "title": "Study Plan Title",
+  "description": "Brief description",
+  "topics": [
+    {
+      "title": "Topic Title",
+      "description": "What students will learn",
+      "objectives": ["objective1", "objective2"],
+      "estimatedTime": "2 hours",
+      "keyPoints": ["point1", "point2"]
+    }
+  ]
+}`;
+        try {
+          const aiResponse = await AIProviderManager.generateText(aiPrompt, {
+            maxTokens: 2000,
+            temperature: 0.7,
+            systemPrompt: 'You are an expert educational content creator. Create well-structured, engaging study plans that help students learn effectively.'
+          });
+          // Parse AI response
+          let aiPlan;
+          try {
+            // Extract JSON from AI response
+            const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+            if (jsonMatch) {
+              aiPlan = JSON.parse(jsonMatch[0]);
+            } else {
+              throw new Error('No valid JSON found in AI response');
+            }
+          } catch (parseError) {
+            console.log('Failed to parse AI response, using fallback');
+            return await this.generateStudyPlan(topic, difficulty);
+          }
+          // Create enhanced study plan with real Wikimedia resources
+          const enhancedTopics: StudyTopic[] = [];
+          for (let i = 0; i < Math.min(aiPlan.topics.length, searchResults.length); i++) {
+            const aiTopic = aiPlan.topics[i];
+            const resource = searchResults[i];
+            // Get detailed content for each topic
+            let detailedContent = resource.snippet;
+            try {
+              const fullContent = await this.getPageSnippet(resource.title, resource.project);
+              if (fullContent && fullContent !== 'No description available') {
+                detailedContent = fullContent;
+              }
+            } catch (error) {
+              console.log(`Could not get detailed content for ${resource.title}`);
+            }
+            enhancedTopics.push({
+              id: `topic-${Date.now()}-${i}`,
+              title: aiTopic.title || resource.title,
+              description: aiTopic.description || detailedContent.substring(0, 200) + '...',
+              content: detailedContent,
+              completed: false,
+              estimatedTime: aiTopic.estimatedTime || `${Math.ceil(Math.random() * 2 + 1)} hours`,
+              resources: [
+                {
+                  title: resource.title,
+                  url: resource.url,
+                  type: 'article' as const,
+                  project: resource.project
+                }
+              ]
+            });
+          }
+          const studyPlan: StudyPlan = {
+            id: `ai-plan-${Date.now()}`,
+            title: aiPlan.title || `${topic} Study Plan`,
+            description: aiPlan.description || `AI-enhanced ${difficulty} level study plan for ${topic}`,
+            difficulty,
+            estimatedTime: this.estimateStudyTime(enhancedTopics.length, difficulty),
+            created: new Date().toISOString(),
+            topics: enhancedTopics
+          };
+          return studyPlan;
+        } catch (aiError) {
+          console.log('AI enhancement failed, using fallback method:', aiError);
+          return await this.generateStudyPlan(topic, difficulty);
+        }
+      } else {
+        // AI not available, use standard method
+        return await this.generateStudyPlan(topic, difficulty);
+      }
+    } catch (error) {
+      console.error('Enhanced study plan generation failed:', error);
+      // Fallback to original method
+      return await this.generateStudyPlan(topic, difficulty);
+    }
+  }
+  static async generateQuizFromContent(content: string, title: string): Promise<any> {
+    // Check AI availability first
+    let useAI = false;
+    try {
+      const config = AIProviderManager.getConfig();
+      const provider = AIProviderManager.getProviderById(config.selectedProvider);
+      if (provider) {
+        if (provider.requiresApiKey) {
+          useAI = !!(config.apiKeys && config.apiKeys[config.selectedProvider]);
+        } else {
+          useAI = true;
+        }
+        if (useAI) {
+          useAI = await AIProviderManager.testConnection(config.selectedProvider);
+        }
+      }
+    } catch (error) {
+      useAI = false;
+    }
+    if (!useAI) {
+      return this.generateFallbackQuiz(title);
+    }
+    const aiPrompt = `Create a quiz based on this content about "${title}":
+${content.substring(0, 2000)}
+Generate 5 multiple-choice questions that test understanding of key concepts. Format as JSON:
+{
+  "questions": [
+    {
+      "question": "Question text",
+      "options": ["Option A", "Option B", "Option C", "Option D"],
+      "correct": 0,
+      "explanation": "Why this answer is correct"
+    }
+  ]
+}`;
+    try {
+      const aiResponse = await AIProviderManager.generateText(aiPrompt, {
+        maxTokens: 1500,
+        temperature: 0.5,
+        systemPrompt: 'You are an expert quiz creator. Create challenging but fair questions that test real understanding.'
+      });
+      const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const quiz = JSON.parse(jsonMatch[0]);
+        return {
+          type: 'quiz',
+          title: `Quiz: ${title}`,
+          questions: quiz.questions
+        };
+      }
+    } catch (error) {
+      console.error('AI quiz generation failed:', error);
+    }
+    // Fallback to rule-based quiz generation
+    return this.generateFallbackQuiz(title);
+  }
+  static async generateSummaryFromContent(content: string, title: string): Promise<any> {
+    // Check AI availability
+    let useAI = false;
+    try {
+      const config = AIProviderManager.getConfig();
+      const provider = AIProviderManager.getProviderById(config.selectedProvider);
+      if (provider) {
+        if (provider.requiresApiKey) {
+          useAI = !!(config.apiKeys && config.apiKeys[config.selectedProvider]);
+        } else {
+          useAI = true;
+        }
+        if (useAI) {
+          useAI = await AIProviderManager.testConnection(config.selectedProvider);
+        }
+      }
+    } catch (error) {
+      useAI = false;
+    }
+    if (!useAI) {
+      return this.generateFallbackSummary(content, title);
+    }
+    const aiPrompt = `Summarize this content about "${title}" in a clear, educational way:
+${content.substring(0, 3000)}
+Create:
+1. A concise summary (2-3 paragraphs)
+2. 5-7 key points that capture the most important information
+Format as JSON:
+{
+  "summary": "Main summary text",
+  "keyPoints": ["Point 1", "Point 2", ...]
+}`;
+    try {
+      const aiResponse = await AIProviderManager.generateText(aiPrompt, {
+        maxTokens: 1000,
+        temperature: 0.3,
+        systemPrompt: 'You are an expert at creating clear, educational summaries that help students understand complex topics.'
+      });
+      const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const summary = JSON.parse(jsonMatch[0]);
+        return {
+          type: 'summary',
+          title: `Summary: ${title}`,
+          content: summary.summary,
+          keyPoints: summary.keyPoints
+        };
+      }
+    } catch (error) {
+      console.error('AI summary generation failed:', error);
+    }
+    // Fallback to rule-based summary
+    return this.generateFallbackSummary(content, title);
+  }
+  static async generateStudyOutline(content: string, title: string): Promise<any> {
+    // Check AI availability
+    let useAI = false;
+    try {
+      const config = AIProviderManager.getConfig();
+      const provider = AIProviderManager.getProviderById(config.selectedProvider);
+      if (provider) {
+        if (provider.requiresApiKey) {
+          useAI = !!(config.apiKeys && config.apiKeys[config.selectedProvider]);
+        } else {
+          useAI = true;
+        }
+        if (useAI) {
+          useAI = await AIProviderManager.testConnection(config.selectedProvider);
+        }
+      }
+    } catch (error) {
+      useAI = false;
+    }
+    if (!useAI) {
+      return this.generateFallbackOutline(title);
+    }
+    const aiPrompt = `Create a detailed study outline for "${title}" based on this content:
+${content.substring(0, 2500)}
+Organize into 4-6 main sections with subsections. Format as JSON:
+{
+  "sections": [
+    {
+      "title": "Section Title",
+      "points": ["Point 1", "Point 2", "Point 3"]
+    }
+  ]
+}`;
+    try {
+      const aiResponse = await AIProviderManager.generateText(aiPrompt, {
+        maxTokens: 1200,
+        temperature: 0.4,
+        systemPrompt: 'You are an expert at creating structured study outlines that help students organize their learning.'
+      });
+      const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const outline = JSON.parse(jsonMatch[0]);
+        return {
+          type: 'outline',
+          title: `Study Outline: ${title}`,
+          sections: outline.sections
+        };
+      }
+    } catch (error) {
+      console.error('AI outline generation failed:', error);
+    }
+    // Fallback to rule-based outline
+    return this.generateFallbackOutline(title);
+  }
+  static async generateFlashcards(content: string, title: string): Promise<any> {
+    // Check AI availability
+    let useAI = false;
+    try {
+      const config = AIProviderManager.getConfig();
+      const provider = AIProviderManager.getProviderById(config.selectedProvider);
+      if (provider) {
+        if (provider.requiresApiKey) {
+          useAI = !!(config.apiKeys && config.apiKeys[config.selectedProvider]);
+        } else {
+          useAI = true;
+        }
+        if (useAI) {
+          useAI = await AIProviderManager.testConnection(config.selectedProvider);
+        }
+      }
+    } catch (error) {
+      useAI = false;
+    }
+    if (!useAI) {
+      return this.generateFallbackFlashcards(title);
+    }
+    const aiPrompt = `Create flashcards for studying "${title}" based on this content:
+${content.substring(0, 2000)}
+Generate 6-8 flashcards with questions and answers. Format as JSON:
+{
+  "cards": [
+    {
+      "front": "Question or term",
+      "back": "Answer or definition"
+    }
+  ]
+}`;
+    try {
+      const aiResponse = await AIProviderManager.generateText(aiPrompt, {
+        maxTokens: 1000,
+        temperature: 0.5,
+        systemPrompt: 'You are an expert at creating effective flashcards that help with memorization and understanding.'
+      });
+      const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const flashcards = JSON.parse(jsonMatch[0]);
+        return {
+          type: 'flashcards',
+          title: `Flashcards: ${title}`,
+          cards: flashcards.cards
+        };
+      }
+    } catch (error) {
+      console.error('AI flashcard generation failed:', error);
+    }
+    // Fallback to rule-based flashcards
+    return this.generateFallbackFlashcards(title);
+  }
+  // Fallback methods (existing rule-based generation)
+  private static generateFallbackQuiz(title: string) {
+    const questions = [
+      {
+        question: `What is the main topic discussed in the article about ${title}?`,
+        options: [
+          `The fundamental concepts and principles of ${title}`,
+          `The historical development of ${title}`,
+          `The practical applications of ${title}`,
+          `The criticism and controversies surrounding ${title}`
+        ],
+        correct: 0,
+        explanation: 'This question tests basic comprehension of the main topic.'
+      }
+    ];
+    return {
+      type: 'quiz',
+      title: `Quiz: ${title}`,
+      questions
+    };
+  }
+  private static generateFallbackSummary(content: string, title: string) {
+    const sentences = content.split('.').filter(s => s.trim().length > 20);
+    const keySentences = sentences.slice(0, 5);
+    return {
+      type: 'summary',
+      title: `Summary: ${title}`,
+      content: keySentences.join('. ') + '.',
+      keyPoints: sentences.slice(5, 10).map(s => s.trim()).filter(s => s.length > 0)
+    };
+  }
+  private static generateFallbackOutline(title: string) {
+    return {
+      type: 'outline',
+      title: `Study Outline: ${title}`,
+      sections: [
+        {
+          title: 'Introduction',
+          points: [
+            `Overview and definition of ${title}`,
+            'Historical context and background',
+            'Key terminology and concepts'
+          ]
+        },
+        {
+          title: 'Main Concepts',
+          points: [
+            'Core principles and theories',
+            'Important characteristics and features',
+            'Fundamental mechanisms and processes'
+          ]
+        }
+      ]
+    };
+  }
+  private static generateFallbackFlashcards(title: string) {
+    const cards = [
+      {
+        front: `What is ${title}?`,
+        back: `${title} is a comprehensive topic that encompasses various concepts, principles, and applications within its field of study.`
+      },
+      {
+        front: 'Key characteristics',
+        back: `The main features include fundamental principles, practical applications, and significant impact on related areas.`
+      }
+    ];
+    return {
+      type: 'flashcards',
+      title: `Flashcards: ${title}`,
+      cards
+    };
+  }
+}

src/utils/ai-providers.ts ADDED Viewed

	@@ -0,0 +1,445 @@

+const token = import.meta.env.VITE_HF_TOKEN;
+// Open Source AI Providers Integration
+export interface AIProvider {
+  id: string;
+  name: string;
+  description: string;
+  apiUrl: string;
+  requiresApiKey: boolean;
+  models: AIModel[];
+  isLocal: boolean;
+}
+export interface AIModel {
+  id: string;
+  name: string;
+  description: string;
+  maxTokens: number;
+  capabilities: ('text-generation' | 'summarization' | 'question-answering')[];
+}
+export const AI_PROVIDERS: AIProvider[] = [
+  {
+    id: 'huggingface',
+    name: 'Hugging Face',
+    description: 'Access thousands of open-source models',
+    apiUrl: 'https://api-inference.huggingface.co',
+    requiresApiKey: true,
+    isLocal: false,
+    models: [
+      {
+        id: 'microsoft/DialoGPT-medium',
+        name: 'DialoGPT Medium',
+        description: 'Conversational AI model for text generation',
+        maxTokens: 1024,
+        capabilities: ['text-generation']
+      },
+      {
+        id: 'facebook/bart-large-cnn',
+        name: 'BART CNN',
+        description: 'Summarization specialist',
+        maxTokens: 1024,
+        capabilities: ['summarization']
+      },
+      {
+        id: 'deepset/roberta-base-squad2',
+        name: 'RoBERTa QA',
+        description: 'Question answering model',
+        maxTokens: 512,
+        capabilities: ['question-answering']
+      },
+      {
+        id: 'google/flan-t5-base',
+        name: 'FLAN-T5 Base',
+        description: 'Instruction-tuned text-to-text model',
+        maxTokens: 512,
+        capabilities: ['text-generation', 'summarization', 'question-answering']
+      }
+    ]
+  },
+  {
+    id: 'ollama',
+    name: 'Ollama (Local)',
+    description: 'Run AI models locally on your machine',
+    apiUrl: 'http://localhost:11434',
+    requiresApiKey: false,
+    isLocal: true,
+    models: [
+      {
+        id: 'llama3.2',
+        name: 'Llama 3.2',
+        description: 'Meta\'s latest open-source model',
+        maxTokens: 8192,
+        capabilities: ['text-generation', 'summarization', 'question-answering']
+      },
+      {
+        id: 'mistral',
+        name: 'Mistral 7B',
+        description: 'Efficient open-source model',
+        maxTokens: 4096,
+        capabilities: ['text-generation', 'summarization']
+      },
+      {
+        id: 'codellama',
+        name: 'Code Llama',
+        description: 'Specialized for code and technical content',
+        maxTokens: 4096,
+        capabilities: ['text-generation', 'question-answering']
+      }
+    ]
+  },
+  {
+    id: 'openai-compatible',
+    name: 'OpenAI Compatible',
+    description: 'Any OpenAI-compatible API (LocalAI, vLLM, etc.)',
+    apiUrl: 'http://localhost:8080',
+    requiresApiKey: false,
+    isLocal: true,
+    models: [
+      {
+        id: 'gpt-3.5-turbo',
+        name: 'GPT-3.5 Turbo (Local)',
+        description: 'Local implementation of GPT-3.5',
+        maxTokens: 4096,
+        capabilities: ['text-generation', 'summarization', 'question-answering']
+      }
+    ]
+  },
+  {
+    id: 'together',
+    name: 'Together AI',
+    description: 'Open-source models via Together AI',
+    apiUrl: 'https://api.together.xyz',
+    requiresApiKey: true,
+    isLocal: false,
+    models: [
+      {
+        id: 'meta-llama/Llama-2-7b-chat-hf',
+        name: 'Llama 2 7B Chat',
+        description: 'Meta\'s Llama 2 model',
+        maxTokens: 4096,
+        capabilities: ['text-generation', 'summarization', 'question-answering']
+      },
+      {
+        id: 'mistralai/Mistral-7B-Instruct-v0.1',
+        name: 'Mistral 7B Instruct',
+        description: 'Mistral\'s instruction-tuned model',
+        maxTokens: 8192,
+        capabilities: ['text-generation', 'summarization', 'question-answering']
+      }
+    ]
+  }
+];
+export class AIProviderManager {
+  private static getStoredConfig(): any {
+    try {
+      const stored = localStorage.getItem('wikistro-ai-config');
+      const defaultConfig = {
+        selectedProvider: 'huggingface',
+        selectedModel: 'microsoft/DialoGPT-medium',
+        apiKeys: {
+          huggingface: token
+        },
+        customEndpoints: {}
+      };
+      if (!stored) {
+        // Auto-configure with Hugging Face
+        this.saveConfig(defaultConfig);
+        return defaultConfig;
+      }
+      const config = JSON.parse(stored);
+      // Auto-add Hugging Face API key if not present
+      if (!config.apiKeys?.huggingface) {
+        config.apiKeys = config.apiKeys || {};
+        config.apiKeys.huggingface = token;
+        config.selectedProvider = 'huggingface';
+        config.selectedModel = 'microsoft/DialoGPT-medium';
+        this.saveConfig(config);
+      }
+      return config;
+    } catch (error) {
+      const defaultConfig = {
+        selectedProvider: 'huggingface',
+        selectedModel: 'microsoft/DialoGPT-medium',
+        apiKeys: {
+          huggingface: token
+        },
+        customEndpoints: {}
+      };
+      this.saveConfig(defaultConfig);
+      return defaultConfig;
+    }
+  }
+  private static saveConfig(config: any): void {
+    try {
+      localStorage.setItem('wikistro-ai-config', JSON.stringify(config));
+    } catch (error) {
+      console.error('Failed to save AI config:', error);
+    }
+  }
+  static getConfig() {
+    return this.getStoredConfig();
+  }
+  static getProviderById(id: string): AIProvider | undefined {
+    return AI_PROVIDERS.find(p => p.id === id);
+  }
+  static updateConfig(updates: any) {
+    const config = this.getStoredConfig();
+    const newConfig = { ...config, ...updates };
+    this.saveConfig(newConfig);
+    return newConfig;
+  }
+  static async generateText(prompt: string, options: {
+    maxTokens?: number;
+    temperature?: number;
+    systemPrompt?: string;
+  } = {}): Promise<string> {
+    const config = this.getStoredConfig();
+    const provider = AI_PROVIDERS.find(p => p.id === config.selectedProvider);
+    const model = provider?.models.find(m => m.id === config.selectedModel);
+    if (!provider || !model) {
+      throw new Error('No AI provider or model configured');
+    }
+    const { maxTokens = 1000, temperature = 0.7, systemPrompt } = options;
+    try {
+      switch (provider.id) {
+        case 'ollama':
+          return await this.callOllama(config.selectedModel, prompt, { maxTokens, temperature, systemPrompt });
+        case 'huggingface':
+          return await this.callHuggingFace(config.selectedModel, prompt, config.apiKeys.huggingface);
+        case 'openai-compatible':
+          return await this.callOpenAICompatible(
+            config.customEndpoints.openai || provider.apiUrl,
+            config.selectedModel,
+            prompt,
+            { maxTokens, temperature, systemPrompt }
+          );
+        case 'together':
+          return await this.callTogether(config.selectedModel, prompt, config.apiKeys.together, { maxTokens, temperature, systemPrompt });
+        default:
+          throw new Error(`Unsupported provider: ${provider.id}`);
+      }
+    } catch (error) {
+      console.error('AI generation failed:', error);
+      throw new Error(`AI generation failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+  private static async callOllama(model: string, prompt: string, options: any): Promise<string> {
+    const response = await fetch('http://localhost:11434/api/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model,
+        prompt: options.systemPrompt ? `${options.systemPrompt}\n\n${prompt}` : prompt,
+        stream: false,
+        options: {
+          temperature: options.temperature,
+          num_predict: options.maxTokens
+        }
+      })
+    });
+    if (!response.ok) {
+      throw new Error(`Ollama API error: ${response.statusText}`);
+    }
+    const data = await response.json();
+    return data.response || '';
+  }
+  private static async callHuggingFace(model: string, prompt: string, apiKey: string): Promise<string> {
+    if (!apiKey) {
+      throw new Error('Hugging Face API key required');
+    }
+    // For text generation models, use the appropriate format
+    let requestBody;
+    let endpoint = `https://api-inference.huggingface.co/models/${model}`;
+    if (model.includes('DialoGPT') || model.includes('flan-t5')) {
+      requestBody = {
+        inputs: prompt,
+        parameters: {
+          max_new_tokens: 200,
+          temperature: 0.7,
+          do_sample: true,
+          return_full_text: false
+        }
+      };
+    } else {
+      requestBody = { inputs: prompt };
+    }
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Hugging Face API error: ${response.statusText} - ${errorText}`);
+    }
+    const data = await response.json();
+    // Handle different response formats
+    if (Array.isArray(data)) {
+      return data[0]?.generated_text || data[0]?.summary_text || '';
+    } else if (data.generated_text) {
+      return data.generated_text;
+    } else if (data[0]?.generated_text) {
+      return data[0].generated_text;
+    }
+    return JSON.stringify(data);
+  }
+  private static async callOpenAICompatible(endpoint: string, model: string, prompt: string, options: any): Promise<string> {
+    const messages = [];
+    if (options.systemPrompt) {
+      messages.push({ role: 'system', content: options.systemPrompt });
+    }
+    messages.push({ role: 'user', content: prompt });
+    const response = await fetch(`${endpoint}/v1/chat/completions`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model,
+        messages,
+        max_tokens: options.maxTokens,
+        temperature: options.temperature
+      })
+    });
+    if (!response.ok) {
+      throw new Error(`OpenAI Compatible API error: ${response.statusText}`);
+    }
+    const data = await response.json();
+    return data.choices?.[0]?.message?.content || '';
+  }
+  private static async callTogether(model: string, prompt: string, apiKey: string, options: any): Promise<string> {
+    if (!apiKey) {
+      throw new Error('Together AI API key required');
+    }
+    const messages = [];
+    if (options.systemPrompt) {
+      messages.push({ role: 'system', content: options.systemPrompt });
+    }
+    messages.push({ role: 'user', content: prompt });
+    const response = await fetch('https://api.together.xyz/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model,
+        messages,
+        max_tokens: options.maxTokens,
+        temperature: options.temperature
+      })
+    });
+    if (!response.ok) {
+      throw new Error(`Together AI API error: ${response.statusText}`);
+    }
+    const data = await response.json();
+    return data.choices?.[0]?.message?.content || '';
+  }
+  static async testConnection(providerId: string): Promise<boolean> {
+    const provider = AI_PROVIDERS.find(p => p.id === providerId);
+    if (!provider) return false;
+    try {
+      const config = this.getStoredConfig();
+      switch (providerId) {
+        case 'ollama':
+          try {
+            const ollamaResponse = await fetch('http://localhost:11434/api/tags', {
+              method: 'GET',
+              signal: AbortSignal.timeout(5000)
+            });
+            return ollamaResponse.ok;
+          } catch (error) {
+            return false;
+          }
+        case 'huggingface':
+          if (!config.apiKeys?.huggingface) return false;
+          try {
+            // Test with a simple model check
+            const hfResponse = await fetch('https://api-inference.huggingface.co/models/microsoft/DialoGPT-medium', {
+              method: 'GET',
+              headers: { 'Authorization': `Bearer ${config.apiKeys.huggingface}` },
+              signal: AbortSignal.timeout(10000)
+            });
+            return hfResponse.ok;
+          } catch (error) {
+            return false;
+          }
+        case 'openai-compatible':
+          try {
+            const endpoint = config.customEndpoints?.openai || provider.apiUrl;
+            const openaiResponse = await fetch(`${endpoint}/v1/models`, {
+              method: 'GET',
+              signal: AbortSignal.timeout(5000)
+            });
+            return openaiResponse.ok;
+          } catch (error) {
+            return false;
+          }
+        case 'together':
+          if (!config.apiKeys?.together) return false;
+          try {
+            const togetherResponse = await fetch('https://api.together.xyz/v1/models', {
+              method: 'GET',
+              headers: { 'Authorization': `Bearer ${config.apiKeys.together}` },
+              signal: AbortSignal.timeout(10000)
+            });
+            return togetherResponse.ok;
+          } catch (error) {
+            return false;
+          }
+        default:
+          return false;
+      }
+    } catch (error) {
+      console.log(`Connection test failed for ${providerId}:`, error);
+      return false;
+    }
+  }
+}

src/utils/wikimedia-api.ts ADDED Viewed

	@@ -0,0 +1,429 @@

+import { WikimediaProject, SearchResult, StudyPlan } from '../types';
+export const WIKIMEDIA_PROJECTS: WikimediaProject[] = [
+  {
+    id: 'wikipedia',
+    name: 'Wikipedia',
+    description: 'The free encyclopedia',
+    apiUrl: 'https://en.wikipedia.org/w/api.php',
+    color: 'bg-primary-500',
+    icon: 'Book'
+  },
+  {
+    id: 'wikibooks',
+    name: 'Wikibooks',
+    description: 'Free textbooks and manuals',
+    apiUrl: 'https://en.wikibooks.org/w/api.php',
+    color: 'bg-secondary-500',
+    icon: 'BookOpen'
+  },
+  {
+    id: 'wikiquote',
+    name: 'Wikiquote',
+    description: 'Collection of quotations',
+    apiUrl: 'https://en.wikiquote.org/w/api.php',
+    color: 'bg-accent-500',
+    icon: 'Quote'
+  },
+  {
+    id: 'wikiversity',
+    name: 'Wikiversity',
+    description: 'Free learning resources',
+    apiUrl: 'https://en.wikiversity.org/w/api.php',
+    color: 'bg-success-500',
+    icon: 'GraduationCap'
+  },
+  {
+    id: 'wiktionary',
+    name: 'Wiktionary',
+    description: 'Free dictionary',
+    apiUrl: 'https://en.wiktionary.org/w/api.php',
+    color: 'bg-warning-500',
+    icon: 'Languages'
+  },
+  {
+    id: 'wikisource',
+    name: 'Wikisource',
+    description: 'Free library of source texts',
+    apiUrl: 'https://en.wikisource.org/w/api.php',
+    color: 'bg-error-500',
+    icon: 'FileText'
+  }
+];
+export class WikimediaAPI {
+  private static async makeRequest(apiUrl: string, params: Record<string, string>): Promise<any> {
+    const url = new URL(apiUrl);
+    Object.entries(params).forEach(([key, value]) => {
+      url.searchParams.append(key, value);
+    });
+    try {
+      const response = await fetch(url.toString());
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error('API request failed:', error);
+      throw error;
+    }
+  }
+  static async search(query: string, project: string = 'wikipedia', limit: number = 10): Promise<SearchResult[]> {
+    const projectData = WIKIMEDIA_PROJECTS.find(p => p.id === project);
+    if (!projectData) {
+      throw new Error(`Unknown project: ${project}`);
+    }
+    const params = {
+      action: 'query',
+      format: 'json',
+      list: 'search',
+      srsearch: query,
+      srlimit: limit.toString(),
+      srprop: 'snippet|titlesnippet|size|timestamp',
+      origin: '*'
+    };
+    try {
+      const data = await this.makeRequest(projectData.apiUrl, params);
+      return data.query?.search?.map((result: any) => ({
+        title: result.title,
+        pageid: result.pageid,
+        size: result.size,
+        snippet: result.snippet || 'No snippet available',
+        timestamp: result.timestamp,
+        project: project,
+        url: this.buildProjectUrl(project, result.title)
+      })) || [];
+    } catch (error) {
+      console.error(`Search failed for ${project}:`, error);
+      return [];
+    }
+  }
+  static async searchMultipleProjects(query: string, projects: string[] = ['wikipedia', 'wikibooks', 'wikiversity'], limit: number = 5): Promise<SearchResult[]> {
+    const searchPromises = projects.map(project => this.search(query, project, limit));
+    try {
+      const results = await Promise.allSettled(searchPromises);
+      const allResults: SearchResult[] = [];
+      results.forEach((result) => {
+        if (result.status === 'fulfilled') {
+          allResults.push(...result.value);
+        }
+      });
+      return allResults.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+    } catch (error) {
+      console.error('Multi-project search failed:', error);
+      return [];
+    }
+  }
+  static async getPageContent(title: string, project: string = 'wikipedia'): Promise<string> {
+    const projectData = WIKIMEDIA_PROJECTS.find(p => p.id === project);
+    if (!projectData) {
+      throw new Error(`Unknown project: ${project}`);
+    }
+    // Handle language-specific Wikipedia projects
+    let apiUrl = projectData.apiUrl;
+    if (project.includes('-wikipedia')) {
+      const langCode = project.split('-')[0];
+      apiUrl = `https://${langCode}.wikipedia.org/w/api.php`;
+    }
+    // Try multiple approaches to get the best content
+    const approaches = [
+      // Approach 1: Get full extract
+      {
+        action: 'query',
+        format: 'json',
+        titles: title,
+        prop: 'extracts',
+        exintro: 'false',
+        explaintext: 'true',
+        exsectionformat: 'plain',
+        origin: '*'
+      },
+      // Approach 2: Get intro only if full content fails
+      {
+        action: 'query',
+        format: 'json',
+        titles: title,
+        prop: 'extracts',
+        exintro: 'true',
+        explaintext: 'true',
+        exsentences: '10',
+        origin: '*'
+      }
+    ];
+    for (const params of approaches) {
+      try {
+        const data = await this.makeRequest(apiUrl, params);
+        const pages = data.query?.pages || {};
+        const pageId = Object.keys(pages)[0];
+        if (pageId !== '-1' && pages[pageId]?.extract) {
+          const content = pages[pageId].extract;
+          if (content.length > 200) {
+            return content;
+          }
+        }
+      } catch (error) {
+        console.log(`Approach failed for ${title}:`, error);
+        continue;
+      }
+    }
+    // Fallback: Return a helpful message
+    const projectName = projectData.name;
+    return `This article exists but the content could not be fully loaded through the API.
+The article "${title}" is available on ${projectName}, but due to API limitations or the article's structure, we cannot display the full content here.
+This might happen because:
+- The article is a disambiguation page
+- The content is primarily in tables, lists, or special formatting
+- The article has restricted content access
+- There are temporary API limitations
+For the complete article with all formatting, images, and references, please visit the original source using the "View Original" button.`;
+  }
+  static async getRandomArticles(project: string = 'wikipedia', count: number = 5): Promise<SearchResult[]> {
+    const projectData = WIKIMEDIA_PROJECTS.find(p => p.id === project);
+    if (!projectData) {
+      throw new Error(`Unknown project: ${project}`);
+    }
+    const params = {
+      action: 'query',
+      format: 'json',
+      list: 'random',
+      rnnamespace: '0',
+      rnlimit: count.toString(),
+      origin: '*'
+    };
+    try {
+      const data = await this.makeRequest(projectData.apiUrl, params);
+      const randomPages = data.query?.random || [];
+      // Get snippets for random articles
+      const results: SearchResult[] = [];
+      for (const page of randomPages) {
+        try {
+          const snippet = await this.getPageSnippet(page.title, project);
+          results.push({
+            title: page.title,
+            pageid: page.id,
+            size: 0,
+            snippet: snippet,
+            timestamp: new Date().toISOString(),
+            project: project,
+            url: this.buildProjectUrl(project, page.title)
+          });
+        } catch (error) {
+          // If we can't get snippet, still include the article
+          results.push({
+            title: page.title,
+            pageid: page.id,
+            size: 0,
+            snippet: `Random article from ${projectData.name}`,
+            timestamp: new Date().toISOString(),
+            project: project,
+            url: this.buildProjectUrl(project, page.title)
+          });
+        }
+      }
+      return results;
+    } catch (error) {
+      console.error(`Failed to get random articles from ${project}:`, error);
+      return [];
+    }
+  }
+  private static async getPageSnippet(title: string, project: string): Promise<string> {
+    const projectData = WIKIMEDIA_PROJECTS.find(p => p.id === project);
+    if (!projectData) {
+      return 'No description available';
+    }
+    const params = {
+      action: 'query',
+      format: 'json',
+      titles: title,
+      prop: 'extracts',
+      exintro: 'true',
+      explaintext: 'true',
+      exsentences: '2',
+      origin: '*'
+    };
+    try {
+      const data = await this.makeRequest(projectData.apiUrl, params);
+      const pages = data.query?.pages || {};
+      const pageId = Object.keys(pages)[0];
+      if (pageId === '-1') {
+        return 'No description available';
+      }
+      const extract = pages[pageId]?.extract || 'No description available';
+      return extract.length > 200 ? extract.substring(0, 200) + '...' : extract;
+    } catch (error) {
+      return 'No description available';
+    }
+  }
+  static async generateStudyPlan(topic: string, difficulty: 'beginner' | 'intermediate' | 'advanced' = 'beginner'): Promise<StudyPlan> {
+    try {
+      // Search across multiple projects for comprehensive content
+      const searchResults = await this.searchMultipleProjects(topic, ['wikipedia', 'wikibooks', 'wikiversity'], 15);
+      if (searchResults.length === 0) {
+        throw new Error('No content found for this topic');
+      }
+      // Filter and organize results
+      const topicCount = difficulty === 'beginner' ? 5 : difficulty === 'intermediate' ? 8 : 12;
+      const selectedResults = searchResults.slice(0, topicCount);
+      // Generate study plan structure with real data
+      const studyPlan: StudyPlan = {
+        id: `plan-${Date.now()}`,
+        title: `${topic} Study Plan`,
+        description: `Comprehensive ${difficulty} level study plan for ${topic} using real Wikimedia content`,
+        difficulty,
+        estimatedTime: this.estimateStudyTime(selectedResults.length, difficulty),
+        created: new Date().toISOString(),
+        topics: await this.generateTopicsFromResults(selectedResults, difficulty)
+      };
+      return studyPlan;
+    } catch (error) {
+      console.error('Failed to generate study plan:', error);
+      throw error;
+    }
+  }
+  private static async generateTopicsFromResults(results: SearchResult[], difficulty: string): Promise<any[]> {
+    const topics = [];
+    for (let i = 0; i < results.length; i++) {
+      const result = results[i];
+      // Get more detailed content for each topic
+      let detailedContent = result.snippet;
+      try {
+        const fullContent = await this.getPageSnippet(result.title, result.project);
+        if (fullContent && fullContent !== 'No description available') {
+          detailedContent = fullContent;
+        }
+      } catch (error) {
+        console.log(`Could not get detailed content for ${result.title}`);
+      }
+      topics.push({
+        id: `topic-${Date.now()}-${i}`,
+        title: result.title,
+        description: detailedContent.replace(/<[^>]*>/g, '').substring(0, 200) + '...',
+        content: detailedContent,
+        completed: false,
+        estimatedTime: `${Math.ceil(Math.random() * 2 + 1)} hours`,
+        resources: [
+          {
+            title: result.title,
+            url: result.url,
+            type: 'article' as const,
+            project: result.project
+          }
+        ]
+      });
+    }
+    return topics;
+  }
+  private static buildProjectUrl(project: string, title: string): string {
+    const baseUrls: Record<string, string> = {
+      wikipedia: 'https://en.wikipedia.org/wiki/',
+      wikibooks: 'https://en.wikibooks.org/wiki/',
+      wikiquote: 'https://en.wikiquote.org/wiki/',
+      wikiversity: 'https://en.wikiversity.org/wiki/',
+      wiktionary: 'https://en.wiktionary.org/wiki/',
+      wikisource: 'https://en.wikisource.org/wiki/',
+    };
+    const baseUrl = baseUrls[project] || baseUrls.wikipedia;
+    return baseUrl + encodeURIComponent(title.replace(/ /g, '_'));
+  }
+  private static estimateStudyTime(contentCount: number, difficulty: string): string {
+    const baseHours = contentCount * 1.5; // More realistic time estimate
+    const multiplier = difficulty === 'beginner' ? 1 : difficulty === 'intermediate' ? 1.5 : 2;
+    const totalHours = Math.ceil(baseHours * multiplier);
+    if (totalHours < 24) {
+      return `${totalHours} hours`;
+    } else {
+      const weeks = Math.ceil(totalHours / 10); // Assuming 10 hours per week
+      return `${weeks} weeks`;
+    }
+  }
+  // Real-time progress tracking methods
+  static getStoredProgress(): any {
+    try {
+      const stored = localStorage.getItem('wikistro-progress');
+      return stored ? JSON.parse(stored) : this.getDefaultProgress();
+    } catch (error) {
+      return this.getDefaultProgress();
+    }
+  }
+  static saveProgress(progressData: any): void {
+    try {
+      localStorage.setItem('wikistro-progress', JSON.stringify(progressData));
+    } catch (error) {
+      console.error('Failed to save progress:', error);
+    }
+  }
+  static getStoredStudyPlans(): StudyPlan[] {
+    try {
+      const stored = localStorage.getItem('wikistro-study-plans');
+      return stored ? JSON.parse(stored) : [];
+    } catch (error) {
+      return [];
+    }
+  }
+  static saveStudyPlans(plans: StudyPlan[]): void {
+    try {
+      localStorage.setItem('wikistro-study-plans', JSON.stringify(plans));
+    } catch (error) {
+      console.error('Failed to save study plans:', error);
+    }
+  }
+  private static getDefaultProgress() {
+    return {
+      studyStreak: 0,
+      topicsCompleted: 0,
+      totalStudyTime: 0,
+      achievements: 0,
+      weeklyGoal: { current: 0, target: 12 },
+      recentActivity: [],
+      completedTopics: [],
+      lastStudyDate: null
+    };
+  }
+}

src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,109 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        secondary: {
+          50: '#f0fdfa',
+          100: '#ccfbf1',
+          200: '#99f6e4',
+          300: '#5eead4',
+          400: '#2dd4bf',
+          500: '#14b8a6',
+          600: '#0d9488',
+          700: '#0f766e',
+          800: '#115e59',
+          900: '#134e4a',
+        },
+        accent: {
+          50: '#fff7ed',
+          100: '#ffedd5',
+          200: '#fed7aa',
+          300: '#fdba74',
+          400: '#fb923c',
+          500: '#f97316',
+          600: '#ea580c',
+          700: '#c2410c',
+          800: '#9a3412',
+          900: '#7c2d12',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+        error: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.5s ease-out',
+        'bounce-subtle': 'bounceSubtle 2s infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        bounceSubtle: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-4px)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './', // 👈 important for Hugging Face Spaces
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});