feat: add attach section to PromptForm

client/src/components/Prompts/PromptForm.tsx

@@ -20,11 +20,11 @@ import {
   useUpdatePromptGroup,
   useMakePromptProduction,
 } from '~/data-provider';
-import { useResourcePermissions, useHasAccess, useLocalize } from '~/hooks';
+import { useResourcePermissions, useHasAccess, useLocalize, usePromptFileHandling } from '~/hooks';
 import CategorySelector from './Groups/CategorySelector';
 import { usePromptGroupsContext } from '~/Providers';
 import NoPromptGroup from './Groups/NoPromptGroup';
-import PromptVariables from './PromptVariables';
+import PromptVariablesAndFiles from './PromptVariablesAndFiles';
 import { cn, findPromptGroup } from '~/utils';
 import PromptVersions from './PromptVersions';
 import { PromptsEditorMode } from '~/common';
@@ -119,7 +119,12 @@ const RightPanel = React.memo(
                   makeProductionMutation.mutate({
                     id: promptVersionId,
                     groupId,
-                    productionPrompt: { prompt },
+                    productionPrompt: {
+                      prompt,
+                      ...(selectedPrompt.tool_resources && {
+                        tool_resources: selectedPrompt.tool_resources,
+                      }),
+                    },
                   });
                 }}
                 disabled={
@@ -179,6 +184,29 @@ const PromptForm = () => {
   const [showSidePanel, setShowSidePanel] = useState(false);
   const sidePanelWidth = '320px';
 
+  // Initialize prompt file handling
+  const {
+    loadFromToolResources,
+    getToolResources,
+    promptFiles: hookPromptFiles,
+    handleFileChange,
+    handleFileRemove,
+    setFiles,
+  } = usePromptFileHandling({
+    onFileChange: () => {
+      // Auto-save when files are added/removed
+      console.log('onFileChange called', { canEdit, selectedPrompt: !!selectedPrompt });
+      if (canEdit && selectedPrompt) {
+        const currentPromptText = getValues('prompt');
+        console.log('Calling onSave with:', currentPromptText);
+        // Use setTimeout to ensure file state is updated before calling onSave
+        setTimeout(() => {
+          onSave(currentPromptText);
+        }, 100);
+      }
+    },
+  });
+
   const { data: group, isLoading: isLoadingGroup } = useGetPromptGroup(promptId);
   const { data: prompts = [], isLoading: isLoadingPrompts } = useGetPrompts(
     { groupId: promptId },
@@ -200,7 +228,7 @@ const PromptForm = () => {
       category: group ? group.category : '',
     },
   });
-  const { handleSubmit, setValue, reset, watch } = methods;
+  const { handleSubmit, setValue, reset, watch, getValues } = methods;
   const promptText = watch('prompt');
 
   const selectedPrompt = useMemo(
@@ -237,7 +265,10 @@ const PromptForm = () => {
         makeProductionMutation.mutate({
           id: data.prompt._id,
           groupId: data.prompt.groupId,
-          productionPrompt: { prompt: data.prompt.prompt },
+          productionPrompt: {
+            prompt: data.prompt.prompt,
+            ...(data.prompt.tool_resources && { tool_resources: data.prompt.tool_resources }),
+          },
         });
       }
 
@@ -268,22 +299,37 @@ const PromptForm = () => {
         return;
       }
 
+      const toolResources = getToolResources();
       const tempPrompt: TCreatePrompt = {
         prompt: {
           type: selectedPrompt.type ?? 'text',
           groupId: groupId,
           prompt: value,
+          ...(toolResources && { tool_resources: toolResources }),
         },
       };
 
-      if (value === selectedPrompt.prompt) {
+      // Check if prompt text or tool_resources have changed
+      const promptTextChanged = value !== selectedPrompt.prompt;
+      const toolResourcesChanged =
+        JSON.stringify(toolResources) !== JSON.stringify(selectedPrompt.tool_resources);
+
+      console.log('onSave check:', {
+        promptTextChanged,
+        toolResourcesChanged,
+        currentToolResources: toolResources,
+        selectedToolResources: selectedPrompt.tool_resources,
+      });
+
+      if (!promptTextChanged && !toolResourcesChanged) {
+        console.log('No changes detected, returning early');
         return;
       }
 
       // We're adding to an existing group, so use the addPromptToGroup mutation
       addPromptToGroupMutation.mutate({ ...tempPrompt, groupId });
     },
-    [selectedPrompt, group, addPromptToGroupMutation, canEdit],
+    [selectedPrompt, group, addPromptToGroupMutation, canEdit, getToolResources],
   );
 
   const handleLoadingComplete = useCallback(() => {
@@ -307,6 +353,12 @@ const PromptForm = () => {
   useEffect(() => {
     setValue('prompt', selectedPrompt ? selectedPrompt.prompt : '', { shouldDirty: false });
     setValue('category', group ? group.category : '', { shouldDirty: false });
+
+    if (selectedPrompt?.tool_resources) {
+      loadFromToolResources(selectedPrompt.tool_resources);
+    } else {
+      loadFromToolResources(undefined);
+    }
   }, [selectedPrompt, group, setValue]);
 
   useEffect(() => {
@@ -447,7 +499,14 @@ const PromptForm = () => {
                       isEditing={isEditing}
                       setIsEditing={(value) => canEdit && setIsEditing(value)}
                     />
-                    <PromptVariables promptText={promptText} />
+                    <PromptVariablesAndFiles
+                      promptText={promptText}
+                      files={hookPromptFiles}
+                      onFilesChange={setFiles}
+                      handleFileChange={handleFileChange}
+                      onFileRemove={handleFileRemove}
+                      disabled={!canEdit}
+                    />
                     <Description
                       initialValue={group.oneliner ?? ''}
                       onValueChange={canEdit ? handleUpdateOneliner : undefined}