feat: initial working implementation

Author: moonmeister

src/app/api/chat/route.js

@@ -1,10 +1,56 @@
-// import { env } from "node:process";
+import { env } from "node:process";
 import { createVertex } from "@ai-sdk/google-vertex";
-import { streamText } from "ai";
+import { streamText, convertToCoreMessages } from "ai";
 import { StatusCodes, ReasonPhrases } from "http-status-codes";
-import { getContext } from "@/lib/smart-search.mjs";
+import { smartSearchTool } from "@/lib/rag.mjs";
 
-const vertex = createVertex();
+console.log("Initializing Google Vertex AI...");
+// Ensure all required environment variables are set
+if (!env.GOOGLE_VERTEX_PROJECT) {
+	throw new Error("GOOGLE_VERTEX_PROJECT is not set");
+}
+
+if (!env.GOOGLE_VERTEX_LOCATION) {
+	throw new Error("GOOGLE_VERTEX_LOCATION is not set");
+}
+
+if (!env.GOOGLE_VERTEX_CLIENT_EMAIL) {
+	throw new Error("GOOGLE_VERTEX_CLIENT_EMAIL is not set");
+}
+
+if (!env.GOOGLE_VERTEX_PRIVATE_KEY) {
+	throw new Error("GOOGLE_VERTEX_PRIVATE_KEY is not set");
+}
+
+if (!env.GOOGLE_VERTEX_PRIVATE_KEY.includes("-----BEGIN PRIVATE KEY-----")) {
+	throw new Error("GOOGLE_VERTEX_PRIVATE_KEY is not formatted correctly");
+}
+
+const vertex = createVertex({
+	project: env.GOOGLE_VERTEX_PROJECT,
+	location: env.GOOGLE_VERTEX_LOCATION,
+	googleAuthOptions: {
+		credentials: {
+			client_email: env.GOOGLE_VERTEX_CLIENT_EMAIL,
+			private_key: env.GOOGLE_VERTEX_PRIVATE_KEY.replaceAll(
+				String.raw`\n`,
+				"\n",
+			), // Ensure newlines are correctly formatted
+		},
+	},
+});
+
+const smartSearchPrompt = `
+    - You can use the 'smartSearchTool' to find information relating to Faust.
+      - WP Engine Smart Search is a powerful tool for finding information about Faust.
+      - After the 'smartSearchTool' provides results (even if it's an error or no information found)
+      - You MUST then formulate a conversational response to the user based on those results but also use the tool if the users query is deemed plausible.
+        - If search results are found, summarize them for the user.
+        - If no information is found or an error occurs, inform the user clearly.`;
+
+const systemPromptContent = `
+    - You are a friendly and helpful AI assistant
+    - Do not invent information. Stick to the data provided by the tool.`;
 
 export async function POST(req) {
 	try {
@@ -16,74 +62,36 @@ export async function POST(req) {
 			});
 		}
 
-		const [latestMessage] = messages.slice(-1);
-		const previousMessages = messages.slice(-11, -1);
-
-		const promptContext = await getContext(latestMessage.content);
-
-		if (
-			!promptContext ||
-			!promptContext.data ||
-			!promptContext.data.similarity
-		) {
-			console.error(
-				"No context found for the latest message:",
-				latestMessage.content,
-				"Context response:",
-				promptContext,
-			);
-			return new Response(ReasonPhrases.INTERNAL_SERVER_ERROR, {
-				status: StatusCodes.INTERNAL_SERVER_ERROR,
-			});
-		}
-
-		const messageContext = promptContext.data.similarity.docs.map((doc) => {
-			return `
-		ID: ${doc.id}
-		Title: ${doc.data.post_title}
-		Content: ${doc.data.post_content}
-		SearchScore: ${doc.score}
-		`;
-		});
-
-		const prompt = {
-			role: "assistant",
-			content: `You are a AI assistant that provides information about Faust.js and headless WordPress.
-			AI assistant is a brand new, powerful, human-like artificial intelligence.
-      The traits of AI include expert knowledge, helpfulness, cleverness, and articulateness.
-      AI is a well-behaved and well-mannered individual.
-      AI is always friendly, kind, and inspiring, and he is eager to provide vivid and thoughtful responses to the user.
-      AI has the sum of all knowledge in their brain, and is able to accurately answer nearly any question about any topic in conversation.
-      AI assistant is a big fan of WP Engine Smart Search.
-      AI assistant uses WP Engine Smart Search to provide the most accurate and relevant information to the user.
-      AI assistant data from WP Engine Smart Search is based on TV Shows.
-      START CONTEXT BLOCK
-      ${messageContext.join("----------------\n\n")}
-      END OF CONTEXT BLOCK
-
-      START OF HISTORY BLOCK
-      ${JSON.stringify(previousMessages)}
-      END OF HISTORY BLOCK
-      AI assistant will take into account any CONTEXT BLOCK that is provided in a conversation.
-      AI assistant will take into account any HISTORY BLOCK that is provided in a conversation.
-      If the context does not provide the answer to question, the AI assistant will say, "I'm sorry, but I don't know the answer to that question".
-      AI assistant will not apologize for previous responses, but instead will indicated new information was gained.
-      AI assistant will not invent anything that is not drawn directly from the context.
-      AI assistant will answer coding questions.
-		`,
-		};
-
-		console.log("Prompt context:", prompt);
+		const coreMessages = convertToCoreMessages(messages);
 
 		const response = await streamText({
-			model: vertex.languageModel("gemini-2.0-flash-exp"),
-			prompt,
-			messages: messages.filter((message) => message.role === "user"),
+			model: vertex("gemini-2.5-pro"),
+			system: [systemPromptContent, smartSearchPrompt].join("\n"),
+			messages: coreMessages,
+			tools: {
+				smartSearchTool,
+			},
+			onError: (error) => {
+				console.error("Error during streaming:", error);
+				return new Response(ReasonPhrases.INTERNAL_SERVER_ERROR, {
+					status: StatusCodes.INTERNAL_SERVER_ERROR,
+				});
+			},
+			onToolCall: async (toolCall) => {
+				console.log("Tool call initiated:", toolCall);
+			},
+			onStepFinish: async (result) => {
+				console.log("Step finished:", result);
+				if (result.usage) {
+					console.log(
+						`[Token Usage] Prompt tokens: ${result.usage.promptTokens}, Completion tokens: ${result.usage.completionTokens}, Total tokens: ${result.usage.totalTokens}`,
+					);
+				}
+			},
+			maxSteps: 5,
 		});
 
-		console.log("Response from AI:", response);
-
-		return response.toTextStreamResponse();
+		return response.toDataStreamResponse();
 	} catch (error) {
 		console.error("Error in chat API:", error);
 		return new Response(ReasonPhrases.INTERNAL_SERVER_ERROR, {

src/components/chat/chat-button.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import {
+	HiOutlineChatBubbleLeftRight,
+	HiOutlineXCircle,
+} from "react-icons/hi2";
+import { useChatDialog } from "./state";
+
+export default function ChatButton() {
+	const { dialog } = useChatDialog();
+	const [isOpen, setIsOpen] = useState(false);
+
+	useEffect(() => {
+		const dialogElement = dialog.current;
+
+		const handleDialogToggle = () => {
+			setIsOpen(!isOpen);
+		};
+
+		dialogElement?.addEventListener("toggle", handleDialogToggle);
+
+		return () => {
+			dialogElement?.removeEventListener("toggle", handleDialogToggle);
+		};
+	}, [dialog, isOpen, setIsOpen]);
+
+	return (
+		<button
+			id="chat-button"
+			type="button"
+			className="fixed right-4 bottom-4 z-50 flex h-12 w-12 animate-pulse cursor-pointer items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-transform hover:scale-105 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 md:right-8 md:bottom-12"
+			aria-label={isOpen ? "Open chat" : "Close chat"}
+			onClick={() => {
+				return isOpen ? dialog.current?.close() : dialog.current?.show();
+			}}
+		>
+			<span className="sr-only">{isOpen ? "Open chat" : "Close chat"}</span>
+			{isOpen ? (
+				<HiOutlineXCircle className="h-6 w-6" />
+			) : (
+				<HiOutlineChatBubbleLeftRight className="h-6 w-6" />
+			)}
+		</button>
+	);
+}

src/components/chat/chat-dialog.jsx

@@ -0,0 +1,65 @@
+import { useChat } from "ai/react";
+import { useEffect } from "react";
+import { HiXCircle } from "react-icons/hi2";
+import { useChatDialog } from "./state";
+import Chat from "@/components/chat/chat";
+import "./chat.css";
+
+export default function ChatDialog() {
+	const { dialog } = useChatDialog();
+	const {
+		messages,
+		input,
+		handleInputChange,
+		handleSubmit,
+		setMessages,
+		status,
+	} = useChat();
+
+	useEffect(() => {
+		if (messages.length === 0) {
+			setMessages([
+				{
+					role: "assistant",
+					content: "Welcome to the Smart Search chatbot!",
+					id: "welcome",
+				},
+			]);
+		}
+	}, [messages, setMessages]);
+
+	return (
+		<dialog
+			ref={dialog}
+			id="chat-dialog"
+			role="application"
+			className="fixed right-4 bottom-8 left-auto max-w-sm overflow-visible rounded-lg bg-gray-800 p-4 md:right-8 md:bottom-32 md:p-6"
+			// eslint-disable-next-line react/no-unknown-property
+			closedby="any"
+		>
+			<button
+				// eslint-disable-next-line react/no-unknown-property
+				formmethod="dialog"
+				type="button"
+				form="chat-form"
+				aria-label="Close chat"
+				className="absolute -top-2 -right-2 text-gray-500 hover:text-gray-300"
+				onClick={() => {
+					dialog.current?.close();
+				}}
+			>
+				<span className="sr-only">Close chat</span>
+				<HiXCircle className="h-6 w-6" />
+			</button>
+			<section className="bg-slate-950">
+				<Chat
+					input={input}
+					handleInputChange={handleInputChange}
+					handleMessageSubmit={handleSubmit}
+					messages={messages}
+					status={status}
+				/>
+			</section>
+		</dialog>
+	);
+}

src/components/chat/chat-input.jsx

@@ -0,0 +1,27 @@
+import { HiOutlinePaperAirplane } from "react-icons/hi2";
+
+export default function Input({ input, handleInputChange }) {
+	return (
+		<div className="mx-auto w-full max-w-2xl rounded-xl bg-gray-800 p-4 shadow-lg">
+			<input
+				type="text"
+				value={input}
+				onChange={handleInputChange}
+				autoFocus
+				placeholder="Ask Smart Search about Faust..."
+				className="text-md mb-3 w-full bg-transparent text-gray-200 placeholder-gray-500 focus:outline-none"
+			/>
+
+			<div className="flex">
+				<button
+					type="submit"
+					className="ml-auto rounded-md p-1 transition-colors hover:bg-gray-700"
+					aria-label="Send message"
+					disabled={!input.trim()}
+				>
+					<HiOutlinePaperAirplane className="h-5 w-5" />
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/chat/chat.css

@@ -0,0 +1,27 @@
+.gemini-text {
+	font-family:
+		Google Sans,
+		Helvetica Neue,
+		sans-serif;
+	/* Choose a font that matches, Arial is a common sans-serif */
+	/* font-size: 100px; */
+	/* Adjust size as needed */
+	/* Gradient: Adjust colors and angles as needed */
+	background: linear-gradient(to right, #6b50d2, #c25cb6, #ea668a);
+	/*
+    Color Hex codes approximated from the image:
+    Left (Blue-Purple): #6B50D2
+    Middle (Pink-Purple): #C25CB6
+    Right (Reddish-Pink): #EA668A
+  */
+
+	/* Crucial properties for text gradient */
+	-webkit-background-clip: text;
+	/* For Safari/Chrome */
+	background-clip: text;
+	color: transparent;
+	/* Makes the original text color transparent */
+
+	/* Optional: A slight text shadow can make it pop on some backgrounds */
+	/* text-shadow: 2px 2px 4px rgba(0,0,0,0.1); */
+}

src/components/chat/chat.jsx

@@ -1,36 +1,26 @@
-// import { Message } from "ai/react";
-import Messages from "./Messages";
-
-// interface Chat {
-//   input: string;
-//   handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
-//   handleMessageSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-//   messages: Message[];
-// }
+import { HiOutlineArrowPath } from "react-icons/hi2";
+import ChatInput from "./chat-input";
+import Messages from "./messages";
 
 export default function Chat({
 	input,
 	handleInputChange,
 	handleMessageSubmit,
+	status,
 	messages,
 }) {
 	return (
-		<div id="chat" className="mx-2 flex w-full flex-col">
+		<div id="chat" className="flex h-full w-full flex-col">
 			<Messages messages={messages} />
+			{status === "submitted" && (
+				<HiOutlineArrowPath className="mx-auto h-5 w-5 animate-spin" />
+			)}
 			<form
+				id="chat-form"
 				onSubmit={handleMessageSubmit}
-				className="relative mt-5 mb-5 ml-1 rounded-lg bg-gray-500"
+				className="relative mt-5 mb-5 ml-1 rounded-lg"
 			>
-				<input
-					type="text"
-					className="input-glow focus:shadow-outline w-full appearance-none rounded border border-gray-100 bg-gray-100 px-3 py-2 pr-10 pl-3 leading-tight text-gray-700 transition-shadow duration-200 focus:outline-none"
-					value={input}
-					onChange={handleInputChange}
-				/>
-
-				<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
-					Press ⮐ to send
-				</span>
+				<ChatInput input={input} handleInputChange={handleInputChange} />
 			</form>
 		</div>
 	);