From 75febaf3cf772e847e98a0bd8266941ac9ccb008 Mon Sep 17 00:00:00 2001
From: Sid-80 <siddharthbramhecha@gmail.com>
Date: Fri, 5 Jul 2024 22:06:03 +0530
Subject: [PATCH 1/4] feat: Multi-Step Form

---
 app/cover-letter/page.tsx      |  14 ++
 components/AuthButton.tsx      |  33 +++--
 components/CoverLetterForm.tsx | 262 +++++++++++++++++++++++++++++++++
 components/cover-letter.tsx    |  69 +++++++++
 components/ui/form.tsx         | 176 ++++++++++++++++++++++
 components/ui/label.tsx        |  26 ++++
 components/ui/textarea.tsx     |  24 +++
 package-lock.json              | 205 ++++++++++++++++++++------
 package.json                   |   6 +-
 9 files changed, 762 insertions(+), 53 deletions(-)
 create mode 100644 app/cover-letter/page.tsx
 create mode 100644 components/CoverLetterForm.tsx
 create mode 100644 components/cover-letter.tsx
 create mode 100644 components/ui/form.tsx
 create mode 100644 components/ui/label.tsx
 create mode 100644 components/ui/textarea.tsx

diff --git a/app/cover-letter/page.tsx b/app/cover-letter/page.tsx
new file mode 100644
index 0000000..d062bf6
--- /dev/null
+++ b/app/cover-letter/page.tsx
@@ -0,0 +1,14 @@
+import CoverLetter from "@/components/cover-letter";
+import { supabaseServer } from "@/utils/supabase/server";
+import React from "react";
+
+export default async function Page() {
+  const supabase = supabaseServer();
+  const { data } = await supabase.auth.getUser();
+
+  return (
+    <div>
+      <CoverLetter user={data.user} />
+    </div>
+  );
+}
diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx
index bf89809..c8139ca 100644
--- a/components/AuthButton.tsx
+++ b/components/AuthButton.tsx
@@ -4,9 +4,10 @@ import { Button } from "./ui/button";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { supabaseBrowser } from "@/utils/supabase/client";
 import { User } from "@supabase/supabase-js";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { IconCubeUnfolded, IconLogout } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 
 type AuthButtonProps = {
   user: User | null;
@@ -22,6 +23,7 @@ export default function AuthButton({
   className,
 }: AuthButtonProps) {
   const router = useRouter();
+  const pathname = usePathname();
   const [isLoading, setLoading] = useState(false);
 
   const handleLoginWithGithub = () => {
@@ -44,15 +46,26 @@ export default function AuthButton({
   };
 
   return user ? (
-    <Button
-      variant="newDefault"
-      className={`animate-shimmer h-10 ${className}`}
-      disabled={isLoading}
-      onClick={handleLogout}
-    >
-      <IconLogout stroke={2} className="mr-2" />
-      {isLoading ? <div className="loader1"></div> : "Logout"}
-    </Button>
+    <>
+      {pathname.includes("resume") && (
+        <Link
+          href={"/cover-letter"}
+          rel="noopener noreferrer"
+          className="text-navbarSecondary hover:text-primary font-semibold transition md:block hidden dark:text-white"
+        >
+          Cover-Letter
+        </Link>
+      )}
+      <Button
+        variant="newDefault"
+        className={`animate-shimmer h-10 ${className}`}
+        disabled={isLoading}
+        onClick={handleLogout}
+      >
+        <IconLogout stroke={2} className="mr-2" />
+        {isLoading ? <div className="loader1"></div> : "Logout"}
+      </Button>
+    </>
   ) : (
     <Button
       variant="newDefault"
diff --git a/components/CoverLetterForm.tsx b/components/CoverLetterForm.tsx
new file mode 100644
index 0000000..0e20619
--- /dev/null
+++ b/components/CoverLetterForm.tsx
@@ -0,0 +1,262 @@
+"use client";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "./ui/textarea";
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+import { IconArrowBigRight } from "@tabler/icons-react";
+import { SetStateAction } from "react";
+
+const formSchema = z.object({
+  jobDescription: z
+    .string()
+    .min(10, { message: "Detailed job description required!!" })
+    .max(1000),
+  project: z.string().min(10, { message: "Project required!!" }).max(1000),
+  skills: z.string().min(10, { message: "Skills required!!" }).max(1000),
+  experience: z
+    .string()
+    .min(10, { message: "Experinece required!!" })
+    .max(1000),
+});
+
+type Props = {
+  isJobDescription: boolean;
+  isResumeDetails: boolean;
+  isSubmit: boolean;
+  setIsJobDescription: React.Dispatch<SetStateAction<boolean>>;
+  setIsResumeDetails: React.Dispatch<SetStateAction<boolean>>;
+  setIsSubmit: React.Dispatch<SetStateAction<boolean>>;
+};
+
+export default function CoverLetterForm({
+  isJobDescription,
+  isResumeDetails,
+  isSubmit,
+  setIsJobDescription,
+  setIsSubmit,
+  setIsResumeDetails,
+}: Props) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      jobDescription: "",
+      project: "",
+      skills: "",
+      experience: "",
+    },
+  });
+
+  async function handleNextClick(firstForm: boolean, secForm: boolean) {
+    if (firstForm) {
+      const isValid = await form.trigger("jobDescription");
+      if (isValid) {
+        setIsJobDescription(false);
+        setIsResumeDetails(true);
+      } else {
+        setIsJobDescription(true);
+      }
+    } else {
+      const isValid = await form.trigger(["project", "skills", "experience"]);
+      if (isValid) {
+        setIsResumeDetails(false);
+        setIsSubmit(true);
+      } else {
+        setIsResumeDetails(true);
+      }
+    }
+  }
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values);
+  }
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-8 w-[80%] h-full p-2 md:p-10"
+      >
+        {isJobDescription && (
+          <>
+            <FormField
+              control={form.control}
+              name="jobDescription"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Job Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[400px]"
+                      placeholder="Detailed Job description with requirements..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              variant={"secondary"}
+              onClick={() => handleNextClick(true, false)}
+              className="flex gap-1"
+              type="button"
+            >
+              Next <ArrowRightIcon className="w-5 h-5" />{" "}
+            </Button>
+          </>
+        )}
+        {isResumeDetails && (
+          <>
+            <FormField
+              control={form.control}
+              name="skills"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Projects</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[100px]"
+                      placeholder="Skills..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="project"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Projects</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[300px]"
+                      placeholder="Projects..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="experience"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Experience</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[400px]"
+                      placeholder="Experience..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              variant={"secondary"}
+              onClick={() => handleNextClick(false, true)}
+              className="flex gap-1"
+              type="button"
+            >
+              Next <ArrowRightIcon className="w-5 h-5" />{" "}
+            </Button>
+          </>
+        )}
+        {isSubmit && (
+          <>
+            <FormField
+              control={form.control}
+              name="jobDescription"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Job Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[100px]"
+                      placeholder="Job Description..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="skills"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Projects</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[100px]"
+                      placeholder="Skills..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="project"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Projects</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[300px]"
+                      placeholder="Projects..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="experience"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Experience</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="h-[400px]"
+                      placeholder="Experience..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button className="flex gap-1" type="submit">
+              Submit
+            </Button>
+          </>
+        )}
+      </form>
+    </Form>
+  );
+}
diff --git a/components/cover-letter.tsx b/components/cover-letter.tsx
new file mode 100644
index 0000000..39e6db7
--- /dev/null
+++ b/components/cover-letter.tsx
@@ -0,0 +1,69 @@
+"use client";
+import { User } from "@supabase/supabase-js";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { Button } from "./ui/button";
+import CoverLetterForm from "./CoverLetterForm";
+
+type Props = {
+  user: User | null;
+};
+
+export default function CoverLetter({ user }: Props) {
+  const router = useRouter();
+  const [isJobDescription, setIsJobDescription] = useState(true);
+  const [isResume, setIsResume] = useState(false);
+  const [isSubmit, setIsSubmit] = useState(false);
+
+  if (user === null) {
+    router.push("/");
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="w-full p-2">
+        <div className="flex w-full items-center justify-center">
+          <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
+          <Button
+            className={`${
+              !isJobDescription ? "bg-[#051129] border-gray-400 border" : ""
+            }`}
+            variant={"newDefault"}
+          >
+            1.Job Description
+          </Button>
+          <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
+          <Button
+            className={`${
+              !isResume ? "bg-[#051129] border-gray-400 border" : ""
+            }`}
+            variant={"newDefault"}
+          >
+            2.Resume
+          </Button>
+          <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
+          <Button
+            className={`${
+              !isSubmit ? "bg-[#051129] border-gray-400 border" : ""
+            }`}
+            variant={"newDefault"}
+          >
+            3.Submit
+          </Button>
+          <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
+        </div>
+
+        <div className="flex flex-1 items-center justify-center">
+          <CoverLetterForm
+            isJobDescription={isJobDescription}
+            isResumeDetails={isResume}
+            isSubmit={isSubmit}
+            setIsResumeDetails={setIsResume}
+            setIsJobDescription={setIsJobDescription}
+            setIsSubmit={setIsSubmit}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 0000000..f6afdaf
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..d1258e4
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/package-lock.json b/package-lock.json
index c5be4f5..d538259 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,15 @@
       "name": "git-re",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^3.8.0",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.0.3",
-        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@studio-freight/lenis": "^1.0.42",
@@ -49,6 +51,7 @@
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18",
         "react-github-calendar": "^4.1.6",
+        "react-hook-form": "^7.52.1",
         "react-icons": "^5.2.1",
         "react-scroll": "^1.9.0",
         "recharts": "^2.12.7",
@@ -57,6 +60,7 @@
         "tailwindcss-animate": "^1.0.7",
         "twin.macro": "^3.4.1",
         "vaul": "^0.9.1",
+        "zod": "^3.23.8",
         "zustand": "^4.5.2"
       },
       "devDependencies": {
@@ -428,6 +432,14 @@
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.8.0.tgz",
+      "integrity": "sha512-8BY7nM+QhMlGgYOb5Mxa6ZuHRYRvAZJ5LQ7+SxMv1CFGrqvNZajoa1ipEvdnIPllEcQ9R90oBNiRUUi8rj6KPQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -953,6 +965,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -1204,23 +1234,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
-      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1448,6 +1461,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
+      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
@@ -1488,6 +1545,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
@@ -1590,6 +1665,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
@@ -1914,23 +2007,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
-      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -2102,16 +2178,29 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
-      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2187,6 +2276,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -6769,6 +6876,21 @@
         "react-dom": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.52.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz",
+      "integrity": "sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@@ -8391,7 +8513,6 @@
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
-      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index c4e9fe1..885f3e1 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.8.0",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@studio-freight/lenis": "^1.0.42",
@@ -50,6 +52,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "react-github-calendar": "^4.1.6",
+    "react-hook-form": "^7.52.1",
     "react-icons": "^5.2.1",
     "react-scroll": "^1.9.0",
     "recharts": "^2.12.7",
@@ -58,6 +61,7 @@
     "tailwindcss-animate": "^1.0.7",
     "twin.macro": "^3.4.1",
     "vaul": "^0.9.1",
+    "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

From fa91eeff846d8a57b0864ea34373f313d210093b Mon Sep 17 00:00:00 2001
From: Sid-80 <siddharthbramhecha@gmail.com>
Date: Mon, 8 Jul 2024 18:59:36 +0530
Subject: [PATCH 2/4] feat: changes ui

---
 components/CoverLetterForm.tsx |  7 ++-----
 components/cover-letter.tsx    | 14 ++++++++++----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/CoverLetterForm.tsx b/components/CoverLetterForm.tsx
index 0e20619..4eccb55 100644
--- a/components/CoverLetterForm.tsx
+++ b/components/CoverLetterForm.tsx
@@ -6,23 +6,20 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { Textarea } from "./ui/textarea";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
-import { IconArrowBigRight } from "@tabler/icons-react";
 import { SetStateAction } from "react";
 
 const formSchema = z.object({
   jobDescription: z
     .string()
     .min(10, { message: "Detailed job description required!!" })
-    .max(1000),
+    .max(10000),
   project: z.string().min(10, { message: "Project required!!" }).max(1000),
   skills: z.string().min(10, { message: "Skills required!!" }).max(1000),
   experience: z
@@ -251,7 +248,7 @@ export default function CoverLetterForm({
                 </FormItem>
               )}
             />
-            <Button className="flex gap-1" type="submit">
+            <Button className="flex gap-1 text-white" type="submit">
               Submit
             </Button>
           </>
diff --git a/components/cover-letter.tsx b/components/cover-letter.tsx
index 39e6db7..b750803 100644
--- a/components/cover-letter.tsx
+++ b/components/cover-letter.tsx
@@ -22,11 +22,13 @@ export default function CoverLetter({ user }: Props) {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full p-2">
-        <div className="flex w-full items-center justify-center">
+        <div className="flex w-full my-10 items-center justify-center">
           <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
           <Button
             className={`${
-              !isJobDescription ? "bg-[#051129] border-gray-400 border" : ""
+              !isJobDescription
+                ? "dark:bg-[#051129] bg-blue-400 border-gray-400 border"
+                : ""
             }`}
             variant={"newDefault"}
           >
@@ -35,7 +37,9 @@ export default function CoverLetter({ user }: Props) {
           <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
           <Button
             className={`${
-              !isResume ? "bg-[#051129] border-gray-400 border" : ""
+              !isResume
+                ? "dark:bg-[#051129] bg-blue-400 border-gray-400 border"
+                : ""
             }`}
             variant={"newDefault"}
           >
@@ -44,7 +48,9 @@ export default function CoverLetter({ user }: Props) {
           <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
           <Button
             className={`${
-              !isSubmit ? "bg-[#051129] border-gray-400 border" : ""
+              !isSubmit
+                ? "dark:bg-[#051129] bg-blue-400 border-gray-400 border"
+                : ""
             }`}
             variant={"newDefault"}
           >

From 59c3f1f7ed7840dd96182bc90e1ded610fe7ee6f Mon Sep 17 00:00:00 2001
From: Sid-80 <siddharthbramhecha@gmail.com>
Date: Wed, 17 Jul 2024 17:20:41 +0530
Subject: [PATCH 3/4] feat: Gemini Integaretion

---
 .env.example                   |   2 +
 components/CoverLetterForm.tsx |  29 ++-
 components/cover-letter.tsx    |   7 +
 package-lock.json              | 332 ++++++++++++++++++++++++++++++++-
 package.json                   |   1 +
 utils/Gemini.ts                |  54 ++++++
 6 files changed, 418 insertions(+), 7 deletions(-)
 create mode 100644 utils/Gemini.ts

diff --git a/.env.example b/.env.example
index e8065af..3948e79 100644
--- a/.env.example
+++ b/.env.example
@@ -4,6 +4,8 @@ NEXT_PUBLIC_URL=https://git-re.vercel.app/
 NEXT_PUBLIC_UPSTASH_REDIS_URL=
 NEXT_PUBLIC_UPSTASH_REDIS_TOKEN=
 
+NEXT_PUBLIC_GEMINI_API_KEY=your-gemini-api-key
+
 # Generate the token from https://github.com/settings/tokens?type=beta
 # Repository Access to public repositories (read-only)
 NEXT_PUBLIC_GITHUB_TOKEN=
diff --git a/components/CoverLetterForm.tsx b/components/CoverLetterForm.tsx
index 4eccb55..d507951 100644
--- a/components/CoverLetterForm.tsx
+++ b/components/CoverLetterForm.tsx
@@ -14,6 +14,7 @@ import {
 import { Textarea } from "./ui/textarea";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
 import { SetStateAction } from "react";
+import { getCoverLetter } from "@/utils/Gemini";
 
 const formSchema = z.object({
   jobDescription: z
@@ -34,7 +35,10 @@ type Props = {
   isSubmit: boolean;
   setIsJobDescription: React.Dispatch<SetStateAction<boolean>>;
   setIsResumeDetails: React.Dispatch<SetStateAction<boolean>>;
+  setIsResponseGenerated: React.Dispatch<SetStateAction<boolean>>;
+  setIsError: React.Dispatch<SetStateAction<boolean>>;
   setIsSubmit: React.Dispatch<SetStateAction<boolean>>;
+  setResponse: React.Dispatch<SetStateAction<string>>;
 };
 
 export default function CoverLetterForm({
@@ -44,6 +48,9 @@ export default function CoverLetterForm({
   setIsJobDescription,
   setIsSubmit,
   setIsResumeDetails,
+  setIsResponseGenerated,
+  setIsError,
+  setResponse,
 }: Props) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -75,11 +82,25 @@ export default function CoverLetterForm({
     }
   }
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
     // Do something with the form values.
     // ✅ This will be type-safe and validated.
-    console.log(values);
-  }
+    const { jobDescription, project, skills, experience } = values;
+
+    try {
+      const res = await getCoverLetter({
+        jobDescription,
+        project,
+        skills,
+        experience,
+      });
+
+      console.log(res);
+    } catch (err) {
+      setIsError(true);
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -122,7 +143,7 @@ export default function CoverLetterForm({
               name="skills"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Projects</FormLabel>
+                  <FormLabel>Skills</FormLabel>
                   <FormControl>
                     <Textarea
                       className="h-[100px]"
diff --git a/components/cover-letter.tsx b/components/cover-letter.tsx
index b750803..8dbd4e0 100644
--- a/components/cover-letter.tsx
+++ b/components/cover-letter.tsx
@@ -15,6 +15,10 @@ export default function CoverLetter({ user }: Props) {
   const [isResume, setIsResume] = useState(false);
   const [isSubmit, setIsSubmit] = useState(false);
 
+  const [isResponseGenerated, setIsResponseGenerated] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [response, setResponse] = useState("");
+
   if (user === null) {
     router.push("/");
   }
@@ -61,11 +65,14 @@ export default function CoverLetter({ user }: Props) {
 
         <div className="flex flex-1 items-center justify-center">
           <CoverLetterForm
+            setIsError={setIsError}
+            setIsResponseGenerated={setIsResponseGenerated}
             isJobDescription={isJobDescription}
             isResumeDetails={isResume}
             isSubmit={isSubmit}
             setIsResumeDetails={setIsResume}
             setIsJobDescription={setIsJobDescription}
+            setResponse={setResponse}
             setIsSubmit={setIsSubmit}
           />
         </div>
diff --git a/package-lock.json b/package-lock.json
index 6700d66..4518ddd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "git-re",
       "version": "0.1.0",
       "dependencies": {
-        "@hookform/resolvers": "^3.8.0",
+        "@google/generative-ai": "^0.15.0",
         "@hookform/resolvers": "^3.8.0",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-avatar": "^1.1.0",
@@ -16,11 +16,9 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
-        "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.1.0",
-        "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@studio-freight/lenis": "^1.0.42",
@@ -427,6 +425,14 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
+    "node_modules/@google/generative-ai": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.15.0.tgz",
+      "integrity": "sha512-zs37judcTYFJf1U7tnuqnh7gdzF6dcWj9pNRxjA5JTONRoiQ0htrRdbefRFiewOIfXwhun5t9hbd2ray7812eQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -2731,6 +2737,326 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
diff --git a/package.json b/package.json
index fe14e5d..6681683 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@google/generative-ai": "^0.15.0",
     "@hookform/resolvers": "^3.8.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
diff --git a/utils/Gemini.ts b/utils/Gemini.ts
new file mode 100644
index 0000000..0015594
--- /dev/null
+++ b/utils/Gemini.ts
@@ -0,0 +1,54 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+const MODEL_NAME = "gemini-1.5-pro";
+const API_KEY1 = process.env.NEXT_PUBLIC_GEMINI_API_KEY as string;
+
+const chatHistory = [
+  {
+    role: "user",
+    parts: [
+      {
+        text: `You are an expert in generating cover letter. Your task is to generate cover letter for given job description and resume details. If you are unable to generate then provide output as Information is insufficient!!`,
+      },
+    ],
+  },
+  {
+    role: "model",
+    parts: [{ text: "How can I help you ?" }],
+  },
+];
+
+type Props = {
+  jobDescription: string;
+  project: string;
+  skills: string;
+  experience: string;
+};
+
+export async function getCoverLetter({
+  jobDescription,
+  project,
+  skills,
+  experience,
+}: Props) {
+  if (!API_KEY1) throw new Error("Invalid Api Key!");
+
+  const genAI = new GoogleGenerativeAI(API_KEY1);
+  const model = genAI.getGenerativeModel({ model: MODEL_NAME });
+
+  model.generationConfig = {
+    temperature: 0.9,
+    topK: 1,
+    topP: 1,
+  };
+
+  const chat = model.startChat({
+    history: chatHistory,
+  });
+
+  const result = await chat.sendMessage(
+    `Job Description : \n${jobDescription}.\n Projects : \n${project} \nSkills: \n${skills} \nExperience: \n${experience}`
+  );
+  const response = result.response;
+  return response.text();
+}

From 47cf0dd2fa41b530c8acecc5cfd15eac36e29b29 Mon Sep 17 00:00:00 2001
From: Sid-80 <siddharthbramhecha@gmail.com>
Date: Wed, 17 Jul 2024 18:02:06 +0530
Subject: [PATCH 4/4] feat: Modal For Cover Letter

---
 components/CoverLetterDialog.tsx | 70 ++++++++++++++++++++++++++++++++
 components/CoverLetterForm.tsx   | 25 ++++++++----
 components/Loader.tsx            | 12 ++++++
 components/cover-letter.tsx      |  8 ++++
 4 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 components/CoverLetterDialog.tsx
 create mode 100644 components/Loader.tsx

diff --git a/components/CoverLetterDialog.tsx b/components/CoverLetterDialog.tsx
new file mode 100644
index 0000000..90eac9b
--- /dev/null
+++ b/components/CoverLetterDialog.tsx
@@ -0,0 +1,70 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { SetStateAction, useState } from "react";
+import { Textarea } from "./ui/textarea";
+import { Button } from "./ui/button";
+import { useToast } from "./ui/use-toast";
+
+type Props = {
+  setIsResponseGenerated: React.Dispatch<SetStateAction<boolean>>;
+  setResponse: React.Dispatch<SetStateAction<string>>;
+  isResponseGenerated: boolean;
+  response: string;
+  isError: boolean;
+};
+
+export default function CoverLetterDialog({
+  isResponseGenerated,
+  setIsResponseGenerated,
+  response,
+  setResponse,
+  isError,
+}: Props) {
+  const { toast } = useToast();
+  const copyHandler = () => {
+    navigator.clipboard.writeText(response);
+    toast({
+      title: "Cover Letter",
+      description: "Text Copied!!",
+    });
+  };
+
+  return (
+    <Dialog open={isResponseGenerated} onOpenChange={setIsResponseGenerated}>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent className="sm:w-[700px]">
+        {!isError && (
+          <>
+            <DialogHeader className="flex flex-row w-full items-center justify-between">
+              <DialogTitle>Cover Letter</DialogTitle>
+            </DialogHeader>
+
+            <Textarea
+              className="w-full sm:h-[550px] h-[400px]"
+              value={response}
+              onChange={(e) => setResponse(e.target.value)}
+            ></Textarea>
+
+            <Button onClick={() => copyHandler()}>Copy!</Button>
+          </>
+        )}
+        {isError && (
+          <>
+            <DialogHeader className="flex flex-row w-full items-center justify-between">
+              <DialogTitle>Error</DialogTitle>
+            </DialogHeader>
+            <DialogDescription>
+              Error Occured!! Please try again later.
+            </DialogDescription>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/CoverLetterForm.tsx b/components/CoverLetterForm.tsx
index d507951..246b0b1 100644
--- a/components/CoverLetterForm.tsx
+++ b/components/CoverLetterForm.tsx
@@ -13,8 +13,9 @@ import {
 } from "@/components/ui/form";
 import { Textarea } from "./ui/textarea";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
-import { SetStateAction } from "react";
+import { SetStateAction, useState } from "react";
 import { getCoverLetter } from "@/utils/Gemini";
+import Loader from "./Loader";
 
 const formSchema = z.object({
   jobDescription: z
@@ -52,6 +53,8 @@ export default function CoverLetterForm({
   setIsError,
   setResponse,
 }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -83,10 +86,8 @@ export default function CoverLetterForm({
   }
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    // Do something with the form values.
-    // ✅ This will be type-safe and validated.
     const { jobDescription, project, skills, experience } = values;
-
+    setIsLoading(true);
     try {
       const res = await getCoverLetter({
         jobDescription,
@@ -95,10 +96,14 @@ export default function CoverLetterForm({
         experience,
       });
 
-      console.log(res);
+      if (res) {
+        setIsResponseGenerated(true);
+        setResponse(res);
+      }
     } catch (err) {
       setIsError(true);
     }
+    setIsLoading(false);
   };
 
   return (
@@ -223,7 +228,7 @@ export default function CoverLetterForm({
               name="skills"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Projects</FormLabel>
+                  <FormLabel>Skills</FormLabel>
                   <FormControl>
                     <Textarea
                       className="h-[100px]"
@@ -269,8 +274,12 @@ export default function CoverLetterForm({
                 </FormItem>
               )}
             />
-            <Button className="flex gap-1 text-white" type="submit">
-              Submit
+            <Button
+              disabled={isLoading}
+              className="flex gap-1 text-white"
+              type="submit"
+            >
+              {isLoading ? <Loader /> : "Submit"}
             </Button>
           </>
         )}
diff --git a/components/Loader.tsx b/components/Loader.tsx
new file mode 100644
index 0000000..e79fe7e
--- /dev/null
+++ b/components/Loader.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Loader() {
+  return (
+    <div className="flex gap-2 justify-center items-center">
+      <span className="sr-only">Loading...</span>
+      <div className="h-2 w-2 bg-black rounded-full animate-pulse [animation-delay:-0.3s]"></div>
+      <div className="h-2 w-2 bg-black rounded-full animate-pulse [animation-delay:-0.15s]"></div>
+      <div className="h-2 w-2 bg-black rounded-full animate-pulse"></div>
+    </div>
+  );
+}
diff --git a/components/cover-letter.tsx b/components/cover-letter.tsx
index 8dbd4e0..4acc963 100644
--- a/components/cover-letter.tsx
+++ b/components/cover-letter.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { Button } from "./ui/button";
 import CoverLetterForm from "./CoverLetterForm";
+import CoverLetterDialog from "./CoverLetterDialog";
 
 type Props = {
   user: User | null;
@@ -76,6 +77,13 @@ export default function CoverLetter({ user }: Props) {
             setIsSubmit={setIsSubmit}
           />
         </div>
+        <CoverLetterDialog
+          setResponse={setResponse}
+          isResponseGenerated={isResponseGenerated}
+          setIsResponseGenerated={setIsResponseGenerated}
+          response={response}
+          isError={isError}
+        />
       </div>
     </div>
   );