Skip to content

Commit e78e390

Browse files
DavidsonGomesDavidsonGomes
committed
refactor: flowise form
1 parent 64719dc commit e78e390

File tree

3 files changed

+363
-535
lines changed

3 files changed

+363
-535
lines changed

‎src/pages/instance/Flowise/FlowiseForm.tsx‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
import { zodResolver } from "@hookform/resolvers/zod";
2+
import { useForm, FormProvider } from "react-hook-form";
3+
import { useTranslation } from "react-i18next";
4+
import { z } from "zod";
5+
6+
import { Button } from "@/components/ui/button";
7+
import {
8+
Dialog,
9+
DialogContent,
10+
DialogDescription,
11+
DialogFooter,
12+
DialogHeader,
13+
DialogTitle,
14+
DialogTrigger,
15+
} from "@/components/ui/dialog";
16+
import { FormInput, FormSelect, FormSwitch } from "@/components/ui/form";
17+
import { Input } from "@/components/ui/input";
18+
import { Separator } from "@/components/ui/separator";
19+
20+
import { SessionsFlowise } from "./SessionsFlowise";
21+
22+
export const FormSchema = z.object({
23+
enabled: z.boolean(),
24+
description: z.string(),
25+
apiUrl: z.string(),
26+
apiKey: z.string().optional(),
27+
triggerType: z.string(),
28+
triggerOperator: z.string().optional(),
29+
triggerValue: z.string().optional(),
30+
expire: z.coerce.number().optional(),
31+
keywordFinish: z.string().optional(),
32+
delayMessage: z.coerce.number().optional(),
33+
unknownMessage: z.string().optional(),
34+
listeningFromMe: z.boolean().optional(),
35+
stopBotFromMe: z.boolean().optional(),
36+
keepOpen: z.boolean().optional(),
37+
debounceTime: z.coerce.number().optional(),
38+
});
39+
40+
export type FormSchemaType = z.infer<typeof FormSchema>;
41+
42+
type FlowiseFormProps = {
43+
initialData?: FormSchemaType;
44+
onSubmit: (data: FormSchemaType) => Promise<void>;
45+
handleDelete?: () => void;
46+
flowiseId?: string;
47+
isModal?: boolean;
48+
isLoading?: boolean;
49+
openDeletionDialog?: boolean;
50+
setOpenDeletionDialog?: (value: boolean) => void;
51+
};
52+
53+
function FlowiseForm({
54+
initialData,
55+
onSubmit,
56+
handleDelete,
57+
flowiseId,
58+
isModal = false,
59+
isLoading = false,
60+
openDeletionDialog = false,
61+
setOpenDeletionDialog = () => {},
62+
}: FlowiseFormProps) {
63+
const { t } = useTranslation();
64+
const form = useForm<FormSchemaType>({
65+
resolver: zodResolver(FormSchema),
66+
defaultValues: initialData || {
67+
enabled: true,
68+
description: "",
69+
apiUrl: "",
70+
apiKey: "",
71+
triggerType: "keyword",
72+
triggerOperator: "contains",
73+
triggerValue: "",
74+
expire: 0,
75+
keywordFinish: "",
76+
delayMessage: 0,
77+
unknownMessage: "",
78+
listeningFromMe: false,
79+
stopBotFromMe: false,
80+
keepOpen: false,
81+
debounceTime: 0,
82+
},
83+
});
84+
85+
const triggerType = form.watch("triggerType");
86+
87+
return (
88+
<FormProvider {...form}>
89+
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
90+
<div className="space-y-4">
91+
<FormSwitch
92+
name="enabled"
93+
label={t("flowise.form.enabled.label")}
94+
reverse
95+
/>
96+
<FormInput
97+
name="description"
98+
label={t("flowise.form.description.label")}
99+
required
100+
>
101+
<Input />
102+
</FormInput>
103+
104+
<div className="flex flex-col">
105+
<h3 className="my-4 text-lg font-medium">
106+
{t("flowise.form.flowiseSettings.label")}
107+
</h3>
108+
<Separator />
109+
</div>
110+
<FormInput
111+
name="apiUrl"
112+
label={t("flowise.form.apiUrl.label")}
113+
required
114+
>
115+
<Input />
116+
</FormInput>
117+
<FormInput name="apiKey" label={t("flowise.form.apiKey.label")}>
118+
<Input type="password" />
119+
</FormInput>
120+
121+
<div className="flex flex-col">
122+
<h3 className="my-4 text-lg font-medium">
123+
{t("flowise.form.triggerSettings.label")}
124+
</h3>
125+
<Separator />
126+
</div>
127+
<FormSelect
128+
name="triggerType"
129+
label={t("flowise.form.triggerType.label")}
130+
options={[
131+
{
132+
label: t("flowise.form.triggerType.keyword"),
133+
value: "keyword",
134+
},
135+
{
136+
label: t("flowise.form.triggerType.all"),
137+
value: "all",
138+
},
139+
{
140+
label: t("flowise.form.triggerType.advanced"),
141+
value: "advanced",
142+
},
143+
{
144+
label: t("flowise.form.triggerType.none"),
145+
value: "none",
146+
},
147+
]}
148+
/>
149+
150+
{triggerType === "keyword" && (
151+
<>
152+
<FormSelect
153+
name="triggerOperator"
154+
label={t("flowise.form.triggerOperator.label")}
155+
options={[
156+
{
157+
label: t("flowise.form.triggerOperator.contains"),
158+
value: "contains",
159+
},
160+
{
161+
label: t("flowise.form.triggerOperator.equals"),
162+
value: "equals",
163+
},
164+
{
165+
label: t("flowise.form.triggerOperator.startsWith"),
166+
value: "startsWith",
167+
},
168+
{
169+
label: t("flowise.form.triggerOperator.endsWith"),
170+
value: "endsWith",
171+
},
172+
{
173+
label: t("flowise.form.triggerOperator.regex"),
174+
value: "regex",
175+
},
176+
]}
177+
/>
178+
<FormInput
179+
name="triggerValue"
180+
label={t("flowise.form.triggerValue.label")}
181+
>
182+
<Input />
183+
</FormInput>
184+
</>
185+
)}
186+
{triggerType === "advanced" && (
187+
<FormInput
188+
name="triggerValue"
189+
label={t("flowise.form.triggerConditions.label")}
190+
>
191+
<Input />
192+
</FormInput>
193+
)}
194+
<div className="flex flex-col">
195+
<h3 className="my-4 text-lg font-medium">
196+
{t("flowise.form.generalSettings.label")}
197+
</h3>
198+
<Separator />
199+
</div>
200+
<FormInput name="expire" label={t("flowise.form.expire.label")}>
201+
<Input type="number" />
202+
</FormInput>
203+
<FormInput
204+
name="keywordFinish"
205+
label={t("flowise.form.keywordFinish.label")}
206+
>
207+
<Input />
208+
</FormInput>
209+
<FormInput
210+
name="delayMessage"
211+
label={t("flowise.form.delayMessage.label")}
212+
>
213+
<Input type="number" />
214+
</FormInput>
215+
<FormInput
216+
name="unknownMessage"
217+
label={t("flowise.form.unknownMessage.label")}
218+
>
219+
<Input />
220+
</FormInput>
221+
<FormSwitch
222+
name="listeningFromMe"
223+
label={t("flowise.form.listeningFromMe.label")}
224+
reverse
225+
/>
226+
<FormSwitch
227+
name="stopBotFromMe"
228+
label={t("flowise.form.stopBotFromMe.label")}
229+
reverse
230+
/>
231+
<FormSwitch
232+
name="keepOpen"
233+
label={t("flowise.form.keepOpen.label")}
234+
reverse
235+
/>
236+
<FormInput
237+
name="debounceTime"
238+
label={t("flowise.form.debounceTime.label")}
239+
>
240+
<Input type="number" />
241+
</FormInput>
242+
</div>
243+
244+
{isModal && (
245+
<DialogFooter>
246+
<Button disabled={isLoading} type="submit">
247+
{isLoading
248+
? t("flowise.button.saving")
249+
: t("flowise.button.save")}
250+
</Button>
251+
</DialogFooter>
252+
)}
253+
254+
{!isModal && (
255+
<div>
256+
<SessionsFlowise flowiseId={flowiseId} />
257+
<div className="mt-5 flex items-center gap-3">
258+
<Dialog
259+
open={openDeletionDialog}
260+
onOpenChange={setOpenDeletionDialog}
261+
>
262+
<DialogTrigger asChild>
263+
<Button variant="destructive" size="sm">
264+
{t("dify.button.delete")}
265+
</Button>
266+
</DialogTrigger>
267+
<DialogContent>
268+
<DialogHeader>
269+
<DialogTitle>{t("modal.delete.title")}</DialogTitle>
270+
<DialogDescription>
271+
{t("modal.delete.messageSingle")}
272+
</DialogDescription>
273+
<DialogFooter>
274+
<Button
275+
size="sm"
276+
variant="outline"
277+
onClick={() => setOpenDeletionDialog(false)}
278+
>
279+
{t("button.cancel")}
280+
</Button>
281+
<Button variant="destructive" onClick={handleDelete}>
282+
{t("button.delete")}
283+
</Button>
284+
</DialogFooter>
285+
</DialogHeader>
286+
</DialogContent>
287+
</Dialog>
288+
<Button disabled={isLoading} type="submit">
289+
{isLoading
290+
? t("flowise.button.saving")
291+
: t("flowise.button.update")}
292+
</Button>
293+
</div>
294+
</div>
295+
)}
296+
</form>
297+
</FormProvider>
298+
);
299+
}
300+
301+
export { FlowiseForm };

0 commit comments

Comments
 (0)