Embedded chat

What it is

EmbeddedChat is the chat itself. Mount it inside providers so it has a deployment. The chat’s datastore is its own datastore prop, or the one an operator picks. Without that prop, the server uses the account’s default datastore. user is the person shown in the chat. isOperator chooses whether they pick a datastore first.

Import

import { EmbeddedChat } from "@manta-eu/react/components/embedded-chat";

Example

export function Copilot(props: { onClose: () => void }) {
  return (
    <EmbeddedChat
      user={{ id: "…", email: "you@example.com", name: "You" }}
      isOperator={false}
      datastore={{ id: "your-datastore", name: "Your datastore" }}
      assistantName="Copilot"
      title="Copilot"
      welcomeSubtitle="Ask about the campaign on this page."
      onClose={props.onClose}
    />
  );
}

Request

user and isOperator are required. The rest are optional.

• user — { id, email, name?, picture? }. id and email are strings. name and picture may be omitted.
• isOperator — true when this person may choose a datastore, false for a fixed one.
• datastore — { id, name }. The chat uses this datastore. When isOperator is false and this is omitted, the server uses the account’s default datastore. When isOperator is true and this is omitted, the user picks one first. The providers’ datastoreId is what GraphQL and SPARQL from that tree use, not this prop.
• assistantName — name used in the header and the greeting. Defaults to Manta.
• title — header label. When omitted, the header reads {assistantName} Co-pilot.
• assistantIcon — a component that takes { className?: string }, drawn in place of the Manta mark while the assistant is working.
• welcomeSubtitle — subtitle on the empty state, in place of the default greeting.
• initialPrompt — a string sent as the first user message once the chat is connected and still empty.
• initialDraft — { id: string; text: string }. The composer shows text. A new id replaces it. After that draft is sent, the same id stays out of the box.
• onClose — () => void. Passing it adds a Close button in the header.
• mode — "datastore" (the default) or "group". "group" is an overview of a group’s datastores: set datastore to the group’s own datastore. Its conversations answer from that datastore and every datastore beneath it, as far as the user is granted them, name the one each figure comes from, and change nothing. They tell the user which datastore a requested change belongs to instead, and open no plan or rule chat: a plan the user picks goes to onSelectPlan, and without it the user is told to open the plan from its own datastore. A group view keeps its own chat list, apart from the datastore’s, and the conversations and the personal memories saved from them are kept in the group’s datastore.

Page context and opening a plan are separate props.

Response

With isOperator false, the panel opens on the datastore prop. Without that prop, the server uses the account’s default datastore. With isOperator true and no datastore chosen yet, the user sees Select a datastore and then the chat for the one they pick.

An empty chat greets them with “What would you like to improve today?” and either welcomeSubtitle or a greeting that uses their name. initialPrompt appears as the first message they sent. initialDraft waits in the composer until they send it. Close calls onClose.