@@ -32,6 +32,7 @@ import type { AutofillBuildParameter } from "utils/richParameters";
3232import { CreateWorkspacePageViewExperimental } from "./CreateWorkspacePageViewExperimental" ;
3333export const createWorkspaceModes = [ "form" , "auto" , "duplicate" ] as const ;
3434export type CreateWorkspaceMode = ( typeof createWorkspaceModes ) [ number ] ;
35+ import { API } from "api/api" ;
3536import {
3637type CreateWorkspacePermissions ,
3738createWorkspaceChecks ,
@@ -47,8 +48,8 @@ const CreateWorkspacePageExperimental: FC = () => {
4748
4849const [ currentResponse , setCurrentResponse ] =
4950useState < DynamicParametersResponse | null > ( null ) ;
50- const [ wsResponseId , setWSResponseId ] = useState < number > ( 0 ) ;
51- const sendMessage = ( message : DynamicParametersRequest ) => { } ;
51+ const [ wsResponseId , setWSResponseId ] = useState < number > ( - 1 ) ;
52+ const webSocket = useRef < WebSocket | null > ( null ) ;
5253
5354const customVersionId = searchParams . get ( "version" ) ?? undefined ;
5455const defaultName = searchParams . get ( "name" ) ;
@@ -80,6 +81,59 @@ const CreateWorkspacePageExperimental: FC = () => {
8081const realizedVersionId =
8182customVersionId ?? templateQuery . data ?. active_version_id ;
8283
84+ // Initialize the WebSocket connection when there is a valid template version ID
85+ useEffect ( ( ) => {
86+ if ( ! realizedVersionId ) {
87+ return ;
88+ }
89+
90+ if ( webSocket . current ) {
91+ webSocket . current . close ( ) ;
92+ }
93+
94+ const socket = API . templateVersionDynamicParameters ( realizedVersionId ) ;
95+
96+ socket . addEventListener ( "message" , ( event ) => {
97+ try {
98+ const response = JSON . parse ( event . data ) as DynamicParametersResponse ;
99+
100+ if ( response && response . id >= wsResponseId ) {
101+ setCurrentResponse ( ( prev ) => {
102+ if ( prev ?. id === response . id ) {
103+ return prev ;
104+ }
105+ return response ;
106+ } ) ;
107+ }
108+ } catch ( error ) {
109+ console . error ( "Failed to parse WebSocket message:" , error ) ;
110+ }
111+ } ) ;
112+
113+ webSocket . current = socket ;
114+
115+ return ( ) => {
116+ if ( webSocket . current ) {
117+ webSocket . current . close ( ) ;
118+ }
119+ } ;
120+ } , [ realizedVersionId ] ) ;
121+
122+ const sendMessage =
123+ ( formValues :Record < string , string > ) => {
124+ setWSResponseId ( prevId => {
125+ const request :DynamicParametersRequest = {
126+ id :prevId + 1 ,
127+ inputs :formValues ,
128+ } ;
129+ if ( webSocket . current && webSocket . current . readyState === WebSocket . OPEN ) {
130+ webSocket . current . send ( JSON . stringify ( request ) ) ;
131+ return prevId + 1 ;
132+ }
133+ return prevId ;
134+ } )
135+ } ;
136+
83137const organizationId = templateQuery . data ?. organization_id ;
84138
85139const {
@@ -210,7 +264,6 @@ const CreateWorkspacePageExperimental: FC = () => {
210264parameters = { sortedParams }
211265presets = { templateVersionPresetsQuery . data ?? [ ] }
212266creatingWorkspace = { createWorkspaceMutation . isLoading }
213- setWSResponseId = { setWSResponseId }
214267sendMessage = { sendMessage }
215268onCancel = { ( ) => {
216269navigate ( - 1 ) ;