@srekaravarshan.dev/echo-messages

React message list component for conversational interfaces with TypeScript and Stitches support.

Installation

npm install @srekaravarshan.dev/echo-messages
# or
pnpm add @srekaravarshan.dev/echo-messages
# or
yarn add @srekaravarshan.dev/echo-messages

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "@sparrowengg/twigs-react": "*",
  "@sparrowengg/twigs-react-icons": "*",
  "@stitches/react": "*"
}

Usage

import { DetailsBody } from '@srekaravarshan.dev/echo-messages';

function MyComponent() {
  const conversationDetail = {
    id: '123',
    messages: {
      '2024-01-01': [
        {
          id: 'msg-1',
          role: 'user',
          content: 'Hello!',
          createdAt: '2024-01-01T10:00:00Z',
        },
        {
          id: 'msg-2',
          role: 'system',
          content: {
            ui_to_show: [
              {
                id: 'ui-1',
                ui_item: 'message',
                ui_meta: { message: 'Hi there!' },
              },
            ],
          },
          createdAt: '2024-01-01T10:00:05Z',
        },
      ],
    },
    isConversationCompleted: false,
    contactDetails: {
      fullName: 'John Doe',
    },
  };

  return (
    <DetailsBody
      conversationDetail={conversationDetail}
      showSearch={true}
      improvementMessageIds={['msg-1']}
    />
  );
}

Features

• 📝 Full TypeScript support
• 🎨 Stitches CSS-in-JS styling
• 💬 Agent and user message rendering
• 🎯 Interactive message types (NPS, ratings, multiple choice, etc.)
• ⚡ Tree-shakable
• 🧪 Fully tested

Interactive Message Types

Supports various interactive message types:

• NPS, Opinion, CES (number scales)
• Multiple Choice
• Rating (stars)
• CSAT (emoji feedback)
• Buttons
• File display and collection

Development

Building

pnpm build

Testing

pnpm test

Note: Component rendering tests are limited due to Stitches/jsdom compatibility issues. Full integration tests should be performed in the consuming application with a real browser environment.

Type Checking

pnpm tscheck

Linting

pnpm check

License

MIT