refactor: Break down AISandboxPage into smaller components and hooks

[Mirza-Samad-Ahmed-Baig]

This pull request refactors the AISandboxPage component to improve its maintainability and readability. The original component was very large and complex, managing a significant amount of state and containing a lot of logic. This made it difficult to understand, debug, and extend.

This refactoring addresses these issues by:

• Breaking down the AISandboxPage component into smaller, more focused components:
  • Chat.tsx: Responsible for rendering chat messages and input.
  • CodeDisplay.tsx: Responsible for rendering the code display and file explorer.
  • SandboxPreview.tsx: Responsible for rendering the sandbox preview iframe and screenshot.
• Creating custom hooks to manage state and logic:
  • useSandbox.ts: Manages the state related to the sandbox, including sandbox data, status, and file structure.
  • useChat.ts: Manages the state related to chat messages and conversation context.
  • useCodeGeneration.ts: Manages the state related to code generation progress and application.

Benefits:

• Improved Maintainability: Smaller, more focused components are easier to understand, debug, and modify.
• Enhanced Readability: The code is now more organized and easier to follow.
• Better Reusability: The new hooks and components can be reused in other parts of the application or in different projects.
• Reduced Complexity: The main AISandboxPage component is now much simpler, making it easier to reason about.