feat: Added flight tracker component

app/actions.ts

@@ -108,7 +108,7 @@ const groupTools = {
     'get_weather_data', 'find_place', 'programming',
     'web_search', 'text_translate', 'nearby_search',
     'x_search', 'youtube_search', 'shopping_search',
-    'academic_search'
+    'academic_search', 'track_flight'
   ] as const,
   academic: ['academic_search', 'programming'] as const,
   shopping: ['shopping_search', 'programming'] as const,
@@ -133,7 +133,7 @@ Always put citations at the end of each paragraph and in the end of sentences wh
 
 Here are the tools available to you:
 <available_tools>
-web_search, retrieve, get_weather_data, programming, text_translate, find_place
+web_search, retrieve, get_weather_data, programming, text_translate, find_place, track_flight
 </available_tools>
 
 ## Basic Guidelines:
@@ -155,6 +155,7 @@ DO's:
 - The programming tool runs the code in a 'safe' and 'sandboxed' jupyper notebook environment. Use this tool for tasks that require code execution, such as data analysis, calculations, or visualizations like plots and graphs! Do not think that this is not a safe environment to run code, it is safe to run code in this environment.
 - The programming tool can be used to install libraries using !pip install <library_name> in the code. This will help in running the code successfully. Always remember to install the libraries using !pip install <library_name> in the code at all costs!!
 - For queries about finding a specific place, use the find_place tool. Provide the information about the location and then compose your response based on the information gathered.
+- For queries about tracking a flight, use the track_flight tool. Provide the flight number in the parameters, then compose your response based on the information gathered.
 - For queries about nearby places, use the nearby_search tool. Provide the location and radius in the parameters, then compose your response based on the information gathered.
 - Adding Country name in the location search will help in getting the accurate results. Always remember to provide the location in the correct format to get the accurate 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.
@@ -187,6 +188,10 @@ Follow the format and guidelines for each tool and provide the response accordin
 - For nearby search queries, use the nearby_search tool to find places around a location. Provide the location and radius in the parameters, then compose your response based on the information gathered.
 - Never call find_place tool before or after the nearby_search tool in the same response at all costs!! THIS IS NOT ALLOWED AT ALL COSTS!!!
 
+## Flight Tracking Tool Guidelines:
+- For queries related to flight tracking, always use the track_flight tool to find information about the flight. Provide the flight number in the parameters, then compose your response based on the information gathered.
+- Calling track_flight tool in the same response is allowed, but do not call the same tool in a response at all costs!!
+
 ## Programming Tool Guidelines:
 The programming tool is actually a Python-only Code interpreter, so you can run any Python code in it.
 - This tool should not be called more than once in a response.

app/api/chat/route.ts

@@ -129,7 +129,7 @@ Always put citations at the end of each paragraph and in the end of sentences wh
 
 Here are the tools available to you:
 <available_tools>
-web_search, retrieve, get_weather_data, programming, text_translate, find_place
+web_search, retrieve, get_weather_data, programming, text_translate, find_place, track_flight
 </available_tools>
 
 ## Basic Guidelines:
@@ -1141,7 +1141,24 @@ export async function POST(req: Request) {
             throw error;
           }
         },
-      })
+      }),
+      track_flight: tool({
+        description: "Track flight information and status",
+        parameters: z.object({
+          flight_number: z.string().describe("The flight number to track"),
+        }),
+        execute: async ({ flight_number }: { flight_number: string }) => {
+          try {
+            const response = await fetch(
+              `https://api.aviationstack.com/v1/flights?access_key=${process.env.AVIATION_STACK_API_KEY}&flight_iata=${flight_number}`
+            );
+            return await response.json();
+          } catch (error) {
+            console.error('Flight tracking error:', error);
+            throw error;
+          }
+        },
+      }),
     },
     toolChoice: "auto",
     onChunk(event) {

app/api/cohere/route.ts

@@ -396,6 +396,23 @@ Remember to always run the appropriate tool(s) first and compose your response b
           return data;
         },
       }),
+      track_flight: tool({
+        description: "Track flight information and status",
+        parameters: z.object({
+          flight_number: z.string().describe("The flight number to track"),
+        }),
+        execute: async ({ flight_number }: { flight_number: string }) => {
+          try {
+            const response = await fetch(
+              `https://api.aviationstack.com/v1/flights?access_key=${process.env.AVIATION_STACK_API_KEY}&flight_iata=${flight_number}`
+            );
+            return await response.json();
+          } catch (error) {
+            console.error('Flight tracking error:', error);
+            throw error;
+          }
+        },
+      }),
     },
     toolChoice: "auto",
   });

app/search/page.tsx

@@ -71,7 +71,8 @@ import {
     Building,
     Users,
     Brain,
-    TrendingUp
+    TrendingUp,
+    Plane
 } from 'lucide-react';
 import {
     HoverCard,
@@ -128,6 +129,7 @@ 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';
 
 export const maxDuration = 60;
 
@@ -1835,6 +1837,49 @@ The new Anthropic models: Claude 3.5 Sonnet and 3.5 Haiku models are now availab
                 return <ResultsOverview result={result} />;
             }
 
+            if (toolInvocation.toolName === 'track_flight') {
+                if (!result) {
+                    return (
+                        <div className="flex items-center justify-between w-full">
+                            <div className="flex items-center gap-2">
+                                <Plane className="h-5 w-5 text-neutral-700 dark:text-neutral-300 animate-pulse" />
+                                <span className="text-neutral-700 dark:text-neutral-300 text-lg">Tracking flight...</span>
+                            </div>
+                            <div className="flex space-x-1">
+                                {[0, 1, 2].map((index) => (
+                                    <motion.div
+                                        key={index}
+                                        className="w-2 h-2 bg-neutral-400 dark:bg-neutral-600 rounded-full"
+                                        initial={{ opacity: 0.3 }}
+                                        animate={{ opacity: 1 }}
+                                        transition={{
+                                            repeat: Infinity,
+                                            duration: 0.8,
+                                            delay: index * 0.2,
+                                            repeatType: "reverse",
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    );
+                }
+
+                if (result.error) {
+                    return (
+                        <div className="text-red-500 dark:text-red-400">
+                            Error tracking flight: {result.error}
+                        </div>
+                    );
+                }
+
+                return (
+                    <div className="my-4">
+                        <FlightTracker data={result} />
+                    </div>
+                );
+            }
+
             return null;
         },
         [ResultsOverview, theme]

components/flight-tracker.tsx

@@ -0,0 +1,198 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Plane, Clock, Terminal } from "lucide-react";
+import { motion } from "framer-motion";
+
+interface FlightApiResponse {
+  data: Array<{
+    flight_date: string;
+    flight_status: string;
+    departure: {
+      airport: string;
+      timezone: string;
+      iata: string;
+      terminal: string | null;
+      gate: string | null;
+      delay: number | null;
+      scheduled: string;
+    };
+    arrival: {
+      airport: string;
+      timezone: string;
+      iata: string;
+      terminal: string | null;
+      gate: string | null;
+      delay: number | null;
+      scheduled: string;
+    };
+    airline: {
+      name: string;
+      iata: string;
+    };
+    flight: {
+      number: string;
+      iata: string;
+      duration: number | null;
+    };
+  }>;
+}
+
+interface FlightTrackerProps {
+  data: FlightApiResponse;
+}
+
+export function FlightTracker({ data }: FlightTrackerProps) {
+  if (!data?.data?.[0]) {
+    return null;
+  }
+
+  const flight = data.data[0];
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      hour12: false,
+      timeZone: 'UTC'
+    }) + ' UTC';
+  };
+
+  const formatDate = (timestamp: string) => {
+    return new Date(timestamp).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    });
+  };
+
+  const mapStatus = (status: string): "LANDED" | "DEPARTING ON TIME" | "DELAYED" | "SCHEDULED" => {
+    switch (status.toLowerCase()) {
+      case 'landed':
+        return 'LANDED';
+      case 'active':
+        return flight.departure.delay ? 'DELAYED' : 'DEPARTING ON TIME';
+      case 'scheduled':
+        return 'SCHEDULED';
+      default:
+        return 'SCHEDULED';
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "LANDED":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+      case "DEPARTING ON TIME":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+      case "DELAYED":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+      default:
+        return "bg-neutral-100 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200";
+    }
+  };
+
+  const flightInfo = {
+    flightNumber: flight.flight.iata,
+    status: mapStatus(flight.flight_status),
+    departure: {
+      airport: flight.departure.airport,
+      code: flight.departure.iata,
+      time: formatTime(flight.departure.scheduled),
+      date: formatDate(flight.departure.scheduled),
+      terminal: flight.departure.terminal || undefined,
+      gate: flight.departure.gate || undefined
+    },
+    arrival: {
+      airport: flight.arrival.airport,
+      code: flight.arrival.iata,
+      time: formatTime(flight.arrival.scheduled),
+      date: formatDate(flight.arrival.scheduled),
+      terminal: flight.arrival.terminal || undefined,
+      gate: flight.arrival.gate || undefined
+    },
+    duration: flight.flight.duration ? `${flight.flight.duration} minutes` : 'N/A',
+    lastUpdated: new Date().toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: true
+    })
+  };
+
+  return (
+    <Card className="w-full max-w-2xl bg-card dark:bg-card">
+      <CardContent className="p-6">
+        <div className="flex justify-between items-center mb-6">
+          <div>
+            <h2 className="text-2xl font-bold">{flightInfo.flightNumber}</h2>
+            <Badge className={getStatusColor(flightInfo.status)}>
+              {flightInfo.status}
+            </Badge>
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="flex justify-between items-center">
+            <div className="text-4xl font-mono">{flightInfo.departure.code}</div>
+            <motion.div 
+              className="text-primary"
+              initial={{ x: -50 }}
+              animate={{ x: 50 }}
+              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+            >
+              <Plane className="h-6 w-6" />
+            </motion.div>
+            <div className="text-4xl font-mono">{flightInfo.arrival.code}</div>
+          </div>
+          <div className="mt-8 grid grid-cols-2 gap-8">
+            <div>
+              <p className="text-lg font-medium">{flightInfo.departure.airport}</p>
+              <p className="text-3xl font-bold mt-1">{flightInfo.departure.time}</p>
+              <p className="text-sm text-muted-foreground">{flightInfo.departure.date}</p>
+              {(flightInfo.departure.terminal || flightInfo.departure.gate) && (
+                <div className="mt-2 flex items-center gap-4">
+                  {flightInfo.departure.terminal && (
+                    <div className="flex items-center gap-1">
+                      <Terminal className="h-4 w-4" />
+                      <span>Terminal {flightInfo.departure.terminal}</span>
+                    </div>
+                  )}
+                  {flightInfo.departure.gate && (
+                    <div>Gate {flightInfo.departure.gate}</div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <p className="text-lg font-medium">{flightInfo.arrival.airport}</p>
+              <p className="text-3xl font-bold mt-1">{flightInfo.arrival.time}</p>
+              <p className="text-sm text-muted-foreground">{flightInfo.arrival.date}</p>
+              {(flightInfo.arrival.terminal || flightInfo.arrival.gate) && (
+                <div className="mt-2 flex items-center gap-4">
+                  {flightInfo.arrival.terminal && (
+                    <div className="flex items-center gap-1">
+                      <Terminal className="h-4 w-4" />
+                      <span>Terminal {flightInfo.arrival.terminal}</span>
+                    </div>
+                  )}
+                  {flightInfo.arrival.gate && (
+                    <div>Gate {flightInfo.arrival.gate}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-6 flex items-center gap-2 text-sm text-muted-foreground">
+            <Clock className="h-4 w-4" />
+            <span>Duration: {flightInfo.duration}</span>
+            <span className="mx-2">•</span>
+            <span>Last updated: {flightInfo.lastUpdated}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}