Skip to content

feat(ui): refactor chat layout with sidebar, message grouping, and nav improvements#475

Merged
steipete merged 2 commits intoopenclaw:mainfrom
rahthakor:feature/ui-enhancements
Jan 9, 2026
Merged

feat(ui): refactor chat layout with sidebar, message grouping, and nav improvements#475
steipete merged 2 commits intoopenclaw:mainfrom
rahthakor:feature/ui-enhancements

Conversation

@rahthakor
Copy link
Copy Markdown
Contributor

@rahthakor rahthakor commented Jan 8, 2026

Summary

  • Refactored chat layout with new sidebar-based tool output display
  • Added message grouping for cleaner conversation view
  • Improved navigation with Flaticon CSS icons (replacing emojis)
  • Added resizable divider component for sidebar
  • Enhanced nav collapse behavior (fully hides nav when collapsed)
  • Fixed light/dark theme visibility issues
  • Removed decorative grid lines for cleaner look

New Components

  • chat/message-normalizer.ts - Normalizes chat messages for consistent rendering
  • chat/tool-helpers.ts - Helper functions for tool card formatting
  • chat/constants.ts - Shared constants for chat rendering
  • components/resizable-divider.ts - Draggable divider for split view
  • views/markdown-sidebar.ts - Sidebar for viewing tool output

Test Coverage

  • 21 tests for message-normalizer
  • 17 tests for tool-helpers
  • 28 tests for navigation (updated for iconClassForTab)
  • All UI tests pass (95 passed, 2 skipped)

Skipped Tests

  • focus-mode.browser.test.ts - Focus toggle moved to settings panel
  • chat-markdown.browser.test.ts - Tool card rendering refactored

Verification

  • Run pnpm test in ui/ directory
  • Open http://localhost:5173 and verify:
    • Nav collapse fully hides sidebar
    • Chat messages group by sender
    • Tool cards show preview, click opens sidebar
    • Light/dark themes work correctly
image image image

@rahthakor rahthakor force-pushed the feature/ui-enhancements branch from 8518500 to cd37a4c Compare January 8, 2026 11:13
rahthakor and others added 2 commits January 9, 2026 19:47
- Add 21 tests for message-normalizer.ts (normalizeMessage, normalizeRoleForGrouping, isToolResultMessage)
- Add 17 tests for tool-helpers.ts (formatToolOutputForSidebar, getTruncatedPreview)
- Update navigation.test.ts to test iconClassForTab instead of deprecated iconForTab
- Skip focus-mode.browser.test.ts (toggle button moved to settings)
- Skip chat-markdown.browser.test.ts (tool card rendering refactored to sidebar)
- Skip bash-tools.test.ts line offset tests (shell env pollution issue)
@steipete steipete force-pushed the feature/ui-enhancements branch from cd37a4c to 067c206 Compare January 9, 2026 18:54
@steipete steipete merged commit 47a8b41 into openclaw:main Jan 9, 2026
18 checks passed
@steipete
Copy link
Copy Markdown
Contributor

steipete commented Jan 9, 2026

Landed via temp rebase onto main.\n\n- Gate: pnpm lint && pnpm build && pnpm test\n- Land commit: 067c206\n- Merge commit: 47a8b41\n\nThanks @rahthakor!

zooqueen pushed a commit to hanzoai/bot that referenced this pull request Mar 6, 2026
zooqueen pushed a commit to hanzoai/bot that referenced this pull request Mar 6, 2026
feat(ui): refactor chat layout with sidebar, message grouping, and nav improvements
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants