Chat Bubbles & History

• Assistant Style

  • Focused interface highlighting current interaction with clean minimal interface to focus user attention and reduced distractions.

• Classic Chat Style

  • Traditional messaging interface with full history visible, easy message reference, familiar chat experience.

Visual Comparison Details

Feature	Assistant Style	Classic Chat Style
Message History	Hidden by default, scrollable	Always visible
Focus	Current interaction only	Full conversation
Loading Indicator	Full-screen overlay	Inline with messages
Screen Space	Maximizes content area	Fixed message list
User Experience	Step-by-step guidance	Conversational flow

When to Use Assistant Style

• Guided workflows: Step-by-step processes like form filling or troubleshooting

• Simple queries: Quick questions that don't require conversation history

• Mobile experiences: Limited screen space benefits from focused interface

• Task completion: When users need to focus on one thing at a time

When to Use Classic Chat Style

• Support conversations: When users need to reference previous messages

• Complex discussions: Multi-turn conversations with context dependencies

• Documentation queries: When users might need to scroll back for information

• Familiar experience: When users expect traditional chat interfaces

Configuration Quick Reference

Property	Type	Default	Description
chatMode	boolean	false	false = Assistant style, true = Classic chat
userMessageBubble	boolean	false	Add bubble styling to user messages
agentMessageBubble	boolean	false	Add bubble styling to agent messages

Note: Message bubble settings work with both chat modes but have different visual effects in each mode.

Assistant Style (Default)

The Assistant Style provides a focused experience where only the latest application message is prominently displayed. This creates a clean interface that directs the user's attention to the most recent information or question, while still allowing them to scroll up to view conversation history.

Example Assistant Configuration

To implement the default Assistant Style, you can either omit the chatMode parameter or explicitly set it to false:

const touchpointOptions = {
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
  chatMode: false, // Explicitly set to false or omit (default is false)
  // Add other common options like theme, brandIcon etc. if needed
  theme: {
    fontFamily: '"Neue Haas Grotesk", sans-serif',
    accent: "#AECAFF",
  },
};

const touchpoint = await create(touchpointOptions);

Example Assistant Configuration with message bubbles

To add message bubbles to the Assistant Style:

const touchpointOptions = {
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
  chatMode: false, // Assistant style
  userMessageBubble: true, // Display user messages in bubbles
  agentMessageBubble: true, // Display agent messages in bubbles
  theme: {
    fontFamily: '"Neue Haas Grotesk", sans-serif',
    accent: "#AECAFF",
  },
};

const touchpoint = await create(touchpointOptions);

Classic Chat Style

The Classic Chat Style provides a traditional messaging interface where all messages stack chronologically and remain visible. This creates a more conventional chat experience that many users are already familiar with from messaging apps.

Example Classic Chat Configuration

To implement the Classic Chat Style, set the chatMode parameter to true:

const touchpointOptions = {
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
  chatMode: true, // Enable classic chat mode
  // Add other common options like theme, brandIcon etc. if needed
  theme: {
    fontFamily: '"Arial", sans-serif',
    accent: "rgb(40, 167, 69)", // Example green accent
  },
};

const touchpoint = await create(touchpointOptions);

Example Classic Chat Configuration with message bubbles

To enable message bubbles in Classic Chat Style for a more traditional messaging look:

const touchpointOptions = {
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
  chatMode: true, // Enable classic chat mode
  userMessageBubble: true, // Display user messages in bubbles
  agentMessageBubble: true, // Display agent messages in bubbles
  theme: {
    fontFamily: '"Arial", sans-serif',
    accent: "rgb(40, 167, 69)", // Example green accent
  },
};

const touchpoint = await create(touchpointOptions);