Bug fix section

web/src/components/internal-ui/ChatBox.tsx

@@ -6,6 +6,7 @@ import { ENDPOINTS, UserType } from "../../features/constants";
 import useGptStore from "../../utils/store";
 import { useEffect } from "react";
 import { v4 as uuid } from "uuid";
+import { useLocation } from "react-router-dom";
 
 interface Props {
   messageData: Message[];
@@ -14,24 +15,30 @@ interface Props {
   id: string;
 }
 
-interface BasicGenApiResponse {
+interface BasicApiResponse {
   output: string;
 }
 
 const ChatBox = ({ messageData, endpoint, request, id }: Props) => {
   const addMessage = useGptStore((s) => s.addMessage);
+  const resetMessages = useGptStore((s) => s.resetMessages);
 
-  const { data, error, isLoading } = usePost<BasicGenApiResponse>(
+  const location = useLocation();
+
+  const { data, error, isLoading } = usePost<BasicApiResponse>(
     endpoint,
     request,
     id
   );
 
   useEffect(() => {
     if (data?.data.output) addMessage(UserType.BOT, data?.data.output!, uuid());
-    console.log(messageData);
   }, [request, data]);
 
+  useEffect(() => {
+    return () => resetMessages();
+  }, [location.pathname]);
+
   return (
     <Box
       w="100%"

web/src/components/internal-ui/ErrorPage.tsx

@@ -0,0 +1,23 @@
+import { Box, Button, Center } from "@chakra-ui/react";
+import { MdOutlineNoEncryptionGmailerrorred } from "react-icons/md";
+import { Link } from "react-router-dom";
+
+const ErrorPage = () => {
+  return (
+    <Center>
+      <Box mt="6rem" alignItems="center" className="flex flex-col">
+        <div className="text-red-700 mb-5 flex items-center">
+          <MdOutlineNoEncryptionGmailerrorred className="" size="2rem" />
+          <p className="text-3xl">Unathorized Route</p>
+        </div>
+        <Link to="/">
+          <Button bg="orange.700" w="5rem">
+            Go back
+          </Button>
+        </Link>
+      </Box>
+    </Center>
+  );
+};
+
+export default ErrorPage;

web/src/components/internal-ui/Input.tsx

@@ -1,19 +1,23 @@
 import { useFormContext } from "react-hook-form";
-import { BasicGenFields } from "../../features/constants";
+import { BasicGenFields, BugFixFields } from "../../features/constants";
 import { validateForm } from "../../utils/formValidator";
 
 interface Props {
-  fieldName: BasicGenFields;
+  fieldName: string;
   label?: string;
   placeholder?: string;
 }
 
-const Input = ({ fieldName, label, placeholder }: Props) => {
+const Input = ({ fieldName, label, placeholder = "Placeholder" }: Props) => {
   const {
     register,
     formState: { errors },
   } = useFormContext();
 
+  const showTextArea =
+    fieldName === BasicGenFields.INPUT ||
+    fieldName === BugFixFields.BUG_DESCRIPTION;
+
   const defaultStyle =
     "border border-stone-600 bg-stone-900 rounded-md flex h-auto p-4";
 
@@ -23,7 +27,7 @@ const Input = ({ fieldName, label, placeholder }: Props) => {
       <div className="label">
         <span className="label-text">{label}</span>
       </div>
-      {fieldName !== BasicGenFields.INPUT ? (
+      {!showTextArea ? (
         <input
           className={defaultStyle}
           {...register(fieldName, validateForm(fieldName))}

web/src/features/basicGen/BasicGen.tsx

@@ -1,87 +1,64 @@
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
 import Input from "../../components/internal-ui/Input";
-import { BasicGenFields, ENDPOINTS, UserType } from "../constants";
+import { basicGenDefaultValues, BasicGenFields, ENDPOINTS } from "../constants";
 import { Button, HStack, Stack } from "@chakra-ui/react";
 
 import useGptStore from "../../utils/store";
 import ChatBox from "../../components/internal-ui/ChatBox";
 
 import { ApiRequestBasicGen, BasicGenFormData } from "../model";
-import { useEffect, useState } from "react";
+
 import { IoSendOutline } from "react-icons/io5";
-import { v4 as uuid } from "uuid";
+
+import useFormHandler from "../../hooks/useFormHandler";
+import { basicGenMapper } from "../../utils/mapperFunctions";
 
 const BasicGen = () => {
-  const formMethods = useForm<BasicGenFormData>({
-    defaultValues: {
-      minToken: 100,
-      maxToken: 500,
-      service: "terraform",
-      input: undefined,
-    },
-    mode: "onSubmit",
-  });
+  const { formMethods, handleSubmit, onSubmit, request } = useFormHandler<
+    BasicGenFormData,
+    ApiRequestBasicGen
+  >(basicGenDefaultValues);
 
-  const { handleSubmit } = formMethods;
+  const handleFormSubmit = handleSubmit((data) => {
+    onSubmit(basicGenMapper(data), data.input);
+  });
 
   const messages = useGptStore((s) => s.messages);
-  const addMessage = useGptStore((s) => s.addMessage);
-  const [req, setReq] = useState<ApiRequestBasicGen | null>(null);
-
-  const onSubmit = (data: BasicGenFormData) => {
-    addMessage(UserType.USER, data.input, uuid());
-    const request: ApiRequestBasicGen = {
-      min_token: data.minToken,
-      max_token: data.maxToken,
-      service: data.service,
-      input: data.input,
-      requestId: uuid(),
-    };
-    if (data.input) setReq(request);
-  };
-
-  useEffect(() => {
-    return () => setReq(null);
-  }, []);
 
   return (
-    <div>
-      <FormProvider {...formMethods}>
-        <form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>
-          <Stack gap="3" justifyContent="center" alignItems="center">
-            <div className="flex gap-2">
-              <Input fieldName={BasicGenFields.MIN_TOKEN} label="Min token" />
-              <Input fieldName={BasicGenFields.MAX_TOKEN} label="Max token" />
-              <Input fieldName={BasicGenFields.SERVICE} label="Service" />
-            </div>
-            <ChatBox
-              endpoint={ENDPOINTS.postBasic}
-              request={req}
-              messageData={messages}
-              id={req?.requestId ?? ""}
-            />
-            <HStack
-              mt="3"
-              alignItems="center"
-              alignContent="center"
-              justifyContent="center"
-              bottom="5"
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleFormSubmit}>
+        <Stack gap="3" justifyContent="center" alignItems="center">
+          <div className="flex gap-2">
+            <Input fieldName={BasicGenFields.MIN_TOKEN} label="Min token" />
+            <Input fieldName={BasicGenFields.MAX_TOKEN} label="Max token" />
+            <Input fieldName={BasicGenFields.SERVICE} label="Service" />
+          </div>
+          <ChatBox
+            endpoint={ENDPOINTS.postBasic}
+            request={request}
+            messageData={messages}
+            id={request?.requestId ?? ""}
+          />
+          <HStack
+            mt="3"
+            alignItems="center"
+            alignContent="center"
+            justifyContent="center"
+            bottom="5"
+          >
+            <Input placeholder="Text" fieldName={BasicGenFields.INPUT} />
+            <Button
+              type="submit"
+              bg="orange.800"
+              disabled={formMethods.getFieldState(BasicGenFields.INPUT).invalid}
             >
-              <Input placeholder="Text" fieldName={BasicGenFields.INPUT} />
-              <Button
-                type="submit"
-                bg="orange.800"
-                disabled={
-                  formMethods.getFieldState(BasicGenFields.INPUT).invalid
-                }
-              >
-                <IoSendOutline />
-              </Button>
-            </HStack>
-          </Stack>
-        </form>
-      </FormProvider>
-    </div>
+              <IoSendOutline />
+            </Button>
+          </HStack>
+        </Stack>
+      </form>
+    </FormProvider>
   );
 };
 

web/src/features/bugFix/BugFix.tsx

@@ -0,0 +1,67 @@
+import { Button, HStack, Stack } from "@chakra-ui/react";
+import { FormProvider } from "react-hook-form";
+import { IoSendOutline } from "react-icons/io5";
+import ChatBox from "../../components/internal-ui/ChatBox";
+import Input from "../../components/internal-ui/Input";
+import useFormHandler from "../../hooks/useFormHandler";
+import { bugFixMapper } from "../../utils/mapperFunctions";
+import useGptStore from "../../utils/store";
+import { bugFixDefaultValues, BugFixFields, ENDPOINTS } from "../constants";
+import { ApiRequestBugFix, BugFixFormData } from "../model";
+
+const BugFix = () => {
+  const { request, handleSubmit, onSubmit, formMethods } = useFormHandler<
+    BugFixFormData,
+    ApiRequestBugFix
+  >(bugFixDefaultValues);
+
+  const messages = useGptStore((s) => s.messages);
+
+  const handleFormSubmit = handleSubmit((data) => {
+    onSubmit(bugFixMapper(data), data.bugDescription);
+  });
+
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleFormSubmit}>
+        <Stack gap="3" justifyContent="center" alignItems="center">
+          <div className="flex gap-2">
+            <Input fieldName={BugFixFields.MIN_TOKEN} label="Min token" />
+            <Input fieldName={BugFixFields.MAX_TOKEN} label="Max token" />
+            <Input fieldName={BugFixFields.SERVICE} label="Service" />
+            <Input fieldName={BugFixFields.VERSION} label="Version" />
+          </div>
+          <ChatBox
+            endpoint={ENDPOINTS.postFix}
+            request={request}
+            messageData={messages}
+            id={request?.requestId ?? ""}
+          />
+          <HStack
+            mt="3"
+            alignItems="center"
+            alignContent="center"
+            justifyContent="center"
+            bottom="5"
+          >
+            <Input
+              placeholder="Text"
+              fieldName={BugFixFields.BUG_DESCRIPTION}
+            />
+            <Button
+              type="submit"
+              bg="orange.800"
+              disabled={
+                formMethods.getFieldState(BugFixFields.BUG_DESCRIPTION).invalid
+              }
+            >
+              <IoSendOutline />
+            </Button>
+          </HStack>
+        </Stack>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default BugFix;

web/src/features/constants.ts

@@ -1,8 +1,16 @@
 export enum BasicGenFields {
   MIN_TOKEN = "minToken",
   MAX_TOKEN = "maxToken",
+  SERVICE = "service",
   INPUT = "input",
+}
+
+export enum BugFixFields {
+  MIN_TOKEN = "minToken",
+  MAX_TOKEN = "maxToken",
   SERVICE = "service",
+  VERSION = "version",
+  BUG_DESCRIPTION = "bugDescription",
 }
 
 export enum UserType {
@@ -19,3 +27,18 @@ export enum ENDPOINTS {
   getDonwload = "/download",
   getDirectory = "/list-directory",
 }
+
+export const basicGenDefaultValues = {
+  minToken: 100,
+  maxToken: 500,
+  service: "terraform",
+  input: undefined,
+};
+
+export const bugFixDefaultValues = {
+  minToken: 100,
+  maxToken: 500,
+  service: "terraform",
+  version: "latest",
+  bugDescription: undefined,
+};