metis: Skill for Claude Code

Conversation UX Patterns

Production-ready UX patterns for managing complex conversational interfaces including multi-thread management, branching conversations, and context switching.

Overview

Conversation UX patterns for:

• Multi-conversation management
• Thread branching and navigation
• Context switching strategies
• History organization
• Session persistence

Reference Documentation

Multi-Conversation Patterns

• multi-conversation-patterns - Lark-style conversation UX
  • Research insights
  • Design patterns
  • Implementation strategies
  • Navigation patterns

Quick Patterns

Conversation List Structure

class ConversationList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return ConversationTile(
          title: conversation.title,
          preview: conversation.lastMessage,
          timestamp: conversation.updatedAt,
          unreadCount: conversation.unreadCount,
          isPinned: conversation.isPinned,
          avatar: conversation.avatar,
        );
      },
    );
  }
}

Branching Conversation Model

class Conversation {
  final String id;
  final String? parentId;        // null for root conversations
  final List<Message> messages;
  final DateTime createdAt;
  final String title;
  final ConversationState state;

  // Branch from a specific message
  Conversation branch(Message fromMessage) {
    return Conversation(
      parentId: this.id,
      branchPoint: fromMessage.id,
      messages: [fromMessage.copy()], // Copy message as new root
    );
  }
}

Context Switching Pattern

class ConversationProvider extends ChangeNotifier {
  Conversation? _active;
  final List<Conversation> _recent = [];

  void switchTo(Conversation conversation) {
    if (_active != null) {
      _addToRecent(_active!);
    }
    _active = conversation;
    notifyListeners();
  }

  // Quick switch maintains context
  void quickSwitch(int recentIndex) {
    if (recentIndex < _recent.length) {
      final target = _recent[recentIndex];
      _recent.removeAt(recentIndex);
      switchTo(target);
    }
  }
}