Fix formatting issues in code

src/backend/langflow/interface/chains/custom.py

@@ -67,7 +67,9 @@ Human: {input}
 class MidJourneyPromptChain(BaseCustomConversationChain):
     """MidJourneyPromptChain is a chain you can use to generate new MidJourney prompts."""
 
-    template: Optional[str] = """I want you to act as a prompt generator for Midjourney's artificial intelligence program.
+    template: Optional[
+        str
+    ] = """I want you to act as a prompt generator for Midjourney's artificial intelligence program.
     Your job is to provide detailed and creative descriptions that will inspire unique and interesting images from the AI.
     Keep in mind that the AI is capable of understanding a wide range of language and can interpret abstract concepts, so feel free to be as imaginative and descriptive as possible.
     For example, you could describe a scene from a futuristic city, or a surreal landscape filled with strange creatures.
@@ -81,7 +83,9 @@ class MidJourneyPromptChain(BaseCustomConversationChain):
 
 
 class TimeTravelGuideChain(BaseCustomConversationChain):
-    template: Optional[str] = """I want you to act as my time travel guide. You are helpful and creative. I will provide you with the historical period or future time I want to visit and you will suggest the best events, sights, or people to experience. Provide the suggestions and any necessary information.
+    template: Optional[
+        str
+    ] = """I want you to act as my time travel guide. You are helpful and creative. I will provide you with the historical period or future time I want to visit and you will suggest the best events, sights, or people to experience. Provide the suggestions and any necessary information.
     Current conversation:
     {history}
     Human: {input}

src/frontend/src/App.tsx

@@ -23,7 +23,6 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
-
   const errorData = useAlertStore((state) => state.errorData);
   const errorOpen = useAlertStore((state) => state.errorOpen);
   const setErrorOpen = useAlertStore((state) => state.setErrorOpen);

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -132,7 +132,6 @@ export default function ParameterComponent({
       takeSnapshot();
     }
 
-    
     setNode(data.id, (oldNode) => {
       let newNode = cloneDeep(oldNode);
 
@@ -273,9 +272,11 @@ export default function ParameterComponent({
             <Handle
               type={left ? "target" : "source"}
               position={left ? Position.Left : Position.Right}
-              key={proxy
+              key={
+                proxy
                   ? scapedJSONStringfy({ ...id, proxy })
-                : scapedJSONStringfy(id)}
+                  : scapedJSONStringfy(id)
+              }
               id={
                 proxy
                   ? scapedJSONStringfy({ ...id, proxy })
@@ -348,9 +349,11 @@ export default function ParameterComponent({
                 <Handle
                   type={left ? "target" : "source"}
                   position={left ? Position.Left : Position.Right}
-                  key={proxy
+                  key={
+                    proxy
                       ? scapedJSONStringfy({ ...id, proxy })
-                    : scapedJSONStringfy(id)}
+                      : scapedJSONStringfy(id)
+                  }
                   id={
                     proxy
                       ? scapedJSONStringfy({ ...id, proxy })

src/frontend/src/components/IOview/index.tsx

@@ -1,29 +1,27 @@
-import { ReactNode, useContext, useState } from "react";
+import { ReactNode, useState } from "react";
-import NewChatView from "../newChatView";
-import { extractTypeFromLongId, removeCountFromString } from "../../utils/utils";
-import AccordionComponent from "../AccordionComponent";
-import { Badge } from "../ui/badge";
-import ShadTooltip from "../ShadTooltipComponent";
-import IconComponent from "../genericIconComponent";
-import { Textarea } from "../ui/textarea";
-import { NodeDataType } from "../../types/flow";
 import useFlowStore from "../../stores/flowStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import useFlowIOStore from "../../stores/flowsIOStore";
-
+import { NodeDataType } from "../../types/flow";
+import { extractTypeFromLongId } from "../../utils/utils";
+import AccordionComponent from "../AccordionComponent";
+import IconComponent from "../genericIconComponent";
+import NewChatView from "../newChatView";
+import { Badge } from "../ui/badge";
+import { Textarea } from "../ui/textarea";
 
 export default function IOView(): JSX.Element {
- const {inputIds, outputIds, updateNodeFlowData } =
+  const { inputIds, outputIds, updateNodeFlowData } = useFlowIOStore();
-   useFlowIOStore();
   const { reactFlowInstance } = useFlowStore();
   const options = inputIds.concat(outputIds);
- const [selectedView, setSelectedView] = useState<ReactNode>(handleSelectChange(options[0]));
+  const [selectedView, setSelectedView] = useState<ReactNode>(
+    handleSelectChange(options[0])
+  );
   // if (outputTypes.includes("ChatOutput")) {
   //   return <NewChatView />;
   // }
   function handleSelectChange(selected: string) {
     const type = extractTypeFromLongId(selected);
-   return <NewChatView />
+    return <NewChatView />;
     switch (type) {
       case "ChatOutput":
         return <NewChatView />;
@@ -31,22 +29,19 @@ export default function IOView(): JSX.Element {
     }
   }
 
-
   return (
     <div className="form-modal-iv-box">
       <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
         <div className="file-component-arrangement">
-         <IconComponent
+          <IconComponent name="Variable" className=" file-component-variable" />
-           name="Variable"
+          <span className="file-component-variables-span text-md">Inputs</span>
-           className=" file-component-variable"
-         />
-         <span className="file-component-variables-span text-md">
-           Inputs
-         </span>
         </div>
-       {
+        {inputIds
-         inputIds.filter(input=>extractTypeFromLongId(input)!=="ChatInput").map((inputId,index) => {
+          .filter((input) => extractTypeFromLongId(input) !== "ChatInput")
-           const nodeData:NodeDataType = reactFlowInstance?.getNodes().find(node=>node.id===inputId)?.data;
+          .map((inputId, index) => {
+            const nodeData: NodeDataType = reactFlowInstance
+              ?.getNodes()
+              .find((node) => node.id === inputId)?.data;
             return (
               <div className="file-component-accordion-div" key={index}>
                 <AccordionComponent
@@ -60,8 +55,7 @@ export default function IOView(): JSX.Element {
                         onClick={(event) => {
                           event.stopPropagation();
                         }}
-                   >
+                      ></div>
-                   </div>
                     </div>
                   }
                   key={index}
@@ -69,13 +63,19 @@ export default function IOView(): JSX.Element {
                 >
                   <div className="file-component-tab-column">
                     <Textarea
-                   value={reactFlowInstance?.getNodes().find(node=>node.id===inputId)?.data?.node?.template?.value.value}
+                      value={
+                        reactFlowInstance
+                          ?.getNodes()
+                          .find((node) => node.id === inputId)?.data?.node
+                          ?.template?.value.value
+                      }
                       className="custom-scroll"
                       onChange={(e) => {
                         e.target.value;
-                     if(nodeData){
+                        if (nodeData) {
-                       nodeData.node!.template["value"].value = e.target.value;
+                          nodeData.node!.template["value"].value =
-                       updateNodeFlowData(inputId,nodeData);
+                            e.target.value;
+                          updateNodeFlowData(inputId, nodeData);
                         }
                       }}
                       placeholder="Enter text..."
@@ -83,9 +83,8 @@ export default function IOView(): JSX.Element {
                   </div>
                 </AccordionComponent>
               </div>
-           )
+            );
-         })
+          })}
-       }
       </div>
       {selectedView}
     </div>

src/frontend/src/components/newChatView/chatInput/index.tsx

@@ -19,18 +19,15 @@ export default function ChatInput({
     }
   }, [lockChat, inputRef]);
 
-
+  function handleChange(value: number) {
- function handleChange(value:number){
+    console.log(value);
-   console.log(value)
+    if (value > 0) {
-   if(value>0){
       setRepeate(value);
-   }
+    } else {
-   else{
       setRepeate(1);
     }
   }
 
-
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.style.height = "inherit"; // Reset the height
@@ -38,16 +35,18 @@ export default function ChatInput({
     }
   }, [chatValue]);
 
-
   return (
     <div className="relative">
       <div className="flex flex-col">
         <span className="text-xs">repeate</span>
-     <input onChange={(e)=>{
+        <input
+          onChange={(e) => {
             handleChange(parseInt(e.target.value));
-     }} className="bg-background" type="number" min={0}/>
+          }}
-
+          className="bg-background"
-
+          type="number"
+          min={0}
+        />
       </div>
       <Textarea
         onKeyDown={(event) => {
@@ -79,7 +78,6 @@ export default function ChatInput({
             ? "form-modal-no-input bg-input"
             : " form-modal-lock-false bg-background",
 
-
           "form-modal-lockchat"
         )}
         placeholder={

src/frontend/src/components/newChatView/chatMessage/codeBlock/index.tsx

@@ -8,17 +8,14 @@ import { Props } from "../../../../types/components";
 export function CodeBlock({ language, value }: Props): JSX.Element {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
-
   const copyToClipboard = (): void => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
       return;
     }
 
-
     navigator.clipboard.writeText(value).then(() => {
       setIsCopied(true);
 
-
       setTimeout(() => {
         setIsCopied(false);
       }, 2000);
@@ -29,13 +26,11 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
     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");
@@ -52,7 +47,6 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
       <div className="code-block-modal">
         <span className="code-block-modal-span">{language}</span>
 
-
         <div className="flex items-center">
           <button className="code-block-modal-button" onClick={copyToClipboard}>
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
@@ -64,7 +58,6 @@ export function CodeBlock({ language, value }: Props): JSX.Element {
         </div>
       </div>
 
-
       <SyntaxHighlighter
         className="overflow-auto"
         language={language}

src/frontend/src/components/newChatView/chatMessage/index.tsx

@@ -13,7 +13,6 @@ import { chatMessagePropsType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
 import FileCard from "../fileComponent";
 
-
 export default function ChatMessage({
   chat,
   lockChat,
@@ -37,7 +36,7 @@ export default function ChatMessage({
                 alt="robot_image"
               />
             </div>
-           <span className="text-xs truncate">{chat.sender_name}</span>
+            <span className="truncate text-xs">{chat.sender_name}</span>
           </div>
         ) : (
           <div className="form-modal-chat-image">
@@ -48,7 +47,7 @@ export default function ChatMessage({
                 alt="male_technology"
               />
             </div>
-           <span className="text-xs truncate">{chat.sender_name}</span>
+            <span className="truncate text-xs">{chat.sender_name}</span>
           </div>
         )}
       </div>
@@ -110,19 +109,16 @@ export default function ChatMessage({
                                   );
                                 }
 
-
                                 children[0] = (children[0] as string).replace(
                                   "`▍`",
                                   "▍"
                                 );
                               }
 
-
                               const match = /language-(\w+)/.exec(
                                 className || ""
                               );
 
-
                               return !inline ? (
                                 <CodeTabsComponent
                                   isMessage
@@ -211,7 +207,6 @@ export default function ChatMessage({
                           );
                         }
 
-
                         // Update last index
                         lastIndex = regex.lastIndex;
                       }

src/frontend/src/components/newChatView/fileComponent/index.tsx

@@ -28,7 +28,6 @@ export default function FileCard({
     setIsHovered(false);
   }
 
-
   if (fileType === "image") {
     return (
       <div
@@ -58,7 +57,6 @@ export default function FileCard({
     );
   }
 
-
   return (
     <button onClick={handleDownload} className="file-card-modal-button">
       <div className="file-card-modal-div">

src/frontend/src/components/newChatView/index.tsx

@@ -1,40 +1,38 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { sendAllProps } from "../../types/api";
-import { ChatMessageType } from "../../types/chat";
-import { NodeType } from "../../types/flow";
-import { classNames } from "../../utils/utils";
-import ChatInput from "./chatInput";
-import ChatMessage from "./chatMessage";
 import { cloneDeep } from "lodash";
+import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
+import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
+import useFlowIOStore from "../../stores/flowsIOStore";
+import { sendAllProps } from "../../types/api";
 import {
+  ChatMessageType,
   ChatOutputType,
   FlowPoolObjectType,
 } from "../../types/chat";
+import { NodeType } from "../../types/flow";
 import { validateNodes } from "../../utils/reactflowUtils";
-import useAlertStore from "../../stores/alertStore";
+import { classNames } from "../../utils/utils";
-import useFlowIOStore from "../../stores/flowsIOStore";
+import ChatInput from "./chatInput";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import ChatMessage from "./chatMessage";
-import useFlowStore from "../../stores/flowStore";
-
 
 export default function newChatView(): JSX.Element {
   const [chatValue, setChatValue] = useState("");
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
- const { reactFlowInstance } = useFlowStore()
+  const { reactFlowInstance } = useFlowStore();
   const {
     flowPool,
     outputIds,
-   inputIds, inputTypes,
+    inputIds,
+    inputTypes,
     updateNodeFlowData,
     buildFlow,
-   CleanFlowPool
+    CleanFlowPool,
   } = useFlowIOStore();
   const { setErrorData } = useAlertStore();
   const [lockChat, setLockChat] = useState(false);
   const messagesRef = useRef<HTMLDivElement | null>(null);
 
-
   //build chat history
   useEffect(() => {
     const chatOutputResponses: FlowPoolObjectType[] = [];
@@ -46,9 +44,11 @@ export default function newChatView(): JSX.Element {
       }
     });
     const chatMessages: ChatMessageType[] = chatOutputResponses
-     .sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp)).filter((output) => !!output.data.artifacts.message)
+      .sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp))
+      .filter((output) => !!output.data.artifacts.message)
       .map((output) => {
-       const { sender, message, sender_name } = output.data.artifacts as ChatOutputType;
+        const { sender, message, sender_name } = output.data
+          .artifacts as ChatOutputType;
         console.log(output.data.artifacts);
         const is_ai = sender === "Machine";
         return { isSend: !is_ai, message, sender_name };
@@ -61,23 +61,19 @@ export default function newChatView(): JSX.Element {
     }
   }, [chatHistory]);
 
-
+  async function sendAll(data: sendAllProps): Promise<void> {}
- async function sendAll(data: sendAllProps): Promise<void> { }
   useEffect(() => {
     if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
   }, [chatHistory]);
 
-
   const ref = useRef<HTMLDivElement | null>(null);
 
-
   useEffect(() => {
     if (ref.current) {
       ref.current.focus();
     }
   }, []);
 
-
   async function sendMessage(count = 1): Promise<void> {
     let nodeValidationErrors = validateNodes(
       reactFlowInstance!.getNodes(),
@@ -106,7 +102,6 @@ export default function newChatView(): JSX.Element {
       }
       setLockChat(false);
 
-
       //set chat message in the flow and run build
       //@ts-ignore
     } else {
@@ -123,7 +118,6 @@ export default function newChatView(): JSX.Element {
     if (lockChat) setLockChat(false);
   }
 
-
   return (
     <div className="eraser-column-arrangement">
       <div className="eraser-size">

src/frontend/src/components/textInputComponent/index.tsx

@@ -4,7 +4,7 @@ export default function TextInputComponent({
 }: {
   text: string;
   emissor: string;
-  }) {
+}) {
   return (
     <div>
       <strong> {emissor}</strong>

src/frontend/src/components/textOutputComponent/index.tsx

@@ -1,10 +1,10 @@
 export default function TextOutputComponent({
   text,
   emissor,
-  }: {
+}: {
   text: string;
   emissor: string;
-  }) {
+}) {
   return (
     <div>
       <strong>{emissor}</strong>

src/frontend/src/constants/constants.ts

@@ -678,5 +678,5 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 
 export const priorityFields = new Set(["code", "template"]);
 
-export const INPUT_TYPES = new Set(["ChatInput","TextInput"]);
+export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
 export const OUTPUT_TYPES = new Set(["ChatOutput"]);

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -9,7 +9,6 @@ import ReactFlow, {
   OnMove,
   OnSelectionChangeParams,
   SelectionDragHandler,
-  addEdge,
   updateEdge,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
@@ -19,13 +18,12 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
-import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
+import { FlowType, NodeType } from "../../../../types/flow";
 import {
   generateFlow,
   generateNodeFromFlow,
   getNodeId,
   isValidConnection,
-  scapeJSONParse,
   validateSelection,
 } from "../../../../utils/reactflowUtils";
 import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
@@ -175,8 +173,8 @@ export default function Page({
   useEffect(() => {
     return () => {
       cleanFlow();
-    }
+    };
-  }, [])
+  }, []);
 
   const onConnectMod = useCallback(
     (params: Connection) => {

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx

@@ -4,7 +4,7 @@ import {
   Select,
   SelectContent,
   SelectItem,
-  SelectTrigger
+  SelectTrigger,
 } from "../../../../../components/ui/select-custom";
 import { useDarkStore } from "../../../../../stores/darkStore";
 import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";

src/frontend/src/stores/flowStore.ts

@@ -265,7 +265,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   getFilterEdge: [],
   onConnect: (connection) => {
-    let newEdges: Edge[] = []
+    let newEdges: Edge[] = [];
     get().setEdges((oldEdges) => {
       newEdges = addEdge(
         {
@@ -287,8 +287,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         oldEdges
       );
       return newEdges;
-
+    });
-    })
     useFlowsManagerStore
       .getState()
       .autoSaveCurrentFlow(

src/frontend/src/stores/flowsIOStore.ts

@@ -19,7 +19,6 @@ const useFlowIOStore = create<flowIOStoreType>((set, get) => ({
   inputTypes: [],
   inputIds: [],
   outputIds: [],
-
   setFlowPool: (flowPool) => {
     set({ flowPool });
   },

src/frontend/src/stores/typesStore.ts

@@ -43,5 +43,4 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
     let newChange = typeof change === "function" ? change(get().data) : change;
     set({ data: newChange });
   },
-
 }));

src/frontend/src/types/components/index.ts

@@ -444,7 +444,7 @@ export type chatInputType = {
   };
   lockChat: boolean;
   noInput: boolean;
-  sendMessage: (count?:number) => void;
+  sendMessage: (count?: number) => void;
   setChatValue: (value: string) => void;
 };
 

src/frontend/src/utils/buildUtils.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from "axios";
-import { FlowType } from "../types/flow";
 import { getVerticesOrder, postBuildVertex } from "../controllers/API";
+import { FlowType } from "../types/flow";
 
 type BuildVerticesParams = {
   flow: FlowType; // Assuming FlowType is the type for your flow
@@ -9,16 +9,16 @@ type BuildVerticesParams = {
   onBuildUpdate?: (data: any) => void; // Replace any with the actual type of data
   onBuildComplete?: (allNodesValid: boolean) => void;
   onBuildError?: (title, list) => void;
-  };
+};
 
-  export async function buildVertices({
+export async function buildVertices({
   flow,
   nodeId = null,
   onProgressUpdate,
   onBuildUpdate,
   onBuildComplete,
   onBuildError,
-  }: BuildVerticesParams) {
+}: BuildVerticesParams) {
   try {
     // Step 1: Get vertices order
     console.log(JSON.parse(JSON.stringify(flow)));
@@ -56,11 +56,13 @@ type BuildVerticesParams = {
           onBuildUpdate({ data, id: buildData.id });
         }
         buildResults.push(buildData.valid);
-        } catch (error : any) {
+      } catch (error: any) {
-          
         if (onBuildError) {
-            console.log(error)
+          console.log(error);
-            onBuildError("Error Building Component", [(error as AxiosError<any>).response?.data?.detail??"Unknown Error"]);
+          onBuildError("Error Building Component", [
+            (error as AxiosError<any>).response?.data?.detail ??
+              "Unknown Error",
+          ]);
         }
       }
     }
@@ -70,12 +72,14 @@ type BuildVerticesParams = {
       const allNodesValid = buildResults.every((result) => result);
       onBuildComplete(allNodesValid);
     }
-    } catch (error:any) {
+  } catch (error: any) {
     // Callback for handling errors
     if (onBuildError) {
       if (onBuildError) {
-          onBuildError("Error Building Component", [(error as AxiosError<any>).response?.data?.detail??"Unknown Error"]);
+        onBuildError("Error Building Component", [
-        }
+          (error as AxiosError<any>).response?.data?.detail ?? "Unknown Error",
+        ]);
       }
     }
   }
+}

src/frontend/src/utils/reactflowUtils.ts

@@ -477,7 +477,7 @@ export function convertArrayToObj(arrayOfObjects) {
 export function hasDuplicateKeys(array) {
   const keys = {};
   // Transforms an empty object into an object array without opening the 'editNode' modal to prevent the flow build from breaking.
-  if (!Array.isArray(array)) array = [{"": ""}];
+  if (!Array.isArray(array)) array = [{ "": "" }];
   for (const obj of array) {
     for (const key in obj) {
       if (keys[key]) {

src/frontend/src/utils/utils.ts

@@ -593,7 +593,7 @@ export function removeCountFromString(input: string): string {
 }
 
 export function extractTypeFromLongId(id: string): string {
-  let [newId,_] = id.split("-");
+  let [newId, _] = id.split("-");
   return newId;
 }