components/app.js

import React from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import {
  Camera, Mic, Send, Settings, Activity, TrendingUp, Code, Terminal, Server,
  AlertCircle, MessageSquare, Brain, Zap, Sparkles, ChevronLeft, ChevronRight,
  CheckCircle, Info, X, FileText
} from 'lucide-react';

// Import slices
import appReducer from './slices/appSlice.js';
import websocketReducer from './slices/websocketSlice.js';
import personalizationReducer from './slices/personalizationSlice.js';
import mcpReducer from './slices/mcpSlice.js';
import monitoringReducer from './slices/monitoringSlice.js';
import uiReducer from './slices/uiSlice.js';
import chatReducer from './slices/chatSlice.js';

// Import components
import { AIModelSelector } from './AIModelSelector.js';
import { AICommandCenter } from './AICommandCenter.js';
import { SystemMonitor } from './SystemMonitor.js';

// Configure store
const store = configureStore({
  reducer: {
    app: appReducer,
    websocket: websocketReducer,
    personalization: personalizationReducer,
    mcpEcosystem: mcpReducer,
    monitoring: monitoringReducer,
    ui: uiReducer,
    chat: chatReducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

const UnifiedDockFireComponent = () => {
  // ... [rest of the component code remains the same]
};

export const UnifiedDockFireApp = () => (
  <Provider store={store}>
    <UnifiedDockFireComponent />
  </Provider>
);