feat(ui): add chat UI components for Fidus Memory #39
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add three new chat components to @fidus/ui package: - MessageBubble: Individual chat message with role-based alignment (user right, assistant left), avatar, timestamp, and suggestion chips for learned preferences - ChatInterface: Complete chat layout with message list, auto-scroll, textarea input, and Enter/Shift+Enter handling - ConfidenceIndicator: Visual ML confidence score display with color-coded badges and progress bars (minimal and detailed variants) Implementation details: - Uses CVA (class-variance-authority) for component variants - Tailwind CSS for styling (matching existing @fidus/ui patterns) - Zod schemas for runtime prop validation - TypeScript strict mode (no any types) - React forwardRef for all components - Comprehensive test coverage (72 tests, all passing) - Accessibility: ARIA labels, keyboard navigation, semantic HTML Components exported from @fidus/ui package and documented in README. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive documentation pages for three new chat components: - Message Bubble: Chat message with role-based alignment, avatar, timestamp, and AI suggestion chips - Chat Interface: Complete chat layout with message list, auto-scroll, and textarea input - Confidence Indicator: ML confidence score display with color-coded badges and progress bars Documentation includes: - Interactive examples with ComponentPreview - Complete props tables - Usage guidelines (when to use, best practices, accessibility) - Do's and Don'ts sections with visual examples - Related components links - External resources (GitHub, ARIA, Nielsen Norman Group) Added new "Chat" section to design system navigation with links to all three components. Follows COMPONENT_PAGE_TEMPLATE.md standards: - Uses @fidus/ui components (Link, Stack) - Spacing tokens (gap-md, p-lg, space-y-sm) - Color tokens (text-success, text-error, text-muted-foreground) - transition-colors duration-normal - All links use Link component with proper variants 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…examples in MessageBubble page - Add interactive ChatInterface example to MessageBubble documentation - Show live chat with coffee preference detection and AI suggestions - Add comprehensive ConfidenceIndicator explanation with color-coded levels - Update Related Components section with 4-column layout prioritizing integration - Demonstrate full integration of all three chat components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…tor page Shows how ConfidenceIndicator is used in context with ChatInterface: - Interactive chat example with cappuccino (92% green) and tea (68% blue) detection - Visual explanation of confidence levels and color coding - Demonstrates real-world usage in AI suggestion flows 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…le examples in ConfidenceIndicator page Shows ConfidenceIndicator in real context with correct Fidus UI styling: - High confidence (92% green): cappuccino example - Medium confidence (68% blue): green tea example - Low confidence (42% yellow): croissant example - Uses MessageBubble component from @fidus/ui - Static examples instead of interactive chat 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…amples Replace standalone ConfidenceIndicator examples with MessageBubble examples to show component in proper context: - Variants section now shows minimal/detailed within MessageBubble - Sizes section demonstrates size options in suggestions - Confidence Levels table updated with descriptions - Do's and Don'ts section emphasizes using within MessageBubble - Removed Stack import (no longer needed) All examples now reflect how ConfidenceIndicator is actually used in the Fidus system - always within MessageBubble suggestion chips. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…icator docs The Suggestion type doesn't support a 'variant' property - that's only available on standalone ConfidenceIndicator components. Updated the detailed variant section to show proper usage as a standalone component in settings/detailed views, not within MessageBubble suggestions. Fixes Vercel build error: "variant does not exist in type Suggestion" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…ples The Suggestion type doesn't support size or variant properties. These are only available on standalone ConfidenceIndicator components. Updated Sizes section to show standalone ConfidenceIndicator examples instead of trying to use size within MessageBubble suggestions. Fixes local build error: "size does not exist in type Suggestion" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
BREAKING CHANGE: MessageBubble now automatically renders ConfidenceIndicator badges based on the confidence value in suggestions. No manual setup needed. Changes: - MessageBubble now imports and uses ConfidenceIndicator component - Suggestion chips display color-coded confidence badges automatically - Updated documentation to clarify automatic integration - Simplified ConfidenceIndicator docs with clear "Automatic" vs "Standalone" sections - Removed confusing examples that suggested manual setup Documentation improvements: - Clear explanation that ConfidenceIndicator appears automatically - Separated "Automatic Integration" (MessageBubble) from "Standalone Usage" (advanced) - Updated usage guidelines to emphasize automatic behavior - Simplified Do's and Don'ts to match actual usage pattern 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…ace and MessageBubble BREAKING CHANGE: Component internal structure updated ## Changes ### MessageBubble Component - Replaced all manual `<div className="flex...">` with `<Stack>` components - Removed unused `messageBubbleVariants` CVA since Stack handles layout - Added Stack import from `@fidus/ui` - Updated spacing to use design tokens (gap-sm, gap-xs) - Preserved all functionality and accessibility features ### ChatInterface Component - Replaced all styled divs with Stack components - Updated spacing to use design tokens (p-md, gap-md, gap-sm) - Changed hardcoded CSS spacing values to tokens - Textarea now uses p-md instead of p-3 - Added Stack import from `@fidus/ui` ### Documentation - Updated ChatInterface examples to use Fidus logo (/logo.svg) for AI avatar - All AI responses now show the Fidus logo instead of just fallback text ### Tests - Fixed MessageBubble test to check for separate confidence indicator rendering - Now checks for suggestion text and confidence percentage separately - All 42 tests passing (21 MessageBubble + 21 ChatInterface) ## Benefits - 100% Fidus UI components, no styled divs - Consistent spacing using design tokens - Better maintainability - Follows design system guidelines Fixes user feedback: "prüfe auch MessageBubble und ChatInterface 100% fidus/ui Komponenten verwenden und keine gestylten divs" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…nd ConfidenceIndicator pages ## Changes ### MessageBubble Documentation - Updated all AI message examples to use `/logo.svg` for avatar - Interactive chat example now shows Fidus logo - Static examples (highConfidence, mediumConfidence, lowConfidence) now use logo - All nested AI responses (accept/reject callbacks) now use logo ### ConfidenceIndicator Documentation - Updated all AI message examples to use `/logo.svg` for avatar - High, medium, and low confidence examples now show Fidus logo - Consistent branding across all chat component documentation ## Benefits - Consistent brand identity across all documentation - Users see the actual Fidus logo in examples - Better visual representation of the AI assistant 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
swherden
added a commit
that referenced
this pull request
Nov 6, 2025
…for v1.2.0 Add comprehensive release notes page documenting @fidus/ui v1.2.0 release: **New Release Notes Page:** - Created `/getting-started/releases` page with detailed version history - v1.2.0: Chat UI components (MessageBubble, ChatInterface, ConfidenceIndicator) - v1.2.0: OpportunityCard privacy badges enhancement - v1.2.0: Build improvements for react-markdown and remark-gfm - Complete technical details (72 tests, Zod schemas, accessibility support) - Links to PR #45, PR #39, and NPM packages **Documentation Updates:** - Updated Design System README with v1.2.0 features - Added "Chat UI Components" and "Release Notes" to features list - Updated homepage with v1.2.0 announcement in "Recent Updates" section - Added Release Notes link to sidebar navigation **Testing:** - All lint and typecheck passes - No Mermaid diagram errors Related: PR #45, PR #39 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
swherden
added a commit
that referenced
this pull request
Nov 6, 2025
…res (#51) * docs(design-system): add Release Notes page and update documentation for v1.2.0 Add comprehensive release notes page documenting @fidus/ui v1.2.0 release: **New Release Notes Page:** - Created `/getting-started/releases` page with detailed version history - v1.2.0: Chat UI components (MessageBubble, ChatInterface, ConfidenceIndicator) - v1.2.0: OpportunityCard privacy badges enhancement - v1.2.0: Build improvements for react-markdown and remark-gfm - Complete technical details (72 tests, Zod schemas, accessibility support) - Links to PR #45, PR #39, and NPM packages **Documentation Updates:** - Updated Design System README with v1.2.0 features - Added "Chat UI Components" and "Release Notes" to features list - Updated homepage with v1.2.0 announcement in "Recent Updates" section - Added Release Notes link to sidebar navigation **Testing:** - All lint and typecheck passes - No Mermaid diagram errors Related: PR #45, PR #39 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * docs(design-system): add comprehensive Privacy Badges documentation for OpportunityCard v1.2.0 Add detailed documentation for the v1.2.0 privacy badges enhancement: **New Documentation Section: "Privacy Badges (v1.2.0)"** - Single privacy badge example (basic usage) - Multiple privacy badges example (array support) - Privacy badges with tooltips example (new tooltip feature) - Privacy badge types reference guide with 6 common patterns **Examples Include:** 1. **Single Badge**: Simple local processing indicator 2. **Multiple Badges**: Combined local + cloud data sources 3. **Tooltips**: Smart home example with 3 badges (Local, AI, Real-time) - Each badge has descriptive tooltip on hover - Demonstrates full v1.2.0 capability **Privacy Badge Type Reference:** - 🔒 Local: Local processing, no cloud upload - 🌐 Cloud: External API or cloud service - 🤖 AI: AI/ML model (on-device or cloud) - ⚡ Real-time: Real-time sensor or API data - 🔐 Encrypted: End-to-end encryption - 👤 Personal: Sensitive personal information **Visual Design:** - 2-column grid layout for badge type cards - Each card shows icon, label, name, and description - Consistent styling with design system tokens This comprehensive documentation demonstrates the full power of the v1.2.0 privacy badges enhancement and provides clear guidance for developers. Related: PR #45 (@fidus/ui v1.2.0) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(design-system): add required padding prop to Container in releases page * chore: extend Mermaid check to all markdown files and fix CLAUDE.md example * fix(design-system): correct Stack and Badge props in releases page - Change direction='column' to direction='vertical' - Change direction='row' to direction='horizontal' - Change gap to spacing prop - Change Badge variant='secondary' to variant='info' - Remove Link variant='primary' (not supported) --------- Co-authored-by: Claude <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds three new chat components to the
@fidus/uipackage for the Fidus Memory prototype:Changes
UI Components (
packages/ui/)Implementation:
Tests:
Design System Documentation (
packages/design-system/)Added comprehensive documentation pages following
COMPONENT_PAGE_TEMPLATE.md:/components/message-bubble- Interactive examples, props table, usage guidelines, do's/don'ts/components/chat-interface- Working chat demo, keyboard shortcuts, best practices/components/confidence-indicator- Confidence level table, size variants, accessibilityDocumentation features:
Added new "Chat" section to design system navigation.
Testing
Accessibility
Screenshots
MessageBubble Component
Shows user and assistant messages with role-based alignment and AI suggestion chips.
ChatInterface Component
Complete chat interface with auto-scroll, loading states, and empty state.
ConfidenceIndicator Component
Color-coded confidence levels (Very Confident, Confident, Learning, Uncertain).
Breaking Changes
None - these are new components.
Related Issues
Part of Fidus Memory prototype implementation.
Checklist
🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com