Few more changes to system prompt, fix edit query UI and README

README.md

@@ -17,14 +17,17 @@ A minimalistic AI-powered search engine that helps you find information on the i
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Vercel AI SDK](https://sdk.vercel.ai/docs)
 - [Shadcn/UI](https://ui.shadcn.com/)
-- [Anthropic](https://www.anthropic.com/)
 - [Tavily](https://tavily.com/)
 - [OpenWeather](https://openweathermap.org/)
 - [E2B](https://e2b.dev/)
 
+## LLMs used
+- [OpenAI's GPT 4o mini](https://openai.com/index/gpt-4o-mini-advancing-cost-efficient-intelligence/)
+- [Anthropic's Claude 3.5 Sonnet](https://www.anthropic.com/news/claude-3-5-sonnet)
+
 ### Deploy your own
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzaidmukaddam%2Fminiperplx&env=ANTHROPIC_API_KEY,GROQ_API_KEY,TAVILY_API_KEY,OPENWEATHER_API_KEY,E2B_API_KEY&envDescription=API%20keys%20needed%20for%20application)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzaidmukaddam%2Fminiperplx&env=OPENAI_API_KEY,ANTHROPIC_API_KEY,GROQ_API_KEY,TAVILY_API_KEY,OPENWEATHER_API_KEY,E2B_API_KEY&envDescription=API%20keys%20needed%20for%20application)
 
 ### Local development
 

app/api/chat/route.ts

@@ -1,4 +1,5 @@
 import { anthropic } from "@ai-sdk/anthropic";
+import { openai } from '@ai-sdk/openai'
 import { convertToCoreMessages, streamText, tool } from "ai";
 import { CodeInterpreter } from "@e2b/code-interpreter";
 import { z } from "zod";
@@ -11,7 +12,13 @@ export async function POST(req: Request) {
   const { messages, model } = await req.json();
   const { latitude, longitude, city } = geolocation(req)
 
-  const ansmodel = anthropic(model);
+  let ansmodel;
+
+  if (model === "claude-3-5-sonnet-20240620") {
+    ansmodel = anthropic(model);
+  } else {
+    ansmodel = openai(model);
+  }
 
   const result = await streamText({
     model: ansmodel,
@@ -41,15 +48,19 @@ Here is the general guideline per tool to follow when responding to user queries
 Always remember to run the appropriate tool first, then compose your response based on the information gathered.
 All tool should be called only once per response.
 
-When citing sources(citations), use the following format: [4 words of web source content..](link).
-
 Citations should 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!!
+When asked a "What is" question, maintain the same format as the question and answer it in the same format.
 
-Never create any kind of tags or lists in the response at ALL COSTS!!
+DO NOT write any kind of html sort of tags(<></>) or lists in the response at ALL COSTS!! NOT EVEN AN ENCLOSING TAGS FOR THE RESPONSE AT ALL COSTS!!
 
 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!
 Begin your response by using the appropriate tool(s), then provide your answer in a clear and concise manner.
-Never respond to user before running any tool like saying 'Certainly! Let me blah blah blah' or 'To provide you with the best answer, I will blah blah blah' or that 'Based on this and that, I think blah blah blah' at ALL COSTS!!
+Never respond to user before running any tool like 
+- saying 'Certainly! Let me blah blah blah' 
+- or 'To provide you with the best answer, I will blah blah blah' 
+- or that 'Based on search results, I think blah blah blah' at ALL COSTS!!
 Just run the tool and provide the answer.`,
     tools: {
       web_search: tool({
@@ -204,6 +215,7 @@ Just run the tool and provide the answer.`,
               }
             }
 
+            sandbox.close();
             return message;
           }
 
@@ -219,9 +231,11 @@ Just run the tool and provide the answer.`,
               message += `${execution.logs.stderr.join("\n")}\n`;
             }
 
+            sandbox.close();
             return message;
           }
 
+          sandbox.close();
           return "There was no output of the execution.";
         },
       }),

app/page.tsx

@@ -39,6 +39,7 @@ import {
   Edit2,
   RefreshCw,
   Heart,
+  X,
 } from 'lucide-react';
 import {
   HoverCard,
@@ -112,7 +113,7 @@ export default function Home() {
   const { isLoading, input, messages, setInput, append, reload, handleSubmit, setMessages } = useChat({
     api: '/api/chat',
     body: {
-      model: selectedModel === 'Speed' ? 'claude-3-haiku-20240307' : 'claude-3-5-sonnet-20240620',
+      model: selectedModel === 'Speed' ? 'gpt-4o-mini' : 'claude-3-5-sonnet-20240620',
     },
     maxToolRoundtrips: 1,
     onFinish: async (message, { finishReason }) => {
@@ -163,7 +164,7 @@ export default function Home() {
   };
 
   const models = [
-    { name: 'Speed', description: 'High speed, but lower quality.', details: '(Anthropic/Claude-3-Haiku)', icon: FastForward },
+    { name: 'Speed', description: 'High speed, but lower quality.', details: '(OpenAI/GPT-4o-mini)', icon: FastForward },
     { name: 'Quality', description: 'High quality generation.', details: '(Anthropic/Claude-3.5-Sonnet)', icon: Sparkles },
   ];
 
@@ -176,7 +177,7 @@ export default function Home() {
         setSelectedModel(value);
         reload({
           body: {
-            model: value === 'Speed' ? 'claude-3-haiku-20240307' : 'claude-3-5-sonnet-20240620',
+            model: value === 'Speed' ? 'gpt-4o-mini' : 'claude-3-5-sonnet-20240620',
           },
         });
       }
@@ -191,7 +192,7 @@ export default function Home() {
       setSuggestedQuestions([]);
       reload({
         body: {
-          model: newSelectedModel === 'Speed' ? 'claude-3-haiku-20240307' : 'claude-3-5-sonnet-20240620',
+          model: newSelectedModel === 'Speed' ? 'gpt-4o-mini' : 'claude-3-5-sonnet-20240620',
         },
       });
     } else {
@@ -713,6 +714,7 @@ export default function Home() {
   }, [append, setMessages]);
 
   const handleQueryEdit = useCallback(() => {
+    setIsAnimating(true)
     setIsEditingQuery(true);
     setInput(lastSubmittedQuery);
   }, [lastSubmittedQuery, setInput]);
@@ -929,6 +931,18 @@ export default function Home() {
                         onChange={(e) => setInput(e.target.value)}
                         className="flex-grow"
                       />
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        type="button"
+                        onClick={() => {
+                          setIsEditingQuery(false)
+                          setInput('')
+                        }}
+                        disabled={isLoading}
+                      >
+                        <X size={16} />
+                      </Button>
                       <Button type="submit" size="sm">
                         <ArrowRight size={16} />
                       </Button>
@@ -948,29 +962,29 @@ export default function Home() {
                     </TooltipProvider>
                   )}
                 </motion.div>
-                <motion.div
+                {!isEditingQuery && (<motion.div
                   initial={{ opacity: 0, scale: 0.8 }}
                   animate={{ opacity: 1, scale: 1 }}
                   transition={{ duration: 0.5, delay: 0.4 }}
                   className="flex-shrink-0 flex flex-row items-center gap-2"
                 >
-                  {!isEditingQuery && (
+                  <Button
-                    <Button
+                    variant="ghost"
-                      variant="ghost"
+                    size="sm"
-                      size="sm"
+                    onClick={handleQueryEdit}
-                      onClick={handleQueryEdit}
+                    className="ml-2"
-                      className="ml-2"
+                    disabled={isLoading}
-                      disabled={isLoading}
+                  >
-                    >
+                    <Edit2 size={16} />
-                      <Edit2 size={16} />
+                  </Button>
-                    </Button>
+
-                  )}
                   <ModelSelector
                     selectedModel={selectedModel}
                     onModelSelect={handleModelChange}
                     isDisabled={isLoading || isEditingQuery}
                   />
                 </motion.div>
+                )}
               </div>
             </motion.div>
           )}