feat(basicGen): create basic generation functionality

Author: mehdi-parvizi

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

@@ -0,0 +1,46 @@
+import { useFormContext } from "react-hook-form";
+import { BasicGenFields } from "../../features/constants";
+import { validateForm } from "../../utils/formValidator";
+
+interface Props {
+  fieldName: BasicGenFields;
+  label?: string;
+  placeholder?: string;
+}
+
+const Input = ({ fieldName, label, placeholder }: Props) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const defaultStyle =
+    "border border-stone-600 bg-stone-900 rounded-md flex h-auto p-4";
+
+  const error = errors[fieldName];
+  return (
+    <div>
+      <div className="label">
+        <span className="label-text">{label}</span>
+      </div>
+      {fieldName !== BasicGenFields.INPUT ? (
+        <input
+          className={defaultStyle}
+          {...register(fieldName, validateForm(fieldName))}
+          placeholder={placeholder}
+        />
+      ) : (
+        <textarea
+          className={`overflow-y-auto w-[50rem] ${defaultStyle}`}
+          {...register(fieldName, validateForm(fieldName))}
+          placeholder={placeholder}
+        />
+      )}
+      {error && (
+        <p className="text-red-600 text-sm">{error?.message as string}</p>
+      )}
+    </div>
+  );
+};
+
+export default Input;

web/src/features/basicGen/BasicGen.tsx

@@ -0,0 +1,80 @@
+import { FormProvider, useForm } from "react-hook-form";
+import Input from "../../components/internal-ui/Input";
+import { BasicGenFields, ENDPOINTS, UserType } from "../constants";
+import { Button, HStack, Stack } from "@chakra-ui/react";
+
+import useGptStore from "../../utils/store";
+import ChatBox from "../../components/internal-ui/ChatBox";
+
+import { BasicGenFormData } from "../model";
+import { useEffect, useState } from "react";
+import { IoSendOutline } from "react-icons/io5";
+
+const BasicGen = () => {
+  const formMethods = useForm<BasicGenFormData>({
+    defaultValues: {
+      minToken: 100,
+      maxToken: 500,
+      service: "terraform",
+      input: undefined,
+    },
+    mode: "all",
+  });
+
+  const { handleSubmit } = formMethods;
+
+  const messages = useGptStore((s) => s.messages);
+  const addMessage = useGptStore((s) => s.addMessage);
+  const [isDisabled, setIsDisabled] = useState(true);
+  const [req, setReq] = useState<any>();
+
+  const onSubmit = (data: BasicGenFormData) => {
+    addMessage(UserType.USER, data.input);
+    const request = {
+      min_token: data.minToken,
+      max_token: data.maxToken,
+      service: data.service,
+      input: data.input,
+    };
+    setReq(request);
+  };
+
+  useEffect(() => {
+    setIsDisabled(!!formMethods.getFieldState(BasicGenFields.INPUT).isDirty);
+  }, [formMethods]);
+
+  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}
+            />
+            <HStack
+              mt="3"
+              alignItems="end"
+              alignContent={"center"}
+              justifyContent="center"
+              bottom="5"
+            >
+              <Input placeholder="Text" fieldName={BasicGenFields.INPUT} />
+              <Button type="submit" bg="orange.800" disabled={isDisabled}>
+                <IoSendOutline />
+              </Button>
+            </HStack>
+          </Stack>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};
+
+export default BasicGen;

web/src/features/constants.ts

@@ -0,0 +1,21 @@
+export enum BasicGenFields {
+  MIN_TOKEN = "minToken",
+  MAX_TOKEN = "maxToken",
+  INPUT = "input",
+  SERVICE = "service",
+}
+
+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",
+}

web/src/features/model.ts

@@ -0,0 +1,13 @@
+import { UserType } from "./constants";
+
+export interface Message {
+  user: UserType;
+  content: string;
+}
+
+export interface BasicGenFormData {
+  minToken: number;
+  maxToken: number;
+  service: string;
+  input: string;
+}