Skip to content

Ai destination picker #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Ai destination picker #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
587aea4
initial setup for new destination picker
pcmccarron May 31, 2024
f9afa63
styling updates
pcmccarron May 31, 2024
e345ad7
small button tweak
pcmccarron Jun 3, 2024
f3fbe3b
switched to converse API
pcmccarron Jun 7, 2024
dfa5344
fixed prompt
pcmccarron Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 33 additions & 13 deletions components/ui/airwayscomponents/airlineHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import LaunchSignUp from "./launchSignup";
import LoginContext from "@/utils/contexts/login";
import DestinationPicker from "./pickMyDestinationModal";

const AirlineHero = ({
showSearch,
Expand All @@ -14,27 +15,44 @@ const AirlineHero = ({
const { isLoggedIn, enrolledInLaunchClub } = useContext(LoginContext);

return (
<section className={`airline-hero-image text-white ${showSearch ? "blur-lg" : ""}`}>
<section
className={`airline-hero-image text-white ${
showSearch ? "blur-lg" : ""
}`}
>
<div className="flex flex-col">
<div className={`relative`}>
<div aria-hidden="true" className="absolute hidden h-full w-1/2 lg:block" />
<div
aria-hidden="true"
className="absolute hidden h-full w-1/2 lg:block"
/>
<div className="relative lg:bg-transparent">
<div className={`mx-auto max-w-7xl px-4 sm:px-6 grid lg:grid-cols-2 lg:px-12 xl:px-4 `}>
<div
className={`mx-auto max-w-7xl px-4 sm:px-6 grid lg:grid-cols-2 lg:px-12 xl:px-4 `}
>
<div className=" mx-auto max-w-2xl py-[5rem] lg:max-w-none lg:py-32 z-10 lg:pr-10">
<div className={`flex flex-col items-center lg:items-start`}>
<h1 className={`text-4xl md:text-6xl xl:text-7xl pb-4 font-audimat`}>
<h1
className={`text-4xl md:text-6xl xl:text-7xl pb-4 font-audimat`}
>
Launch Airways
</h1>
<p
className={`text-lg md:text-xl xl:text-2xl font-light pt-4 text-center lg:text-start `}
>
Launch into the skies. In the air in milliseconds, reach your destination
without risk, and ship your travel dreams faster than ever before.
Launch into the skies. In the air in milliseconds, reach
your destination without risk, and ship your travel dreams
faster than ever before.
</p>
<div className="mt-10">
<Button className="bg-gradient-airways rounded-none h-full w-full text-3xl p-6 cursor-default">
Book Now
</Button>
<div className="flex flex-row">
<div className="mt-10 flex">
<Button className="bg-gradient-airways rounded-none h-full w-full text-3xl p-6 cursor-pointer">
Book Now
</Button>
</div>
<div className="flex mt-10 ml-2">
<DestinationPicker />
</div>
</div>
</div>
</div>
Expand All @@ -48,10 +66,12 @@ const AirlineHero = ({
bg-gradient-airways shadow-2xl rounded-lg text-white mx-[2.5rem] lg:mx-0"
>
<div className="text-center">
<h3 className="text-4xl text-center mb-4">Are you ready to Launch?!</h3>
<h3 className="text-4xl text-center mb-4">
Are you ready to Launch?!
</h3>
<p className="text-xl ">
Join Launch Club for exclusive access to flights, rewards, and much more.
See details within!
Join Launch Club for exclusive access to flights,
rewards, and much more. See details within!
</p>
</div>

Expand Down
178 changes: 178 additions & 0 deletions components/ui/airwayscomponents/pickMyDestinationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { GridLoader } from "react-spinners";
import { Button } from "../button";
import {useEffect, useState} from 'react'
import ReactMarkdown from 'react-markdown'
import Image from "next/image";
import { MapPinned } from "lucide-react";
import { useFlags } from "launchdarkly-react-client-sdk";

export default function DestinationPicker () {
const flags = useFlags();
const flagName = flags["destination-picker-ai-model"];
console.log(flagName)
const [recsGiven, setRecsGiven] = useState(false);
const [destinations, setDestinations] = useState<Array<any>>([]);
const [loading, setLoading] = useState(false);
const prompt =
"give me three recommendations of places to travel based on popular travel destinations, strongly consider weather conditions at the time of the request, and any unique characteristics that would appeal to the average traveler. Try to be creative and choose different spots every time I ask. Only respond using JSON format with the keys 'name' and 'reason', it should be an array of 3 JSON objects returned, limiting each response to 50 characters or less and 'name' should only contain the name of the destination.";

async function getDestinations () {
try {
setRecsGiven(true);
setLoading(true);
const response = await fetch("/api/destination-picker", {
method: "POST",
body: JSON.stringify({ prompt: prompt}),
});
const data = await response.json()
const formattedData = JSON.parse(data)
setDestinations(formattedData)
console.log(destinations)

}
catch {
console.error(new Error("there was a problem with the API"))
}
finally {
setLoading(false)
}
}

function resetDestinations () {
setRecsGiven(false)
}

useEffect(() => {
console.log("useEffect triggered")
if (!destinations) {
setDestinations(destinations)
}
},[recsGiven])

return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button className="bg-white text-black rounded-none h-full w-full text-3xl p-4 cursor-pointer hover:bg-zinc-200">
<div className="flex flex-col items-center justify-center">
<div className="flex">Find My Next Trip</div>
<div className="flex text-xs">powered by AI</div>
</div>
</Button>
</AlertDialogTrigger>
{recsGiven ? (
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="">
<div className="flex w-full justify-center pb-2">
<Image
src="/airline/launch-airways.svg"
height={100}
width={100}
alt="Launch Airways"
/>
</div>
<div className="flex w-full justify-center pb-2 text-2xl">
Destination Recommendations
</div>
<div className="flex w-full justify-center pb-6 text-base text-zinc-600 font-sohnelight">
powered by
{flagName.modelId === "cohere.command-text-v14" ? (
<strong className="text-amber-500 pl-1">
Cohere Command
</strong>
) : (
<strong className="text-blue-500 pl-1">
Claude 3 Haiku
</strong>
)}
</div>
</AlertDialogTitle>
<AlertDialogDescription>
{loading ? (
<div className="w-full flex items-center justify-center pb-6">
<GridLoader color="#405BFF" size={25} className="mt-10" />
</div>
) : (
<div className="font-sohnelight">
{destinations.length > 0 ? (
destinations.map((destination) => (
<div className="flex flex-col">
<h2 className="flex text-xl text-black pb-2 items-center gap-2">
<MapPinned size={20} />
{" "}
{destination.name}
</h2>
<p className="flex pb-4">{destination.reason}</p>
</div>
))
) : (
<p className="text-zinc-300">
No response generated yet.
</p>
)}
</div>
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="flex justify-center items-center align-center">
<AlertDialogAction
onClick={resetDestinations}
className="flex bg-transparent text-zinc-700 hover:bg-zinc-100 rounded-none h-full w-full cursor-pointer"
>
Close
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
) : (
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="text-xl font-sohne">
<div className="flex flex-col w-full">
<div className="flex justify-center pb-6">
<div className="flex w-full justify-center pb-2">
<Image
src="/airline/launch-airways.svg"
height={100}
width={100}
alt="Launch Airways"
/>
</div>
</div>
<div className="flex items-center text-center justify-center">
<p>Where do you want to go today?</p>
</div>
</div>
</AlertDialogTitle>
<AlertDialogDescription className="text-base pb-6">
Let us help you pick your next great vacation spot. Launch
Airways AI destination recommendation tool will help you find
the latest and greatest places for travel!
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="rounded-none">
Cancel
</AlertDialogCancel>
<Button
onClick={getDestinations}
className="bg-gradient-airways rounded-none h-full cursor-pointer"
>
Let's Go!
</Button>
</AlertDialogFooter>
</AlertDialogContent>
)}
</AlertDialog>
);
}
Loading
Loading