-
- );
+ return (
+
- Notifications
-
-
-
-
-
-
- {notificationList.length !== 0 ? (
- notificationList.map((alertItem, index) => (
-
-
- No new notifications
-
- )}
-
+
+ );
}
diff --git a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
index 249133d96..3046d41a4 100644
--- a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
+++ b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
@@ -1,33 +1,33 @@
import { useEffect } from "react";
export function useOnClickOutside(ref, handler) {
- useEffect(() => {
- const listener = (event) => {
- // Do nothing if clicking ref's element or its children
- if (!ref.current || ref.current.contains(event.target)) {
- return;
- }
+ useEffect(() => {
+ const listener = (event) => {
+ // Do nothing if clicking ref's element or its children
+ if (!ref.current || ref.current.contains(event.target)) {
+ return;
+ }
- handler(event);
- };
+ handler(event);
+ };
- // Attach the listener to the document
- document.addEventListener("mousedown", listener, { passive: true });
+ // Attach the listener to the document
+ document.addEventListener("mousedown", listener, { passive: true });
- // Attach the listener to the react-flow instance
- const reactFlowContainer = document.querySelector(".react-flow");
- if (reactFlowContainer) {
- reactFlowContainer.addEventListener("mousedown", listener, {
- passive: true,
- });
- }
+ // Attach the listener to the react-flow instance
+ const reactFlowContainer = document.querySelector(".react-flow");
+ if (reactFlowContainer) {
+ reactFlowContainer.addEventListener("mousedown", listener, {
+ passive: true,
+ });
+ }
- // Clean up the listener when the component is unmounted
- return () => {
- document.removeEventListener("mousedown", listener);
- if (reactFlowContainer) {
- reactFlowContainer.removeEventListener("mousedown", listener);
- }
- };
- }, [ref, handler]); // Rerun only if ref or handler changes
+ // Clean up the listener when the component is unmounted
+ return () => {
+ document.removeEventListener("mousedown", listener);
+ if (reactFlowContainer) {
+ reactFlowContainer.removeEventListener("mousedown", listener);
+ }
+ };
+ }, [ref, handler]); // Rerun only if ref or handler changes
}
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index 7864e6d65..de3cea182 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -2,12 +2,14 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
return (
+ Notifications
+
+
+
+
+
+
+ {notificationList.length !== 0 ? (
+ notificationList.map((alertItem, index) => (
+
+
+ No new notifications
+
+ )}
+
-
)}
{chat.thought && chat.thought !== "" && !hidden &&
} -
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 9d5f67e0c..2759b13a5 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -1,37 +1,45 @@
import { Transition } from "@headlessui/react";
-import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import {
+ Bars3CenterLeftIcon,
+ ChatBubbleBottomCenterTextIcon,
+} from "@heroicons/react/24/outline";
import { nodeColors } from "../../../utils";
import { PopUpContext } from "../../../contexts/popUpContext";
import { useContext } from "react";
import ChatModal from "../../../modals/chatModal";
-export default function ChatTrigger({open, setOpen,flow}){
- const {openPopUp} = useContext(PopUpContext)
- return(Oops! An unknown error has occurred.
++ Oops! An unknown error has occurred. +
- Please click the 'Reset Application' button - to restore the application's state. If the error persists, please - create an issue on our GitHub page. We apologize for any inconvenience - this may have caused. + Please click the 'Reset Application' button to restore the + application's state. If the error persists, please create an issue on + our GitHub page. We apologize for any inconvenience this may have + caused.
} -
- {chat.message}
+
+ {chat.message}
-
-
-
-
-
+
+
+
+
+
-
- {internalValue}
-
-
-
-
+ let [internalValue, setInternalValue] = useState(
+ value === "" || !value ? "Choose an option" : value
+ );
+ return (
+ <>
+ {
+ setInternalValue(value);
+ onSelect(value);
+ }}
+ >
+ {({ open }) => (
+ <>
+
-
- );
+ {selected ? (
+
+
+
+ ) : null}
+
+ )}
+
+ ))}
+
+
+
+
+ )}
+
+
+ {internalValue}
+
+
+
+
-
-
- {options.map((option, id) => (
-
- classNames(
- active
- ? "text-white bg-indigo-600 dark:bg-indigo-500"
- : "text-gray-900",
- "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
- )
- }
- value={option}
- >
- {({ selected, active }) => (
- <>
-
- {option}
-
+
+
+ {options.map((option, id) => (
+
+ classNames(
+ active
+ ? "text-white bg-indigo-600 dark:bg-indigo-500"
+ : "text-gray-900",
+ "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+ )
+ }
+ value={option}
+ >
+ {({ selected, active }) => (
+ <>
+
+ {option}
+
- {selected ? (
-
-
-
- ) : null}
-
- )}
-
- ))}
-
-
-
-
- )}
-
- {
- setMyValue(e.target.value);
- onChange(e.target.value);
- }}
- />
-
- );
-}
\ No newline at end of file
+export default function FloatComponent({
+ value,
+ onChange,
+ disabled,
+}: FloatComponentType) {
+ const [myValue, setMyValue] = useState(value ?? "");
+ useEffect(() => {
+ if (disabled) {
+ setMyValue("");
+ onChange("");
+ }
+ }, [disabled, onChange]);
+ return (
+
+ {
+ setMyValue(e.target.value);
+ onChange(e.target.value);
+ }}
+ />
+
+ );
+}
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index fa580ffe4..67eff6abf 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -3,10 +3,10 @@ import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils";
export default function InputComponent({
- value,
- onChange,
- disabled,
- password,
+ value,
+ onChange,
+ disabled,
+ password,
}: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false);
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index cb915bce5..d20044571 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -9,7 +9,7 @@ export default function InputFileComponent({
disabled,
suffixes,
fileTypes,
- onFileChange
+ onFileChange,
}: FileComponentType) {
const [myValue, setMyValue] = useState(value);
const { setErrorData } = useContext(alertContext);
@@ -17,23 +17,23 @@ export default function InputFileComponent({
if (disabled) {
setMyValue("");
onChange("");
- onFileChange("")
+ onFileChange("");
}
}, [disabled, onChange]);
function attachFile(fileReadEvent: ProgressEvent
{
- if(disabled){
- setInputList([""]);
- onChange([""]);
- }
-}, [disabled, onChange])
- return (
-
- {inputList.map((i, idx) => (
-
- );
+export default function InputListComponent({
+ value,
+ onChange,
+ disabled,
+}: InputListComponentType) {
+ const [inputList, setInputList] = useState(value ?? [""]);
+ useEffect(() => {
+ if (disabled) {
+ setInputList([""]);
+ onChange([""]);
+ }
+ }, [disabled, onChange]);
+ return (
+
- {
- setInputList((old) => {
- let newInputList = _.cloneDeep(old);
- newInputList[idx] = e.target.value;
- return newInputList;
- });
- onChange(inputList);
- }}
- />
- {idx === inputList.length - 1 ?
-
- : }
-
- ))}
-
+ {inputList.map((i, idx) => (
+
+ );
}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 520a78c0d..cc435c897 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -14,12 +14,23 @@ export default function IntComponent({
}
}, [disabled, onChange]);
return (
-
+ {
+ setInputList((old) => {
+ let newInputList = _.cloneDeep(old);
+ newInputList[idx] = e.target.value;
+ return newInputList;
+ });
+ onChange(inputList);
+ }}
+ />
+ {idx === inputList.length - 1 ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
{
- if (event.key !== 'Backspace' && event.key !== 'Enter' && event.key !== 'Delete' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && !/^[-]?\d*$/.test(event.key)) {
- event.preventDefault();
- }
+ if (
+ event.key !== "Backspace" &&
+ event.key !== "Enter" &&
+ event.key !== "Delete" &&
+ event.key !== "ArrowLeft" &&
+ event.key !== "ArrowRight" &&
+ !/^[-]?\d*$/.test(event.key)
+ ) {
+ event.preventDefault();
+ }
}}
type="number"
value={myValue}
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 6181fd7cc..43d6d9d75 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -1,17 +1,28 @@
-type LoadingComponentProps={
- remSize:number
+type LoadingComponentProps = {
+ remSize: number;
+};
+
+export default function LoadingComponent({ remSize }: LoadingComponentProps) {
+ return (
+ ;
- pushNotificationList: (Object:AlertItemType) => void;
+ pushNotificationList: (Object: AlertItemType) => void;
clearNotificationList: () => void;
removeFromNotificationList: (index: string) => void;
};
//initial values to alertContextType
-const initialValue:alertContextType = {
+const initialValue: alertContextType = {
errorData: { title: "", list: [] },
setErrorData: () => {},
errorOpen: false,
@@ -49,7 +49,7 @@ const initialValue:alertContextType = {
export const alertContext = createContext(initialValue);
-export function AlertProvider({ children }:{children:ReactNode}) {
+export function AlertProvider({ children }: { children: ReactNode }) {
const [errorData, setErrorDataState] = useState<{
title: string;
list?: Array;
@@ -73,68 +73,69 @@ export function AlertProvider({ children }:{children:ReactNode}) {
return newNotificationList;
});
};
-/**
- * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
- * @param newState An object containing the new error data, including title and optional list of error messages
- */
-function setErrorData(newState: { title: string; list?: Array }) {
- setErrorDataState(newState);
- setErrorOpen(true);
- if (newState.title) {
- setNotificationCenter(true);
- pushNotificationList({
- type: "error",
- title: newState.title,
- list: newState.list,
- id: _.uniqueId(),
- });
+ /**
+ * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
+ * @param newState An object containing the new error data, including title and optional list of error messages
+ */
+ function setErrorData(newState: { title: string; list?: Array }) {
+ setErrorDataState(newState);
+ setErrorOpen(true);
+ if (newState.title) {
+ setNotificationCenter(true);
+ pushNotificationList({
+ type: "error",
+ title: newState.title,
+ list: newState.list,
+ id: _.uniqueId(),
+ });
+ }
}
-}
-/**
- * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
- * @param newState An object containing the title of the notice and optionally a link.
- */
-function setNoticeData(newState: { title: string; link?: string }) {
- setNoticeDataState(newState);
- setNoticeOpen(true);
- if (newState.title) {
- // Add new notice to notification center
- setNotificationCenter(true);
- pushNotificationList({
- type: "notice",
- title: newState.title,
- link: newState.link,
- id: _.uniqueId(),
- });
+ /**
+ * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
+ * @param newState An object containing the title of the notice and optionally a link.
+ */
+ function setNoticeData(newState: { title: string; link?: string }) {
+ setNoticeDataState(newState);
+ setNoticeOpen(true);
+ if (newState.title) {
+ // Add new notice to notification center
+ setNotificationCenter(true);
+ pushNotificationList({
+ type: "notice",
+ title: newState.title,
+ link: newState.link,
+ id: _.uniqueId(),
+ });
+ }
}
-}
-/**
- * Update the success data state and show a success alert notification.
- * @param newState - A state object with a "title" property to set in the success data state.
- */
-function setSuccessData(newState: { title: string }) {
- setSuccessDataState(newState); // update the success data state with the provided new state
- setSuccessOpen(true); // open the success alert
+ /**
+ * Update the success data state and show a success alert notification.
+ * @param newState - A state object with a "title" property to set in the success data state.
+ */
+ function setSuccessData(newState: { title: string }) {
+ setSuccessDataState(newState); // update the success data state with the provided new state
+ setSuccessOpen(true); // open the success alert
- // If the new state has a "title" property, add a new success notification to the list
- if (newState.title) {
- setNotificationCenter(true); // show the notification center
- pushNotificationList({ // add the new notification to the list
- type: "success",
- title: newState.title,
- id: _.uniqueId(),
- });
+ // If the new state has a "title" property, add a new success notification to the list
+ if (newState.title) {
+ setNotificationCenter(true); // show the notification center
+ pushNotificationList({
+ // add the new notification to the list
+ type: "success",
+ title: newState.title,
+ id: _.uniqueId(),
+ });
+ }
}
-}
function clearNotificationList() {
setNotificationList([]);
}
function removeFromNotificationList(index: string) {
// set the notification list to a new array that filters out the alert with the matching id
setNotificationList((prevAlertsList) =>
- prevAlertsList.filter((alert) => alert.id !== index)
+ prevAlertsList.filter((alert) => alert.id !== index)
);
- }
+ }
return (
(initialValue);
export function DarkProvider({ children }) {
const [dark, setDark] = useState(false);
- useEffect(()=>{
- if(dark){
+ useEffect(() => {
+ if (dark) {
document.getElementById("body").classList.add("dark");
} else {
document.getElementById("body").classList.remove("dark");
}
- }, [dark])
+ }, [dark]);
return (
);
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/contexts/locationContext.tsx b/src/frontend/src/contexts/locationContext.tsx
index dbefaa7c9..a73db24fe 100644
--- a/src/frontend/src/contexts/locationContext.tsx
+++ b/src/frontend/src/contexts/locationContext.tsx
@@ -32,7 +32,7 @@ type locationContextType = {
//initial value for location context
const initialValue = {
- //actual
+ //actual
current: window.location.pathname.replace(/\/$/g, "").split("/"),
isStackedOpen:
window.innerWidth > 1024 && window.location.pathname.split("/")[1]
@@ -50,7 +50,7 @@ const initialValue = {
export const locationContext = createContext(initialValue);
-export function LocationProvider({ children }:{children:ReactNode}) {
+export function LocationProvider({ children }: { children: ReactNode }) {
const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen, setIsStackedOpen] = useState(
initialValue.isStackedOpen
diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx
index efa263146..b8c47dea2 100644
--- a/src/frontend/src/contexts/popUpContext.tsx
+++ b/src/frontend/src/contexts/popUpContext.tsx
@@ -3,31 +3,31 @@ import React, { useState } from "react";
// context to set JSX element on the DOM
export const PopUpContext = createContext({
- openPopUp: (popUpElement: JSX.Element) => {},
- closePopUp: () => {},
+ openPopUp: (popUpElement: JSX.Element) => {},
+ closePopUp: () => {},
});
interface PopUpProviderProps {
- children: React.ReactNode;
+ children: React.ReactNode;
}
const PopUpProvider = ({ children }: PopUpProviderProps) => {
- const [popUpElements, setPopUpElements] = useState([]);
+ const [popUpElements, setPopUpElements] = useState([]);
- const openPopUp = (element: JSX.Element) => {
- setPopUpElements(prevPopUps => [element, ...prevPopUps]);
- };
+ const openPopUp = (element: JSX.Element) => {
+ setPopUpElements((prevPopUps) => [element, ...prevPopUps]);
+ };
- const closePopUp = () => {
- setPopUpElements(prevPopUps => prevPopUps.slice(1));
- };
+ const closePopUp = () => {
+ setPopUpElements((prevPopUps) => prevPopUps.slice(1));
+ };
- return (
-
- {children}
- {popUpElements[0]}
-
- );
+ return (
+
+ {children}
+ {popUpElements[0]}
+
+ );
};
export default PopUpProvider;
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 6dfa37324..9905051b2 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -99,7 +99,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// create a link element and set its properties
const link = document.createElement("a");
link.href = jsonString;
- link.download = `${normalCaseToSnakeCase(flows[tabIndex].name)}.json`;
+ link.download = `${flows[tabIndex].name}.json`;
// simulate a click on the link element to trigger the download
link.click();
diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index ad86d4699..2ab1eb057 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -1,12 +1,12 @@
import { createContext, ReactNode, useEffect, useState } from "react";
-import { Node} from "reactflow";
+import { Node } from "reactflow";
import { typesContextType } from "../types/typesContext";
import { getAll } from "../controllers/API";
import { APIKindType } from "../types/api";
//context to share types adn functions from nodes to flow
-const initialValue:typesContextType = {
+const initialValue: typesContextType = {
reactFlowInstance: null,
setReactFlowInstance: () => {},
deleteNode: () => {},
@@ -14,13 +14,13 @@ const initialValue:typesContextType = {
setTypes: () => {},
templates: {},
setTemplates: () => {},
- data:{},
- setData:()=>{}
+ data: {},
+ setData: () => {},
};
export const typesContext = createContext(initialValue);
-export function TypesProvider({ children }:{children:ReactNode}) {
+export function TypesProvider({ children }: { children: ReactNode }) {
const [types, setTypes] = useState({});
const [reactFlowInstance, setReactFlowInstance] = useState(null);
const [templates, setTemplates] = useState({});
@@ -35,11 +35,11 @@ export function TypesProvider({ children }:{children:ReactNode}) {
setData(result.data);
setTemplates(
Object.keys(result.data).reduce((acc, curr) => {
- Object.keys(result.data[curr]).forEach((c: keyof APIKindType)=>{
- acc[c] = result.data[curr][c]
- })
+ Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => {
+ acc[c] = result.data[curr][c];
+ });
return acc;
- },{})
+ }, {})
);
// Set the types by reducing over the keys of the result data and updating the accumulator.
setTypes(
@@ -59,11 +59,15 @@ export function TypesProvider({ children }:{children:ReactNode}) {
getTypes();
}, [setTypes]);
- function deleteNode(idx:string) {
+ function deleteNode(idx: string) {
reactFlowInstance.setNodes(
- reactFlowInstance.getNodes().filter((n:Node) => n.id !== idx)
+ reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx)
+ );
+ reactFlowInstance.setEdges(
+ reactFlowInstance
+ .getEdges()
+ .filter((ns) => ns.source !== idx && ns.target !== idx)
);
- reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== idx && ns.target !== idx));
}
return (
{children}
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index f6f46404b..9a93a9b36 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -4,40 +4,40 @@ import axios, { AxiosResponse } from "axios";
import { FlowType } from "../../types/flow";
export async function getAll(): Promise> {
- return await axios.get(`/all`);
+ return await axios.get(`/all`);
}
export async function sendAll(data: sendAllProps) {
- return await axios.post(`/predict`, data);
+ return await axios.post(`/predict`, data);
}
export async function checkCode(
- code: string
+ code: string
): Promise> {
- return await axios.post("/validate/code", { code });
+ return await axios.post("/validate/code", { code });
}
export async function checkPrompt(
- template: string
+ template: string
): Promise> {
- return await axios.post("/validate/prompt", { template });
+ return await axios.post("/validate/prompt", { template });
}
export async function getExamples(): Promise {
- const url =
- "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
- const response = await axios.get(url);
+ const url =
+ "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
+ const response = await axios.get(url);
- const jsonFiles = response.data.filter((file: any) => {
- return file.name.endsWith(".json");
- });
+ 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);
- return contentResponse.data;
- });
+ const contentsPromises = jsonFiles.map(async (file: any) => {
+ const contentResponse = await axios.get(file.download_url);
+ return contentResponse.data;
+ });
- const contents = await Promise.all(contentsPromises);
+ const contents = await Promise.all(contentsPromises);
- return contents;
+ return contents;
}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 95681f059..e0684378d 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1,15 +1,13 @@
-
-
body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
}
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index c71219a94..c98d24378 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -11,8 +11,7 @@ const root = ReactDOM.createRoot(
root.render(
-
-
);
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index aad549a83..68e1ed2d2 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -87,37 +87,38 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index a05ef1ef3..9e59709fd 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -24,9 +24,9 @@ export default function ChatInput({
}}
ref={inputRef}
disabled={lockChat}
- style={{resize: "none" }}
+ style={{ resize: "none" }}
value={lockChat ? "Thinking..." : chatValue}
- onChange={(e) => {
+ onChange={(e) => {
setChatValue(e.target.value);
}}
className={classNames(
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
new file mode 100644
index 000000000..d9a20579a
--- /dev/null
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -0,0 +1,81 @@
+import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
+import { FC, memo, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { programmingLanguages } from "../../../../utils";
+
+interface Props {
+ language: string;
+ value: string;
+}
+
+export const CodeBlock: FC = memo(({ language, value }) => {
+ const [isCopied, setIsCopied] = useState(false);
+
+ const copyToClipboard = () => {
+ if (!navigator.clipboard || !navigator.clipboard.writeText) {
+ return;
+ }
+
+ navigator.clipboard.writeText(value).then(() => {
+ setIsCopied(true);
+
+ setTimeout(() => {
+ setIsCopied(false);
+ }, 2000);
+ });
+ };
+ const downloadAsFile = () => {
+ const fileExtension = programmingLanguages[language] || ".file";
+ const suggestedFileName = `${"generated-code"}${fileExtension}`;
+ const fileName = window.prompt("enter file name", suggestedFileName);
+
+ if (!fileName) {
+ // user pressed cancel on prompt
+ return;
+ }
+
+ const blob = new Blob([value], { type: "text/plain" });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.download = fileName;
+ link.href = url;
+ link.style.display = "none";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ };
+ return (
+
+
+
+ Loading... +
+ );
}
-
-
-export default function LoadingComponent({remSize}:LoadingComponentProps){
- return(
- + Loading... +
-
-
- Loading... -
- )
-}
\ No newline at end of file
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 4cd6ee615..102512ab3 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -3,73 +3,80 @@ import { classNames } from "../../utils";
import { useEffect } from "react";
import { ToggleComponentType } from "../../types/components";
-export default function ToggleComponent({ enabled, setEnabled, disabled }:ToggleComponentType) {
- useEffect(()=> {
- if(disabled){
- setEnabled(false);
- }
-}, [disabled, setEnabled])
- return (
- - Loading... -
- {
- setEnabled(x);
- }}
- className={classNames(
- enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
- "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
- )}
- >
- Use setting
-
-
-
-
-
-
- );
+export default function ToggleComponent({
+ enabled,
+ setEnabled,
+ disabled,
+}: ToggleComponentType) {
+ useEffect(() => {
+ if (disabled) {
+ setEnabled(false);
+ }
+ }, [disabled, setEnabled]);
+ return (
+
+ {
+ setEnabled(x);
+ }}
+ className={classNames(
+ enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
+ "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+ )}
+ >
+ Use setting
+
+
+
+
+
+
+ );
}
diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx
index 0fba6f65e..ad2110217 100644
--- a/src/frontend/src/contexts/alertContext.tsx
+++ b/src/frontend/src/contexts/alertContext.tsx
@@ -20,13 +20,13 @@ type alertContextType = {
notificationCenter: boolean;
setNotificationCenter: (newState: boolean) => void;
notificationList: Array
- {
- Object.keys(data.node.template)
- .filter((t) => t.charAt(0) !== "_"&& data.node.template[t].advanced && data.node.template[t].show)
- .map((t: string, idx) => {
- return (
-
+ t.charAt(0) !== "_" &&
+ data.node.template[t].advanced &&
+ data.node.template[t].show
+ )
+ .map((t: string, idx) => {
+ return (
+
+
+ {value}
+
+
+ );
+});
+CodeBlock.displayName = "CodeBlock";
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 70f224f88..e836fd887 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -1,82 +1,140 @@
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils";
import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
import { UserIcon } from "@heroicons/react/24/solid";
import FileCard from "../fileComponent";
+import ReactMarkdown from "react-markdown";
+import rehypeMathjax from "rehype-mathjax";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import { CodeBlock } from "./codeBlock";
var Convert = require("ansi-to-html");
var convert = new Convert({ newline: true });
export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
- const [hidden, setHidden] = useState(true);
- return (
-
+ {language}
+
+
+
+
+
+
+
+
-
+ );
}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index a7b492c95..1ffb1da01 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -1,19 +1,55 @@
-import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
-import * as base64js from 'base64-js';
+import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
+import * as base64js from "base64-js";
+import { useState } from "react";
export default function FileCard({ fileName, content, fileType }) {
- const handleDownload = () => {
- const byteArray = new Uint8Array(base64js.toByteArray(content));
- const blob = new Blob([byteArray], { type: 'application/octet-stream' });
- const url = URL.createObjectURL(blob);
- const link = document.createElement('a');
- link.href = url;
- link.download = fileName+".png";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- URL.revokeObjectURL(url);
- };
+ const handleDownload = () => {
+ const byteArray = new Uint8Array(base64js.toByteArray(content));
+ const blob = new Blob([byteArray], { type: "application/octet-stream" });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = fileName + ".png";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ };
+ const [isHovered, setIsHovered] = useState(false);
+ function handleMouseEnter() {
+ setIsHovered(true);
+ }
+ function handleMouseLeave() {
+ setIsHovered(false);
+ }
+
+ if (fileType === "image") {
+ return (
+
- {!chat.isSend && 
}
- {chat.isSend &&
- {!chat.isSend ? (
-
-
+ ) : (
+
- {hidden && chat.thought && chat.thought !== "" && (
-
} +
+ setHidden((prev) => !prev)}
- className="absolute -top-1 -left-2 cursor-pointer"
- >
-
- )}
- {chat.thought && chat.thought !== "" && !hidden && (
- setHidden((prev) => !prev)}
- className=" text-start inline-block rounded-md h-full border border-gray-300
+ const [message, setMessage] = useState("");
+ useEffect(() => {
+ setMessage(chat.message);
+ }, [chat.message]);
+ const [hidden, setHidden] = useState(true);
+ return (
+
+ )}
+ {chat.thought && chat.thought !== "" && !hidden &&
+
- );
+ dangerouslySetInnerHTML={{
+ __html: convert.toHtml(chat.thought),
+ }}
+ >
+ {!chat.isSend && }
+ {chat.isSend &&
+ {!chat.isSend ? (
+
+
- ) : (
-
+ {hidden && chat.thought && chat.thought !== "" && (
+
} -
- setHidden((prev) => !prev)}
+ className="absolute -top-1 -left-2 cursor-pointer"
+ >
+
+ )}
+ {chat.thought && chat.thought !== "" && !hidden && (
+ setHidden((prev) => !prev)}
+ className=" text-start inline-block rounded-md h-full border border-gray-300
bg-gray-100 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
- dangerouslySetInnerHTML={{
- __html: convert.toHtml(chat.thought),
- }}
- >
- )}
- {chat.thought && chat.thought !== "" && !hidden && } -
-
- {chat.message}
- {chat.files && (
-
-
- {chat.files.map((file, index) => {
- return (
-
- )}
-
-
-
- );
- })}
-
-
- )}
-
- {chat.message}
-
- } +
+
+
+
+
+
+ ▍
+
+ );
+ }
+
+ children[0] = (children[0] as string).replace(
+ "`▍`",
+ "▍"
+ );
+ }
+
+ const match = /language-(\w+)/.exec(className || "");
+
+ return !inline ? (
+
+
+ {chat.files && (
+
+ {children}
+
+ );
+ },
+ }}
+ >
+ {message}
+
+ {chat.files.map((file, index) => {
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+ )}
+
+
+ {message}
+
+
+
+ 
+ {isHovered && (
+
+ );
+ }
return (
+
+
+ )}
+