From 07d01b0790f35799a5e6aa3bb85a90331d3c0dbb Mon Sep 17 00:00:00 2001
From: zaidmukaddam <zaidaltafmukaddam@gmail.com>
Date: Sun, 25 Aug 2024 21:41:49 +0530
Subject: [PATCH] fix: wrapped programming UI inside accordion

---
 app/api/chat/route.ts |   4 +-
 app/page.tsx          | 222 ++++++++++++++++++++++--------------------
 2 files changed, 120 insertions(+), 106 deletions(-)

diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 52b6b98..54ca364 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -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!!!!!
 
 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!
 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 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.
-- 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:
 - 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({
         description: "Write and execute Python code.",
         parameters: z.object({
+          title: z.string().optional().describe("The title of the code snippet."),
           code: z.string().describe("The Python code to execute."),
         }),
         execute: async ({ code }: { code: string }) => {
diff --git a/app/page.tsx b/app/page.tsx
index 3a0627b..bdc1d88 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -788,115 +788,129 @@ export default function Home() {
 
     if (toolInvocation.toolName === 'programming') {
       return (
-        <div className="w-full my-2 border border-gray-200 overflow-hidden rounded-md">
-          <div className="bg-gray-100 p-2 flex items-center">
-            <Code className="h-5 w-5 text-gray-500 mr-2" />
-            <span className="text-sm font-medium">Programming</span>
-          </div>
-          <Tabs defaultValue="code" className="w-full">
-            <TabsList className="bg-gray-50 p-0 h-auto shadow-sm rounded-none">
-              <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} />
+        <Accordion type="single" collapsible className="w-full mt-4">
+          <AccordionItem value={`item-${index}`} className="border-none">
+            <AccordionTrigger className="hover:no-underline py-2">
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-2">
+                  <Code className="h-5 w-5 text-primary" />
+                  <h2 className="text-base font-semibold">Programming</h2>
                 </div>
               </div>
-            </TabsContent>
-            <TabsContent value="output" className="p-0 m-0 rounded-none">
-              <div className="relative bg-white p-4">
-                {result ? (
-                  <>
-                    <pre className="text-sm">
-                      <code>{result.message}</code>
-                    </pre>
-                    <div className="absolute top-2 right-2">
-                      <CopyButton text={result.message} />
-                    </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>
-            </TabsContent>
-            {result?.images && result.images.length > 0 && (
-              <TabsContent value="images" className="p-0 m-0 bg-white">
-                <div className="space-y-4 p-4">
-                  {result.images.map((img: { format: string, url: string }, imgIndex: number) => (
-                    <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>
-                        )}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="w-full my-2 border border-gray-200 overflow-hidden rounded-md">
+                <div className="bg-gray-100 p-2 flex items-center">
+                  <Code className="h-5 w-5 text-gray-500 mr-2" />
+                  <span className="text-sm font-medium">{args.title}</span>
+                </div>
+                <Tabs defaultValue="code" className="w-full">
+                  <TabsList className="bg-gray-50 p-0 h-auto shadow-sm rounded-none">
+                    <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 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>
+                  </TabsContent>
+                  <TabsContent value="output" className="p-0 m-0 rounded-none">
+                    <div className="relative bg-white p-4">
+                      {result ? (
+                        <>
+                          <pre className="text-sm">
+                            <code>{result.message}</code>
+                          </pre>
+                          <div className="absolute top-2 right-2">
+                            <CopyButton text={result.message} />
                           </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>
-            )}
-          </Tabs>
-        </div>
+                  </TabsContent>
+                  {result?.images && result.images.length > 0 && (
+                    <TabsContent value="images" className="p-0 m-0 bg-white">
+                      <div className="space-y-4 p-4">
+                        {result.images.map((img: { format: string, url: string }, imgIndex: number) => (
+                          <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>
       );
     }