chore: Complete Animations and fix system prompt for Claude

app/api/chat/route.ts

@@ -23,6 +23,7 @@ export async function POST(req: Request) {
     system:
       "You are an AI web search engine that helps users find information on the internet." +
       "You use the 'web_search' tool to search for information on the internet." +
+      "Always call the 'web_search' tool to get the information, no need to do a chain of thought or say anything else, go straight to the point." +
       "Once you have found the information, you provide the user with the information you found in brief like a news paper detail." +
       "The detail should be 3-5 paragraphs in 10-12 sentences, some time pointers, each with citations in the [Text](link) format always!" +
       "Citations can be inline of the text like this: Hey there! [Google](https://google.com) is a search engine." +
@@ -36,7 +37,7 @@ export async function POST(req: Request) {
         })
         .replace(/(\w+), (\w+) (\d+), (\d+)/, "$4-$2-$3 ($1)") +
       "Never use the heading format in your response!." +
-      "You always have to call the 'web_search' tool to get the information, no need to do a chain of thoughts.",
+      "Refrain from saying things like 'Certainly! I'll search for information about OpenAI GPT-4o mini using the web search tool.'",
     tools: {
       web_search: {
         description: 'Search the web for information with the given query, max results and search depth.',
@@ -82,6 +83,9 @@ export async function POST(req: Request) {
           }
         }
       },
+    },
+    onFinish: async (event) => {
+      console.log(event.text);
     }
   });
 

app/page.tsx

@@ -32,6 +32,7 @@ export default function Home() {
   const inputRef = useRef<HTMLInputElement>(null);
   const [lastSubmittedQuery, setLastSubmittedQuery] = useState("");
   const [hasSubmitted, setHasSubmitted] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
   const [showToolResults, setShowToolResults] = useState<{ [key: number]: boolean }>({});
   const [isModelSelectorOpen, setIsModelSelectorOpen] = useState(false);
@@ -55,8 +56,6 @@ export default function Home() {
     { name: 'Quality (Claude)', description: 'High quality generation.', details: '(Anthropic/Claude-3.5-Sonnet)', icon: Sparkles },
   ];
 
-
-
   const renderToolInvocation = (toolInvocation: ToolInvocation, index: number) => {
     const args = JSON.parse(JSON.stringify(toolInvocation.args));
     const result = 'result' in toolInvocation ? JSON.parse(JSON.stringify(toolInvocation.result)) : null;
@@ -148,6 +147,9 @@ export default function Home() {
       .replace(boldRegex, '<strong>$1</strong>')
       .replace(italicRegex, '<em>$1</em>');
 
+    // Remove double new lines
+    content = content.replace("\n\n", "")
+
     // Replace unordered and ordered lists
     content = content
       .replace(unorderedListRegex, '<li class="list-disc ml-6">$1</li>')
@@ -227,6 +229,7 @@ export default function Home() {
       setLastSubmittedQuery(input.trim());
       handleSubmit(e);
       setHasSubmitted(true);
+      setIsAnimating(true);
       setShowToolResults({});
     } else {
       toast.error("Please enter a search query.");
@@ -355,28 +358,54 @@ export default function Home() {
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: 50 }}
               transition={{ duration: 0.5 }}
-              className="flex items-center space-x-2 mb-4"
+              onAnimationComplete={() => setIsAnimating(false)}
             >
-              <p className="text-lg sm:text-2xl font-medium font-serif">{lastSubmittedQuery}</p>
+              <div className="flex items-center space-x-2 mb-4">
-              <Badge
+                <motion.p
-                variant="secondary"
+                  initial={{ opacity: 0, y: 20 }}
-                className={`text-xs sm:text-sm ${selectedModel.includes('Quality') ? 'bg-purple-500 hover:bg-purple-500' : 'bg-green-500 hover:bg-green-500'} text-white`}
+                  animate={{ opacity: 1, y: 0 }}
-              >
+                  transition={{ duration: 0.5, delay: 0.2 }}
-                {selectedModel === 'Speed' && <FastForward className="w-4 h-4 mr-1" />}
+                  className="text-lg sm:text-2xl font-medium font-serif"
-                {selectedModel === 'Quality (GPT)' && <Sparkles className="w-4 h-4 mr-1" />}
+                >
-                {selectedModel === 'Quality (Claude)' && <Sparkles className="w-4 h-4 mr-1" />}
+                  {lastSubmittedQuery}
-                {selectedModel}
+                </motion.p>
-              </Badge>
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.5, delay: 0.4 }}
+                >
+                  <Badge
+                    variant="secondary"
+                    className={`text-xs sm:text-sm ${selectedModel.includes('Quality') ? 'bg-purple-500 hover:bg-purple-500' : 'bg-green-500 hover:bg-green-500'} text-white`}
+                  >
+                    {selectedModel === 'Speed' && <FastForward className="w-4 h-4 mr-1" />}
+                    {selectedModel === 'Quality (GPT)' && <Sparkles className="w-4 h-4 mr-1" />}
+                    {selectedModel === 'Quality (Claude)' && <Sparkles className="w-4 h-4 mr-1" />}
+                    {selectedModel}
+                  </Badge>
+                </motion.div>
+              </div>
             </motion.div>
           )}
         </AnimatePresence>
 
-        {messages.length > 0 && (
+        <AnimatePresence>
-          <div className="space-y-4 sm:space-y-6">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: 0.5, delay: 0.6 }}
+            className="space-y-4 sm:space-y-6"
+          >
             {messages.map((message, index) => (
-              <React.Fragment key={index}>
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
                 {message.role === 'assistant' && message.content && (
-                  <Card className="bg-card text-card-foreground border border-muted !mb-20 sm:!mb-16">
+                  <Card className="bg-card text-card-foreground border border-muted !mb-8 sm:!mb-16">
                     <CardContent className="p-3 sm:p-4">
                       <h2 className="text-lg sm:text-xl font-semibold mb-2">Answer</h2>
                       <div className="text-sm sm:text-base">
@@ -386,19 +415,24 @@ export default function Home() {
                   </Card>
                 )}
                 {message.toolInvocations?.map((toolInvocation: ToolInvocation, toolIndex: number) => (
-                  <React.Fragment key={toolIndex}>
+                  <motion.div
+                    key={`tool-${toolIndex}`}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: (index + toolIndex) * 0.1 + 0.2 }}
+                  >
                     {renderToolInvocation(toolInvocation, toolIndex)}
-                  </React.Fragment>
+                  </motion.div>
                 ))}
-              </React.Fragment>
+              </motion.div>
             ))}
             <div ref={bottomRef} />
-          </div>
+          </motion.div>
-        )}
+        </AnimatePresence>
       </div>
 
       <AnimatePresence>
-        {hasSubmitted && (
+        {hasSubmitted && !isAnimating && (
           <motion.div
             initial={{ opacity: 0, y: 50 }}
             animate={{ opacity: 1, y: 0 }}