375d702b19
All checks were successful
GBCI / build (push) Successful in 14m45s
- Added a new navigation style with responsive design in client-nav.css. - Created a comprehensive editor style in editor/style.css for better user experience. - Introduced paper style for ProseMirror editor with enhanced text formatting options. - Developed a media player component with waveform visualization and media library in player/page.tsx. - Styled media player controls and sliders for improved usability in player/style.css. - Implemented media type detection for audio, video, and slides. - Added keyboard shortcuts for media control and navigation.
861 lines
40 KiB
TypeScript
861 lines
40 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import {
|
|
Search, FileText, Newspaper, Presentation, Table,
|
|
Lightbulb, TrendingUp, Code, Briefcase,
|
|
Shield, Heart, Gamepad2, Palette, Book, Calculator,
|
|
Globe, 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" }
|
|
];
|
|
|
|
// 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 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)',
|
|
|
|
}}
|
|
/>
|
|
</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">
|
|
<Copy className="h-4 w-4" style={{ color: 'var(--muted-foreground)' }} />
|
|
</button>
|
|
<button className="p-1 hover:bg-gray-100 rounded">
|
|
<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)',
|
|
|
|
}}
|
|
/>
|
|
</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)',
|
|
|
|
}}
|
|
/>
|
|
</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)' }}>
|
|
<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)',
|
|
|
|
}}
|
|
/>
|
|
</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)',
|
|
|
|
}}
|
|
/>
|
|
</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" >
|
|
<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'
|
|
}`}
|
|
>
|
|
<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>
|
|
);
|
|
}
|