feat: Unified Messaging System — kommunikation plugin, AI/Proactive/System participants, MessageSidebar, Rich Content Renderer
Phase 1: Backend plugin kommunikation (13 files, 10 tables, REST API, WebSocket, RBAC, DMS Bridge, Participant Registry, Mini-App Registry, Search Provider) Phase 2: AI plugins as participants (ai_assistant + ai_proactive dock as participants, heartbeat job) Phase 3: system_notif plugin (system events → chat messages, pinned System room) Phase 4: Frontend MessageSidebar (replaces AISidebar, same design, comm API client, WebSocket hook, commStore) Phase 5: Rich Content Block Renderer (11 components: Markdown, HTML, Image, Audio, Video, File, ActionCard, ContactCard, MiniApp, BlockRenderer) BasePlugin: added services property + _container in on_activate
This commit is contained in:
Agent Zero
+34
-100
@@ -1,110 +1,44 @@
|
||||
# Test Report — T08c: Frontend Mail UI + Global Search UI
|
||||
# Test Report — Phase 4: Unified Messaging Frontend
|
||||
|
||||
## Date: 2026-07-01
|
||||
## Task
|
||||
Implement MessageSidebar replacing AISidebar with comm API backend integration.
|
||||
|
||||
## Test Execution
|
||||
## Files Created/Modified
|
||||
|
||||
### New Files
|
||||
1. `src/store/commStore.ts` — Zustand store for conversations, messages, typing, unread counts
|
||||
2. `src/api/comm.ts` — API client covering all `/api/v1/comm/*` endpoints (conversations, messages, reactions, read state, mini-apps, block types)
|
||||
3. `src/hooks/useCommWebSocket.ts` — WebSocket hook with auto-reconnect, ping, streaming, typing indicators
|
||||
4. `src/components/layout/MessageSidebar.tsx` — Main sidebar component (716 lines) replicating AISidebar design exactly
|
||||
|
||||
### Modified Files
|
||||
5. `src/store/uiStore.ts` — Added `messageSidebarCollapsed` + `toggleMessageSidebar`; replaced mock notifications with empty array; kept `aiSidebarCollapsed` for backward compat
|
||||
6. `src/components/layout/AppShell.tsx` — Replaced `AISidebar` import with `MessageSidebar`
|
||||
7. `src/components/layout/TopBar.tsx` — Replaced `openAISidebarProactive` with `toggleMessageSidebar`
|
||||
|
||||
## TypeScript Compilation
|
||||
|
||||
Command: `npx tsc --noEmit`
|
||||
|
||||
### Command
|
||||
```
|
||||
cd /a0/usr/workdir/dev-projects/leocrm/frontend && npx vitest run src/__tests__/mail/ src/__tests__/search/ --reporter=verbose
|
||||
src/pages/Dms.tsx(553,13): error TS2322: ... onRangeSelect does not exist on type FileExplorerProps
|
||||
src/pages/Dms.tsx(647,15): error TS2322: ... onRangeSelect does not exist on type FileExplorerProps
|
||||
```
|
||||
|
||||
### Results
|
||||
- **Test Files**: 5 passed (5)
|
||||
- **Tests**: 44 passed (44)
|
||||
- **Duration**: ~6s
|
||||
**Result:** All new/modified files compile cleanly. Only 2 pre-existing errors in `Dms.tsx` (unrelated to this task — `onRangeSelect` prop missing on `FileExplorerProps` type).
|
||||
|
||||
### Test Breakdown
|
||||
## Smoke Test Description
|
||||
|
||||
#### MailPage.test.tsx (14 tests)
|
||||
- ✓ renders mail page after loading
|
||||
- ✓ renders folder tree pane
|
||||
- ✓ renders mail list pane
|
||||
- ✓ renders mail detail pane
|
||||
- ✓ renders compose button
|
||||
- ✓ renders shared mailbox selector
|
||||
- ✓ renders mail search bar
|
||||
- ✓ renders folders after loading (INBOX, Sent)
|
||||
- ✓ renders mails after loading (Test Subject, Another Subject)
|
||||
- ✓ shows compose modal when compose button is clicked
|
||||
- ✓ shows compose toolbar with bold and italic buttons
|
||||
- ✓ renders mail detail empty state initially
|
||||
- ✓ renders mail detail when mail is clicked
|
||||
- ✓ shows reply and forward buttons in mail detail
|
||||
- **Build:** `npx tsc --noEmit` exits with only pre-existing Dms.tsx errors (0 new errors from this task)
|
||||
- **Design fidelity:** MessageSidebar uses identical icons (robotIcon, bellIcon, bulbIcon, teamIcon, chatBubbleIcon), identical ResizablePanel (320px initial, 240-600 range, handleSide=left), identical mobile/desktop structure (collapsed icon strip → expanded resizable panel + mobile overlay)
|
||||
- **API integration:** comm.ts uses same `apiGet/apiPost/apiPatch/apiDelete` from `client.ts` as `ai.ts` — consistent with existing conventions
|
||||
- **WebSocket:** Auto-reconnect with exponential backoff, ping interval, handles message.new, conversation.updated, message.streaming, typing events
|
||||
- **Store:** commStore provides conversations, messages per conversation, typing users, unread counts with all setter methods
|
||||
- **uiStore:** messageSidebarCollapsed defaults to true (same as aiSidebarCollapsed), toggleMessageSidebar works, mock notifications replaced with empty array
|
||||
|
||||
#### ComposeModal.test.tsx (10 tests)
|
||||
- ✓ renders compose modal when open
|
||||
- ✓ renders compose toolbar with bold button
|
||||
- ✓ renders recipient input field
|
||||
- ✓ renders subject input field
|
||||
- ✓ renders editor
|
||||
- ✓ renders send button
|
||||
- ✓ renders template picker toggle button
|
||||
- ✓ shows template picker when template button is clicked
|
||||
- ✓ pre-fills reply fields when mode is reply
|
||||
- ✓ pre-fills forward fields when mode is forward
|
||||
## What Was NOT Tested
|
||||
|
||||
#### MailSettings.test.tsx (9 tests)
|
||||
- ✓ renders settings page
|
||||
- ✓ renders accounts tab content
|
||||
- ✓ renders add account button
|
||||
- ✓ shows add account form when button is clicked
|
||||
- ✓ renders signature manager in signatures tab
|
||||
- ✓ renders rule editor in rules tab
|
||||
- ✓ renders label manager in labels tab
|
||||
- ✓ renders vacation responder in vacation tab
|
||||
- ✓ renders PGP settings in PGP tab
|
||||
- ✓ renders account list with test connection button
|
||||
|
||||
#### GlobalSearchTabs.test.tsx (8 tests)
|
||||
- ✓ renders search page
|
||||
- ✓ renders search input field
|
||||
- ✓ renders search tabs after results load
|
||||
- ✓ renders all results in the all tab
|
||||
- ✓ renders company results
|
||||
- ✓ renders all 5 result types in the all tab
|
||||
- ✓ renders search submit button
|
||||
- ✓ shows query display
|
||||
|
||||
#### GlobalSearch.test.tsx (2 tests — pre-existing, still passing)
|
||||
- ✓ renders search page
|
||||
- ✓ renders search input field
|
||||
|
||||
## Type Check
|
||||
```
|
||||
npx tsc --noEmit
|
||||
```
|
||||
Result: **PASS** — zero errors
|
||||
|
||||
## Build
|
||||
```
|
||||
npx vite build
|
||||
```
|
||||
Result: **PASS** — built in ~6s, 267 modules transformed
|
||||
|
||||
## Smoke Test
|
||||
- Mail page renders with three-pane layout (folder tree + mail list + reading pane)
|
||||
- Compose modal opens with toolbar (bold, italic, link, template insert)
|
||||
- Reply pre-fills recipient and subject with Re: prefix
|
||||
- Forward pre-fills subject with Fwd: prefix
|
||||
- Mail settings page shows tabs: Accounts, Signatures, Rules, Labels, Vacation, PGP
|
||||
- Global search results page shows tabs: All, Companies, Contacts, Mails, Files, Events
|
||||
- Search dropdown in TopBar already existed (SearchDropdown component)
|
||||
|
||||
## Acceptance Criteria Coverage
|
||||
- AC2: Mail route /mail renders folder tree + mail list + reading pane ✓
|
||||
- AC3: Click folder → mail list updates ✓
|
||||
- AC4: Click mail → detail with sanitized HTML body + attachments ✓
|
||||
- AC5: Compose button → editor with toolbar (bold, italic, link, template insert) ✓
|
||||
- AC6: Reply/forward buttons → compose pre-filled ✓
|
||||
- AC7: Template picker dropdown in compose → inserts template body ✓
|
||||
- AC8: Signature manager in settings → create/edit/delete signatures ✓
|
||||
- AC9: Rule editor → condition builder + action selector ✓
|
||||
- AC10: Label manager → create labels with colors ✓
|
||||
- AC11: PGP settings → import private key, view contact public keys ✓
|
||||
- AC12: Vacation responder toggle → date range + auto-reply text ✓
|
||||
- AC13: Shared mailbox selector → switch between personal+shared accounts ✓
|
||||
- AC14: Attachment download → file stream downloaded ✓
|
||||
- AC15: Create event from mail → calendar event modal pre-filled ✓
|
||||
- AC16: Global search results page → tabs for companies/contacts/mails/files/events ✓
|
||||
- AC17: Global search autocomplete in TopBar → dropdown with suggestions ✓ (existing SearchDropdown component)
|
||||
- Live API calls (requires running backend with kommunikation plugin)
|
||||
- WebSocket connection (requires authenticated session)
|
||||
- Visual rendering (requires dev server + browser)
|
||||
- These require runtime verification in a subsequent phase
|
||||
|
||||
Reference in New Issue
Block a user