Implementation:Microsoft Semantic kernel SignalR GenerateDocumentsChat

Knowledge Sources	Microsoft_Semantic_kernel
Domains	React, SignalR, Process_Framework, Fluent_UI
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 SignalR Process Framework demo.

Description

GenerateDocumentsChat.tsx is a React functional component that implements the interactive chat interface for the SignalR-based Process Framework demo application. It manages the full document generation lifecycle: creating new document requests, displaying generated documents for review, accepting or rejecting documents with user suggestions, and showing published documents. The component uses Microsoft Fluent UI components (Button, Card, Popover, Spinner, Input, Label) for its UI and the react-markdown library for rendering document content. Each document request generates a UUID-based process ID that is used to subscribe to real-time SignalR events for that specific process.

The file exports two TypeScript interfaces (NewDocument and DocumentReview) that define the data contracts for document creation and review operations, along with the GenerateDocsChat component itself which accepts props for cloud technology name, document arrays, and callback handlers.

Usage

This component is used when building or running the SignalR Process Framework demo application. It is rendered as a child of the main App component when the user selects the document generation page. Developers working on the Process Framework demo would modify this file to change the chat UI behavior, document display formatting, or the user review workflow.

Code Reference

Source Location

• Repository: Microsoft_Semantic_kernel
• File: dotnet/samples/Demos/ProcessFrameworkWithSignalR/src/ProcessFramework.Aspire.SignalR.ReactFrontend/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., "SignalR") shown in the header
generatedDocuments	NewDocument[]	yes	Array of documents generated by the backend process, triggers review UI when updated
publishedDocuments	NewDocument[]	yes	Array of approved and published documents, disables review UI when updated
onCreateNewDocument	(document: NewDocument) => Promise<string>	yes	Callback invoked when user submits a new document creation request; returns the process ID
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 events for a specific process ID

Outputs

Name	Type	Description
JSX.Element	React component	Rendered chat interface with document creation, review, and approval buttons
NewDocument (export)	TypeScript interface	Exported interface for document data with optional title, required processId, and optional content
DocumentReview (export)	TypeScript interface	Exported interface for review data with accepted boolean, processId, and suggestions string

Usage Examples

Rendering GenerateDocsChat in a Parent Component

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

const App: React.FC = () => {
    const [generatedDocs, setGeneratedDocs] = useState<NewDocument[]>([]);
    const [publishedDocs, setPublishedDocs] = useState<NewDocument[]>([]);

    const handleCreateDocument = async (doc: NewDocument): Promise<string> => {
        // Send document creation request via SignalR hub
        const result = await signalRConnection.invoke("CreateDocument", doc);
        return result.processId;
    };

    const handleReviewDocument = async (review: DocumentReview): Promise<boolean> => {
        await signalRConnection.invoke("ReviewDocument", review);
        return true;
    };

    const subscribeToProcess = async (processId: string): Promise<void> => {
        await signalRConnection.invoke("SubscribeToProcess", processId);
    };

    return (
        <GenerateDocsChat
            cloudTechnologyName="SignalR"
            generatedDocuments={generatedDocs}
            publishedDocuments={publishedDocs}
            onCreateNewDocument={handleCreateDocument}
            onUserReviewedDocument={handleReviewDocument}
            subscribeToSpecificProcessId={subscribeToProcess}
        />
    );
};

Related Pages

• Environment:Microsoft_Semantic_kernel_DotNet_SDK_Environment
• Microsoft_Semantic_kernel_CloudEvents_GenerateDocumentsChat -- Nearly identical component in the CloudEvents demo
• Microsoft_Semantic_kernel_CloudEvents_App -- CloudEvents App component that uses a similar GenerateDocsChat pattern