Update file preview functionality in chatInput component

src/frontend/src/controllers/API/index.ts

@@ -922,12 +922,16 @@ export async function getVerticesOrder(
 export async function postBuildVertex(
   flowId: string,
   vertexId: string,
-  input_value: string
+  input_value: string,
+  files?: string[]
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
   // input_value is optional and is a query parameter
+  const data = input_value ? { inputs: { input_value: input_value } } : undefined
+  if (data && files) {
+    data["files"] = files;
+  }
   return await api.post(
-    `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
+    `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`, data
-    input_value ? { inputs: { input_value: input_value } } : undefined
   );
 }
 

src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx

@@ -54,6 +54,7 @@ export default function ChatInput({
                   const newFiles = [...prev];
                   const updatedIndex = newFiles.findIndex((file)=>file.id===id);
                   newFiles[updatedIndex].loading = false;
+                  newFiles[updatedIndex].path = res.data.file_path;
                   return newFiles;
                 })
               }).catch((err) => {
@@ -76,6 +77,11 @@ export default function ChatInput({
     };
   }, []);
 
+  function send(){
+    sendMessage({repeat,files:files.map((file)=>file.path??"").filter((file)=>file!=="")});
+    setFiles([]);
+  }
+
   return (
     <div className="flex w-full flex-col-reverse">
       <div className="relative w-full">
@@ -88,7 +94,7 @@ export default function ChatInput({
               !event.shiftKey &&
               !event.nativeEvent.isComposing
             ) {
-              sendMessage(repeat);
+              send();
             }
           }}
           rows={1}
@@ -134,7 +140,7 @@ export default function ChatInput({
                 : "bg-chat-send text-background"
             )}
             disabled={lockChat || saveLoading}
-            onClick={(): void => sendMessage(repeat)}
+            onClick={(): void => send()}
           >
             {lockChat || saveLoading ? (
               <IconComponent

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -202,7 +202,7 @@ export default function ChatView({
               chatValue={chatValue}
               noInput={!inputTypes.includes("ChatInput")}
               lockChat={lockChat}
-              sendMessage={(count) => sendMessage(count)}
+              sendMessage={({repeat,files}) => sendMessage({repeat,files})}
               setChatValue={(value) => {
                 setChatValue(value);
               }}

src/frontend/src/modals/IOModal/index.tsx

@@ -89,15 +89,16 @@ export default function IOModal({
     }
   }, [open, currentFlow]);
 
-  async function sendMessage(count = 1): Promise<void> {
+  async function sendMessage({repeat=1,files}:{repeat:number,files?:string[]}): Promise<void> {
     if (isBuilding) return;
     setIsBuilding(true);
     setLockChat(true);
     setChatValue("");
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < repeat; i++) {
       await buildFlow({
         input_value: chatValue,
         startNodeId: chatInput?.id,
+        files:files
       }).catch((err) => {
         console.error(err);
         setLockChat(false);
@@ -382,7 +383,7 @@ export default function IOModal({
             <Button
               variant={"outline"}
               className="flex gap-2 px-3"
-              onClick={() => sendMessage(1)}
+              onClick={() => sendMessage({repeat:1})}
             >
               <IconComponent
                 name={isBuilding ? "Loader2" : "Zap"}

src/frontend/src/stores/flowStore.ts

@@ -431,10 +431,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     startNodeId,
     stopNodeId,
     input_value,
+    files,
   }: {
     startNodeId?: string;
     stopNodeId?: string;
     input_value?: string;
+    files?: string[];
   }) => {
     get().setIsBuilding(true);
     const currentFlow = useFlowsManagerStore.getState().currentFlow;
@@ -523,6 +525,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     }
     await buildVertices({
       input_value,
+      files,
       flowId: currentFlow!.id,
       startNodeId,
       stopNodeId,

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

@@ -187,7 +187,7 @@ export type FloatComponentType = {
   id?: string;
 };
 
-export type FilePreviewType={loading:boolean,file:File,error:boolean,id:string}
+export type FilePreviewType={loading:boolean,file:File,error:boolean,id:string,path?:string}
 
 export type TooltipComponentType = {
   children: ReactElement;
@@ -475,7 +475,7 @@ export type chatInputType = {
   };
   lockChat: boolean;
   noInput: boolean;
-  sendMessage: (count?: number) => void;
+  sendMessage: ({repeat,files}:{repeat:number,files?:string[]}) => void;
   setChatValue: (value: string) => void;
 };
 
@@ -716,7 +716,7 @@ export type IOFieldViewProps = {
 export type UndrawCardComponentProps = { flow: FlowType };
 
 export type chatViewProps = {
-  sendMessage: (count?: number) => void;
+  sendMessage: ({repeat,files}:{repeat:number,files?:string[]}) => void;
   chatValue: string;
   setChatValue: (value: string) => void;
   lockChat: boolean;

src/frontend/src/types/zustand/flow/index.ts

@@ -12,6 +12,7 @@ import { FlowState } from "../../tabs";
 
 export type chatInputType = {
   result: string;
+  files?:string[];
 };
 
 export type ChatOutputType = {
@@ -19,6 +20,7 @@ export type ChatOutputType = {
   sender: string;
   sender_name: string;
   stream_url?: string;
+  files?:string[];
 };
 
 export type FlowPoolObjectType = {
@@ -35,6 +37,23 @@ export type FlowPoolObjectType = {
   buildId: string;
 };
 
+export type FlowPoolObjectTypeNew = {
+  //build
+  //1 - error->logs
+  //2 - success-> result
+  timestamp: string;
+  valid: boolean;
+  data: {
+    logs?:any | ChatOutputType | chatInputType;
+    results: any | ChatOutputType | chatInputType;
+  };
+  duration?: string;
+  progress?: number;
+  //retrieve component type from id
+  id: string;
+  buildId: string;
+};
+
 export type VertexLayerElementType = {
   id: string;
   reference?: string;
@@ -98,11 +117,13 @@ export type FlowStoreType = {
     startNodeId,
     stopNodeId,
     input_value,
+    files,
   }: {
     nodeId?: string;
     startNodeId?: string;
     stopNodeId?: string;
     input_value?: string;
+    files?:string[];
   }) => Promise<void>;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
   updateVerticesBuild: (

src/frontend/src/utils/buildUtils.ts

@@ -9,6 +9,7 @@ import { VertexLayerElementType } from "../types/zustand/flow";
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
   input_value?: any; // Replace any with the actual type if it's not any
+  files?:string[];
   startNodeId?: string | null; // Assuming nodeId is of type string, and it's optional
   stopNodeId?: string | null; // Assuming nodeId is of type string, and it's optional
   onGetOrderSuccess?: () => void;
@@ -93,6 +94,7 @@ export async function updateVerticesOrder(
 export async function buildVertices({
   flowId,
   input_value,
+  files,
   startNodeId,
   stopNodeId,
   onGetOrderSuccess,
@@ -183,6 +185,7 @@ export async function buildVertices({
           flowId,
           id: element.id,
           input_value,
+          files,
           onBuildUpdate: (data: VertexBuildTypeAPI, status: BuildStatus) => {
             if (onBuildUpdate) onBuildUpdate(data, status, runId);
           },
@@ -215,6 +218,7 @@ async function buildVertex({
   flowId,
   id,
   input_value,
+  files,
   onBuildUpdate,
   onBuildError,
   verticesIds,
@@ -224,6 +228,7 @@ async function buildVertex({
   flowId: string;
   id: string;
   input_value: string;
+  files?:string[];
   onBuildUpdate?: (data: any, status: BuildStatus) => void;
   onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
   verticesIds: string[];
@@ -231,7 +236,7 @@ async function buildVertex({
   stopBuild: () => void;
 }) {
   try {
-    const buildRes = await postBuildVertex(flowId, id, input_value);
+    const buildRes = await postBuildVertex(flowId, id, input_value,files);
 
     const buildData: VertexBuildTypeAPI = buildRes.data;
     if (onBuildUpdate) {