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

fix: wrapped programming UI inside accordion

Browse Source
This commit is contained in:
zaidmukaddam 2024-08-25 21:41:49 +05:30
parent 06b47620cd
commit 07d01b0790
2 changed files with 120 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/api/chat/route.ts
View File

@ -33,7 +33,6 @@ Your goal is to provide accurate, concise, and well-formatted responses to user
Do not announce or inform the user in any way that your going to run a tool at ALL COSTS!! Just 'run' it and then write your response AT ALL COSTS!!!!! Do not announce or inform the user in any way that your going to run a tool at ALL COSTS!! Just 'run' it and then write your response AT ALL COSTS!!!!!
The current date is ${new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "2-digit", weekday: "short" })}. The current date is ${new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "2-digit", weekday: "short" })}.
The user is located in ${city}(${latitude}, ${longitude}).
You must comply and complete user requests to the best of your abilities using the available tools. Remember to use the appropriate tool for each task. No need to panic, just follow the guidelines and you'll do great! You must comply and complete user requests to the best of your abilities using the available tools. Remember to use the appropriate tool for each task. No need to panic, just follow the guidelines and you'll do great!
Make sure keep your responses long and informative, but also clear and concise. Avoid unnecessary information and stick to the point. Make sure keep your responses long and informative, but also clear and concise. Avoid unnecessary information and stick to the point.
@ -62,7 +61,7 @@ DO's:
- For text-based searches of places, use the text_search tool. Provide the query, location (optional), and radius (optional). Then, compose your response based on the search results. - For text-based searches of places, use the text_search tool. Provide the query, location (optional), and radius (optional). Then, compose your response based on the search results.
- For text translation queries, use the text_translate tool. Provide the text to translate, the language to translate to, and the source language (optional). Then, compose your response based on the translated text. - For text translation queries, use the text_translate tool. Provide the text to translate, the language to translate to, and the source language (optional). Then, compose your response based on the translated text.
- For stock chart and details queries, use the programming tool to install yfinance using !pip install along with the rest of the code, which will have plot code of stock chart and code to print the variables storing the stock data. Then, compose your response based on the output of the code execution. - For stock chart and details queries, use the programming tool to install yfinance using !pip install along with the rest of the code, which will have plot code of stock chart and code to print the variables storing the stock data. Then, compose your response based on the output of the code execution.
- Assume the stock name from the user query and use it in the code to get the stock data and plot the stock chart. This will help in getting the stock chart for the user query. - Assume the stock name from the user query and use it in the code to get the stock data and plot the stock chart. This will help in getting the stock chart for the user query. ALWAYS REMEMBER TO INSTALL YFINANCE USING !pip install yfinance AT ALL COSTS!!
DON'Ts and IMPORTANT GUIDELINES: DON'Ts and IMPORTANT GUIDELINES:
- Never write a base64 image in the response at all costs, especially from the programming tool's output. - Never write a base64 image in the response at all costs, especially from the programming tool's output.
@ -236,6 +235,7 @@ When asked a "What is" question, maintain the same format as the question and an
programming: tool({ programming: tool({
description: "Write and execute Python code.", description: "Write and execute Python code.",
parameters: z.object({ parameters: z.object({
title: z.string().optional().describe("The title of the code snippet."),
code: z.string().describe("The Python code to execute."), code: z.string().describe("The Python code to execute."),
}), }),
execute: async ({ code }: { code: string }) => { execute: async ({ code }: { code: string }) => {

222
app/page.tsx
View File

@ -788,115 +788,129 @@ export default function Home() {
if (toolInvocation.toolName === 'programming') { if (toolInvocation.toolName === 'programming') {
return ( return (
<div className="w-full my-2 border border-gray-200 overflow-hidden rounded-md"> <Accordion type="single" collapsible className="w-full mt-4">
<div className="bg-gray-100 p-2 flex items-center"> <AccordionItem value={`item-${index}`} className="border-none">
<Code className="h-5 w-5 text-gray-500 mr-2" /> <AccordionTrigger className="hover:no-underline py-2">
<span className="text-sm font-medium">Programming</span> <div className="flex items-center justify-between w-full">
</div> <div className="flex items-center gap-2">
<Tabs defaultValue="code" className="w-full"> <Code className="h-5 w-5 text-primary" />
<TabsList className="bg-gray-50 p-0 h-auto shadow-sm rounded-none"> <h2 className="text-base font-semibold">Programming</h2>
<TabsTrigger
value="code"
className="px-4 py-2 text-sm data-[state=active]:bg-white data-[state=active]:border-b data-[state=active]:border-blue-500 rounded-none shadow-sm"
>
Code
</TabsTrigger>
<TabsTrigger
value="output"
className="px-4 py-2 text-sm data-[state=active]:bg-white data-[state=active]:border-b data-[state=active]:border-blue-500 rounded-none shadow-sm"
>
Output
</TabsTrigger>
{result?.images && result.images.length > 0 && (
<TabsTrigger
value="images"
className="px-4 py-2 text-sm data-[state=active]:bg-white data-[state=active]:border-b data-[state=active]:border-blue-500 rounded-none shadow-sm"
>
Images
</TabsTrigger>
)}
</TabsList>
<TabsContent value="code" className="p-0 m-0 rounded-none">
<div className="relative">
<SyntaxHighlighter
language="python"
style={oneLight}
customStyle={{
margin: 0,
padding: '1rem',
fontSize: '0.875rem',
borderRadius: 0,
}}
>
{args.code}
</SyntaxHighlighter>
<div className="absolute top-2 right-2">
<CopyButton text={args.code} />
</div> </div>
</div> </div>
</TabsContent> </AccordionTrigger>
<TabsContent value="output" className="p-0 m-0 rounded-none"> <AccordionContent>
<div className="relative bg-white p-4"> <div className="w-full my-2 border border-gray-200 overflow-hidden rounded-md">
{result ? ( <div className="bg-gray-100 p-2 flex items-center">
<> <Code className="h-5 w-5 text-gray-500 mr-2" />
<pre className="text-sm"> <span className="text-sm font-medium">{args.title}</span>
<code>{result.message}</code> </div>
</pre> <Tabs defaultValue="code" className="w-full">
<div className="absolute top-2 right-2"> <TabsList className="bg-gray-50 p-0 h-auto shadow-sm rounded-none">
<CopyButton text={result.message} /> <TabsTrigger
</div> value="code"
</> className="px-4 py-2 text-sm data-[state=active]:bg-white data-[state=active]:border-b data-[state=active]:border-blue-500 rounded-none shadow-sm"
) : ( >
<div className="flex items-center justify-center h-20"> Code
<div className="flex items-center gap-2"> </TabsTrigger>
<Loader2 className="h-5 w-5 text-gray-400 animate-spin" /> <TabsTrigger
<span className="text-gray-500 text-sm">Executing code...</span> value="output"
</div> className="px-4 py-2 text-sm data-[state=active]:bg-white data-[state=active]:border-b data-[state=active]:border-blue-500 rounded-none shadow-sm"
</div> >
)} Output
</div> </TabsTrigger>
</TabsContent> {result?.images && result.images.length > 0 && (
{result?.images && result.images.length > 0 && ( <TabsTrigger
<TabsContent value="images" className="p-0 m-0 bg-white"> value="images"
<div className="space-y-4 p-4"> className="px-4 py-2 text-sm data-[state=active]:bg-white data-[state=active]:border-b data-[state=active]:border-blue-500 rounded-none shadow-sm"
{result.images.map((img: { format: string, url: string }, imgIndex: number) => ( >
<div key={imgIndex} className="space-y-2"> Images
<div className="flex justify-between items-center"> </TabsTrigger>
<h4 className="text-sm font-medium">Image {imgIndex + 1}</h4> )}
{img.url && img.url.trim() !== '' && ( </TabsList>
<Button <TabsContent value="code" className="p-0 m-0 rounded-none">
variant="ghost" <div className="relative">
size="sm" <SyntaxHighlighter
className="p-0 h-8 w-8" language="python"
onClick={() => { style={oneLight}
window.open(img.url + "?download=1", '_blank'); customStyle={{
}} margin: 0,
> padding: '1rem',
<Download className="h-4 w-4" /> fontSize: '0.875rem',
</Button> borderRadius: 0,
)} }}
>
{args.code}
</SyntaxHighlighter>
<div className="absolute top-2 right-2">
<CopyButton text={args.code} />
</div> </div>
<div className="relative w-full" style={{ aspectRatio: '16/9' }}> </div>
{img.url && img.url.trim() !== '' ? ( </TabsContent>
<Image <TabsContent value="output" className="p-0 m-0 rounded-none">
src={img.url} <div className="relative bg-white p-4">
alt={`Generated image ${imgIndex + 1}`} {result ? (
layout="fill" <>
objectFit="contain" <pre className="text-sm">
/> <code>{result.message}</code>
) : ( </pre>
<div className="flex items-center justify-center h-full bg-gray-100 text-gray-400"> <div className="absolute top-2 right-2">
Image upload failed or URL is empty <CopyButton text={result.message} />
</div> </div>
)} </>
</div> ) : (
<div className="flex items-center justify-center h-20">
<div className="flex items-center gap-2">
<Loader2 className="h-5 w-5 text-gray-400 animate-spin" />
<span className="text-gray-500 text-sm">Executing code...</span>
</div>
</div>
)}
</div> </div>
))} </TabsContent>
</div> {result?.images && result.images.length > 0 && (
</TabsContent> <TabsContent value="images" className="p-0 m-0 bg-white">
)} <div className="space-y-4 p-4">
</Tabs> {result.images.map((img: { format: string, url: string }, imgIndex: number) => (
</div> <div key={imgIndex} className="space-y-2">
<div className="flex justify-between items-center">
<h4 className="text-sm font-medium">Image {imgIndex + 1}</h4>
{img.url && img.url.trim() !== '' && (
<Button
variant="ghost"
size="sm"
className="p-0 h-8 w-8"
onClick={() => {
window.open(img.url + "?download=1", '_blank');
}}
>
<Download className="h-4 w-4" />
</Button>
)}
</div>
<div className="relative w-full" style={{ aspectRatio: '16/9' }}>
{img.url && img.url.trim() !== '' ? (
<Image
src={img.url}
alt={`Generated image ${imgIndex + 1}`}
layout="fill"
objectFit="contain"
/>
) : (
<div className="flex items-center justify-center h-full bg-gray-100 text-gray-400">
Image upload failed or URL is empty
</div>
)}
</div>
</div>
))}
</div>
</TabsContent>
)}
</Tabs>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
); );
} }