Skip to content

Commit d88abdd

Browse files
lucaseduolilucaseduoli
authored
feat: changed tweaks into input schema and enabled persistence (langflow-ai#8235)
* Fixed layground and share font weight * Fixed namings and deleted unused api files * Deleted unused code * Changed tweaks to input schema * Changed TableAdvancedToggleCellRender to change Tweaks instead of Nodes if in tweaks page * Removed Hide Visibility to show tweaks' Enable Input * Set advanced of all nodes as true in tweaks * Changed column defs to change width and pass isTweaks to advanced * Changed tweaks store to identify changes in the Advanced field instead of the Values field * Changed to not change quantity of hooks * Changed table node cell render to not change the value of the tweaks * Changed to disable inputs * Added disabled behavior to table node cell render * Added cursor default to cell classes * Updated tweaks test * Added persistence in session * Removed initial setup from api modal to enable persistence * Added persistence to storage * Changed test to test persistence of tweaks * Re-added initial setup to api modal * Fixed size of tweaks modal
1 parent c13d3eb commit d88abdd

25 files changed

Lines changed: 319 additions & 957 deletions

File tree

‎src/frontend/src/components/core/chatComponents/ContentDisplay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Markdown from "react-markdown";
44
import rehypeMathjax from "rehype-mathjax";
55
import remarkGfm from "remark-gfm";
66
import ForwardedIconComponent from "../../common/genericIconComponent";
7-
import SimplifiedCodeTabComponent from "../codeTabsComponent/ChatCodeTabComponent";
7+
import SimplifiedCodeTabComponent from "../codeTabsComponent";
88
import DurationDisplay from "./DurationDisplay";
99

1010
export default function ContentDisplay({

‎src/frontend/src/components/core/codeTabsComponent/ChatCodeTabComponent.tsx‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎src/frontend/src/components/core/codeTabsComponent/components/tweakComponent/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export function TweakComponent({
3737
<EditNodeComponent
3838
open={open}
3939
autoHeight
40-
hideVisibility
4140
nodeClass={nodeClass}
4241
isTweaks
4342
nodeId={node.data.id}

‎src/frontend/src/components/core/codeTabsComponent/index.tsx‎

Lines changed: 38 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
1-
import ShadTooltip from "@/components/common/shadTooltipComponent";
2-
import { useTweaksStore } from "@/stores/tweaksStore";
31
import { useState } from "react";
42
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
5-
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
6-
import { useDarkStore } from "../../../stores/darkStore";
7-
import { codeTabsPropsType } from "../../../types/components";
3+
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
84
import IconComponent from "../../common/genericIconComponent";
95
import { Button } from "../../ui/button";
10-
import { Label } from "../../ui/label";
11-
import { Switch } from "../../ui/switch";
12-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
13-
import { TweaksComponent } from "./components/tweaksComponent";
146

15-
export default function CodeTabsComponent({
16-
open,
17-
tabs,
18-
activeTab,
19-
setActiveTab,
20-
isMessage,
21-
setActiveTweaks,
22-
activeTweaks,
23-
}: codeTabsPropsType) {
24-
const [isCopied, setIsCopied] = useState<Boolean>(false);
25-
const dark = useDarkStore((state) => state.dark);
26-
const nodes = useTweaksStore((state) => state.nodes);
7+
type SimplifiedCodeTabProps = {
8+
code: string;
9+
language: string;
10+
};
11+
12+
export default function SimplifiedCodeTabComponent({
13+
code,
14+
language,
15+
}: SimplifiedCodeTabProps) {
16+
const [isCopied, setIsCopied] = useState<boolean>(false);
2717

2818
const copyToClipboard = () => {
2919
if (!navigator.clipboard || !navigator.clipboard.writeText) {
3020
return;
3121
}
3222

33-
navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
23+
navigator.clipboard.writeText(code).then(() => {
3424
setIsCopied(true);
3525

3626
setTimeout(() => {
@@ -40,121 +30,33 @@ export default function CodeTabsComponent({
4030
};
4131

4232
return (
43-
<Tabs
44-
value={activeTab}
45-
className={
46-
"api-modal-tabs inset-0 m-0 " +
47-
(isMessage ? "dark" : "") +
48-
(dark && isMessage ? "bg-background" : "")
49-
}
50-
onValueChange={(value) => {
51-
setActiveTab(value);
52-
}}
33+
<div
34+
className="mt-2 flex w-full flex-col overflow-hidden rounded-md text-left dark"
35+
data-testid="chat-code-tab"
5336
>
54-
<div className="api-modal-tablist-div">
55-
{tabs.length > 0 && tabs[0].name !== "" ? (
56-
<TabsList className="mt-[-1px] border-b">
57-
{tabs.map((tab, index) => (
58-
<TabsTrigger
59-
className={
60-
isMessage ? "data-[state=active]:bg-primary-foreground" : ""
61-
}
62-
key={index}
63-
value={index.toString()}
64-
>
65-
{tab.name}
66-
</TabsTrigger>
67-
))}
68-
</TabsList>
69-
) : (
70-
<div></div>
71-
)}
72-
</div>
73-
74-
{tabs.map((tab, idx) => (
75-
<TabsContent
76-
value={idx.toString()}
77-
className="api-modal-tabs-content overflow-hidden dark"
78-
key={idx} // Remember to add a unique key prop
37+
<div className="flex w-full items-center justify-between rounded-t-md border border-b-0 border-border bg-muted px-4 py-2">
38+
<span className="dar text-sm font-semibold text-white">{language}</span>
39+
<Button
40+
variant="ghost"
41+
size="icon"
42+
className="text-muted-foreground hover:bg-card"
43+
data-testid="copy-code-button"
44+
onClick={copyToClipboard}
7945
>
80-
{tab.name.toLowerCase() !== "tweaks" ? (
81-
<div className="mt-2 flex h-full w-full flex-col">
82-
{tab.description && (
83-
<div
84-
className="mb-2 w-full text-left text-sm"
85-
dangerouslySetInnerHTML={{ __html: tab.description }}
86-
></div>
87-
)}
88-
<div className="flex w-full items-center justify-end gap-4 rounded-t-md border border-border bg-muted px-4 py-2">
89-
{nodes.length > 0 &&
90-
tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
91-
tabs[activeTab].hasTweaks && (
92-
<div className="flex items-center gap-2">
93-
<ShadTooltip content="Makes temporary adjustments managed in 'Tweaks'">
94-
<div className="flex items-center gap-2">
95-
<Label
96-
className={"text-xs font-medium text-white"}
97-
htmlFor="tweaks-switch"
98-
>
99-
Enable Tweaks
100-
</Label>
101-
<IconComponent
102-
name="info"
103-
className="h-3.5 w-3.5 text-placeholder-foreground"
104-
/>
105-
</div>
106-
</ShadTooltip>
107-
<Switch
108-
style={{
109-
transform: `scaleX(${0.85}) scaleY(${0.85})`,
110-
}}
111-
id="tweaks-switch"
112-
onCheckedChange={setActiveTweaks}
113-
checked={activeTweaks}
114-
autoFocus={false}
115-
/>
116-
<span className="text-lg text-accent">|</span>
117-
</div>
118-
)}
119-
120-
{tabs[activeTab].name.toLowerCase !== "tweaks" && (
121-
<>
122-
<Button
123-
variant="ghost"
124-
size="icon"
125-
onClick={copyToClipboard}
126-
data-testid="btn-copy-code"
127-
>
128-
{isCopied ? (
129-
<IconComponent
130-
name="Check"
131-
className="h-4 w-4 text-muted-foreground"
132-
/>
133-
) : (
134-
<IconComponent
135-
name="Copy"
136-
className="h-4 w-4 text-muted-foreground"
137-
/>
138-
)}
139-
</Button>
140-
</>
141-
)}
142-
</div>
143-
<SyntaxHighlighter
144-
language={tab.language}
145-
style={oneDark}
146-
className="!my-0 h-full overflow-auto rounded-sm !rounded-t-none border border-t-0 border-border text-left custom-scroll"
147-
>
148-
{tab.code}
149-
</SyntaxHighlighter>
150-
</div>
151-
) : tab.name.toLowerCase() === "tweaks" ? (
152-
<>
153-
<TweaksComponent open={open ?? false} />
154-
</>
155-
) : null}
156-
</TabsContent>
157-
))}
158-
</Tabs>
46+
{isCopied ? (
47+
<IconComponent name="Check" className="h-4 w-4" />
48+
) : (
49+
<IconComponent name="Copy" className="h-4 w-4" />
50+
)}
51+
</Button>
52+
</div>
53+
<SyntaxHighlighter
54+
language={language.toLowerCase()}
55+
style={tomorrow}
56+
className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll"
57+
>
58+
{code}
59+
</SyntaxHighlighter>
60+
</div>
15961
);
16062
}

‎src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-up
1212
import { CustomLink } from "@/customization/components/custom-link";
1313
import { ENABLE_PUBLISH, ENABLE_WIDGET } from "@/customization/feature-flags";
1414
import { customMcpOpen } from "@/customization/utils/custom-mcp-open";
15-
import ApiModal from "@/modals/apiModal/new-api-modal";
15+
import ApiModal from "@/modals/apiModal";
1616
import EmbedModal from "@/modals/EmbedModal/embed-modal";
1717
import useAlertStore from "@/stores/alertStore";
1818
import useAuthStore from "@/stores/authStore";
@@ -87,7 +87,7 @@ export default function PublishDropdown() {
8787
<Button
8888
variant="ghost"
8989
size="md"
90-
className="!px-2.5 font-medium"
90+
className="!px-2.5 font-normal"
9191
data-testid="publish-button"
9292
>
9393
Share

‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAdvancedToggleCellRender/index.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
22
import ShadTooltip from "@/components/common/shadTooltipComponent";
33
import useFlowStore from "@/stores/flowStore";
4+
import { useTweaksStore } from "@/stores/tweaksStore";
45
import { APIClassType } from "@/types/api";
56
import { isTargetHandleConnected } from "@/utils/reactflowUtils";
67
import { CustomCellRendererProps } from "ag-grid-react";
78
import ToggleShadComponent from "../../../toggleShadComponent";
89

910
export default function TableAdvancedToggleCellRender({
10-
value: { nodeId, parameterId },
11+
value: { nodeId, parameterId, isTweaks },
1112
}: CustomCellRendererProps) {
1213
const edges = useFlowStore((state) => state.edges);
13-
const node = useFlowStore((state) => state.getNode(nodeId));
14+
const node = isTweaks
15+
? useTweaksStore((state) => state.getNode(nodeId))
16+
: useFlowStore((state) => state.getNode(nodeId));
1417
const parameter = node?.data?.node?.template?.[parameterId];
1518

19+
const setNode = useTweaksStore((state) => state.setNode);
20+
1621
const disabled = isTargetHandleConnected(
1722
edges,
1823
parameterId,
@@ -24,29 +29,32 @@ export default function TableAdvancedToggleCellRender({
2429
node: node?.data.node as APIClassType,
2530
nodeId,
2631
name: parameterId,
32+
setNode: isTweaks ? setNode : undefined,
2733
});
2834

2935
return (
3036
parameter && (
3137
<ShadTooltip
3238
content={
3339
disabled
34-
? "Cannot change visibility of connected handles"
35-
: "Change visibility of the field"
40+
? isTweaks
41+
? "Cannot enable input of connected handles"
42+
: "Cannot change visibility of connected handles"
43+
: isTweaks
44+
? "Toggle input of the field in the API"
45+
: "Change visibility of the field"
3646
}
3747
styleClasses="z-50"
3848
>
39-
<div>
40-
<div className="flex h-full items-center">
41-
<ToggleShadComponent
42-
disabled={disabled}
43-
value={!parameter.advanced}
44-
handleOnNewValue={handleOnNewValue}
45-
editNode={true}
46-
showToogle
47-
id={"show" + parameterId}
48-
/>
49-
</div>
49+
<div className="flex h-full w-full items-center justify-center">
50+
<ToggleShadComponent
51+
disabled={disabled}
52+
value={!parameter.advanced}
53+
handleOnNewValue={handleOnNewValue}
54+
editNode={true}
55+
showToogle
56+
id={"show" + parameterId}
57+
/>
5058
</div>
5159
</ShadTooltip>
5260
)

0 commit comments

Comments
 (0)