Prt2 ui

# Part 2: Frontend State Management

## Overview
This section contains the state management logic for the chat application. We use React's built-in hooks along with custom hooks for managing complex state and side effects.

## Chat Context (ChatContext.jsx)
```jsx
import React, { createContext, useContext, useReducer } from 'react';

const ChatContext = createContext(null);

// Action types
const ACTIONS = {
  SET_MESSAGES: 'SET_MESSAGES',
  ADD_MESSAGE: 'ADD_MESSAGE',
  SET_LOADING: 'SET_LOADING',
  SET_ERROR: 'SET_ERROR',
  SET_CONVERSATIONS: 'SET_CONVERSATIONS',
};

// Initial state
const initialState = {
  messages: [],
  loading: false,
  error: null,
  savedConversations: [],
};

// Reducer function
function chatReducer(state, action) {
  switch (action.type) {
    case ACTIONS.SET_MESSAGES:
      return { ...state, messages: action.payload };
    case ACTIONS.ADD_MESSAGE:
      return { ...state, messages: [...state.messages, action.payload] };
    case ACTIONS.SET_LOADING:
      return { ...state, loading: action.payload };
    case ACTIONS.SET_ERROR:
      return { ...state, error: action.payload };
    case ACTIONS.SET_CONVERSATIONS:
      return { ...state, savedConversations: action.payload };
    default:
      return state;
  }
}

// Provider component
export function ChatProvider({ children }) {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  return (
    <ChatContext.Provider value={{ state, dispatch }}>
      {children}
    </ChatContext.Provider>
  );
}

// Custom hook for using chat context
export function useChatContext() {
  const context = useContext(ChatContext);
  if (!context) {
    throw new Error('useChatContext must be used within a ChatProvider');
  }
  return context;
}
```

## Custom Hooks (hooks/useChatActions.js)
```javascript
import { useCallback } from 'react';
import { useChatContext } from '../context/ChatContext';
import { chatApi } from '../services/api';

export function useChatActions() {
  const { state, dispatch } = useChatContext();

  const sendMessage = useCallback(async (content) => {
    const message = {
      content,
      role: 'user',
      timestamp: new Date().toISOString(),
    };

    try {
      dispatch({ type: 'SET_LOADING', payload: true });
      dispatch({ type: 'ADD_MESSAGE', payload: message });

      const response = await chatApi.sendMessage(message);
      
      dispatch({
        type: 'ADD_MESSAGE',
        payload: {
          content: response.response,
          role: 'assistant',
          timestamp: new Date().toISOString(),
        },
      });
    } catch (error) {
      dispatch({ type: 'SET_ERROR', payload: error.message });
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false });
    }
  }, [dispatch]);

  const loadConversation = useCallback(async (filename) => {
    try {
      dispatch({ type: 'SET_LOADING', payload: true });
      const data = await chatApi.loadConversation(filename);
      dispatch({ type: 'SET_MESSAGES', payload: data.messages });
    } catch (error) {
      dispatch({ type: 'SET_ERROR', payload: error.message });
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false });
    }
  }, [dispatch]);

  const fetchSavedConversations = useCallback(async () => {
    try {
      const data = await chatApi.getSavedConversations();
      dispatch({ type: 'SET_CONVERSATIONS', payload: data.conversations });
    } catch (error) {
      dispatch({ type: 'SET_ERROR', payload: error.message });
    }
  }, [dispatch]);

  return {
    sendMessage,
    loadConversation,
    fetchSavedConversations,
    state,
  };
}
```

## Error Handling Hook (hooks/useErrorHandler.js)
```javascript
import { useEffect } from 'react';
import { useChatContext } from '../context/ChatContext';

export function useErrorHandler() {
  const { state, dispatch } = useChatContext();

  useEffect(() => {
    if (state.error) {
      // You could implement toast notifications or other error UI here
      console.error('Chat Error:', state.error);
      
      // Clear error after 5 seconds
      const timer = setTimeout(() => {
        dispatch({ type: 'SET_ERROR', payload: null });
      }, 5000);

      return () => clearTimeout(timer);
    }
  }, [state.error, dispatch]);

  return state.error;
}
```

## Auto-scroll Hook (hooks/useAutoScroll.js)
```javascript
import { useEffect, useRef } from 'react';

export function useAutoScroll(deps = []) {
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'end',
      });
    }
  }, deps);

  return scrollRef;
}
```

## Persistence Hook (hooks/usePersistence.js)
```javascript
import { useEffect } from 'react';
import { useChatContext } from '../context/ChatContext';

const STORAGE_KEY = 'chat_state';

export function usePersistence() {
  const { state, dispatch } = useChatContext();

  // Load state from localStorage on mount
  useEffect(() => {
    const savedState = localStorage.getItem(STORAGE_KEY);
    if (savedState) {
      try {
        const parsed = JSON.parse(savedState);
        dispatch({ type: 'SET_MESSAGES', payload: parsed.messages });
        dispatch({ type: 'SET_CONVERSATIONS', payload: parsed.savedConversations });
      } catch (error) {
        console.error('Error loading saved state:', error);
      }
    }
  }, [dispatch]);

  // Save state to localStorage when it changes
  useEffect(() => {
    const stateToSave = {
      messages: state.messages,
      savedConversations: state.savedConversations,
    };
    localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
  }, [state.messages, state.savedConversations]);
}
```

The state management system provides:
- Centralized state management using Context API
- Action creators and reducers for predictable state updates
- Custom hooks for common operations
- Error handling and persistence
- Proper TypeScript types (if using TypeScript)
- Optimized performance with useCallback and useMemo
- Local storage integration for persistence

This organization allows for:
- Clear separation of concerns
- Easy testing and debugging
- Scalable state management
- Reusable logic across components
- Consistent error handling