ChatInterface Component

The ChatInterface component offers extensive configuration options to customize behavior, appearance, and functionality.

Required Props

These props are required for the component to function:

projectId

string

required

Your Termix project identifier. You can find this in your Termix dashboard under project settings.

aiConfigId

string

required

AI configuration identifier that defines the model, prompts, and behavior settings for your AI assistant.

Authentication & API

Configure how the component connects to your backend services:

authorization

string

default:"undefined"

Authorization header value for API requests. Typically a Bearer token.Example: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

apiHeaders

Record<string, string>

default:"{}"

Additional headers to include with all API requests.

apiHeaders={{
  'X-API-Key': 'your-api-key',
  'X-Client-Version': '1.0.0'
}}

restExecuteHeader

Record<string, string>

default:"undefined"

Custom headers object for REST function execution.

restExecuteHeader={{ "X-API-Key": "secret", "Content-Type": "application/json" }}

UI Customization

Control the appearance and text of the chat interface:

personalityName

string

default:"undefined"

Optional override for personality name (overrides API config value).

placeholder

string

default:"Type your message..."

Placeholder text shown in the message input field.

Feature Toggles

Enable or disable specific functionality: Note: Knowledge base, function calls, ReAct pattern, and knowledge references are now enabled by default and cannot be disabled.

enableStreamingMode

boolean

default:"false"

Enable real-time streaming responses using Server-Sent Events (SSE). Messages appear character-by-character as they’re generated.Note: Requires proper SSE endpoint configuration. See Streaming Mode guide for setup details.

showHeader

boolean

default:"false"

Show/hide the chat header with AI model name and personality information. Features blue gradient background with white text.

showUsageInfo

boolean

default:"false"

Display token usage and cost information for each message. Also shows total cost in header when showHeader is enabled.

showTimestamp

boolean

default:"false"

Show timestamps on messages.

maxKnowledgeResults

number

default:"3"

Maximum number of knowledge base results to display for each query.

Styling Props

Customize the visual appearance using CSS classes:

className

string

Additional CSS classes for the main chat container.

className="border-2 border-gray-300 rounded-lg shadow-lg"

messagesClassName

string

CSS classes for the messages area container.

messagesClassName="bg-gray-50 p-4"

inputClassName

string

CSS classes for the message input field.

inputClassName="border-blue-500 focus:ring-blue-500"

Event Callbacks

Handle events and customize behavior with callback functions:

onMessageSent

(message: Message) => void

Called when a user sends a message.

onMessageSent={(message) => {
  console.log('User sent:', message.content);
  // Track user interactions
}}

onResponseReceived

(message: Message) => void

Called when the AI responds with a message.

onResponseReceived={(message) => {
  console.log('AI responded:', message.content);
  // Handle AI responses
}}

onFunctionExecuted

(functionCall: FunctionCall, result: ExecutionResult) => void

Called when a function call is executed (API call, smart contract, etc.).

onFunctionExecuted={(call, result) => {
  if (result.type === 'contract' && result.success) {
    console.log('Transaction hash:', result.data?.transactionHash);
  }
}}

onError

(error: any) => void

Called when an error occurs during operation.

onError={(error) => {
  console.error('Chat error:', error);
  // Show user-friendly error message
}}

ChatWidget Configuration

When using the ChatWidget component, these additional props are available:

title

string

default:"AI Assistant"

Dialog header title displayed at the top of the chat widget.

buttonIcon

string

default:"undefined"

Custom button icon URL. When not specified, uses the default chat icon.

buttonClassName

string

default:""

CSS classes for the floating chat button.

dialogClassName

string

default:""

CSS classes for the chat dialog container.

defaultOpen

boolean

default:"false"

Whether the dialog should be open by default when the component mounts.

onOpenChange

(open: boolean) => void

default:"undefined"

Callback function called when the dialog open state changes.

ChatWidget Example

import { ChatWidget, ChatInterface } from '@termix-it/react-tool';

function WidgetExample() {
  return (
    <div className="fixed bottom-6 right-6">
      <ChatWidget
        title="Support Assistant"
        buttonIcon="/custom-icon.svg"
        buttonClassName="shadow-lg border-2 border-blue-500"
        onOpenChange={(open) => console.log('Widget is', open ? 'open' : 'closed')}
      >
        <ChatInterface
          projectId="your-project-id"
          aiConfigId="your-ai-config-id"
          authorization="Bearer your-token"
          enableStreamingMode={true}
          // Note: showHeader=false since ChatWidget provides its own header
        />
      </ChatWidget>
    </div>
  );
}

Complete Configuration Example

Here’s an example with all major configuration options:

import { ChatInterface } from '@termix-it/react-tool';

function AdvancedChat() {
  const [authorization, setAuthorization] = useState('Bearer your-token');
  const customHeaders = { "X-API-Key": "secret" };

  return (
    <ChatInterface
      // Required props
      projectId="689b0b0a67504c373d86bed6"
      aiConfigId="689b0ce8ed28bfae5038fe82"
      
      // API configuration
      authorization={authorization}
      apiHeaders={{
        'X-Client-Version': '1.0.0',
        'X-Session-ID': 'unique-session-id'
      }}
      restExecuteHeader={customHeaders}
      
      // UI customization
      placeholder="Ask me anything..."
      personalityName="Advanced Assistant" // Optional: override API config personality name
      
      // Feature toggles
      enableStreamingMode={true} // Enable real-time streaming
      showHeader={true} // Show chat header with model info
      showUsageInfo={true} // Optional: show token usage
      showTimestamp={true} // Optional: show timestamps
      maxKnowledgeResults={5}
      
      // Styling
      className="h-full border border-gray-200 rounded-lg"
      messagesClassName="bg-white"
      inputClassName="border-gray-300 focus:border-blue-500"
      
      // Event callbacks
      onMessageSent={(message) => console.log('Sent:', message)}
      onResponseReceived={(message) => console.log('Received:', message)}
      onFunctionExecuted={(call, result) => {
        console.log('Function executed:', call.name);
        
        if (result.type === 'contract' && result.success) {
          console.log('Transaction:', result.data?.transactionHash);
        }
        
        if (result.type === 'api') {
          console.log('API result:', result.data);
        }
      }}
      onError={(error) => {
        console.error('Error:', error);
        // Show user notification
      }}
    />
  );
}

Environment-Specific Configurations

Development
Production

<ChatInterface
  projectId="dev-project-id"
  aiConfigId="dev-config-id"
  authorization={`Bearer ${process.env.DEV_TOKEN}`}
  enableStreamingMode={true} // Test streaming in development
  showHeader={true} // Show header for debugging
  showUsageInfo={true}
/>

<ChatInterface
  projectId={process.env.REACT_APP_PROJECT_ID}
  aiConfigId={process.env.REACT_APP_AI_CONFIG_ID}
  authorization={`Bearer ${userToken}`}
  enableStreamingMode={true} // Enable streaming for better UX
  showHeader={false} // Hide header in production
  showUsageInfo={false} // Hide usage info for cleaner UI
/>

Important Changes in Latest Version

Automatic Feature Enablement

The following features are now enabled by default and cannot be disabled:

Knowledge Base Integration: Automatically searches and references knowledge base
Function Calls: AI can execute REST APIs and smart contracts
ReAct Pattern: Reasoning and acting pattern for complex tasks
Knowledge References: Always displays knowledge base references when available

Welcome Message and Personality from API

The component now automatically fetches configuration from the AI config API:

Welcome Message: Uses greeting from API config or generates default
Personality Name: Uses name from API config, can be overridden with personalityName prop
Re-fetching: Automatically re-fetches when projectId or aiConfigId changes

Default fallback: "Hello! I'm [personality name]. How can I help you today?"

Default Values

showUsageInfo: Defaults to false
showTimestamp: Defaults to false
showHeader: Defaults to false
enableStreamingMode: Defaults to false

Best Practices

Security: Never hardcode sensitive information like API keys or tokens in your frontend code. Use environment variables and server-side proxies.

Performance: Disable features you don’t need (like showUsageInfo in production) to reduce overhead.

User Experience: Provide clear welcome messages and placeholders that guide users on what they can do.

Make sure to handle errors gracefully using the onError callback to provide good user experience when things go wrong.

Getting Started

Advanced Features

Components

ChatInterface Component

ChatInterface Component

Required Props

Authentication & API

UI Customization

Feature Toggles

Styling Props

Event Callbacks

ChatWidget Configuration

ChatWidget Example

Complete Configuration Example

Environment-Specific Configurations

Important Changes in Latest Version

Automatic Feature Enablement

Welcome Message and Personality from API

Default Values

Best Practices

Getting Started

Advanced Features

Components

​ChatInterface Component

​Required Props

​Authentication & API

​UI Customization

​Feature Toggles

​Styling Props

​Event Callbacks

​ChatWidget Configuration

​ChatWidget Example

​Complete Configuration Example

​Environment-Specific Configurations

​Important Changes in Latest Version

​Automatic Feature Enablement

​Welcome Message and Personality from API

​Default Values

​Best Practices

ChatInterface Component

Required Props

Authentication & API

UI Customization

Feature Toggles

Styling Props

Event Callbacks

ChatWidget Configuration

ChatWidget Example

Complete Configuration Example

Environment-Specific Configurations

Important Changes in Latest Version

Automatic Feature Enablement

Welcome Message and Personality from API

Default Values

Best Practices