🐛 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
This commit is contained in:
Cristhian Zanforlin Lousa
parent
69380447b0
commit
0db3ed20d8
5 changed files with 150 additions and 92 deletions
39
src/frontend/package-lock.json
generated
39
src/frontend/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<AccordionItem value={trigger} className="border-b">
|
||||
<Accordion type="single" className="w-full" value={value} onValueChange={setValue}>
|
||||
<AccordionItem value={keyValue} className="border-b">
|
||||
<AccordionTrigger
|
||||
onClick={() => {
|
||||
handleClick();
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "../../components/ui/accordion";
|
||||
import { AccordionItem } 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"
|
||||
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
|
||||
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>
|
||||
))}
|
||||
</Accordion>
|
||||
</AccordionComponent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="eraser-column-arrangement">
|
||||
<div className="eraser-size">
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue