Skip to content

Commit

Permalink
Merge pull request zaidmukaddam#50 from simplr-sh/feat/nuqs
Browse files Browse the repository at this point in the history 
Add Nuqs integration and update package dependencies
  • Loading branch information
@zaidmukaddam
zaidmukaddam authored Jan 6, 2025
2 parents 8247f9b + 706f53f commit 15d5ac5
Show file tree
Hide file tree
Showing 4 changed files with 4,743 additions and 3,722 deletions.
11 changes: 7 additions & 4 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'katex/dist/katex.min.css';
import 'mapbox-gl/dist/mapbox-gl.css';
import { Metadata, Viewport } from "next";
import { Instrument_Serif } from 'next/font/google';
import { NuqsAdapter } from 'nuqs/adapters/next/app';
import { Toaster } from "sonner";
import "./globals.css";
import { Providers } from './providers';
Expand Down Expand Up @@ -58,10 +59,12 @@ export default function RootLayout({
return (
<html lang="en">
<body className={`${GeistSans.variable} ${instrumentSerif.variable} font-sans antialiased`}>
<Providers>
<Toaster position="top-center" richColors />
{children}
</Providers>
<NuqsAdapter>
<Providers>
<Toaster position="top-center" richColors />
{children}
</Providers>
</NuqsAdapter>
<Analytics />
</body>
</html>
Expand Down
266 changes: 134 additions & 132 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,137 +2,133 @@
"use client";
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 { BorderTrail } from '@/components/core/border-trail';
import { TextShimmer } from '@/components/core/text-shimmer';
import { FlightTracker } from '@/components/flight-tracker';
import { InstallPrompt } from '@/components/InstallPrompt';
import InteractiveChart from '@/components/interactive-charts';
import { MapComponent, MapContainer } from '@/components/map-components';
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 {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
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 { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardHeader,
CardTitle,
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 { 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,
Table,
TableBody,
TableCell,
TableRow,
} from "@/components/ui/table";
import Autoplay from 'embla-carousel-autoplay';
import FormComponent from '@/components/ui/form-component';
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 InteractiveChart from '@/components/interactive-charts';
import { MapComponent, MapContainer } from '@/components/map-components';
import MultiSearch from '@/components/multi-search';
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 { BorderTrail } from '@/components/core/border-trail';
import { TextShimmer } from '@/components/core/text-shimmer';
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 {
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 NearbySearchMapView from '@/components/nearby-search-map-view';
import { Separator } from '@/components/ui/separator';
import { toast } from 'sonner';
import {
fetchMetadata,
generateSpeech,
suggestQuestions
} from './actions';
import { TrendingQuery } from './api/trending/route';
import { FlightTracker } from '@/components/flight-tracker';
import { InstallPrompt } from '@/components/InstallPrompt';
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { useMediaQuery } from '@/hooks/use-media-query';
import TMDBResult from '@/components/movie-info';
import TrendingResults from '@/components/trending-tv-movies-results';
import { GeistMono } from 'geist/font/mono';

export const maxDuration = 60;

Expand Down Expand Up @@ -563,12 +559,15 @@ const SponsorDialog = ({
};

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
const initialState = useMemo(() => ({
query: searchParams.get('query') || searchParams.get('q') || '',
model: searchParams.get('model') || 'grok-2-1212'
query: query || q,
model: model
// eslint-disable-next-line react-hooks/exhaustive-deps
}), []); // Empty dependency array as we only want this on mount

const lastSubmittedQueryRef = useRef(initialState.query);
Expand Down Expand Up @@ -699,6 +698,7 @@ const HomeContent = () => {
};

fetchTrending();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const ThemeToggle: React.FC = () => {
Expand Down Expand Up @@ -758,12 +758,12 @@ const HomeContent = () => {
id: "1",
title: "The Unexpected Collab",
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: `
## **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.
`
}
Expand Down Expand Up @@ -892,10 +892,11 @@ Grok 2 models are now available for you to try out.
const waveRef = useRef<Wave | null>(null);

useEffect(() => {
const _audioRef = audioRef.current
return () => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.src = '';
if (_audioRef) {
_audioRef.pause();
_audioRef.src = '';
}
};
}, []);
Expand Down Expand Up @@ -1289,7 +1290,7 @@ Grok 2 models are now available for you to try out.
return <TrendingResults result={result} type="tv" />;
}


if (toolInvocation.toolName === 'x_search') {
if (!result) {
return <SearchLoadingState
Expand Down Expand Up @@ -2117,10 +2118,10 @@ Grok 2 models are now available for you to try out.
<button
onClick={handleCopy}
className={`
px-2 py-1.5
px-2 py-1.5
rounded-md text-xs
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
hover:bg-neutral-200 dark:hover:bg-neutral-700
flex items-center gap-1.5
Expand Down Expand Up @@ -2541,8 +2542,8 @@ Grok 2 models are now available for you to try out.
<button
key={`${index}-${query.text}`}
onClick={() => handleExampleClick(query)}
className="group flex-shrink-0 bg-neutral-50/50 dark:bg-neutral-800/50
backdrop-blur-sm rounded-xl p-3.5 text-left
className="group flex-shrink-0 bg-neutral-50/50 dark:bg-neutral-800/50
backdrop-blur-sm rounded-xl p-3.5 text-left
hover:bg-neutral-100 dark:hover:bg-neutral-700/70
transition-all duration-200 ease-out
hover:scale-102 origin-center
Expand Down Expand Up @@ -2588,6 +2589,7 @@ Grok 2 models are now available for you to try out.
<SuggestionCards
trendingQueries={trendingQueries}
/>
// eslint-disable-next-line react-hooks/exhaustive-deps
), [trendingQueries]);

return (
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"motion": "^11.13.5",
"next": "^14.2.21",
"next-themes": "^0.3.0",
"nuqs": "^2.3.0",
"openai": "^4.56.0",
"posthog-js": "^1.202.2",
"react": "^18",
Expand Down
Loading

0 comments on commit 15d5ac5

Please sign in to comment.