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

merge fix

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-25 10:41:57 -03:00
commit f58500c89b
29 changed files with 440 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

49
.github/workflows/pre-release.yml vendored Normal file
View file

@ -0,0 +1,49 @@
name: pre-release
on:
pull_request:
types:
- closed
branches:
- dev
paths:
- "pyproject.toml"
env:
POETRY_VERSION: "1.5.1"
jobs:
if_release:
if: |
${{ github.event.pull_request.merged == true }}
&& ${{ contains(github.event.pull_request.labels.*.name, 'pre-release') }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install poetry
run: pipx install poetry==$POETRY_VERSION
- name: Set up Python 3.10
uses: actions/setup-python@v4
with:
python-version: "3.10"
cache: "poetry"
- name: Build project for distribution
run: make build
- name: Check Version
id: check-version
run: |
echo version=$(poetry version --short) >> $GITHUB_OUTPUT
- name: Create Release
uses: ncipollo/release-action@v1
with:
artifacts: "dist/*"
token: ${{ secrets.GITHUB_TOKEN }}
draft: false
generateReleaseNotes: true
tag: v${{ steps.check-version.outputs.version }}
commit: main
- name: Publish to PyPI
env:
POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_API_TOKEN }}
run: |
poetry publish

2
.github/workflows/release.yml vendored
View file

@ -10,7 +10,7 @@ on:
- "pyproject.toml"
env:
POETRY_VERSION: "1.4.0"
POETRY_VERSION: "1.5.1"
jobs:
if_release:

9
src/frontend/package-lock.json generated
View file

@ -29,6 +29,7 @@
"@tabler/icons-react": "^2.18.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/axios": "^0.14.0",
"accordion": "^3.0.2",
"ace-builds": "^1.16.0",
"add": "^2.0.6",
@ -142,6 +143,9 @@
}
},
"node_modules/@babel/compat-data": {
"version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
"integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
"version": "7.22.9",
"license": "MIT",
"engines": {
@ -9533,8 +9537,9 @@
"license": "MIT"
},
"node_modules/word-wrap": {
"version": "1.2.3",
"license": "MIT",
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
"engines": {
"node": ">=0.10.0"
}

1
src/frontend/package.json
View file

@ -24,6 +24,7 @@
"@tabler/icons-react": "^2.18.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/axios": "^0.14.0",
"accordion": "^3.0.2",
"ace-builds": "^1.16.0",
"add": "^2.0.6",

225
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -1,4 +1,5 @@
import { useContext, useState } from "react";
import { cloneDeep } from "lodash";
import { useContext, useEffect, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import AccordionComponent from "../../components/AccordionComponent";
@ -54,9 +55,16 @@ export default function CodeTabsComponent({
};
}) {
const [isCopied, setIsCopied] = useState<Boolean>(false);
const [data, setData] = useState(flow ? flow["data"]["nodes"] : null);
const [openAccordion, setOpenAccordion] = useState([]);
const { dark } = useContext(darkContext);
useEffect(() => {
if (flow && flow["data"]["nodes"]) {
setData(flow["data"]["nodes"]);
}
}, [flow]);
const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
@ -185,7 +193,7 @@ export default function CodeTabsComponent({
: "overflow-hidden"
)}
>
{flow["data"]["nodes"].map((t: any, index) => (
{data.map((t: any, index) => (
<div className="px-3" key={index}>
{tweaks.tweaksList.current.includes(t["data"]["id"]) && (
<AccordionComponent
@ -255,6 +263,16 @@ export default function CodeTabsComponent({
].value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
@ -274,16 +292,29 @@ export default function CodeTabsComponent({
<TextAreaComponent
disabled={false}
editNode={true}
value={tweaks.getValue(
value={
!t.data.node.template[
n
].value ||
t.data.node.template[
n
].value,
t.data,
t.data.node.template[
n
]
)}
].value === ""
? ""
: t.data.node
.template[n]
.value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
@ -302,13 +333,27 @@ export default function CodeTabsComponent({
t.data.node.template[n]
.password ?? false
}
value={tweaks.getValue(
value={
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)}
.value === ""
? ""
: t.data.node.template[
n
].value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
@ -328,9 +373,16 @@ export default function CodeTabsComponent({
.value
}
setEnabled={(e) => {
t.data.node.template[
n
].value = e;
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = e;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
e,
@ -345,12 +397,13 @@ export default function CodeTabsComponent({
"file" ? (
<ShadTooltip
content={tweaks.buildContent(
tweaks.getValue(
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)
.value === ""
? ""
: t.data.node.template[n]
.value
)}
>
<div className="mx-auto">
@ -382,13 +435,26 @@ export default function CodeTabsComponent({
<FloatComponent
disabled={false}
editNode={true}
value={tweaks.getValue(
value={
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)}
.value === ""
? ""
: t.data.node.template[n]
.value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
@ -410,18 +476,31 @@ export default function CodeTabsComponent({
.options
}
onSelect={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
t.data.node.template[n]
);
}}
value={tweaks.getValue(
value={
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)}
.value === ""
? ""
: t.data.node.template[n]
.value
}
></Dropdown>
</div>
) : t.data.node.template[n].type ===
@ -430,13 +509,26 @@ export default function CodeTabsComponent({
<IntComponent
disabled={false}
editNode={true}
value={tweaks.getValue(
value={
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)}
.value === ""
? ""
: t.data.node.template[n]
.value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
@ -449,25 +541,40 @@ export default function CodeTabsComponent({
"prompt" ? (
<ShadTooltip
content={tweaks.buildContent(
tweaks.getValue(
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)
.value === ""
? ""
: t.data.node.template[n]
.value
)}
>
<div className="mx-auto">
<PromptAreaComponent
editNode={true}
disabled={false}
value={tweaks.getValue(
value={
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)}
.value === ""
? ""
: t.data.node.template[
n
].value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,
@ -493,13 +600,27 @@ export default function CodeTabsComponent({
<CodeAreaComponent
disabled={false}
editNode={true}
value={tweaks.getValue(
value={
!t.data.node.template[n]
.value ||
t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)}
.value === ""
? ""
: t.data.node.template[
n
].value
}
onChange={(k) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList[
index
].data.node.template[
n
].value = k;
return newInputList;
});
tweaks.buildTweakObject(
t["data"]["id"],
k,

9
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input";
@ -12,12 +12,6 @@ export default function FloatComponent({
const min = 0;
const max = 1;
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state
useEffect(() => {
if (disabled) {
@ -48,7 +42,6 @@ export default function FloatComponent({
}
onChange={(e) => {
onChange(e.target.value);
setMyValue(e.target.value);
}}
/>
</div>

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

@ -11,11 +11,6 @@ export default function InputComponent({
editNode = false,
}: InputComponentType) {
const [pwdVisible, setPwdVisible] = useState(false);
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state
useEffect(() => {
@ -38,7 +33,6 @@ export default function InputComponent({
placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => {
onChange(e.target.value);
setMyValue(e.target.value);
}}
/>
{password && (

48
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -1,10 +1,9 @@
import { useContext, useEffect, useState } from "react";
import { useEffect } from "react";
import { InputListComponentType } from "../../types/components";
import { Input } from "../ui/input";
import { classNames } from "../../utils/utils";
import _ from "lodash";
import { PopUpContext } from "../../contexts/popUpContext";
import IconComponent from "../genericIconComponent";
export default function InputListComponent({
@ -13,31 +12,21 @@ export default function InputListComponent({
disabled,
editNode = false,
}: InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]);
const { closeEdit } = useContext(PopUpContext);
useEffect(() => {
if (value) {
setInputList(value);
}
}, [closeEdit]);
useEffect(() => {
if (disabled) {
setInputList([""]);
onChange([""]);
}
}, [disabled, onChange]);
}, [disabled]);
return (
<div
className={
classNames(
inputList.length > 1 && editNode ? "my-1" : "",
value.length > 1 && editNode ? "my-1" : "",
"flex flex-col gap-3"
)
}>
{inputList.map((i, idx) => {
{value.map((i, idx) => {
return (
<div key={idx} className="flex w-full gap-3">
<Input
@ -47,23 +36,17 @@ export default function InputListComponent({
className={editNode ? "input-edit-node" : ""}
placeholder="Type something..."
onChange={(e) => {
setInputList((old) => {
let newInputList = _.cloneDeep(inputList);
newInputList[idx] = e.target.value;
return newInputList;
});
onChange(inputList);
let newInputList = _.cloneDeep(value);
newInputList[idx] = e.target.value;
onChange(newInputList);
}}
/>
{idx === inputList.length - 1 ? (
{idx === value.length - 1 ? (
<button
onClick={() => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList.push("");
return newInputList;
});
onChange(inputList);
let newInputList = _.cloneDeep(value);
newInputList.push("");
onChange(newInputList);
}}
>
<IconComponent
@ -74,12 +57,9 @@ export default function InputListComponent({
) : (
<button
onClick={() => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList.splice(idx, 1);
return newInputList;
});
onChange(inputList);
let newInputList = _.cloneDeep(value);
newInputList.splice(idx, 1);
onChange(newInputList);
}}
>
<IconComponent

9
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input";
@ -10,12 +10,6 @@ export default function IntComponent({
}: FloatComponentType) {
const min = 0;
const [myValue, setMyValue] = useState(value);
useEffect(() => {
setMyValue(value);
}, [value]);
// Clear component state
useEffect(() => {
if (disabled) {
@ -58,7 +52,6 @@ export default function IntComponent({
placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => {
onChange(e.target.value);
setMyValue(e.target.value);
}}
/>
</div>

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

@ -1,4 +1,3 @@
import { useEffect, useState } from "react";
import { ToggleComponentType } from "../../types/components";
import { Switch } from "../ui/switch";
@ -27,12 +26,6 @@ export default function ToggleShadComponent({
scaleY = 1;
}
const [myValue, setMyValue] = useState(enabled);
useEffect(() => {
setMyValue(enabled);
}, [enabled]);
return (
<div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
<Switch
@ -41,10 +34,9 @@ export default function ToggleShadComponent({
}}
disabled={disabled}
className=""
checked={myValue}
checked={enabled}
onCheckedChange={(x: boolean) => {
setEnabled(x);
setMyValue(x);
}}
></Switch>
</div>

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

@ -56,4 +56,4 @@ const AccordionContent = React.forwardRef<
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@ -77,9 +77,9 @@ CardFooter.displayName = "CardFooter";
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardDescription,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};

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

@ -116,10 +116,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
};

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

@ -182,18 +182,18 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
DropdownMenuTrigger,
};

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

@ -218,19 +218,19 @@ MenubarShortcut.displayname = "MenubarShortcut";
export {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
MenubarLabel,
MenubarCheckboxItem,
MenubarContent,
MenubarGroup,
MenubarItem,
MenubarLabel,
MenubarMenu,
MenubarPortal,
MenubarRadioGroup,
MenubarRadioItem,
MenubarPortal,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarGroup,
MenubarSub,
MenubarShortcut,
MenubarTrigger,
};

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

@ -103,11 +103,11 @@ TableCaption.displayName = "TableCaption";
export {
Table,
TableHeader,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
TableCell,
TableCaption,
};

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

@ -51,4 +51,4 @@ const TabsContent = React.forwardRef<
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
export { Tabs, TabsList, TabsTrigger, TabsContent };
export { Tabs, TabsContent, TabsList, TabsTrigger };

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

@ -28,4 +28,4 @@ const TooltipContent = React.forwardRef<
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@ -71,18 +71,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
// Clear the interval if successful.
clearInterval(intervalId);
} catch (error) {
retryCount++;
// On error, double the delay for the next attempt up to a maximum.
delay = Math.min(30000, delay * 2);
// Log errors but don't do anything else - the function will try again on the next interval.
console.error(error);
// Clear the old interval and start a new one with the new delay.
if (retryCount <= maxRetryCount) {
clearInterval(intervalId);
intervalId = setInterval(getTypes, delay);
} else {
console.error("Max retry attempts reached. Stopping retries.");
}
console.error("An error has occurred while fetching types.");
}
}

58
src/frontend/src/controllers/API/api.tsx Normal file
View file

@ -0,0 +1,58 @@
import axios, { AxiosError, AxiosInstance } from "axios";
import { useContext, useEffect, useRef } from "react";
import { alertContext } from "../../contexts/alertContext";
// Create a new Axios instance
const api: AxiosInstance = axios.create({
baseURL: "",
});
function ApiInterceptor() {
const retryCounts = useRef([]);
const { setErrorData } = useContext(alertContext);
useEffect(() => {
const interceptor = api.interceptors.response.use(
(response) => response,
async (error: AxiosError) => {
let retryCount = 0;
while (retryCount < 4) {
await sleep(5000); // Sleep for 5 seconds
retryCount++;
try {
const response = await axios.request(error.config);
return response;
} catch (error) {
if (retryCount === 3) {
setErrorData({
title: "There was an error on web connection, please: ",
list: [
"Refresh the page",
"Use a new flow tab",
"Check if the backend is up",
"Endpoint: " + error.config.url,
],
});
return Promise.reject(error);
}
}
}
}
);
return () => {
// Clean up the interceptor when the component unmounts
api.interceptors.response.eject(interceptor);
};
}, [retryCounts]);
return null;
}
// Function to sleep for a given duration in milliseconds
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export { ApiInterceptor, api };

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

@ -1,5 +1,6 @@
import axios, { AxiosResponse } from "axios";
import { AxiosResponse } from "axios";
import { ReactFlowJsonObject } from "reactflow";
import { api } from "../../controllers/API/api";
import { APIObjectType, sendAllProps } from "../../types/api/index";
import { FlowStyleType, FlowType } from "../../types/flow";
import {
@ -17,16 +18,14 @@ import {
* @returns {Promise<AxiosResponse<APIObjectType>>} A promise that resolves to an AxiosResponse containing all the objects.
*/
export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
return await axios.get(`/api/v1/all`);
return await api.get(`/api/v1/all`);
}
const GITHUB_API_URL = "https://api.github.com";
export async function getRepoStars(owner, repo) {
try {
const response = await axios.get(
`${GITHUB_API_URL}/repos/${owner}/${repo}`
);
const response = await api.get(`${GITHUB_API_URL}/repos/${owner}/${repo}`);
return response.data.stargazers_count;
} catch (error) {
console.error("Error fetching repository data:", error);
@ -41,13 +40,13 @@ export async function getRepoStars(owner, repo) {
* @returns {AxiosResponse<any>} The API response.
*/
export async function sendAll(data: sendAllProps) {
return await axios.post(`/api/v1/predict`, data);
return await api.post(`/api/v1/predict`, data);
}
export async function postValidateCode(
code: string
): Promise<AxiosResponse<errorsTypeAPI>> {
return await axios.post("/api/v1/validate/code", { code });
return await api.post("/api/v1/validate/code", { code });
}
/**
@ -62,7 +61,7 @@ export async function postValidatePrompt(
template: string,
frontend_node: APIClassType
): Promise<AxiosResponse<PromptTypeAPI>> {
return await axios.post("/api/v1/validate/prompt", {
return await api.post("/api/v1/validate/prompt", {
name: name,
template: template,
frontend_node: frontend_node,
@ -77,14 +76,14 @@ export async function postValidatePrompt(
export async function getExamples(): Promise<FlowType[]> {
const url =
"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples?ref=main";
const response = await axios.get(url);
const response = await api.get(url);
const jsonFiles = response.data.filter((file: any) => {
return file.name.endsWith(".json");
});
const contentsPromises = jsonFiles.map(async (file: any) => {
const contentResponse = await axios.get(file.download_url);
const contentResponse = await api.get(file.download_url);
return contentResponse.data;
});
@ -106,11 +105,12 @@ export async function saveFlowToDatabase(newFlow: {
style?: FlowStyleType;
}): Promise<FlowType> {
try {
const response = await axios.post("/api/v1/flows/", {
const response = await api.post("/api/v1/flows/", {
name: newFlow.name,
data: newFlow.data,
description: newFlow.description,
});
if (response.status !== 201) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -131,7 +131,7 @@ export async function updateFlowInDatabase(
updatedFlow: FlowType
): Promise<FlowType> {
try {
const response = await axios.patch(`/api/v1/flows/${updatedFlow.id}`, {
const response = await api.patch(`/api/v1/flows/${updatedFlow.id}`, {
name: updatedFlow.name,
data: updatedFlow.data,
description: updatedFlow.description,
@ -155,7 +155,7 @@ export async function updateFlowInDatabase(
*/
export async function readFlowsFromDatabase() {
try {
const response = await axios.get("/api/v1/flows/");
const response = await api.get("/api/v1/flows/");
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -168,7 +168,7 @@ export async function readFlowsFromDatabase() {
export async function downloadFlowsFromDatabase() {
try {
const response = await axios.get("/api/v1/flows/download/");
const response = await api.get("/api/v1/flows/download/");
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -181,7 +181,7 @@ export async function downloadFlowsFromDatabase() {
export async function uploadFlowsToDatabase(flows) {
try {
const response = await axios.post(`/api/v1/flows/upload/`, flows);
const response = await api.post(`/api/v1/flows/upload/`, flows);
if (response.status !== 201) {
throw new Error(`HTTP error! status: ${response.status}`);
@ -202,7 +202,7 @@ export async function uploadFlowsToDatabase(flows) {
*/
export async function deleteFlowFromDatabase(flowId: string) {
try {
const response = await axios.delete(`/api/v1/flows/${flowId}`);
const response = await api.delete(`/api/v1/flows/${flowId}`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -222,7 +222,7 @@ export async function deleteFlowFromDatabase(flowId: string) {
*/
export async function getFlowFromDatabase(flowId: number) {
try {
const response = await axios.get(`/api/v1/flows/${flowId}`);
const response = await api.get(`/api/v1/flows/${flowId}`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -241,7 +241,7 @@ export async function getFlowFromDatabase(flowId: number) {
*/
export async function getFlowStylesFromDatabase() {
try {
const response = await axios.get("/api/v1/flow_styles/");
const response = await api.get("/api/v1/flow_styles/");
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -261,7 +261,7 @@ export async function getFlowStylesFromDatabase() {
*/
export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
try {
const response = await axios.post("/api/v1/flow_styles/", flowStyle, {
const response = await api.post("/api/v1/flow_styles/", flowStyle, {
headers: {
accept: "application/json",
"Content-Type": "application/json",
@ -284,7 +284,7 @@ export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
* @returns {Promise<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the version information.
*/
export async function getVersion() {
const respnose = await axios.get("/api/v1/version");
const respnose = await api.get("/api/v1/version");
return respnose.data;
}
@ -294,7 +294,7 @@ export async function getVersion() {
* @returns {Promise<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the health status.
*/
export async function getHealth() {
return await axios.get("/health"); // Health is the only endpoint that doesn't require /api/v1
return await api.get("/health"); // Health is the only endpoint that doesn't require /api/v1
}
/**
@ -306,7 +306,7 @@ export async function getHealth() {
export async function getBuildStatus(
flowId: string
): Promise<BuildStatusTypeAPI> {
return await axios.get(`/api/v1/build/${flowId}/status`);
return await api.get(`/api/v1/build/${flowId}/status`);
}
//docs for postbuildinit
@ -319,7 +319,7 @@ export async function getBuildStatus(
export async function postBuildInit(
flow: FlowType
): Promise<AxiosResponse<InitTypeAPI>> {
return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
return await api.post(`/api/v1/build/init/${flow.id}`, flow);
}
// fetch(`/upload/${id}`, {
@ -337,5 +337,5 @@ export async function uploadFile(
): Promise<AxiosResponse<UploadFileTypeAPI>> {
const formData = new FormData();
formData.append("file", file);
return await axios.post(`/api/v1/upload/${id}`, formData);
return await api.post(`/api/v1/upload/${id}`, formData);
}

6
src/frontend/src/index.css
View file

@ -38,9 +38,10 @@
--info-background: #f0f4fd;
--info-foreground: #141653;
--high-indigo: #4338ca;
--medium-indigo: #6366f1;
--low-indigo: #e0e7ff;
--chat-bot-icon: #afe6ef;
--chat-user-icon: #aface9;
@ -52,6 +53,7 @@
--chat-trigger-disabled: #b4c3da;
--status-red: #ef4444;
--status-yellow: #eab308;
--chat-send: #059669;
--status-green: #4ade80;
--status-blue:#2563eb;
--connection: #555;
@ -104,6 +106,7 @@
--high-indigo: #4338ca;
--medium-indigo: #6366f1;
--low-indigo: #e0e7ff;
/* Colors that are shared in dark and light mode */
--blur-shared: #151923d2;
@ -112,6 +115,7 @@
--chat-trigger-disabled: #2d3b54;
--status-red: #ef4444;
--status-yellow: #eab308;
--chat-send: #059669;
--status-green: #4ade80;
--status-blue: #2563eb;
--connection: #555;

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

@ -4,6 +4,7 @@ import App from "./App";
import ContextWrapper from "./contexts";
import reportWebVitals from "./reportWebVitals";
import { ApiInterceptor } from "./controllers/API/api";
import "./index.css";
const root = ReactDOM.createRoot(
@ -13,6 +14,7 @@ root.render(
<ContextWrapper>
<BrowserRouter>
<App />
<ApiInterceptor />
</BrowserRouter>
</ContextWrapper>
);

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

@ -22,11 +22,10 @@ import {
TableRow,
} from "../../components/ui/table";
import { limitScrollFieldsModal } from "../../constants/constants";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
import { classNames, getRandomKeyByssmm } from "../../utils/utils";
import { classNames } from "../../utils/utils";
import BaseModal from "../baseModal";
const EditNodeModal = forwardRef(
@ -48,7 +47,6 @@ const EditNodeModal = forwardRef(
const [myData, setMyData] = useState(data);
const { setTabsState, tabId } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext);
const { setCloseEdit } = useContext(PopUpContext);
let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
@ -72,7 +70,6 @@ const EditNodeModal = forwardRef(
useEffect(() => {
setMyData(data); // reset data to what it is on node when opening modal
setCloseEdit(getRandomKeyByssmm().toString());
}, [modalOpen]);
return (

4
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -69,10 +69,10 @@ export default function ChatInput({
className={classNames(
"form-modal-send-button",
noInput
? "bg-indigo-600 text-background"
? "bg-high-indigo text-background"
: chatValue === ""
? "text-primary"
: "bg-emerald-600 text-background"
: "bg-chat-send text-background"
)}
disabled={lockChat}
onClick={() => sendMessage()}

120
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -78,69 +78,75 @@ export default function ChatMessage({
<div className="w-full dark:text-white">
<div className="w-full">
{useMemo(
() => (
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block break-words text-primary dark:prose-invert
() =>
chat.message.toString() === "" && lockChat ? (
<IconComponent
name="MoreHorizontal"
className="h-8 w-8 animate-pulse"
/>
) : (
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block break-words text-primary dark:prose-invert
sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
components={{
pre({ node, ...props }) {
return <>{props.children}</>;
},
code: ({
node,
inline,
className,
children,
...props
}) => {
if (children.length) {
if (children[0] === "▍") {
return (
<span className="form-modal-markdown-span">
▍
</span>
components={{
pre({ node, ...props }) {
return <>{props.children}</>;
},
code: ({
node,
inline,
className,
children,
...props
}) => {
if (children.length) {
if (children[0] === "▍") {
return (
<span className="form-modal-markdown-span">
▍
</span>
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
const match = /language-(\w+)/.exec(
className || ""
);
}
const match = /language-(\w+)/.exec(
className || ""
);
return !inline ? (
<CodeTabsComponent
isMessage
tabs={[
{
name: (match && match[1]) || "",
mode: (match && match[1]) || "",
image:
"https://curl.se/logo/curl-symbol-transparent.png",
language: (match && match[1]) || "",
code: String(children).replace(/\n$/, ""),
},
]}
activeTab={"0"}
setActiveTab={() => {}}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{chat.message.toString()}
</ReactMarkdown>
),
return !inline ? (
<CodeTabsComponent
isMessage
tabs={[
{
name: (match && match[1]) || "",
mode: (match && match[1]) || "",
image:
"https://curl.se/logo/curl-symbol-transparent.png",
language: (match && match[1]) || "",
code: String(children).replace(/\n$/, ""),
},
]}
activeTab={"0"}
setActiveTab={() => {}}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{chat.message.toString()}
</ReactMarkdown>
),
[chat.message, chat.message.toString()]
)}
</div>

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

@ -395,7 +395,7 @@ export default function FormModal({
<span className="pr-2">Chat</span>
<IconComponent
name="prompts"
className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true"
/>
</DialogTitle>

2
src/frontend/src/utils/styleUtils.ts
View file

@ -41,6 +41,7 @@ import {
MessageSquare,
MessagesSquare,
MoonIcon,
MoreHorizontal,
Paperclip,
Plus,
Redo,
@ -268,6 +269,7 @@ export const nodeIconsLucide = {
Copy,
Upload,
MessageSquare,
MoreHorizontal,
};
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
const sourceId = edge.source;

2
src/frontend/tailwind.config.js
View file

@ -29,6 +29,8 @@ module.exports = {
},
extend: {
colors: {
"low-indigo": "var(--low-indigo)",
"chat-send": "var(--chat-send)",
connection: "var(--connection)",
"almost-dark-gray": "var(--almost-dark-gray)",
"almost-light-blue": "var(--almost-light-blue)",