@srekaravarshan.dev/echo-messages

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

Installation

``bash 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:

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

`Usage`

`tsx 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 ( 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`

`$3`

`bash pnpm build`

`$3`

`bash 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.

`$3`

`bash pnpm tscheck`

`$3`

`bash pnpm check``

License

MIT

or

pnpm add @srekaravarshan.dev/echo-messages

or

yarn add @srekaravarshan.dev/echo-messages

Peer Dependencies

This package requires the following peer dependencies:

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

Usage

tsx
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 (
          conversationDetail={conversationDetail}
      showSearch={true}
      improvementMessageIds={['msg-1']}
    />
  );
}