92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
Anchor,
|
|
Button,
|
|
Card,
|
|
List,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { IconChevronDown, IconChevronUp, IconExternalLink } from "@tabler/icons-react";
|
|
import { LANGFLOW_URL } from "../api";
|
|
|
|
export default function FlowHelp() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Card withBorder padding="md" mb="md">
|
|
<Button
|
|
variant="subtle"
|
|
leftSection={open ? <IconChevronUp size={16} /> : <IconChevronDown size={16} />}
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
{open ? "Anleitung verbergen" : "Anleitung: Neuer Flow in Langflow"}
|
|
</Button>
|
|
{open && (
|
|
<div>
|
|
<Title order={4} mt="sm" mb="xs">
|
|
So kommt ein neuer Flow in die Webapp
|
|
</Title>
|
|
<List size="sm" spacing="xs">
|
|
<List.Item>
|
|
<Text component="span" fw={600}>
|
|
1. In Langflow entwerfen und speichern:{" "}
|
|
</Text>
|
|
<Anchor href={LANGFLOW_URL} target="_blank" rel="noreferrer">
|
|
Langflow öffnen <IconExternalLink size={14} />
|
|
</Anchor>
|
|
. Die bestehenden Flows sind dort bereits geladen. Name vergeben, speichern.
|
|
</List.Item>
|
|
<List.Item>
|
|
<Text component="span" fw={600}>
|
|
2. Sync-Button unten klicken:{" "}
|
|
</Text>
|
|
holt alle Flows aus Langflow nach{" "}
|
|
<Text component="span" ff="monospace">
|
|
backend/flows/*.json
|
|
</Text>{" "}
|
|
und deployed sie danach automatisch (neue Version nur bei geändertem Inhalt,
|
|
sonst übersprungen).
|
|
</List.Item>
|
|
<List.Item>
|
|
<Text component="span" fw={600}>
|
|
3. Prüfen:{" "}
|
|
</Text>
|
|
Tabelle unten zeigt Version, Autor und Status. Danach erscheint der Flow
|
|
automatisch auf der Seite Workflows mit seinem Formular. Flows ohne
|
|
Formular-Knoten zeigen ein Freitext-Feld.
|
|
</List.Item>
|
|
</List>
|
|
<Title order={5} mt="md" mb="xs">
|
|
Regeln
|
|
</Title>
|
|
<List size="sm" spacing="xs">
|
|
<List.Item>
|
|
Der Dateiname wird aus dem Flow-Namen erzeugt (Kleinbuchstaben,
|
|
Bindestriche). Umbenennen erzeugt eine neue Datei.
|
|
</List.Item>
|
|
<List.Item>
|
|
Eine gelöschte Datei löscht den Flow inklusive seiner Läufe
|
|
(Datei bleibt in Git erhalten).
|
|
</List.Item>
|
|
<List.Item>
|
|
Fehler stehen in der Sync-Meldung (z. B. ungültiges Flow-JSON).
|
|
Der automatische Beobachter im Hintergrund syncet nur Dateien,
|
|
Langflow holt nur dieser Button.
|
|
</List.Item>
|
|
</List>
|
|
<Title order={5} mt="md" mb="xs">
|
|
Formular-Felder
|
|
</Title>
|
|
<Text size="sm">
|
|
Für ein Web-Formular braucht der Flow einen CustomInputForm-Knoten: jeder
|
|
Eintrag dort ist ein Formularfeld (Name = Feld-Key, Anzeigename = Label).
|
|
Die Verbindung ChatInput nach form_values bitte behalten — darüber kommen
|
|
die ausgefüllten Werte an. Unbekannte Feldtypen fallen automatisch auf ein
|
|
Textfeld zurück.
|
|
</Text>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|