🐛 fix(AccordionComponent): change trigger prop type to accept string or ReactElement to improve flexibility

✨ feat(AccordionComponent): add keyValue prop to uniquely identify each accordion item for better performance and stability
🐛 fix(ApiModal): add keyValue prop to AccordionComponent to uniquely identify each accordion item for better performance and stability
🐛 fix(formModal): remove unused imports and replace Accordion, AccordionContent, AccordionItem, and AccordionTrigger with AccordionComponent
✨ feat(formModal): add keyValue prop to AccordionComponent to uniquely identify each accordion item for better performance and stability
🐛 fix(types): change trigger prop type in AccordionComponentType to accept string or ReactElement to improve flexibility

src/frontend/package-lock.json

@@ -147,9 +147,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.22.6",
+      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
-      "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
+      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -194,6 +194,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/core/node_modules/@nicolo-ribaudo/semver-v6": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
+      "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.22.7",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz",
@@ -226,6 +234,14 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/@nicolo-ribaudo/semver-v6": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
+      "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-environment-visitor": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
@@ -1175,9 +1191,9 @@
       }
     },
     "node_modules/@mui/private-theming/node_modules/@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1338,14 +1354,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "node_modules/@nicolo-ribaudo/semver-v6": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
-      "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3542,7 +3550,7 @@
       "version": "16.18.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
       "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -5588,6 +5596,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [

src/frontend/src/components/AccordionComponent/index.tsx

@@ -11,6 +11,7 @@ export default function AccordionComponent({
   trigger,
   children,
   open = [],
+  keyValue,
 }: AccordionComponentType) {
   const [value, setValue] = useState(
     open.length === 0 ? "" : getOpenAccordion()
@@ -28,13 +29,13 @@ export default function AccordionComponent({
   }
 
   function handleClick() {
-    value == "" ? setValue(trigger) : setValue("");
+    value == "" ? setValue(keyValue) : setValue("");
   }
 
   return (
     <>
-      <Accordion type="single" value={value} onValueChange={setValue}>
+      <Accordion type="single" className="w-full" value={value} onValueChange={setValue}>
-        <AccordionItem value={trigger} className="border-b">
+        <AccordionItem value={keyValue} className="border-b">
           <AccordionTrigger
             onClick={() => {
               handleClick();

src/frontend/src/modals/ApiModal/index.tsx

@@ -340,6 +340,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                           {tweaksList.current.includes(t["data"]["id"]) && (
                             <AccordionComponent
                               trigger={t["data"]["id"]}
+                              keyValue={t["data"]["id"]}
                               open={openAccordion}
                             >
                               <div className="api-modal-table-arrangement">

src/frontend/src/modals/formModal/index.tsx

@@ -10,13 +10,9 @@ import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
 
 import _ from "lodash";
+import AccordionComponent from "../../components/AccordionComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
+import { AccordionItem } from "../../components/ui/accordion";
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../components/ui/accordion";
 import { Badge } from "../../components/ui/badge";
 import {
   Dialog,
@@ -388,6 +384,7 @@ export default function FormModal({
       setChatValue("");
     }
   }
+
   return (
     <Dialog open={open} onOpenChange={setModalOpen}>
       <DialogTrigger className="hidden"></DialogTrigger>
@@ -422,80 +419,129 @@ export default function FormModal({
                   </span>
                 </div>
               </div>
-              <Accordion type="multiple" className="w-full">
-                {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
-                  (i, k) => (
-                    <div className="file-component-accordion-div" key={k}>
-                      <AccordionItem className="w-full" key={k} value={i}>
-                        <AccordionTrigger className="flex gap-2">
-                          <div className="file-component-badge-div">
-                            <Badge variant="gray" size="md">
-                              {i}
-                            </Badge>
 
-                            <div
+
-                              className="-mb-1"
+              {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
-                              onClick={(event) => {
+                (i, k) => (
-                                event.stopPropagation();
+                  
-                              }}
+                  <div className="file-component-accordion-div" key={k}>
-                            >
+                    <AccordionComponent
-                              <ToggleShadComponent
+                      trigger={
-                                enabled={chatKey === i}
+                        <div className="file-component-badge-div">
-                                setEnabled={(value) =>
+                          <Badge variant="gray" size="md">
-                                  handleOnCheckedChange(value, i)
+                            {i}
-                                }
+                          </Badge>
-                                size="small"
+
-                                disabled={tabsState[
+                          <div
-                                  id.current
+                            className="-mb-1"
-                                ].formKeysData.handle_keys.some((t) => t === i)}
+                            onClick={(event) => {
-                              />
+                              event.stopPropagation();
-                            </div>
+                            }}
-                          </div>
+                          >
-                        </AccordionTrigger>
+                            <ToggleShadComponent
-                        <AccordionContent>
+                              enabled={chatKey === i}
-                          <div className="file-component-tab-column">
+                              setEnabled={(value) =>
-                            {tabsState[
+                                handleOnCheckedChange(value, i)
-                              id.current
-                            ].formKeysData.handle_keys.some((t) => t === i) && (
-                              <div className="font-normal text-muted-foreground ">
-                                Source: Component
-                              </div>
-                            )}
-                            <Textarea
-                              value={
-                                tabsState[id.current].formKeysData.input_keys[i]
                               }
-                              onChange={(e) => {
+                              size="small"
-                                setTabsState((old) => {
+                              disabled={tabsState[
-                                  let newTabsState = _.cloneDeep(old);
+                                id.current
-                                  newTabsState[
+                              ].formKeysData.handle_keys.some((t) => t === i)}
-                                    id.current
+                            />
-                                  ].formKeysData.input_keys[i] = e.target.value;
-                                  return newTabsState;
-                                });
-                              }}
-                              disabled={chatKey === i}
-                              placeholder="Enter text..."
-                            ></Textarea>
                           </div>
-                        </AccordionContent>
+                        </div>
-                      </AccordionItem>
+                      }
-                    </div>
+                      key={k}
-                  )
+                      keyValue={i}
-                )}
+                    >
-                {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
+                      <div className="file-component-tab-column">
-                  <AccordionItem key={k} value={i}>
+                        {tabsState[id.current].formKeysData.handle_keys.some(
-                    <div className="tab-accordion-badge-div group">
+                          (t) => t === i
-                      <div className="group-hover:underline">
+                        ) && (
-                        <Badge size="md" variant="gray">
+                          <div className="font-normal text-muted-foreground ">
+                            Source: Component
+                          </div>
+                        )}
+                        <Textarea
+                          value={
+                            tabsState[id.current].formKeysData.input_keys[i]
+                          }
+                          onChange={(e) => {
+                            setTabsState((old) => {
+                              let newTabsState = _.cloneDeep(old);
+                              newTabsState[id.current].formKeysData.input_keys[
+                                i
+                              ] = e.target.value;
+                              return newTabsState;
+                            });
+                          }}
+                          disabled={chatKey === i}
+                          placeholder="Enter text..."
+                        ></Textarea>
+                      </div>
+                    </AccordionComponent>
+                  </div>
+                )
+              )}
+              {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
+                  <div className="file-component-accordion-div" key={k}>
+                  <AccordionComponent
+                    trigger={
+                      <div className="file-component-badge-div">
+                        <Badge variant="gray" size="md">
                           {i}
                         </Badge>
+
+                        <div
+                          className="-mb-1"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                          }}
+                        >
+                          <ToggleShadComponent
+                            enabled={chatKey === i}
+                            setEnabled={(value) =>
+                              handleOnCheckedChange(value, i)
+                            }
+                            size="small"
+                            disabled={tabsState[
+                              id.current
+                            ].formKeysData.handle_keys.some((t) => t === i)}
+                          />
+                        </div>
                       </div>
-                      Used as memory key
+                    }
+                    key={k}
+                    keyValue={i}
+                  >
+                    <div className="file-component-tab-column">
+                      {tabsState[id.current].formKeysData.handle_keys.some(
+                        (t) => t === i
+                      ) && (
+                        <div className="font-normal text-muted-foreground ">
+                          Source: Component
+                        </div>
+                      )}
+                      <Textarea
+                        value={
+                          tabsState[id.current].formKeysData.input_keys[i]
+                        }
+                        onChange={(e) => {
+                          setTabsState((old) => {
+                            let newTabsState = _.cloneDeep(old);
+                            newTabsState[id.current].formKeysData.input_keys[
+                              i
+                            ] = e.target.value;
+                            return newTabsState;
+                          });
+                        }}
+                        disabled={chatKey === i}
+                        placeholder="Enter text..."
+                      ></Textarea>
                     </div>
-                  </AccordionItem>
+                  </AccordionComponent>
-                ))}
+                </div>
-              </Accordion>
+              ))}
             </div>
             <div className="eraser-column-arrangement">
               <div className="eraser-size">

src/frontend/src/types/components/index.ts

@@ -130,7 +130,8 @@ export type RadialProgressType = {
 export type AccordionComponentType = {
   children?: ReactElement;
   open?: string[];
-  trigger?: string;
+  trigger?: string | ReactElement;
+  keyValue?: string;
 };
 export type Side = "top" | "right" | "bottom" | "left";