index.tsx)¶

Overview¶

Advanced document editor interface that provides document processing, editing, and analysis capabilities with real-time collaboration features.

Features¶

Document upload and processing
Real-time WebSocket communication
Evidence scale visualization
Contract summary generation
Tender requirements configuration
Document state management
Full/Split view toggle
Modern chatbot integration
Scroll to top functionality
Enhanced document processing

URL Parameters¶

Parameter	Type	Description
roomId	string?	Optional collaboration room identifier

Implementation¶

State Management¶

// Document State
const [stateID, setStateID] = useState("");
const [state, setState] = useState("");
const [documentDataArray, setDocumentDataArray] = useState<DocumentData[]>([]);
const [editedState, setEditedState] = useState<boolean>(false);

// Processing State
const [isProcessing, setIsProcessing] = useState(false);
const [currentStage, setCurrentStage] = useState(0);
const [isComplete, setIsComplete] = useState(false);

// UI State
const [isFullViewChecked, setIsFullViewChecked] = useState(false);
const [evidenceScaleInput, setEvidenceScaleInput] = useState<{ name: string; value: number; color: string }[]>([]);
const [tenderRequirementsFlow, setTenderRequirementsFlow] = useState<boolean>(false);

Methods¶

const downloadState = async (stateID: string) =>
// Fetches document state and associated data from the server

const handleEditorStateChange = (newState: boolean) =>
// Updates editor state and triggers necessary UI updates

const handleReadyToProcess = (value: boolean) =>
// Initiates document processing via WebSocket

const combineDocumentData = (documentData: DocumentData[]) =>
// Combines multiple document results into a single formatted string

HTML Structure¶

<div className="editor-container">
  <AnimatedToggleViewComponent isChecked={isFullViewChecked} />
  <div className="editor-layout">
    <Editor key={editorKey} state={state} />
    <div className="sidebar">
      <ContractSummary summary={summary} />
      <EvidenceScaleCardComponent data={evidenceScaleInput} />
    </div>
  </div>
  <ModernChatbotComponent />
  <ScrollToTopComponent />
</div>

Props¶

interface Props {
  roomId?: string;  // Optional collaboration room identifier
}

Components/API Routes Used¶

Components¶

API Routes¶

/api/editor/getState - Fetches document state
WebSocket: wss://bidsservernginx01.bidscript.co.uk/editor/${userID}

Routes to Page¶

Direct: /editor
From: Documents page "View" action
From: Home page "Open Workspace" button
From: Collaboration room invites

Dependencies¶

import { useSession } from "next-auth/react"
import { Editor } from "../../components/Editor/editorModule"
import { ModernChatbotComponent } from "../../components/modern-chatbot"
import { InitialQuestions, Theme, DocumentData } from "../../components/Editor/types"

Notes¶

Implements WebSocket for real-time updates
Supports collaborative editing through room system
Features multi-stage document processing
Includes evidence scale visualization
Maintains document state persistence
Requires authentication
Handles large document processing efficiently