Getting Started
Installing
Install reachat in your project by following the steps below.
1. Install the package
npm i reachat --save
2. Install Reablocks and Tailwind
Open your terminal, navigate to your project's root directory, and use the reablocks-cli to initialize reablocks in your project:
npx reablocks-cli@latest init
If you don't already have Tailwind installed in your project, include it:
npm install -D tailwindcss
npx tailwindcss init
Then add the following Tailwind directives to your main CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Finally, wrap your application with the ThemeProvider
component from reablocks
.
import { ThemeProvider, theme } from 'reablocks';
export const App = () => (
<ThemeProvider theme={theme}>
<YourComponents />
</ThemeProvider>
);
3. Include Chat components in your project
import {
Chat,
ChatInput,
Conversation,
NewSessionButton,
Session,
SessionGroups,
SessionListItem,
SessionMessage,
SessionMessages,
SessionMessagePanel,
SessionMessagesHeader,
SessionsGroup,
SessionsList,
} from "reachat";
export default function App() {
return (
<Chat sessions={[]}>
<SessionsList>
<NewSessionButton />
<SessionGroups>
{(groups) =>
groups.map(({ heading, sessions }) => (
<SessionsGroup heading={heading} key={heading}>
{sessions.map((s) => (
<SessionListItem key={s.id} session={s} />
))}
</SessionsGroup>
))
}
</SessionGroups>
</SessionsList>
<SessionMessagePanel>
<SessionMessagesHeader />
<SessionMessages>
{(conversations) =>
conversations.map((conversation) => (
<SessionMessage
key={conversation.id}
conversation={conversation}
/>
))
}
</SessionMessages>
<ChatInput />
</SessionMessagePanel>
</Chat>
);
}
3. Connect your provider
See Demos/Open AI for an example of how to connect your provider.
Developing
You can also develop Reachat locally by cloning the repository and running the development server.
1. Clone the repository
git clone https://github.com/your-repo/reachat.git
cd reachat
2. Install dependencies
npm install
3. Start the development server
npm run start
4. Open your browser
Navigate to http://localhost:3000
to see Reachat in action.
Example Repo
To see a complete example of how to use Reachat, check out the example repo (opens in a new tab).