<SociableAiChat /> Component

Usage

Here is the example from the installation section:

import { SociableAiChat } from "sociable-ai-chatbox";

function App() {
  return (
    <SociableAiChat
      apiKey="YOUR_API_KEY"
      baseUrl="YOUR_BASE_URL"
      chatName="Chat With Name"
      personaName="AI Name"
      greetingMessage="Hey! How can I help you?"
    />
  )
}

Properties

Required Properties:

• apiKey (string): Your API key for authentication.
• baseUrl (string): The base URL of your AI backend service (app.sociable.how).
• chatName (string): The name displayed at the top of the chat interface.
• personaName (string): The name of the AI persona in the chat.
• greetingMessage (string): The initial message displayed from the AI persona.

Optional Properties:

• appearance (SociableAiChatStyleProps): An object to customize the appearance of the chat interface.

API Integration

The SociableAiChat component handles API calls to our backend automatically.

For more detailed information on API integration, please refer to our API documentation here.

Best Practices

• Always keep your API key secure and never expose it in client-side code.
• Use environment variables to manage your apiKey and baseUrl.

Customizing Appearance

You can customize the appearance of the chat interface using the appearance prop. Here’s an example:

import { SociableAiChat, SociableAiChatStyleProps } from 'sociable-ai-chatbox'

function App() {
  const appearance: SociableAiChatStyleProps = {
    elements: {
      chatWindow: {
        header: {
          chatNameText: "text-green-500",
          headerText: "text-black"
        }
      }
    }
  }

  return (
    <SociableAiChat
      apiKey="YOUR_API_KEY"
      baseUrl="YOUR_BASE_URL"
      chatName="Chat With Name"
      personaName="AI Name"
      greetingMessage="Hey! How can I help you?"
      appearance={appearance}
    />
  )
}

Note that you can import the SociableAiChatStyleProps type to ensure you’re passing the correct object structure. There are many more configurable fields available than what is shown in this example. Your code editor’s IntelliSense will show you all the available properties you can customize.

This change adds the new appearance property to the documentation, provides an example of its usage, and informs users about the SociableAiChatStyleProps type and the availability of additional configurable fields.