Add template generator and download section

web/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

web/src/components/external-ui/checkbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: React.ReactNode
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLLabelElement>
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          {icon || <ChakraCheckbox.Indicator />}
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    )
+  },
+)

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

@@ -1,16 +1,16 @@
 import { Box } from "@chakra-ui/react";
 import ChatBubble from "./ChatBubble";
 import { Message } from "../../features/model";
-import usePost from "../../hooks/usePost";
-import { ENDPOINTS, UserType } from "../../features/constants";
+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";
+import usePost from "../../hooks/usePost";
 
 interface Props {
   messageData: Message[];
-  endpoint: ENDPOINTS;
+  endpoint: Endpoints;
   request: any;
   id: string;
 }

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

@@ -0,0 +1,26 @@
+import { useFormContext } from "react-hook-form";
+
+import { HStack } from "@chakra-ui/react";
+
+interface Props {
+  fieldName: string;
+  label: string;
+}
+
+const CheckBox = ({ fieldName, label }: Props) => {
+  const { register } = useFormContext();
+  return (
+    <>
+      <HStack alignItems={"center"} justifyContent={"center"}>
+        <p>{label}</p>
+        <input
+          className=" w-4 h-4 accent-orange-700"
+          {...register(fieldName)}
+          type="checkbox"
+        />
+      </HStack>
+    </>
+  );
+};
+
+export default CheckBox;

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

@@ -1,14 +1,23 @@
 import { useFormContext } from "react-hook-form";
 import { BasicGenFields, BugFixFields } from "../../features/constants";
 import { validateForm } from "../../utils/formValidator";
+import { CSSProperties } from "react";
 
 interface Props {
   fieldName: string;
   label?: string;
   placeholder?: string;
+  disabled?: boolean;
+  style?: CSSProperties;
 }
 
-const Input = ({ fieldName, label, placeholder = "Placeholder" }: Props) => {
+const Input = ({
+  fieldName,
+  label,
+  placeholder,
+  style,
+  disabled = false,
+}: Props) => {
   const {
     register,
     formState: { errors },
@@ -29,15 +38,19 @@ const Input = ({ fieldName, label, placeholder = "Placeholder" }: Props) => {
       </div>
       {!showTextArea ? (
         <input
+          disabled={disabled}
           className={defaultStyle}
           {...register(fieldName, validateForm(fieldName))}
           placeholder={placeholder}
+          style={style}
         />
       ) : (
         <textarea
           className={`overflow-y-auto w-[50rem] ${defaultStyle}`}
           {...register(fieldName, validateForm(fieldName))}
           placeholder={placeholder}
+          style={style}
+          disabled={disabled}
         />
       )}
       {error && (

web/src/components/ui/menu.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
+import * as React from "react"
+import { LuCheck, LuChevronRight } from "react-icons/lu"
+
+interface MenuContentProps extends ChakraMenu.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
+  function MenuContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraMenu.Positioner>
+          <ChakraMenu.Content ref={ref} {...rest} />
+        </ChakraMenu.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const MenuArrow = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.ArrowProps
+>(function MenuArrow(props, ref) {
+  return (
+    <ChakraMenu.Arrow ref={ref} {...props}>
+      <ChakraMenu.ArrowTip />
+    </ChakraMenu.Arrow>
+  )
+})
+
+export const MenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.CheckboxItemProps
+>(function MenuCheckboxItem(props, ref) {
+  return (
+    <ChakraMenu.CheckboxItem ref={ref} {...props}>
+      <ChakraMenu.ItemIndicator hidden={false}>
+        <LuCheck />
+      </ChakraMenu.ItemIndicator>
+      {props.children}
+    </ChakraMenu.CheckboxItem>
+  )
+})
+
+export const MenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.RadioItemProps
+>(function MenuRadioItem(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
+      <AbsoluteCenter axis="horizontal" left="4" asChild>
+        <ChakraMenu.ItemIndicator>
+          <LuCheck />
+        </ChakraMenu.ItemIndicator>
+      </AbsoluteCenter>
+      <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
+    </ChakraMenu.RadioItem>
+  )
+})
+
+export const MenuItemGroup = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.ItemGroupProps
+>(function MenuItemGroup(props, ref) {
+  const { title, children, ...rest } = props
+  return (
+    <ChakraMenu.ItemGroup ref={ref} {...rest}>
+      {title && (
+        <ChakraMenu.ItemGroupLabel userSelect="none">
+          {title}
+        </ChakraMenu.ItemGroupLabel>
+      )}
+      {children}
+    </ChakraMenu.ItemGroup>
+  )
+})
+
+export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
+  startIcon?: React.ReactNode
+}
+
+export const MenuTriggerItem = React.forwardRef<
+  HTMLDivElement,
+  MenuTriggerItemProps
+>(function MenuTriggerItem(props, ref) {
+  const { startIcon, children, ...rest } = props
+  return (
+    <ChakraMenu.TriggerItem ref={ref} {...rest}>
+      {startIcon}
+      {children}
+      <LuChevronRight />
+    </ChakraMenu.TriggerItem>
+  )
+})
+
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
+export const MenuContextTrigger = ChakraMenu.ContextTrigger
+export const MenuRoot = ChakraMenu.Root
+export const MenuSeparator = ChakraMenu.Separator
+
+export const MenuItem = ChakraMenu.Item
+export const MenuItemText = ChakraMenu.ItemText
+export const MenuItemCommand = ChakraMenu.ItemCommand
+export const MenuTrigger = ChakraMenu.Trigger

web/src/features/basicGen/BasicGen.tsx

@@ -1,6 +1,6 @@
 import { FormProvider } from "react-hook-form";
 import Input from "../../components/internal-ui/Input";
-import { basicGenDefaultValues, BasicGenFields, ENDPOINTS } from "../constants";
+import { basicGenDefaultValues, BasicGenFields, Endpoints } from "../constants";
 import { Button, HStack, Stack } from "@chakra-ui/react";
 
 import useGptStore from "../../utils/store";
@@ -35,7 +35,7 @@ const BasicGen = () => {
             <Input fieldName={BasicGenFields.SERVICE} label="Service" />
           </div>
           <ChatBox
-            endpoint={ENDPOINTS.postBasic}
+            endpoint={Endpoints.POST_BASIC}
             request={request}
             messageData={messages}
             id={request?.requestId ?? ""}

web/src/features/bugFix/BugFix.tsx

@@ -6,7 +6,7 @@ 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 { bugFixDefaultValues, BugFixFields, Endpoints } from "../constants";
 import { ApiRequestBugFix, BugFixFormData } from "../model";
 
 const BugFix = () => {
@@ -32,7 +32,7 @@ const BugFix = () => {
             <Input fieldName={BugFixFields.VERSION} label="Version" />
           </div>
           <ChatBox
-            endpoint={ENDPOINTS.postFix}
+            endpoint={Endpoints.POST_FIX}
             request={request}
             messageData={messages}
             id={request?.requestId ?? ""}

web/src/features/constants.ts

@@ -1,3 +1,27 @@
+import {
+  BasicGenFormData,
+  BugFixFormData,
+  TerraformDockerFormData,
+  TerraformEc2FormData,
+  TerraformIAMFormData,
+  TerraformS3FormData,
+} from "./model";
+
+export enum Endpoints {
+  POST_BASIC = "/IaC-basic",
+  POST_FIX = "/IaC-bugfix",
+  POST_INSTALL = "/IaC-install",
+  POST_IAC_T_DOCKER = "/IaC-template/docker",
+  POST_IAC_T_EC2 = "/IaC-template/aws/ec2",
+  POST_IAC_T_S3 = "/IaC-template/aws/s3",
+  POST_IAC_T_IAM = "/IaC-template/aws/iam",
+  POST_IAC_HELM = "/Helm-template",
+  GET_DOWNLOAD_TERRAFORM = "/download-folder",
+  GET_DOWNLOAD_HELM = "/download-helm",
+  GET_DIRECTORY = "/list-directory",
+  DOWNLOAD_LINK = "http://localhost/download-folderMyTerraform",
+}
+
 export enum BasicGenFields {
   MIN_TOKEN = "minToken",
   MAX_TOKEN = "maxToken",
@@ -13,32 +37,66 @@ export enum BugFixFields {
   BUG_DESCRIPTION = "bugDescription",
 }
 
+export enum TerraformDockerFields {
+  DOCKER_IMAGE = "dockerImage",
+  DOCKER_CONTAINER = "dockerContainer",
+}
+
+export enum TerraformEC2Fields {
+  KEY_PAIR = "keyPair",
+  SECURITY_GROUP = "securityGroup",
+  AWS_INSTANCE = "awsInstance",
+  AMI_FROM_INSTANCE = "amiFromInstance",
+}
+
+export enum TerraformS3Fields {
+  S3_BUCKET = "s3Bucket",
+  BUCKET_VERSIONING = "bucketVersioning",
+}
+
+export enum TerraformIAMFields {
+  IAM_USER = "iamUser",
+  IAM_GROUP = "iamGroup",
+}
+
 export enum UserType {
   USER = "user",
   BOT = "bot",
 }
 
-export enum ENDPOINTS {
-  postBasic = "/IaC-basic",
-  postFix = "/IaC-bugfix",
-  postInstall = "/IaC-install",
-  PostIacTemp = "/IaC-template",
-  PostIacHelm = "/Helm-template",
-  getDonwload = "/download",
-  getDirectory = "/list-directory",
-}
-
-export const basicGenDefaultValues = {
+export const basicGenDefaultValues: BasicGenFormData = {
   minToken: 100,
   maxToken: 500,
   service: "terraform",
-  input: undefined,
+  input: "",
 };
 
-export const bugFixDefaultValues = {
+export const bugFixDefaultValues: BugFixFormData = {
   minToken: 100,
   maxToken: 500,
   service: "terraform",
   version: "latest",
-  bugDescription: undefined,
+  bugDescription: "",
+};
+
+export const terraformDockerDefaultValues: TerraformDockerFormData = {
+  dockerImage: false,
+  dockerContainer: false,
+};
+
+export const terraformEc2DefaultValues: TerraformEc2FormData = {
+  keyPair: false,
+  amiFromInstance: false,
+  awsInstance: false,
+  securityGroup: false,
+};
+
+export const terraformS3DefaultValues: TerraformS3FormData = {
+  s3Bucket: false,
+  bucketVersioning: false,
+};
+
+export const terraformIamDefaultValues: TerraformIAMFormData = {
+  iamUser: false,
+  iamGroup: false,
 };