NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #50 from simplr-sh/feat/nuqs

Browse Source 
Add Nuqs integration and update package dependencies
This commit is contained in:
Zaid Mukaddam 2025-01-06 22:40:47 +05:30 committed by GitHub
commit 15d5ac5a61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 4964 additions and 3943 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/layout.tsx
View File

@ -4,6 +4,7 @@ import 'katex/dist/katex.min.css';
import 'mapbox-gl/dist/mapbox-gl.css'; import 'mapbox-gl/dist/mapbox-gl.css';
import { Metadata, Viewport } from "next"; import { Metadata, Viewport } from "next";
import { Instrument_Serif } from 'next/font/google'; import { Instrument_Serif } from 'next/font/google';
import { NuqsAdapter } from 'nuqs/adapters/next/app';
import { Toaster } from "sonner"; import { Toaster } from "sonner";
import "./globals.css"; import "./globals.css";
import { Providers } from './providers'; import { Providers } from './providers';
@ -58,10 +59,12 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={`${GeistSans.variable} ${instrumentSerif.variable} font-sans antialiased`}> <body className={`${GeistSans.variable} ${instrumentSerif.variable} font-sans antialiased`}>
<Providers> <NuqsAdapter>
<Toaster position="top-center" richColors /> <Providers>
{children} <Toaster position="top-center" richColors />
</Providers> {children}
</Providers>
</NuqsAdapter>
<Analytics /> <Analytics />
</body> </body>
</html> </html>

276
app/page.tsx
View File

@ -2,137 +2,133 @@
"use client"; "use client";
import 'katex/dist/katex.min.css'; import 'katex/dist/katex.min.css';
import
React,
{
useRef,
useCallback,
useState,
useEffect,
useMemo,
Suspense
} from 'react';
import ReactMarkdown from 'react-markdown';
import { useTheme } from 'next-themes';
import Marked, { ReactRenderer } from 'marked-react';
import Latex from 'react-latex-next';
import { useSearchParams } from 'next/navigation';
import { useChat } from 'ai/react';
import { ToolInvocation } from 'ai';
import { toast } from 'sonner';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import {
fetchMetadata,
generateSpeech,
suggestQuestions
} from './actions';
import { Wave } from "@foobar404/wave";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import {
Sparkles,
ArrowRight,
Globe,
AlignLeft,
Copy,
Cloud,
Code,
Check,
Loader2,
User2,
Heart,
X,
MapPin,
Plus,
Download,
Flame,
Sun,
Pause,
Play,
TrendingUpIcon,
Calendar,
Calculator,
ChevronDown,
Edit2,
ChevronUp,
Moon,
Star,
YoutubeIcon,
LucideIcon,
FileText,
Book,
ExternalLink,
Building,
Users,
Brain,
TrendingUp,
Plane,
Film,
Tv,
ListTodo
} from 'lucide-react';
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
import { GitHubLogoIcon, TextIcon } from '@radix-ui/react-icons';
import Link from 'next/link';
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
import { cn, SearchGroupId } from '@/lib/utils';
import {
Table,
TableBody,
TableCell,
TableRow,
} from "@/components/ui/table";
import Autoplay from 'embla-carousel-autoplay';
import FormComponent from '@/components/ui/form-component';
import WeatherChart from '@/components/weather-chart';
import InteractiveChart from '@/components/interactive-charts';
import { MapComponent, MapContainer } from '@/components/map-components';
import MultiSearch from '@/components/multi-search';
import { CurrencyDollar, Flag, RoadHorizon, SoccerBall, TennisBall, XLogo } from '@phosphor-icons/react';
import { BorderTrail } from '@/components/core/border-trail'; import { BorderTrail } from '@/components/core/border-trail';
import { TextShimmer } from '@/components/core/text-shimmer'; import { TextShimmer } from '@/components/core/text-shimmer';
import { Tweet } from 'react-tweet';
import NearbySearchMapView from '@/components/nearby-search-map-view';
import { Separator } from '@/components/ui/separator';
import { TrendingQuery } from './api/trending/route';
import { FlightTracker } from '@/components/flight-tracker'; import { FlightTracker } from '@/components/flight-tracker';
import { InstallPrompt } from '@/components/InstallPrompt'; import { InstallPrompt } from '@/components/InstallPrompt';
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import InteractiveChart from '@/components/interactive-charts';
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { MapComponent, MapContainer } from '@/components/map-components';
import { useMediaQuery } from '@/hooks/use-media-query';
import TMDBResult from '@/components/movie-info'; import TMDBResult from '@/components/movie-info';
import MultiSearch from '@/components/multi-search';
import NearbySearchMapView from '@/components/nearby-search-map-view';
import TrendingResults from '@/components/trending-tv-movies-results'; import TrendingResults from '@/components/trending-tv-movies-results';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
import FormComponent from '@/components/ui/form-component';
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import {
Table,
TableBody,
TableCell,
TableRow,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import WeatherChart from '@/components/weather-chart';
import { useMediaQuery } from '@/hooks/use-media-query';
import { cn, SearchGroupId } from '@/lib/utils';
import { Wave } from "@foobar404/wave";
import { CurrencyDollar, Flag, RoadHorizon, SoccerBall, TennisBall, XLogo } from '@phosphor-icons/react';
import { GitHubLogoIcon, TextIcon } from '@radix-ui/react-icons';
import { ToolInvocation } from 'ai';
import { useChat } from 'ai/react';
import Autoplay from 'embla-carousel-autoplay';
import { AnimatePresence, motion } from 'framer-motion';
import { GeistMono } from 'geist/font/mono'; import { GeistMono } from 'geist/font/mono';
import {
AlignLeft,
ArrowRight,
Book,
Brain,
Building,
Calculator,
Calendar,
Check,
ChevronDown,
ChevronUp,
Cloud,
Code,
Copy,
Download,
Edit2,
ExternalLink,
FileText,
Film,
Flame,
Globe,
Heart,
ListTodo,
Loader2,
LucideIcon,
MapPin,
Moon,
Pause,
Plane,
Play,
Plus,
Sparkles,
Sun,
TrendingUp,
TrendingUpIcon,
Tv,
User2,
Users,
X,
YoutubeIcon
} from 'lucide-react';
import Marked, { ReactRenderer } from 'marked-react';
import { useTheme } from 'next-themes';
import Image from 'next/image';
import Link from 'next/link';
import { parseAsString, useQueryState } from 'nuqs';
import React, {
Suspense,
useCallback,
useEffect,
useMemo,
useRef,
useState
} from 'react';
import Latex from 'react-latex-next';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark, vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Tweet } from 'react-tweet';
import { toast } from 'sonner';
import {
fetchMetadata,
generateSpeech,
suggestQuestions
} from './actions';
import { TrendingQuery } from './api/trending/route';
export const maxDuration = 60; export const maxDuration = 60;
@ -563,12 +559,15 @@ const SponsorDialog = ({
}; };
const HomeContent = () => { const HomeContent = () => {
const searchParams = useSearchParams(); const [query] = useQueryState('query', parseAsString.withDefault(''))
const [q] = useQueryState('q', parseAsString.withDefault(''))
const [model] = useQueryState('model', parseAsString.withDefault('grok-2-1212'))
// Memoize initial values to prevent re-calculation // Memoize initial values to prevent re-calculation
const initialState = useMemo(() => ({ const initialState = useMemo(() => ({
query: searchParams.get('query') || searchParams.get('q') || '', query: query || q,
model: searchParams.get('model') || 'grok-2-1212' model: model
// eslint-disable-next-line react-hooks/exhaustive-deps
}), []); // Empty dependency array as we only want this on mount }), []); // Empty dependency array as we only want this on mount
const lastSubmittedQueryRef = useRef(initialState.query); const lastSubmittedQueryRef = useRef(initialState.query);
@ -699,6 +698,7 @@ const HomeContent = () => {
}; };
fetchTrending(); fetchTrending();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const ThemeToggle: React.FC = () => { const ThemeToggle: React.FC = () => {
@ -758,12 +758,12 @@ const HomeContent = () => {
id: "1", id: "1",
title: "The Unexpected Collab", title: "The Unexpected Collab",
images: [ images: [
"https://metwm7frkvew6tn1.public.blob.vercel-storage.com/mplx-changelogs/mplx-collab.jpeg", "https://metwm7frkvew6tn1.public.blob.vercel-storage.com/mplx-changelogs/mplx-collab.jpeg",
], ],
content: ` content: `
## **MiniPerplx x Vercel x xAI Collab** ## **MiniPerplx x Vercel x xAI Collab**
Excited to annouce that MiniPerplx has partnered with Vercel and xAI to bring you the best of AI search experience. Excited to annouce that MiniPerplx has partnered with Vercel and xAI to bring you the best of AI search experience.
Grok 2 models are now available for you to try out. Grok 2 models are now available for you to try out.
` `
} }
@ -892,10 +892,11 @@ Grok 2 models are now available for you to try out.
const waveRef = useRef<Wave | null>(null); const waveRef = useRef<Wave | null>(null);
useEffect(() => { useEffect(() => {
const _audioRef = audioRef.current
return () => { return () => {
if (audioRef.current) { if (_audioRef) {
audioRef.current.pause(); _audioRef.pause();
audioRef.current.src = ''; _audioRef.src = '';
} }
}; };
}, []); }, []);
@ -1289,7 +1290,7 @@ Grok 2 models are now available for you to try out.
return <TrendingResults result={result} type="tv" />; return <TrendingResults result={result} type="tv" />;
} }
if (toolInvocation.toolName === 'x_search') { if (toolInvocation.toolName === 'x_search') {
if (!result) { if (!result) {
return <SearchLoadingState return <SearchLoadingState
@ -2117,10 +2118,10 @@ Grok 2 models are now available for you to try out.
<button <button
onClick={handleCopy} onClick={handleCopy}
className={` className={`
px-2 py-1.5 px-2 py-1.5
rounded-md text-xs rounded-md text-xs
transition-colors duration-200 transition-colors duration-200
${isCopied ? 'bg-green-500/10 text-green-500' : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400'} ${isCopied ? 'bg-green-500/10 text-green-500' : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400'}
opacity-0 group-hover:opacity-100 opacity-0 group-hover:opacity-100
hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700
flex items-center gap-1.5 flex items-center gap-1.5
@ -2541,8 +2542,8 @@ Grok 2 models are now available for you to try out.
<button <button
key={`${index}-${query.text}`} key={`${index}-${query.text}`}
onClick={() => handleExampleClick(query)} onClick={() => handleExampleClick(query)}
className="group flex-shrink-0 bg-neutral-50/50 dark:bg-neutral-800/50 className="group flex-shrink-0 bg-neutral-50/50 dark:bg-neutral-800/50
backdrop-blur-sm rounded-xl p-3.5 text-left backdrop-blur-sm rounded-xl p-3.5 text-left
hover:bg-neutral-100 dark:hover:bg-neutral-700/70 hover:bg-neutral-100 dark:hover:bg-neutral-700/70
transition-all duration-200 ease-out transition-all duration-200 ease-out
hover:scale-102 origin-center hover:scale-102 origin-center
@ -2588,6 +2589,7 @@ Grok 2 models are now available for you to try out.
<SuggestionCards <SuggestionCards
trendingQueries={trendingQueries} trendingQueries={trendingQueries}
/> />
// eslint-disable-next-line react-hooks/exhaustive-deps
), [trendingQueries]); ), [trendingQueries]);
return ( return (

1
package.json
View File

@ -64,6 +64,7 @@
"motion": "^11.13.5", "motion": "^11.13.5",
"next": "^14.2.21", "next": "^14.2.21",
"next-themes": "^0.3.0", "next-themes": "^0.3.0",
"nuqs": "^2.3.0",
"openai": "^4.56.0", "openai": "^4.56.0",
"posthog-js": "^1.202.2", "posthog-js": "^1.202.2",
"react": "^18", "react": "^18",

8619
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff