jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(toggleShadComponent): remove unused useEffect hook to improve code readability and maintainability

Browse source 
✨ feat(toggleShadComponent): add disabled prop to Switch component to disable interaction when disabled is true

🐛 fix(formModal): remove unused imports to improve code cleanliness
✨ feat(formModal): add MessageSquarePlus icon to represent chat input
✨ feat(formModal): add multiple collapsible accordions for input variables
🐛 fix(formModal): disable Toggle component when handle key is present in formKeysData
This commit is contained in:
Lucas Oliveira 2023-06-30 10:48:51 -03:00
commit fe16467914
2 changed files with 29 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/components/toggleShadComponent/index.tsx
View file

@ -8,11 +8,6 @@ export default function ToggleShadComponent({
disabled, disabled,
size, size,
}: ToggleComponentType) { }: ToggleComponentType) {
useEffect(() => {
if (disabled) {
setEnabled(false);
}
}, [disabled, setEnabled]);
let scaleX, scaleY; let scaleX, scaleY;
switch (size) { switch (size) {
case "small": case "small":
@ -32,11 +27,12 @@ export default function ToggleShadComponent({
scaleY = 1; scaleY = 1;
} }
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
<Switch <Switch
style={{ style={{
transform: `scaleX(${scaleX}) scaleY(${scaleY})`, transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
}} }}
disabled={disabled}
className="data-[state=unchecked]:bg-slate-500" className="data-[state=unchecked]:bg-slate-500"
checked={enabled} checked={enabled}
onCheckedChange={(x: boolean) => { onCheckedChange={(x: boolean) => {

53
src/frontend/src/modals/formModal/index.tsx
View file

@ -4,7 +4,13 @@ import { alertContext } from "../../contexts/alertContext";
import { classNames, validateNodes } from "../../utils"; import { classNames, validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import { TerminalSquare, MessageSquare, Variable, Eraser } from "lucide-react"; import {
TerminalSquare,
MessageSquare,
Variable,
Eraser,
MessageSquarePlus,
} from "lucide-react";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat"; import { ChatMessageType } from "../../types/chat";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
@ -401,17 +407,20 @@ export default function FormModal({
<div className="flex h-[80vh] w-full mt-2 "> <div className="flex h-[80vh] w-full mt-2 ">
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6"> <div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex py-2"> <div className="flex py-2 items-center">
<Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable> <Variable className="w-6 h-6 pe-1 text-primary"></Variable>
<span className="text-md font-semibold text-primary"> <span className="text-md font-semibold text-primary">
Input Variables Input Variables
</span> </span>
</div> </div>
<span className="mr-2 text-md font-semibold text-primary"> <div className="flex py-2 items-center">
Chat Input <MessageSquarePlus className="w-6 h-6 pe-1 mr-0.5 text-primary" />
</span> <span className=" text-md font-semibold text-primary">
Chat Input
</span>
</div>
</div> </div>
<Accordion type="single" collapsible className="w-full"> <Accordion type="multiple" className="w-full">
{Object.keys(tabsState[id.current].formKeysData.input_keys).map( {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
(i, k) => ( (i, k) => (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
@ -434,7 +443,9 @@ export default function FormModal({
handleOnCheckedChange(value, i) handleOnCheckedChange(value, i)
} }
size="small" size="small"
disabled={false} disabled={tabsState[
id.current
].formKeysData.handle_keys.some((t) => t === i)}
/> />
</div> </div>
</div> </div>
@ -443,33 +454,23 @@ export default function FormModal({
<div className="p-1 flex flex-col gap-2"> <div className="p-1 flex flex-col gap-2">
{tabsState[ {tabsState[
id.current id.current
].formKeysData.handle_keys.some((t) => t === i) ? ( ].formKeysData.handle_keys.some((t) => t === i) && (
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">
Handle Source: Component
</div> </div>
) : (
<></>
)} )}
<Textarea <Textarea
value={ value={
tabsState[id.current].formKeysData.input_keys[i] tabsState[id.current].formKeysData.input_keys[i]
} }
onChange={(e) => { onChange={(e) => {
if ( setTabsState((old) => {
!tabsState[ let newTabsState = _.cloneDeep(old);
newTabsState[
id.current id.current
].formKeysData.handle_keys.some( ].formKeysData.input_keys[i] = e.target.value;
(t) => t === i return newTabsState;
) });
)
setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[
id.current
].formKeysData.input_keys[i] =
e.target.value;
return newTabsState;
});
}} }}
disabled={chatKey === i} disabled={chatKey === i}
placeholder="Enter text..." placeholder="Enter text..."