feat: add chat functionality with Google GenAI integration

Author: diegotc86

src/routes.ts

@@ -24,6 +24,7 @@ export default [
       ]),
       route("/not-found", "./routes/not-found/index.tsx"),
       route("/verify-email", "./routes/verify-email/index.tsx"),
+      route("/chat", "./routes/chat/index.tsx"),
     ],
   },
 ] satisfies RouteConfig;

src/routes/chat/index.tsx

@@ -0,0 +1,14 @@
+import { sendMessage } from "@/services/chat.service";
+
+import type { Route } from "../root/+types";
+
+export async function action({ request }: Route.ActionArgs) {
+  const { message, sessionid } = await request.json();
+
+  if (typeof message !== "string" || !message.trim()) {
+    throw new Error("Message cannot be empty");
+  }
+
+  const response = await sendMessage(message, sessionid);
+  return { message: response };
+}

src/routes/root/components/chatbot/index.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+
+import { Button, Input } from "@/components/ui";
+
+export function ChatBot() {
+  const [messages, setMessages] = useState<string[]>([
+    "🤖: Hola! En que puedo ayudarte?",
+  ]);
+  const [input, setInput] = useState("");
+  const [sessionid, setSessionId] = useState<null | string>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const currentSessionId = sessionStorage.getItem("sessionid");
+    if (currentSessionId) {
+      setSessionId(currentSessionId);
+    } else {
+      const newSessionId = crypto.randomUUID();
+      sessionStorage.setItem("sessionid", newSessionId);
+      setSessionId(newSessionId);
+    }
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setInput("");
+    setMessages((prev) => [...prev, `👤: ${input}`]);
+
+    setLoading(true);
+    const response = await fetch("/chat", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ message: input, sessionid }),
+    });
+
+    const { message } = await response.json();
+
+    setMessages((prev) => [...prev, `🤖: ${message}`]);
+    setLoading(false);
+  };
+
+  return (
+    <div className="p-4 border rounded shadow-lg bg-background text-foreground w-96 max-h-96">
+      <div className="overflow-y-auto max-h-60 mb-4">
+        {messages.map((msg, index) => (
+          <p className="mb-2" key={index}>
+            {msg}
+          </p>
+        ))}
+      </div>
+      <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+        <Input
+          type="text"
+          name="message"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          autoComplete="off"
+        />
+        <Button size="lg" type="submit" disabled={!input.trim() || loading}>
+          {loading ? "Pensando..." : "Enviar"}
+        </Button>
+      </form>
+    </div>
+  );
+}

src/routes/root/index.tsx

@@ -23,6 +23,7 @@ import { createRemoteItems } from "@/services/cart.service";
 import { commitSession, getSession } from "@/session.server";
 
 import AuthNav from "./components/auth-nav";
+import { ChatBot } from "./components/chatbot";
 import HeaderMain from "./components/header-main";
 
 import type { Route } from "./+types";
@@ -186,6 +187,9 @@ export default function Root({ loaderData }: Route.ComponentProps) {
           </small>
         </Container>
       </footer>
+      <div className="fixed bottom-4 right-4">
+        <ChatBot />
+      </div>
       <ScrollRestoration />
     </div>
   );

src/services/chat.service.ts

@@ -0,0 +1,28 @@
+import { type Chat, GoogleGenAI } from "@google/genai";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const ai = new GoogleGenAI({
+  apiKey: process.env.GOOGLE_API_KEY || "",
+});
+
+const chats: { [key: string]: Chat } = {};
+
+export async function sendMessage(message: string, sessionId: string) {
+  if (!chats[sessionId]) {
+    const chat = ai.chats.create({
+      model: "gemini-2.5-flash",
+      history: [],
+    });
+
+    chats[sessionId] = chat;
+  }
+
+  const chat = chats[sessionId];
+
+  const response = await chat.sendMessage({
+    message,
+  });
+  return response.text;
+}