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.