fix(AccordionComponent): add keyValue prop to AccordionComponent to fix missing key error

fix(AccordionComponent): remove unused import statements from AccordionComponent fix(accordion.tsx): remove unnecessary className from AccordionContent component fix(index.css): remove unnecessary cursor property from .AccordionContent class fix(ApiModal): add keyValue prop to AccordionComponent in ApiModal to fix missing key error fix(formModal): remove unused import statements from formModal fix(formModal): replace Accordion, AccordionContent, AccordionItem, and AccordionTrigger components with AccordionComponent in formModal fix(formModal): add keyValue prop to AccordionComponent in formModal to fix missing key error fix(index.ts): add keyValue prop to AccordionComponentType to fix missing key error fix(tailwind.config.js): remove unused keyframes and animation properties from tailwind.config.js
2023-07-18 18:38:19 -03:00 · 2023-07-18 18:38:19 -03:00 · 1be753149d
commit 1be753149d
parent 5f8efd244e 8d4031dec0
8 changed files with 183 additions and 121 deletions
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -147,9 +147,9 @@
      }
    },
    "node_modules/@babel/compat-data": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
-      "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "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",
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/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,18 @@ export default function AccordionComponent({
  }

  function handleClick() {
-    value == "" ? setValue(trigger) : setValue("");
+    value === "" ? setValue(keyValue) : setValue("");
  }

  return (
    <>
-      <Accordion type="single" value={value} onValueChange={setValue}>
-        <AccordionItem value={trigger} className="border-none">
+      <Accordion
+        type="single"
+        className="w-full"
+        value={value}
+        onValueChange={setValue}
+      >
+        <AccordionItem value={keyValue} className="border-b">
          <AccordionTrigger
            onClick={() => {
              handleClick();
@ -43,7 +49,9 @@ export default function AccordionComponent({
          >
            {trigger}
          </AccordionTrigger>
-          <AccordionContent>{children}</AccordionContent>
+          <AccordionContent className="AccordionContent">
+            {children}
+          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/src/frontend/src/components/ui/accordion.tsx
@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
  <AccordionPrimitive.Content
    ref={ref}
    className={cn(
-      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
      className
    )}
    {...props}
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@ -152,6 +152,34 @@ The cursor: default; property value restores the browser's default cursor style
  cursor: default;
 }

+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+

@layer components {
  .round-buttons-position {
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -341,6 +341,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">
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@ -9,14 +9,9 @@ import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";

 import _ from "lodash";
+import AccordionComponent from "../../components/AccordionComponent";
 import IconComponent from "../../components/genericIconComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../components/ui/accordion";
 import { Badge } from "../../components/ui/badge";
 import {
  Dialog,
@ -389,6 +384,7 @@ export default function FormModal({
      setChatValue("");
    }
  }
+
  return (
    <Dialog open={open} onOpenChange={setModalOpen}>
      <DialogTrigger className="hidden"></DialogTrigger>
@ -427,80 +423,127 @@ 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"
-                              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>
-                        </AccordionTrigger>
-                        <AccordionContent>
-                          <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]
+              {Object.keys(tabsState[id.current].formKeysData.input_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)
                              }
-                              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>
+                              size="small"
+                              disabled={tabsState[
+                                id.current
+                              ].formKeysData.handle_keys.some((t) => t === i)}
+                            />
                          </div>
-                        </AccordionContent>
-                      </AccordionItem>
-                    </div>
-                  )
-                )}
-                {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
-                  <AccordionItem key={k} value={i}>
-                    <div className="tab-accordion-badge-div group">
-                      <div className="group-hover:underline">
-                        <Badge size="md" variant="gray">
+                        </div>
+                      }
+                      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
+                          className="custom-scroll"
+                          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
+                        className="custom-scroll"
+                        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>
-                ))}
-              </Accordion>
+                  </AccordionComponent>
+                </div>
+              ))}
            </div>
            <div className="eraser-column-arrangement">
              <div className="eraser-size">
--- a/src/frontend/src/types/components/index.ts
+++ b/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";

--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@ -28,20 +28,6 @@ module.exports = {
      },
    },
    extend: {
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
      colors: {
        connection: "var(--connection)",
        "almost-dark-gray": "var(--almost-dark-gray)",
@ -129,20 +115,6 @@ module.exports = {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
-      keyframes: {
-        slideDown: {
-          from: { height: 0 },
-          to: { height: 100 },
-        },
-        slideUp: {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "slideDown 300ms ease-out",
-        "accordion-up": "slideUp 300ms ease-in",
-      },
    },
  },

@ -214,6 +186,7 @@ module.exports = {
          "&::-webkit-scrollbar-thumb:hover": {
            backgroundColor: "#bbb",
          },
+          cursor: "auto",
        },
        ".dark .theme-attribution .react-flow__attribution": {
          backgroundColor: "rgba(255, 255, 255, 0.2)",