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

Release (#615)

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-05 20:13:05 -03:00 • committed by GitHub
commit cd879912fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
77 changed files with 275 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.devcontainer/demo/README.md
View file

@ -1,6 +1,6 @@
# LangFlow Demo Codespace Readme # Langflow Demo Codespace Readme
These instructions will walk you through the process of running a LangFlow demo via GitHub Codespaces. These instructions will walk you through the process of running a Langflow demo via GitHub Codespaces.
## Setup ## Setup

6
CONTRIBUTING.md
View file

@ -1,6 +1,6 @@
# Contributing to LangFlow # Contributing to Langflow
Hello there! We appreciate your interest in contributing to LangFlow. Hello there! We appreciate your interest in contributing to Langflow.
As an open-source project in a rapidly developing field, we are extremely open As an open-source project in a rapidly developing field, we are extremely open
to contributions, whether it be in the form of a new feature, improved infra, or better documentation. to contributions, whether it be in the form of a new feature, improved infra, or better documentation.
@ -40,7 +40,7 @@ the system we use to tag our issues and pull requests.
### Local development ### Local development
You can develop LangFlow using docker compose, or locally. You can develop Langflow using docker compose, or locally.
We provide a .vscode/launch.json file for debugging the backend in VSCode, which is a lot faster than using docker compose. We provide a .vscode/launch.json file for debugging the backend in VSCode, which is a lot faster than using docker compose.

14
README.md
View file

@ -1,6 +1,6 @@
<!-- Title --> <!-- Title -->
# ⛓️ LangFlow # ⛓️ Langflow
~ An effortless way to experiment and prototype [LangChain](https://github.com/hwchase17/langchain) pipelines ~ ~ An effortless way to experiment and prototype [LangChain](https://github.com/hwchase17/langchain) pipelines ~
@ -16,7 +16,7 @@
<p> <p>
<a href="https://discord.gg/EqksyE2EX9"><img alt="Discord Server" src="https://dcbadge.vercel.app/api/server/EqksyE2EX9?compact=true&style=flat"/></a> <a href="https://discord.gg/EqksyE2EX9"><img alt="Discord Server" src="https://dcbadge.vercel.app/api/server/EqksyE2EX9?compact=true&style=flat"/></a>
<a href="https://huggingface.co/spaces/Logspace/LangFlow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a> <a href="https://huggingface.co/spaces/Logspace/Langflow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a>
</p> </p>
<a href="https://github.com/logspace-ai/langflow"> <a href="https://github.com/logspace-ai/langflow">
@ -43,7 +43,7 @@
# 📦 Installation # 📦 Installation
### <b>Locally</b> ### <b>Locally</b>
You can install LangFlow from pip: You can install Langflow from pip:
```shell ```shell
pip install langflow pip install langflow
@ -220,7 +220,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))
## 🎨 Creating Flows ## 🎨 Creating Flows
Creating flows with LangFlow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. LangFlow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains. Creating flows with Langflow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. Langflow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains.
Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow. Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow.
@ -233,13 +233,13 @@ from langflow import load_flow_from_json
flow = load_flow_from_json("path/to/flow.json") flow = load_flow_from_json("path/to/flow.json")
# Now you can use it like any chain # Now you can use it like any chain
flow("Hey, have you heard of LangFlow?") flow("Hey, have you heard of Langflow?")
``` ```
## 👋 Contributing ## 👋 Contributing
We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make LangFlow more accessible. We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make Langflow more accessible.
Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask questions, make suggestions and showcase your projects! 🦾 Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask questions, make suggestions and showcase your projects! 🦾
@ -252,4 +252,4 @@ Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask question
## 📄 License ## 📄 License
LangFlow is released under the MIT License. See the LICENSE file for details. Langflow is released under the MIT License. See the LICENSE file for details.

2
pyproject.toml
View file

@ -1,6 +1,6 @@
[tool.poetry] [tool.poetry]
name = "langflow" name = "langflow"
version = "0.2.12" version = "0.2.13"
description = "A Python package with a built-in web application" description = "A Python package with a built-in web application"
authors = ["Logspace <contact@logspace.ai>"] authors = ["Logspace <contact@logspace.ai>"]
maintainers = [ maintainers = [

23
src/backend/langflow/__main__.py
View file

@ -48,6 +48,26 @@ def update_settings(
settings.update_settings(cache=cache) settings.update_settings(cache=cache)
def load_params():
"""
Load the parameters from the environment variables.
"""
global_vars = globals()
for key, value in global_vars.items():
env_key = f"LANGFLOW_{key.upper()}"
if env_key in os.environ:
if isinstance(value, bool):
# Handle booleans
global_vars[key] = os.getenv(env_key, str(value)).lower() == "true"
elif isinstance(value, int):
# Handle integers
global_vars[key] = int(os.getenv(env_key, str(value)))
elif isinstance(value, str) or value is None:
# Handle strings and None values
global_vars[key] = os.getenv(env_key, str(value))
def serve_on_jcloud(): def serve_on_jcloud():
""" """
Deploy Langflow server on Jina AI Cloud Deploy Langflow server on Jina AI Cloud
@ -149,6 +169,7 @@ def serve(
# override env variables with .env file # override env variables with .env file
if env_file: if env_file:
load_dotenv(env_file, override=True) load_dotenv(env_file, override=True)
load_params()
if jcloud: if jcloud:
return serve_on_jcloud() return serve_on_jcloud()
@ -244,7 +265,7 @@ def get_free_port(port):
def print_banner(host, port): def print_banner(host, port):
# console = Console() # console = Console()
word = "LangFlow" word = "Langflow"
colors = ["#3300cc"] colors = ["#3300cc"]
styled_word = "" styled_word = ""

2
src/backend/langflow/api/v1/schemas.py
View file

@ -23,7 +23,7 @@ class GraphData(BaseModel):
class ExportedFlow(BaseModel): class ExportedFlow(BaseModel):
"""Exported flow from LangFlow.""" """Exported flow from Langflow."""
description: str description: str
name: str name: str

2
src/frontend/index.html
View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<title>LangFlow</title> <title>Langflow</title>
</head> </head>
<body id='body' style="width: 100%; height:100%"> <body id='body' style="width: 100%; height:100%">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

2
src/frontend/src/App.tsx
View file

@ -118,7 +118,7 @@ export default function App() {
const removeAlert = (id: string) => { const removeAlert = (id: string) => {
setAlertsList((prevAlertsList) => setAlertsList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== id) prevAlertsList.filter((alert) => alert.id !== id),
); );
}; };

6
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -59,7 +59,7 @@ export default function ParameterComponent({
}, [data.id, position, updateNodeInternals]); }, [data.id, position, updateNodeInternals]);
const [enabled, setEnabled] = useState( const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false data.node.template[name]?.value ?? false,
); );
useEffect(() => {}, [closePopUp, data.node.template]); useEffect(() => {}, [closePopUp, data.node.template]);
@ -101,7 +101,7 @@ export default function ParameterComponent({
<span <span
key={getRandomKeyByssmm()} key={getRandomKeyByssmm()}
className={classNames( className={classNames(
i > 0 ? "items-center flex mt-3" : "items-center flex" i > 0 ? "items-center flex mt-3" : "items-center flex",
)} )}
> >
<div <div
@ -183,7 +183,7 @@ export default function ParameterComponent({
} }
className={classNames( className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ", left ? "-ml-0.5 " : "-mr-0.5 ",
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
)} )}
style={{ style={{
borderColor: color, borderColor: color,

10
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -82,7 +82,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
selected ? "border border-ring" : "border dark:border-gray-700", selected ? "border border-ring" : "border dark:border-gray-700",
"prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900" "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900",
)} )}
> >
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white "> <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
@ -132,7 +132,7 @@ export default function GenericNode({
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "w-4 h-4 rounded-full bg-green-500 opacity-100" ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
)} )}
></div> ></div>
<div <div
@ -140,7 +140,7 @@ export default function GenericNode({
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "w-4 h-4 rounded-full bg-red-500 opacity-100" ? "w-4 h-4 rounded-full bg-red-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
)} )}
></div> ></div>
<div <div
@ -148,7 +148,7 @@ export default function GenericNode({
!validationStatus || isBuilding !validationStatus || isBuilding
? "w-4 h-4 rounded-full bg-yellow-500 opacity-100" ? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
)} )}
></div> ></div>
</div> </div>
@ -217,7 +217,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node.template).length < 1 ? "hidden" : "", Object.keys(data.node.template).length < 1 ? "hidden" : "",
"flex w-full justify-center" "flex w-full justify-center",
)} )}
> >
{" "} {" "}

2
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -18,7 +18,7 @@ export default function AccordionComponent({
open = [], open = [],
}: AccordionComponentType) { }: AccordionComponentType) {
const [value, setValue] = useState( const [value, setValue] = useState(
open.length == 0 ? "" : getOpenAccordion() open.length == 0 ? "" : getOpenAccordion(),
); );
function getOpenAccordion() { function getOpenAccordion() {

12
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -34,7 +34,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-gray-900" ? "bg-muted text-gray-900"
: "bg-white text-gray-600 hover:bg-muted hover:text-gray-900", : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md" "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md",
)} )}
> >
<item.icon <item.icon
@ -42,7 +42,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-gray-500" ? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500", : "text-gray-400 group-hover:text-gray-500",
"mr-3 flex-shrink-0 h-6 w-6" "mr-3 flex-shrink-0 h-6 w-6",
)} )}
/> />
{item.name} {item.name}
@ -61,7 +61,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-gray-900" ? "bg-muted text-gray-900"
: "bg-white text-gray-600 hover:bg-muted hover:text-gray-900", : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500" "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500",
)} )}
> >
<item.icon <item.icon
@ -74,7 +74,7 @@ export default function ExtraSidebar() {
open open
? "text-gray-400 rotate-90" ? "text-gray-400 rotate-90"
: "text-gray-300", : "text-gray-300",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400" "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400",
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"
@ -94,7 +94,7 @@ export default function ExtraSidebar() {
subItem.href.split("/")[3] === current[5] subItem.href.split("/")[3] === current[5]
? "bg-muted text-gray-900" ? "bg-muted text-gray-900"
: "bg-white text-gray-600 hover:bg-muted hover:text-gray-900", : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium" "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium",
)} )}
> >
{subItem.name} {subItem.name}
@ -104,7 +104,7 @@ export default function ExtraSidebar() {
</> </>
)} )}
</Disclosure> </Disclosure>
) ),
)} )}
</nav> </nav>
</div> </div>

2
src/frontend/src/components/ReactTooltipComponent/index.tsx
View file

@ -38,7 +38,7 @@ const TooltipReact: FC<TooltipProps> = ({
content={content} content={content}
className={classNames( className={classNames(
"!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]", "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
className className,
)} )}
place={position} place={position}
clickable={clickable} clickable={clickable}

2
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -126,7 +126,7 @@ export default function BuildTrigger({
async function enforceMinimumLoadingTime( async function enforceMinimumLoadingTime(
startTime: number, startTime: number,
minimumLoadingTime: number minimumLoadingTime: number,
) { ) {
const elapsedTime = Date.now() - startTime; const elapsedTime = Date.now() - startTime;
const remainingTime = minimumLoadingTime - elapsedTime; const remainingTime = minimumLoadingTime - elapsedTime;

2
src/frontend/src/components/chatComponent/index.tsx
View file

@ -45,7 +45,7 @@ export default function Chat({ flow }: ChatType) {
useEffect(() => { useEffect(() => {
const prevNodes = prevNodesRef.current; const prevNodes = prevNodesRef.current;
const currentNodes = nodes.map( const currentNodes = nodes.map(
(node: NodeType) => node.data.node.template.value (node: NodeType) => node.data.node.template.value,
); );
if ( if (

6
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -13,7 +13,7 @@ export default function CodeAreaComponent({
editNode = false, editNode = false,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState( const [myValue, setMyValue] = useState(
typeof value == "string" ? value : JSON.stringify(value) typeof value == "string" ? value : JSON.stringify(value),
); );
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
@ -43,7 +43,7 @@ export default function CodeAreaComponent({
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />,
); );
}} }}
className={ className={
@ -67,7 +67,7 @@ export default function CodeAreaComponent({
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />,
); );
}} }}
> >

10
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -18,7 +18,7 @@ export default function Dropdown({
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
let [internalValue, setInternalValue] = useState( let [internalValue, setInternalValue] = useState(
value === "" || !value ? "Choose an option" : value value === "" || !value ? "Choose an option" : value,
); );
useEffect(() => { useEffect(() => {
@ -71,7 +71,7 @@ export default function Dropdown({
editNode editNode
? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]" ? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
: "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ", : "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
apiModal ? "w-[250px] mb-2" : "absolute" apiModal ? "w-[250px] mb-2" : "absolute",
)} )}
> >
{options.map((option, id) => ( {options.map((option, id) => (
@ -84,7 +84,7 @@ export default function Dropdown({
: "", : "",
editNode editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800" ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
: "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800" : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800",
) )
} }
value={option} value={option}
@ -94,7 +94,7 @@ export default function Dropdown({
<span <span
className={classNames( className={classNames(
selected ? "font-semibold" : "font-normal", selected ? "font-semibold" : "font-normal",
"block truncate " "block truncate ",
)} )}
> >
{option} {option}
@ -104,7 +104,7 @@ export default function Dropdown({
<span <span
className={classNames( className={classNames(
active ? "text-white dark:text-black" : "", active ? "text-white dark:text-black" : "",
"absolute inset-y-0 right-0 flex items-center pr-4" "absolute inset-y-0 right-0 flex items-center pr-4",
)} )}
> >
<Check <Check

2
src/frontend/src/components/headerComponent/index.tsx
View file

@ -128,7 +128,7 @@ export default function Header() {
<AlertDropdown /> <AlertDropdown />
</div> </div>
<div className="h-screen w-screen fixed top-0 left-0"></div> <div className="h-screen w-screen fixed top-0 left-0"></div>
</> </>,
); );
}} }}
> >

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

@ -53,7 +53,7 @@ export default function InputComponent({
? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" + ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
INPUT_STYLE INPUT_STYLE
: "ring-offset-gray-200" + INPUT_STYLE, : "ring-offset-gray-200" + INPUT_STYLE,
password && editNode ? "pr-8" : "pr-3" password && editNode ? "pr-8" : "pr-3",
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(e) => {
@ -66,7 +66,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600" ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
: "absolute inset-y-0 right-0 items-center px-4 text-gray-600" : "absolute inset-y-0 right-0 items-center px-4 text-gray-600",
)} )}
onClick={() => { onClick={() => {
setPwdVisible(!pwdVisible); setPwdVisible(!pwdVisible);
@ -83,7 +83,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "w-5 h-5 absolute bottom-0.5 right-2" ? "w-5 h-5 absolute bottom-0.5 right-2"
: "w-5 h-5 absolute bottom-2 right-3" : "w-5 h-5 absolute bottom-2 right-3",
)} )}
> >
<path <path
@ -102,7 +102,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "w-5 h-5 absolute bottom-0.5 right-2" ? "w-5 h-5 absolute bottom-0.5 right-2"
: "w-5 h-5 absolute bottom-2 right-3" : "w-5 h-5 absolute bottom-2 right-3",
)} )}
> >
<path <path

4
src/frontend/src/components/promptComponent/index.tsx
View file

@ -44,7 +44,7 @@ export default function PromptAreaComponent({
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />,
); );
}} }}
className={ className={
@ -70,7 +70,7 @@ export default function PromptAreaComponent({
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />,
); );
}} }}
> >

4
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -47,7 +47,7 @@ export default function TextAreaComponent({
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />,
); );
}} }}
className={ className={
@ -73,7 +73,7 @@ export default function TextAreaComponent({
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />,
); );
}} }}
> >

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

@ -22,7 +22,7 @@ export default function ToggleComponent({
}} }}
className={classNames( className={classNames(
enabled ? "bg-primary" : "bg-gray-200", enabled ? "bg-primary" : "bg-gray-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1" "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1",
)} )}
> >
<span className="sr-only">Use setting</span> <span className="sr-only">Use setting</span>
@ -32,7 +32,7 @@ export default function ToggleComponent({
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", "pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
disabled disabled
? "bg-gray-200 dark:bg-gray-600" ? "bg-gray-200 dark:bg-gray-600"
: "bg-white dark:bg-gray-800" : "bg-white dark:bg-gray-800",
)} )}
> >
<span <span
@ -40,7 +40,7 @@ export default function ToggleComponent({
enabled enabled
? "opacity-0 ease-out duration-100" ? "opacity-0 ease-out duration-100"
: "opacity-100 ease-in duration-200", : "opacity-100 ease-in duration-200",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
)} )}
aria-hidden="true" aria-hidden="true"
></span> ></span>
@ -49,7 +49,7 @@ export default function ToggleComponent({
enabled enabled
? "opacity-100 ease-in duration-200" ? "opacity-100 ease-in duration-200"
: "opacity-0 ease-out duration-100", : "opacity-0 ease-out duration-100",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
)} )}
aria-hidden="true" aria-hidden="true"
></span> ></span>

4
src/frontend/src/components/ui/accordion.tsx
View file

@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className className,
)} )}
{...props} {...props}
> >
@ -47,7 +47,7 @@ const AccordionContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
className className,
)} )}
{...props} {...props}
> >

2
src/frontend/src/components/ui/badge.tsx
View file

@ -19,7 +19,7 @@ const badgeVariants = cva(
defaultVariants: { defaultVariants: {
variant: "default", variant: "default",
}, },
} },
); );
export interface BadgeProps export interface BadgeProps

4
src/frontend/src/components/ui/button.tsx
View file

@ -30,7 +30,7 @@ const buttonVariants = cva(
variant: "default", variant: "default",
size: "default", size: "default",
}, },
} },
); );
export interface ButtonProps export interface ButtonProps
@ -49,7 +49,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props} {...props}
/> />
); );
} },
); );
Button.displayName = "Button"; Button.displayName = "Button";

4
src/frontend/src/components/ui/card.tsx
View file

@ -9,7 +9,7 @@ const Card = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all", "rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
className className,
)} )}
{...props} {...props}
/> />
@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"text-base font-semibold leading-tight tracking-tight", "text-base font-semibold leading-tight tracking-tight",
className className,
)} )}
{...props} {...props}
/> />

2
src/frontend/src/components/ui/checkbox.tsx
View file

@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className className,
)} )}
{...props} {...props}
> >

10
src/frontend/src/components/ui/dialog.tsx
View file

@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in", "fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
className className,
)} )}
{...props} {...props}
/> />
@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0", "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
className className,
)} )}
{...props} {...props}
> >
@ -66,7 +66,7 @@ const DialogHeader = ({
<div <div
className={cn( className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left", "flex flex-col space-y-1.5 text-center sm:text-left",
className className,
)} )}
{...props} {...props}
/> />
@ -80,7 +80,7 @@ const DialogFooter = ({
<div <div
className={cn( className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className className,
)} )}
{...props} {...props}
/> />
@ -95,7 +95,7 @@ const DialogTitle = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"text-lg font-semibold leading-none tracking-tight", "text-lg font-semibold leading-none tracking-tight",
className className,
)} )}
{...props} {...props}
/> />

14
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
className={cn( className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
> >
@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className className,
)} )}
{...props} {...props}
/> />
@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className className,
)} )}
{...props} {...props}
/> />
@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className className,
)} )}
checked={checked} checked={checked}
{...props} {...props}
@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className className,
)} )}
{...props} {...props}
> >
@ -148,7 +148,7 @@ const DropdownMenuLabel = React.forwardRef<
className={cn( className={cn(
"px-2 pl-2 py-1.5 text-sm font-semibold", "px-2 pl-2 py-1.5 text-sm font-semibold",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />

4
src/frontend/src/components/ui/input.tsx
View file

@ -11,13 +11,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
type={type} type={type}
className={cn( className={cn(
"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
/> />
); );
} },
); );
Input.displayName = "Input"; Input.displayName = "Input";

2
src/frontend/src/components/ui/label.tsx
View file

@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils"; import { cn } from "../../utils";
const labelVariants = cva( const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
); );
const Label = React.forwardRef< const Label = React.forwardRef<

24
src/frontend/src/components/ui/menubar.tsx
View file

@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-10 items-center space-x-1 rounded-md border bg-background p-1", "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
className className,
)} )}
{...props} {...props}
/> />
@ -39,7 +39,7 @@ const MenubarTrigger = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
className className,
)} )}
{...props} {...props}
/> />
@ -57,7 +57,7 @@ const MenubarSubTrigger = React.forwardRef<
className={cn( className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
> >
@ -75,7 +75,7 @@ const MenubarSubContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className className,
)} )}
{...props} {...props}
/> />
@ -88,7 +88,7 @@ const MenubarContent = React.forwardRef<
>( >(
( (
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
ref ref,
) => ( ) => (
<MenubarPrimitive.Portal> <MenubarPrimitive.Portal>
<MenubarPrimitive.Content <MenubarPrimitive.Content
@ -98,12 +98,12 @@ const MenubarContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in slide-in-from-top-1", "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in slide-in-from-top-1",
className className,
)} )}
{...props} {...props}
/> />
</MenubarPrimitive.Portal> </MenubarPrimitive.Portal>
) ),
); );
MenubarContent.displayName = MenubarPrimitive.Content.displayName; MenubarContent.displayName = MenubarPrimitive.Content.displayName;
@ -118,7 +118,7 @@ const MenubarItem = React.forwardRef<
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -133,7 +133,7 @@ const MenubarCheckboxItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className className,
)} )}
checked={checked} checked={checked}
{...props} {...props}
@ -156,7 +156,7 @@ const MenubarRadioItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className className,
)} )}
{...props} {...props}
> >
@ -181,7 +181,7 @@ const MenubarLabel = React.forwardRef<
className={cn( className={cn(
"px-2 py-1.5 text-sm font-semibold", "px-2 py-1.5 text-sm font-semibold",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -208,7 +208,7 @@ const MenubarShortcut = ({
<span <span
className={cn( className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground", "ml-auto text-xs tracking-widest text-muted-foreground",
className className,
)} )}
{...props} {...props}
/> />

2
src/frontend/src/components/ui/progress.tsx
View file

@ -12,7 +12,7 @@ const Progress = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-secondary", "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
className className,
)} )}
{...props} {...props}
> >

2
src/frontend/src/components/ui/rename-label.tsx
View file

@ -58,7 +58,7 @@ export default function RenameLabel(props) {
onInput={resizeInput} onInput={resizeInput}
className={cn( className={cn(
"px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md", "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
props.className props.className,
)} )}
onBlur={() => { onBlur={() => {
setIsRename(false); setIsRename(false);

6
src/frontend/src/components/ui/separator.tsx
View file

@ -10,7 +10,7 @@ const Separator = React.forwardRef<
>( >(
( (
{ className, orientation = "horizontal", decorative = true, ...props }, { className, orientation = "horizontal", decorative = true, ...props },
ref ref,
) => ( ) => (
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
ref={ref} ref={ref}
@ -19,11 +19,11 @@ const Separator = React.forwardRef<
className={cn( className={cn(
"shrink-0 bg-border", "shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className className,
)} )}
{...props} {...props}
/> />
) ),
); );
Separator.displayName = SeparatorPrimitive.Root.displayName; Separator.displayName = SeparatorPrimitive.Root.displayName;

4
src/frontend/src/components/ui/switch.tsx
View file

@ -11,14 +11,14 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Root <SwitchPrimitives.Root
className={cn( className={cn(
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className className,
)} )}
{...props} {...props}
ref={ref} ref={ref}
> >
<SwitchPrimitives.Thumb <SwitchPrimitives.Thumb
className={cn( className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>

4
src/frontend/src/components/ui/table.tsx
View file

@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className className,
)} )}
{...props} {...props}
/> />
@ -70,7 +70,7 @@ const TableHead = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className className,
)} )}
{...props} {...props}
/> />

6
src/frontend/src/components/ui/tabs.tsx
View file

@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className className,
)} )}
{...props} {...props}
/> />
@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted", "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
className className,
)} )}
{...props} {...props}
/> />
@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className className,
)} )}
{...props} {...props}
/> />

4
src/frontend/src/components/ui/textarea.tsx
View file

@ -10,13 +10,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
<textarea <textarea
className={cn( className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
/> />
); );
} },
); );
Textarea.displayName = "Textarea"; Textarea.displayName = "Textarea";

2
src/frontend/src/components/ui/tooltip.tsx
View file

@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className className,
)} )}
{...props} {...props}
/> />

2
src/frontend/src/constants.tsx
View file

@ -134,7 +134,7 @@ TWEAKS = ${
} }
flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS) flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
# Now you can use it like any chain # Now you can use it like any chain
flow("Hey, have you heard of LangFlow?")`; flow("Hey, have you heard of Langflow?")`;
}; };
function buildTweakObject(tweak) { function buildTweakObject(tweak) {

2
src/frontend/src/contexts/alertContext.tsx
View file

@ -132,7 +132,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
function removeFromNotificationList(index: string) { function removeFromNotificationList(index: string) {
// set the notification list to a new array that filters out the alert with the matching id // set the notification list to a new array that filters out the alert with the matching id
setNotificationList((prevAlertsList) => setNotificationList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== index) prevAlertsList.filter((alert) => alert.id !== index),
); );
} }
return ( return (

2
src/frontend/src/contexts/darkContext.tsx
View file

@ -14,7 +14,7 @@ export const darkContext = createContext<darkContextType>(initialValue);
export function DarkProvider({ children }) { export function DarkProvider({ children }) {
const [dark, setDark] = useState( const [dark, setDark] = useState(
JSON.parse(window.localStorage.getItem("isDark")) ?? false JSON.parse(window.localStorage.getItem("isDark")) ?? false,
); );
useEffect(() => { useEffect(() => {
if (dark) { if (dark) {

2
src/frontend/src/contexts/locationContext.tsx
View file

@ -53,7 +53,7 @@ export const locationContext = createContext<locationContextType>(initialValue);
export function LocationProvider({ children }: { children: ReactNode }) { export function LocationProvider({ children }: { children: ReactNode }) {
const [current, setCurrent] = useState(initialValue.current); const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen, setIsStackedOpen] = useState( const [isStackedOpen, setIsStackedOpen] = useState(
initialValue.isStackedOpen initialValue.isStackedOpen,
); );
const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar); const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
const [extraNavigation, setExtraNavigation] = useState({ title: "" }); const [extraNavigation, setExtraNavigation] = useState({ title: "" });

26
src/frontend/src/contexts/tabsContext.tsx
View file

@ -57,12 +57,12 @@ const TabsContextInitialValue: TabsContextType = {
getTweak: {}, getTweak: {},
paste: ( paste: (
selection: { nodes: any; edges: any }, selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number } position: { x: number; y: number; paneX?: number; paneY?: number },
) => {}, ) => {},
}; };
export const TabsContext = createContext<TabsContextType>( export const TabsContext = createContext<TabsContextType>(
TabsContextInitialValue TabsContextInitialValue,
); );
export function TabsProvider({ children }: { children: ReactNode }) { export function TabsProvider({ children }: { children: ReactNode }) {
@ -104,14 +104,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}); });
window.localStorage.setItem( window.localStorage.setItem(
"tabsData", "tabsData",
JSON.stringify({ tabId, flows: Saveflows, id }) JSON.stringify({ tabId, flows: Saveflows, id }),
); );
} }
} }
// function loadCookie(cookie: string) { // function loadCookie(cookie: string) {
// if (cookie && Object.keys(templates).length > 0) { // if (cookie && Object.keys(templates).length > 0) {
// let cookieObject: LangFlowState = JSON.parse(cookie); // let cookieObject: LangflowState = JSON.parse(cookie);
// try { // try {
// cookieObject.flows.forEach((flow) => { // cookieObject.flows.forEach((flow) => {
// if (!flow.data) { // if (!flow.data) {
@ -236,7 +236,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
function updateNodeEdges( function updateNodeEdges(
flow: FlowType, flow: FlowType,
node: NodeType, node: NodeType,
template: APIClassType template: APIClassType,
) { ) {
flow.data.edges.forEach((edge) => { flow.data.edges.forEach((edge) => {
if (edge.source === node.id) { if (edge.source === node.id) {
@ -256,7 +256,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
function updateNodeTemplate(node: NodeType, template: APIClassType) { function updateNodeTemplate(node: NodeType, template: APIClassType) {
node.data.node.template = updateTemplate( node.data.node.template = updateTemplate(
template["template"] as unknown as APITemplateType, template["template"] as unknown as APITemplateType,
node.data.node.template as APITemplateType node.data.node.template as APITemplateType,
); );
} }
@ -278,7 +278,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
function downloadFlow(flow: FlowType) { function downloadFlow(flow: FlowType) {
// create a data URI with the current flow data // create a data URI with the current flow data
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
JSON.stringify(flow) JSON.stringify(flow),
)}`; )}`;
// create a link element and set its properties // create a link element and set its properties
@ -296,7 +296,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
function downloadFlows() { function downloadFlows() {
downloadFlowsFromDatabase().then((flows) => { downloadFlowsFromDatabase().then((flows) => {
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
JSON.stringify(flows) JSON.stringify(flows),
)}`; )}`;
// create a link element and set its properties // create a link element and set its properties
@ -383,7 +383,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
function paste( function paste(
selectionInstance, selectionInstance,
position: { x: number; y: number; paneX?: number; paneY?: number } position: { x: number; y: number; paneX?: number; paneY?: number },
) { ) {
let minimumX = Infinity; let minimumX = Infinity;
let minimumY = Infinity; let minimumY = Infinity;
@ -464,7 +464,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
animated: targetHandle.split("|")[0] === "Text", animated: targetHandle.split("|")[0] === "Text",
selected: false, selected: false,
}, },
edges.map((e) => ({ ...e, selected: false })) edges.map((e) => ({ ...e, selected: false })),
); );
}); });
reactFlowInstance.setEdges(edges); reactFlowInstance.setEdges(edges);
@ -472,7 +472,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const addFlow = async ( const addFlow = async (
flow?: FlowType, flow?: FlowType,
newProject?: Boolean newProject?: Boolean,
): Promise<String> => { ): Promise<String> => {
if (newProject) { if (newProject) {
let flowData = extractDataFromFlow(flow); let flowData = extractDataFromFlow(flow);
@ -503,7 +503,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
} else { } else {
paste( paste(
{ nodes: flow.data.nodes, edges: flow.data.edges }, { nodes: flow.data.nodes, edges: flow.data.edges },
{ x: 10, y: 10 } { x: 10, y: 10 },
); );
} }
}; };
@ -553,7 +553,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
node.data.node.description = template["description"]; node.data.node.description = template["description"];
node.data.node.template = updateTemplate( node.data.node.template = updateTemplate(
template["template"] as unknown as APITemplateType, template["template"] as unknown as APITemplateType,
node.data.node.template as APITemplateType node.data.node.template as APITemplateType,
); );
} }
}); });

10
src/frontend/src/contexts/typesContext.tsx
View file

@ -47,7 +47,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
acc[c] = result.data[curr][c]; acc[c] = result.data[curr][c];
}); });
return acc; return acc;
}, {}) }, {}),
); );
// Set the types by reducing over the keys of the result data and updating the accumulator. // Set the types by reducing over the keys of the result data and updating the accumulator.
setTypes( setTypes(
@ -62,10 +62,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
result.data[curr][c].base_classes?.forEach((b) => { result.data[curr][c].base_classes?.forEach((b) => {
acc[b] = curr; acc[b] = curr;
}); });
} },
); );
return acc; return acc;
}, {}) }, {}),
); );
} }
// Clear the interval if successful. // Clear the interval if successful.
@ -99,12 +99,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
function deleteNode(idx: string) { function deleteNode(idx: string) {
reactFlowInstance.setNodes( reactFlowInstance.setNodes(
reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx) reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx),
); );
reactFlowInstance.setEdges( reactFlowInstance.setEdges(
reactFlowInstance reactFlowInstance
.getEdges() .getEdges()
.filter((ns) => ns.source !== idx && ns.target !== idx) .filter((ns) => ns.source !== idx && ns.target !== idx),
); );
} }
return ( return (

4
src/frontend/src/contexts/undoRedoContext.tsx
View file

@ -52,7 +52,7 @@ export function UndoRedoProvider({ children }) {
const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => [])); const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => [])); const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
const [tabIndex, setTabIndex] = useState( const [tabIndex, setTabIndex] = useState(
flows.findIndex((f) => f.id === tabId) flows.findIndex((f) => f.id === tabId),
); );
useEffect(() => { useEffect(() => {
@ -70,7 +70,7 @@ export function UndoRedoProvider({ children }) {
let newPast = cloneDeep(old); let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex].slice( newPast[tabIndex] = old[tabIndex].slice(
old[tabIndex].length - defaultOptions.maxHistorySize + 1, old[tabIndex].length - defaultOptions.maxHistorySize + 1,
old[tabIndex].length old[tabIndex].length,
); );
newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newPast; return newPast;

14
src/frontend/src/controllers/API/index.ts
View file

@ -24,7 +24,7 @@ const GITHUB_API_URL = "https://api.github.com";
export async function getRepoStars(owner, repo) { export async function getRepoStars(owner, repo) {
try { try {
const response = await axios.get( const response = await axios.get(
`${GITHUB_API_URL}/repos/${owner}/${repo}` `${GITHUB_API_URL}/repos/${owner}/${repo}`,
); );
return response.data.stargazers_count; return response.data.stargazers_count;
} catch (error) { } catch (error) {
@ -44,7 +44,7 @@ export async function sendAll(data: sendAllProps) {
} }
export async function postValidateCode( export async function postValidateCode(
code: string code: string,
): Promise<AxiosResponse<errorsTypeAPI>> { ): Promise<AxiosResponse<errorsTypeAPI>> {
return await axios.post("/api/v1/validate/code", { code }); return await axios.post("/api/v1/validate/code", { code });
} }
@ -56,7 +56,7 @@ export async function postValidateCode(
* @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results. * @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
*/ */
export async function checkPrompt( export async function checkPrompt(
template: string template: string,
): Promise<AxiosResponse<PromptTypeAPI>> { ): Promise<AxiosResponse<PromptTypeAPI>> {
return await axios.post("/api/v1/validate/prompt", { template }); return await axios.post("/api/v1/validate/prompt", { template });
} }
@ -120,7 +120,7 @@ export async function saveFlowToDatabase(newFlow: {
* @throws Will throw an error if the update fails. * @throws Will throw an error if the update fails.
*/ */
export async function updateFlowInDatabase( export async function updateFlowInDatabase(
updatedFlow: FlowType updatedFlow: FlowType,
): Promise<FlowType> { ): Promise<FlowType> {
try { try {
const response = await axios.patch(`/api/v1/flows/${updatedFlow.id}`, { const response = await axios.patch(`/api/v1/flows/${updatedFlow.id}`, {
@ -296,7 +296,7 @@ export async function getHealth() {
* *
*/ */
export async function getBuildStatus( export async function getBuildStatus(
flowId: string flowId: string,
): Promise<BuildStatusTypeAPI> { ): Promise<BuildStatusTypeAPI> {
return await axios.get(`/api/v1/build/${flowId}/status`); return await axios.get(`/api/v1/build/${flowId}/status`);
} }
@ -309,7 +309,7 @@ export async function getBuildStatus(
* *
*/ */
export async function postBuildInit( export async function postBuildInit(
flow: FlowType flow: FlowType,
): Promise<AxiosResponse<InitTypeAPI>> { ): Promise<AxiosResponse<InitTypeAPI>> {
return await axios.post(`/api/v1/build/init/${flow.id}`, flow); return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
} }
@ -325,7 +325,7 @@ export async function postBuildInit(
*/ */
export async function uploadFile( export async function uploadFile(
file: File, file: File,
id: string id: string,
): Promise<AxiosResponse<UploadFileTypeAPI>> { ): Promise<AxiosResponse<UploadFileTypeAPI>> {
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); formData.append("file", file);

6
src/frontend/src/flow_constants.tsx
View file

@ -20,7 +20,7 @@ export const DESCRIPTIONS: string[] = [
"Generate, Innovate, Communicate.", "Generate, Innovate, Communicate.",
"Conversation Catalyst Engine.", "Conversation Catalyst Engine.",
"Language Chainlink Master.", "Language Chainlink Master.",
"Design Dialogues with LangFlow.", "Design Dialogues with Langflow.",
"Nurture NLP Nodes Here.", "Nurture NLP Nodes Here.",
"Conversational Cartography Unlocked.", "Conversational Cartography Unlocked.",
"Design, Develop, Dialogize.", "Design, Develop, Dialogize.",
@ -31,7 +31,7 @@ export const DESCRIPTIONS: string[] = [
"Where Language Meets Logic.", "Where Language Meets Logic.",
"Building Intelligent Interactions.", "Building Intelligent Interactions.",
"Your Passport to Linguistic Landscapes.", "Your Passport to Linguistic Landscapes.",
"Create, Curate, Communicate with LangFlow.", "Create, Curate, Communicate with Langflow.",
"Flow into the Future of Language.", "Flow into the Future of Language.",
"Mapping Meaningful Conversations.", "Mapping Meaningful Conversations.",
"Unravel the Art of Articulation.", "Unravel the Art of Articulation.",
@ -41,7 +41,7 @@ export const DESCRIPTIONS: string[] = [
"The Pinnacle of Prompt Generation.", "The Pinnacle of Prompt Generation.",
"Language Models, Mapped and Mastered.", "Language Models, Mapped and Mastered.",
"Powerful Prompts, Perfectly Positioned.", "Powerful Prompts, Perfectly Positioned.",
"Innovation in Interaction with LangFlow.", "Innovation in Interaction with Langflow.",
"Your Toolkit for Text Generation.", "Your Toolkit for Text Generation.",
"Unfolding Linguistic Possibilities.", "Unfolding Linguistic Possibilities.",
"Building Powerful Solutions with Language Models.", "Building Powerful Solutions with Language Models.",

2
src/frontend/src/icons/AzLogo/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as AzSVG } from "./az_logo.svg";
export const AzIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const AzIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <AzSVG ref={ref} {...props} />; return <AzSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/Bing/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as BingSVG } from "./bing.svg";
export const BingIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const BingIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <BingSVG ref={ref} {...props} />; return <BingSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/FacebookMessenger/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as FacebookMessengerSVG } from "./Facebook_Messenger_log
export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <FacebookMessengerSVG ref={ref} {...props} />; return <FacebookMessengerSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/IFixIt/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as IFixItSVG } from "./ifixit-seeklogo.com.svg";
export const IFixIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const IFixIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <IFixItSVG ref={ref} {...props} />; return <IFixItSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/Meta/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as MetaSVG } from "./meta-icon.svg";
export const MetaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const MetaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <MetaSVG ref={ref} {...props} />; return <MetaSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/Searx/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as SearxSVG } from "./Searx_logo.svg";
export const SearxIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const SearxIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <SearxSVG ref={ref} {...props} />; return <SearxSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/Slack/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as SlackSVG } from "./slack-icon.svg";
export const SlackIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const SlackIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <SlackSVG ref={ref} {...props} />; return <SlackSVG ref={ref} {...props} />;
} },
); );

2
src/frontend/src/icons/Word/index.tsx
View file

@ -4,5 +4,5 @@ import { ReactComponent as WordSVG } from "./word.svg";
export const WordIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const WordIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <WordSVG ref={ref} {...props} />; return <WordSVG ref={ref} {...props} />;
} },
); );

4
src/frontend/src/index.tsx
View file

@ -8,13 +8,13 @@ import ContextWrapper from "./contexts";
import "./index.css"; import "./index.css";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement,
); );
root.render( root.render(
<ContextWrapper> <ContextWrapper>
<BrowserRouter> <BrowserRouter>
<App /> <App />
</BrowserRouter> </BrowserRouter>
</ContextWrapper> </ContextWrapper>,
); );
reportWebVitals(); reportWebVitals();

58
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -156,7 +156,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n].type === "code" || t.data.node.template[n].type === "code" ||
t.data.node.template[n].type === "prompt" || t.data.node.template[n].type === "prompt" ||
t.data.node.template[n].type === "file" || t.data.node.template[n].type === "file" ||
t.data.node.template[n].type === "int") t.data.node.template[n].type === "int"),
) )
.map((n, i) => { .map((n, i) => {
arrNodesWithValues.push(t["id"]); arrNodesWithValues.push(t["id"]);
@ -180,7 +180,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
} }
const existingTweak = tweak.current.find((element) => const existingTweak = tweak.current.find((element) =>
element.hasOwnProperty(tw) element.hasOwnProperty(tw),
); );
if (existingTweak) { if (existingTweak) {
@ -327,7 +327,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
"w-full rounded-lg bg-muted border-[1px] border-gray-200", "w-full rounded-lg bg-muted border-[1px] border-gray-200",
1 == 1 1 == 1
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden",
)} )}
> >
{flow["data"]["nodes"].map((t: any, index) => ( {flow["data"]["nodes"].map((t: any, index) => (
@ -368,7 +368,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n].type === t.data.node.template[n].type ===
"file" || "file" ||
t.data.node.template[n].type === t.data.node.template[n].type ===
"int") "int"),
) )
.map((n, i) => { .map((n, i) => {
//console.log(t.data.node.template[n]); //console.log(t.data.node.template[n]);
@ -411,7 +411,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node t.data.node
.template[n] .template[n],
); );
}} }}
/> />
@ -422,7 +422,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
content={buildContent( content={buildContent(
t.data.node.template[ t.data.node.template[
n n
].value ].value,
)} )}
> >
<div> <div>
@ -435,14 +435,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
.value, .value,
t.data, t.data,
t.data.node t.data.node
.template[n] .template[n],
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node t.data.node
.template[n] .template[n],
); );
}} }}
/> />
@ -464,14 +464,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data, t.data,
t.data.node.template[ t.data.node.template[
n n
] ],
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node t.data.node
.template[n] .template[n],
); );
}} }}
/> />
@ -496,7 +496,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
e, e,
t.data.node.template[ t.data.node.template[
n n
] ],
); );
}} }}
size="small" size="small"
@ -512,8 +512,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n],
) ),
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
@ -526,7 +526,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
].value ?? "" ].value ?? ""
} }
onChange={( onChange={(
k: any k: any,
) => {}} ) => {}}
fileTypes={ fileTypes={
t.data.node.template[ t.data.node.template[
@ -539,7 +539,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
].suffixes ].suffixes
} }
onFileChange={( onFileChange={(
k: any k: any,
) => {}} ) => {}}
></InputFileComponent> ></InputFileComponent>
</div> </div>
@ -554,7 +554,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n],
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
@ -562,7 +562,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
k, k,
t.data.node.template[ t.data.node.template[
n n
] ],
); );
}} }}
/> />
@ -585,14 +585,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
k, k,
t.data.node.template[ t.data.node.template[
n n
] ],
); );
}} }}
value={getValue( value={getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n],
)} )}
></Dropdown> ></Dropdown>
</div> </div>
@ -606,7 +606,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n],
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
@ -614,7 +614,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
k, k,
t.data.node.template[ t.data.node.template[
n n
] ],
); );
}} }}
/> />
@ -628,8 +628,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n],
) ),
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
@ -643,14 +643,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data, t.data,
t.data.node.template[ t.data.node.template[
n n
] ],
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node t.data.node
.template[n] .template[n],
); );
}} }}
/> />
@ -665,8 +665,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n],
) ),
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
@ -680,14 +680,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data, t.data,
t.data.node.template[ t.data.node.template[
n n
] ],
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node t.data.node
.template[n] .template[n],
); );
}} }}
/> />

8
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -47,8 +47,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].type === "code" || data.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" || data.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" || data.node.template[t].type === "file" ||
data.node.template[t].type === "int") data.node.template[t].type === "int"),
).length ).length,
); );
const [nodeValue, setNodeValue] = useState(null); const [nodeValue, setNodeValue] = useState(null);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
@ -104,7 +104,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
"w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200", "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
nodeLength > limitScrollFieldsModal nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden",
)} )}
> >
{nodeLength > 0 && ( {nodeLength > 0 && (
@ -131,7 +131,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].type === "code" || data.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" || data.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" || data.node.template[t].type === "file" ||
data.node.template[t].type === "int") data.node.template[t].type === "int"),
) )
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-10 dark:border-b-muted"> <TableRow key={i} className="h-10 dark:border-b-muted">

6
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -22,7 +22,7 @@ export default function ModalField({
index, index,
}) { }) {
const [enabled, setEnabled] = useState( const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false data.node.template[name]?.value ?? false,
); );
const display = const display =
type === "str" || type === "str" ||
@ -42,12 +42,12 @@ export default function ModalField({
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].advanced && data.node.template[t].advanced &&
data.node.template[t].show data.node.template[t].show,
).length - ).length -
1 === 1 ===
index index
? "pb-4" ? "pb-4"
: "" : "",
)} )}
> >
{display && ( {display && (

6
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -99,10 +99,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].advanced && data.node.template[t].advanced &&
data.node.template[t].show data.node.template[t].show,
).length > limitScrollFieldsModal ).length > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden",
)} )}
> >
<div className="flex flex-col h-full gap-5"> <div className="flex flex-col h-full gap-5">
@ -111,7 +111,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].advanced && data.node.template[t].advanced &&
data.node.template[t].show data.node.template[t].show,
) )
.map((t: string, idx) => { .map((t: string, idx) => {
return ( return (

2
src/frontend/src/modals/chatModal/chatInput/index.tsx
View file

@ -54,7 +54,7 @@ export default function ChatInput({
? " bg-input text-black dark:bg-gray-700 dark:text-gray-300" ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
: " bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300", : " bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
"form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" + "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
INPUT_STYLE INPUT_STYLE,
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
/> />

6
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -34,12 +34,12 @@ export default function ChatMessage({
"w-full py-2 pl-2 flex", "w-full py-2 pl-2 flex",
chat.isSend chat.isSend
? "bg-background dark:bg-gray-900 " ? "bg-background dark:bg-gray-900 "
: "bg-input dark:bg-gray-800" : "bg-input dark:bg-gray-800",
)} )}
> >
<div <div
className={classNames( className={classNames(
"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center" "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center",
)} )}
> >
{!chat.isSend && ( {!chat.isSend && (
@ -105,7 +105,7 @@ export default function ChatMessage({
children[0] = (children[0] as string).replace( children[0] = (children[0] as string).replace(
"`▍`", "`▍`",
"▍" "▍",
); );
} }

10
src/frontend/src/modals/chatModal/index.tsx
View file

@ -51,7 +51,7 @@ export default function ChatModal({
message: string, message: string,
isSend: boolean, isSend: boolean,
thought?: string, thought?: string,
files?: Array<any> files?: Array<any>,
) => { ) => {
setChatHistory((old) => { setChatHistory((old) => {
let newChat = _.cloneDeep(old); let newChat = _.cloneDeep(old);
@ -147,10 +147,10 @@ export default function ChatModal({
isSend: !chatItem.is_bot, isSend: !chatItem.is_bot,
message: chatItem.message, message: chatItem.message,
thought: chatItem.intermediate_steps, thought: chatItem.intermediate_steps,
} },
); );
} }
} },
); );
return newChatHistory; return newChatHistory;
}); });
@ -189,7 +189,7 @@ export default function ChatModal({
try { try {
const urlWs = getWebSocketUrl( const urlWs = getWebSocketUrl(
id.current, id.current,
process.env.NODE_ENV === "development" process.env.NODE_ENV === "development",
); );
const newWs = new WebSocket(urlWs); const newWs = new WebSocket(urlWs);
newWs.onopen = () => { newWs.onopen = () => {
@ -380,7 +380,7 @@ export default function ChatModal({
<span> <span>
👋{" "} 👋{" "}
<span className="text-gray-600 dark:text-gray-300 text-lg"> <span className="text-gray-600 dark:text-gray-300 text-lg">
LangFlow Chat Langflow Chat
</span> </span>
</span> </span>
<br /> <br />

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -117,7 +117,7 @@ export default function CodeAreaModal({
setErrorData({ setErrorData({
title: title:
"There is something wrong with this code, please review it", "There is something wrong with this code, please review it",
}) }),
); );
}} }}
type="submit" type="submit"

2
src/frontend/src/modals/exportModal/index.tsx
View file

@ -36,7 +36,7 @@ export default function ExportModal() {
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const [name, setName] = useState(flows.find((f) => f.id === tabId).name); const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((f) => f.id === tabId).description,
); );
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>

2
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -27,7 +27,7 @@ export default function FlowSettingsModal() {
const maxLength = 50; const maxLength = 50;
const [name, setName] = useState(flows.find((f) => f.id === tabId).name); const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((f) => f.id === tabId).description,
); );
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);

4
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -81,7 +81,7 @@ export default function ButtonBox({
bgColor, bgColor,
height, height,
width, width,
padding padding,
)} )}
> >
<div <div
@ -98,7 +98,7 @@ export default function ButtonBox({
className={classNames( className={classNames(
"w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline", "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
titleFontSize, titleFontSize,
marginTop marginTop,
)} )}
> >
{title} {title}

17
src/frontend/src/modals/importModal/index.tsx
View file

@ -1,22 +1,18 @@
import { import {
XMarkIcon,
ArrowDownTrayIcon,
DocumentDuplicateIcon, DocumentDuplicateIcon,
ComputerDesktopIcon, ComputerDesktopIcon,
ArrowUpTrayIcon, ArrowUpTrayIcon,
ArrowLeftIcon, ArrowLeftIcon,
CommandLineIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import ButtonBox from "./buttonBox"; import ButtonBox from "./buttonBox";
import { getExamples } from "../../controllers/API"; import { getExamples } from "../../controllers/API";
import { error } from "console";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import LoadingComponent from "../../components/loadingComponent"; import LoadingComponent from "../../components/loadingComponent";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { classNames, snakeToSpaces, toNormalCase } from "../../utils"; import { classNames } from "../../utils";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -26,7 +22,6 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { IMPORT_DIALOG_SUBTITLE } from "../../constants"; import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
export default function ImportModal() { export default function ImportModal() {
@ -58,7 +53,7 @@ export default function ImportModal() {
setErrorData({ setErrorData({
title: "there was an error loading examples, please try again", title: "there was an error loading examples, please try again",
list: [error.message], list: [error.message],
}) }),
); );
} }
@ -69,7 +64,7 @@ export default function ImportModal() {
className={classNames( className={classNames(
showExamples showExamples
? "lg:max-w-[650px] h-[600px]" ? "lg:max-w-[650px] h-[600px]"
: "lg:max-w-[650px] h-[450px]" : "lg:max-w-[650px] h-[450px]",
)} )}
> >
<DialogHeader> <DialogHeader>
@ -109,7 +104,7 @@ export default function ImportModal() {
"h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide", "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
showExamples && !loadingExamples showExamples && !loadingExamples
? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto" ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
: "flex flex-row justify-center items-center" : "flex flex-row justify-center items-center",
)} )}
> >
{!showExamples && ( {!showExamples && (
@ -194,7 +189,7 @@ export default function ImportModal() {
fill="currentColor" fill="currentColor"
/> />
</svg> </svg>
<span className="ml-2 ">LangFlow Examples</span> <span className="ml-2 ">Langflow Examples</span>
</a> </a>
</div> </div>
</DialogFooter> </DialogFooter>

4
src/frontend/src/pages/CommunityPage/index.tsx
View file

@ -28,7 +28,7 @@ export default function CommunityPage() {
setErrorData({ setErrorData({
title: "there was an error loading examples, please try again", title: "there was an error loading examples, please try again",
list: [error.message], list: [error.message],
}) }),
); );
} }
const navigate = useNavigate(); const navigate = useNavigate();
@ -57,7 +57,7 @@ export default function CommunityPage() {
</div> </div>
</div> </div>
<span className="flex pb-8 px-6 w-[70%] text-muted-foreground"> <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
Discover and learn from shared examples by the LangFlow community. We Discover and learn from shared examples by the Langflow community. We
welcome new example contributions that can help our community explore welcome new example contributions that can help our community explore
new and powerful features. new and powerful features.
</span> </span>

27
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -111,10 +111,10 @@ export default function Page({ flow }: { flow: FlowType }) {
const { setExtraComponent, setExtraNavigation } = useContext(locationContext); const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const [nodes, setNodes, onNodesChange] = useNodesState( const [nodes, setNodes, onNodesChange] = useNodesState(
flow.data?.nodes ?? [] flow.data?.nodes ?? [],
); );
const [edges, setEdges, onEdgesChange] = useEdgesState( const [edges, setEdges, onEdgesChange] = useEdgesState(
flow.data?.edges ?? [] flow.data?.edges ?? [],
); );
const { setViewport } = useReactFlow(); const { setViewport } = useReactFlow();
const edgeUpdateSuccessful = useRef(true); const edgeUpdateSuccessful = useRef(true);
@ -156,7 +156,7 @@ export default function Page({ flow }: { flow: FlowType }) {
}; };
}); });
}, },
[onEdgesChange, setNodes, setTabsState, tabId] [onEdgesChange, setNodes, setTabsState, tabId],
); );
const onNodesChangeMod = useCallback( const onNodesChangeMod = useCallback(
@ -171,7 +171,7 @@ export default function Page({ flow }: { flow: FlowType }) {
}; };
}); });
}, },
[onNodesChange, setTabsState, tabId] [onNodesChange, setTabsState, tabId],
); );
const onConnect = useCallback( const onConnect = useCallback(
@ -188,15 +188,15 @@ export default function Page({ flow }: { flow: FlowType }) {
: "stroke-gray-900 dark:stroke-gray-200", : "stroke-gray-900 dark:stroke-gray-200",
animated: params.targetHandle.split("|")[0] === "Text", animated: params.targetHandle.split("|")[0] === "Text",
}, },
eds eds,
) ),
); );
setNodes((x) => { setNodes((x) => {
let newX = _.cloneDeep(x); let newX = _.cloneDeep(x);
return newX; return newX;
}); });
}, },
[setEdges, setNodes, takeSnapshot] [setEdges, setNodes, takeSnapshot],
); );
const onNodeDragStart: NodeDragHandler = useCallback(() => { const onNodeDragStart: NodeDragHandler = useCallback(() => {
@ -230,7 +230,7 @@ export default function Page({ flow }: { flow: FlowType }) {
// Extract the data from the drag event and parse it as a JSON object // Extract the data from the drag event and parse it as a JSON object
let data: { type: string; node?: APIClassType } = JSON.parse( let data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("json") event.dataTransfer.getData("json"),
); );
// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
@ -275,7 +275,7 @@ export default function Page({ flow }: { flow: FlowType }) {
setNodes((nds) => nds.concat(newNode)); setNodes((nds) => nds.concat(newNode));
}, },
// Specify dependencies for useCallback // Specify dependencies for useCallback
[getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot] [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot],
); );
useEffect(() => { useEffect(() => {
@ -291,11 +291,12 @@ export default function Page({ flow }: { flow: FlowType }) {
takeSnapshot(); takeSnapshot();
setEdges( setEdges(
edges.filter( edges.filter(
(ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id) (ns) =>
) !mynodes.some((n) => ns.source === n.id || ns.target === n.id),
),
); );
}, },
[takeSnapshot, edges, setEdges] [takeSnapshot, edges, setEdges],
); );
const onEdgeUpdateStart = useCallback(() => { const onEdgeUpdateStart = useCallback(() => {
@ -309,7 +310,7 @@ export default function Page({ flow }: { flow: FlowType }) {
setEdges((els) => updateEdge(oldEdge, newConnection, els)); setEdges((els) => updateEdge(oldEdge, newConnection, els));
} }
}, },
[] [],
); );
const onEdgeUpdateEnd = useCallback((_, edge) => { const onEdgeUpdateEnd = useCallback((_, edge) => {

14
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -30,7 +30,7 @@ export default function ExtraSidebar() {
const isPending = tabsState[tabId]?.isPending; const isPending = tabsState[tabId]?.isPending;
function onDragStart( function onDragStart(
event: React.DragEvent<any>, event: React.DragEvent<any>,
data: { type: string; node?: APIClassType } data: { type: string; node?: APIClassType },
) { ) {
//start drag event //start drag event
var crt = event.currentTarget.cloneNode(true); var crt = event.currentTarget.cloneNode(true);
@ -49,7 +49,7 @@ export default function ExtraSidebar() {
Object.keys(data).forEach((d: keyof APIObjectType, i) => { Object.keys(data).forEach((d: keyof APIObjectType, i) => {
ret[d] = {}; ret[d] = {};
let keys = Object.keys(data[d]).filter((nd) => let keys = Object.keys(data[d]).filter((nd) =>
nd.toLowerCase().includes(e.toLowerCase()) nd.toLowerCase().includes(e.toLowerCase()),
); );
keys.forEach((element) => { keys.forEach((element) => {
ret[d][element] = data[d][element]; ret[d][element] = data[d][element];
@ -77,7 +77,7 @@ export default function ExtraSidebar() {
<ShadTooltip content="Export" side="top"> <ShadTooltip content="Export" side="top">
<button <button
className={classNames( className={classNames(
"hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md" "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md",
)} )}
onClick={(event) => { onClick={(event) => {
openPopUp(<ExportModal />); openPopUp(<ExportModal />);
@ -89,7 +89,7 @@ export default function ExtraSidebar() {
<ShadTooltip content="Code" side="top"> <ShadTooltip content="Code" side="top">
<button <button
className={classNames( className={classNames(
"hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md" "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md",
)} )}
onClick={(event) => { onClick={(event) => {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />); openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@ -176,8 +176,8 @@ export default function ExtraSidebar() {
onDragEnd={() => { onDragEnd={() => {
document.body.removeChild( document.body.removeChild(
document.getElementsByClassName( document.getElementsByClassName(
"cursor-grabbing" "cursor-grabbing",
)[0] )[0],
); );
}} }}
> >
@ -195,7 +195,7 @@ export default function ExtraSidebar() {
</DisclosureComponent> </DisclosureComponent>
) : ( ) : (
<div key={i}></div> <div key={i}></div>
) ),
)} )}
</div> </div>
</div> </div>

12
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -19,8 +19,8 @@ const NodeToolbarComponent = (props) => {
props.data.node.template[t].type === "prompt" || props.data.node.template[t].type === "prompt" ||
props.data.node.template[t].type === "file" || props.data.node.template[t].type === "file" ||
props.data.node.template[t].type === "Any" || props.data.node.template[t].type === "Any" ||
props.data.node.template[t].type === "int") props.data.node.template[t].type === "int"),
).length ).length,
); );
const { setLastCopiedSelection, paste } = useContext(TabsContext); const { setLastCopiedSelection, paste } = useContext(TabsContext);
@ -43,7 +43,7 @@ const NodeToolbarComponent = (props) => {
<ShadTooltip content="Duplicate" side="top"> <ShadTooltip content="Duplicate" side="top">
<button <button
className={classNames( className={classNames(
"hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10",
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -58,7 +58,7 @@ const NodeToolbarComponent = (props) => {
y: 10, y: 10,
paneX: reactFlowInstance.getNode(props.data.id).position.x, paneX: reactFlowInstance.getNode(props.data.id).position.x,
paneY: reactFlowInstance.getNode(props.data.id).position.y, paneY: reactFlowInstance.getNode(props.data.id).position.y,
} },
); );
}} }}
> >
@ -79,7 +79,7 @@ const NodeToolbarComponent = (props) => {
"hover:dark:hover:bg-[#242f47] transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" + "hover:dark:hover:bg-[#242f47] transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" +
(props.data.node.documentation === "" (props.data.node.documentation === ""
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground"),
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -101,7 +101,7 @@ const NodeToolbarComponent = (props) => {
"hover:dark:hover:bg-[#242f47] transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" + "hover:dark:hover:bg-[#242f47] transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" +
(nodeLength == 0 (nodeLength == 0
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground"),
)} )}
onClick={(event) => { onClick={(event) => {
if (nodeLength == 0) { if (nodeLength == 0) {

2
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -31,7 +31,7 @@ export default function FlowPage() {
href="https://logspace.ai/" href="https://logspace.ai/"
className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12" className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
> >
{version && <div className="mt-1">⛓️ LangFlow v{version}</div>} {version && <div className="mt-1">⛓️ Langflow v{version}</div>}
<div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div> <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
</a> </a>
</div> </div>

2
src/frontend/src/types/tabs/index.ts
View file

@ -24,7 +24,7 @@ export type TabsContextType = {
setTabsState: Dispatch<SetStateAction<TabsState>>; setTabsState: Dispatch<SetStateAction<TabsState>>;
paste: ( paste: (
selection: { nodes: any; edges: any }, selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number } position: { x: number; y: number; paneX?: number; paneY?: number },
) => void; ) => void;
lastCopiedSelection: { nodes: any; edges: any }; lastCopiedSelection: { nodes: any; edges: any };
setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void; setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;

28
src/frontend/src/utils.ts
View file

@ -467,7 +467,7 @@ export function cn(...inputs: ClassValue[]) {
export function measureTextHeight( export function measureTextHeight(
text: string, text: string,
width: number, width: number,
fontSize: number fontSize: number,
) { ) {
const charHeight = fontSize; const charHeight = fontSize;
const lineHeight = charHeight * 1.5; const lineHeight = charHeight * 1.5;
@ -494,7 +494,7 @@ export function toCamelCase(str: string) {
.map((word, index) => .map((word, index) =>
index === 0 index === 0
? word.toLowerCase() ? word.toLowerCase()
: word[0].toUpperCase() + word.slice(1).toLowerCase() : word[0].toUpperCase() + word.slice(1).toLowerCase(),
) )
.join(""); .join("");
} }
@ -555,7 +555,7 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
export function isValidConnection( export function isValidConnection(
{ source, target, sourceHandle, targetHandle }: Connection, { source, target, sourceHandle, targetHandle }: Connection,
reactFlowInstance: ReactFlowInstance reactFlowInstance: ReactFlowInstance,
) { ) {
if ( if (
sourceHandle.split("|")[0] === targetHandle.split("|")[0] || sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
@ -602,7 +602,7 @@ export function removeApiKeys(flow: FlowType): FlowType {
export function updateObject<T extends Record<string, any>>( export function updateObject<T extends Record<string, any>>(
reference: T, reference: T,
objectToUpdate: T objectToUpdate: T,
): T { ): T {
let clonedObject = _.cloneDeep(objectToUpdate); let clonedObject = _.cloneDeep(objectToUpdate);
// Loop through each key in the object to update // Loop through each key in the object to update
@ -633,7 +633,7 @@ export function debounce(func, wait) {
export function updateTemplate( export function updateTemplate(
reference: APITemplateType, reference: APITemplateType,
objectToUpdate: APITemplateType objectToUpdate: APITemplateType,
): APITemplateType { ): APITemplateType {
let clonedObject: APITemplateType = _.cloneDeep(reference); let clonedObject: APITemplateType = _.cloneDeep(reference);
@ -691,7 +691,7 @@ export function toTitleCase(str: string) {
.map((word, index) => { .map((word, index) => {
if (index === 0) { if (index === 0) {
return checkUpperWords( return checkUpperWords(
word[0].toUpperCase() + word.slice(1).toLowerCase() word[0].toUpperCase() + word.slice(1).toLowerCase(),
); );
} }
return checkUpperWords(word.toLowerCase()); return checkUpperWords(word.toLowerCase());
@ -703,7 +703,7 @@ export function toTitleCase(str: string) {
.map((word, index) => { .map((word, index) => {
if (index === 0) { if (index === 0) {
return checkUpperWords( return checkUpperWords(
word[0].toUpperCase() + word.slice(1).toLowerCase() word[0].toUpperCase() + word.slice(1).toLowerCase(),
); );
} }
return checkUpperWords(word.toLowerCase()); return checkUpperWords(word.toLowerCase());
@ -772,7 +772,7 @@ export function groupByFamily(data, baseClasses) {
}); });
let uniq = arrOfParent.filter( let uniq = arrOfParent.filter(
(item, index) => arrOfParent.indexOf(item) === index (item, index) => arrOfParent.indexOf(item) === index,
); );
Object.keys(data).map((d) => { Object.keys(data).map((d) => {
@ -792,7 +792,7 @@ export function groupByFamily(data, baseClasses) {
let groupedBy = arrOfType.filter((object, index, self) => { let groupedBy = arrOfType.filter((object, index, self) => {
const foundIndex = self.findIndex( const foundIndex = self.findIndex(
(o) => o.family === object.family && o.type === object.type (o) => o.family === object.family && o.type === object.type,
); );
return foundIndex === index; return foundIndex === index;
}); });
@ -818,7 +818,7 @@ export function buildTweaks(flow) {
} }
export function validateNode( export function validateNode(
n: NodeType, n: NodeType,
reactFlowInstance: ReactFlowInstance reactFlowInstance: ReactFlowInstance,
): Array<string> { ): Array<string> {
if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
return [ return [
@ -844,16 +844,16 @@ export function validateNode(
.some( .some(
(e) => (e) =>
e.targetHandle.split("|")[1] === t && e.targetHandle.split("|")[1] === t &&
e.targetHandle.split("|")[2] === n.id e.targetHandle.split("|")[2] === n.id,
) )
? [ ? [
`${type} is missing ${ `${type} is missing ${
template.display_name || toNormalCase(template[t].name) template.display_name || toNormalCase(template[t].name)
}.`, }.`,
] ]
: [] : [],
), ),
[] as string[] [] as string[],
); );
} }
@ -878,7 +878,7 @@ export function getRandomDescription(): string {
export function getRandomName( export function getRandomName(
retry: number = 0, retry: number = 0,
noSpace: boolean = false, noSpace: boolean = false,
maxRetries: number = 3 maxRetries: number = 3,
): string { ): string {
const left: string[] = ADJECTIVES; const left: string[] = ADJECTIVES;
const right: string[] = NOUNS; const right: string[] = NOUNS;