Nextjs Frontend

Key Components

apps/web/src/
├── app/
│   ├── layout.tsx           # Root layout with metadata
│   ├── page.tsx             # Landing / Chat page
│   └── api/                 # API routes (proxy)
├── components/
│   ├── chat/
│   │   ├── ChatWindow.tsx   # Main chat container
│   │   ├── MessageBubble.tsx # Individual message
│   │   ├── InputBar.tsx     # Message input with send
│   │   └── ActionPlan.tsx   # Render Action Plan card
│   ├── ui/                  # shadcn/ui components
│   └── layout/
│       ├── Header.tsx
│       ├── Sidebar.tsx
│       └── Footer.tsx
└── lib/
    ├── api.ts               # API client (fetch/axios)
    └── utils.ts             # cn() helper

Chat Message Component

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  actionPlan?: ActionPlan;
  citations?: Citation[];
  createdAt: Date;
}

// Render markdown with legal citations highlighted
<ReactMarkdown
  remarkPlugins={[remarkGfm]}
  components={{
    // Custom renderers for citations, tables, etc.
  }}
>
  {message.content}
</ReactMarkdown>

Action Plan Card

// Visual step-by-step procedure card
<ActionPlanCard>
  <StepTimeline steps={actionPlan.steps} />
  <DocumentChecklist documents={step.documents} />
  <FeeBreakdown fees={actionPlan.estimated_cost} />
  <LegalReferences citations={actionPlan.legal_references} />
</ActionPlanCard>

Rules

1. Use Server Components by default, 'use client' only for interactivity
2. All text must support Vietnamese (UTF-8)
3. Responsive design: mobile-first
4. Dark mode as default
5. Animate with Framer Motion (subtle, professional)
6. Render AI markdown responses with react-markdown
7. Action Plans rendered as structured cards, NOT raw JSON