Agentic Design

Patterns
💭

Chat Interface Patterns(CIP)

Specialized chat interface patterns optimized for agent interactions, including message threading, context management, and rich content display

Complexity: highUI/UX & Human-AI Interaction

🎯 30-Second Overview

Pattern: Specialized chat interfaces optimized for agent interactions with threading, rich content, and collaborative features

Why: Enables complex multi-topic conversations, rich media sharing, and seamless human-AI collaboration

Key Insight: Threading + rich content + agent-specific features → enhanced conversational experiences

⚡ Quick Implementation

1Threading System:Conversation branching & merging logic
2Rich Content:Documents, code, images, interactive widgets
3Agent Features:Thinking indicators & source citations
4Collaboration:Real-time presence & message reactions
5Context Management:Thread preservation & summarization
Example: user_message → thread_routing → content_rendering → agent_response → context_update

📋 Do's & Don'ts

✅Support threaded conversations for topic exploration
✅Show agent thinking process with visual indicators
✅Integrate rich media (documents, code, images)
✅Provide source citations with expandable details
✅Enable message reactions and collaborative editing
❌Force linear conversation flow only
❌Hide agent reasoning process from users
❌Limit to text-only interactions
❌Lose context when switching between threads
❌Overwhelm with too many concurrent features

🚦 When to Use

Use When

  • • Team collaboration scenarios
  • • Customer support interactions
  • • Educational platform discussions
  • • Content creation workflows

Avoid When

  • • Simple query-response needs
  • • High-security environments
  • • Minimal UI requirements
  • • Single-user applications

📊 Key Metrics

Thread Engagement
Active branches per conversation
Content Interaction
Rich media usage & sharing rate
Collaboration Rate
Multi-participant conversation %
Context Retention
Thread switching without loss
User Satisfaction
Interface usability score
Problem Resolution
Time to solution in threaded chats

💡 Top Use Cases

Customer Support: threaded issue tracking, document sharing, escalation management
Educational Platforms: topic discussions, resource sharing, collaborative learning
Team Collaboration: project threads, code review, real-time brainstorming
Content Creation: draft collaboration, feedback threads, version discussions
Technical Support: troubleshooting threads, log analysis, solution documentation

References & Further Reading

Deepen your understanding with these curated resources

Design Patterns

Conversational UI Design Principles (Nielsen Norman Group)

Threading in Chat Applications - UX Patterns

Rich Content in Messaging - Material Design Guidelines

Agent Interface Design - Human-Computer Interaction Patterns

Implementation Guides

Slack Threading Architecture

Discord Rich Embeds and Interactions

Microsoft Teams Bot Framework

WhatsApp Business API - Rich Messages

Tools & Libraries

Stream Chat SDK - React Components

Matrix Protocol - Decentralized Chat

Rocket.Chat - Open Source Platform

Mattermost - Team Collaboration Platform

Community & Discussions

Chat Interface Design Community (Reddit)

Conversational UX Slack Community

UX Mastery - Chat Interface Articles

Chatbot Design Weekly Newsletter

Contribute to this collection

Know a great resource? Submit a pull request to add it.

Contribute

Patterns

closed

Loading...

Built by Kortexya