chore: revive retrive tool and better codeblock UI

app/actions.ts

@@ -143,9 +143,10 @@ web_search, retrieve, get_weather_data, programming, text_translate, find_place,
 
 ## Basic Guidelines:
 Always remember to run the appropriate tool first, then compose your response based on the information gathered.
+Run tools step by step and not combined in a single response at all costs!!
 Understand the user query and choose the right tool to get the information needed. Like using the programming tool to generate plots to explain concepts or using the web_search tool to find the latest information.
 All tool should be called only once per response. All tool call parameters are mandatory always!
-Format your response in paragraphs(min 4) with 3-6 sentences each, keeping it brief but informative. DO NOT use pointers or make lists of any kind at ALL!
+Format your response in paragraphs(min 6) with 3-8 sentences each, keeping it long but informative. DO NOT use pointers or make lists of any kind at ALL!
 Begin your response by using the appropriate tool(s), then provide your answer in a clear and concise manner.
 Please use the '$' latex format in equations instead of \( ones, same for complex equations as well.
 
@@ -208,12 +209,7 @@ ALWAYS REMEMBER TO USE THE CITATIONS FORMAT CORRECTLY AT ALL COSTS!! ANY SINGLE
 When asked a "What is" question, maintain the same format as the question and answer it in the same format.
 
 ## Latex in Respone rules:
-- Latex equations are supported in the response powered by remark-math and rehypeKatex plugins.
+Latex should be wrapped with $ symbol for inline and $$ for block equations as they are supported in the response.`,
- - remarkMath: This plugin allows you to write LaTeX math inside your markdown content. It recognizes math enclosed in dollar signs ($ ... $ for inline and $$ ... $$ for block).
- - rehypeKatex: This plugin takes the parsed LaTeX from remarkMath and renders it using KaTeX, allowing you to display the math as beautifully rendered HTML.
-
-- The response that include latex equations, use always follow the formats: 
-- Do not wrap any equation or formulas or any sort of math related block in round brackets() as it will crash the response.`,
   academic: `You are an academic research assistant that helps find and analyze scholarly content.
     The current date is ${new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "2-digit", weekday: "short" })}. 
     Focus on peer-reviewed papers, citations, and academic sources.

app/api/chat/route.ts

@@ -154,7 +154,7 @@ web_search, retrieve, get_weather_data, programming, text_translate, find_place,
 Always remember to run the appropriate tool first, then compose your response based on the information gathered.
 Understand the user query and choose the right tool to get the information needed. Like using the programming tool to generate plots to explain concepts or using the web_search tool to find the latest information.
 All tool should be called only once per response. All tool call parameters are mandatory always!
-Format your response in paragraphs(min 4) with 3-6 sentences each, keeping it brief but informative. DO NOT use pointers or make lists of any kind at ALL!
+Format your response in paragraphs(min 6) with 3-8 sentences each, keeping it informative. DO NOT use pointers or make lists of any kind at ALL!
 Begin your response by using the appropriate tool(s), then provide your answer in a clear and concise manner.
 Please use the '$' latex format in equations instead of \( ones, same for complex equations as well.
 
@@ -208,6 +208,7 @@ The programming tool is actually a Python Code interpreter, so you can run any P
 - Always mention the generated urls in the response after running the code! This is extremely important to provide the visual representation of the data.
 
 ## Citations Format:
+You will get more than 10 results from the web_search tool, so you can use minimum 8 citations in the response.
 Citations should always be placed at the end of each paragraph and in the end of sentences where you use it in which they are referred to with the given format to the information provided.
 When citing sources(citations), use the following styling only: Claude 3.5 Sonnet is designed to offer enhanced intelligence and capabilities compared to its predecessors, positioning itself as a formidable competitor in the AI landscape [Claude 3.5 Sonnet raises the..](https://www.anthropic.com/news/claude-3-5-sonnet).
 ALWAYS REMEMBER TO USE THE CITATIONS FORMAT CORRECTLY AT ALL COSTS!! ANY SINGLE ITCH IN THE FORMAT WILL CRASH THE RESPONSE!!

app/search/page.tsx

@@ -49,7 +49,6 @@ import {
     Download,
     Flame,
     Sun,
-    Terminal,
     Pause,
     Play,
     TrendingUpIcon,
@@ -61,13 +60,10 @@ import {
     Moon,
     ShoppingBasket,
     Star,
-    Truck,
     YoutubeIcon,
     LucideIcon,
-    PlayCircle,
     FileText,
     Book,
-    Eye,
     ExternalLink,
     Building,
     Users,
@@ -102,9 +98,9 @@ import {
     CardHeader,
     CardTitle,
 } from "@/components/ui/card";
-import { Sheet, SheetContent, SheetHeader, SheetPortal, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
-import { GitHubLogoIcon } from '@radix-ui/react-icons';
+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";
@@ -119,19 +115,20 @@ 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, MapSkeleton } from '@/components/map-components';
+import { MapComponent, MapContainer } from '@/components/map-components';
 import MultiSearch from '@/components/multi-search';
-import { CurrencyDollar, Flag, RedditLogo, RoadHorizon, SoccerBall, TennisBall, XLogo } from '@phosphor-icons/react';
+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 { Tweet } from 'react-tweet';
 import NearbySearchMapView from '@/components/nearby-search-map-view';
-import { Place } from '../../components/map-components';
 import { Separator } from '@/components/ui/separator';
-import { ChartTypes } from '@e2b/code-interpreter';
 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';
+
 
 export const maxDuration = 60;
 
@@ -1809,58 +1806,80 @@ The new Anthropic models: Claude 3.5 Sonnet and 3.5 Haiku models are now availab
             if (toolInvocation.toolName === 'retrieve') {
                 if (!result) {
                     return (
-                        <div className="flex items-center justify-between w-full">
+                        <div className="border border-neutral-200 rounded-xl my-4 p-4 dark:border-neutral-800 bg-gradient-to-b from-white to-neutral-50 dark:from-neutral-900 dark:to-neutral-900/90">
-                            <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-4">
-                                <Globe className="h-5 w-5 text-neutral-700 dark:text-neutral-300 animate-pulse" />
+                                <div className="relative w-10 h-10">
-                                <span className="text-neutral-700 dark:text-neutral-300 text-lg">Retrieving content...</span>
+                                    <div className="absolute inset-0 bg-primary/10 animate-pulse rounded-lg" />
-                            </div>
+                                    <Globe className="h-5 w-5 text-primary/70 absolute inset-0 m-auto" />
-                            <div className="flex space-x-1">
+                                </div>
-                                {[0, 1, 2].map((index) => (
+                                <div className="space-y-2 flex-1">
-                                    <motion.div
+                                    <div className="h-4 w-36 bg-neutral-200 dark:bg-neutral-800 animate-pulse rounded-md" />
-                                        key={index}
+                                    <div className="space-y-1.5">
-                                        className="w-2 h-2 bg-neutral-400 dark:bg-neutral-600 rounded-full"
+                                        <div className="h-3 w-full bg-neutral-100 dark:bg-neutral-800/50 animate-pulse rounded-md" />
-                                        initial={{ opacity: 0.3 }}
+                                        <div className="h-3 w-2/3 bg-neutral-100 dark:bg-neutral-800/50 animate-pulse rounded-md" />
-                                        animate={{ opacity: 1 }}
+                                    </div>
-                                        transition={{ duration: 0.8, delay: index * 0.2, repeatType: "reverse" }}
+                                </div>
-                                    />
-                                ))}
                             </div>
                         </div>
                     );
                 }
 
                 return (
-                    <div className="w-full my-4">
+                    <div className="border border-neutral-200 rounded-xl my-4 overflow-hidden dark:border-neutral-800 bg-gradient-to-b from-white to-neutral-50 dark:from-neutral-900 dark:to-neutral-900/90">
-                        <div className="flex items-center gap-2 mb-2">
+                        <div className="p-4">
-                            <Globe className="h-5 w-5 text-primary" />
+                            <div className="flex items-start gap-4">
-                            <h3 className="font-semibold text-neutral-800 dark:text-neutral-200">Retrieved Content</h3>
+                                <div className="relative w-10 h-10 flex-shrink-0">
-                        </div>
+                                    <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent rounded-lg" />
-                        <div className="space-y-2">
+                                    <img
-                            <h4 className="font-medium text-sm sm:text-base text-neutral-800 dark:text-neutral-200">{result.results[0].title}</h4>
+                                        className="h-5 w-5 absolute inset-0 m-auto"
-                            <p className="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">{result.results[0].description}</p>
+                                        src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(result.results[0].url)}`}
-                            <div className="flex flex-wrap items-center gap-2">
+                                        alt=""
-                                <Badge variant="secondary" className="bg-neutral-200 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200">{result.results[0].language || 'Unknown language'}</Badge>
+                                    />
-                                <a href={result.results[0].url} target="_blank" rel="noopener noreferrer" className="text-xs sm:text-sm text-primary hover:underline">
+                                </div>
-                                    Source
+                                <div className="flex-1 min-w-0 space-y-2">
-                                </a>
+                                    <h2 className="font-semibold text-lg text-neutral-900 dark:text-neutral-100 tracking-tight truncate">
+                                        {result.results[0].title}
+                                    </h2>
+                                    <p className="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2">
+                                        {result.results[0].description}
+                                    </p>
+                                    <div className="flex items-center gap-3">
+                                        <span className="px-2.5 py-0.5 text-xs font-medium rounded-full bg-primary/10 text-primary">
+                                            {result.results[0].language || 'Unknown'}
+                                        </span>
+                                        <a
+                                            href={result.results[0].url}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="inline-flex items-center gap-1.5 text-xs text-neutral-500 hover:text-primary transition-colors"
+                                        >
+                                            <ExternalLink className="h-3 w-3" />
+                                            View source
+                                        </a>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                        <Accordion type="single" collapsible className="w-full mt-4">
+
-                            <AccordionItem value="content" className="border-b-0">
+                        <div className="border-t border-neutral-200 dark:border-neutral-800">
-                                <AccordionTrigger className="text-neutral-800 dark:text-neutral-200">View Content</AccordionTrigger>
+                            <details className="group">
-                                <AccordionContent>
+                                <summary className="w-full px-4 py-2 cursor-pointer text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors flex items-center justify-between">
-                                    <div className="max-h-[50vh] overflow-y-auto bg-neutral-100 dark:bg-neutral-800 p-2 sm:p-4 rounded-lg">
+                                    <div className="flex items-center gap-2">
-                                        <ReactMarkdown className="text-xs sm:text-sm text-neutral-800 dark:text-neutral-200">
+                                        <TextIcon className="h-4 w-4 text-neutral-400" />
-                                            {result.results[0].content}
+                                        <span>View content</span>
-                                        </ReactMarkdown>
                                     </div>
-                                </AccordionContent>
+                                    <ChevronDown className="h-4 w-4 transition-transform duration-200 group-open:rotate-180" />
-                            </AccordionItem>
+                                </summary>
-                        </Accordion>
+                                <div className="max-h-[50vh] overflow-y-auto p-4 bg-neutral-50/50 dark:bg-neutral-800/30">
+                                    <div className="prose prose-neutral dark:prose-invert prose-sm max-w-none">
+                                        <ReactMarkdown>{result.results[0].content}</ReactMarkdown>
+                                    </div>
+                                </div>
+                            </details>
+                        </div>
                     </div>
                 );
             }
-
             if (toolInvocation.toolName === 'text_translate') {
                 return <TranslationTool toolInvocation={toolInvocation} result={result} />;
             }
@@ -2015,41 +2034,93 @@ The new Anthropic models: Claude 3.5 Sonnet and 3.5 Haiku models are now availab
             return metadata;
         }, [metadataCache]);
 
-        const CodeBlock = ({ language, children }: { language: string | undefined; children: string }) => {
+        interface CodeBlockProps {
-            const [isCopied, setIsCopied] = useState(false);
+            language: string | undefined;
+            children: string;
+        }
 
-            const handleCopy = async () => {
+        const CodeBlock = React.memo(({ language, children }: CodeBlockProps) => {
+            const [isCopied, setIsCopied] = useState(false);
+            const { theme } = useTheme();
+
+            const handleCopy = useCallback(async () => {
                 await navigator.clipboard.writeText(children);
                 setIsCopied(true);
                 setTimeout(() => setIsCopied(false), 2000);
-            };
+            }, [children]);
 
             return (
-                <div className="relative group">
+                <div className="relative group my-3">
-                    <SyntaxHighlighter
+                    <div className="absolute top-3 left-3 px-2 py-0.5 text-xs font-medium bg-neutral-100/80 dark:bg-neutral-800/80 backdrop-blur-sm text-neutral-500 dark:text-neutral-400 rounded-md border border-neutral-200 dark:border-neutral-700 z-10">
-                        language={language || 'text'}
+                        {language || 'text'}
-                        style={oneDark}
+                    </div>
-                        showLineNumbers
+
-                        wrapLines
+                    <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
-                        customStyle={{
+                        <div className="relative">
-                            margin: 0,
+                            <SyntaxHighlighter
-                            borderRadius: '0.375rem',
+                                language={language || 'text'}
-                            fontSize: '0.875rem',
+                                style={theme === 'dark' ? atomDark : vs}
-                        }}
+                                showLineNumbers
-                    >
+                                wrapLines
-                        {children}
+                                customStyle={{
-                    </SyntaxHighlighter>
+                                    margin: 0,
-                    <Button
+                                    padding: '2.5rem 1.5rem 1.5rem',
-                        onClick={handleCopy}
+                                    fontSize: '0.875rem',
-                        className="absolute top-2 right-2 p-2 bg-neutral-700 dark:bg-neutral-600 bg-opacity-80 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                                    background: theme === 'dark' ? '#171717' : '#ffffff',
-                        variant="ghost"
+                                    lineHeight: 1.6,
-                        size="sm"
+                                }}
-                    >
+                                lineNumberStyle={{
-                        {isCopied ? <Check size={16} className="text-green-500" /> : <Copy size={16} className="text-neutral-200" />}
+                                    minWidth: '2.5em',
-                    </Button>
+                                    paddingRight: '1em',
+                                    color: theme === 'dark' ? '#404040' : '#94a3b8',
+                                    userSelect: 'none',
+                                }}
+                                codeTagProps={{
+                                    style: {
+                                        color: theme === 'dark' ? '#e5e5e5' : '#1e293b',
+                                        fontFamily: 'var(--font-mono)',
+                                    }
+                                }}
+                            >
+                                {children}
+                            </SyntaxHighlighter>
+
+                            <button
+                                onClick={handleCopy}
+                                className={`
+                                    absolute top-3 right-3 
+                                    px-2 py-1.5 
+                                    rounded-md text-xs
+                                    transition-all duration-200
+                                    ${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
+                                `}
+                                aria-label={isCopied ? 'Copied!' : 'Copy code'}
+                            >
+                                {isCopied ? (
+                                    <>
+                                        <Check className="h-3.5 w-3.5" />
+                                        <span>Copied!</span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <Copy className="h-3.5 w-3.5" />
+                                        <span>Copy</span>
+                                    </>
+                                )}
+                            </button>
+                        </div>
+                    </div>
                 </div>
             );
-        };
+        }, (prevProps, nextProps) =>
+            prevProps.children === nextProps.children &&
+            prevProps.language === nextProps.language
+        );
+
+        CodeBlock.displayName = 'CodeBlock';
 
         const LinkPreview = ({ href }: { href: string }) => {
             const [metadata, setMetadata] = useState<LinkMetadata | null>(null);

package.json

@@ -19,7 +19,7 @@
     "@ai-sdk/xai": "^1.0.6",
     "@e2b/code-interpreter": "^1.0.3",
     "@foobar404/wave": "^2.0.5",
-    "@mendable/firecrawl-js": "^1.4.3",
+    "@mendable/firecrawl-js": "^1.9.7",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-collapsible": "^1.1.1",

pnpm-lock.yaml

@@ -36,8 +36,8 @@ dependencies:
     specifier: ^2.0.5
     version: 2.0.5
   '@mendable/firecrawl-js':
-    specifier: ^1.4.3
+    specifier: ^1.9.7
-    version: 1.5.3(ws@8.18.0)
+    version: 1.9.7(ws@8.18.0)
   '@phosphor-icons/react':
     specifier: ^2.1.7
     version: 2.1.7(react-dom@18.3.1)(react@18.3.1)
@@ -747,14 +747,14 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
-  /@mendable/firecrawl-js@1.5.3(ws@8.18.0):
+  /@mendable/firecrawl-js@1.9.7(ws@8.18.0):
-    resolution: {integrity: sha512-SMxQAUMixlc01OzYB3/9YvTGe/Po/v2NZx5ccCO3OKBk9Vdbo4a5i1Var591H1NYDEqNnRJ6se0X/Y/IiLVvtQ==}
+    resolution: {integrity: sha512-V4ILlwFnpmEQtGet2IMj5NMupfYD8t4crVq/4SmQGIqJIedoMWiZ4ryDjzU2WBts90BP5giN+or5rJLTxpgkNA==}
     dependencies:
       axios: 1.7.7
       isows: 1.0.6(ws@8.18.0)
       typescript-event-target: 1.1.1
       zod: 3.24.1
-      zod-to-json-schema: 3.23.3(zod@3.24.1)
+      zod-to-json-schema: 3.24.1(zod@3.24.1)
     transitivePeerDependencies:
       - debug
       - ws
@@ -6889,14 +6889,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /zod-to-json-schema@3.23.3(zod@3.24.1):
-    resolution: {integrity: sha512-TYWChTxKQbRJp5ST22o/Irt9KC5nj7CdBKYB/AosCRdj/wxEMvv4NNaj9XVUHDOIp53ZxArGhnw5HMZziPFjog==}
-    peerDependencies:
-      zod: ^3.23.3
-    dependencies:
-      zod: 3.24.1
-    dev: false
-
   /zod-to-json-schema@3.24.1(zod@3.24.1):
     resolution: {integrity: sha512-3h08nf3Vw3Wl3PK+q3ow/lIil81IT2Oa7YpQyUUDsEWbXveMesdfK1xBd2RhCkynwZndAxixji/7SYJJowr62w==}
     peerDependencies: