Skip to content

CHAT_UI_MOCKUP.md

Latest commit

 

History

History
155 lines (139 loc) · 11.9 KB

CHAT_UI_MOCKUP.md

File metadata and controls

155 lines (139 loc) · 11.9 KB

Chat Window UI Mockup

Full Chat Window Interface

╔════════════════════════════════════════════════════════════════════╗
║                         Group: Project Team                         ║
║                                                                     ║
║  ┌─────────┬──────────┬──────────────┬─────────────┐              ║
║  │  Chat   │ Members  │ Commitments  │ Liabilities │              ║
║  └─────────┴──────────┴──────────────┴─────────────┘              ║
║                                                                     ║
║  ┌─────────────────────────────────────────────────────────────┐  ║
║  │                     Messages Area                            │  ║
║  │                                                              │  ║
║  │  ┌────────────────────────────────────────────────────┐    │  ║
║  │  │ 👤 Alice: "Hello everyone!"                       │    │  ║
║  │  │ 10:15 AM                                          │    │  ║
║  │  └────────────────────────────────────────────────────┘    │  ║
║  │                                                              │  ║
║  │          ┌────────────────────────────────────────────┐    │  ║
║  │          │ 👤 Bob: "Hi Alice!"                       │    │  ║
║  │          │ 10:16 AM                                  │    │  ║
║  │          └────────────────────────────────────────────┘    │  ║
║  │                                                              │  ║
║  │  ┌────────────────────────────────────────────────────┐    │  ║
║  │  │ 👤 Alice: "I'll help if someone does something"   │    │  ║
║  │  │ 10:17 AM                                          │    │  ║
║  │  └────────────────────────────────────────────────────┘    │  ║
║  │                                                              │  ║
║  │  ╔══════════════════════════════════════════════════════╗  │  ║
║  │  ║ 🔒 System (Private) [Clarification Needed]         ║  │  ║
║  │  ║ Could you clarify who needs to do what and how     ║  │  ║
║  │  ║ much you'll contribute?                            ║  │  ║
║  │  ║ 10:17 AM                                           ║  │  ║
║  │  ╚══════════════════════════════════════════════════════╝  │  ║
║  │  ⚠️  Yellow/warning background - PRIVATE message             │  ║
║  │                                                              │  ║
║  │  ┌────────────────────────────────────────────────────┐    │  ║
║  │  │ 👤 Alice: "If Bob does 5h work, I'll do 3h"       │    │  ║
║  │  │ 10:18 AM                                          │    │  ║
║  │  └────────────────────────────────────────────────────┘    │  ║
║  │                                                              │  ║
║  │         ┌──────────────────────────────────────────┐        │  ║
║  │         │ 📝 SYSTEM MESSAGE                        │        │  ║
║  │         │ New commitment detected:                 │        │  ║
║  │         │ If Bob completes ≥5 hours of work,       │        │  ║
║  │         │ then Alice will complete ≥3 hours of work│        │  ║
║  │         │                                          │        │  ║
║  │         │ [View in Commitment Panel →]             │        │  ║
║  │         │ 10:18 AM                                 │        │  ║
║  │         └──────────────────────────────────────────┘        │  ║
║  │                                                              │  ║
║  │         ┌──────────────────────────────────────────┐        │  ║
║  │         │ ⚖️  SYSTEM MESSAGE                        │        │  ║
║  │         │ Liability Update:                        │        │  ║
║  │         │ • New: work - 3 hours                    │        │  ║
║  │         │ 10:18 AM                                 │        │  ║
║  │         └──────────────────────────────────────────┘        │  ║
║  │                                                              │  ║
║  └─────────────────────────────────────────────────────────────┘  ║
║                                                                     ║
║  ┌─────────────────────────────────────────────────────────────┐  ║
║  │ 👥 Sending to group (visible to all members)               │  ║
║  ├─────────────────────────────────────────────────────────────┤  ║
║  │ ┌─────────────────────────────────────────────────┐        │  ║
║  │ │ Type a message...                               │ [Send] │  ║
║  │ └─────────────────────────────────────────────────┘        │  ║
║  └─────────────────────────────────────────────────────────────┘  ║
║                                                                     ║
║  💡 Tip: Express commitments naturally. AI will detect them.       ║
╚════════════════════════════════════════════════════════════════════╝

Key Visual Elements

1. Public Messages (User)

  • Regular chat bubbles
  • Blue background for own messages (right-aligned)
  • Gray background for others' messages (left-aligned)
  • Username and timestamp visible

2. Private Messages (System → User)

╔══════════════════════════════════════════════════════╗
║ 🔒 System (Private) [Clarification Needed]         ║
║ Message content here...                            ║
║ Timestamp                                          ║
╚══════════════════════════════════════════════════════╝
  • Yellow/warning background (warning.light)
  • Thick left border (borderLeft: '4px solid', borderLeftColor: 'warning.main')
  • (Private) label clearly visible
  • [Clarification Needed] chip/badge
  • Only visible to the targeted user

3. System Messages (Public)

┌──────────────────────────────────────────┐
│ 📝/⚖️ SYSTEM MESSAGE                      │
│ Content centered and badged              │
│ Timestamp                                │
└──────────────────────────────────────────┘
  • Centered in the chat
  • Icon badge (📝 for commitments, ⚖️ for liabilities)
  • Different background color (primary.light or info.light)
  • Visible to all group members

4. Message Input Area

┌─────────────────────────────────────────────────────────────┐
│ 👥 Sending to group (visible to all members)               │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐        │
│ │ Type a message...                               │ [Send] │
│ └─────────────────────────────────────────────────┘        │
└─────────────────────────────────────────────────────────────┘
  • Clear indicator that messages are public
  • Group icon (👥) for visibility
  • Send button

Privacy in Action

Scenario: Alice Gets Private Clarification

Alice's view:

  • Sees her message: "I'll help if someone does something"
  • Sees yellow private message from system
  • Can respond

Bob's view (same group):

  • Sees Alice's message: "I'll help if someone does something"
  • Does NOT see the yellow private clarification
  • Sees Alice's next response: "If Bob does 5h work, I'll do 3h"
  • Sees system commitment and liability messages

Result: Bob has no idea that Alice received a clarification request. The conversation appears seamless to him.

Color Coding

Message Type Background Border Visibility
User message (own) Blue (primary.main) None All members
User message (others) Gray (grey.100) None All members
Private clarification Yellow (warning.light) Yellow thick Target user only
System commitment Light primary None All members
System liability Light info None All members

Implementation Files

  • Backend filtering: backend/src/routes/messages.ts (lines 140-146)
  • Frontend rendering: frontend/src/components/ChatWindow.tsx (lines 141-177)
  • Message types: backend/prisma/schema.prisma (Message model)