Skip to content

Commit 431bf81

Browse files
YukiyukiyeahYukiyukiyeah
authored
Merge branch 'main' into support-base-path
2 parents 982e304 + 40b48ee commit 431bf81

1,276 files changed

Lines changed: 112025 additions & 48545 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.cursor/rules/components/basic_component.mdc‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
description: Rules and checklist for creating a basic Langflow Component
3+
globs:
4+
alwaysApply: false
5+
---
6+
# Rule: How to Create a Basic Langflow Component
7+
8+
## Purpose
9+
Guide for Creating a Langflow Component
10+
11+
---
12+
13+
### 1. Gather Requirements
14+
15+
Ask the user for:
16+
- **Component Name:** What should the component be called?
17+
- **Description:** What does the component do?
18+
- **Inputs:** What are the required inputs? (e.g., text, dropdown, boolean, etc.)
19+
- **Outputs:** What should the component output? (e.g., a message, a value, etc.)
20+
- **Category:** Which component category should this component be stored under in `langflow/src/backend/base/langflow/components`
21+
22+
### 2. Define the Component
23+
24+
- Inherit from `Component`.
25+
- Set `display_name`, `description`, `icon`.
26+
- Define the `inputs` and `outputs` as lists of input/output field objects (e.g., `DropdownInput`, `MessageTextInput`, `Output`).
27+
- Implement the main logic as a method (e.g., `get_current_date`, `true_response`, etc.).
28+
29+
### 3. Example: Conditional If-Else Component
30+
31+
```python
32+
class ConditionalRouterComponent(Component):
33+
display_name = "If-Else"
34+
description = "Routes an input message to a corresponding output based on text comparison."
35+
icon = "split"
36+
name = "ConditionalRouter"
37+
inputs = [
38+
# Define your inputs here
39+
]
40+
outputs = [
41+
# Define your outputs here
42+
]
43+
# Implement your logic methods here
44+
```
45+
46+
### 4. Example: Current Date Component
47+
48+
```python
49+
class CurrentDateComponent(Component):
50+
display_name = "Current Date"
51+
description = "Returns the current date and time in the selected timezone."
52+
icon = "clock"
53+
name = "CurrentDate"
54+
inputs = [
55+
# Define your inputs here
56+
]
57+
outputs = [
58+
# Define your outputs here
59+
]
60+
# Implement your logic methods here
61+
```
62+
63+
### 5. Best Practices
64+
65+
- Use clear and descriptive names for inputs and outputs.
66+
- Provide helpful `info` for each input to guide users.
67+
- Handle errors gracefully and provide meaningful error messages.
68+
- Use appropriate icons to visually represent the component's function.
69+
- Use a Lucide icon or if you want a custom icon follow the icon rules (`./cursor/rules/icons.mdc`)
70+
71+
---
72+
73+
## Checklist for Creating a Component
74+
- [ ] Ask the user for component name, description, inputs, and outputs.
75+
- [ ] Define the component class with the required fields.
76+
- [ ] Implement the main logic.
77+
- [ ] Add helpful info and error handling.
78+
- [ ] Test the component.

‎.cursor/rules/icons.mdc‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
description: Rules and checklist for adding and using langflow component icons.
3+
globs:
4+
alwaysApply: false
5+
---
6+
# Component Icon Rules
7+
8+
## Purpose
9+
To ensure consistent, clear, and functional icon usage for components, covering both backend (Python) and frontend (React/TypeScript) steps.
10+
11+
---
12+
13+
## 1. Backend (Python) — Setting the Icon Name
14+
15+
- **Where:** In your component class (e.g., in `src/backend/base/langflow/components/vectorstores/astradb.py`)
16+
- **How:**
17+
Set the `icon` attribute to a string matching the icon you want to use.
18+
```python
19+
icon = "AstraDB"
20+
```
21+
- **Tip:**
22+
The string must match the frontend icon mapping exactly (case-sensitive).
23+
24+
---
25+
26+
## 2. Frontend (React/TypeScript) — Adding the Icon
27+
28+
### a. Create the Icon Component
29+
30+
- **Where:**
31+
In a new directory for your icon, e.g., `src/frontend/src/icons/AstraDB/`.
32+
- **How:**
33+
- Add your SVG as a React component, e.g., `AstraSVG` in `AstraDB.jsx`.
34+
```jsx
35+
const AstraSVG = (props) => (
36+
<svg {...props}>
37+
<path
38+
// ...
39+
/>
40+
</svg>
41+
);
42+
```
43+
- Create an `index.tsx` that exports your icon using `forwardRef`:
44+
```tsx
45+
import { useDarkStore } from "@/stores/darkStore";
46+
import React, { forwardRef } from "react";
47+
import AstraSVG from "./AstraDB";
48+
49+
export const AstraDBIcon = forwardRef<
50+
SVGSVGElement,
51+
React.PropsWithChildren<{}>
52+
>((props, ref) => {
53+
const isdark = useDarkStore((state) => state.dark).toString();
54+
return <AstraSVG ref={ref} isdark={isdark} {...props} />;
55+
});
56+
```
57+
58+
#### Supporting Light and Dark Mode Icons
59+
60+
- **How:**
61+
- In your SVG component (e.g., `AstraDB.jsx`), use the `isdark` prop to switch colors:
62+
```jsx
63+
const AstraSVG = (props) => (
64+
<svg {...props}>
65+
<path
66+
fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
67+
// ...
68+
/>
69+
</svg>
70+
);
71+
```
72+
- The `isdark` prop is passed from the icon wrapper (see above) and should be used to toggle between light and dark color schemes.
73+
- You can use a utility like `stringToBool` to ensure the prop is interpreted correctly.
74+
75+
### b. Add to Lazy Icon Imports
76+
77+
- **Where:**
78+
In `src/frontend/src/icons/lazyIconImports.ts`
79+
- **How:**
80+
Add an entry to the `lazyIconsMapping` object:
81+
```ts
82+
AstraDB: () =>
83+
import("@/icons/AstraDB").then((mod) => ({ default: mod.AstraDBIcon })),
84+
```
85+
- **Tip:**
86+
The key (`AstraDB`) must match the string used in the backend.
87+
88+
---
89+
90+
## 3. Best Practices
91+
92+
- **Naming:**
93+
Use clear, recognizable names (e.g., `"AstraDB"`, `"Postgres"`, `"OpenAI"`).
94+
- **Consistency:**
95+
Always use the same icon name for the same service across backend and frontend.
96+
- **Missing Icon:**
97+
If no icon exists, use a [lucide icon](https://lucide.dev/icons)
98+
- **Light/Dark Mode:**
99+
Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG.
100+
101+
---
102+
103+
## 4. Checklist for Adding a New Icon
104+
105+
- [ ] Decide on a clear, descriptive icon name (e.g., `AstraDB`).
106+
- [ ] In your Python component, set `icon = "YourIconName"`.
107+
- [ ] Create a new icon directory in `src/frontend/src/icons/YourIconName/`.
108+
- [ ] Add your SVG as a React component (e.g., `YourIconNameIcon.jsx`).
109+
- [ ] Create an `index.tsx` that exports your icon using `forwardRef` and passes the `isdark` prop.
110+
- [ ] Add your icon to `lazyIconsMapping` in `src/frontend/src/icons/lazyIconImports.ts` with the exact same name.
111+
- [ ] Verify the icon appears correctly in the UI in both light and dark mode.
112+
- [ ] If no suitable icon exists, use a generic icon and request a new one if needed.
113+
114+
---
115+
116+
**Example for AstraDB:**
117+
- Backend:
118+
```python
119+
icon = "AstraDB"
120+
```
121+
- Frontend:
122+
- `src/icons/AstraDB/AstraDB.jsx` (SVG as React component, uses `isdark` prop)
123+
- `src/icons/AstraDB/index.tsx` (exports `AstraDBIcon` and passes `isdark`)
124+
- Add to `lazyIconImports.ts`:
125+
```ts
126+
AstraDB: () =>
127+
import("@/icons/AstraDB").then((mod) => ({ default: mod.AstraDBIcon })),
128+
```
129+
130+
---

‎.devcontainer/README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,17 @@ Open a new Terminal, and type `uv run langflow run`.
4444
The service will start, and you will may notice a dialog in the lower right indicating there is a port available to connect to. However, the service will not be ready until you see the welcome banner:
4545

4646
```
47-
╭───────────────────────────────────────────────────────────────────╮
48-
│ Welcome to ⛓ Langflow │
49-
│ │
50-
│ │
51-
│ Collaborate, and contribute at our GitHub Repo 🌟 │
52-
│ │
53-
│ We collect anonymous usage data to improve Langflow. │
54-
│ You can opt-out by setting DO_NOT_TRACK=true in your environment. │
55-
│ │
56-
│ Access http://127.0.0.1:7860 │
57-
╰───────────────────────────────────────────────────────────────────╯
47+
╭───────────────────────────────────────────────────────────────────────╮
48+
│ Welcome to Langflow │
49+
│ │
50+
│ 🌟 GitHub: Star for updates → https://github.com/langflow-ai/langflow │
51+
│ 💬 Discord: Join for support → https://discord.com/invite/EqksyE2EX9 │
52+
│ │
53+
│ We collect anonymous usage data to improve Langflow. │
54+
│ To opt out, set: DO_NOT_TRACK=true in your environment. │
55+
│ │
56+
│ 🟢 Open Langflow → http://127.0.0.1:7860 │
57+
╰───────────────────────────────────────────────────────────────────────╯
5858
```
5959

6060
At this point you can connect to the service via the port, or if the dialog is gone you can find the "Forwarded Address" on the "Ports" tab (which is next the "Terminal" tab). If there is no port forwarded, you can click the "Forward a Port" button on the "Ports" tab, and forward `7860`.

‎.github/actions/setup-uv/action.yml‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,3 @@ runs:
1919
uses: actions/setup-python@v5
2020
with:
2121
python-version: ${{ inputs.python-version }}
22-
23-
- name: Restore uv cache
24-
uses: actions/cache@v4
25-
with:
26-
path: /tmp/.uv-cache
27-
key: uv-${{ runner.os }}-${{ hashFiles('uv.lock') }}
28-
restore-keys: |
29-
uv-${{ runner.os }}-${{ hashFiles('uv.lock') }}
30-
uv-${{ runner.os }}

0 commit comments

Comments
 (0)