feat(ai): implement an AI chat window for agentic resume building (#3022)

apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/basics.tsx

@@ -5,6 +5,7 @@ import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/
 import { Input } from "@reactive-resume/ui/components/input";
 import { URLInput } from "@/components/input/url-input";
 import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 import { CustomFieldsSection } from "./custom-fields";
@@ -38,6 +39,7 @@ function BasicsSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, basics);
 
 	return (
 		<form

apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/picture.tsx

@@ -18,6 +18,7 @@ import {
 } from "@reactive-resume/ui/components/input-group";
 import { ColorPicker } from "@/components/input/color-picker";
 import { useCurrentResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { getReadableErrorMessage } from "@/libs/error-message";
 import { orpc } from "@/libs/orpc/client";
 import { useAppForm } from "@/libs/tanstack-form";
@@ -73,6 +74,7 @@ function PictureSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, picture);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx

@@ -12,6 +12,7 @@ import { IconPicker } from "@/components/input/icon-picker";
 import { LevelTypeCombobox } from "@/components/level/combobox";
 import { LevelDisplay } from "@/components/level/display";
 import { useCurrentResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -45,6 +46,7 @@ function ColorSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, colors);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);
@@ -266,6 +268,7 @@ function LevelSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, levelDesign);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "@reactive-resume/ui/components/input-group";
 import { Slider } from "@reactive-resume/ui/components/slider";
 import { useCurrentResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../../shared/section-base";
 import { LayoutPages } from "./pages";
@@ -45,6 +46,7 @@ function LayoutSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, { sidebarWidth: layout.sidebarWidth });
 
 	const handleAutoSave = () => {
 		persist(form.state.values);

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/page.tsx

@@ -13,6 +13,7 @@ import { Switch } from "@reactive-resume/ui/components/switch";
 import { getLocaleOptions } from "@/components/locale/combobox";
 import { useResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
 import { Combobox } from "@/components/ui/combobox";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -46,6 +47,7 @@ function PageSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, page);
 
 	const handleAutoSave = <K extends keyof FormValues>(name: K, value: FormValues[K]) => {
 		persist({ ...form.state.values, [name]: value });

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/typography.tsx

@@ -12,6 +12,7 @@ import {
 import { Separator } from "@reactive-resume/ui/components/separator";
 import { useResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
 import { FontFamilyCombobox, FontWeightCombobox, getNextWeights } from "@/components/typography/combobox";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -47,6 +48,7 @@ function TypographySectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, typography);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);