From 002794e42404e888f51962e0e964be809fbc4d83 Mon Sep 17 00:00:00 2001 From: zaidmukaddam Date: Mon, 23 Dec 2024 19:04:58 +0530 Subject: [PATCH] chore: revive retrive tool and better codeblock UI --- app/actions.ts | 10 +- app/api/chat/route.ts | 3 +- app/search/page.tsx | 225 +++++++++++++++++++++++++++--------------- package.json | 2 +- pnpm-lock.yaml | 18 +--- 5 files changed, 159 insertions(+), 99 deletions(-) diff --git a/app/actions.ts b/app/actions.ts index b0cdabe..e243817 100644 --- a/app/actions.ts +++ b/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. - - 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.`, +Latex should be wrapped with $ symbol for inline and $$ for block equations as they are supported in 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. diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index a1147db..356e777 100644 --- a/app/api/chat/route.ts +++ b/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!! diff --git a/app/search/page.tsx b/app/search/page.tsx index 757bf99..45503be 100644 --- a/app/search/page.tsx +++ b/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 ( -
-
- - Retrieving content... -
-
- {[0, 1, 2].map((index) => ( - - ))} +
+
+
+
+ +
+
+
+
+
+
+
+
); } return ( -
-
- -

Retrieved Content

-
-
-

{result.results[0].title}

-

{result.results[0].description}

-
- {result.results[0].language || 'Unknown language'} - - Source - +
+
+
+
+
+ +
+
+

+ {result.results[0].title} +

+

+ {result.results[0].description} +

+
+ + {result.results[0].language || 'Unknown'} + + + + View source + +
+
- - - View Content - -
- - {result.results[0].content} - + +
+
+ +
+ + View content
- - - + + +
+
+ {result.results[0].content} +
+
+
+
); } - if (toolInvocation.toolName === 'text_translate') { return ; } @@ -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 }) => { - const [isCopied, setIsCopied] = useState(false); + interface CodeBlockProps { + 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 ( -
- - {children} - - +
+
+ {language || 'text'} +
+ +
+
+ + {children} + + + +
+
); - }; + }, (prevProps, nextProps) => + prevProps.children === nextProps.children && + prevProps.language === nextProps.language + ); + + CodeBlock.displayName = 'CodeBlock'; const LinkPreview = ({ href }: { href: string }) => { const [metadata, setMetadata] = useState(null); diff --git a/package.json b/package.json index 4e9a612..022ce58 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93c2e65..8c5336b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,8 +36,8 @@ dependencies: specifier: ^2.0.5 version: 2.0.5 '@mendable/firecrawl-js': - specifier: ^1.4.3 - version: 1.5.3(ws@8.18.0) + specifier: ^1.9.7 + 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): - resolution: {integrity: sha512-SMxQAUMixlc01OzYB3/9YvTGe/Po/v2NZx5ccCO3OKBk9Vdbo4a5i1Var591H1NYDEqNnRJ6se0X/Y/IiLVvtQ==} + /@mendable/firecrawl-js@1.9.7(ws@8.18.0): + 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: