create

api-v8/app/Http/Controllers/BookController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+
+class BookController extends Controller
+{
+    public function show($id)
+    {
+        $books = $this->loadBooks();
+        $book = collect($books)->firstWhere('id', $id);
+
+        if (!$book) {
+            abort(404);
+        }
+
+        // 获取其他版本
+        $otherVersions = array_filter($books, function ($b) use ($book) {
+            return $b['title'] == $book['title'] && $b['id'] != $book['id'];
+        });
+
+        return view('library.book.show', compact('book', 'otherVersions'));
+    }
+
+    public function read($id)
+    {
+        $books = $this->loadBooks();
+        $book = collect($books)->firstWhere('id', $id);
+
+        if (!$book) {
+            abort(404);
+        }
+
+        return view('book.read', compact('book'));
+    }
+
+    private function loadBooks()
+    {
+        $json = Storage::disk('public')->get('data/books.json');
+        return json_decode($json, true);
+    }
+}

api-v8/app/Http/Controllers/CategoryController.php

@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+
+class CategoryController extends Controller
+{
+    public function index()
+    {
+        $categories = $this->loadCategories();
+        $books = $this->loadBooks();
+
+        // 获取一级分类和对应的书籍
+        $categoryData = [];
+        foreach ($categories as $category) {
+            if ($category['level'] == 1) {
+                $categoryBooks = array_filter($books, function ($book) use ($category) {
+                    return $book['category_id'] == $category['id'];
+                });
+                $categoryData[] = [
+                    'category' => $category,
+                    'books' => array_slice(array_values($categoryBooks), 0, 3)
+                ];
+            }
+        }
+
+        return view('library.index', compact('categoryData', 'categories'));
+    }
+
+    public function show($id)
+    {
+        $categories = $this->loadCategories();
+        $books = $this->loadBooks();
+
+        $currentCategory = collect($categories)->firstWhere('id', $id);
+        if (!$currentCategory) {
+            abort(404);
+        }
+
+        // 获取子分类
+        $subCategories = array_filter($categories, function ($cat) use ($id) {
+            return $cat['parent_id'] == $id;
+        });
+
+        // 获取该分类下的书籍
+        $categoryBooks = array_filter($books, function ($book) use ($id) {
+            return $book['category_id'] == $id;
+        });
+
+        // 获取面包屑
+        $breadcrumbs = $this->getBreadcrumbs($currentCategory, $categories);
+
+        return view('library.category', compact('currentCategory', 'subCategories', 'categoryBooks', 'breadcrumbs'));
+    }
+
+    private function loadCategories()
+    {
+        $json = Storage::disk('public')->get('data/categories.json');
+        return json_decode($json, true);
+    }
+
+    private function loadBooks()
+    {
+        $json = Storage::disk('public')->get('data/books.json');
+        return json_decode($json, true);
+    }
+
+    private function getBreadcrumbs($category, $categories)
+    {
+        $breadcrumbs = [];
+        $current = $category;
+
+        while ($current) {
+            array_unshift($breadcrumbs, $current);
+            $current = collect($categories)->firstWhere('id', $current['parent_id']);
+        }
+
+        return $breadcrumbs;
+    }
+}

api-v8/resources/views/library/book/read.blade.php

@@ -0,0 +1,96 @@
+@extends('library.layouts.app')
+
+@section('title', '阅读: ' . $book['title'])
+
+@section('content')
+<div class="page-body">
+    <div class="container-xl">
+        <div class="row">
+            <div class="col-md-3">
+                <div class="card position-sticky" style="top: 1rem;">
+                    <div class="card-header">
+                        <h4 class="card-title">目录</h4>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="list-group list-group-flush">
+                            @if(isset($book['contents']))
+                            @foreach($book['contents'] as $chapter)
+                            <a href="#chapter-{{ $loop->iteration }}"
+                                class="list-group-item list-group-item-action">
+                                {{ $chapter['title'] }}
+                            </a>
+                            @endforeach
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <div>
+                            <h3 class="card-title">{{ $book['title'] }}</h3>
+                            <div class="text-muted">{{ $book['author'] }}</div>
+                        </div>
+                        <div class="btn-group">
+                            <button class="btn btn-outline-secondary btn-sm" onclick="adjustFontSize(-1)">
+                                <svg class="icon" width="24" height="24">
+                                    <use xlink:href="#tabler-minus"></use>
+                                </svg>
+                            </button>
+                            <button class="btn btn-outline-secondary btn-sm" onclick="adjustFontSize(1)">
+                                <svg class="icon" width="24" height="24">
+                                    <use xlink:href="#tabler-plus"></use>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body" id="reading-content" style="font-size: 16px; line-height: 1.8;">
+                        @if(isset($book['contents']))
+                        @foreach($book['contents'] as $chapter)
+                        <div id="chapter-{{ $loop->iteration }}" class="mb-5">
+                            <h4 class="mb-3">{{ $chapter['title'] }}</h4>
+                            <div class="text-justify">
+                                {!! nl2br(e($chapter['content'])) !!}
+                            </div>
+                        </div>
+                        @endforeach
+                        @else
+                        <div class="text-justify">
+                            <p>这是《{{ $book['title'] }}》的正文内容。在这里显示完整的书籍内容，支持章节导航和字体大小调整。</p>
+                            <p>本书由{{ $book['author'] }}著，是巴利语系佛教的重要典籍之一。内容深奥，值得反复研读。</p>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    function adjustFontSize(delta) {
+        const content = document.getElementById('reading-content');
+        const currentSize = parseInt(window.getComputedStyle(content).fontSize);
+        const newSize = Math.max(12, Math.min(24, currentSize + delta));
+        content.style.fontSize = newSize + 'px';
+    }
+
+    // 平滑滚动
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+</script>
+@endpush
+@endsection

api-v8/resources/views/library/book/show.blade.php

@@ -0,0 +1,114 @@
+@extends('library.layouts.app')
+
+@section('title', $book['title'] . ' - 巴利书库')
+
+@section('content')
+<div class="page-body">
+    <div class="container-xl">
+        <div class="page-header d-print-none">
+            <div class="row align-items-center">
+                <div class="col">
+                    <nav aria-label="breadcrumb">
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item"><a href="{{ route('home') }}">首页</a></li>
+                            <li class="breadcrumb-item active">{{ $book['title'] }}</li>
+                        </ol>
+                    </nav>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-4">
+                <div class="card">
+                    <img src="{{ $book['cover'] }}" class="card-img-top" alt="{{ $book['title'] }}" style="max-height: 400px; width: fit-content;">
+                    <div class="card-body text-center">
+                        <a href="{{ route('book.read', $book['id']) }}" class="btn btn-primary btn-lg w-100 mb-2">
+                            <svg class="icon me-2" width="24" height="24">
+                                <use xlink:href="#tabler-book-2"></use>
+                            </svg>
+                            在线阅读
+                        </a>
+                        <button class="btn btn-outline-secondary w-100">
+                            <svg class="icon me-2" width="24" height="24">
+                                <use xlink:href="#tabler-download"></use>
+                            </svg>
+                            下载
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title">{{ $book['title'] }}</h3>
+                    </div>
+                    <div class="card-body">
+                        <div class="row mb-3">
+                            <div class="col-sm-3"><strong>作者:</strong></div>
+                            <div class="col-sm-9">{{ $book['author'] }}</div>
+                        </div>
+                        <div class="row mb-3">
+                            <div class="col-sm-3"><strong>语言:</strong></div>
+                            <div class="col-sm-9">{{ $book['language'] ?? '巴利语' }}</div>
+                        </div>
+                        <div class="row mb-3">
+                            <div class="col-sm-3"><strong>简介:</strong></div>
+                            <div class="col-sm-9">{{ $book['description'] }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                @if(isset($book['contents']) && count($book['contents']) > 0)
+                <div class="card mt-3">
+                    <div class="card-header">
+                        <h3 class="card-title">目录</h3>
+                    </div>
+                    <div class="card-body">
+                        <div class="list-group">
+                            @foreach($book['contents'] as $chapter)
+                            <a href="{{ route('book.read', $book['id']) }}?chapter={{ $loop->iteration }}"
+                                class="list-group-item list-group-item-action">
+                                <div class="d-flex w-100 justify-content-between">
+                                    <h6 class="mb-1">{{ $chapter['title'] }}</h6>
+                                    <small>第{{ $loop->iteration }}章</small>
+                                </div>
+                                @if(isset($chapter['summary']))
+                                <p class="mb-1 text-muted">{{ $chapter['summary'] }}</p>
+                                @endif
+                            </a>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+                @endif
+
+                @if(count($otherVersions) > 0)
+                <div class="card mt-3">
+                    <div class="card-header">
+                        <h3 class="card-title">其他版本</h3>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            @foreach($otherVersions as $version)
+                            <div class="col-md-6 mb-3">
+                                <div class="d-flex">
+                                    <img src="{{ $version['cover'] }}" class="me-3" style="width: 60px; height: 80px; object-fit: cover;" alt="{{ $version['title'] }}">
+                                    <div>
+                                        <h6><a href="{{ route('book.show', $version['id']) }}">{{ $version['title'] }}</a></h6>
+                                        <div class="text-muted small">{{ $version['author'] }}</div>
+                                        <div class="text-muted small">{{ $version['language'] ?? '巴利语' }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>
+@endsection

api-v8/resources/views/library/category.blade.php

@@ -0,0 +1,88 @@
+@extends('library.layouts.app')
+
+@section('title', $currentCategory['name'] . ' - 巴利书库')
+
+@section('content')
+<div class="page-body">
+    <div class="container-xl">
+        <div class="page-header d-print-none">
+            <div class="row align-items-center">
+                <div class="col">
+                    <nav aria-label="breadcrumb">
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item"><a href="{{ route('home') }}">首页</a></li>
+                            @foreach($breadcrumbs as $breadcrumb)
+                            @if($loop->last)
+                            <li class="breadcrumb-item active">{{ $breadcrumb['name'] }}</li>
+                            @else
+                            <li class="breadcrumb-item">
+                                <a href="{{ route('category.show', $breadcrumb['id']) }}">{{ $breadcrumb['name'] }}</a>
+                            </li>
+                            @endif
+                            @endforeach
+                        </ol>
+                    </nav>
+                    <h2 class="page-title">{{ $currentCategory['name'] }}</h2>
+                </div>
+            </div>
+        </div>
+
+        @if(count($subCategories) > 0)
+        <div class="row row-cards mb-4">
+            @foreach($subCategories as $subCategory)
+            <div class="col-sm-6 col-lg-4">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <div class="avatar avatar-lg mb-3 mx-auto">
+                            <svg class="icon" width="24" height="24">
+                                <use xlink:href="#tabler-folder"></use>
+                            </svg>
+                        </div>
+                        <h4 class="card-title">{{ $subCategory['name'] }}</h4>
+                        <p class="text-muted">{{ $subCategory['description'] ?? '' }}</p>
+                        <a href="{{ route('category.show', $subCategory['id']) }}" class="btn btn-primary">
+                            进入分类
+                        </a>
+                    </div>
+                </div>
+            </div>
+            @endforeach
+        </div>
+        @endif
+
+        @if(count($categoryBooks) > 0)
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">图书列表</h3>
+            </div>
+            <div class="card-body">
+                <div class="row row-cards">
+                    @foreach($categoryBooks as $book)
+                    <div class="col-sm-6 col-lg-4">
+                        <div class="card book-card h-100">
+                            <a href="{{ route('book.show', $book['id']) }}">
+                                <img src="{{ $book['cover'] }}" class="card-img-top book-cover" alt="{{ $book['title'] }}">
+                            </a>
+                            <div class="card-body d-flex flex-column">
+                                <h4 class="card-title">
+                                    <a href="{{ route('book.show', $book['id']) }}" class="text-decoration-none">
+                                        {{ $book['title'] }}
+                                    </a>
+                                </h4>
+                                <div class="text-muted">{{ $book['author'] }}</div>
+                                <div class="mt-auto pt-2">
+                                    <a href="{{ route('book.show', $book['id']) }}" class="btn btn-sm btn-outline-primary">
+                                        查看详情
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+        @endif
+    </div>
+</div>
+@endsection

api-v8/resources/views/library/index.blade.php

@@ -0,0 +1,65 @@
+@extends('library.layouts.app')
+
+@section('title', '巴利书库 - 首页')
+
+@section('content')
+<div class="page-body">
+    <div class="container-xl">
+        <div class="page-header d-print-none">
+            <div class="row align-items-center">
+                <div class="col">
+                    <h2 class="page-title">巴利书库</h2>
+                    <div class="text-muted mt-1">探索古老的佛教经典</div>
+                </div>
+            </div>
+        </div>
+
+        @foreach($categoryData as $data)
+        <div class="card mb-4">
+            <div class="card-header">
+                <h3 class="card-title">
+                    <svg class="icon me-2" width="24" height="24">
+                        <use xlink:href="#tabler-book"></use>
+                    </svg>
+                    {{ $data['category']['name'] }}
+                </h3>
+                <div class="card-actions">
+                    <a href="{{ route('category.show', $data['category']['id']) }}" class="btn btn-primary btn-sm">
+                        更多
+                        <svg class="icon ms-1" width="24" height="24">
+                            <use xlink:href="#tabler-arrow-right"></use>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="row row-cards">
+                    @foreach($data['books'] as $book)
+                    <div class="col-sm-6 col-lg-4">
+                        <div class="card book-card h-100">
+                            <a href="{{ route('book.show', $book['id']) }}">
+                                <img src="{{ $book['cover'] }}" class="card-img-top book-cover" alt="{{ $book['title'] }}">
+                            </a>
+                            <div class="card-body d-flex flex-column">
+                                <h4 class="card-title">
+                                    <a href="{{ route('book.show', $book['id']) }}" class="text-decoration-none">
+                                        {{ $book['title'] }}
+                                    </a>
+                                </h4>
+                                <div class="text-muted">{{ $book['author'] }}</div>
+                                <div class="mt-auto pt-2">
+                                    <a href="{{ route('book.show', $book['id']) }}" class="btn btn-sm btn-outline-primary">
+                                        查看详情
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+        @endforeach
+    </div>
+</div>
+@endsection

api-v8/resources/views/library/layouts/app.blade.php

@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="zh">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>@yield('title', '巴利书库')</title>
+    <link href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-sprite.svg" rel="stylesheet" />
+    <style>
+        .book-card {
+            transition: transform 0.2s;
+        }
+
+        .book-card:hover {
+            transform: translateY(-2px);
+        }
+
+        .book-cover {
+            height: 200px;
+            object-fit: cover;
+        }
+
+        @media (max-width: 768px) {
+            .book-cover {
+                height: 150px;
+            }
+        }
+
+        .hero-section {
+            height: 250px;
+            width: 100%;
+            background-image: url('{{ URL::asset("assets/images/hero-2.jpg") }}');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .hero-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            text-align: center;
+            color: white;
+            max-width: 600px;
+            padding: 0 1rem;
+        }
+
+        .hero-title {
+            font-size: 2.5rem;
+            font-weight: bold;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        }
+
+        .hero-subtitle {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        .search-box {
+            background: white;
+            border-radius: 0.5rem;
+            padding: 0.5rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        .feature-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            height: 100%;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+
+        .stats-section {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .stat-item {
+            text-align: center;
+            padding: 2rem 1rem;
+        }
+
+        .stat-number {
+            font-size: 2.5rem;
+            font-weight: bold;
+            display: block;
+        }
+
+        .stat-label {
+            font-size: 1rem;
+            opacity: 0.9;
+            margin-top: 0.5rem;
+        }
+
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2rem;
+            }
+
+            .hero-subtitle {
+                font-size: 1rem;
+            }
+
+            .hero-section {
+                height: 250px;
+            }
+
+            .stat-number {
+                font-size: 2rem;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .hero-title {
+                font-size: 1.5rem;
+            }
+
+            .hero-subtitle {
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="page">
+        <!-- Hero Section -->
+        <section class="hero-section">
+            <div class="hero-overlay"></div>
+            <div class="hero-content">
+                <h1 class="hero-title">巴利书库</h1>
+                <p class="hero-subtitle">探索wikipali，开启智慧之门</p>
+
+                <div class="search-box">
+                    <div class="input-group">
+                        <input type="text" class="form-control form-control-lg" placeholder="搜索图书、作者或主题...">
+                        <button class="btn btn-primary btn-lg" type="button">
+                            <i class="ti ti-search"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div class="page-wrapper">
+            @yield('content')
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
+    @stack('scripts')
+</body>
+
+</html>

dashboard-v4/dashboard/src/components/ai/ModelSelector.tsx

@@ -0,0 +1,145 @@
+import { Button, Dropdown, Typography, Tag } from "antd";
+import {
+  DownOutlined,
+  ReloadOutlined,
+  GlobalOutlined,
+} from "@ant-design/icons";
+import type { MenuProps } from "antd";
+
+const { Text } = Typography;
+
+const ModelSelector = () => {
+  const modelItems: MenuProps["items"] = [
+    {
+      key: "auto",
+      label: (
+        <div className="py-2">
+          <div className="font-medium text-gray-900">Auto</div>
+        </div>
+      ),
+    },
+    {
+      key: "gpt-4o",
+      label: (
+        <div className="py-2">
+          <div className="font-medium text-gray-900">
+            GPT-4o<Tag>翻译</Tag>
+          </div>
+          <Text type="secondary">适用于大多数任务</Text>
+        </div>
+      ),
+    },
+    {
+      key: "o4-mini",
+      label: (
+        <div className="py-2">
+          <div className="font-medium text-gray-900">o4-mini</div>
+          <Text type="secondary">快速进行高级推理</Text>
+        </div>
+      ),
+    },
+    {
+      key: "gpt-4.1-mini",
+      label: (
+        <div className="py-2">
+          <div className="font-medium text-gray-900">GPT-4.1-mini</div>
+          <Text type="secondary">适合处理日常任务</Text>
+        </div>
+      ),
+    },
+    {
+      type: "divider",
+    },
+    {
+      key: "refresh",
+      label: (
+        <div className="py-2 flex items-center space-x-2 text-gray-700">
+          <ReloadOutlined />
+          <span>重试</span>
+          <div className="ml-auto">
+            <Text type="secondary">GPT-4o</Text>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: "search",
+      label: (
+        <div className="py-2 flex items-center space-x-2 text-gray-700">
+          <GlobalOutlined />
+          <span>搜索网页</span>
+        </div>
+      ),
+    },
+  ];
+
+  const handleMenuClick: MenuProps["onClick"] = ({ key }) => {
+    if (key === "refresh") {
+      console.log("重试操作");
+      return;
+    }
+    if (key === "search") {
+      console.log("搜索网页");
+      return;
+    }
+  };
+
+  return (
+    <div className="bg-gray-50 min-h-screen">
+      <div className="max-w-md mx-auto">
+        <Dropdown
+          menu={{
+            items: modelItems,
+            onClick: handleMenuClick,
+            className: "w-64",
+          }}
+          trigger={["click"]}
+          placement="bottomLeft"
+          overlayClassName="model-selector-dropdown"
+        >
+          <Button
+            className="flex items-center justify-between w-48 h-12 px-4 border border-gray-300 rounded-lg bg-white hover:bg-gray-50 shadow-sm"
+            type="text"
+          >
+            <div className="flex items-center space-x-2">
+              <span className="font-medium text-gray-900 model_name">
+                {"AI"}
+              </span>
+              <DownOutlined className="text-gray-500 text-sm" />
+            </div>
+          </Button>
+        </Dropdown>
+      </div>
+
+      <style>{`
+        .model-selector-dropdown .ant-dropdown-menu {
+          padding: 8px;
+          border-radius: 12px;
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+          border: 1px solid #e5e7eb;
+        }
+
+        .model-selector-dropdown .ant-dropdown-menu-item {
+          padding: 0;
+          margin: 2px 0;
+          border-radius: 8px;
+        }
+
+        .model-selector-dropdown .ant-dropdown-menu-item:hover {
+          background-color: #f3f4f6;
+        }
+
+        .model-selector-dropdown .ant-dropdown-menu-item-selected {
+          background-color: #eff6ff;
+        }
+
+        .model-selector-dropdown .ant-dropdown-menu-divider {
+          margin: 8px 0;
+          background-color: #e5e7eb;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ModelSelector;