feat: add builder ai chat overlay

Co-authored-by: amruthpillai <1134738+amruthpillai@users.noreply.github.com>

src/integrations/orpc/router/ai.ts

@@ -11,6 +11,7 @@ import pdfParserSystemPrompt from "@/integrations/ai/prompts/pdf-parser-system.m
 import pdfParserUserPrompt from "@/integrations/ai/prompts/pdf-parser-user.md?raw";
 import { defaultResumeData, resumeDataSchema } from "@/schema/resume/data";
 import { protectedProcedure } from "../context";
+import { resumeService } from "../services/resume";
 
 const aiProviderSchema = z.enum(["vercel-ai-gateway", "openai", "anthropic", "gemini", "ollama"]);
 
@@ -42,6 +43,11 @@ const aiCredentialsSchema = z.object({
 	baseURL: z.string().optional(),
 });
 
+const chatOutputSchema = z.object({
+	reply: z.string(),
+	summary: z.string().optional(),
+});
+
 const fileInputSchema = z.object({
 	name: z.string(),
 	data: z.string(), // base64 encoded
@@ -67,6 +73,50 @@ export const aiRouter = {
 			yield* stream.textStream;
 		}),
 
+	chat: protectedProcedure
+		.input(
+			z.object({
+				aiStoreData: aiCredentialsSchema,
+				resumeId: z.string(),
+				message: z.string().min(1),
+			}),
+		)
+		.handler(async ({ input, context }) => {
+			const resume = await resumeService.getById({ id: input.resumeId, userId: context.user.id });
+
+			let reply = "I’ll summarize the updates I can make to your resume.";
+			let summary = resume.data.summary.content ?? "";
+
+			try {
+				const result = await generateText({
+					model: getModel(input.aiStoreData),
+					maxRetries: 0,
+					output: Output.object({ schema: chatOutputSchema }),
+					messages: [
+						{
+							role: "system",
+							content:
+								"You are helping a user improve their resume. Respond with a short friendly reply and an improved professional summary based on the user request. Keep the summary concise and in the same language as the provided summary.",
+						},
+						{
+							role: "user",
+							content: `Current summary: ${summary || "Not provided"}\nRequest: ${input.message}`,
+						},
+					],
+				});
+
+				reply = result.output.reply;
+				summary = result.output.summary ?? summary;
+			} catch (error) {
+				console.error(error);
+			}
+
+			return {
+				reply,
+				changes: summary && summary !== resume.data.summary.content ? { summary: { content: summary } } : undefined,
+			};
+		}),
+
 	parsePdf: protectedProcedure
 		.input(
 			z.object({

src/routes/builder/$resumeId/-components/ai-chat.tsx

@@ -0,0 +1,203 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import {
+	PaperPlaneRightIcon,
+	SparkleIcon,
+	XCircleIcon,
+	XIcon,
+} from "@phosphor-icons/react";
+import { useMutation } from "@tanstack/react-query";
+import { useParams } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/animate-ui/components/buttons/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
+import { useResumeStore } from "@/components/resume/store/resume";
+import { useAIStore } from "@/integrations/ai/store";
+import { client } from "@/integrations/orpc/client";
+import { cn } from "@/utils/style";
+import { useAIChatStore } from "../-store/ai-chat";
+
+type AIChatResponse = {
+	reply: string;
+	changes?: {
+		summary?: {
+			content?: string | null;
+		};
+	};
+};
+
+export function AIChatPanel() {
+	const aiEnabled = useAIStore((state) => state.enabled);
+	const aiConfig = useAIStore((state) => ({
+		provider: state.provider,
+		model: state.model,
+		apiKey: state.apiKey,
+		baseURL: state.baseURL,
+	}));
+
+	const { resumeId } = useParams({ from: "/builder/$resumeId" });
+	const updateResumeData = useResumeStore((state) => state.updateResumeData);
+
+	const { isOpen, fabVisible, lastInteraction, messages, toggle, open, close, hideFab, addMessage, touch } =
+		useAIChatStore();
+
+	const [input, setInput] = useState("");
+
+	const canSend = useMemo(() => aiEnabled && input.trim().length > 0, [aiEnabled, input]);
+
+	const { mutateAsync: sendMessage, isPending } = useMutation({
+		mutationFn: async (payload: { message: string }) => {
+			return client.ai.chat({
+				aiStoreData: aiConfig,
+				resumeId,
+				message: payload.message,
+			}) as Promise<AIChatResponse>;
+		},
+		onSuccess: (data) => {
+			addMessage({ role: "assistant", content: data.reply });
+
+			const summary = data.changes?.summary?.content;
+			if (summary) {
+				updateResumeData((draft) => {
+					draft.summary.content = summary;
+				});
+				touch();
+				toast.success(t`Applied AI suggestion to your summary.`);
+			}
+		},
+		onError: (error: Error) => {
+			toast.error(error.message);
+		},
+	});
+
+	useEffect(() => {
+		if (!fabVisible || isOpen) return;
+		const last = lastInteraction ?? Date.now();
+		const remaining = Math.max(0, 60_000 - (Date.now() - last));
+		const timer = setTimeout(() => {
+			if (!useAIChatStore.getState().isOpen) hideFab();
+		}, remaining);
+
+		return () => clearTimeout(timer);
+	}, [fabVisible, hideFab, isOpen, lastInteraction]);
+
+	if (!aiEnabled) return null;
+
+	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (!canSend) return;
+
+		const message = input.trim();
+		setInput("");
+
+		addMessage({ role: "user", content: message });
+		touch();
+
+		await sendMessage({ message });
+	};
+
+	return (
+		<>
+			<AnimatePresence>
+				{isOpen ? (
+					<motion.aside
+						key="ai-chat-panel"
+						initial={{ opacity: 0, y: 48 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: 48 }}
+						transition={{ duration: 0.2 }}
+						className="fixed bottom-24 right-4 top-20 z-30 flex w-[380px] max-w-[90vw] flex-col rounded-xl border bg-popover shadow-xl"
+					>
+						<header className="flex items-center justify-between border-b px-4 py-3">
+							<div className="flex items-center gap-x-2 text-sm font-semibold">
+								<SparkleIcon className="text-primary" />
+								<span>
+									<Trans>Build with AI</Trans>
+								</span>
+							</div>
+							<Button size="icon" variant="ghost" onClick={() => close()}>
+								<XIcon />
+							</Button>
+						</header>
+
+						<div className="flex-1 overflow-hidden">
+							<ScrollArea className="h-full px-4 py-3">
+								<div className="space-y-3">
+									{messages.map((message) => (
+										<div
+											key={message.id}
+											className={cn(
+												"rounded-lg border px-3 py-2 text-sm",
+												message.role === "assistant" ? "bg-muted" : "bg-primary/10",
+											)}
+										>
+											<p className="whitespace-pre-wrap leading-relaxed text-foreground">{message.content}</p>
+										</div>
+									))}
+								</div>
+							</ScrollArea>
+						</div>
+
+						<form onSubmit={handleSubmit} className="space-y-2 border-t px-4 py-3">
+							<Textarea
+								minLength={1}
+								rows={3}
+								value={input}
+								placeholder={t`Tell me what to change in your resume...`}
+								onChange={(event) => setInput(event.target.value)}
+							/>
+							<div className="flex items-center justify-between gap-2">
+								<div className="flex flex-1 items-center gap-2 text-xs text-muted-foreground">
+									<SparkleIcon className="text-primary" />
+									<span className="truncate">{aiConfig.model || t`Model not set`}</span>
+								</div>
+								<Button type="submit" disabled={!canSend || isPending}>
+									{isPending ? <XCircleIcon className="animate-pulse" /> : <PaperPlaneRightIcon />}
+									<Trans>Send</Trans>
+								</Button>
+							</div>
+						</form>
+					</motion.aside>
+				) : null}
+			</AnimatePresence>
+
+			{fabVisible ? (
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					animate={{ opacity: 1, y: 0 }}
+					exit={{ opacity: 0, y: 20 }}
+					className="pointer-events-none fixed bottom-4 right-4 z-30 flex flex-col items-end gap-2"
+				>
+					<Button
+						size="icon"
+					variant="default"
+						className="pointer-events-auto shadow-lg"
+						onClick={() => {
+							toggle();
+							touch();
+						}}
+					>
+						<SparkleIcon />
+					</Button>
+				</motion.div>
+			) : null}
+
+			{!fabVisible && (
+				<Button
+					className="hidden"
+					variant="ghost"
+					size="icon"
+					onClick={() => {
+						open();
+						touch();
+					}}
+				>
+					<SparkleIcon />
+				</Button>
+			)}
+		</>
+	);
+}

src/routes/builder/$resumeId/-components/header.tsx

@@ -7,6 +7,7 @@ import {
 	LockSimpleIcon,
 	LockSimpleOpenIcon,
 	PencilSimpleLineIcon,
+	SparkleIcon,
 	SidebarSimpleIcon,
 	TrashSimpleIcon,
 } from "@phosphor-icons/react";
@@ -24,13 +25,17 @@ import {
 import { useResumeStore } from "@/components/resume/store/resume";
 import { useDialogStore } from "@/dialogs/store";
 import { useConfirm } from "@/hooks/use-confirm";
+import { useAIStore } from "@/integrations/ai/store";
 import { orpc } from "@/integrations/orpc/client";
 import { useBuilderSidebar } from "../-store/sidebar";
+import { useAIChatStore } from "../-store/ai-chat";
 
 export function BuilderHeader() {
 	const name = useResumeStore((state) => state.resume.name);
 	const isLocked = useResumeStore((state) => state.resume.isLocked);
 	const toggleSidebar = useBuilderSidebar((state) => state.toggleSidebar);
+	const aiEnabled = useAIStore((state) => state.enabled);
+	const openAIChat = useAIChatStore((state) => state.open);
 
 	return (
 		<div className="absolute inset-x-0 top-0 z-10 flex h-14 items-center justify-between border-b bg-popover px-1.5">
@@ -47,6 +52,12 @@ export function BuilderHeader() {
 				<span className="mr-2.5 text-muted-foreground">/</span>
 				<h2 className="flex-1 truncate font-medium">{name}</h2>
 				{isLocked && <LockSimpleIcon className="ml-2 text-muted-foreground" />}
+				{aiEnabled ? (
+					<Button variant="outline" size="sm" className="ml-2" onClick={() => openAIChat()}>
+						<SparkleIcon className="mr-2" />
+						<Trans>Build with AI</Trans>
+					</Button>
+				) : null}
 				<BuilderHeaderDropdown />
 			</div>
 

src/routes/builder/$resumeId/-store/ai-chat.ts

@@ -0,0 +1,55 @@
+import { create } from "zustand/react";
+
+export type AIChatMessage = {
+	id: string;
+	role: "assistant" | "user";
+	content: string;
+};
+
+type AIChatState = {
+	isOpen: boolean;
+	fabVisible: boolean;
+	lastInteraction: number | null;
+	messages: AIChatMessage[];
+};
+
+type AIChatActions = {
+	open: () => void;
+	close: () => void;
+	toggle: () => void;
+	hideFab: () => void;
+	touch: () => void;
+	addMessage: (message: Omit<AIChatMessage, "id"> & { id?: string }) => void;
+	resetMessages: () => void;
+};
+
+type AIChatStore = AIChatState & AIChatActions;
+
+const createId = () => (crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2));
+
+const initialMessages: AIChatMessage[] = [
+	{
+		id: "welcome",
+		role: "assistant",
+		content: "Hi! I can help update your resume. Tell me what you want to change.",
+	},
+];
+
+export const useAIChatStore = create<AIChatStore>((set) => ({
+	isOpen: false,
+	fabVisible: false,
+	lastInteraction: null,
+	messages: initialMessages,
+	open: () => set(() => ({ isOpen: true, fabVisible: true, lastInteraction: Date.now() })),
+	close: () => set(() => ({ isOpen: false, fabVisible: true, lastInteraction: Date.now() })),
+	toggle: () => set((state) => ({ isOpen: !state.isOpen, fabVisible: true, lastInteraction: Date.now() })),
+	hideFab: () => set(() => ({ fabVisible: false })),
+	touch: () => set(() => ({ lastInteraction: Date.now(), fabVisible: true })),
+	addMessage: (message) =>
+		set((state) => ({
+			messages: [...state.messages, { ...message, id: message.id ?? createId() }],
+			fabVisible: true,
+			lastInteraction: Date.now(),
+		})),
+	resetMessages: () => set(() => ({ messages: [...initialMessages] })),
+}));

src/routes/builder/$resumeId/route.tsx

@@ -13,6 +13,7 @@ import { useResumeStore } from "@/components/resume/store/resume";
 import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@/components/ui/resizable";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { orpc } from "@/integrations/orpc/client";
+import { AIChatPanel } from "./-components/ai-chat";
 import { BuilderHeader } from "./-components/header";
 import { BuilderSidebarLeft } from "./-sidebar/left";
 import { BuilderSidebarRight } from "./-sidebar/right";
@@ -125,6 +126,8 @@ function BuilderLayout({ initialLayout, ...props }: BuilderLayoutProps) {
 					<BuilderSidebarRight />
 				</ResizablePanel>
 			</ResizableGroup>
+
+			<AIChatPanel />
 		</div>
 	);
 }