Implement web configuration creation flow by adding support for insertion indices and creation state to message handlers and hooks

Author: robertpiosik

apps/editor/src/views/settings/backend/message-handlers/handle-create-web-configuration.ts

@@ -1,13 +1,22 @@
 import { CreateWebConfigurationMessage } from '@/views/settings/types/messages'
 import { create } from '@/views/shared/actions/web/create'
+import { SettingsProvider } from '../settings-provider'
+import { config_web_configuration_to_ui_format } from '@/utils/web-configuration-format-converters'
 
 export const handle_create_web_configuration = async (
+  provider: SettingsProvider,
   message: CreateWebConfigurationMessage
 ): Promise<void> => {
-  if (!message.web_configuration_id) {
-    await create({
-      placement: message.create_on_top ? 'top' : 'bottom',
-      reference_index: message.insertion_index
+  const result = await create({
+    placement: message.create_on_top ? 'top' : 'bottom',
+    reference_index: message.insertion_index
+  })
+
+  if (result) {
+    provider.postMessage({
+      command: 'START_WEB_CONFIGURATION_CREATION',
+      web_configuration: config_web_configuration_to_ui_format(result.config),
+      insertion_index: result.insertion_index
     })
   }
 }

apps/editor/src/views/settings/backend/message-handlers/handle-update-web-configuration.ts

@@ -9,7 +9,9 @@ export const handle_update_web_configuration = async (
   const result = await update({
     updating_web_configuration: message.updating_web_configuration,
     updated_web_configuration: message.updated_web_configuration,
-    origin: message.origin
+    origin: message.origin,
+    is_new: message.is_new,
+    insertion_index: message.insertion_index
   })
 
   if (result.success) {

apps/editor/src/views/settings/backend/settings-provider.ts

@@ -239,7 +239,7 @@ export class SettingsProvider {
         } else if (message.command == 'DELETE_WEB_CONFIGURATION') {
           await handle_delete_web_configuration(message.name)
         } else if (message.command == 'CREATE_WEB_CONFIGURATION') {
-          await handle_create_web_configuration(message)
+          await handle_create_web_configuration(this, message)
         } else if (message.command == 'PICK_CHATBOT') {
           await handle_pick_chatbot(this, message)
         } else if (message.command == 'PICK_MODEL') {

apps/editor/src/views/settings/frontend/Settings.tsx

@@ -20,7 +20,9 @@ export const Settings = () => {
     set_updating_web_configuration,
     set_updated_web_configuration,
     edit_web_configuration_cancel_handler,
-    edit_web_configuration_save_handler
+    edit_web_configuration_save_handler,
+    set_is_new_web_configuration,
+    set_web_configuration_insertion_index
   } = use_web_configuration_editing(vscode)
 
   const {
@@ -202,6 +204,8 @@ export const Settings = () => {
           )
           if (config) {
             set_updating_web_configuration(config)
+            set_is_new_web_configuration(false)
+            set_web_configuration_insertion_index(undefined)
           }
         }}
         on_delete_web_configuration={

apps/editor/src/views/settings/frontend/hooks/use-web-configuration-editing.ts

@@ -8,6 +8,12 @@ export const use_web_configuration_editing = (vscode: any) => {
     useState<WebConfiguration>()
   const [updated_web_configuration, set_updated_web_configuration] =
     useState<WebConfiguration>()
+  const [is_new_web_configuration, set_is_new_web_configuration] =
+    useState(false)
+  const [
+    web_configuration_insertion_index,
+    set_web_configuration_insertion_index
+  ] = useState<number>()
 
   useEffect(() => {
     set_updated_web_configuration(updating_web_configuration)
@@ -19,7 +25,8 @@ export const use_web_configuration_editing = (vscode: any) => {
         command: 'UPDATE_WEB_CONFIGURATION',
         updating_web_configuration: updating_web_configuration!,
         updated_web_configuration: updated_web_configuration,
-        origin: 'cancel'
+        origin: 'cancel',
+        is_new: is_new_web_configuration
       })
     } else {
       set_updating_web_configuration(undefined)
@@ -32,7 +39,9 @@ export const use_web_configuration_editing = (vscode: any) => {
         command: 'UPDATE_WEB_CONFIGURATION',
         updating_web_configuration: updating_web_configuration!,
         updated_web_configuration: updated_web_configuration,
-        origin: 'save'
+        origin: 'save',
+        is_new: is_new_web_configuration,
+        insertion_index: web_configuration_insertion_index
       })
     }
   }
@@ -43,6 +52,14 @@ export const use_web_configuration_editing = (vscode: any) => {
       if (message.command == 'WEB_CONFIGURATION_UPDATED') {
         set_updating_web_configuration(undefined)
         set_updated_web_configuration(undefined)
+        set_is_new_web_configuration(false)
+        set_web_configuration_insertion_index(undefined)
+      } else if (message.command == 'START_WEB_CONFIGURATION_CREATION') {
+        const msg = message as any
+        set_updating_web_configuration(msg.web_configuration)
+        set_updated_web_configuration(msg.web_configuration)
+        set_is_new_web_configuration(true)
+        set_web_configuration_insertion_index(msg.insertion_index)
       }
     }
 
@@ -55,6 +72,8 @@ export const use_web_configuration_editing = (vscode: any) => {
     set_updating_web_configuration,
     set_updated_web_configuration,
     edit_web_configuration_cancel_handler,
-    edit_web_configuration_save_handler
+    edit_web_configuration_save_handler,
+    set_is_new_web_configuration,
+    set_web_configuration_insertion_index
   }
 }

apps/editor/src/views/settings/types/messages.ts

@@ -253,6 +253,8 @@ export interface UpdateWebConfigurationMessage {
   updating_web_configuration: WebConfiguration
   updated_web_configuration: WebConfiguration
   origin?: 'cancel' | 'save'
+  is_new?: boolean
+  insertion_index?: number
 }
 
 export interface CreateApiConfigurationMessage {
@@ -489,6 +491,12 @@ export interface WebConfigurationUpdatedMessage {
   command: 'WEB_CONFIGURATION_UPDATED'
 }
 
+export interface StartWebConfigurationCreationMessage {
+  command: 'START_WEB_CONFIGURATION_CREATION'
+  web_configuration: WebConfiguration
+  insertion_index?: number
+}
+
 export interface StartApiConfigurationCreationMessage {
   command: 'START_API_CONFIGURATION_CREATION'
   api_configuration: ApiConfiguration
@@ -549,6 +557,7 @@ export type BackendMessage =
   | NewlyPickedChatbotMessage
   | NewlyPickedReasoningEffortMessage
   | WebConfigurationUpdatedMessage
+  | StartWebConfigurationCreationMessage
   | StartApiConfigurationCreationMessage
   | ApiConfigurationUpdatedMessage
   | NewlyPickedModelProviderMessage