🏹 Architecture Diagram

┌─────────────┐        ┌──────────────────┐
│   Browser   │        │  Spring Backend  │
│ (React UI)  │        │                  │
│             │  HTTP  │  Chat Controller │
│             ├──────►│  Model Service   │
│             │        │  Inference Engine│
└─────────────┘        └──────────────────┘
        │
        │ sessionStorage
        ▼
 Client-side Session State

🖥️ Major Components

• Home Page

• Product information

• CTA: New Discussion

• Chat Page

• Sidebar with discussions

• Chat window

• Session-based conversation handling

📅 Data Flow (HLD)

• Chat Interaction Flow

• User starts a new discussion

• Frontend generates sessionId

• User sends a message

• Frontend sends:

POST /api/agent/chat?sessionId=...

• Backend:

• Validates training state

• Generates response

• Backend returns plain text

• Frontend renders response in chat UI

🐜 State Model

Chat {
  id: string
  title: string
  messages: Message[]
}

Message {
  role: "user" | "assistant"
  content: string
}

🐘 Component Breakdown

ChatWindow
├── Sidebar
│   ├── New Discussion
│   └── Discussion List
├── ChatHeader
│   └── Home Navigation
├── MessageList
│   ├── UserMessage
│   └── AssistantMessage
└── ChatInput

🎨User Flow