2a7aa20c4d
Some checks failed
GBCI / build (push) Failing after 10m45s
- Introduced a new CSS theme for Orange, featuring a modern color palette with distinct foreground and background colors. - Added an XTree Gold theme that emulates the classic 1980s DOS interface, complete with authentic colors and styles for file management elements. - Both themes include variables for customization and specific styles for various UI components such as cards, popovers, and menus.
897 lines
42 KiB
TypeScript
897 lines
42 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import {
|
|
Search, FileText, Newspaper, Presentation, Table,
|
|
File, Lightbulb, TrendingUp, Users, Code, Briefcase,
|
|
Shield, Heart, Gamepad2, Palette, Book, Calculator,
|
|
Globe, Zap, Clock, Star, ArrowRight, ExternalLink,
|
|
Copy, Download, Play, Server, Cpu, Cloud, Sun, ShoppingCart, UserPlus
|
|
} from 'lucide-react';
|
|
|
|
// Mock data for prompts
|
|
const promptCategories = [
|
|
{ name: "AI Development", count: 4, color: "--primary", icon: Code },
|
|
{ name: "Security", count: 8, color: "--destructive", icon: Shield },
|
|
{ name: "Programming", count: 6, color: "--secondary", icon: Code },
|
|
{ name: "Career & Employment", count: 3, color: "--accent", icon: Briefcase },
|
|
{ name: "Health & Therapy", count: 4, color: "--chart-1", icon: Heart },
|
|
{ name: "Games & Entertainment", count: 5, color: "--chart-2", icon: Gamepad2 },
|
|
{ name: "Art & Design", count: 4, color: "--chart-3", icon: Palette },
|
|
{ name: "Education", count: 6, color: "--chart-4", icon: Book },
|
|
{ name: "Business & Finance", count: 4, color: "--chart-5", icon: Calculator },
|
|
{ name: "Technology", count: 3, color: "--primary", icon: Globe }
|
|
];
|
|
|
|
const featuredPrompts = [
|
|
{ name: "Job Scout Pro", category: "Career & Employment", description: "AI-powered job hunting assistant", rating: 4.8 },
|
|
{ name: "Cyber Security Sentinel", category: "Security", description: "Advanced security analysis tool", rating: 4.9 },
|
|
{ name: "Code Copilot Pro", category: "Programming", description: "Intelligent coding companion", rating: 4.7 },
|
|
{ name: "Digital Synthia Companion", category: "AI & Chatbots", description: "Advanced AI conversation partner", rating: 4.6 }
|
|
];
|
|
|
|
// Mock data for templates
|
|
const templateCategories = [
|
|
{ name: "Documents", icon: FileText, count: 12, color: "--primary" },
|
|
{ name: "Presentations", icon: Presentation, count: 8, color: "--destructive" },
|
|
{ name: "Spreadsheets", icon: Table, count: 6, color: "--secondary" }
|
|
];
|
|
|
|
const featuredTemplates = [
|
|
{ name: "Business Proposal", type: "Document", description: "Professional business proposal template" },
|
|
{ name: "Pitch Deck", type: "Presentation", description: "Startup pitch presentation template" },
|
|
{ name: "Budget Tracker", type: "Spreadsheet", description: "Personal finance tracking spreadsheet" },
|
|
{ name: "Project Report", type: "Document", description: "Comprehensive project report template" }
|
|
];
|
|
|
|
// Mock data for news
|
|
const newsCategories = [
|
|
{ name: "Technology", count: 45, color: "--primary" },
|
|
{ name: "AI & ML", count: 38, color: "--chart-2" },
|
|
{ name: "Business", count: 52, color: "--secondary" },
|
|
{ name: "Science", count: 29, color: "--destructive" },
|
|
{ name: "Startups", count: 34, color: "--accent" }
|
|
];
|
|
|
|
const featuredNews = [
|
|
{
|
|
title: "OpenAI Announces GPT-5 with Revolutionary Capabilities",
|
|
source: "TechCrunch",
|
|
time: "2 hours ago",
|
|
category: "AI & ML",
|
|
summary: "The latest AI model shows unprecedented reasoning abilities..."
|
|
},
|
|
{
|
|
title: "Quantum Computing Breakthrough Achieves New Milestone",
|
|
source: "Nature",
|
|
time: "4 hours ago",
|
|
category: "Science",
|
|
summary: "Researchers demonstrate error-corrected quantum computation..."
|
|
},
|
|
{
|
|
title: "Tech Giants Report Q4 Earnings Exceed Expectations",
|
|
source: "Bloomberg",
|
|
time: "6 hours ago",
|
|
category: "Business",
|
|
summary: "Major technology companies show strong growth despite market concerns..."
|
|
}
|
|
];
|
|
|
|
// MCP Servers data
|
|
const mcpServers = [
|
|
{
|
|
name: "ModelScope MCP Playground",
|
|
description: "Exploring the Free Combination and Interaction of Open Source Models and MCP Server",
|
|
type: "Hosted",
|
|
category: "developer-tools",
|
|
usage: "1203",
|
|
icon: Server
|
|
},
|
|
{
|
|
name: "ModelScope MCP Tutorial",
|
|
description: "Learn about MCP, observe and discuss best practices",
|
|
type: "Hosted",
|
|
category: "knowledge-and-memory",
|
|
usage: "264",
|
|
icon: Book
|
|
},
|
|
{
|
|
name: "TONGYI Lingma Programming Agent",
|
|
description: "Supports the use of MCP tools",
|
|
type: "Hosted",
|
|
category: "developer-tools",
|
|
usage: "1203",
|
|
icon: Code
|
|
},
|
|
{
|
|
name: "Cherry Studio Integration",
|
|
description: "Integrate ModelScope-hosted MCP server in Cherry Studio",
|
|
type: "Hosted",
|
|
category: "developer-tools",
|
|
usage: "1203",
|
|
icon: Cpu
|
|
},
|
|
{
|
|
name: "fetch",
|
|
description: "Retrieve and process content from web pages, converting HTML to markdown",
|
|
type: "Hosted",
|
|
category: "search",
|
|
usage: "609",
|
|
icon: Cloud
|
|
},
|
|
{
|
|
name: "amap-maps",
|
|
description: "Location-based services using Amap Maps MCP server",
|
|
type: "Hosted",
|
|
category: "location-services",
|
|
usage: "71",
|
|
icon: Globe
|
|
},
|
|
{
|
|
name: "bing-cn-mcp-server",
|
|
description: "Bing search Chinese version",
|
|
type: "Hosted",
|
|
category: "search",
|
|
usage: "609",
|
|
icon: Search
|
|
},
|
|
{
|
|
name: "AllVoiceLab",
|
|
description: "Text-to-speech and video translation APIs",
|
|
type: "Local",
|
|
category: "entertainment-and-media",
|
|
usage: "106",
|
|
icon: Heart
|
|
},
|
|
{
|
|
name: "12306-mcp",
|
|
description: "Search for 12306 train tickets",
|
|
type: "Hosted",
|
|
category: "other",
|
|
usage: "294",
|
|
icon: Clock
|
|
},
|
|
{
|
|
name: "Jina-AI-MCP-Tools",
|
|
description: "Integrates with Jina AI Search Foundation APIs",
|
|
type: "Hosted",
|
|
category: "search",
|
|
usage: "609",
|
|
icon: TrendingUp
|
|
}
|
|
];
|
|
|
|
// LLM Tools data
|
|
const llmTools = [
|
|
{
|
|
name: "Enroll",
|
|
description: "User registration and account creation tool",
|
|
category: "User Management",
|
|
icon: UserPlus,
|
|
color: "--primary"
|
|
},
|
|
{
|
|
name: "How is the weather",
|
|
description: "Real-time weather information lookup",
|
|
category: "Location Services",
|
|
icon: Sun,
|
|
color: "--accent"
|
|
},
|
|
{
|
|
name: "Price of Product",
|
|
description: "Product price lookup and comparison",
|
|
category: "E-commerce",
|
|
icon: ShoppingCart,
|
|
color: "--secondary"
|
|
},
|
|
{
|
|
name: "Document Analyzer",
|
|
description: "Extract and analyze document content",
|
|
category: "Knowledge",
|
|
icon: FileText,
|
|
color: "--chart-2"
|
|
},
|
|
{
|
|
name: "Code Generator",
|
|
description: "Generate code snippets from descriptions",
|
|
category: "Development",
|
|
icon: Code,
|
|
color: "--primary"
|
|
},
|
|
{
|
|
name: "Data Visualizer",
|
|
description: "Create charts and visualizations from data",
|
|
category: "Analytics",
|
|
icon: TrendingUp,
|
|
color: "--chart-1"
|
|
}
|
|
];
|
|
|
|
export default function LabComponent() {
|
|
const [activeTab, setActiveTab] = useState('prompts');
|
|
const [selectedCategory, setSelectedCategory] = useState(null);
|
|
|
|
const renderPrompts = () => (
|
|
<div className="h-full flex flex-col" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
{/* Header */}
|
|
<div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-2xl font-bold flex items-center gap-2">
|
|
<Lightbulb className="h-6 w-6" style={{ color: 'var(--chart-4)' }} />
|
|
Prompt Library
|
|
</h2>
|
|
<div className="flex gap-2">
|
|
<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)' }}>
|
|
Create Custom
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search 1000+ prompts..."
|
|
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:border-transparent"
|
|
style={{
|
|
borderColor: 'var(--border)',
|
|
backgroundColor: 'var(--background)',
|
|
color: 'var(--foreground)',
|
|
'--ring': 'var(--ring)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex">
|
|
{/* Categories Sidebar */}
|
|
<div className="w-80 border-r p-4" style={{ borderColor: 'var(--border)', backgroundColor: 'var(--background)' }}>
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Categories</h3>
|
|
<div className="space-y-2">
|
|
{promptCategories.map((category, index) => {
|
|
const IconComponent = category.icon;
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={() => setSelectedCategory(category.name)}
|
|
className={`w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card ${
|
|
selectedCategory === category.name ? 'bg-card shadow-sm border-l-4' : ''
|
|
}`}
|
|
style={{
|
|
borderLeftColor: selectedCategory === category.name ? `var(${category.color})` : 'transparent',
|
|
backgroundColor: selectedCategory === category.name ? 'var(--card)' : '',
|
|
color: 'var(--card-foreground)'
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<IconComponent className="h-4 w-4" style={{ color: `var(${category.color})` }} />
|
|
<span className="font-medium">{category.name}</span>
|
|
</div>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{category.count}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Featured Section */}
|
|
<div className="mt-8">
|
|
<h3 className="font-semibold mb-4 flex items-center gap-2" style={{ color: 'var(--muted-foreground)' }}>
|
|
<Star className="h-4 w-4" style={{ color: 'var(--chart-4)' }} />
|
|
Featured Prompts
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{featuredPrompts.map((prompt, index) => (
|
|
<div key={index} className="p-3 rounded-lg shadow-sm border" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
<h4 className="font-medium text-sm">{prompt.name}</h4>
|
|
<p className="text-xs mt-1" style={{ color: 'var(--muted-foreground)' }}>{prompt.description}</p>
|
|
<div className="flex items-center justify-between mt-2">
|
|
<span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)' }}>
|
|
{prompt.category}
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
<Star className="h-3 w-3 fill-current" style={{ color: 'var(--chart-4)' }} />
|
|
<span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>{prompt.rating}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="flex-1 p-6" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{[...Array(8)].map((_, index) => (
|
|
<div key={index} className="border rounded-lg p-4 transition-shadow" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className="font-semibold text-lg">Advanced Code Review Assistant</h3>
|
|
<div className="flex gap-2">
|
|
<button className="p-1 hover:bg-gray-100 rounded" style={{ '--hover-bg': 'var(--muted)' }}>
|
|
<Copy className="h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded" style={{ '--hover-bg': 'var(--muted)' }}>
|
|
<Download className="h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm mb-3" style={{ color: 'var(--muted-foreground)' }}>
|
|
AI assistant specialized in code review, security analysis, and optimization suggestions.
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--chart-2)', color: 'var(--chart-2-foreground)' }}>Programming</span>
|
|
<button className="flex items-center gap-1 text-sm font-medium" style={{ color: 'var(--primary)' }}>
|
|
<Play className="h-3 w-3" />
|
|
Use Prompt
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderTemplates = () => (
|
|
<div className="h-full flex flex-col" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
{/* Header */}
|
|
<div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-2xl font-bold flex items-center gap-2">
|
|
<FileText className="h-6 w-6" style={{ color: 'var(--secondary)' }} />
|
|
Document Templates
|
|
</h2>
|
|
<button className="px-4 py-2 text-white rounded-lg hover:bg-green-700 transition-colors" style={{ backgroundColor: 'var(--secondary)', color: 'var(--secondary-foreground)' }}>
|
|
Upload Template
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search templates..."
|
|
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:border-transparent"
|
|
style={{
|
|
borderColor: 'var(--border)',
|
|
backgroundColor: 'var(--background)',
|
|
color: 'var(--foreground)',
|
|
'--ring': 'var(--ring)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex">
|
|
{/* Template Types */}
|
|
<div className="w-80 border-r p-4" style={{ borderColor: 'var(--border)', backgroundColor: 'var(--background)' }}>
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Template Types</h3>
|
|
<div className="space-y-2">
|
|
{templateCategories.map((category, index) => {
|
|
const IconComponent = category.icon;
|
|
return (
|
|
<button
|
|
key={index}
|
|
className="w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card"
|
|
style={{ color: 'var(--card-foreground)' }}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<IconComponent className="h-4 w-4" style={{ color: `var(${category.color})` }} />
|
|
<span className="font-medium">{category.name}</span>
|
|
</div>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{category.count}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="mt-8">
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Quick Start</h3>
|
|
<div className="space-y-2">
|
|
<button className="w-full p-3 text-left rounded-lg transition-colors border-l-4" style={{ backgroundColor: 'var(--primary)/10', borderColor: 'var(--primary)', color: 'var(--primary)' }}>
|
|
<div className="font-medium">Blank Document</div>
|
|
<div className="text-xs">Start with empty document</div>
|
|
</button>
|
|
<button className="w-full p-3 text-left rounded-lg transition-colors border-l-4" style={{ backgroundColor: 'var(--destructive)/10', borderColor: 'var(--destructive)', color: 'var(--destructive)' }}>
|
|
<div className="font-medium">Blank Presentation</div>
|
|
<div className="text-xs">Create new slideshow</div>
|
|
</button>
|
|
<button className="w-full p-3 text-left rounded-lg transition-colors border-l-4" style={{ backgroundColor: 'var(--secondary)/10', borderColor: 'var(--secondary)', color: 'var(--secondary)' }}>
|
|
<div className="font-medium">Blank Spreadsheet</div>
|
|
<div className="text-xs">New data table</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Templates Grid */}
|
|
<div className="flex-1 p-6" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{[...Array(9)].map((_, index) => (
|
|
<div key={index} className="border rounded-lg overflow-hidden transition-shadow" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
{/* Template Preview */}
|
|
<div className="h-40 flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, var(--primary)/20, var(--secondary)/30)' }}>
|
|
<FileText className="h-12 w-12" style={{ color: 'var(--primary)' }} />
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<h3 className="font-semibold mb-2">Business Proposal Template</h3>
|
|
<p className="text-sm mb-3" style={{ color: 'var(--muted-foreground)' }}>
|
|
Professional template for business proposals and project pitches.
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)' }}>Document</span>
|
|
<button className="flex items-center gap-1 text-sm font-medium" style={{ color: 'var(--primary)' }}>
|
|
Use Template
|
|
<ArrowRight className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderNews = () => (
|
|
<div className="h-full flex flex-col" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
{/* Header */}
|
|
<div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-2xl font-bold flex items-center gap-2">
|
|
<Newspaper className="h-6 w-6" style={{ color: 'var(--primary)' }} />
|
|
News & Insights
|
|
</h2>
|
|
<div className="flex gap-2">
|
|
<button className="px-4 py-2 border rounded-lg transition-colors" style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
|
|
Customize Feed
|
|
</button>
|
|
<button className="px-4 py-2 text-white rounded-lg transition-colors" style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)' }}>
|
|
Add Source
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search & Filters */}
|
|
<div className="flex gap-4">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search news and articles..."
|
|
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:border-transparent"
|
|
style={{
|
|
borderColor: 'var(--border)',
|
|
backgroundColor: 'var(--background)',
|
|
color: 'var(--foreground)',
|
|
'--ring': 'var(--ring)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<select className="px-4 py-2 border rounded-lg focus:ring-2 focus:border-transparent" style={{ borderColor: 'var(--border)', backgroundColor: 'var(--background)', color: 'var(--foreground)', '--ring': 'var(--ring)' }}>
|
|
<option>All Time</option>
|
|
<option>Today</option>
|
|
<option>This Week</option>
|
|
<option>This Month</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex">
|
|
{/* News Categories */}
|
|
<div className="w-80 border-r p-4" style={{ borderColor: 'var(--border)', backgroundColor: 'var(--background)' }}>
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Categories</h3>
|
|
<div className="space-y-2">
|
|
{newsCategories.map((category, index) => (
|
|
<button
|
|
key={index}
|
|
className="w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card"
|
|
style={{ color: 'var(--card-foreground)' }}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: `var(${category.color})` }}
|
|
></div>
|
|
<span className="font-medium">{category.name}</span>
|
|
</div>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{category.count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Trending Topics */}
|
|
<div className="mt-8">
|
|
<h3 className="font-semibold mb-4 flex items-center gap-2" style={{ color: 'var(--muted-foreground)' }}>
|
|
<TrendingUp className="h-4 w-4" style={{ color: 'var(--accent)' }} />
|
|
Trending
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{['OpenAI GPT-5', 'Quantum Computing', 'Climate Tech', 'Space X'].map((topic, index) => (
|
|
<button key={index} className="w-full text-left p-2 hover:bg-card rounded-lg transition-colors" style={{ color: 'var(--card-foreground)' }}>
|
|
<span className="text-sm font-medium">#{topic}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* News Feed */}
|
|
<div className="flex-1 p-6" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
<div className="space-y-4">
|
|
{[...Array(6)].map((_, index) => (
|
|
<article key={index} className="border rounded-lg p-4 transition-shadow" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-24 h-24 rounded-lg flex-shrink-0 flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, var(--primary)/20, var(--secondary)/30)' }}>
|
|
<Newspaper className="h-8 w-8" style={{ color: 'var(--primary)' }} />
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)' }}>AI & ML</span>
|
|
<span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>TechCrunch</span>
|
|
<span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>•</span>
|
|
<span className="text-xs flex items-center gap-1" style={{ color: 'var(--muted-foreground)' }}>
|
|
<Clock className="h-3 w-3" />
|
|
2 hours ago
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="font-semibold text-lg mb-2 hover:text-primary cursor-pointer">
|
|
OpenAI Announces GPT-5 with Revolutionary Capabilities
|
|
</h3>
|
|
|
|
<p className="text-sm mb-3" style={{ color: 'var(--muted-foreground)' }}>
|
|
The latest AI model shows unprecedented reasoning abilities and multimodal understanding,
|
|
setting new benchmarks across various tasks and potentially reshaping the AI landscape...
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 text-sm" style={{ color: 'var(--muted-foreground)' }}>
|
|
<button className="hover:text-primary transition-colors">Save</button>
|
|
<button className="hover:text-primary transition-colors">Share</button>
|
|
<button className="hover:text-primary transition-colors">Discuss</button>
|
|
</div>
|
|
<button className="flex items-center gap-1 text-sm font-medium" style={{ color: 'var(--primary)' }}>
|
|
Read Full Article
|
|
<ExternalLink className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderMCPServers = () => (
|
|
<div className="h-full flex flex-col" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
{/* Header */}
|
|
<div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-2xl font-bold flex items-center gap-2">
|
|
<Server className="h-6 w-6" style={{ color: 'var(--chart-2)' }} />
|
|
MCP Servers
|
|
</h2>
|
|
<div className="flex gap-2">
|
|
<button className="px-4 py-2 border rounded-lg transition-colors" style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
|
|
Documentation
|
|
</button>
|
|
<button className="px-4 py-2 text-white rounded-lg transition-colors" style={{ backgroundColor: 'var(--chart-2)', color: 'var(--chart-2-foreground)' }}>
|
|
Create Server
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search MCP servers..."
|
|
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:border-transparent"
|
|
style={{
|
|
borderColor: 'var(--border)',
|
|
backgroundColor: 'var(--background)',
|
|
color: 'var(--foreground)',
|
|
'--ring': 'var(--ring)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex">
|
|
{/* Categories Sidebar */}
|
|
<div className="w-80 border-r p-4" style={{ borderColor: 'var(--border)', backgroundColor: 'var(--background)' }}>
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Categories</h3>
|
|
<div className="space-y-2">
|
|
{[
|
|
{ name: "developer-tools", count: 1203, color: "--primary" },
|
|
{ name: "search", count: 609, color: "--secondary" },
|
|
{ name: "communication", count: 233, color: "--chart-1" },
|
|
{ name: "entertainment", count: 106, color: "--chart-2" },
|
|
{ name: "file-systems", count: 207, color: "--chart-3" },
|
|
{ name: "finance", count: 226, color: "--chart-4" },
|
|
{ name: "knowledge", count: 264, color: "--chart-5" },
|
|
{ name: "location", count: 71, color: "--primary" },
|
|
{ name: "other", count: 294, color: "--accent" }
|
|
].map((category, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setSelectedCategory(category.name)}
|
|
className={`w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card ${
|
|
selectedCategory === category.name ? 'bg-card shadow-sm border-l-4' : ''
|
|
}`}
|
|
style={{
|
|
borderLeftColor: selectedCategory === category.name ? `var(${category.color})` : 'transparent',
|
|
backgroundColor: selectedCategory === category.name ? 'var(--card)' : '',
|
|
color: 'var(--card-foreground)'
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: `var(${category.color})` }}
|
|
></div>
|
|
<span className="font-medium">{category.name}</span>
|
|
</div>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{category.count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Quick Filters */}
|
|
<div className="mt-8">
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Server Type</h3>
|
|
<div className="space-y-2">
|
|
<button className="w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card" style={{ color: 'var(--card-foreground)' }}>
|
|
<span className="font-medium">Hosted</span>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>24</span>
|
|
</button>
|
|
<button className="w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card" style={{ color: 'var(--card-foreground)' }}>
|
|
<span className="font-medium">Local</span>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>8</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="flex-1 p-6 overflow-y-auto" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{mcpServers.map((server, index) => {
|
|
const IconComponent = server.icon;
|
|
return (
|
|
<div key={index} className="border rounded-lg p-4 transition-shadow" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<IconComponent className="h-5 w-5" style={{ color: 'var(--chart-2)' }} />
|
|
<h3 className="font-semibold">{server.name}</h3>
|
|
</div>
|
|
<span className={`text-xs px-2 py-1 rounded ${
|
|
server.type === 'Hosted' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'
|
|
}`}>
|
|
{server.type}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm mb-3" style={{ color: 'var(--muted-foreground)' }}>
|
|
{server.description}
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{server.category}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>{server.usage} uses</span>
|
|
<button className="flex items-center gap-1 text-sm font-medium" style={{ color: 'var(--chart-2)' }}>
|
|
<ArrowRight className="h-3 w-3" />
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderLLMTools = () => (
|
|
<div className="h-full flex flex-col" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
{/* Header */}
|
|
<div className="p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-2xl font-bold flex items-center gap-2">
|
|
<Cpu className="h-6 w-6" style={{ color: 'var(--chart-3)' }} />
|
|
LLM Tools
|
|
</h2>
|
|
<div className="flex gap-2">
|
|
<button className="px-4 py-2 border rounded-lg transition-colors" style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
|
|
Documentation
|
|
</button>
|
|
<button className="px-4 py-2 text-white rounded-lg transition-colors" style={{ backgroundColor: 'var(--chart-3)', color: 'var(--chart-3-foreground)' }}>
|
|
Create Tool
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search LLM tools..."
|
|
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:border-transparent"
|
|
style={{
|
|
borderColor: 'var(--border)',
|
|
backgroundColor: 'var(--background)',
|
|
color: 'var(--foreground)',
|
|
'--ring': 'var(--ring)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex">
|
|
{/* Categories Sidebar */}
|
|
<div className="w-80 border-r p-4" style={{ borderColor: 'var(--border)', backgroundColor: 'var(--background)' }}>
|
|
<h3 className="font-semibold mb-4" style={{ color: 'var(--muted-foreground)' }}>Categories</h3>
|
|
<div className="space-y-2">
|
|
{[
|
|
{ name: "User Management", count: 12, color: "--primary" },
|
|
{ name: "Location Services", count: 8, color: "--accent" },
|
|
{ name: "E-commerce", count: 6, color: "--secondary" },
|
|
{ name: "Knowledge", count: 15, color: "--chart-2" },
|
|
{ name: "Development", count: 22, color: "--primary" },
|
|
{ name: "Analytics", count: 9, color: "--chart-1" }
|
|
].map((category, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setSelectedCategory(category.name)}
|
|
className={`w-full text-left p-3 rounded-lg transition-colors flex items-center justify-between hover:bg-card ${
|
|
selectedCategory === category.name ? 'bg-card shadow-sm border-l-4' : ''
|
|
}`}
|
|
style={{
|
|
borderLeftColor: selectedCategory === category.name ? `var(${category.color})` : 'transparent',
|
|
backgroundColor: selectedCategory === category.name ? 'var(--card)' : '',
|
|
color: 'var(--card-foreground)'
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: `var(${category.color})` }}
|
|
></div>
|
|
<span className="font-medium">{category.name}</span>
|
|
</div>
|
|
<span className="text-sm bg-gray-200 px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{category.count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Featured Tools */}
|
|
<div className="mt-8">
|
|
<h3 className="font-semibold mb-4 flex items-center gap-2" style={{ color: 'var(--muted-foreground)' }}>
|
|
<Star className="h-4 w-4" style={{ color: 'var(--chart-4)' }} />
|
|
Most Used
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{llmTools.slice(0, 3).map((tool, index) => (
|
|
<div key={index} className="p-3 rounded-lg shadow-sm border" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="w-3 h-3 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: `var(${tool.color})` }}
|
|
></div>
|
|
<h4 className="font-medium text-sm">{tool.name}</h4>
|
|
</div>
|
|
<p className="text-xs mt-1" style={{ color: 'var(--muted-foreground)' }}>{tool.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="flex-1 p-6 overflow-y-auto" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{llmTools.map((tool, index) => {
|
|
const IconComponent = tool.icon;
|
|
return (
|
|
<div key={index} className="border rounded-lg p-4 transition-shadow" style={{ backgroundColor: 'var(--card)', color: 'var(--card-foreground)', borderColor: 'var(--border)' }}>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<IconComponent className="h-5 w-5" style={{ color: `var(${tool.color})` }} />
|
|
<h3 className="font-semibold">{tool.name}</h3>
|
|
</div>
|
|
<button className="p-1 hover:bg-gray-100 rounded" style={{ '--hover-bg': 'var(--muted)' }}>
|
|
<Copy className="h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
</button>
|
|
</div>
|
|
<p className="text-sm mb-3" style={{ color: 'var(--muted-foreground)' }}>
|
|
{tool.description}
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--muted)', color: 'var(--muted-foreground)' }}>
|
|
{tool.category}
|
|
</span>
|
|
<button className="flex items-center gap-1 text-sm font-medium" style={{ color: 'var(--chart-3)' }}>
|
|
<Play className="h-3 w-3" />
|
|
Run Tool
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="h-screen flex flex-col" style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
|
|
{/* Tab Navigation */}
|
|
<div className="border-b" style={{ backgroundColor: 'var(--background)', borderColor: 'var(--border)' }}>
|
|
<div className="flex">
|
|
{[
|
|
{ id: 'prompts', label: 'Prompts', icon: Lightbulb, color: 'text-yellow-600' },
|
|
{ id: 'templates', label: 'Templates', icon: FileText, color: 'text-green-600' },
|
|
{ id: 'news', label: 'News', icon: Newspaper, color: 'text-blue-600' },
|
|
{ id: 'mcp', label: 'MCP Servers', icon: Server, color: 'text-purple-600' },
|
|
{ id: 'llm-tools', label: 'LLM Tools', icon: Cpu, color: 'text-indigo-600' }
|
|
].map((tab) => {
|
|
const IconComponent = tab.icon;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-2 px-6 py-4 border-b-2 transition-colors font-medium ${
|
|
activeTab === tab.id
|
|
? `border-current ${tab.color} bg-card`
|
|
: 'border-transparent hover:bg-card'
|
|
}`}
|
|
style={{
|
|
color: activeTab === tab.id ? `var(${tab.color.split('-')[1]})` : 'var(--muted-foreground)',
|
|
'--current': activeTab === tab.id ? `var(${tab.color.split('-')[1]})` : ''
|
|
}}
|
|
>
|
|
<IconComponent className="h-4 w-4" />
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-hidden">
|
|
{activeTab === 'prompts' && renderPrompts()}
|
|
{activeTab === 'templates' && renderTemplates()}
|
|
{activeTab === 'news' && renderNews()}
|
|
{activeTab === 'mcp' && renderMCPServers()}
|
|
{activeTab === 'llm-tools' && renderLLMTools()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|