Implementation:Microsoft Semantic kernel CloudEvents GenerateDocumentsChat

Knowledge Sources	Microsoft_Semantic_kernel
Domains	React, CloudEvents, Fluent_UI, Process_Framework
Last Updated	2026-02-11 00:00 GMT

Overview

Concrete React TypeScript component for managing document generation chat UI with Fluent UI, provided by the CloudEvents Process demo.

Description

GenerateDocumentsChat.tsx in the CloudEvents demo is a React functional component that implements the interactive chat interface for the document generation workflow. This component is structurally identical to the SignalR variant and provides the same document lifecycle management: creating new document requests, displaying AI-generated documents for human review, accepting or rejecting documents with user-provided suggestions, and displaying published (finalized) documents.

The component manages several pieces of local state:

• messages -- Chat message history displayed in the SimpleChat sub-component
• processId -- UUID generated per document creation request, used to subscribe to backend process events
• newDocContent -- Title/name input for new document requests
• rejectSuggestions -- User-provided feedback text when rejecting a document
• creatingNewDocument -- Boolean flag controlling spinner display during document creation
• allowUserReview -- Boolean flag enabling/disabling accept and reject buttons

The component exports two interfaces: NewDocument (with optional title, required processId, optional content) and DocumentReview (with accepted boolean, processId, and suggestions string).

Usage

This component is rendered as a child of the CloudEvents App component when the Document Generation page is selected. It is the primary user interaction surface for the document generation demo. Developers would modify this file to change the chat UI, add new review actions, or alter how documents are displayed using Markdown rendering.

Code Reference

Source Location

• Repository: Microsoft_Semantic_kernel
• File: dotnet/samples/Demos/ProcessWithCloudEvents/ProcessWithCloudEvents.Client/src/components/GenerateDocumentsChat.tsx
• Lines: 1-356

Signature

export interface NewDocument {
    title?: string;
    processId: string;
    content?: string;
}

export interface DocumentReview {
    accepted: boolean;
    processId: string;
    suggestions: string;
}

interface GenerateDocsChatProps {
    cloudTechnologyName: string;
    generatedDocuments: NewDocument[];
    publishedDocuments: NewDocument[];
    onCreateNewDocument: (document: NewDocument) => Promise<string>;
    onUserReviewedDocument: (userReview: DocumentReview) => Promise<boolean>;
    subscribeToSpecificProcessId: (processId: string) => Promise<void>;
}

const GenerateDocsChat: React.FC<GenerateDocsChatProps> = ({
    cloudTechnologyName,
    generatedDocuments,
    publishedDocuments,
    onCreateNewDocument,
    onUserReviewedDocument,
    subscribeToSpecificProcessId,
}) => {
    // ...component body
};

export default GenerateDocsChat;

Import

import GenerateDocsChat, {
    DocumentReview,
    NewDocument,
} from "./components/GenerateDocumentsChat";

I/O Contract

Inputs

Name	Type	Required	Description
cloudTechnologyName	string	yes	Display name for the cloud technology (e.g., "gRPC") shown in the document generation header
generatedDocuments	NewDocument[]	yes	Array of AI-generated documents awaiting user review; triggers review UI on update
publishedDocuments	NewDocument[]	yes	Array of approved and published documents; disables review UI on update
onCreateNewDocument	(document: NewDocument) => Promise<string>	yes	Callback invoked when user submits a new document creation request
onUserReviewedDocument	(userReview: DocumentReview) => Promise<boolean>	yes	Callback invoked when user accepts or rejects a generated document
subscribeToSpecificProcessId	(processId: string) => Promise<void>	yes	Callback to subscribe to real-time backend events for a specific process ID

Outputs

Name	Type	Description
JSX.Element	React component	Rendered chat interface with document creation popover, accept/reject buttons, suggestions input, and clear chat
NewDocument (export)	TypeScript interface	Data contract for document creation and display
DocumentReview (export)	TypeScript interface	Data contract for user review submissions

Usage Examples

Integrating with the CloudEvents App

import GenerateDocsChat, { NewDocument, DocumentReview } from "./components/GenerateDocumentsChat";

// Inside the App component render method:
{selectedAppPage == AppPages.DocumentGeneration && (
    <GenerateDocsChat
        cloudTechnologyName={
            CloudTechnologiesDetails.get(selectedCloudTech)!.name
        }
        onCreateNewDocument={onCreateDocumentRequest}
        onUserReviewedDocument={onUserReviewedDocument}
        subscribeToSpecificProcessId={subscribeToSpecificProcessId}
        generatedDocuments={generatedDocuments}
        publishedDocuments={publishedDocuments}
    />
)}

Document Rejection with Suggestions

// The component internally handles rejection via the onUserRejectedDocument handler:
const onUserRejectedDocument = () => {
    if (!processId) {
        alert("Process id cannot be empty, create document first");
        return;
    }
    if (!rejectSuggestions) {
        alert("Must provide non empty suggestions on rejection of a document");
        return;
    }
    onUserReviewedDocument({
        accepted: false,
        suggestions: rejectSuggestions ?? "",
        processId: processId!,
    }).then(() => {
        setMessages((prevMessages) => [
            ...prevMessages,
            { sender: ChatUser.ASSISTANT, action: "Document generated with suggestions" },
        ]);
    });
};

Related Pages

• Environment:Microsoft_Semantic_kernel_DotNet_SDK_Environment
• Microsoft_Semantic_kernel_SignalR_GenerateDocumentsChat -- Nearly identical component in the SignalR demo variant
• Microsoft_Semantic_kernel_CloudEvents_App -- Parent App component that renders this chat component
• Microsoft_Semantic_kernel_CloudEvents_Grpc_DocumentGeneration -- gRPC types used for backend communication