Agent de l'espace de travail

Posez des questions sur cet espace de travail ou prévisualisez des ajouts uniquement.

Organigram React

Organigram React fournit les composants et hooks React de Organigram.ai : les diagrammes d'organisations bâties sur le Protocole Organigram, les écrans pour proposer et décider via les procédures, et le panneau de discussion de l'agent d'espace de travail. Il s'appuie sur @organigram/js, qui lit et écrit les contrats.

Installation


pnpm add @organigram/react @organigram/js viem recoil react-flow-renderer @mui/material @mui/icons-material react-i18next

Les composants utilisent MUI pour leurs styles et Recoil pour l'état qu'ils partagent : enveloppez donc votre application dans un RecoilRoot et, pour obtenir l'apparence d'Organigram, dans un composant MUI ThemeProvider avec theme. Le thème attend ses polices dans /fonts/*.woff2 : copiez node_modules/@organigram/react/dist/fonts dans les ressources publiques de votre application.

Comment ça marche

Dessiner un organigramme

Diagram dessine un organigramme sous forme de graphe interactif : organes, procédures et actifs sont des nœuds, et les permissions qu'ils détiennent les uns sur les autres sont des liens. Les utilisateurs peuvent déplacer les nœuds, et onNodePositionsChange vous permet d'enregistrer leurs positions. ClassicOrgChart dessine le même organigramme sous forme d'arbre classique, où un organe se place sous l'organe dont les membres décident de sa composition.

Tous deux prennent un organigramme en JSON simple, issu de organigram.toJson(). Les calques, définis par votre application, permettent de n'afficher qu'une partie d'un grand organigramme : useLayers filtre l'organigramme pour l'une ou l'autre vue et mémorise les calques actifs.

Propositions et décisions

procedures regroupe les écrans de chaque type de procédure, par nom de type : Component décrit une procédure, et Proposal affiche une proposition avec les actions que le compte connecté peut effectuer, comme voter ou la bloquer.

L'agent d'espace de travail

AgentPanel est le panneau de discussion de l'agent d'espace de travail, y compris l'aperçu des modifications que l'agent propose, que l'utilisateur confirme ou annule. Ces composants ne font qu'afficher : votre application envoie les messages à son agent et stocke les conversations. Chaque texte peut être remplacé via les props labels , pour les traduire.

Utilisation


import { RecoilRoot } from 'recoil'
import { ThemeProvider, createTheme, type ThemeOptions } from '@mui/material/styles'
import { Diagram, theme, useOrganigramClient } from '@organigram/react'
import { Organigram, getTemplate } from '@organigram/js'
import { createPublicClient, http } from 'viem'
import { sepolia } from 'viem/chains'
const publicClient = createPublicClient({ chain: sepolia, transport: http() })
const OrganigramView = () => {
  const client = useOrganigramClient(publicClient, null, sepolia.id)
  const organigram = new Organigram(getTemplate('nonProfit', client?.chainId ?? String(sepolia.id)))
  return <Diagram organigram={organigram.toJson()} controls style={{ height: 600 }} />
}
export const App = () => (
  <RecoilRoot>
    <ThemeProvider theme={createTheme(theme as ThemeOptions)}>
      <OrganigramView />
    </ThemeProvider>
  </RecoilRoot>
)

Contribuer

Nous recherchons des développeurs et testeurs React pour garder ce projet sûr et à jour. Ouvrez des tickets sur GitHub, forkez le dépôt et envoyez des pull requests.

Diagrammes

Diagram dessine un organigramme sous forme de graphe d'organes, de procédures et d'actifs, reliés par les permissions qu'ils détiennent les uns sur les autres. ClassicOrgChart le dessine sous forme d'arbre des organes et de leurs membres. Tous deux prennent l'organigramme en JSON simple, issu de organigram.toJson(), et les composants de nœuds peuvent être utilisés seuls.

Diagram

Dessiner un organigramme sous forme de diagramme interactif : organes, procédures et actifs, reliés par les permissions qu'ils détiennent les uns sur les autres.


<Diagram organigram={organigram.toJson()} onClickOrgan={organ => open(organ)} controls />

Definition


const Diagram: React.FC<DiagramProps>

DiagramProps

Props acceptées par défaut Diagram component.

Propriété	Type	Description
`controls`	`boolean`	Indique s'il faut afficher les contrôles de zoom.
`direction`	`string`	Sens de la disposition : `TB` de haut en bas, ou `LR` de gauche à droite.
`displayOptions`	`DiagramDisplayOptions`	Quels liens de permission dessiner.
`edgeType`	`OrganigramEdgeType`	Style de trait des liens.
`entryUsers`	`Record<string, DiagramEntryUser>`	Noms et avatars des membres, par adresse.
`isTabletOrAbove`	`boolean`	Indique si l'écran a au moins la taille d'une tablette, pour placer les contrôles.
`nodeTypes`	`NodeTypes`	Composants de nœuds React Flow, par type de nœud. Par défaut `defaultNodeTypes`.
`options`	`ReactFlowProps`	Props supplémentaires passées à React Flow.
`organigram`	`OrganigramJson \| null`	Organigramme à dessiner, ou `null` pendant son chargement.
`style`	`Record<string, unknown>`	Style du conteneur du diagramme.

DiagramProps.onClickAsset

Appelé quand l'utilisateur clique sur un actif.

Signature


onClickAsset?: (asset: AssetJson) => void;

DiagramProps.onClickOrgan

Appelé quand l'utilisateur clique sur un organe.

Signature


onClickOrgan?: (organ: OrganJson) => void;

DiagramProps.onClickProcedure

Appelé quand l'utilisateur clique sur une procédure.

Signature


onClickProcedure?: (procedure: ProcedureJson) => void;

DiagramProps.onNodePositionsChange

Appelé quand l'utilisateur déplace des nœuds, pour enregistrer leurs positions.

Signature


onNodePositionsChange?: (nodePositions: OrganigramNodePositions) => void;

DiagramProps.translateLabel

Fonction de traduction des libellés.

Signature


translateLabel?: (label: string) => string;

ClassicOrgChart

Dessiner un organigramme sous forme d'arbre classique des organes et de leurs membres, comme la plupart des gens se représentent un organigramme.

Definition


const ClassicOrgChart: React.FC<ClassicOrgChartProps>

ClassicOrgChartProps

Props de ClassicOrgChart.

Propriété	Type	Description
`controls`	`boolean`	Indique s'il faut afficher les contrôles de zoom.
`isTabletOrAbove`	`boolean`	Indique si l'écran a au moins la taille d'une tablette, pour placer les contrôles.
`organigram`	`OrganigramJson \| null`	Organigramme à dessiner, ou `null` pendant son chargement.
`style`	`Record<string, unknown>`	Style du conteneur de l'organigramme.
`testIdPrefix`	`string`	Préfixe des identifiants de test des nœuds.

ClassicOrgChartProps.onClickOrgan

Appelé quand l'utilisateur clique sur un organe.

Signature


onClickOrgan?: (organ: OrganJson) => void;

ClassicOrgChartProps.translateLabel

Fonction de traduction des libellés.

Signature


translateLabel?: (label: string) => string;

OrganNode

Nœud React Flow par défaut utilisé pour afficher un organe dans un diagramme.

Definition


const OrganNode: React.FC<Partial<NodeProps> & OrganNodeProps>

OrganNodeProps

Propriétés acceptées par le renduur de nœud organ par défaut.

Propriété	Type	Description
`data`	`{ organ: Organ; entryUsers?: Record<string, DiagramEntryUser>; position?: { x: number; y: number; }; isMaster?: boolean; onClick?: () => void; translateLabel?: (label: string) => string; }`	L'organe, les noms et avatars de ses membres, et le gestionnaire de clic.
`hideHandles`	`boolean`	Indique s'il faut masquer les poignées de connexion, pour afficher le nœud seul.

DiagramEntryUser

Nom et avatar affichés pour l'adresse d'un membre.

Definition


export type DiagramEntryUser = {
    image?: string | null;
    name?: string | null;
};

ProcedureNode

Nœud React Flow par défaut utilisé pour afficher une procédure dans un diagramme.

Definition


const ProcedureNode: React.FC<Partial<NodeProps<{
    procedure: ProcedureJson;
    onClick?: (procedure: ProcedureJson) => void;
    organigram?: OrganigramJson;
    translateLabel?: (label: string) => string;
}>> & ProcedureNodeProps>

ProcedureNodeProps

Propriétés acceptées par le nœud de procédure par défaut rendu.

Propriété	Type	Description
`hideHandles`	`boolean`	Indique s'il faut masquer les poignées de connexion, pour afficher le nœud seul.
`organigram`	`OrganigramJson`	Organigramme auquel appartient la procédure, pour nommer les organes qu'elle relie.

DiagramDisplayOptions

Quels liens de permission dessine un diagramme.

Propriété	Type	Description
`showAdminPermissions`	`boolean`	Dessiner les permissions de gestion des permissions.
`showAssetsPermissions`	`boolean`	Dessiner les permissions de mouvement de fonds.
`showEntriesPermissions`	`boolean`	Dessiner les permissions de modification des membres et des documents.

useDiagramDisplayOptions

Lire et modifier les options d'affichage du diagramme, partagées dans toute l'application.

Signature


useDiagramDisplayOptions: () => [DiagramDisplayOptions, SetterOrUpdater<DiagramDisplayOptions>]

ProcedureIcon

Icône de procédure.

Signature


Procedure: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element

Calques

Les calques sont des sous-ensembles d'un organigramme définis par votre application, comme des services. useLayers filtre l'organigramme pour l'une ou l'autre vue selon les calques choisis par l'utilisateur, et mémorise la sélection dans un stockage que vous fournissez.

DiagramLayer

Un sous-ensemble nommé d'un organigramme, comme un service, que les utilisateurs peuvent afficher ou masquer.

Propriété	Type	Description
`assets`	`ReadonlyArray<{ assetAddress: string; }>`	Actifs du calque.
`id`	`string`	Identifiant du calque.
`organs`	`ReadonlyArray<{ organAddress: string; }>`	Organes du calque.
`procedures`	`ReadonlyArray<{ procedureAddress: string; }>`	Procédures du calque.

DiagramLayerStorage

Un stockage clé-valeur pour les calques actifs, comme localStorage.

DiagramLayerStorage.getItem

Lire une valeur.

Signature


getItem: (key: string) => string | null;

DiagramLayerStorage.setItem

Écrire une valeur.

Signature


setItem: (key: string, value: string) => void;

LayersState

L'état des calques renvoyé par useLayers.

Propriété	Type	Description
`activeLayerIds`	`string[]`	Calques actuellement affichés. Vide signifie que tout est affiché.
`classicVisibleOrganigram`	`OrganigramJson`	L'organigramme filtré pour `ClassicOrgChart`.
`visibleOrganigram`	`OrganigramJson`	L'organigramme filtré pour `Diagram`.

LayersState.showAll

Afficher tous les calques.

Signature


showAll: () => void;

LayersState.toggleLayer

Afficher ou masquer un calque.

Signature


toggleLayer: (layerId: string) => void;

UseLayersOptions

Options de useLayers.

Propriété	Type	Description
`storage`	`DiagramLayerStorage \| null`	Où mémoriser les calques actifs, comme `localStorage`. Sans cela, la sélection n'est pas conservée.

UseLayersOptions.onStorageError

Appelé quand le stockage ne peut pas être lu ou écrit.

Signature


onStorageError?: () => void;

useLayers

Applique à un organigramme les calques visuels choisis par l'utilisateur, sans gérer la persistance ni l'édition des calques. Les applications fournissent leurs définitions enregistrées.

Signature


useLayers: (organigram: OrganigramJson, layers: ReadonlyArray<DiagramLayer>, options?: UseLayersOptions) => LayersState

Procédures

Écrans pour suivre les propositions et en décider. procedures fournit, pour chaque type de procédure, un Component qui décrit la procédure et un Proposal qui affiche une proposition avec les actions que le compte connecté peut effectuer.

ElectionComponentProps

Props des composants de vote.

Propriété	Type	Description
`accountInOrgans`	`{ proposers?: boolean; moderators?: boolean; deciders?: boolean; }`	Rôles du compte connecté dans la procédure.
`compact`	`boolean`	Indique s'il faut utiliser la disposition condensée des listes.
`procedure`	`ERC20VoteProcedure \| VoteProcedure`	Procédure de vote à laquelle appartient la proposition.
`proposal`	`ProcedureProposal`	Proposition soumise au vote.
`publicClient`	`PublicClient \| null`	Client utilisé pour les lectures, quand la procédure n'en a pas.
`voterAddress`	`string`	Adresse dont le vote est affiché, par défaut le portefeuille connecté.
`walletClient`	`WalletClient \| null`	Client qui signe le vote, quand la procédure n'en a pas.
`wrapTransaction`	`TransactionOptions['onTransaction']`	Appelé avec chaque transaction dès son envoi, par exemple pour afficher sa progression.

ElectionComponentProps.t

Fonction de traduction des libellés.

Signature


t: (key: string) => string;

NominationProposalProps

Props de l'écran de proposition d'une procédure de nomination.

Propriété	Type	Description
`accountInOrgans`	`{ proposers?: boolean; moderators?: boolean; deciders?: boolean; }`	Rôles du compte connecté dans la procédure.
`compact`	`boolean`	Indique s'il faut utiliser la disposition condensée des listes.
`procedure`	`NominationProcedure`	Procédure de nomination à laquelle appartient la proposition.
`proposal`	`ProcedureProposal`	Proposition affichée.
`publicClient`	`PublicClient \| null`	Client utilisé pour les lectures, quand la procédure n'en a pas.
`walletClient`	`WalletClient \| null`	Client qui signe la décision, quand la procédure n'en a pas.
`wrapTransaction`	`TransactionOptions['onTransaction']`	Appelé avec chaque transaction dès son envoi, par exemple pour afficher sa progression.

NominationProposalProps.t

Fonction de traduction des libellés.

Signature


t: (key: string, options?: any) => string;

procedures

Interface de chaque type de procédure : Component décrit la procédure, Proposal affiche une proposition et sa décision.


const { Proposal } = procedures[procedure.typeName]

Agent de l'espace de travail

Le panneau de discussion de l'agent d'espace de travail, avec l'aperçu des modifications qu'il propose. Ces composants ne font qu'afficher : votre application envoie les messages à son agent et stocke les conversations. Chaque texte peut être remplacé via les props labels .

AgentPanel

Panneau de discussion de l'agent d'espace de travail : conversations, messages, envoi de documents et modifications proposées.

Le panneau ne fait qu'afficher : l'application envoie les messages et stocke les conversations.

Animated

Faire apparaître et disparaître son contenu en fondu et en glissement.

Definition


const Animated: React.FC<AnimatedProps>

AgentResponse

Une réponse de l'agent d'espace de travail.

Definition


export type AgentResponse = {
    threadId?: string;
    message: string;
    citations: Citation[];
    preview?: OrganigramPreview;
};

AnimatedProps

Props de Animated.

Definition


export type AnimatedProps = {
    visible?: boolean;
    delay?: number;
    children: ReactNode;
    translateY?: number;
    cursor?: CSSProperties['cursor'];
    unmountOnExit?: boolean;
};

Citation

Un objet de l'espace de travail auquel l'agent fait référence dans une réponse.

Definition


export type Citation = {
    type: 'workspace' | 'organigram' | 'organ' | 'procedure' | 'asset' | 'notification' | 'file';
    id: string;
    label: string;
};

MergeOrganigramPreview

Modifications que l'agent propose pour un organigramme existant, ajoutées une fois confirmées.

Definition


export type MergeOrganigramPreview = {
    type: 'organigram';
    organigramId: string;
    persistence: 'merge-additive';
    summary: string[];
    organigram: OrganigramJson;
};

Message

Un message d'une conversation avec l'agent d'espace de travail.

Definition


export type Message = {
    role: 'user' | 'assistant';
    content: string;
};

NewOrganigramPreview

Un nouvel organigramme proposé par l'agent, créé une fois confirmé.

Definition


export type NewOrganigramPreview = {
    type: 'new-organigram';
    persistence: 'create';
    summary: string[];
    organigram: OrganigramJson;
};

OrganigramPreview

Modifications proposées par l'agent, que l'utilisateur confirme ou annule.

Definition


export type OrganigramPreview = MergeOrganigramPreview | NewOrganigramPreview;

PanelLabels

Textes du panneau de l'agent, pour le traduire.

Definition


export type PanelLabels = PreviewLabels & {
    title: string;
    close: string;
    threads: string;
    newChat: string;
    noConversationsYet: string;
    thinking: string;
    askPlaceholder: string;
    attachDocument: string;
    selectedDocument: string;
    removeDocument: string;
    sourceHero: string;
    sourceWorkspace: string;
};

PanelMessage

Un message affiché dans le panneau de l'agent, éventuellement encore en cours de diffusion.

Definition


export type PanelMessage = Message & {
    id?: string;
    response?: AgentResponse;
    streaming?: boolean;
};

PreviewLabels

Textes de l'aperçu des modifications, pour le traduire.

Definition


export type PreviewLabels = {
    preview: string;
    confirmationNotice: string;
    organ: string;
    newOrgan: string;
    newProcedure: string;
    newAsset: string;
    newEntry: string;
    entry: string;
    organType: string;
    procedureType: string;
    assetType: string;
    cancel: string;
    confirm: string;
};

StoredMessage

Un message enregistré d'une conversation.

Definition


export type StoredMessage = Message & {
    id: string;
    createdAt: string;
    response?: AgentResponse;
};

Thread

Une conversation avec l'agent d'espace de travail.

Definition


export type Thread = {
    id: string;
    title: string;
    source: ThreadSource;
    workspace?: ThreadWorkspace | null;
    currentOrganigramId?: string | null;
    createdAt: string;
    updatedAt: string;
    messages: StoredMessage[];
};

ThreadSource

Où une conversation a commencé : dans un espace de travail ou sur la page d'accueil.

Definition


export type ThreadSource = 'workspace' | 'hero';

ThreadWorkspace

L'espace de travail auquel appartient une conversation.

Definition


export type ThreadWorkspace = {
    id: string;
    name?: string | null;
};

Client et état partagé

useOrganigramClient crée un OrganigramClient à partir de vos clients viem. Les autres hooks partagent leur état via Recoil : votre application doit donc être enveloppée dans un RecoilRoot.

useOrganigramClient

Créer un OrganigramClient à partir de clients viem, ou renvoyer null jusqu'à ce qu'un client public soit disponible.

Le client est créé de façon synchrone avec les types de procédures connus pour la chaîne. Utilisez OrganigramClient.load() pour les lire plutôt depuis la chaîne.


const client = useOrganigramClient(publicClient, walletClient, chainId)

Signature


useOrganigramClient: (publicClient?: PublicClient | null, walletClient?: WalletClient | null, chainId?: string | number | null) => OrganigramClient | null

ModalType

Élément React actuellement monté dans la fente modale partagée.

Definition


export type ModalType = null | JSX.Element;

SetModal

Signature du gestionnaire d'état React pour le slot partagé de la modale.

Definition


export type SetModal = Dispatch<SetStateAction<ModalType>>;

useSetModal

Mettre à jour le contenu du modale actuel.

Signature


useSetModal: () => SetterOrUpdater<ModalType>

modalState

État de recoil global stockant l'identifiant de l'organigramme actif.

Definition


const modalState: import('recoil').RecoilState<JSX.Element | null>

ProposalFilter

Filtres nommés utilisés par les interfaces utilisateur de la liste des propositions.

Definition


export type ProposalFilter = 'current' | 'drafts' | 'passed' | 'blocked' | '';

isUserInSourceOrgan

Vérifiez si l'utilisateur actuel appartient à l'organe assigné à un rôle de procédure.

Signature


isUserInSourceOrgan: (roleType: ProcedureRoleTypeName, organs: OrganJson[], deployedProcedure?: ProcedureJson, userAddress?: string) => boolean

Paramètres

Nom	Type	Description
`roleType`	`ProcedureRoleTypeName`	Rôle de procédure à inspecter.
`organs`	`OrganJson[]`	Organes hydratés disponibles dans l'organigramme actuel.
`deployedProcedure`	`ProcedureJson`	Procédure dont le rôle d'organe doit être vérifié.
`userAddress`	`string`	Adresse de l'utilisateur connecté.

Thème

Le thème MUI d'Organigram. Passez-le à createTheme() et un ThemeProvider, et servez ses polices depuis /fonts.

mobileNavHeight

Hauteur de la navigation mobile utilisée par l'interface utilisateur Organigram hébergée.

Definition


const mobileNavHeight = 50

navHeight

Hauteur de la navigation desktop utilisée par l'interface utilisateur Organigram hébergée.

Definition


const navHeight = 100

palette

Couleurs du thème Organigram.

theme

Le thème MUI d'Organigram : palette, typographie, points de rupture et styles des composants.

Ses polices sont servies depuis /fonts/*.woff2 : copiez node_modules/@organigram/react/dist/fonts dans les ressources publiques de votre application.