Merge pull request #4 from Daslin-Davidson/fix/train-update

Daslin-Davidson · web-flow · commit b4791e74d886 · 2025-07-30T19:23:51.000+05:30
Fix/train update
diff --git a/ai/actions.ts b/ai/actions.ts
@@ -40,16 +40,19 @@ export async function generateSampleTrainStatus({
   return trainStatus;
 }
 
+
 export async function generateSampleTrainSearchResults({
   origin,
   destination,
+  date,
 }: {
   origin: string;
   destination: string;
+  date: string;
 }) {
   const { object: trainSearchResults } = await generateObject({
     model: geminiFlashModel,
-    prompt: `Generate search results for trains from ${origin} to ${destination}, limit to 4 results`,
+    prompt: `Generate search results for trains from ${origin} to ${destination} on ${date}, limit to 4 results`,
     output: "array",
     schema: z.object({
       id: z
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
@@ -92,12 +92,14 @@ export async function POST(request: Request) {
         parameters: z.object({
           origin: z.string().describe("Origin station or city"),
           destination: z.string().describe("Destination station or city"),
+          date: z.string().describe("Date of travel (ISO or natural language)")
         }),
-        execute: async ({ origin, destination }) => {
-          console.log('[searchTrains] start', { origin, destination });
+        execute: async ({ origin, destination, date }) => {
+          console.log('[searchTrains] start', { origin, destination, date });
           const results = await generateSampleTrainSearchResults({
             origin,
             destination,
+            date,
           });
           console.log('[searchTrains] end', results);
           return results;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,9 @@
 import { Metadata } from "next";
+import { SessionProvider } from "next-auth/react";
 import { Toaster } from "sonner";
 
 import { Navbar } from "@/components/custom/navbar";
-import { ThemeProvider } from "@/components/custom/theme-provider";
+import ThemeClientLayout from "@/components/custom/theme-client-layout";
 
 import "./globals.css";
 
@@ -20,16 +21,13 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body className="antialiased">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <Toaster position="top-center" />
-          <Navbar />
-          {children}
-        </ThemeProvider>
+        <ThemeClientLayout>
+          <SessionProvider>
+            <Toaster position="top-center" />
+            <Navbar />
+            {children}
+          </SessionProvider>
+        </ThemeClientLayout>
       </body>
     </html>
   );
diff --git a/components/custom/chat.tsx b/components/custom/chat.tsx
@@ -68,7 +68,6 @@ export function Chat({
         // Initial state: centered input and logo
         <div className="flex flex-col items-center justify-center size-full">
           {/* Updated Rail logo */}
-          <Image src="/images/ir-logo.png" alt="Rail Logo" width={80} height={80} className="size-20 mb-6 rounded-full shadow object-cover" />
           <form className="flex flex-row gap-3 items-center size-full max-w-xl px-6">
             <MultimodalInput
               input={input}
diff --git a/components/custom/multimodal-input.tsx b/components/custom/multimodal-input.tsx
@@ -2,6 +2,7 @@
 
 import { Attachment, ChatRequestOptions, CreateMessage, Message } from "ai";
 import { motion } from "framer-motion";
+import { useSession } from "next-auth/react";
 import React, {
   useRef,
   useEffect,
@@ -19,6 +20,7 @@ import useWindowSize from "./use-window-size";
 import { Button } from "../ui/button";
 import { Textarea } from "../ui/textarea";
 
+
 const suggestedActions = [
   {
     title: "Book a train ",
@@ -151,39 +153,57 @@ export function MultimodalInput({
     [setAttachments],
   );
 
+  const { data: session } = useSession();
+  const email = session?.user?.email || "";
+  const userName = email.split("@")[0]
+    ? email.split("@")[0].charAt(0).toUpperCase() + email.split("@")[0].slice(1)
+    : "";
+
+  const greetings = [
+    `Ciao ${userName}! Where are we heading?`,
+    `All Aboard, Which station's on your mind?`,
+    `Buongiorno! What's your next stop?`,
+    `Next Journey, ${userName}? Tell me where!`,
+    `Ciao! Which city should we explore?`
+  ];
+  const [greetingIndex, setGreetingIndex] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setGreetingIndex((i) => (i + 1) % greetings.length);
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [greetings.length]);
+
   return (
     <div className="relative w-full flex flex-col gap-4">
-      {messages.length === 0 &&
-        attachments.length === 0 &&
-        uploadQueue.length === 0 && (
-          <div className="grid sm:grid-cols-2 gap-4 w-full md:px-0 mx-auto md:max-w-[500px]">
-            {suggestedActions.map((suggestedAction, index) => (
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 20 }}
-                transition={{ delay: 0.05 * index }}
-                key={index}
-                className={index > 1 ? "hidden sm:block" : "block"}
-              >
-                <button
-                  onClick={async () => {
-                    append({
-                      role: "user",
-                      content: suggestedAction.action,
-                    });
-                  }}
-                  className="border-none bg-muted/50 w-full text-left border border-zinc-200 dark:border-zinc-800 text-zinc-800 dark:text-zinc-300 rounded-lg p-3 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors flex flex-col"
-                >
-                  <span className="font-medium">{suggestedAction.title}</span>
-                  <span className="text-zinc-500 dark:text-zinc-400">
-                    {suggestedAction.label}
-                  </span>
-                </button>
-              </motion.div>
-            ))}
-          </div>
-        )}
+      {/* Show greeting and suggested actions only for new chat */}
+      {messages.length === 0 && (
+        <div
+          className="w-full flex justify-center items-center my-2"
+          style={{
+            minHeight: "2.5rem",
+            height: "2.5rem",
+            perspective: "800px"
+          }}
+        >
+          <motion.div
+            key={greetingIndex}
+            initial={{ rotateX: -90, opacity: 0 }}
+            animate={{ rotateX: 0, opacity: 1 }}
+            exit={{ rotateX: 90, opacity: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-2xl font-semibold"
+            style={{
+              textAlign: "center",
+              display: "inline-block",
+              width: "100%",
+              backfaceVisibility: "hidden"
+            }}
+          >
+            {greetings[greetingIndex]}
+          </motion.div>
+        </div>
+      )}
 
       <input
         type="file"
@@ -214,60 +234,97 @@ export function MultimodalInput({
         </div>
       )}
 
-      <Textarea
-        ref={textareaRef}
-        placeholder="Send a message..."
-        value={input}
-        onChange={handleInput}
-        className="min-h-[24px] overflow-hidden resize-none rounded-lg text-base bg-muted border-none"
-        rows={3}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
+      <div className="relative w-full flex flex-row items-center bg-muted rounded-lg">
+        <Textarea
+          ref={textareaRef}
+          placeholder="Send a message..."
+          value={input}
+          onChange={handleInput}
+          className="min-h-[24px] overflow-hidden resize-none rounded-lg text-base bg-muted border-none pr-20"
+          rows={3}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
 
-            if (isLoading) {
-              toast.error("Please wait for the model to finish its response!");
-            } else {
-              submitForm();
+              if (isLoading) {
+                toast.error("Please wait for the model to finish its response!");
+              } else {
+                submitForm();
+              }
             }
-          }
-        }}
-      />
-
-      {isLoading ? (
-        <Button
-          className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 text-white"
-          onClick={(event) => {
-            event.preventDefault();
-            stop();
           }}
-        >
-          <StopIcon size={14} />
-        </Button>
-      ) : (
-        <Button
-          className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 text-white"
-          onClick={(event) => {
-            event.preventDefault();
-            submitForm();
-          }}
-          disabled={input.length === 0 || uploadQueue.length > 0}
-        >
-          <ArrowUpIcon size={14} />
-        </Button>
+        />
+        <div className="absolute right-2 bottom-2 flex flex-row gap-2">
+          <Button
+            className="rounded-full p-1.5 h-fit m-0.5 text-zinc-700 dark:text-zinc-300"
+            onClick={(event) => {
+              event.preventDefault();
+              fileInputRef.current?.click();
+            }}
+            variant="outline"
+            disabled={isLoading}
+            type="button"
+          >
+            <PaperclipIcon size={14} />
+          </Button>
+          {isLoading ? (
+            <Button
+              className="rounded-full p-1.5 h-fit m-0.5 text-white"
+              onClick={(event) => {
+                event.preventDefault();
+                stop();
+              }}
+              type="button"
+            >
+              <StopIcon size={14} />
+            </Button>
+          ) : (
+            <Button
+              className="rounded-full p-1.5 h-fit m-0.5 text-white"
+              onClick={(event) => {
+                event.preventDefault();
+                submitForm();
+              }}
+              disabled={input.length === 0 || uploadQueue.length > 0}
+              type="button"
+            >
+              <ArrowUpIcon size={14} />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Suggested actions below input, always visible for new chat */}
+      {messages.length === 0 && (
+        <div className="grid sm:grid-cols-2 gap-4 w-full md:px-0 mx-auto md:max-w-[500px] mt-4">
+          {suggestedActions.map((suggestedAction, index) => (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              transition={{ delay: 0.05 * index }}
+              key={index}
+              className={index > 1 ? "hidden sm:block" : "block"}
+            >
+              <button
+                onClick={async () => {
+                  append({
+                    role: "user",
+                    content: suggestedAction.action,
+                  });
+                }}
+                className="border-none bg-muted/50 w-full text-left border border-zinc-200 dark:border-zinc-800 text-zinc-800 dark:text-zinc-300 rounded-lg p-3 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors flex flex-col"
+              >
+                <span className="font-medium">{suggestedAction.title}</span>
+                <span className="text-zinc-500 dark:text-zinc-400">
+                  {suggestedAction.label}
+                </span>
+              </button>
+            </motion.div>
+          ))}
+        </div>
       )}
 
-      <Button
-        className="rounded-full p-1.5 h-fit absolute bottom-2 right-10 m-0.5 dark:border-zinc-700"
-        onClick={(event) => {
-          event.preventDefault();
-          fileInputRef.current?.click();
-        }}
-        variant="outline"
-        disabled={isLoading}
-      >
-        <PaperclipIcon size={14} />
-      </Button>
     </div>
   );
 }
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
@@ -19,15 +19,19 @@ export const Navbar = async () => {
 
   return (
     <>
-      <div className="bg-background absolute top-0 left-0 w-dvw py-2 px-3 justify-between flex flex-row items-center z-30">
+      <div className="bg-background absolute top-0 left-0 w-dvw py-1 px-2 justify-between flex flex-row items-center z-30">
         <div className="flex flex-row gap-3 items-center">
           <div className="flex flex-row gap-2 items-center">
-            <Image
-              src="/images/italia-rail.png"
-              height={200}
-              width={200}
-              alt="Italia Rail logo"
-            />
+            <Link href="/" passHref>
+              <Image
+                src="/images/italia-rail.png"
+                height={200}
+                width={200}
+                alt="Italia Rail logo"
+                priority
+                style={{ width: 'auto', height: 'auto', cursor: 'pointer' }}
+              />
+            </Link>
           </div>
         </div>
 
@@ -36,12 +40,15 @@ export const Navbar = async () => {
             <>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    className="py-1.5 px-2 font-normal rounded-full bg-emerald-600 text-white size-8 flex items-center justify-center text-lg"
-                    variant="secondary"
-                  >
-                    {session.user?.email?.slice(0, 2).toUpperCase()}
-                  </Button>
+                  <div className="size-8 rounded-full overflow-hidden flex items-center justify-center bg-emerald-600 shadow-md border border-zinc-200 dark:border-zinc-700">
+                    <Image
+                      src="/images/person.png"
+                      alt="User avatar"
+                      width={32}
+                      height={32}
+                      style={{ width: "32px", height: "32px" }}
+                    />
+                  </div>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem>
diff --git a/components/custom/theme-client-layout.tsx b/components/custom/theme-client-layout.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider } from "@/components/custom/theme-provider";
+
+export default function ThemeClientLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/components/trains/list-trains.tsx b/components/trains/list-trains.tsx
diff --git a/public/images/person.png b/public/images/person.png
