Chat Suggestions

The ChatSuggestions component renders clickable suggestion chips that help users start or continue conversations with pre-defined prompts.

Overview

The ChatSuggestions component provides:

Clickable suggestion chips
Custom rendering support
Automatic click handling
Responsive layout
Easy integration with chat input

Basic Usage

Display a list of suggestions:


import { ChatSuggestions } from 'reachat';
 
const suggestions = [
  { id: '1', content: 'Explain quantum computing' },
  { id: '2', content: 'Write a Python function' },
  { id: '3', content: 'Help me debug this code' }
];
 
<ChatSuggestions
  suggestions={suggestions}
  onSuggestionClick={(content) => {
    console.log('Clicked:', content);
  }}
/>

Using with Chat

Place <ChatSuggestions> inside <SessionMessagePanel> between <SessionMessages> and <ChatInput>. Clicking a chip fires onSuggestionClick, where you can forward the prompt to your message handler.


<Chat sessions={sessions} activeSessionId={activeId} viewType="chat">
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages />
    <ChatSuggestions
      suggestions={[
        { id: '1', content: 'Explain how React works' },
        { id: '2', content: 'Write a sorting algorithm' },
        { id: '3', content: 'Review my code' }
      ]}
      onSuggestionClick={handleSendMessage}
    />
    <ChatInput />
  </SessionMessagePanel>
</Chat>

Dynamic Suggestions

Generate suggestions based on context:


import { useState, useEffect } from 'react';
import { ChatSuggestions } from 'reachat';
 
function ContextualSuggestions({ conversationHistory }) {
  const [suggestions, setSuggestions] = useState([]);
 
  useEffect(() => {
    // Generate suggestions based on conversation context
    if (conversationHistory.length === 0) {
      setSuggestions([
        { id: '1', content: 'What can you help me with?' },
        { id: '2', content: 'Tell me about your capabilities' },
        { id: '3', content: 'Show me examples' }
      ]);
    } else {
      // Context-aware suggestions
      setSuggestions([
        { id: '1', content: 'Tell me more about that' },
        { id: '2', content: 'Can you explain differently?' },
        { id: '3', content: 'Show me an example' }
      ]);
    }
  }, [conversationHistory]);
 
  return (
    <ChatSuggestions
      suggestions={suggestions}
      onSuggestionClick={handleSuggestionClick}
    />
  );
}

Custom Rendering

Customize the appearance of suggestion chips:


import { ChatSuggestions } from 'reachat';
 
<ChatSuggestions
  suggestions={suggestions}
  onSuggestionClick={handleClick}
>
  {({ suggestion, onClick }) => (
    <button
      onClick={onClick}
      style={{
        padding: '12px 16px',
        borderRadius: '8px',
        border: '1px solid #333',
        backgroundColor: '#1a1a1a',
        color: '#fff',
        cursor: 'pointer',
        transition: 'all 0.2s'
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = '#2a2a2a';
        e.currentTarget.style.borderColor = '#555';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = '#1a1a1a';
        e.currentTarget.style.borderColor = '#333';
      }}
    >
      {suggestion.content}
    </button>
  )}
</ChatSuggestions>

Integration Patterns

Empty State Suggestions

Show suggestions when there are no messages:


import { Chat, ChatSuggestions, SessionMessages } from 'reachat';
 
<Chat sessions={sessions} activeSessionId={activeId}>
  <SessionMessagePanel>
    <SessionMessages>
      {(conversations) => (
        <>
          {conversations.length === 0 && (
            <div className="empty-state">
              <h2>Start a conversation</h2>
              <ChatSuggestions
                suggestions={[
                  { id: '1', content: 'How do I get started?' },
                  { id: '2', content: 'Show me examples' },
                  { id: '3', content: 'What features are available?' }
                ]}
                onSuggestionClick={startConversation}
              />
            </div>
          )}
          {conversations.map(conv => (
            <SessionMessage key={conv.id} conversation={conv} />
          ))}
        </>
      )}
    </SessionMessages>
    <ChatInput />
  </SessionMessagePanel>
</Chat>

Follow-up Suggestions

Display suggestions after each response:


import { useState } from 'react';
import { ChatSuggestions } from 'reachat';
 
function MessageWithSuggestions({ message, onSuggestionClick }) {
  const followUpSuggestions = [
    { id: '1', content: 'Tell me more' },
    { id: '2', content: 'Show me an example' },
    { id: '3', content: 'How does this work?' }
  ];
 
  return (
    <div>
      <div className="message-content">
        {message.response}
      </div>
      <ChatSuggestions
        suggestions={followUpSuggestions}
        onSuggestionClick={onSuggestionClick}
      />
    </div>
  );
}

Category-Based Suggestions

Organize suggestions by category:


const suggestionsByCategory = {
  'Getting Started': [
    { id: '1', content: 'What is reachat?' },
    { id: '2', content: 'How do I install it?' }
  ],
  'Features': [
    { id: '3', content: 'Show me chart examples' },
    { id: '4', content: 'How do mentions work?' }
  ],
  'Help': [
    { id: '5', content: 'View documentation' },
    { id: '6', content: 'Get support' }
  ]
};
 
<div>
  {Object.entries(suggestionsByCategory).map(([category, suggestions]) => (
    <div key={category} style={{ marginBottom: '24px' }}>
      <h3>{category}</h3>
      <ChatSuggestions
        suggestions={suggestions}
        onSuggestionClick={handleClick}
      />
    </div>
  ))}
</div>

Complete Example

Full integration with chat input:


import { useState } from 'react';
import { Chat, ChatSuggestions, ChatInput, SessionMessages } from 'reachat';
 
function ChatWithSuggestions() {
  const [sessions, setSessions] = useState([{
    id: '1',
    title: 'New Chat',
    createdAt: new Date('2024-01-15T10:00:00Z'),
    conversations: []
  }]);
 
  const suggestions = [
    { id: '1', content: 'Explain React hooks' },
    { id: '2', content: 'Write a REST API' },
    { id: '3', content: 'Debug my code' },
    { id: '4', content: 'Optimize performance' }
  ];
 
  const handleSuggestionClick = (content) => {
    // Add suggestion as a new message
    const newConversation = {
      id: Date.now().toString(),
      question: content,
      response: `Let me help you with: ${content}`,
      createdAt: new Date('2024-01-15T10:00:00Z')
    };
 
    setSessions(prev => prev.map(session =>
      session.id === '1'
        ? {
            ...session,
            conversations: [...session.conversations, newConversation]
          }
        : session
    ));
  };
 
  const handleSendMessage = (message) => {
    const newConversation = {
      id: Date.now().toString(),
      question: message,
      response: 'Response to your question...',
      createdAt: new Date('2024-01-15T10:00:00Z')
    };
 
    setSessions(prev =>
      prev.map(session =>
        session.id === '1'
          ? {
              ...session,
              conversations: [...session.conversations, newConversation]
            }
          : session
      )
    );
  };
 
  return (
    <Chat
      sessions={sessions}
      activeSessionId="1"
      viewType="chat"
      onSendMessage={handleSendMessage}
    >
      <SessionMessagePanel>
        <SessionMessagesHeader />
        <SessionMessages />
        <ChatSuggestions
          suggestions={suggestions}
          onSuggestionClick={handleSuggestionClick}
        />
        <ChatInput />
      </SessionMessagePanel>
    </Chat>
  );
}

API Reference

ChatSuggestionsProps

Name	Type	Default
`suggestions`	`Suggestion[]` Array of suggestions to display.
`className`	`string` Custom class name to apply to the container.
`onSuggestionClick`	`(suggestion: string) => void` Callback when a suggestion is clicked.
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Custom render function for each suggestion item. Receives the suggestion data and onClick handler.

Suggestion

See Suggestion in the API Models reference.

Custom Render Function

When using the children prop, you receive:


{
  suggestion: Suggestion; // The suggestion data
  onClick: () => void; // Pre-configured click handler
}

For more examples and interactive demos, visit the storybook demos .