Chat Interface and State

Chat Interface & State

The Chat Interface & State represents the core interactive layer of the SecondLayer platform, facilitating real-time legal assistance through MCP tools. It utilizes a modular architecture that separates UI components, application logic, and global state management.

Architecture Overview

The chat system is built upon a layered architecture where the frontend communicates with a backend service hosting various MCP tools. The interface supports two primary modes: AI Chat Mode (agentic loop) and Manual Tool Mode (direct tool execution).

graph TD
    User[User Input] --> Page[ChatPage Component]
    Page --> Store[ChatStore Zustand]
    Page --> Hook[useMCPTool / useAIChat]
    Hook --> Service[LegalService / MCPService]
    Service --> API[Backend API / MCP Tools]
    API -- SSE Stream --> Service
    Service -- Updates --> Store
    Store -- Reactive UI --> Page

Loading

State Management

Global state for the chat interface is managed via Zustand through the chatStore. This store handles the lifecycle of messages, streaming states, and progressive rendering.

• Message Persistence: Messages persist across sessions via localStorage.
• Streaming Control: Tracks streaming status and provides cancellation.
• Incremental Updates: Supports real-time text appending and progressive AI reasoning display.

MCP Tool Integration

The system supports 43+ distinct MCP tools, ranging from court case searches to legislative monitoring. The ChatPage component orchestrates tool execution.

Execution Modes

1. AI Chat Mode: Initiates an agentic loop where the LLM decides which tools to call.
2. Manual Mode: The user selects a specific tool, and the input is parsed into tool-specific parameters.

Communication uses Server-Sent Events (SSE) for real-time streaming of progress updates and results.

Key Components

ChatPage Component

The main route for conversation. Leverages useMCPTool and useAIChat hooks to interface with the backend.

MainLayout

Provides the structural shell (Sidebar, Header, RightPanel). The RightPanel auto-opens when legal evidence (court decisions, citations) is detected in the message stream.

Implementation Highlights

Feature	Description
SSE Client	Universal client managing connection, retries, and AbortController for cancellation.
Evidence Panel	Aggregates decisions, citations, and documents from all messages into a side panel.
Type Safety	Full TypeScript coverage for all MCP tools and their request/response shapes.