Fix UI/UX Issues in Docker Compose and Helm Template Pages

web/src/components/form/form-input.tsx

@@ -11,8 +11,11 @@ export const FormInput = ({
   isNumber,
   inputType,
   inputClass,
+  showError = true,
   ...props
 }: FormFieldProps) => {
+  const { className, ...restProps } = props;
+
   const {
     register,
     formState: { errors },
@@ -24,12 +27,12 @@ export const FormInput = ({
   return (
     <Form.Field
       className={cn('form-field relative', {
-        'mb-6': errorMessage,
+        'mb-6': errorMessage && showError,
       })}
       name={name}
     >
       {label && (
-        <div className="flex items-baseline justify-between mb-1">
+        <div className="mb-1 flex items-baseline justify-between">
           <Form.Label className="form-label">{label}</Form.Label>
         </div>
       )}
@@ -38,18 +41,18 @@ export const FormInput = ({
           type={inputType}
           className={cn(
             'w-full rounded-md border border-gray-500 px-3 py-2 outline-none transition-all focus:border-orange-base',
-            props.className,
+            inputClass,
             {
               'border-red-500 dark:border': errorMessage,
             },
           )}
           {...register(name, { ...(isNumber && { valueAsNumber: true }) })}
-          {...props}
+          {...restProps}
         />
       </Form.Control>
-      {errorMessage && (
+      {showError && errorMessage && (
         <div className="absolute left-0 top-full">
-          <Form.Message className="ml-auto text-sm text-red-500 form-message">
+          <Form.Message className="form-message ml-auto text-sm text-red-500">
             {errorMessage}
           </Form.Message>
         </div>

web/src/hooks/useDownload.ts

@@ -30,6 +30,7 @@ const useDownload = ({
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
     }
   }, [isSuccess, data]);
 

web/src/lib/helper.ts

@@ -5,18 +5,16 @@ export const getNestedValue = (obj: any, path: string) => {
 };
 
 export const convertKVtoObject = (
-  kvArray: Array<{ key: string; value: string } | null>,
+  kvArray: Array<{ key: string; value: string } | null> | null,
 ) => {
   return kvArray?.reduce(
     (acc, curr) => {
-
       if (curr && acc) {
         acc[curr.key] = curr?.value;
-
       }
       return acc;
     },
-    {} as Record<string, string> | null,
+    {} as { [key: string]: string } | null,
   );
 };
 

web/src/pages/basic/basic.tsx

@@ -5,6 +5,7 @@ import { usePost } from '@/core/react-query';
 import { BasicBody, BasicMessage, BasicResponse } from './basic.types';
 import { API } from '@/enums/api.enums';
 import { BeatLoader } from 'react-spinners';
+import { isAxiosError } from 'axios';
 
 const Basic: FC = () => {
   const { mutateAsync } = usePost<BasicResponse, BasicBody>(API.Basic, 'basic');
@@ -54,16 +55,22 @@ const Basic: FC = () => {
     } catch (error) {
       console.log(error);
       setMessages((prev) => prev.slice(0, -1));
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
       <div className="w-full max-w-[1024px]">
-        <div className="w-full rounded-md p-2">
-          <div className="flex h-full w-full items-center justify-center gap-3">
-            <div className="flex w-full flex-col">
+        <div className="w-full p-2 rounded-md">
+          <div className="flex items-center justify-center w-full h-full gap-3">
+            <div className="flex flex-col w-full">
               <label htmlFor="min_token" className="mb-2">
                 Min Token
               </label>
@@ -72,10 +79,10 @@ const Basic: FC = () => {
                 type="number"
                 value={minToken}
                 onChange={(e) => setMinToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="max_token" className="mb-2">
                 Max Token
               </label>
@@ -84,10 +91,10 @@ const Basic: FC = () => {
                 type="number"
                 value={maxToken}
                 onChange={(e) => setMaxToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="service" className="mb-2">
                 Service
               </label>
@@ -96,7 +103,7 @@ const Basic: FC = () => {
                 type="text"
                 value={service}
                 onChange={(e) => setService(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
           </div>
@@ -107,14 +114,14 @@ const Basic: FC = () => {
             >
               {messages.map((message) =>
                 message.role === 'user' ? (
-                  <div className="chat chat-end max-w-full">
-                    <div className="chat-bubble bg-gray-600 text-white">
+                  <div className="max-w-full chat chat-end">
+                    <div className="text-white bg-gray-600 chat-bubble">
                       {message.content}
                     </div>
                   </div>
                 ) : (
-                  <div className="chat chat-start max-w-full">
-                    <div className="chat-bubble text-white">
+                  <div className="max-w-full chat chat-start">
+                    <div className="text-white chat-bubble">
                       {message.loading ? (
                         <BeatLoader color="#e3e3e3" size={10} />
                       ) : (
@@ -131,12 +138,12 @@ const Basic: FC = () => {
               value={input}
               onChange={(e) => setInput(e.target.value)}
               rows={2}
-              className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
+              className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
             />
             <button
               disabled={!input}
               onClick={handleSendMessage}
-              className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
+              className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
             >
               <Send className="size-6 stroke-[#121212]" />
             </button>

web/src/pages/bug-fix/bug-fix.tsx

@@ -5,6 +5,7 @@ import { BugFixBody, BugFixMessage, BugFixResponse } from './bug-fix.types';
 import { usePost } from '@/core/react-query';
 import { toast } from 'sonner';
 import { BeatLoader } from 'react-spinners';
+import { isAxiosError } from 'axios';
 
 const BugFix: FC = () => {
   const { mutateAsync } = usePost<BugFixResponse, BugFixBody>(
@@ -57,18 +58,23 @@ const BugFix: FC = () => {
         ),
       );
     } catch (error) {
-      console.log(error);
       setMessages((prev) => prev.slice(0, -1));
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
       <div className="w-full max-w-[1024px]">
-        <div className="w-full rounded-md p-2">
-          <div className="flex h-full w-full items-center justify-center gap-3">
-            <div className="flex w-full flex-col">
+        <div className="w-full p-2 rounded-md">
+          <div className="flex items-center justify-center w-full h-full gap-3">
+            <div className="flex flex-col w-full">
               <label htmlFor="min_token" className="mb-2">
                 Min Token
               </label>
@@ -77,10 +83,10 @@ const BugFix: FC = () => {
                 type="number"
                 value={minToken}
                 onChange={(e) => setMinToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="max_token" className="mb-2">
                 Max Token
               </label>
@@ -89,10 +95,10 @@ const BugFix: FC = () => {
                 type="number"
                 value={maxToken}
                 onChange={(e) => setMaxToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="service" className="mb-2">
                 Service
               </label>
@@ -101,10 +107,10 @@ const BugFix: FC = () => {
                 type="text"
                 value={service}
                 onChange={(e) => setService(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="version" className="mb-2">
                 Version
               </label>
@@ -113,7 +119,7 @@ const BugFix: FC = () => {
                 type="text"
                 value={version}
                 onChange={(e) => setVersion(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
           </div>
@@ -124,14 +130,14 @@ const BugFix: FC = () => {
             >
               {messages.map((message) =>
                 message.role === 'user' ? (
-                  <div className="chat chat-end max-w-full">
-                    <div className="chat-bubble bg-gray-600 text-white">
+                  <div className="max-w-full chat chat-end">
+                    <div className="text-white bg-gray-600 chat-bubble">
                       {message.content}
                     </div>
                   </div>
                 ) : (
-                  <div className="chat chat-start max-w-full">
-                    <div className="chat-bubble text-white">
+                  <div className="max-w-full chat chat-start">
+                    <div className="text-white chat-bubble">
                       {message.loading ? (
                         <BeatLoader color="#e3e3e3" size={10} />
                       ) : (
@@ -148,12 +154,12 @@ const BugFix: FC = () => {
               value={bugDescription}
               onChange={(e) => setBugDescription(e.target.value)}
               rows={2}
-              className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
+              className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
             />
             <button
               disabled={!bugDescription}
               onClick={handleSendMessage}
-              className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
+              className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
             >
               <Send className="size-6 stroke-[#121212]" />
             </button>

web/src/pages/docker-compose/components/network-fields.tsx

@@ -5,7 +5,7 @@ import { FormInput } from '@/components/form/form-input';
 import { FormCheckbox } from '@/components/form/form-checkbox';
 import { FormSelect } from '@/components/form/form-select';
 
-const defaultNetworkDrivers = ['bridge', 'host', 'none', 'overlay'] as const;
+const defaultNetworkDrivers = ['Bridge', 'Host', 'None', 'Overlay'] as const;
 
 const NetworkFields: FC = () => {
   const { control, watch } = useFormContext();
@@ -15,7 +15,7 @@ const NetworkFields: FC = () => {
     name: 'networks.app_network',
   });
 
-  const customNetwork = watch('networks.custom');
+  const customNetwork = watch('networks.external_network');
 
   const handleRemoveNetwork = (index: number) => {
     remove(index);
@@ -25,13 +25,12 @@ const NetworkFields: FC = () => {
     const networkData = customNetwork
       ? {
           network_name: '',
-          external: false,
           name: '',
         }
       : {
           network_name: '',
           driver: {
-            label: 'bridge',
+            label: 'Bridge',
             value: 'bridge',
           },
         };
@@ -52,11 +51,14 @@ const NetworkFields: FC = () => {
             Add <Plus className="size-3" />
           </button>
         </div>
-        <FormCheckbox label="Custom" name="networks.custom" />
+        <FormCheckbox
+          label="External Network"
+          name="networks.external_network"
+        />
       </div>
 
       <div className="space-y-4">
-        <div className="w-full rounded-md border border-gray-500 p-5">
+        <div className="flex w-full flex-col gap-4 rounded-md border border-gray-500 p-5">
           {fields.map((field, index) => (
             <div key={field.id} className="mb-4">
               <div className="mb-4 flex items-center justify-between">
@@ -72,19 +74,12 @@ const NetworkFields: FC = () => {
               </div>
 
               <div>
-                {customNetwork && (
-                  <div className="mb-2 flex justify-end">
-                    <FormCheckbox
-                      name={`networks.app_network.${index}.external`}
-                      label="External Network"
-                    />
-                  </div>
-                )}
                 <div className="flex items-center gap-3 [&>div]:flex-1">
                   <FormInput
                     name={`networks.app_network.${index}.network_name`}
                     label="App Network"
                     placeholder="network_name"
+                    showError={false}
                   />
                   {!customNetwork && (
                     <FormSelect
@@ -101,6 +96,7 @@ const NetworkFields: FC = () => {
                       name={`networks.app_network.${index}.name`}
                       label="Name"
                       placeholder="Name"
+                      showError={false}
                     />
                   )}
                 </div>