ADR-0025: Novation UI Integration
Date: 2026-02-10 | Status: Accepted
Context
The public-facing chat interface needs to match the Novation website (zol.novation.website) aesthetic for the demo presentation. The current React frontend uses a standard chat bubble layout with avatars, which does not align with ZOL's website design language. Novation is the marketing agency building ZOL's Drupal website, and visual consistency between the search tool and the main website is essential for stakeholder acceptance.
Decision
Adopt a document-style Q&A thread layout instead of traditional chat UI:
Visual Design
- No chat bubbles, no avatars: Questions and answers flow as a document thread
- Questions: Rendered as bold headings with a sparkle icon prefix, distinguishing user input from AI output
- Responses: Clean paragraphs with standard typography, no message containers or backgrounds
- Skeleton loader: Animated placeholder blocks during response generation (not a spinner)
- Sources list: Cited sources displayed as a compact list below each response with page titles and links
- Suggestion pills: Horizontal pill-shaped buttons for suggested follow-up queries
- Color scheme: Teal accent color (
#009B8D/ similar) inherited from Novation's ZOL website palette
Components
| Component | Purpose |
|---|---|
AiSearchInput | Search bar with submit button, styled to match Novation input fields |
SuggestionPills | Horizontally scrollable follow-up suggestions |
SkeletonLoader | Animated content placeholder during streaming |
SourcesList | Collapsible list of cited sources with links |
FeedbackIcons | Thumbs up/down for response quality feedback |
Multi-Turn Conversation
The thread layout preserves full conversation history. Each question-answer pair stacks vertically, creating a scrollable document of the entire search session. New queries append to the bottom, and the view auto-scrolls to the latest response.
Consequences
Positive
- Visual consistency: Search tool looks native to the ZOL/Novation website
- Cleaner presentation: Document-style layout is better suited for informational content than chat bubbles
- Professional appearance: No informal chat aesthetic for a hospital context
- Multi-turn preserved: Full conversation history visible with cleaner visual hierarchy
Negative
- Custom components: Cannot use off-the-shelf chat UI libraries (e.g., chatscope, stream-chat-react)
- Responsive design effort: Document layout needs careful mobile adaptation
- Branding dependency: Color scheme and typography tied to Novation's design decisions
Neutral
- Backend API unchanged (same WebSocket streaming protocol)
- Same response format (markdown with citations)
- Safety disclaimers still displayed
Alternatives Considered
Alternative 1: Standard Chat Bubble UI
Use a traditional chat interface with user/bot bubbles and avatars.
- Pros: Familiar pattern, many off-the-shelf libraries available
- Cons: Looks like a generic chatbot, does not match ZOL website design
- Why rejected: Stakeholders explicitly requested website-native appearance
Alternative 2: Single Q&A (No History)
Show only the latest question and answer, no conversation thread.
- Pros: Simplest UI, cleanest layout
- Cons: Loses conversation context, users cannot reference previous answers
- Why rejected: Multi-turn conversation is a core requirement for follow-up questions