fix(frontend): Typing in the NodeKeyValueInput field causes the field to un-focus

[majdyz]

#8657 introduces state change on each input onChange event. This causes the NodeKeyValueInput to get re-rendered on each value change making the input unfocussed.

Changes 🏗️

Use a numbered index as the DOM key instead of an actual input key to avoid React's dirty check and re-render the component as a different DOM, which causes the input to un-focus.

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • ...

Example test plan

• Create from scratch and execute an agent with at least 3 blocks
• Import an agent from file upload, and confirm it executes correctly
• Upload agent to marketplace
• Import an agent from marketplace and confirm it executes correctly
• Edit an agent from monitor, and confirm it executes correctly

For configuration changes:

• .env.example is updated or already compatible with my changes
• docker-compose.yml is updated or already compatible with my changes
• I have included a list of my configuration changes in the PR description (under Changes)

Examples of configuration changes

• Changing ports
• Adding new services that need to communicate with each other
• Secrets or environment variable changes
• New or infrastructure changes such as databases

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review React Key Pattern Using array index as React key could lead to incorrect component updates if items are reordered or deleted. Consider using a more stable unique identifier if items can be reordered.

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	fc4b2d4
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/673b0e681d7a720008e82068