AppFlowy Web Chat

📦 Installation

npm i @appflowyinc/ai-chat
# or
yarn add @appflowyinc/ai-chat
# or
pnpm add @appflowyinc/ai-chat

🚀 Quick Start

NB: Many functionalities of AppFlowy Web Chat are meant to work very closely with an instance of AppFlowy Cloud. Some features will require token access as well.

To get started with AppFlowy Web Chat, import Chat from the package and supply it with necessary ChatProps.

import { Chat, ChatProps } from "@appflowyinc/ai-chat";

const App = () => {
  const props: ChatProps = {
    // fill with data
    ...
  };

  return <Chat {...props} />;
};

export default App;

💡 Theming

AppFlowy Web Chat will use dark mode when document.documentelement.dataset.darkMode is set to true.

📖 API

ChatProps

| Prop | Type | Default | Description | | -------------------- | ------------------------------------- | ------- | --------------------------------------------------------------- | | chatId | string | - | The id of the chat | | requestInstance | ChatRequest | - | ChatRequest which handles chat-related API requests | | currentUser | User (optional) | - | Current user in the chat, determines the sender | | openingViewId | string (optional) | - | id of the currently-opened view | | onOpenView | (viewId: string) => void (optional) | - | Callback when clicking on a view link in the chat | | onCloseView | () => void (optional) | - | Callback when closing an opened view | | selectionMode | boolean (optional) | - | When true, disable input and allows selecting multiple messages | | onOpenSelectionMode | () => void (optional) | - | Callback when turning on selection mode | | onCloseSelectionMode | () => void (optional) | - | Callback when turning off selection mode |

ChatRequest

Supply the workspaceId and chatId. For saving messages to AppFlowy Cloud, an access token will be required in local storage.

🔨 Development Guide

Development Mode

# Install dependencies
pnpm i

# Start development server
pnpm run dev

# Build library
pnpm run build

To run the demo locally, first run:

pnpm i
pnpm run dev

Then open http://localhost:3001/ in your browser to see the demo application.