Add LiteLLM AI API and chat UI

src/app/ai/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+
+interface Message {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export default function AIPage() {
+  const [messages, setMessages] = useState<Message[]>([
+    { role: "assistant", content: "Hi! I'm Tia - your baby care assistant. Ask me anything about your baby's health, feeding, sleep, or development!" },
+  ]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const childId = "5ad3b16a-1e0d-45ab-bc91-038397d75d0a";
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!input.trim() || loading) return;
+
+    const userMessage = input.trim();
+    setInput("");
+    setMessages((prev) => [...prev, { role: "user", content: userMessage }]);
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/ai", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          messages: [...messages, { role: "user", content: userMessage }],
+          childId,
+        }),
+      });
+
+      const data = await res.json();
+      setMessages((prev) => [...prev, { role: "assistant", content: data.reply || data.error }]);
+    } catch (err) {
+      setMessages((prev) => [...prev, { role: "assistant", content: "Sorry, something went wrong. Try again." }]);
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 flex flex-col">
+      {/* Header */}
+      <div className="p-4 flex items-center gap-4">
+        <a href="/menu" className="p-2">←</a>
+        <h1 className="text-xl font-bold">🤖 Tia AI</h1>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 pb-24 space-y-4">
+        {messages.map((msg, i) => (
+          <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+            <div
+              className={`max-w-[80%] p-3 rounded-2xl ${
+                msg.role === "user"
+                  ? "bg-rose-400 text-white"
+                  : "bg-white dark:bg-gray-800"
+              }`}
+            >
+              {msg.content}
+            </div>
+          </div>
+        ))}
+        {loading && (
+          <div className="flex justify-start">
+            <div className="bg-white dark:bg-gray-800 p-3 rounded-2xl animate-pulse">
+              Thinking...
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white/80 dark:bg-gray-900/80">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSend()}
+            placeholder="Ask about your baby..."
+            className="flex-1 p-3 border rounded-full"
+            disabled={loading}
+          />
+          <button
+            onClick={handleSend}
+            disabled={loading || !input.trim()}
+            className="p-3 bg-rose-400 text-white rounded-full disabled:opacity-50"
+          >
+            ➤
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/api/ai/route.ts

@@ -0,0 +1,82 @@
+import { NextResponse } from "next/server";
+import { sql } from "@/db";
+
+interface Message {
+  role: "user" | "assistant";
+  content: string;
+}
+
+const LITELLM_BASE_URL = process.env.OPENAI_API_BASE_URL || "http://litellm-gateway:4000/v1";
+const LITELLM_API_KEY = process.env.LITELLM_MASTER_KEY || "sk-tiger-gateway-289bf7d1cf0c0b12ff5ccf48d95ff3c3";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { messages, childId } = body;
+
+    if (!messages || !Array.isArray(messages)) {
+      return NextResponse.json({ error: "messages array required" }, { status: 400 });
+    }
+
+    // Get child's profile context
+    let context = "";
+    if (childId) {
+      const children = await sql.unsafe(
+        `SELECT name, birth_date, sex FROM children WHERE id = $1`,
+        [childId]
+      );
+      if (children.length > 0) {
+        const child = children[0];
+        const age = calculateAge(child.birth_date);
+        context = `The child's name is ${child.name}, they are ${age} old. `;
+      }
+    }
+
+    // Build messages with system prompt
+    const systemMessage = {
+      role: "system",
+      content: `You are Tia, a helpful baby care assistant. ${context} Give caring, practical advice for new parents. Keep responses brief and helpful.`,
+    };
+
+    const allMessages = [systemMessage, ...messages];
+
+    // Call LiteLLM
+    const response = await fetch(`${LITELLM_BASE_URL}/chat/completions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${LITELLM_API_KEY}`,
+      },
+      body: JSON.stringify({
+        model: "gpt-4o-mini",
+        messages: allMessages,
+        max_tokens: 500,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      return NextResponse.json({ error: error }, { status: response.status });
+    }
+
+    const data = await response.json();
+    const reply = data.choices?.[0]?.message?.content || "Sorry, I couldn't get a response.";
+
+    return NextResponse.json({ reply });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: String(error) }, { status: 500 });
+  }
+}
+
+function calculateAge(birthDate: string) {
+  const birth = new Date(birthDate);
+  const now = new Date();
+  const days = Math.floor((now.getTime() - birth.getTime()) / (1000 * 60 * 60 * 24));
+  const months = Math.floor(days / 30);
+  const years = Math.floor(months / 12);
+
+  if (years > 0) return `${years} year${years > 1 ? "s" : ""} old`;
+  if (months > 0) return `${months} month${months > 1 ? "s" : ""} old`;
+  return `${days} day${days > 1 ? "s" : ""} old`;
+}