Skip to main content

View as Markdown · AI documentation index

Interface: ConversationComponent

Defined in: packages/core/src/passages/story/types.ts:845

Component for displaying dialogue, conversations, or sequential messages. Supports different visual styles and progressive message reveal.

Example​

// All messages shown at once (default)
{
  type: 'conversation',
  content: [
    { content: 'Hello!', who: { name: 'NPC' }, side: 'left' },
    { content: 'Hi there!', who: { name: 'Player' }, side: 'right' }
  ]
}

// Progressive reveal - click to show next message
{
  type: 'conversation',
  appearance: 'byClick',
  content: [
    { content: 'Let me tell you a story...', side: 'left' },
    { content: 'It was a dark and stormy night...', side: 'left' },
    { content: 'When suddenly...', side: 'left' }
  ]
}

// Messenger-style conversation
{
  type: 'conversation',
  props: { variant: 'messenger' },
  content: [
    {
      content: 'Check out this new quest!',
      who: { name: 'Guild Master', avatar: '/guild.png' },
      side: 'left'
    },
    {
      content: 'I\'m interested!',
      who: { name: 'You' },
      side: 'right'
    }
  ]
}

Extends​

  • BaseComponent

Properties​

appearance?​

optional appearance: ConversationAppearance

Defined in: packages/core/src/passages/story/types.ts:869

Controls how messages are revealed to the player.

Default Value​

"atOnce"

Remarks​

  • "atOnce" - All messages visible immediately (default)
  • "byClick" - Messages appear one at a time when clicked
    • Creates a progressive storytelling effect
    • Click anywhere in the conversation area to reveal the next message
    • Useful for paced dialogue or dramatic reveals

content​

content: ConversationBubble[]

Defined in: packages/core/src/passages/story/types.ts:855

Array of conversation bubbles/messages to display. Order determines the sequence in which messages appear.

id?​

optional id: string

Defined in: packages/core/src/passages/story/types.ts:27

Optional unique identifier for this component. Can be used to reference or manipulate specific components programmatically.

Example​

{ type: 'text', id: 'intro-text', content: 'Welcome!' }

Inherited from​

BaseComponent.id

initialVariant?​

optional initialVariant: "display" | "hidden" | "disclosure"

Defined in: packages/core/src/passages/story/types.ts:42

Controls the initial visibility state of the component.

Remarks​

This property is designed for future UI implementation to support dynamic component visibility. Currently defined but not yet implemented in the UI layer.

  • "display" - Component is visible and rendered immediately (default behavior)
  • "hidden" - Component exists but is not visible initially
  • "disclosure" - Component is initially collapsed/hidden but can be expanded by user interaction

Default Value​

"display"

Inherited from​

BaseComponent.initialVariant

props?​

optional props: object

Defined in: packages/core/src/passages/story/types.ts:874

Optional configuration for visual style and layout.

className?​

optional className: string

CSS class name(s) to apply to the conversation container.

Example​
props: { className: 'my-8 p-4 bg-muted-50 rounded-lg' }

variant?​

optional variant: ConversationVariant

Visual style preset for the conversation.

Default Value​

"chat"

Remarks​

  • "chat" - Casual chat interface style

    • Rounded bubbles with colored backgrounds
    • Minimal shadows, compact layout
    • Good for informal conversations

  • "messenger" - Messaging app style (like SMS or WhatsApp)

    • Card-like bubbles with shadows
    • More pronounced visual separation
    • Professional appearance, good for important dialogues

type​

type: "conversation"

Defined in: packages/core/src/passages/story/types.ts:849

Discriminator property identifying this as a conversation component.