please fix the newObj and oldObj are not being set and the values are not being assigned to them this is the condole 
Full response from server: {message: 'Success!', data: {…}, initialFiles: {…}}data: {src: {…}}initialFiles: {package.json: {…}, index.html: {…}, vite.config.js: {…}, tailwind.config.js: {…}, postcss.config.js: {…}, …}message: "Success!"[[Prototype]]: Object
WebContainerApp.tsx:140 {package.json: {…}, index.html: {…}, vite.config.js: {…}, tailwind.config.js: {…}, postcss.config.js: {…}, …}.eslintrc.cjs: {file: {…}}index.html: {file: {…}}package.json: {file: {…}}postcss.config.js: {file: {…}}src: {directory: {…}}tailwind.config.js: {file: {…}}vite.config.js: {file: {…}}[[Prototype]]: Object
WebContainerApp.tsx:141 {src: {…}}src: {directory: {…}}[[Prototype]]: Object
WebContainerApp.tsx:142 before setting:  {}
WebContainerApp.tsx:143 before setting:  {}
WebContainerApp.tsx:156 Merged object: {}
WebContainerApp.tsx:169 after setting:  {}
WebContainerApp.tsx:170 after setting:  {}
"""
'use client'

import React, { useState, useEffect, useRef } from 'react';
import QueryInput from './QueryInput';
import useWebContainer from '../hooks/useWebContainer';
import { sendQuery } from '../utils/api';
import { mergeJson } from '../utils/mergeJson';
import { Card, CardContent } from '@/components/ui/card';
import { Terminal as XTerminal } from '@xterm/xterm';
import '@xterm/xterm/css/xterm.css';

const WebContainerApp: React.FC = () => {
  const [query, setQuery] = useState('');
  const [oldObj, setOldObj] = useState({});
  const [newObj, setNewObj] = useState({});
  const [isInitialQuery, setIsInitialQuery] = useState(true);
  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [status, setStatus] = useState({ serverReady: false, loading: true });

  const iframeRef = useRef<HTMLIFrameElement>(null);
  const { webContainerInstance, isInitialized, initializeWebContainer } = useWebContainer();

  const terminalRef = useRef<HTMLDivElement>(null);
  const terminalInstanceRef = useRef<XTerminal | null>(null);

  // Terminal initialization
  useEffect(() => {
    if (terminalRef.current && !terminalInstanceRef.current) {
      const terminal = new XTerminal({
        convertEol: true,
        rows: 15,
        theme: {
          background: '#1e1e1e',
          foreground: '#d4d4d4'
        }
      });
      terminal.open(terminalRef.current);
      terminalInstanceRef.current = terminal;
    }
  }, []);

  // Utility for writing to terminal
  const writeToTerminal = (message: string, type: 'default' | 'error' | 'success' | 'info' = 'default') => {
    if (!terminalInstanceRef.current) return;

    const colors = {
      default: '\x1b[37m', // White
      error: '\x1b[31m',   // Red
      success: '\x1b[32m', // Green
      info: '\x1b[34m'     // Blue
    };

    const colorCode = colors[type] || colors.default;
    terminalInstanceRef.current.writeln(`${colorCode}${message}\x1b[0m`);
  };

  // Initialize WebContainer
  useEffect(() => {
    initializeWebContainer();
  }, [initializeWebContainer]);

  // Update WebContainer when oldObj changes and is initialized
  useEffect(() => {
    if (isInitialized && Object.keys(oldObj).length > 0) {
      updateWebContainer(oldObj);
    }
  }, [isInitialized, oldObj]);

  // WebContainer update function
  const updateWebContainer = async (fileStructure: any) => {
    if (!webContainerInstance) {
      writeToTerminal('WebContainer not initialized', 'error');
      return;
    }

    try {
      writeToTerminal('Updating project files...', 'info');
      await webContainerInstance.mount(fileStructure);
      
      writeToTerminal('Installing dependencies...', 'info');
      const installProcess = await webContainerInstance.spawn('npm', ['install']);
      installProcess.output.pipeTo(new WritableStream({
        write(data) {
          writeToTerminal(data, 'info');
        }
      }));
      const installResult = await installProcess.exit;
      
      if (installResult !== 0) {
        throw new Error('Dependency installation failed');
      }

      writeToTerminal('Starting development server...', 'info');
      const devProcess = await webContainerInstance.spawn('npm', ['run', 'dev']);
      devProcess.output.pipeTo(new WritableStream({
        write(data) {
          writeToTerminal(data, 'info');
        }
      }));

      webContainerInstance.on('server-ready', (port, url) => {
        writeToTerminal(`Server ready at ${url}`, 'success');
        setStatus(prev => ({
          ...prev, 
          serverReady: true, 
          loading: false
        }));
        
        if (iframeRef.current) {
          iframeRef.current.src = url;
        }
      });
    } catch (error: any) {
      writeToTerminal(`WebContainer update failed: ${error.message}`, 'error');
      setError('Failed to update WebContainer: ' + error.message);
    }
  };

  const handleQuerySubmit = async () => {
    if (!query.trim() || isProcessing) return;

    setIsProcessing(true);
    setError(null);

    try {
      // Send query with current oldObj if not initial query
      const response = await sendQuery(query, isInitialQuery ? undefined : oldObj);
      console.log("Full response from server:", response);

      // Ensure response is valid
      if (!response) {
        throw new Error('No response received from server');
      }

      // Handle initial query
      if (isInitialQuery) {
        const initialFiles = response.initialFiles || {};
        const initialData = response.data || {};
        console.log(initialFiles)
        console.log(initialData)
        console.log("before setting: ", oldObj)
        console.log("before setting: ", newObj)
        // Set initial objects
        setOldObj(initialFiles);
        setNewObj(initialData);
        setIsInitialQuery(false);
      } else {
        // For subsequent queries, update newObj with server response
        const data = response.data || {};
        setNewObj(data);
      }

      // Merge old and new objects
      const mergedObj = mergeJson(oldObj, newObj);
      console.log("Merged object:", mergedObj);

      // Update oldObj with merged object and clear newObj
      setOldObj(mergedObj);
      setNewObj({});

      // Update WebContainer
      await updateWebContainer(mergedObj);
    } catch (err: any) {
      console.error('Query submission error:', err);
      setError(err.message || 'An error occurred while processing your query.');
    } finally {
      setIsProcessing(false);
      console.log("after setting: ", oldObj)
      console.log("after setting: ", newObj)
    }
  };

  return (
    <Card>
      <CardContent className="space-y-4">
        <QueryInput
          query={query}
          setQuery={setQuery}
          onSubmit={handleQuerySubmit}
          isProcessing={isProcessing}
          isInitialized={isInitialized}
        />
        {error && (
          <div className="text-red-500 bg-red-100 p-2 rounded">
            {error}
          </div>
        )}
        
        <div className="border rounded-lg overflow-hidden">
          <iframe
            ref={iframeRef}
            className="w-full h-[500px] bg-gray-50"
            title="WebContainer Preview"
          />
        </div>
        <div ref={terminalRef} className="w-full h-[300px] bg-black rounded-lg" />
      </CardContent>
    </Card>
  );
};

export default WebContainerApp;


"""
please fix the handle query submit