Initial push
This commit is contained in:
Henry
commit
05c86ff9c5
|
|
@ -0,0 +1,7 @@
|
|||
node_modules
|
||||
dist
|
||||
build
|
||||
|
||||
**/node_modules
|
||||
**/build
|
||||
**/dist
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
module.exports = {
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:markdown/recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:jsx-a11y/recommended',
|
||||
'plugin:prettier/recommended'
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect'
|
||||
}
|
||||
},
|
||||
parser: '@typescript-eslint/parser',
|
||||
ignorePatterns: ['**/node_modules', '**/dist', '**/build', '**/package-lock.json'],
|
||||
plugins: ['unused-imports'],
|
||||
rules: {
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
'unused-imports/no-unused-imports': 'warn',
|
||||
'unused-imports/no-unused-vars': ['warn', { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' }],
|
||||
'no-undef': 'off',
|
||||
'no-console': [process.env.CI ? 'error' : 'warn', { allow: ['warn', 'error', 'info'] }],
|
||||
'prettier/prettier': 'error'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: '[BUG]'
|
||||
labels: ''
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Setup**
|
||||
|
||||
- OS: [e.g. iOS, Windows, Linux]
|
||||
- Browser [e.g. chrome, safari]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: '[FEATURE]'
|
||||
labels: ''
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Describe the feature you'd like**
|
||||
A clear and concise description of what you would like Flowise to have.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
name: Node CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
pull_request:
|
||||
branches:
|
||||
- '*'
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
build:
|
||||
strategy:
|
||||
matrix:
|
||||
platform: [ubuntu-latest]
|
||||
node-version: [14.x, 16.x]
|
||||
runs-on: ${{ matrix.platform }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- run: npm i -g yarn
|
||||
|
||||
- run: yarn install --ignore-engines
|
||||
|
||||
- run: yarn lint
|
||||
|
||||
- run: yarn build
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
# editor
|
||||
.idea
|
||||
.vscode
|
||||
|
||||
# dependencies
|
||||
**/node_modules
|
||||
**/package-lock.json
|
||||
**/yarn.lock
|
||||
|
||||
## logs
|
||||
**/*.log
|
||||
|
||||
## build
|
||||
**/dist
|
||||
**/build
|
||||
|
||||
## temp
|
||||
**/tmp
|
||||
**/temp
|
||||
|
||||
## test
|
||||
**/coverage
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
## env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env
|
||||
|
||||
## turbo
|
||||
.turbo
|
||||
|
||||
## secrets
|
||||
**/*.key
|
||||
**/api.json
|
||||
|
||||
## compressed
|
||||
**/*.tgz
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
yarn quick # prettify
|
||||
yarn lint-staged # eslint lint(also include prettify but prettify support more file extensions than eslint, so run prettify first)
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
**/node_modules
|
||||
**/dist
|
||||
**/build
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
module.exports = {
|
||||
printWidth: 140,
|
||||
singleQuote: true,
|
||||
jsxSingleQuote: true,
|
||||
trailingComma: 'none',
|
||||
tabWidth: 4,
|
||||
semi: false,
|
||||
endOfLine: 'auto'
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to making participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, gender identity and expression, level of experience,
|
||||
nationality, personal appearance, race, religion, or sexual identity and
|
||||
orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
- Using welcoming and inclusive language
|
||||
- Being respectful of differing viewpoints and experiences
|
||||
- Gracefully accepting constructive criticism
|
||||
- Focusing on what is best for the community
|
||||
- Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
- The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
- Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces
|
||||
when an individual is representing the project or its community. Examples of
|
||||
representing a project or community include using an official project e-mail
|
||||
address, posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event. Representation of a project may be
|
||||
further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at hello@flowiseai.com. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!-- markdownlint-disable MD030 -->
|
||||
|
||||
# Contributing to Flowise
|
||||
|
||||
We appreciate any form of contributions.
|
||||
|
||||
## ⭐ Star
|
||||
|
||||
Star and share the [Github Repo](https://github.com/FlowiseAI/Flowise).
|
||||
|
||||
## 🙋 Q&A
|
||||
|
||||
Search up for any questions in [Q&A section](https://github.com/FlowiseAI/Flowise/discussions/categories/q-a), if you can't find one, don't hesitate to create one. It might helps others that have similar question.
|
||||
|
||||
## 🙌 Share Chatflow
|
||||
|
||||
Yes! Sharing how you use Flowise is a way of contribution. Export your chatflow as JSON, attach a screenshot and share it in [Show and Tell section](https://github.com/FlowiseAI/Flowise/discussions/categories/show-and-tell).
|
||||
|
||||
## 💡 Ideas
|
||||
|
||||
Ideas are welcome such as new feature, apps integration, and blockchain networks. Submit in [Ideas section](https://github.com/FlowiseAI/Flowise/discussions/categories/ideas).
|
||||
|
||||
## 🐞 Report Bugs
|
||||
|
||||
Found an issue? [Report it](https://github.com/FlowiseAI/Flowise/issues/new/choose).
|
||||
|
||||
## 👨💻 Contribute to Code
|
||||
|
||||
Not sure what to contribute? Some ideas:
|
||||
|
||||
- Create new components from Langchain
|
||||
- Update existing components such as extending functionality, fixing bugs
|
||||
- Add new chatflow ideas
|
||||
|
||||
### Developers
|
||||
|
||||
Flowise has 3 different modules in a single mono repository.
|
||||
|
||||
- `server`: Node backend to serve API logics
|
||||
- `ui`: React frontend
|
||||
- `components`: Langchain components
|
||||
|
||||
#### Prerequisite
|
||||
|
||||
- Install Yarn
|
||||
```bash
|
||||
npm i -g yarn
|
||||
```
|
||||
|
||||
#### Step by step
|
||||
|
||||
1. Fork the official [Flowise Github Repository](https://github.com/FlowiseAI/Flowise).
|
||||
|
||||
2. Clone your forked repository.
|
||||
|
||||
3. Create a new branch, see [guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-and-deleting-branches-within-your-repository). Naming conventions:
|
||||
|
||||
- For feature branch: `feature/<Your New Feature>`
|
||||
- For bug fix branch: `bugfix/<Your New Bugfix>`.
|
||||
|
||||
4. Switch to the newly created branch.
|
||||
|
||||
5. Go into repository folder
|
||||
|
||||
```bash
|
||||
cd Flowise
|
||||
```
|
||||
|
||||
6. Install all dependencies of all modules:
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
7. Build all the code:
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
8. Start the app on [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
9. For development, run
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Any changes made in `packages/ui` or `packages/server` will be reflected on [http://localhost:8080](http://localhost:8080)
|
||||
|
||||
For changes made in `packages/components`, run `yarn build` again to pickup the changes.
|
||||
|
||||
10. After making all the changes, run
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
and
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
to make sure everything works fine in production.
|
||||
|
||||
11. Commit code and submit Pull Request from forked branch pointing to [Flowise master](https://github.com/FlowiseAI/Flowise/tree/master).
|
||||
|
||||
## 📖 Contribute to Docs
|
||||
|
||||
In-Progress
|
||||
|
||||
## 🏷️ Pull Request process
|
||||
|
||||
A member of the FlowiseAI team will automatically be notified/assigned when you open a pull request. You can also reach out to us on [Discord](https://discord.gg/GWcGczPk).
|
||||
|
||||
## 📃 Contributor License Agreement
|
||||
|
||||
Before we can merge your contribution you have to sign our [Contributor License Agreement (CLA)](https://cla-assistant.io/FlowiseAI/Flowise). The CLA contains the terms and conditions under which the contribution is submitted. You need to do this only once for your first pull request. Keep in mind that without a signed CLA we cannot merge your contribution.
|
||||
|
||||
## 📜 Code of Conduct
|
||||
|
||||
This project and everyone participating in it are governed by the Code of Conduct which can be found in the [file](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to hello@flowiseai.com.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# Build local monorepo image
|
||||
# docker build --no-cache -t flowise .
|
||||
# Run image
|
||||
# docker run -d -p 3000:3000 flowise
|
||||
FROM node:16
|
||||
|
||||
WORKDIR /usr/src/packages
|
||||
|
||||
# Copy root package.json and lockfile
|
||||
COPY package.json ./
|
||||
COPY yarn.lock ./
|
||||
|
||||
# Copy components package.json
|
||||
COPY packages/components/package.json ./packages/components/package.json
|
||||
|
||||
# Copy ui package.json
|
||||
COPY packages/ui/package.json ./packages/ui/package.json
|
||||
|
||||
# Copy server package.json
|
||||
COPY packages/server/package.json ./packages/server/package.json
|
||||
|
||||
RUN yarn install
|
||||
|
||||
# Copy app source
|
||||
COPY . .
|
||||
|
||||
RUN yarn build
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD [ "yarn", "start" ]
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License
|
||||
|
||||
Copyright (c) 2023 FlowiseAI
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!-- markdownlint-disable MD030 -->
|
||||
|
||||
# Flowise - LangchainJS UI
|
||||
|
||||
<a href="https://github.com/FlowiseAI/Flowise">
|
||||
<img width="100%" src="https://github.com/FlowiseAI/Flowise/blob/main/images/flowise.gif?raw=true"></a>
|
||||
|
||||
Drag & drop UI to build your customized LLM flow using [LangchainJS](https://github.com/hwchase17/langchainjs)
|
||||
|
||||
## ⚡Quick Start
|
||||
|
||||
1. Install Flowise
|
||||
```bash
|
||||
npm install -g flowise
|
||||
```
|
||||
2. Start FlowiseAI
|
||||
|
||||
```bash
|
||||
npx flowise start
|
||||
```
|
||||
|
||||
3. Open [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
## 🐳 Docker
|
||||
|
||||
1. Go to `docker` folder at the root of the project
|
||||
2. `docker-compose up -d`
|
||||
3. This will automatically spins up mongodb and flowise containers
|
||||
4. Open [http://localhost:3000](http://localhost:3000)
|
||||
5. You can bring the containers down by `docker-compose stop`
|
||||
|
||||
## 👨💻 Developers
|
||||
|
||||
Flowise has 3 different modules in a single mono repository.
|
||||
|
||||
- `server`: Node backend to serve API logics
|
||||
- `ui`: React frontend
|
||||
- `components`: Langchain components
|
||||
|
||||
### Prerequisite
|
||||
|
||||
- Install Yarn
|
||||
```bash
|
||||
npm i -g yarn
|
||||
```
|
||||
|
||||
### Setup
|
||||
|
||||
1. Clone the repository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/FlowiseAI/Flowise.git
|
||||
```
|
||||
|
||||
2. Go into repository folder
|
||||
|
||||
```bash
|
||||
cd Flowise
|
||||
```
|
||||
|
||||
3. Install all dependencies of all modules:
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
4. Build all the code:
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
5. Start the app:
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
You can now access the app on [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
6. For development build:
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Any code changes will reload the app automatically on [http://localhost:8080](http://localhost:8080)
|
||||
|
||||
## 📖 Documentation
|
||||
|
||||
Coming soon
|
||||
|
||||
## 💻 Cloud Hosted
|
||||
|
||||
Coming soon
|
||||
|
||||
## 🌐 Self Host
|
||||
|
||||
Coming soon
|
||||
|
||||
## 🙋 Support
|
||||
|
||||
Feel free to ask any questions, raise problems, and request new features in [discussion](https://github.com/FlowiseAI/Flowise/discussions)
|
||||
|
||||
## 🙌 Contributing
|
||||
|
||||
See [contributing guide](CONTRIBUTING.md). Reach out to us at [Discord](https://discord.gg/GWcGczPk) if you have any questions or issues.
|
||||
|
||||
## 📄 License
|
||||
|
||||
Source code in this repository is made available under the [MIT License](LICENSE.md).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@babel/preset-typescript',
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {
|
||||
node: 'current'
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
FROM node:14.20.0-alpine
|
||||
|
||||
USER root
|
||||
|
||||
RUN apk add --no-cache git
|
||||
RUN apk add --no-cache python3 py3-pip
|
||||
|
||||
# You can install a specific version like: flowise@1.0.0
|
||||
RUN npm install -g flowise
|
||||
|
||||
WORKDIR /data
|
||||
|
||||
CMD "flowise"
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
version: '3.1'
|
||||
|
||||
services:
|
||||
mongo:
|
||||
image: mongo
|
||||
ports:
|
||||
- '27017:27017'
|
||||
restart: always
|
||||
environment:
|
||||
- MONGO_INITDB_DATABASE=flowiseai
|
||||
|
||||
flowise:
|
||||
image: flowiseai/flowise
|
||||
restart: always
|
||||
environment:
|
||||
- PORT=${PORT}
|
||||
ports:
|
||||
- '${PORT}:${PORT}'
|
||||
links:
|
||||
- mongo
|
||||
volumes:
|
||||
- ~/.flowise:/root/.flowise
|
||||
command: /bin/sh -c "sleep 3; flowise start"
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
|
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
"name": "flowise",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"homepage": "https://flowiseai.com",
|
||||
"workspaces": [
|
||||
"packages/*",
|
||||
"flowise",
|
||||
"ui",
|
||||
"components"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "turbo run build",
|
||||
"dev": "turbo run dev --parallel",
|
||||
"start": "run-script-os",
|
||||
"start:windows": "cd packages/server/bin && run start",
|
||||
"start:default": "cd packages/server/bin && ./run start",
|
||||
"clean": "npm exec -ws -- rimraf dist build",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
||||
"test": "turbo run test",
|
||||
"lint": "eslint \"**/*.{js,jsx,ts,tsx,json,md}\"",
|
||||
"lint-fix": "yarn lint --fix",
|
||||
"quick": "pretty-quick --staged",
|
||||
"postinstall": "husky install"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,ts,tsx,json,md}": "eslint --fix"
|
||||
},
|
||||
"devDependencies": {
|
||||
"turbo": "1.7.4",
|
||||
"@babel/preset-env": "^7.19.4",
|
||||
"@babel/preset-typescript": "7.18.6",
|
||||
"@types/express": "^4.17.13",
|
||||
"@typescript-eslint/typescript-estree": "^5.39.0",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||
"eslint-plugin-markdown": "^3.0.0",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-react": "^7.26.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-unused-imports": "^2.0.0",
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1",
|
||||
"pretty-quick": "^3.1.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"run-script-os": "^1.1.6",
|
||||
"typescript": "^4.8.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.15.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!-- markdownlint-disable MD030 -->
|
||||
|
||||
# Flowise Components
|
||||
|
||||
Apps integration for Flowise. Contain Nodes and Credentials.
|
||||
|
||||
|
||||
|
||||
Install:
|
||||
|
||||
```bash
|
||||
npm i flowise-components
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Source code in this repository is made available under the [MIT License](https://github.com/FlowiseAI/Flowise/blob/master/LICENSE.md).
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import gulp from 'gulp'
|
||||
|
||||
const { src, dest } = gulp
|
||||
|
||||
function copyIcons() {
|
||||
return src(['nodes/**/*.{jpg,png,svg}']).pipe(dest('dist/nodes'))
|
||||
}
|
||||
|
||||
exports.default = copyIcons
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { INode, INodeData, INodeParams } from '../../../src/Interface'
|
||||
|
||||
class MRLKAgentLLM implements INode {
|
||||
label: string
|
||||
name: string
|
||||
description: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
baseClasses: string[]
|
||||
inputs: INodeParams[]
|
||||
|
||||
constructor() {
|
||||
this.label = 'MRLK Agent for LLMs'
|
||||
this.name = 'mrlkAgentLLM'
|
||||
this.type = 'AgentExecutor'
|
||||
this.category = 'Agents'
|
||||
this.icon = 'agent.svg'
|
||||
this.description = 'Agent that uses the ReAct Framework to decide what action to take, optimized to be used with LLMs'
|
||||
this.inputs = [
|
||||
{
|
||||
label: 'Allowed Tools',
|
||||
name: 'tools',
|
||||
type: 'Tool',
|
||||
list: true
|
||||
},
|
||||
{
|
||||
label: 'LLM Model',
|
||||
name: 'model',
|
||||
type: 'BaseLanguageModel'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
async getBaseClasses(): Promise<string[]> {
|
||||
return ['AgentExecutor']
|
||||
}
|
||||
|
||||
async init(nodeData: INodeData): Promise<any> {
|
||||
const { initializeAgentExecutor } = await import('langchain/agents')
|
||||
|
||||
const model = nodeData.inputs?.model
|
||||
const tools = nodeData.inputs?.tools
|
||||
|
||||
const executor = await initializeAgentExecutor(tools, model, 'zero-shot-react-description', true)
|
||||
|
||||
return executor
|
||||
}
|
||||
|
||||
async run(nodeData: INodeData, input: string): Promise<string> {
|
||||
const executor = nodeData.instance
|
||||
const result = await executor.call({ input })
|
||||
|
||||
return result?.output
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { nodeClass: MRLKAgentLLM }
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-robot" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z"></path>
|
||||
<path d="M10 16h4"></path>
|
||||
<circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle>
|
||||
<circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle>
|
||||
<path d="M9 7l-1 -4"></path>
|
||||
<path d="M15 7l1 -4"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
|
|
@ -0,0 +1,61 @@
|
|||
import { INode, INodeData, INodeParams } from '../../../src/Interface'
|
||||
import { getBaseClasses } from '../../../src/utils'
|
||||
|
||||
class LLMChain_Chains implements INode {
|
||||
label: string
|
||||
name: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
baseClasses: string[]
|
||||
description: string
|
||||
inputs: INodeParams[]
|
||||
|
||||
constructor() {
|
||||
this.label = 'LLM Chain'
|
||||
this.name = 'llmChain'
|
||||
this.type = 'LLMChain'
|
||||
this.icon = 'chain.svg'
|
||||
this.category = 'Chains'
|
||||
this.description = 'Chain to run queries against LLMs'
|
||||
this.inputs = [
|
||||
{
|
||||
label: 'LLM',
|
||||
name: 'llm',
|
||||
type: 'BaseLanguageModel'
|
||||
},
|
||||
{
|
||||
label: 'Prompt',
|
||||
name: 'prompt',
|
||||
type: 'BasePromptTemplate'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
async getBaseClasses(): Promise<string[]> {
|
||||
const { LLMChain } = await import('langchain/chains')
|
||||
return getBaseClasses(LLMChain)
|
||||
}
|
||||
|
||||
async init(nodeData: INodeData): Promise<any> {
|
||||
const { LLMChain } = await import('langchain/chains')
|
||||
|
||||
const llm = nodeData.inputs?.llm
|
||||
const prompt = nodeData.inputs?.prompt
|
||||
|
||||
const chain = new LLMChain({ llm, prompt })
|
||||
return chain
|
||||
}
|
||||
|
||||
async run(nodeData: INodeData, input: string): Promise<string> {
|
||||
const prompt = nodeData.instance.prompt.inputVariables // ["product"]
|
||||
if (prompt.length > 1) throw new Error('Prompt can only contains 1 literal string {}. Multiples are found')
|
||||
|
||||
const chain = nodeData.instance
|
||||
const res = await chain.run(input)
|
||||
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { nodeClass: LLMChain_Chains }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dna" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M14.828 14.828a4 4 0 1 0 -5.656 -5.656a4 4 0 0 0 5.656 5.656z"></path>
|
||||
<path d="M9.172 20.485a4 4 0 1 0 -5.657 -5.657"></path>
|
||||
<path d="M14.828 3.515a4 4 0 0 0 5.657 5.657"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 489 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,83 @@
|
|||
import { INode, INodeData, INodeParams } from '../../../src/Interface'
|
||||
import { getBaseClasses } from '../../../src/utils'
|
||||
|
||||
class OpenAI_LLMs implements INode {
|
||||
label: string
|
||||
name: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
description: string
|
||||
baseClasses: string[]
|
||||
inputs: INodeParams[]
|
||||
|
||||
constructor() {
|
||||
this.label = 'OpenAI'
|
||||
this.name = 'openAI'
|
||||
this.type = 'OpenAI'
|
||||
this.icon = 'openai.png'
|
||||
this.category = 'LLMs'
|
||||
this.description = 'Wrapper around OpenAI large language models'
|
||||
this.inputs = [
|
||||
{
|
||||
label: 'OpenAI Api Key',
|
||||
name: 'openAIApiKey',
|
||||
type: 'password'
|
||||
},
|
||||
{
|
||||
label: 'Model Name',
|
||||
name: 'modelName',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
label: 'text-davinci-003',
|
||||
name: 'text-davinci-003'
|
||||
},
|
||||
{
|
||||
label: 'text-davinci-002',
|
||||
name: 'text-davinci-002'
|
||||
},
|
||||
{
|
||||
label: 'text-curie-001',
|
||||
name: 'text-curie-001'
|
||||
},
|
||||
{
|
||||
label: 'text-babbage-001',
|
||||
name: 'text-babbage-001'
|
||||
}
|
||||
],
|
||||
default: 'text-davinci-003',
|
||||
optional: true
|
||||
},
|
||||
{
|
||||
label: 'Temperature',
|
||||
name: 'temperature',
|
||||
type: 'number',
|
||||
default: 0.7,
|
||||
optional: true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
async getBaseClasses(): Promise<string[]> {
|
||||
const { OpenAI } = await import('langchain/llms')
|
||||
return getBaseClasses(OpenAI)
|
||||
}
|
||||
|
||||
async init(nodeData: INodeData): Promise<any> {
|
||||
const { OpenAI } = await import('langchain/llms')
|
||||
|
||||
const temperature = nodeData.inputs?.temperature as string
|
||||
const modelName = nodeData.inputs?.modelName as string
|
||||
const openAIApiKey = nodeData.inputs?.openAIApiKey as string
|
||||
|
||||
const model = new OpenAI({
|
||||
temperature: parseInt(temperature, 10),
|
||||
modelName,
|
||||
openAIApiKey
|
||||
})
|
||||
return model
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { nodeClass: OpenAI_LLMs }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,56 @@
|
|||
import { INode, INodeData, INodeParams } from '../../../src/Interface'
|
||||
import { getBaseClasses, getInputVariables } from '../../../src/utils'
|
||||
|
||||
class PromptTemplate_Prompts implements INode {
|
||||
label: string
|
||||
name: string
|
||||
description: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
baseClasses: string[]
|
||||
inputs: INodeParams[]
|
||||
|
||||
constructor() {
|
||||
this.label = 'Prompt Template'
|
||||
this.name = 'promptTemplate'
|
||||
this.type = 'PromptTemplate'
|
||||
this.icon = 'prompt.svg'
|
||||
this.category = 'Prompts'
|
||||
this.description = 'Schema to represent a basic prompt for an LLM. Template can only contains 1 literal string {}'
|
||||
this.inputs = [
|
||||
{
|
||||
label: 'Template',
|
||||
name: 'template',
|
||||
type: 'string',
|
||||
rows: 5,
|
||||
default: 'What is a good name for a company that makes {product}?',
|
||||
placeholder: 'What is a good name for a company that makes {product}?'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
async getBaseClasses(): Promise<string[]> {
|
||||
const { PromptTemplate } = await import('langchain/prompts')
|
||||
return getBaseClasses(PromptTemplate)
|
||||
}
|
||||
|
||||
async init(nodeData: INodeData): Promise<any> {
|
||||
const { PromptTemplate } = await import('langchain/prompts')
|
||||
|
||||
const template = nodeData.inputs?.template as string
|
||||
const inputVariables = getInputVariables(template)
|
||||
|
||||
try {
|
||||
const prompt = new PromptTemplate({
|
||||
template,
|
||||
inputVariables: inputVariables
|
||||
})
|
||||
return prompt
|
||||
} catch (e) {
|
||||
throw new Error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { nodeClass: PromptTemplate_Prompts }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M8 9l3 3l-3 3"></path>
|
||||
<path d="M13 15l3 0"></path>
|
||||
<path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
|
|
@ -0,0 +1,33 @@
|
|||
import { INode } from '../../../src/Interface'
|
||||
import { getBaseClasses } from '../../../src/utils'
|
||||
|
||||
class Calculator implements INode {
|
||||
label: string
|
||||
name: string
|
||||
description: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
baseClasses: string[]
|
||||
|
||||
constructor() {
|
||||
this.label = 'Calculator'
|
||||
this.name = 'calculator'
|
||||
this.type = 'Calculator'
|
||||
this.icon = 'calculator.svg'
|
||||
this.category = 'Tools'
|
||||
this.description = 'Perform calculations on response'
|
||||
}
|
||||
|
||||
async getBaseClasses(): Promise<string[]> {
|
||||
const { Calculator } = await import('langchain/tools')
|
||||
return getBaseClasses(Calculator)
|
||||
}
|
||||
|
||||
async init(): Promise<any> {
|
||||
const { Calculator } = await import('langchain/tools')
|
||||
return new Calculator()
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { nodeClass: Calculator }
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calculator" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 3m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
|
||||
<path d="M8 7m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"></path>
|
||||
<path d="M8 14l0 .01"></path>
|
||||
<path d="M12 14l0 .01"></path>
|
||||
<path d="M16 14l0 .01"></path>
|
||||
<path d="M8 17l0 .01"></path>
|
||||
<path d="M12 17l0 .01"></path>
|
||||
<path d="M16 17l0 .01"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 698 B |
|
|
@ -0,0 +1,42 @@
|
|||
import { INode, INodeData, INodeParams } from '../../../src/Interface'
|
||||
import { getBaseClasses } from '../../../src/utils'
|
||||
|
||||
class SerpAPI implements INode {
|
||||
label: string
|
||||
name: string
|
||||
description: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
baseClasses: string[]
|
||||
inputs: INodeParams[]
|
||||
|
||||
constructor() {
|
||||
this.label = 'Serp API'
|
||||
this.name = 'serpAPI'
|
||||
this.type = 'SerpAPI'
|
||||
this.icon = 'serp.png'
|
||||
this.category = 'Tools'
|
||||
this.description = 'Wrapper around SerpAPI - a real-time API to access Google search results'
|
||||
this.inputs = [
|
||||
{
|
||||
label: 'Serp Api Key',
|
||||
name: 'apiKey',
|
||||
type: 'password'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
async getBaseClasses(): Promise<string[]> {
|
||||
const { SerpAPI } = await import('langchain/tools')
|
||||
return getBaseClasses(SerpAPI)
|
||||
}
|
||||
|
||||
async init(nodeData: INodeData): Promise<any> {
|
||||
const { SerpAPI } = await import('langchain/tools')
|
||||
const apiKey = nodeData.inputs?.apiKey as string
|
||||
return new SerpAPI(apiKey)
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { nodeClass: SerpAPI }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "flowise-components",
|
||||
"version": "1.0.0",
|
||||
"description": "Flowiseai Components",
|
||||
"main": "dist/src/index",
|
||||
"types": "dist/src/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "tsc && gulp",
|
||||
"dev": "tsc --watch"
|
||||
},
|
||||
"keywords": [],
|
||||
"homepage": "https://flowiseai.com",
|
||||
"author": {
|
||||
"name": "Henry Heng",
|
||||
"email": "henryheng@flowiseai.com"
|
||||
},
|
||||
"license": "SEE LICENSE IN LICENSE.md",
|
||||
"dependencies": {
|
||||
"axios": "^0.27.2",
|
||||
"dotenv": "^16.0.0",
|
||||
"express": "^4.17.3",
|
||||
"form-data": "^4.0.0",
|
||||
"langchain": "^0.0.44",
|
||||
"moment": "^2.29.3",
|
||||
"node-fetch": "2",
|
||||
"ws": "^8.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/gulp": "4.0.9",
|
||||
"@types/ws": "^8.5.3",
|
||||
"gulp": "^4.0.2",
|
||||
"typescript": "^4.8.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
/**
|
||||
* Types
|
||||
*/
|
||||
|
||||
export type NodeParamsType =
|
||||
| 'asyncOptions'
|
||||
| 'options'
|
||||
| 'string'
|
||||
| 'number'
|
||||
| 'boolean'
|
||||
| 'password'
|
||||
| 'json'
|
||||
| 'code'
|
||||
| 'date'
|
||||
| 'file'
|
||||
| 'folder'
|
||||
|
||||
export type CommonType = string | number | boolean | undefined | null
|
||||
|
||||
/**
|
||||
* Others
|
||||
*/
|
||||
|
||||
export interface ICommonObject {
|
||||
[key: string]: any | CommonType | ICommonObject | CommonType[] | ICommonObject[]
|
||||
}
|
||||
|
||||
export interface IAttachment {
|
||||
content: string
|
||||
contentType: string
|
||||
size?: number
|
||||
filename?: string
|
||||
}
|
||||
|
||||
export interface INodeOptionsValue {
|
||||
label: string
|
||||
name: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
export interface INodeParams {
|
||||
label: string
|
||||
name: string
|
||||
type: NodeParamsType | string
|
||||
default?: CommonType | ICommonObject | ICommonObject[]
|
||||
description?: string
|
||||
options?: Array<INodeOptionsValue>
|
||||
optional?: boolean | INodeDisplay
|
||||
rows?: number
|
||||
list?: boolean
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
export interface INodeExecutionData {
|
||||
[key: string]: CommonType | CommonType[] | ICommonObject | ICommonObject[]
|
||||
}
|
||||
|
||||
export interface INodeDisplay {
|
||||
[key: string]: string[] | string
|
||||
}
|
||||
|
||||
export interface INodeProperties {
|
||||
label: string
|
||||
name: string
|
||||
type: string
|
||||
icon: string
|
||||
category: string
|
||||
baseClasses: string[]
|
||||
description?: string
|
||||
filePath?: string
|
||||
}
|
||||
|
||||
export interface INode extends INodeProperties {
|
||||
inputs?: INodeParams[]
|
||||
getBaseClasses?(): Promise<string[]>
|
||||
getInstance?(nodeData: INodeData): Promise<string>
|
||||
run?(nodeData: INodeData, input: string): Promise<string>
|
||||
}
|
||||
|
||||
export interface INodeData extends INodeProperties {
|
||||
inputs?: ICommonObject
|
||||
instance?: any
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './Interface'
|
||||
export * from './utils'
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
import * as fs from 'fs'
|
||||
import * as path from 'path'
|
||||
|
||||
export const numberOrExpressionRegex = '^(\\d+\\.?\\d*|{{.*}})$' //return true if string consists only numbers OR expression {{}}
|
||||
export const notEmptyRegex = '(.|\\s)*\\S(.|\\s)*' //return true if string is not empty or blank
|
||||
|
||||
export const getBaseClasses = (targetClass: any) => {
|
||||
const baseClasses: string[] = []
|
||||
|
||||
if (targetClass instanceof Function) {
|
||||
let baseClass = targetClass
|
||||
|
||||
while (baseClass) {
|
||||
const newBaseClass = Object.getPrototypeOf(baseClass)
|
||||
if (newBaseClass && newBaseClass !== Object && newBaseClass.name) {
|
||||
baseClass = newBaseClass
|
||||
baseClasses.push(baseClass.name)
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return baseClasses
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialize axios query params
|
||||
*
|
||||
* @export
|
||||
* @param {any} params
|
||||
* @param {boolean} skipIndex // Set to true if you want same params to be: param=1¶m=2 instead of: param[0]=1¶m[1]=2
|
||||
* @returns {string}
|
||||
*/
|
||||
export function serializeQueryParams(params: any, skipIndex?: boolean): string {
|
||||
const parts: any[] = []
|
||||
|
||||
const encode = (val: string) => {
|
||||
return encodeURIComponent(val)
|
||||
.replace(/%3A/gi, ':')
|
||||
.replace(/%24/g, '$')
|
||||
.replace(/%2C/gi, ',')
|
||||
.replace(/%20/g, '+')
|
||||
.replace(/%5B/gi, '[')
|
||||
.replace(/%5D/gi, ']')
|
||||
}
|
||||
|
||||
const convertPart = (key: string, val: any) => {
|
||||
if (val instanceof Date) val = val.toISOString()
|
||||
else if (val instanceof Object) val = JSON.stringify(val)
|
||||
|
||||
parts.push(encode(key) + '=' + encode(val))
|
||||
}
|
||||
|
||||
Object.entries(params).forEach(([key, val]) => {
|
||||
if (val === null || typeof val === 'undefined') return
|
||||
|
||||
if (Array.isArray(val)) val.forEach((v, i) => convertPart(`${key}${skipIndex ? '' : `[${i}]`}`, v))
|
||||
else convertPart(key, val)
|
||||
})
|
||||
|
||||
return parts.join('&')
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle error from try catch
|
||||
*
|
||||
* @export
|
||||
* @param {any} error
|
||||
* @returns {string}
|
||||
*/
|
||||
export function handleErrorMessage(error: any): string {
|
||||
let errorMessage = ''
|
||||
|
||||
if (error.message) {
|
||||
errorMessage += error.message + '. '
|
||||
}
|
||||
|
||||
if (error.response && error.response.data) {
|
||||
if (error.response.data.error) {
|
||||
if (typeof error.response.data.error === 'object') errorMessage += JSON.stringify(error.response.data.error) + '. '
|
||||
else if (typeof error.response.data.error === 'string') errorMessage += error.response.data.error + '. '
|
||||
} else if (error.response.data.msg) errorMessage += error.response.data.msg + '. '
|
||||
else if (error.response.data.Message) errorMessage += error.response.data.Message + '. '
|
||||
else if (typeof error.response.data === 'string') errorMessage += error.response.data + '. '
|
||||
}
|
||||
|
||||
if (!errorMessage) errorMessage = 'Unexpected Error.'
|
||||
|
||||
return errorMessage
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the path of node modules package
|
||||
* @param {string} packageName
|
||||
* @returns {string}
|
||||
*/
|
||||
export const getNodeModulesPackagePath = (packageName: string): string => {
|
||||
const checkPaths = [
|
||||
path.join(__dirname, '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', '..', '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', '..', '..', '..', 'node_modules', packageName)
|
||||
]
|
||||
for (const checkPath of checkPaths) {
|
||||
if (fs.existsSync(checkPath)) {
|
||||
return checkPath
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Get input variables
|
||||
* @param {string} paramValue
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export const getInputVariables = (paramValue: string): string[] => {
|
||||
let returnVal = paramValue
|
||||
const variableStack = []
|
||||
const inputVariables = []
|
||||
let startIdx = 0
|
||||
const endIdx = returnVal.length - 1
|
||||
|
||||
while (startIdx < endIdx) {
|
||||
const substr = returnVal.substring(startIdx, startIdx + 1)
|
||||
|
||||
// Store the opening double curly bracket
|
||||
if (substr === '{') {
|
||||
variableStack.push({ substr, startIdx: startIdx + 1 })
|
||||
}
|
||||
|
||||
// Found the complete variable
|
||||
if (substr === '}' && variableStack.length > 0 && variableStack[variableStack.length - 1].substr === '{') {
|
||||
const variableStartIdx = variableStack[variableStack.length - 1].startIdx
|
||||
const variableEndIdx = startIdx
|
||||
const variableFullPath = returnVal.substring(variableStartIdx, variableEndIdx)
|
||||
inputVariables.push(variableFullPath)
|
||||
variableStack.pop()
|
||||
}
|
||||
startIdx += 1
|
||||
}
|
||||
return inputVariables
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["ES2020"],
|
||||
"experimentalDecorators": true /* Enable experimental support for TC39 stage 2 draft decorators. */,
|
||||
"emitDecoratorMetadata": true /* Emit design-type metadata for decorated declarations in source files. */,
|
||||
"target": "ES2020", // or higher
|
||||
"outDir": "./dist/",
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
|
||||
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
|
||||
"sourceMap": true,
|
||||
"strictPropertyInitialization": false,
|
||||
"useUnknownInCatchVariables": false,
|
||||
"declaration": true,
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node16"
|
||||
},
|
||||
"include": ["src", "nodes"]
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!-- markdownlint-disable MD030 -->
|
||||
|
||||
# Flowise - LangchainJS UI
|
||||
|
||||
|
||||
|
||||
Drag & drop UI to build your customized LLM flow using [LangchainJS](https://github.com/hwchase17/langchainjs)
|
||||
|
||||
## ⚡Quick Start
|
||||
|
||||
1. Install Flowise
|
||||
```bash
|
||||
npm install -g flowise
|
||||
```
|
||||
2. Start Flowise
|
||||
|
||||
```bash
|
||||
npx flowise start
|
||||
```
|
||||
|
||||
3. Open [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
## 📖 Documentation
|
||||
|
||||
Coming Soon
|
||||
|
||||
## 💻 Cloud Hosted
|
||||
|
||||
Coming Soon
|
||||
|
||||
## 🌐 Self Host
|
||||
|
||||
Coming Soon
|
||||
|
||||
## 🙋 Support
|
||||
|
||||
Feel free to ask any questions, raise problems, and request new features in [discussion](https://github.com/FlowiseAI/Flowise/discussions)
|
||||
|
||||
## 🙌 Contributing
|
||||
|
||||
See [contributing guide](https://github.com/FlowiseAI/Flowise/blob/master/CONTRIBUTING.md). Reach out to us at [Discord](https://discord.gg/GWcGczPk) if you have any questions or issues.
|
||||
|
||||
## 📄 License
|
||||
|
||||
Source code in this repository is made available under the [MIT License](https://github.com/FlowiseAI/Flowise/blob/master/LICENSE.md).
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
extends: '../../babel.config.js'
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
const oclif = require('@oclif/core')
|
||||
|
||||
const path = require('path')
|
||||
const project = path.join(__dirname, '..', 'tsconfig.json')
|
||||
|
||||
// In dev mode -> use ts-node and dev plugins
|
||||
process.env.NODE_ENV = 'development'
|
||||
|
||||
require('ts-node').register({ project })
|
||||
|
||||
// In dev mode, always show stack traces
|
||||
oclif.settings.debug = true
|
||||
|
||||
// Start the CLI
|
||||
oclif.run().then(oclif.flush).catch(oclif.Errors.handle)
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@echo off
|
||||
|
||||
node "%~dp0\dev" %*
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
const oclif = require('@oclif/core')
|
||||
|
||||
oclif.run().then(require('@oclif/core/flush')).catch(require('@oclif/core/handle'))
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@echo off
|
||||
|
||||
node "%~dp0\run" %*
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"ignore": ["**/*.spec.ts", ".git", "node_modules"],
|
||||
"watch": ["commands", "index.ts", "src"],
|
||||
"exec": "yarn oclif-dev",
|
||||
"ext": "ts"
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"name": "flowise",
|
||||
"version": "1.0.0",
|
||||
"description": "Flowiseai Server",
|
||||
"main": "dist/index",
|
||||
"types": "dist/index.d.ts",
|
||||
"bin": {
|
||||
"flowise": "./bin/run"
|
||||
},
|
||||
"files": [
|
||||
"bin",
|
||||
"dist",
|
||||
"npm-shrinkwrap.json",
|
||||
"oclif.manifest.json",
|
||||
"oauth2.html",
|
||||
".env"
|
||||
],
|
||||
"oclif": {
|
||||
"bin": "flowise",
|
||||
"commands": "./dist/commands"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"start": "run-script-os",
|
||||
"start:windows": "cd bin && run start",
|
||||
"start:default": "cd bin && ./run start",
|
||||
"dev": "concurrently \"yarn watch\" \"nodemon\"",
|
||||
"oclif-dev": "run-script-os",
|
||||
"oclif-dev:windows": "cd bin && dev start",
|
||||
"oclif-dev:default": "cd bin && ./dev start",
|
||||
"postpack": "shx rm -f oclif.manifest.json",
|
||||
"prepack": "yarn build && oclif manifest && oclif readme",
|
||||
"typeorm": "typeorm-ts-node-commonjs",
|
||||
"watch": "tsc --watch",
|
||||
"version": "oclif readme && git add README.md"
|
||||
},
|
||||
"keywords": [],
|
||||
"homepage": "https://flowiseai.com",
|
||||
"author": {
|
||||
"name": "Henry Heng",
|
||||
"email": "henryheng@flowiseai.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.15.0"
|
||||
},
|
||||
"license": "SEE LICENSE IN LICENSE.md",
|
||||
"dependencies": {
|
||||
"@oclif/core": "^1.13.10",
|
||||
"axios": "^0.27.2",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.0.0",
|
||||
"express": "^4.17.3",
|
||||
"flowise-components": "*",
|
||||
"flowise-ui": "*",
|
||||
"moment-timezone": "^0.5.34",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"sqlite3": "^5.1.6",
|
||||
"typeorm": "^0.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cors": "^2.8.12",
|
||||
"concurrently": "^7.1.0",
|
||||
"nodemon": "^2.0.15",
|
||||
"oclif": "^3",
|
||||
"run-script-os": "^1.1.6",
|
||||
"shx": "^0.3.3",
|
||||
"ts-node": "^10.7.0",
|
||||
"typescript": "^4.8.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import 'reflect-metadata'
|
||||
import path from 'path'
|
||||
import { DataSource } from 'typeorm'
|
||||
import { ChatFlow } from './entity/ChatFlow'
|
||||
import { ChatMessage } from './entity/ChatMessage'
|
||||
import { getUserHome } from './utils'
|
||||
|
||||
let appDataSource: DataSource
|
||||
|
||||
export const init = async (): Promise<void> => {
|
||||
const homePath = path.join(getUserHome(), '.flowise')
|
||||
|
||||
appDataSource = new DataSource({
|
||||
type: 'sqlite',
|
||||
database: path.resolve(homePath, 'database.sqlite'),
|
||||
synchronize: true,
|
||||
entities: [ChatFlow, ChatMessage],
|
||||
migrations: []
|
||||
})
|
||||
}
|
||||
|
||||
export function getDataSource(): DataSource {
|
||||
if (appDataSource === undefined) {
|
||||
init()
|
||||
}
|
||||
return appDataSource
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import { INode, INodeData } from 'flowise-components'
|
||||
|
||||
export type MessageType = 'apiMessage' | 'userMessage'
|
||||
|
||||
/**
|
||||
* Databases
|
||||
*/
|
||||
export interface IChatFlow {
|
||||
id: string
|
||||
name: string
|
||||
flowData: string
|
||||
deployed: boolean
|
||||
updatedDate: Date
|
||||
createdDate: Date
|
||||
}
|
||||
|
||||
export interface IChatMessage {
|
||||
id: string
|
||||
role: MessageType
|
||||
content: string
|
||||
chatflowid: string
|
||||
createdDate: Date
|
||||
}
|
||||
|
||||
export interface IComponentNodesPool {
|
||||
[key: string]: INode
|
||||
}
|
||||
|
||||
export interface IVariableDict {
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
export interface INodeDependencies {
|
||||
[key: string]: number
|
||||
}
|
||||
|
||||
export interface INodeDirectedGraph {
|
||||
[key: string]: string[]
|
||||
}
|
||||
|
||||
export interface IReactFlowNode {
|
||||
id: string
|
||||
position: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
type: string
|
||||
data: INodeData
|
||||
positionAbsolute: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
z: number
|
||||
handleBounds: {
|
||||
source: any
|
||||
target: any
|
||||
}
|
||||
width: number
|
||||
height: number
|
||||
selected: boolean
|
||||
dragging: boolean
|
||||
}
|
||||
|
||||
export interface IReactFlowEdge {
|
||||
source: string
|
||||
sourceHandle: string
|
||||
target: string
|
||||
targetHandle: string
|
||||
type: string
|
||||
id: string
|
||||
data: {
|
||||
label: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface IReactFlowObject {
|
||||
nodes: IReactFlowNode[]
|
||||
edges: IReactFlowEdge[]
|
||||
viewport: {
|
||||
x: number
|
||||
y: number
|
||||
zoom: number
|
||||
}
|
||||
}
|
||||
|
||||
export interface IExploredNode {
|
||||
[key: string]: {
|
||||
remainingLoop: number
|
||||
lastSeenDepth: number
|
||||
}
|
||||
}
|
||||
|
||||
export interface INodeQueue {
|
||||
nodeId: string
|
||||
depth: number
|
||||
}
|
||||
|
||||
export interface IncomingInput {
|
||||
question: string
|
||||
history: string[]
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { IComponentNodesPool } from './Interface'
|
||||
|
||||
import path from 'path'
|
||||
import { Dirent } from 'fs'
|
||||
import { getNodeModulesPackagePath } from './utils'
|
||||
import { promises } from 'fs'
|
||||
|
||||
export class NodesPool {
|
||||
componentNodes: IComponentNodesPool = {}
|
||||
|
||||
/**
|
||||
* Initialize to get all nodes
|
||||
*/
|
||||
async initialize() {
|
||||
const packagePath = getNodeModulesPackagePath('flowise-components')
|
||||
const nodesPath = path.join(packagePath, 'dist', 'nodes')
|
||||
const nodeFiles = await this.getFiles(nodesPath)
|
||||
return Promise.all(
|
||||
nodeFiles.map(async (file) => {
|
||||
if (file.endsWith('.js')) {
|
||||
const nodeModule = await require(file)
|
||||
try {
|
||||
const newNodeInstance = new nodeModule.nodeClass()
|
||||
newNodeInstance.filePath = file
|
||||
|
||||
const baseClasses = await newNodeInstance.getBaseClasses!.call(newNodeInstance)
|
||||
newNodeInstance.baseClasses = baseClasses
|
||||
|
||||
this.componentNodes[newNodeInstance.name] = newNodeInstance
|
||||
|
||||
// Replace file icon with absolute path
|
||||
if (
|
||||
newNodeInstance.icon &&
|
||||
(newNodeInstance.icon.endsWith('.svg') ||
|
||||
newNodeInstance.icon.endsWith('.png') ||
|
||||
newNodeInstance.icon.endsWith('.jpg'))
|
||||
) {
|
||||
const filePath = file.replace(/\\/g, '/').split('/')
|
||||
filePath.pop()
|
||||
const nodeIconAbsolutePath = `${filePath.join('/')}/${newNodeInstance.icon}`
|
||||
this.componentNodes[newNodeInstance.name].icon = nodeIconAbsolutePath
|
||||
}
|
||||
} catch (e) {
|
||||
// console.error(e);
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursive function to get node files
|
||||
* @param {string} dir
|
||||
* @returns {string[]}
|
||||
*/
|
||||
async getFiles(dir: string): Promise<string[]> {
|
||||
const dirents = await promises.readdir(dir, { withFileTypes: true })
|
||||
const files = await Promise.all(
|
||||
dirents.map((dirent: Dirent) => {
|
||||
const res = path.resolve(dir, dirent.name)
|
||||
return dirent.isDirectory() ? this.getFiles(res) : res
|
||||
})
|
||||
)
|
||||
return Array.prototype.concat(...files)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { Command, Flags } from '@oclif/core'
|
||||
import path from 'path'
|
||||
import * as Server from '../index'
|
||||
import * as DataSource from '../DataSource'
|
||||
import dotenv from 'dotenv'
|
||||
|
||||
dotenv.config({ path: path.join(__dirname, '..', '..', '.env') })
|
||||
|
||||
enum EXIT_CODE {
|
||||
SUCCESS = 0,
|
||||
FAILED = 1
|
||||
}
|
||||
let processExitCode = EXIT_CODE.SUCCESS
|
||||
|
||||
export default class Start extends Command {
|
||||
static flags = {
|
||||
mongourl: Flags.string()
|
||||
}
|
||||
|
||||
static args = []
|
||||
|
||||
async stopProcess() {
|
||||
console.info('Shutting down Flowise...')
|
||||
try {
|
||||
// Shut down the app after timeout if it ever stuck removing pools
|
||||
setTimeout(() => {
|
||||
console.info('Flowise was forced to shut down after 30 secs')
|
||||
process.exit(processExitCode)
|
||||
}, 30000)
|
||||
|
||||
// Removing pools
|
||||
const serverApp = Server.getInstance()
|
||||
if (serverApp) await serverApp.stopApp()
|
||||
} catch (error) {
|
||||
console.error('There was an error shutting down Flowise...', error)
|
||||
}
|
||||
process.exit(processExitCode)
|
||||
}
|
||||
|
||||
async run(): Promise<void> {
|
||||
process.on('SIGTERM', this.stopProcess)
|
||||
process.on('SIGINT', this.stopProcess)
|
||||
|
||||
// Prevent throw new Error from crashing the app
|
||||
// TODO: Get rid of this and send proper error message to ui
|
||||
process.on('uncaughtException', (err) => {
|
||||
console.error('uncaughtException: ', err)
|
||||
})
|
||||
|
||||
const { flags } = await this.parse(Start)
|
||||
if (flags.mongourl) process.env.MONGO_URL = flags.mongourl
|
||||
|
||||
await (async () => {
|
||||
try {
|
||||
this.log('Starting Flowise...')
|
||||
await DataSource.init()
|
||||
await Server.start()
|
||||
} catch (error) {
|
||||
console.error('There was an error starting Flowise...', error)
|
||||
processExitCode = EXIT_CODE.FAILED
|
||||
// @ts-ignore
|
||||
process.emit('SIGINT')
|
||||
}
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/* eslint-disable */
|
||||
import { Entity, Column, CreateDateColumn, UpdateDateColumn, PrimaryGeneratedColumn } from 'typeorm'
|
||||
import { IChatFlow } from '../Interface'
|
||||
|
||||
@Entity()
|
||||
export class ChatFlow implements IChatFlow {
|
||||
@PrimaryGeneratedColumn('uuid')
|
||||
id: string
|
||||
|
||||
@Column()
|
||||
name: string
|
||||
|
||||
@Column()
|
||||
flowData: string
|
||||
|
||||
@Column()
|
||||
deployed: boolean
|
||||
|
||||
@CreateDateColumn()
|
||||
createdDate: Date
|
||||
|
||||
@UpdateDateColumn()
|
||||
updatedDate: Date
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/* eslint-disable */
|
||||
import { Entity, Column, CreateDateColumn, PrimaryGeneratedColumn, Index } from 'typeorm'
|
||||
import { IChatMessage, MessageType } from '../Interface'
|
||||
|
||||
@Entity()
|
||||
export class ChatMessage implements IChatMessage {
|
||||
@PrimaryGeneratedColumn('uuid')
|
||||
id: string
|
||||
|
||||
@Column()
|
||||
role: MessageType
|
||||
|
||||
@Index()
|
||||
@Column()
|
||||
chatflowid: string
|
||||
|
||||
@Column()
|
||||
content: string
|
||||
|
||||
@CreateDateColumn()
|
||||
createdDate: Date
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
export const workflow1 = {
|
||||
nodes: [
|
||||
{
|
||||
width: 200,
|
||||
height: 66,
|
||||
id: 'promptTemplate_0',
|
||||
position: {
|
||||
x: 295.0571878493141,
|
||||
y: 108.66221078850214
|
||||
},
|
||||
type: 'customNode',
|
||||
data: {
|
||||
label: 'Prompt Template',
|
||||
name: 'promptTemplate',
|
||||
type: 'PromptTemplate',
|
||||
inputAnchors: [],
|
||||
outputAnchors: [
|
||||
{
|
||||
id: 'promptTemplate_0-output-0'
|
||||
}
|
||||
],
|
||||
selected: false,
|
||||
inputs: {
|
||||
template: 'What is a good name for a company that makes {product}?',
|
||||
inputVariables: '["product"]'
|
||||
}
|
||||
},
|
||||
selected: false,
|
||||
positionAbsolute: {
|
||||
x: 295.0571878493141,
|
||||
y: 108.66221078850214
|
||||
},
|
||||
dragging: false
|
||||
},
|
||||
{
|
||||
width: 200,
|
||||
height: 66,
|
||||
id: 'openAI_0',
|
||||
position: {
|
||||
x: 774,
|
||||
y: 97.75
|
||||
},
|
||||
type: 'customNode',
|
||||
data: {
|
||||
label: 'OpenAI',
|
||||
name: 'openAI',
|
||||
type: 'OpenAI',
|
||||
inputAnchors: [],
|
||||
outputAnchors: [
|
||||
{
|
||||
id: 'openAI_0-output-0'
|
||||
}
|
||||
],
|
||||
selected: false,
|
||||
inputs: {
|
||||
modelName: 'text-davinci-003',
|
||||
temperature: '0.7',
|
||||
openAIApiKey: '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'
|
||||
},
|
||||
calls: {
|
||||
prompt: 'Hi, how are you?'
|
||||
}
|
||||
},
|
||||
selected: false,
|
||||
positionAbsolute: {
|
||||
x: 774,
|
||||
y: 97.75
|
||||
},
|
||||
dragging: false
|
||||
},
|
||||
{
|
||||
width: 200,
|
||||
height: 66,
|
||||
id: 'llmChain_0',
|
||||
position: {
|
||||
x: 1034.233162523021,
|
||||
y: 97.59868104260748
|
||||
},
|
||||
type: 'customNode',
|
||||
data: {
|
||||
label: 'LLM Chain',
|
||||
name: 'llmChain',
|
||||
type: 'LLMChain',
|
||||
inputAnchors: [
|
||||
{
|
||||
id: 'llmChain_0-input-0'
|
||||
}
|
||||
],
|
||||
outputAnchors: [
|
||||
{
|
||||
id: 'llmChain_0-output-0'
|
||||
}
|
||||
],
|
||||
selected: false,
|
||||
inputs: {
|
||||
llm: '{{openAI_0.data.instance}}',
|
||||
prompt: '{{promptTemplate_0.data.instance}}'
|
||||
},
|
||||
calls: {
|
||||
variable: '{"product":"colorful socks"}'
|
||||
}
|
||||
},
|
||||
selected: false,
|
||||
positionAbsolute: {
|
||||
x: 1034.233162523021,
|
||||
y: 97.59868104260748
|
||||
},
|
||||
dragging: false
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
source: 'nodeJS_0',
|
||||
sourceHandle: 'nodeJS_0-output-0',
|
||||
target: 'nodeJS_1',
|
||||
targetHandle: 'nodeJS_1-input-0',
|
||||
type: 'buttonedge',
|
||||
id: 'nodeJS_0-nodeJS_0-output-0-nodeJS_1-nodeJS_1-input-0',
|
||||
data: {
|
||||
label: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
source: 'webhook_0',
|
||||
sourceHandle: 'webhook_0-output-0',
|
||||
target: 'wait_0',
|
||||
targetHandle: 'wait_0-input-0',
|
||||
type: 'buttonedge',
|
||||
id: 'webhook_0-webhook_0-output-0-wait_0-wait_0-input-0',
|
||||
data: {
|
||||
label: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
source: 'wait_0',
|
||||
sourceHandle: 'wait_0-output-0',
|
||||
target: 'nodeJS_0',
|
||||
targetHandle: 'nodeJS_0-input-0',
|
||||
type: 'buttonedge',
|
||||
id: 'wait_0-wait_0-output-0-nodeJS_0-nodeJS_0-input-0',
|
||||
data: {
|
||||
label: ''
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
import express, { Request, Response } from 'express'
|
||||
import path from 'path'
|
||||
import cors from 'cors'
|
||||
import http from 'http'
|
||||
|
||||
import { IChatFlow, IComponentNodesPool, IncomingInput, IReactFlowNode, IReactFlowObject } from './Interface'
|
||||
import { getNodeModulesPackagePath, getStartingNode, buildLangchain, getEndingNode, constructGraphs } from './utils'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { getDataSource } from './DataSource'
|
||||
import { NodesPool } from './NodesPool'
|
||||
import { ChatFlow } from './entity/ChatFlow'
|
||||
import { ChatMessage } from './entity/ChatMessage'
|
||||
|
||||
export class App {
|
||||
app: express.Application
|
||||
componentNodes: IComponentNodesPool = {}
|
||||
AppDataSource = getDataSource()
|
||||
|
||||
constructor() {
|
||||
this.app = express()
|
||||
}
|
||||
|
||||
async initDatabase() {
|
||||
// Initialize database
|
||||
this.AppDataSource.initialize()
|
||||
.then(async () => {
|
||||
console.info('📦[server]: Data Source has been initialized!')
|
||||
|
||||
// Initialize node instances
|
||||
const nodesPool = new NodesPool()
|
||||
await nodesPool.initialize()
|
||||
this.componentNodes = nodesPool.componentNodes
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('❌[server]: Error during Data Source initialization:', err)
|
||||
})
|
||||
}
|
||||
|
||||
async config() {
|
||||
// Limit is needed to allow sending/receiving base64 encoded string
|
||||
this.app.use(express.json({ limit: '50mb' }))
|
||||
this.app.use(express.urlencoded({ limit: '50mb', extended: true }))
|
||||
|
||||
// Allow access from ui when yarn run dev
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
this.app.use(cors({ credentials: true, origin: 'http://localhost:8080' }))
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
// Nodes
|
||||
// ----------------------------------------
|
||||
|
||||
// Get all component nodes
|
||||
this.app.get('/api/v1/nodes', (req: Request, res: Response) => {
|
||||
const returnData = []
|
||||
for (const nodeName in this.componentNodes) {
|
||||
const clonedNode = cloneDeep(this.componentNodes[nodeName])
|
||||
returnData.push(clonedNode)
|
||||
}
|
||||
return res.json(returnData)
|
||||
})
|
||||
|
||||
// Get specific component node via name
|
||||
this.app.get('/api/v1/nodes/:name', (req: Request, res: Response) => {
|
||||
if (Object.prototype.hasOwnProperty.call(this.componentNodes, req.params.name)) {
|
||||
return res.json(this.componentNodes[req.params.name])
|
||||
} else {
|
||||
throw new Error(`Node ${req.params.name} not found`)
|
||||
}
|
||||
})
|
||||
|
||||
// Returns specific component node icon via name
|
||||
this.app.get('/api/v1/node-icon/:name', (req: Request, res: Response) => {
|
||||
if (Object.prototype.hasOwnProperty.call(this.componentNodes, req.params.name)) {
|
||||
const nodeInstance = this.componentNodes[req.params.name]
|
||||
if (nodeInstance.icon === undefined) {
|
||||
throw new Error(`Node ${req.params.name} icon not found`)
|
||||
}
|
||||
|
||||
if (nodeInstance.icon.endsWith('.svg') || nodeInstance.icon.endsWith('.png') || nodeInstance.icon.endsWith('.jpg')) {
|
||||
const filepath = nodeInstance.icon
|
||||
res.sendFile(filepath)
|
||||
} else {
|
||||
throw new Error(`Node ${req.params.name} icon is missing icon`)
|
||||
}
|
||||
} else {
|
||||
throw new Error(`Node ${req.params.name} not found`)
|
||||
}
|
||||
})
|
||||
|
||||
// ----------------------------------------
|
||||
// Chatflows
|
||||
// ----------------------------------------
|
||||
|
||||
// Get all chatflows
|
||||
this.app.get('/api/v1/chatflows', async (req: Request, res: Response) => {
|
||||
const chatflows: IChatFlow[] = await this.AppDataSource.getRepository(ChatFlow).find()
|
||||
return res.json(chatflows)
|
||||
})
|
||||
|
||||
// Get specific chatflow via id
|
||||
this.app.get('/api/v1/chatflows/:id', async (req: Request, res: Response) => {
|
||||
const chatflow = await this.AppDataSource.getRepository(ChatFlow).findOneBy({
|
||||
id: req.params.id
|
||||
})
|
||||
if (chatflow) return res.json(chatflow)
|
||||
return res.status(404).send(`Chatflow ${req.params.id} not found`)
|
||||
})
|
||||
|
||||
// Save chatflow
|
||||
this.app.post('/api/v1/chatflows', async (req: Request, res: Response) => {
|
||||
const body = req.body
|
||||
const newChatFlow = new ChatFlow()
|
||||
Object.assign(newChatFlow, body)
|
||||
|
||||
const chatflow = this.AppDataSource.getRepository(ChatFlow).create(newChatFlow)
|
||||
const results = await this.AppDataSource.getRepository(ChatFlow).save(chatflow)
|
||||
|
||||
return res.json(results)
|
||||
})
|
||||
|
||||
// Update chatflow
|
||||
this.app.put('/api/v1/chatflows/:id', async (req: Request, res: Response) => {
|
||||
const chatflow = await this.AppDataSource.getRepository(ChatFlow).findOneBy({
|
||||
id: req.params.id
|
||||
})
|
||||
|
||||
if (!chatflow) {
|
||||
res.status(404).send(`Chatflow ${req.params.id} not found`)
|
||||
return
|
||||
}
|
||||
|
||||
const body = req.body
|
||||
const updateChatFlow = new ChatFlow()
|
||||
Object.assign(updateChatFlow, body)
|
||||
|
||||
this.AppDataSource.getRepository(ChatFlow).merge(chatflow, updateChatFlow)
|
||||
const result = await this.AppDataSource.getRepository(ChatFlow).save(chatflow)
|
||||
|
||||
return res.json(result)
|
||||
})
|
||||
|
||||
// Delete chatflow via id
|
||||
this.app.delete('/api/v1/chatflows/:id', async (req: Request, res: Response) => {
|
||||
const results = await this.AppDataSource.getRepository(ChatFlow).delete({ id: req.params.id })
|
||||
return res.json(results)
|
||||
})
|
||||
|
||||
// ----------------------------------------
|
||||
// ChatMessage
|
||||
// ----------------------------------------
|
||||
|
||||
// Get all chatmessages from chatflowid
|
||||
this.app.get('/api/v1/chatmessage/:id', async (req: Request, res: Response) => {
|
||||
const chatmessages = await this.AppDataSource.getRepository(ChatMessage).findBy({
|
||||
chatflowid: req.params.id
|
||||
})
|
||||
return res.json(chatmessages)
|
||||
})
|
||||
|
||||
// Add chatmessages for chatflowid
|
||||
this.app.post('/api/v1/chatmessage/:id', async (req: Request, res: Response) => {
|
||||
const body = req.body
|
||||
const newChatMessage = new ChatMessage()
|
||||
Object.assign(newChatMessage, body)
|
||||
|
||||
const chatmessage = this.AppDataSource.getRepository(ChatMessage).create(newChatMessage)
|
||||
const results = await this.AppDataSource.getRepository(ChatMessage).save(chatmessage)
|
||||
|
||||
return res.json(results)
|
||||
})
|
||||
|
||||
// Delete all chatmessages from chatflowid
|
||||
this.app.delete('/api/v1/chatmessage/:id', async (req: Request, res: Response) => {
|
||||
const results = await this.AppDataSource.getRepository(ChatMessage).delete({ chatflowid: req.params.id })
|
||||
return res.json(results)
|
||||
})
|
||||
|
||||
// ----------------------------------------
|
||||
// Prediction
|
||||
// ----------------------------------------
|
||||
|
||||
// Send input message and get prediction result
|
||||
this.app.post('/api/v1/prediction/:id', async (req: Request, res: Response) => {
|
||||
try {
|
||||
const incomingInput: IncomingInput = req.body
|
||||
|
||||
const chatflow = await this.AppDataSource.getRepository(ChatFlow).findOneBy({
|
||||
id: req.params.id
|
||||
})
|
||||
if (!chatflow) return res.status(404).send(`Chatflow ${req.params.id} not found`)
|
||||
|
||||
const flowData = chatflow.flowData
|
||||
const parsedFlowData: IReactFlowObject = JSON.parse(flowData)
|
||||
const { graph, nodeDependencies } = constructGraphs(parsedFlowData.nodes, parsedFlowData.edges)
|
||||
|
||||
const startingNodeIds = getStartingNode(nodeDependencies)
|
||||
const endingNodeId = getEndingNode(nodeDependencies, graph)
|
||||
if (!endingNodeId) return res.status(500).send(`Ending node must be either Chain or Agent`)
|
||||
|
||||
const reactFlowNodes = await buildLangchain(startingNodeIds, parsedFlowData.nodes, graph, this.componentNodes)
|
||||
const nodeToExecute = reactFlowNodes.find((node: IReactFlowNode) => node.id === endingNodeId)
|
||||
if (!nodeToExecute) return res.status(404).send(`Node ${endingNodeId} not found`)
|
||||
|
||||
const nodeInstanceFilePath = this.componentNodes[nodeToExecute.data.name].filePath as string
|
||||
const nodeModule = await import(nodeInstanceFilePath)
|
||||
const nodeInstance = new nodeModule.nodeClass()
|
||||
|
||||
const result = await nodeInstance.run(nodeToExecute.data, incomingInput.question)
|
||||
|
||||
return res.json(result)
|
||||
} catch (e: any) {
|
||||
return res.status(500).send(e.message)
|
||||
}
|
||||
})
|
||||
|
||||
// ----------------------------------------
|
||||
// Serve UI static
|
||||
// ----------------------------------------
|
||||
|
||||
const packagePath = getNodeModulesPackagePath('flowise-ui')
|
||||
const uiBuildPath = path.join(packagePath, 'build')
|
||||
const uiHtmlPath = path.join(packagePath, 'build', 'index.html')
|
||||
|
||||
this.app.use('/', express.static(uiBuildPath))
|
||||
|
||||
// All other requests not handled will return React app
|
||||
this.app.use((req, res) => {
|
||||
res.sendFile(uiHtmlPath)
|
||||
})
|
||||
}
|
||||
|
||||
async stopApp() {
|
||||
try {
|
||||
const removePromises: any[] = []
|
||||
await Promise.all(removePromises)
|
||||
} catch (e) {
|
||||
console.error(`❌[server]: Flowise Server shut down error: ${e}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let serverApp: App | undefined
|
||||
|
||||
export async function start(): Promise<void> {
|
||||
serverApp = new App()
|
||||
|
||||
const port = parseInt(process.env.PORT || '', 10) || 3000
|
||||
const server = http.createServer(serverApp.app)
|
||||
|
||||
await serverApp.initDatabase()
|
||||
await serverApp.config()
|
||||
|
||||
server.listen(port, () => {
|
||||
console.info(`⚡️[server]: Flowise Server is listening at ${port}`)
|
||||
})
|
||||
}
|
||||
|
||||
export function getInstance(): App | undefined {
|
||||
return serverApp
|
||||
}
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
import path from 'path'
|
||||
import fs from 'fs'
|
||||
import {
|
||||
IComponentNodesPool,
|
||||
IExploredNode,
|
||||
INodeDependencies,
|
||||
INodeDirectedGraph,
|
||||
INodeQueue,
|
||||
IReactFlowEdge,
|
||||
IReactFlowNode
|
||||
} from '../Interface'
|
||||
import { cloneDeep, get } from 'lodash'
|
||||
import { ICommonObject, INodeData } from 'flowise-components'
|
||||
|
||||
/**
|
||||
* Returns the home folder path of the user if
|
||||
* none can be found it falls back to the current
|
||||
* working directory
|
||||
*
|
||||
*/
|
||||
export const getUserHome = (): string => {
|
||||
let variableName = 'HOME'
|
||||
if (process.platform === 'win32') {
|
||||
variableName = 'USERPROFILE'
|
||||
}
|
||||
|
||||
if (process.env[variableName] === undefined) {
|
||||
// If for some reason the variable does not exist
|
||||
// fall back to current folder
|
||||
return process.cwd()
|
||||
}
|
||||
return process.env[variableName] as string
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the path of node modules package
|
||||
* @param {string} packageName
|
||||
* @returns {string}
|
||||
*/
|
||||
export const getNodeModulesPackagePath = (packageName: string): string => {
|
||||
const checkPaths = [
|
||||
path.join(__dirname, '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', '..', '..', 'node_modules', packageName),
|
||||
path.join(__dirname, '..', '..', '..', '..', '..', 'node_modules', packageName)
|
||||
]
|
||||
for (const checkPath of checkPaths) {
|
||||
if (fs.existsSync(checkPath)) {
|
||||
return checkPath
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Construct directed graph and node dependencies score
|
||||
* @param {IReactFlowNode[]} reactFlowNodes
|
||||
* @param {IReactFlowEdge[]} reactFlowEdges
|
||||
*/
|
||||
export const constructGraphs = (reactFlowNodes: IReactFlowNode[], reactFlowEdges: IReactFlowEdge[]) => {
|
||||
const nodeDependencies = {} as INodeDependencies
|
||||
const graph = {} as INodeDirectedGraph
|
||||
|
||||
for (let i = 0; i < reactFlowNodes.length; i += 1) {
|
||||
const nodeId = reactFlowNodes[i].id
|
||||
nodeDependencies[nodeId] = 0
|
||||
graph[nodeId] = []
|
||||
}
|
||||
|
||||
for (let i = 0; i < reactFlowEdges.length; i += 1) {
|
||||
const source = reactFlowEdges[i].source
|
||||
const target = reactFlowEdges[i].target
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(graph, source)) {
|
||||
graph[source].push(target)
|
||||
} else {
|
||||
graph[source] = [target]
|
||||
}
|
||||
nodeDependencies[target] += 1
|
||||
}
|
||||
|
||||
return { graph, nodeDependencies }
|
||||
}
|
||||
|
||||
/**
|
||||
* Get starting node and check if flow is valid
|
||||
* @param {INodeDependencies} nodeDependencies
|
||||
*/
|
||||
export const getStartingNode = (nodeDependencies: INodeDependencies) => {
|
||||
// Find starting node
|
||||
const startingNodeIds = [] as string[]
|
||||
Object.keys(nodeDependencies).forEach((nodeId) => {
|
||||
if (nodeDependencies[nodeId] === 0) {
|
||||
startingNodeIds.push(nodeId)
|
||||
}
|
||||
})
|
||||
return startingNodeIds
|
||||
}
|
||||
|
||||
export const getEndingNode = (nodeDependencies: INodeDependencies, graph: INodeDirectedGraph) => {
|
||||
// Find starting node
|
||||
let endingNodeId = ''
|
||||
Object.keys(graph).forEach((nodeId) => {
|
||||
if (!graph[nodeId].length && nodeDependencies[nodeId] > 0) {
|
||||
endingNodeId = nodeId
|
||||
}
|
||||
})
|
||||
return endingNodeId
|
||||
}
|
||||
|
||||
/**
|
||||
* Build langchain from start to end
|
||||
* @param {string} startingNodeId
|
||||
* @param {IReactFlowNode[]} reactFlowNodes
|
||||
* @param {IReactFlowEdge[]} reactFlowEdges
|
||||
* @param {INodeDirectedGraph} graph
|
||||
* @param {IComponentNodesPool} componentNodes
|
||||
* @param {string} clientId
|
||||
* @param {any} io
|
||||
*/
|
||||
export const buildLangchain = async (
|
||||
startingNodeIds: string[],
|
||||
reactFlowNodes: IReactFlowNode[],
|
||||
graph: INodeDirectedGraph,
|
||||
componentNodes: IComponentNodesPool
|
||||
) => {
|
||||
const flowNodes = cloneDeep(reactFlowNodes)
|
||||
|
||||
// Create a Queue and add our initial node in it
|
||||
const nodeQueue = [] as INodeQueue[]
|
||||
const exploredNode = {} as IExploredNode
|
||||
|
||||
// In the case of infinite loop, only max 3 loops will be executed
|
||||
const maxLoop = 3
|
||||
|
||||
for (let i = 0; i < startingNodeIds.length; i += 1) {
|
||||
nodeQueue.push({ nodeId: startingNodeIds[i], depth: 0 })
|
||||
exploredNode[startingNodeIds[i]] = { remainingLoop: maxLoop, lastSeenDepth: 0 }
|
||||
}
|
||||
|
||||
while (nodeQueue.length) {
|
||||
const { nodeId, depth } = nodeQueue.shift() as INodeQueue
|
||||
|
||||
const reactFlowNode = flowNodes.find((nd) => nd.id === nodeId)
|
||||
const nodeIndex = flowNodes.findIndex((nd) => nd.id === nodeId)
|
||||
if (!reactFlowNode || reactFlowNode === undefined || nodeIndex < 0) continue
|
||||
|
||||
try {
|
||||
const nodeInstanceFilePath = componentNodes[reactFlowNode.data.name].filePath as string
|
||||
const nodeModule = await import(nodeInstanceFilePath)
|
||||
const newNodeInstance = new nodeModule.nodeClass()
|
||||
|
||||
const reactFlowNodeData: INodeData = resolveVariables(reactFlowNode.data, flowNodes)
|
||||
|
||||
flowNodes[nodeIndex].data.instance = await newNodeInstance.init(reactFlowNodeData)
|
||||
} catch (e: any) {
|
||||
console.error(e)
|
||||
throw new Error(e)
|
||||
}
|
||||
|
||||
const neighbourNodeIds = graph[nodeId]
|
||||
const nextDepth = depth + 1
|
||||
|
||||
for (let i = 0; i < neighbourNodeIds.length; i += 1) {
|
||||
const neighNodeId = neighbourNodeIds[i]
|
||||
|
||||
// If nodeId has been seen, cycle detected
|
||||
if (Object.prototype.hasOwnProperty.call(exploredNode, neighNodeId)) {
|
||||
const { remainingLoop, lastSeenDepth } = exploredNode[neighNodeId]
|
||||
|
||||
if (lastSeenDepth === nextDepth) continue
|
||||
|
||||
if (remainingLoop === 0) {
|
||||
break
|
||||
}
|
||||
const remainingLoopMinusOne = remainingLoop - 1
|
||||
exploredNode[neighNodeId] = { remainingLoop: remainingLoopMinusOne, lastSeenDepth: nextDepth }
|
||||
nodeQueue.push({ nodeId: neighNodeId, depth: nextDepth })
|
||||
} else {
|
||||
exploredNode[neighNodeId] = { remainingLoop: maxLoop, lastSeenDepth: nextDepth }
|
||||
nodeQueue.push({ nodeId: neighNodeId, depth: nextDepth })
|
||||
}
|
||||
}
|
||||
}
|
||||
return flowNodes
|
||||
}
|
||||
|
||||
/**
|
||||
* Get variable value from outputResponses.output
|
||||
* @param {string} paramValue
|
||||
* @param {IReactFlowNode[]} reactFlowNodes
|
||||
* @param {string} key
|
||||
* @param {number} loopIndex
|
||||
* @returns {string}
|
||||
*/
|
||||
export const getVariableValue = (paramValue: string, reactFlowNodes: IReactFlowNode[]) => {
|
||||
let returnVal = paramValue
|
||||
const variableStack = []
|
||||
let startIdx = 0
|
||||
const endIdx = returnVal.length - 1
|
||||
|
||||
while (startIdx < endIdx) {
|
||||
const substr = returnVal.substring(startIdx, startIdx + 2)
|
||||
|
||||
// Store the opening double curly bracket
|
||||
if (substr === '{{') {
|
||||
variableStack.push({ substr, startIdx: startIdx + 2 })
|
||||
}
|
||||
|
||||
// Found the complete variable
|
||||
if (substr === '}}' && variableStack.length > 0 && variableStack[variableStack.length - 1].substr === '{{') {
|
||||
const variableStartIdx = variableStack[variableStack.length - 1].startIdx
|
||||
const variableEndIdx = startIdx
|
||||
const variableFullPath = returnVal.substring(variableStartIdx, variableEndIdx)
|
||||
|
||||
// Split by first occurence of '.' to get just nodeId
|
||||
const [variableNodeId, _] = variableFullPath.split('.')
|
||||
const executedNode = reactFlowNodes.find((nd) => nd.id === variableNodeId)
|
||||
if (executedNode) {
|
||||
const variableInstance = get(executedNode.data, 'instance')
|
||||
returnVal = variableInstance
|
||||
}
|
||||
variableStack.pop()
|
||||
}
|
||||
startIdx += 1
|
||||
}
|
||||
return returnVal
|
||||
}
|
||||
|
||||
/**
|
||||
* Loop through each inputs and resolve variable if neccessary
|
||||
* @param {INodeData} reactFlowNodeData
|
||||
* @param {IReactFlowNode[]} reactFlowNodes
|
||||
* @returns {INodeData}
|
||||
*/
|
||||
export const resolveVariables = (reactFlowNodeData: INodeData, reactFlowNodes: IReactFlowNode[]): INodeData => {
|
||||
const flowNodeData = cloneDeep(reactFlowNodeData)
|
||||
const types = 'inputs'
|
||||
|
||||
const getParamValues = (paramsObj: ICommonObject) => {
|
||||
for (const key in paramsObj) {
|
||||
const paramValue: string = paramsObj[key]
|
||||
|
||||
if (Array.isArray(paramValue)) {
|
||||
const resolvedInstances = []
|
||||
for (const param of paramValue) {
|
||||
const resolvedInstance = getVariableValue(param, reactFlowNodes)
|
||||
resolvedInstances.push(resolvedInstance)
|
||||
}
|
||||
paramsObj[key] = resolvedInstances
|
||||
} else {
|
||||
const resolvedInstance = getVariableValue(paramValue, reactFlowNodes)
|
||||
paramsObj[key] = resolvedInstance
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const paramsObj = (flowNodeData as any)[types]
|
||||
|
||||
getParamValues(paramsObj)
|
||||
|
||||
return flowNodeData
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["es2017"],
|
||||
"target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||
"experimentalDecorators": true /* Enable experimental support for TC39 stage 2 draft decorators. */,
|
||||
"emitDecoratorMetadata": true /* Emit design-type metadata for decorated declarations in source files. */,
|
||||
"module": "commonjs" /* Specify what module code is generated. */,
|
||||
"outDir": "dist",
|
||||
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
|
||||
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
|
||||
"sourceMap": true,
|
||||
"strictPropertyInitialization": false,
|
||||
"declaration": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/tests
|
||||
/src
|
||||
/public
|
||||
!build
|
||||
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.eslintrc
|
||||
.prettierignore
|
||||
.prettierrc
|
||||
jsconfig.json
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!-- markdownlint-disable MD030 -->
|
||||
|
||||
# Flowise UI
|
||||
|
||||
React frontend ui for Flowise.
|
||||
|
||||
|
||||
|
||||
Install:
|
||||
|
||||
```bash
|
||||
npm i flowise-ui
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Source code in this repository is made available under the [MIT License](https://github.com/FlowiseAI/Flowise/blob/master/LICENSE.md).
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "commonjs",
|
||||
"baseUrl": "src"
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
{
|
||||
"name": "flowise-ui",
|
||||
"version": "1.0.1",
|
||||
"license": "SEE LICENSE IN LICENSE.md",
|
||||
"homepage": "https://flowiseai.com",
|
||||
"author": {
|
||||
"name": "HenryHeng",
|
||||
"email": "henryheng@flowiseai.com"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/cache": "^11.4.0",
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@emotion/styled": "^11.10.6",
|
||||
"@mui/icons-material": "^5.0.3",
|
||||
"@mui/material": "^5.11.12",
|
||||
"@tabler/icons": "^1.39.1",
|
||||
"clsx": "^1.1.1",
|
||||
"formik": "^2.2.6",
|
||||
"framer-motion": "^4.1.13",
|
||||
"history": "^5.0.0",
|
||||
"html-react-parser": "^3.0.4",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.3",
|
||||
"notistack": "^2.0.4",
|
||||
"prismjs": "^1.28.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^18.2.0",
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-device-detect": "^1.17.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-json-view": "^1.21.3",
|
||||
"react-markdown": "^8.0.6",
|
||||
"react-perfect-scrollbar": "^1.5.8",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router": "~6.3.0",
|
||||
"react-router-dom": "~6.3.0",
|
||||
"react-simple-code-editor": "^0.11.2",
|
||||
"reactflow": "^11.5.6",
|
||||
"redux": "^4.0.5",
|
||||
"yup": "^0.32.9"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"dev": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-react"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.15.8",
|
||||
"@testing-library/jest-dom": "^5.11.10",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"pretty-quick": "^3.1.3",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sass": "^1.42.1",
|
||||
"typescript": "^4.8.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
Binary file not shown.
|
After Width: | Height: | Size: 589 B |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Flowise - LangchainJS UI</title>
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<!-- Meta Tags-->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#2296f3" />
|
||||
<meta name="title" content="Flowise - LangchainJS UI" />
|
||||
<meta name="description" content="Flowise helps you to better integrate Web3 with existing Web2 applications" />
|
||||
<meta name="keywords" content="react, material-ui, reactjs, reactjs, workflow automation, web3, web2, blockchain" />
|
||||
<meta name="author" content="CodedThemes" />
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://flowiseai.com/" />
|
||||
<meta property="og:site_name" content="flowiseai.com" />
|
||||
<meta property="article:publisher" content="https://www.facebook.com/codedthemes" />
|
||||
<meta property="og:title" content="Flowise - LangchainJS UI" />
|
||||
<meta property="og:description" content="Flowise helps you to better build LLM flows using Langchain in simple GUI" />
|
||||
<meta property="og:image" content="https://flowiseai.com/og-image/og-facebook.png" />
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://flowiseai.com" />
|
||||
<meta property="twitter:title" content="Flowise - LangchainJS UI" />
|
||||
<meta property="twitter:description" content="Flowise helps you to better build LLM flows using Langchain in simple GUI" />
|
||||
<meta property="twitter:image" content="https://flowiseai.com/og-image/og-twitter.png" />
|
||||
<meta name="twitter:creator" content="@codedthemes" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<div id="portal"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { useSelector } from 'react-redux'
|
||||
|
||||
import { ThemeProvider } from '@mui/material/styles'
|
||||
import { CssBaseline, StyledEngineProvider } from '@mui/material'
|
||||
|
||||
// routing
|
||||
import Routes from 'routes'
|
||||
|
||||
// defaultTheme
|
||||
import themes from 'themes'
|
||||
|
||||
// project imports
|
||||
import NavigationScroll from 'layout/NavigationScroll'
|
||||
|
||||
// ==============================|| APP ||============================== //
|
||||
|
||||
const App = () => {
|
||||
const customization = useSelector((state) => state.customization)
|
||||
|
||||
return (
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={themes(customization)}>
|
||||
<CssBaseline />
|
||||
<NavigationScroll>
|
||||
<Routes />
|
||||
</NavigationScroll>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import client from './client'
|
||||
|
||||
const getAllChatflows = () => client.get('/chatflows')
|
||||
|
||||
const getSpecificChatflow = (id) => client.get(`/chatflows/${id}`)
|
||||
|
||||
const createNewChatflow = (body) => client.post(`/chatflows`, body)
|
||||
|
||||
const updateChatflow = (id, body) => client.put(`/chatflows/${id}`, body)
|
||||
|
||||
const deleteChatflow = (id) => client.delete(`/chatflows/${id}`)
|
||||
|
||||
export default {
|
||||
getAllChatflows,
|
||||
getSpecificChatflow,
|
||||
createNewChatflow,
|
||||
updateChatflow,
|
||||
deleteChatflow
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import client from './client'
|
||||
|
||||
const getChatmessageFromChatflow = (id) => client.get(`/chatmessage/${id}`)
|
||||
|
||||
const createNewChatmessage = (id, body) => client.post(`/chatmessage/${id}`, body)
|
||||
|
||||
const deleteChatmessage = (id) => client.delete(`/chatmessage/${id}`)
|
||||
|
||||
export default {
|
||||
getChatmessageFromChatflow,
|
||||
createNewChatmessage,
|
||||
deleteChatmessage
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from 'axios'
|
||||
import { baseURL } from 'store/constant'
|
||||
|
||||
const apiClient = axios.create({
|
||||
baseURL: `${baseURL}/api/v1`,
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
export default apiClient
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import client from './client'
|
||||
|
||||
const getAllNodes = () => client.get('/nodes')
|
||||
|
||||
const getSpecificNode = (name) => client.get(`/nodes/${name}`)
|
||||
|
||||
export default {
|
||||
getAllNodes,
|
||||
getSpecificNode
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import client from './client'
|
||||
|
||||
const sendMessageAndGetPrediction = (id, input) => client.post(`/prediction/${id}`, input)
|
||||
|
||||
export default {
|
||||
sendMessageAndGetPrediction
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,157 @@
|
|||
// paper & background
|
||||
$paper: #ffffff;
|
||||
|
||||
// primary
|
||||
$primaryLight: #e3f2fd;
|
||||
$primaryMain: #2196f3;
|
||||
$primaryDark: #1e88e5;
|
||||
$primary200: #90caf9;
|
||||
$primary800: #1565c0;
|
||||
|
||||
// secondary
|
||||
$secondaryLight: #ede7f6;
|
||||
$secondaryMain: #673ab7;
|
||||
$secondaryDark: #5e35b1;
|
||||
$secondary200: #b39ddb;
|
||||
$secondary800: #4527a0;
|
||||
|
||||
// success Colors
|
||||
$successLight: #cdf5d8;
|
||||
$success200: #69f0ae;
|
||||
$successMain: #00e676;
|
||||
$successDark: #00c853;
|
||||
|
||||
// error
|
||||
$errorLight: #f3d2d2;
|
||||
$errorMain: #f44336;
|
||||
$errorDark: #c62828;
|
||||
|
||||
// orange
|
||||
$orangeLight: #fbe9e7;
|
||||
$orangeMain: #ffab91;
|
||||
$orangeDark: #d84315;
|
||||
|
||||
// warning
|
||||
$warningLight: #fff8e1;
|
||||
$warningMain: #ffe57f;
|
||||
$warningDark: #ffc107;
|
||||
|
||||
// grey
|
||||
$grey50: #fafafa;
|
||||
$grey100: #f5f5f5;
|
||||
$grey200: #eeeeee;
|
||||
$grey300: #e0e0e0;
|
||||
$grey500: #9e9e9e;
|
||||
$grey600: #757575;
|
||||
$grey700: #616161;
|
||||
$grey900: #212121;
|
||||
|
||||
// ==============================|| DARK THEME VARIANTS ||============================== //
|
||||
|
||||
// paper & background
|
||||
$darkBackground: #191b1f;
|
||||
$darkPaper: #191b1f;
|
||||
|
||||
// dark 800 & 900
|
||||
$darkLevel1: #252525; // level 1
|
||||
$darkLevel2: #242424; // level 2
|
||||
|
||||
// primary dark
|
||||
$darkPrimaryLight: #23262c;
|
||||
$darkPrimaryMain: #23262c;
|
||||
$darkPrimaryDark: #191b1f;
|
||||
$darkPrimary200: #c9d4e9;
|
||||
$darkPrimary800: #32353b;
|
||||
|
||||
// secondary dark
|
||||
$darkSecondaryLight: #454c59;
|
||||
$darkSecondaryMain: #7c4dff;
|
||||
$darkSecondaryDark: #ffffff;
|
||||
$darkSecondary200: #32353b;
|
||||
$darkSecondary800: #6200ea;
|
||||
|
||||
// text variants
|
||||
$darkTextTitle: #d7dcec;
|
||||
$darkTextPrimary: #bdc8f0;
|
||||
$darkTextSecondary: #8492c4;
|
||||
|
||||
// ==============================|| JAVASCRIPT ||============================== //
|
||||
|
||||
:export {
|
||||
// paper & background
|
||||
paper: $paper;
|
||||
|
||||
// primary
|
||||
primaryLight: $primaryLight;
|
||||
primary200: $primary200;
|
||||
primaryMain: $primaryMain;
|
||||
primaryDark: $primaryDark;
|
||||
primary800: $primary800;
|
||||
|
||||
// secondary
|
||||
secondaryLight: $secondaryLight;
|
||||
secondary200: $secondary200;
|
||||
secondaryMain: $secondaryMain;
|
||||
secondaryDark: $secondaryDark;
|
||||
secondary800: $secondary800;
|
||||
|
||||
// success
|
||||
successLight: $successLight;
|
||||
success200: $success200;
|
||||
successMain: $successMain;
|
||||
successDark: $successDark;
|
||||
|
||||
// error
|
||||
errorLight: $errorLight;
|
||||
errorMain: $errorMain;
|
||||
errorDark: $errorDark;
|
||||
|
||||
// orange
|
||||
orangeLight: $orangeLight;
|
||||
orangeMain: $orangeMain;
|
||||
orangeDark: $orangeDark;
|
||||
|
||||
// warning
|
||||
warningLight: $warningLight;
|
||||
warningMain: $warningMain;
|
||||
warningDark: $warningDark;
|
||||
|
||||
// grey
|
||||
grey50: $grey50;
|
||||
grey100: $grey100;
|
||||
grey200: $grey200;
|
||||
grey300: $grey300;
|
||||
grey500: $grey500;
|
||||
grey600: $grey600;
|
||||
grey700: $grey700;
|
||||
grey900: $grey900;
|
||||
|
||||
// ==============================|| DARK THEME VARIANTS ||============================== //
|
||||
|
||||
// paper & background
|
||||
darkPaper: $darkPaper;
|
||||
darkBackground: $darkBackground;
|
||||
|
||||
// dark 800 & 900
|
||||
darkLevel1: $darkLevel1;
|
||||
darkLevel2: $darkLevel2;
|
||||
|
||||
// text variants
|
||||
darkTextTitle: $darkTextTitle;
|
||||
darkTextPrimary: $darkTextPrimary;
|
||||
darkTextSecondary: $darkTextSecondary;
|
||||
|
||||
// primary dark
|
||||
darkPrimaryLight: $darkPrimaryLight;
|
||||
darkPrimaryMain: $darkPrimaryMain;
|
||||
darkPrimaryDark: $darkPrimaryDark;
|
||||
darkPrimary200: $darkPrimary200;
|
||||
darkPrimary800: $darkPrimary800;
|
||||
|
||||
// secondary dark
|
||||
darkSecondaryLight: $darkSecondaryLight;
|
||||
darkSecondaryMain: $darkSecondaryMain;
|
||||
darkSecondaryDark: $darkSecondaryDark;
|
||||
darkSecondary200: $darkSecondary200;
|
||||
darkSecondary800: $darkSecondary800;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
// color variants
|
||||
@import 'themes-vars.module.scss';
|
||||
|
||||
// third-party
|
||||
@import '~react-perfect-scrollbar/dist/css/styles.css';
|
||||
|
||||
// ==============================|| LIGHT BOX ||============================== //
|
||||
.fullscreen .react-images__blanket {
|
||||
z-index: 1200;
|
||||
}
|
||||
|
||||
// ==============================|| PERFECT SCROLLBAR ||============================== //
|
||||
|
||||
.scrollbar-container {
|
||||
.ps__rail-y {
|
||||
&:hover > .ps__thumb-y,
|
||||
&:focus > .ps__thumb-y,
|
||||
&.ps--clicking .ps__thumb-y {
|
||||
background-color: $grey500;
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
.ps__thumb-y {
|
||||
background-color: $grey500;
|
||||
border-radius: 6px;
|
||||
width: 5px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-container.ps,
|
||||
.scrollbar-container > .ps {
|
||||
&.ps--active-y > .ps__rail-y {
|
||||
width: 5px;
|
||||
background-color: transparent !important;
|
||||
z-index: 999;
|
||||
&:hover,
|
||||
&.ps--clicking {
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.ps--scrolling-y > .ps__rail-y,
|
||||
&.ps--scrolling-x > .ps__rail-x {
|
||||
opacity: 0.4;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// ==============================|| ANIMATION KEYFRAMES ||============================== //
|
||||
|
||||
@keyframes wings {
|
||||
50% {
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
40%,
|
||||
43% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
70% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -7px, 0);
|
||||
}
|
||||
80% {
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideY {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideX {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const config = {
|
||||
// basename: only at build time to set, and Don't add '/' at end off BASENAME for breadcrumbs, also Don't put only '/' use blank('') instead,
|
||||
basename: '',
|
||||
defaultPath: '/chatflows',
|
||||
fontFamily: `'Roboto', sans-serif`,
|
||||
borderRadius: 12
|
||||
}
|
||||
|
||||
export default config
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { useState } from 'react'
|
||||
|
||||
export default (apiFunc) => {
|
||||
const [data, setData] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const request = async (...args) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await apiFunc(...args)
|
||||
setData(result.data)
|
||||
} catch (err) {
|
||||
setError(err || 'Unexpected Error!')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
error,
|
||||
loading,
|
||||
request
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { useContext } from 'react'
|
||||
import ConfirmContext from 'store/context/ConfirmContext'
|
||||
import { HIDE_CONFIRM, SHOW_CONFIRM } from 'store/actions'
|
||||
|
||||
let resolveCallback
|
||||
const useConfirm = () => {
|
||||
const [confirmState, dispatch] = useContext(ConfirmContext)
|
||||
|
||||
const closeConfirm = () => {
|
||||
dispatch({
|
||||
type: HIDE_CONFIRM
|
||||
})
|
||||
}
|
||||
|
||||
const onConfirm = () => {
|
||||
closeConfirm()
|
||||
resolveCallback(true)
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
closeConfirm()
|
||||
resolveCallback(false)
|
||||
}
|
||||
const confirm = (confirmPayload) => {
|
||||
dispatch({
|
||||
type: SHOW_CONFIRM,
|
||||
payload: confirmPayload
|
||||
})
|
||||
return new Promise((res) => {
|
||||
resolveCallback = res
|
||||
})
|
||||
}
|
||||
|
||||
return { confirm, onConfirm, onCancel, confirmState }
|
||||
}
|
||||
|
||||
export default useConfirm
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { useEffect, useRef } from 'react'
|
||||
|
||||
// ==============================|| ELEMENT REFERENCE HOOKS ||============================== //
|
||||
|
||||
const useScriptRef = () => {
|
||||
const scripted = useRef(true)
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
scripted.current = false
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return scripted
|
||||
}
|
||||
|
||||
export default useScriptRef
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react'
|
||||
import App from './App'
|
||||
import { store } from 'store'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
|
||||
// style + assets
|
||||
import 'assets/scss/style.scss'
|
||||
|
||||
// third party
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { Provider } from 'react-redux'
|
||||
import { SnackbarProvider } from 'notistack'
|
||||
import ConfirmContextProvider from 'store/context/ConfirmContextProvider'
|
||||
import { ReactFlowContext } from 'store/context/ReactFlowContext'
|
||||
|
||||
const container = document.getElementById('root')
|
||||
const root = createRoot(container)
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<SnackbarProvider>
|
||||
<ConfirmContextProvider>
|
||||
<ReactFlowContext>
|
||||
<App />
|
||||
</ReactFlowContext>
|
||||
</ConfirmContextProvider>
|
||||
</SnackbarProvider>
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import PropTypes from 'prop-types'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { useState } from 'react'
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { Avatar, Box, ButtonBase, Switch } from '@mui/material'
|
||||
import { styled } from '@mui/material/styles'
|
||||
|
||||
// project imports
|
||||
import LogoSection from '../LogoSection'
|
||||
|
||||
// assets
|
||||
import { IconMenu2 } from '@tabler/icons'
|
||||
|
||||
// store
|
||||
import { SET_DARKMODE } from 'store/actions'
|
||||
|
||||
// ==============================|| MAIN NAVBAR / HEADER ||============================== //
|
||||
|
||||
const MaterialUISwitch = styled(Switch)(({ theme }) => ({
|
||||
width: 62,
|
||||
height: 34,
|
||||
padding: 7,
|
||||
'& .MuiSwitch-switchBase': {
|
||||
margin: 1,
|
||||
padding: 0,
|
||||
transform: 'translateX(6px)',
|
||||
'&.Mui-checked': {
|
||||
color: '#fff',
|
||||
transform: 'translateX(22px)',
|
||||
'& .MuiSwitch-thumb:before': {
|
||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
||||
'#fff'
|
||||
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`
|
||||
},
|
||||
'& + .MuiSwitch-track': {
|
||||
opacity: 1,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .MuiSwitch-thumb': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
|
||||
width: 32,
|
||||
height: 32,
|
||||
'&:before': {
|
||||
content: "''",
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
top: 0,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
||||
'#fff'
|
||||
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`
|
||||
}
|
||||
},
|
||||
'& .MuiSwitch-track': {
|
||||
opacity: 1,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
|
||||
borderRadius: 20 / 2
|
||||
}
|
||||
}))
|
||||
|
||||
const Header = ({ handleLeftDrawerToggle }) => {
|
||||
const theme = useTheme()
|
||||
const customization = useSelector((state) => state.customization)
|
||||
|
||||
const [isDark, setIsDark] = useState(customization.isDarkMode)
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const changeDarkMode = () => {
|
||||
dispatch({ type: SET_DARKMODE, isDarkMode: !isDark })
|
||||
setIsDark((isDark) => !isDark)
|
||||
localStorage.setItem('isDarkMode', !isDark)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* logo & toggler button */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 228,
|
||||
display: 'flex',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
width: 'auto'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box component='span' sx={{ display: { xs: 'none', md: 'block' }, flexGrow: 1 }}>
|
||||
<LogoSection />
|
||||
</Box>
|
||||
<ButtonBase sx={{ borderRadius: '12px', overflow: 'hidden' }}>
|
||||
<Avatar
|
||||
variant='rounded'
|
||||
sx={{
|
||||
...theme.typography.commonAvatar,
|
||||
...theme.typography.mediumAvatar,
|
||||
transition: 'all .2s ease-in-out',
|
||||
background: theme.palette.secondary.light,
|
||||
color: theme.palette.secondary.dark,
|
||||
'&:hover': {
|
||||
background: theme.palette.secondary.dark,
|
||||
color: theme.palette.secondary.light
|
||||
}
|
||||
}}
|
||||
onClick={handleLeftDrawerToggle}
|
||||
color='inherit'
|
||||
>
|
||||
<IconMenu2 stroke={1.5} size='1.3rem' />
|
||||
</Avatar>
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
<MaterialUISwitch checked={isDark} onChange={changeDarkMode} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
handleLeftDrawerToggle: PropTypes.func
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Link } from 'react-router-dom'
|
||||
|
||||
// material-ui
|
||||
import { ButtonBase } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import config from 'config'
|
||||
import Logo from 'ui-component/extended/Logo'
|
||||
|
||||
// ==============================|| MAIN LOGO ||============================== //
|
||||
|
||||
const LogoSection = () => (
|
||||
<ButtonBase disableRipple component={Link} to={config.defaultPath}>
|
||||
<Logo />
|
||||
</ButtonBase>
|
||||
)
|
||||
|
||||
export default LogoSection
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import PropTypes from 'prop-types'
|
||||
import { useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import NavItem from '../NavItem'
|
||||
|
||||
// assets
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
|
||||
import { IconChevronDown, IconChevronUp } from '@tabler/icons'
|
||||
|
||||
// ==============================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||============================== //
|
||||
|
||||
const NavCollapse = ({ menu, level }) => {
|
||||
const theme = useTheme()
|
||||
const customization = useSelector((state) => state.customization)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [selected, setSelected] = useState(null)
|
||||
|
||||
const handleClick = () => {
|
||||
setOpen(!open)
|
||||
setSelected(!selected ? menu.id : null)
|
||||
}
|
||||
|
||||
// menu collapse & item
|
||||
const menus = menu.children?.map((item) => {
|
||||
switch (item.type) {
|
||||
case 'collapse':
|
||||
return <NavCollapse key={item.id} menu={item} level={level + 1} />
|
||||
case 'item':
|
||||
return <NavItem key={item.id} item={item} level={level + 1} />
|
||||
default:
|
||||
return (
|
||||
<Typography key={item.id} variant='h6' color='error' align='center'>
|
||||
Menu Items Error
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
const Icon = menu.icon
|
||||
const menuIcon = menu.icon ? (
|
||||
<Icon strokeWidth={1.5} size='1.3rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
|
||||
) : (
|
||||
<FiberManualRecordIcon
|
||||
sx={{
|
||||
width: selected === menu.id ? 8 : 6,
|
||||
height: selected === menu.id ? 8 : 6
|
||||
}}
|
||||
fontSize={level > 0 ? 'inherit' : 'medium'}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
borderRadius: `${customization.borderRadius}px`,
|
||||
mb: 0.5,
|
||||
alignItems: 'flex-start',
|
||||
backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
|
||||
py: level > 1 ? 1 : 1.25,
|
||||
pl: `${level * 24}px`
|
||||
}}
|
||||
selected={selected === menu.id}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36 }}>{menuIcon}</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography variant={selected === menu.id ? 'h5' : 'body1'} color='inherit' sx={{ my: 'auto' }}>
|
||||
{menu.title}
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
menu.caption && (
|
||||
<Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
|
||||
{menu.caption}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
/>
|
||||
{open ? (
|
||||
<IconChevronUp stroke={1.5} size='1rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
|
||||
) : (
|
||||
<IconChevronDown stroke={1.5} size='1rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
|
||||
)}
|
||||
</ListItemButton>
|
||||
<Collapse in={open} timeout='auto' unmountOnExit>
|
||||
<List
|
||||
component='div'
|
||||
disablePadding
|
||||
sx={{
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
content: "''",
|
||||
position: 'absolute',
|
||||
left: '32px',
|
||||
top: 0,
|
||||
height: '100%',
|
||||
width: '1px',
|
||||
opacity: 1,
|
||||
background: theme.palette.primary.light
|
||||
}
|
||||
}}
|
||||
>
|
||||
{menus}
|
||||
</List>
|
||||
</Collapse>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
NavCollapse.propTypes = {
|
||||
menu: PropTypes.object,
|
||||
level: PropTypes.number
|
||||
}
|
||||
|
||||
export default NavCollapse
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import PropTypes from 'prop-types'
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { Divider, List, Typography } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import NavItem from '../NavItem'
|
||||
import NavCollapse from '../NavCollapse'
|
||||
|
||||
// ==============================|| SIDEBAR MENU LIST GROUP ||============================== //
|
||||
|
||||
const NavGroup = ({ item }) => {
|
||||
const theme = useTheme()
|
||||
|
||||
// menu list collapse & items
|
||||
const items = item.children?.map((menu) => {
|
||||
switch (menu.type) {
|
||||
case 'collapse':
|
||||
return <NavCollapse key={menu.id} menu={menu} level={1} />
|
||||
case 'item':
|
||||
return <NavItem key={menu.id} item={menu} level={1} navType='MENU' />
|
||||
default:
|
||||
return (
|
||||
<Typography key={menu.id} variant='h6' color='error' align='center'>
|
||||
Menu Items Error
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<List
|
||||
subheader={
|
||||
item.title && (
|
||||
<Typography variant='caption' sx={{ ...theme.typography.menuCaption }} display='block' gutterBottom>
|
||||
{item.title}
|
||||
{item.caption && (
|
||||
<Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
|
||||
{item.caption}
|
||||
</Typography>
|
||||
)}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
>
|
||||
{items}
|
||||
</List>
|
||||
|
||||
{/* group divider */}
|
||||
<Divider sx={{ mt: 0.25, mb: 1.25 }} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
NavGroup.propTypes = {
|
||||
item: PropTypes.object
|
||||
}
|
||||
|
||||
export default NavGroup
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
import PropTypes from 'prop-types'
|
||||
import { forwardRef, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import { MENU_OPEN, SET_MENU } from 'store/actions'
|
||||
import config from 'config'
|
||||
|
||||
// assets
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
|
||||
|
||||
// ==============================|| SIDEBAR MENU LIST ITEMS ||============================== //
|
||||
|
||||
const NavItem = ({ item, level, navType, onClick, onUploadFile }) => {
|
||||
const theme = useTheme()
|
||||
const dispatch = useDispatch()
|
||||
const customization = useSelector((state) => state.customization)
|
||||
const matchesSM = useMediaQuery(theme.breakpoints.down('lg'))
|
||||
|
||||
const Icon = item.icon
|
||||
const itemIcon = item?.icon ? (
|
||||
<Icon stroke={1.5} size='1.3rem' />
|
||||
) : (
|
||||
<FiberManualRecordIcon
|
||||
sx={{
|
||||
width: customization.isOpen.findIndex((id) => id === item?.id) > -1 ? 8 : 6,
|
||||
height: customization.isOpen.findIndex((id) => id === item?.id) > -1 ? 8 : 6
|
||||
}}
|
||||
fontSize={level > 0 ? 'inherit' : 'medium'}
|
||||
/>
|
||||
)
|
||||
|
||||
let itemTarget = '_self'
|
||||
if (item.target) {
|
||||
itemTarget = '_blank'
|
||||
}
|
||||
|
||||
let listItemProps = {
|
||||
component: forwardRef(function ListItemPropsComponent(props, ref) {
|
||||
return <Link ref={ref} {...props} to={`${config.basename}${item.url}`} target={itemTarget} />
|
||||
})
|
||||
}
|
||||
if (item?.external) {
|
||||
listItemProps = { component: 'a', href: item.url, target: itemTarget }
|
||||
}
|
||||
if (item?.id === 'loadChatflow') {
|
||||
listItemProps.component = 'label'
|
||||
}
|
||||
|
||||
const handleFileUpload = (e) => {
|
||||
if (!e.target.files) return
|
||||
|
||||
const file = e.target.files[0]
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = (evt) => {
|
||||
if (!evt?.target?.result) {
|
||||
return
|
||||
}
|
||||
const { result } = evt.target
|
||||
onUploadFile(result)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
const itemHandler = (id) => {
|
||||
if (navType === 'SETTINGS' && id !== 'loadChatflow') {
|
||||
onClick(id)
|
||||
} else {
|
||||
dispatch({ type: MENU_OPEN, id })
|
||||
if (matchesSM) dispatch({ type: SET_MENU, opened: false })
|
||||
}
|
||||
}
|
||||
|
||||
// active menu item on page load
|
||||
useEffect(() => {
|
||||
if (navType === 'MENU') {
|
||||
const currentIndex = document.location.pathname
|
||||
.toString()
|
||||
.split('/')
|
||||
.findIndex((id) => id === item.id)
|
||||
if (currentIndex > -1) {
|
||||
dispatch({ type: MENU_OPEN, id: item.id })
|
||||
}
|
||||
if (!document.location.pathname.toString().split('/')[1]) {
|
||||
itemHandler('chatflows')
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [navType])
|
||||
|
||||
return (
|
||||
<ListItemButton
|
||||
{...listItemProps}
|
||||
disabled={item.disabled}
|
||||
sx={{
|
||||
borderRadius: `${customization.borderRadius}px`,
|
||||
mb: 0.5,
|
||||
alignItems: 'flex-start',
|
||||
backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
|
||||
py: level > 1 ? 1 : 1.25,
|
||||
pl: `${level * 24}px`
|
||||
}}
|
||||
selected={customization.isOpen.findIndex((id) => id === item.id) > -1}
|
||||
onClick={() => itemHandler(item.id)}
|
||||
>
|
||||
{item.id === 'loadChatflow' && <input type='file' hidden accept='.json' onChange={(e) => handleFileUpload(e)} />}
|
||||
<ListItemIcon sx={{ my: 'auto', minWidth: !item?.icon ? 18 : 36 }}>{itemIcon}</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography variant={customization.isOpen.findIndex((id) => id === item.id) > -1 ? 'h5' : 'body1'} color='inherit'>
|
||||
{item.title}
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
item.caption && (
|
||||
<Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
|
||||
{item.caption}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
/>
|
||||
{item.chip && (
|
||||
<Chip
|
||||
color={item.chip.color}
|
||||
variant={item.chip.variant}
|
||||
size={item.chip.size}
|
||||
label={item.chip.label}
|
||||
avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
|
||||
/>
|
||||
)}
|
||||
</ListItemButton>
|
||||
)
|
||||
}
|
||||
|
||||
NavItem.propTypes = {
|
||||
item: PropTypes.object,
|
||||
level: PropTypes.number,
|
||||
navType: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
onUploadFile: PropTypes.func
|
||||
}
|
||||
|
||||
export default NavItem
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// material-ui
|
||||
import { Typography } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import NavGroup from './NavGroup'
|
||||
import menuItem from 'menu-items'
|
||||
|
||||
// ==============================|| SIDEBAR MENU LIST ||============================== //
|
||||
|
||||
const MenuList = () => {
|
||||
const navItems = menuItem.items.map((item) => {
|
||||
switch (item.type) {
|
||||
case 'group':
|
||||
return <NavGroup key={item.id} item={item} />
|
||||
default:
|
||||
return (
|
||||
<Typography key={item.id} variant='h6' color='error' align='center'>
|
||||
Menu Items Error
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
return <>{navItems}</>
|
||||
}
|
||||
|
||||
export default MenuList
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import PropTypes from 'prop-types'
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { Box, Drawer, useMediaQuery } from '@mui/material'
|
||||
|
||||
// third-party
|
||||
import PerfectScrollbar from 'react-perfect-scrollbar'
|
||||
import { BrowserView, MobileView } from 'react-device-detect'
|
||||
|
||||
// project imports
|
||||
import MenuList from './MenuList'
|
||||
import LogoSection from '../LogoSection'
|
||||
import { drawerWidth } from 'store/constant'
|
||||
|
||||
// ==============================|| SIDEBAR DRAWER ||============================== //
|
||||
|
||||
const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
|
||||
const theme = useTheme()
|
||||
const matchUpMd = useMediaQuery(theme.breakpoints.up('md'))
|
||||
|
||||
const drawer = (
|
||||
<>
|
||||
<Box sx={{ display: { xs: 'block', md: 'none' } }}>
|
||||
<Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
|
||||
<LogoSection />
|
||||
</Box>
|
||||
</Box>
|
||||
<BrowserView>
|
||||
<PerfectScrollbar
|
||||
component='div'
|
||||
style={{
|
||||
height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
|
||||
paddingLeft: '16px',
|
||||
paddingRight: '16px'
|
||||
}}
|
||||
>
|
||||
<MenuList />
|
||||
</PerfectScrollbar>
|
||||
</BrowserView>
|
||||
<MobileView>
|
||||
<Box sx={{ px: 2 }}>
|
||||
<MenuList />
|
||||
</Box>
|
||||
</MobileView>
|
||||
</>
|
||||
)
|
||||
|
||||
const container = window !== undefined ? () => window.document.body : undefined
|
||||
|
||||
return (
|
||||
<Box component='nav' sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label='mailbox folders'>
|
||||
<Drawer
|
||||
container={container}
|
||||
variant={matchUpMd ? 'persistent' : 'temporary'}
|
||||
anchor='left'
|
||||
open={drawerOpen}
|
||||
onClose={drawerToggle}
|
||||
sx={{
|
||||
'& .MuiDrawer-paper': {
|
||||
width: drawerWidth,
|
||||
background: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
borderRight: 'none',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
top: '66px'
|
||||
}
|
||||
}
|
||||
}}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
color='inherit'
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Sidebar.propTypes = {
|
||||
drawerOpen: PropTypes.bool,
|
||||
drawerToggle: PropTypes.func,
|
||||
window: PropTypes.object
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { useEffect } from 'react'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
// material-ui
|
||||
import { styled, useTheme } from '@mui/material/styles'
|
||||
import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import Header from './Header'
|
||||
import Sidebar from './Sidebar'
|
||||
import { drawerWidth } from 'store/constant'
|
||||
import { SET_MENU } from 'store/actions'
|
||||
|
||||
// styles
|
||||
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
|
||||
...theme.typography.mainContent,
|
||||
...(!open && {
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen
|
||||
}),
|
||||
[theme.breakpoints.up('md')]: {
|
||||
marginLeft: -(drawerWidth - 20),
|
||||
width: `calc(100% - ${drawerWidth}px)`
|
||||
},
|
||||
[theme.breakpoints.down('md')]: {
|
||||
marginLeft: '20px',
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
padding: '16px'
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: '10px',
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
padding: '16px',
|
||||
marginRight: '10px'
|
||||
}
|
||||
}),
|
||||
...(open && {
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen
|
||||
}),
|
||||
marginLeft: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
[theme.breakpoints.down('md')]: {
|
||||
marginLeft: '20px'
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: '10px'
|
||||
}
|
||||
})
|
||||
}))
|
||||
|
||||
// ==============================|| MAIN LAYOUT ||============================== //
|
||||
|
||||
const MainLayout = () => {
|
||||
const theme = useTheme()
|
||||
const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'))
|
||||
|
||||
// Handle left drawer
|
||||
const leftDrawerOpened = useSelector((state) => state.customization.opened)
|
||||
const dispatch = useDispatch()
|
||||
const handleLeftDrawerToggle = () => {
|
||||
dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({ type: SET_MENU, opened: !matchDownMd })
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [matchDownMd])
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<CssBaseline />
|
||||
{/* header */}
|
||||
<AppBar
|
||||
enableColorOnDark
|
||||
position='fixed'
|
||||
color='inherit'
|
||||
elevation={0}
|
||||
sx={{
|
||||
bgcolor: theme.palette.background.default,
|
||||
transition: leftDrawerOpened ? theme.transitions.create('width') : 'none'
|
||||
}}
|
||||
>
|
||||
<Toolbar>
|
||||
<Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{/* drawer */}
|
||||
<Sidebar drawerOpen={leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />
|
||||
|
||||
{/* main content */}
|
||||
<Main theme={theme} open={leftDrawerOpened}>
|
||||
<Outlet />
|
||||
</Main>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainLayout
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue