index.tsx)¶

Overview¶

The Workspace page serves as the central editing environment in BidScript, providing a sophisticated interface for document editing, tender requirement management, and AI-assisted content generation.

Features¶

Rich text document editing with Lexical editor
Split-screen mode for parallel viewing of content
Document requirement tracking and management
AI-assisted content generation and suggestions
Draft management and version control
Real-time collaboration capabilities
Document state preservation

URL Parameters¶

stateID: Optional - Document state identifier for loading existing documents

Implementation¶

State Management¶

// Primary workspace context
const {
  stateID,
  setStateID,
  currentPath,
  setCurrentPath,
  setState,
  setNRequests,
  setSummary,
  resetWorkspaceState,
  setDocumentName,
  setParsedState,
  documentName,
  activeTab,
  setActiveTab,
  isPrepopulateDone,
  isProcessing,
} = useWorkspaceContext();

// UI state
const [view, setView] = useState<"split" | "editor" | "dashboard">("editor");
const [showConfigPopup, setShowConfigPopup] = useState<boolean>(false);
const [isResettingEditor, setIsResettingEditor] = useState<boolean>(false);

Methods¶

// Document state management
const prepopulateWorkspaceState = async () =>
// Prepopulates the workspace with document data based on stateID

const saveWorkspaceState = async () =>
// Saves the current document state to the server

const resetEditor = () =>
// Clears the editor content and resets the workspace state

// Socket connection for real-time collaboration
const setupSocketConnection = () =>
// Establishes WebSocket connection for real-time updates

HTML Structure¶

<div className="workspace-container h-full flex flex-col">
  {/* Tab navigation */}
  <Tabs
    className="flex justify-between w-full mb-4 px-4"
    value={activeTab}
    onValueChange={setActiveTab}
  >
    <TabsList className="bg-transparent">
      <TabsTrigger value="editor">Editor</TabsTrigger>
      <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
    </TabsList>
    <div className="flex gap-2">{/* View toggle buttons */}</div>
  </Tabs>

  {/* Content sections */}
  <div className="flex-grow flex">
    {view === "split" && (
      <>
        <div className="w-1/2 pr-2">
          <Editor />
        </div>
        <div className="w-1/2 pl-2">
          <TenderRequirements />
        </div>
      </>
    )}
    {view === "editor" && <Editor />}
    {view === "dashboard" && <Dashboard />}
  </div>

  {/* Configuration popup */}
  {showConfigPopup && (
    <ConfigureRequirementsPopup onClose={() => setShowConfigPopup(false)} />
  )}
</div>

Props¶

No props - page component with optional URL parameters

Components Used¶

Components¶

API Routes¶

/api/workspace/save - Saves document state
/api/workspace/load - Loads document state
/api/workspace/drafts - Manages draft documents

Routes to Page¶

Direct: /workspace (new document)
With state: /workspace/[stateID] (existing document)
From: Documents page via document selection

Dependencies¶

import { useWorkspaceContext } from "@/components/Editor/WorkspaceContext";
import { useLoading } from "@/components/LoadingContext";
import { useLoadingFetch } from "@/hooks/useLoadingFetch";
import { Editor } from "@/components/workspace/Editor";
import TenderRequirements from "@/components/tender-requirements";
import { ConfigureRequirementsPopup } from "@/components/Editor/configureRequirementsPopup";
import { Dashboard } from "@/components/workspace/Dashboard";
import { initializeSocket } from "@/lib/socket-utils";

Notes¶

Requires authentication
Utilizes WebSockets for real-time collaboration
Supports multiple view modes for different editing preferences
Maintains document state persistence through custom context providers
Integrates with AI services for content generation and analysis