Display highlight on newly generated AI events

newIDE/app/scripts/theme-templates/theme.json

@@ -441,6 +441,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#9932cc"
+        },
+        "gradient-color-2": {
+          "value": "#fa7ff1"
+        },
+        "gradient-color-3": {
+          "value": "#9932cc"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#494949"

newIDE/app/src/AiGeneration/AskAiEditorContainer.js

@@ -2,7 +2,10 @@
 import * as React from 'react';
 import { type I18n as I18nType } from '@lingui/core';
 import { I18n } from '@lingui/react';
-import { type RenderEditorContainerPropsWithRef } from '../MainFrame/EditorContainers/BaseEditor';
+import {
+  type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
+} from '../MainFrame/EditorContainers/BaseEditor';
 import { type ObjectWithContext } from '../ObjectsList/EnumerateObjects';
 import Paper from '../UI/Paper';
 import { AiRequestChat, type AiRequestChatInterface } from './AiRequestChat';
@@ -131,7 +134,9 @@ const useProcessFunctionCalls = ({
     string,
     Array<EditorFunctionCallResult>
   ) => void,
-  onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+  onSceneEventsModifiedOutsideEditor: (
+    changes: SceneEventsOutsideEditorChanges
+  ) => void,
   onExtensionInstalled: (extensionNames: Array<string>) => void,
 |}) => {
   const { ensureExtensionInstalled } = useEnsureExtensionInstalled({
@@ -473,7 +478,9 @@ type Props = {|
         | 'none',
     |}
   ) => void,
-  onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+  onSceneEventsModifiedOutsideEditor: (
+    changes: SceneEventsOutsideEditorChanges
+  ) => void,
   onExtensionInstalled: (extensionNames: Array<string>) => void,
 |};
 
@@ -487,7 +494,9 @@ export type AskAiEditorInterface = {|
     objectWithContext: ObjectWithContext
   ) => void,
   onSceneObjectsDeleted: (scene: gdLayout) => void,
-  onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+  onSceneEventsModifiedOutsideEditor: (
+    changes: SceneEventsOutsideEditorChanges
+  ) => void,
   startNewChat: () => void,
 |};
 

newIDE/app/src/EditorFunctions/EditorFunctionCallRunner.js

@@ -9,6 +9,7 @@ import {
   type EventsGenerationOptions,
   type AssetSearchAndInstallOptions,
   type AssetSearchAndInstallResult,
+  type SceneEventsOutsideEditorChanges,
 } from '.';
 
 export type EditorFunctionCallResult =
@@ -35,7 +36,9 @@ export type ProcessEditorFunctionCallsOptions = {|
   generateEvents: (
     options: EventsGenerationOptions
   ) => Promise<EventsGenerationResult>,
-  onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+  onSceneEventsModifiedOutsideEditor: (
+    changes: SceneEventsOutsideEditorChanges
+  ) => void,
   ensureExtensionInstalled: (options: {|
     extensionName: string,
   |}) => Promise<void>,

newIDE/app/src/EditorFunctions/index.js

@@ -112,6 +112,11 @@ export type EditorCallbacks = {|
   ) => void,
 |};
 
+export type SceneEventsOutsideEditorChanges = {|
+  scene: gdLayout,
+  newOrChangedAiGeneratedEventIds: Set<string>,
+|};
+
 /**
  * A function that does something in the editor on the given project.
  */
@@ -132,7 +137,9 @@ export type EditorFunction = {|
     generateEvents: (
       options: EventsGenerationOptions
     ) => Promise<EventsGenerationResult>,
-    onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+    onSceneEventsModifiedOutsideEditor: (
+      changes: SceneEventsOutsideEditorChanges
+    ) => void,
     ensureExtensionInstalled: (options: {|
       extensionName: string,
     |}) => Promise<void>,
@@ -2236,7 +2243,10 @@ const addSceneEvents: EditorFunction = {
           changes,
           aiGeneratedEvent.id
         );
-        onSceneEventsModifiedOutsideEditor(scene);
+        onSceneEventsModifiedOutsideEditor({
+          scene,
+          newOrChangedAiGeneratedEventIds: new Set([aiGeneratedEvent.id]),
+        });
 
         const resultMessage =
           aiGeneratedEvent.resultMessage ||

newIDE/app/src/EventsSheet/EventsTree/ClassNames.js

@@ -27,6 +27,7 @@ export const eventsTreeWithSearchResults = 'with-search-results';
 export const dropIndicator = 'drop-indicator';
 export const cantDropIndicator = 'cant-drop-indicator';
 export const handle = 'move-handle';
+export const aiGeneratedEventHandle = 'ai-generated-event-move-handle';
 
 export const linkContainer = 'link-container';
 

newIDE/app/src/EventsSheet/EventsTree/index.js

@@ -16,6 +16,7 @@ import {
   eventsTree,
   eventsTreeWithSearchResults,
   handle,
+  aiGeneratedEventHandle,
   icon,
 } from './ClassNames';
 import {
@@ -134,6 +135,7 @@ type EventsContainerProps = {|
   windowSize: WindowSizeType,
 
   idPrefix: string,
+  highlightedAiGeneratedEventIds: Set<string>,
 |};
 
 /**
@@ -151,6 +153,7 @@ const EventContainer = (props: EventsContainerProps) => {
     onEventContextMenu,
     projectScopedContainersAccessor,
     onUpdate,
+    highlightedAiGeneratedEventIds,
   } = props;
   const forceUpdate = useForceUpdate();
   const containerRef = React.useRef<?HTMLDivElement>(null);
@@ -204,7 +207,16 @@ const EventContainer = (props: EventsContainerProps) => {
     >
       {!!EventComponent && (
         <div style={styles.eventComponentContainer}>
-          {props.connectDragSource(<div className={handle} />)}
+          {props.connectDragSource(
+            <div
+              className={classNames({
+                [handle]: true,
+                [aiGeneratedEventHandle]: highlightedAiGeneratedEventIds.has(
+                  event.getAiGeneratedEventId()
+                ),
+              })}
+            />
+          )}
           <div style={styles.container}>
             <EventComponent
               project={project}
@@ -348,6 +360,8 @@ type EventsTreeProps = {|
 
   preferences: Preferences,
   tutorials: ?Array<Tutorial>,
+
+  highlightedAiGeneratedEventIds: Set<string>,
 |};
 
 export type EventsTreeInterface = {|
@@ -770,6 +784,9 @@ const EventsTree = React.forwardRef<EventsTreeProps, EventsTreeInterface>(
                   connectDragSource={connectDragSource}
                   windowSize={props.windowSize}
                   idPrefix={`event-${node.relativeNodePath.join('-')}`}
+                  highlightedAiGeneratedEventIds={
+                    props.highlightedAiGeneratedEventIds
+                  }
                 />
                 {draggedNode && (
                   <DropContainer

newIDE/app/src/EventsSheet/UseHighlightedAiGeneratedEvent.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from 'react';
+
+type Props = {|
+  isActive: boolean,
+|};
+
+type Output = {|
+  addNewAiGeneratedEventIds: (ids: Set<string>) => void,
+  highlightedAiGeneratedEventIds: Set<string>,
+|};
+
+export const useHighlightedAiGeneratedEvent = ({ isActive }: Props): Output => {
+  const [
+    highlightedAiGeneratedEventIds,
+    setHighlightedAiGeneratedEventIds,
+  ] = React.useState<Set<string>>(() => new Set());
+
+  const resetHighlightsOnNextAddition = React.useRef(false);
+
+  React.useEffect(
+    () => {
+      // When the events sheet is "navigated away", then next time there is a generated event,
+      // the previously highlighted event(s) will be reset (because we consider the user saw them).
+      if (!isActive) {
+        resetHighlightsOnNextAddition.current = true;
+      }
+    },
+    [isActive]
+  );
+
+  const addNewAiGeneratedEventIds = React.useCallback((ids: Set<string>) => {
+    setHighlightedAiGeneratedEventIds(prev => {
+      const newSet = new Set(
+        resetHighlightsOnNextAddition.current ? new Set() : prev
+      );
+      ids.forEach(id => newSet.add(id));
+
+      resetHighlightsOnNextAddition.current = false;
+
+      return newSet;
+    });
+  }, []);
+
+  return { addNewAiGeneratedEventIds, highlightedAiGeneratedEventIds };
+};

newIDE/app/src/EventsSheet/index.js

@@ -119,6 +119,7 @@ import { ProjectScopedContainersAccessor } from '../InstructionOrExpression/Even
 import LocalVariablesDialog from '../VariablesList/LocalVariablesDialog';
 import GlobalAndSceneVariablesDialog from '../VariablesList/GlobalAndSceneVariablesDialog';
 import { type HotReloadPreviewButtonProps } from '../HotReload/HotReloadPreviewButton';
+import { useHighlightedAiGeneratedEvent } from './UseHighlightedAiGeneratedEvent';
 
 const gd: libGDevelop = global.gd;
 
@@ -165,6 +166,7 @@ type ComponentProps = {|
   tutorials: ?Array<Tutorial>,
   leaderboardsManager: ?LeaderboardState,
   shortcutMap: ShortcutMap,
+  highlightedAiGeneratedEventIds: Set<string>,
 |};
 
 type State = {|
@@ -1876,6 +1878,7 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
       tutorials,
       hotReloadPreviewButtonProps,
       windowSize,
+      highlightedAiGeneratedEventIds,
     } = this.props;
     if (!project) return null;
 
@@ -2031,6 +2034,9 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
                   fontSize={preferences.values.eventsSheetZoomLevel}
                   preferences={preferences}
                   tutorials={tutorials}
+                  highlightedAiGeneratedEventIds={
+                    highlightedAiGeneratedEventIds
+                  }
                 />
               )}
               {this.state.showSearchPanel && (
@@ -2227,10 +2233,14 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
   }
 }
 
+type OutOfEditorChanges = {|
+  newOrChangedAiGeneratedEventIds: Set<string>,
+|};
+
 export type EventsSheetInterface = {|
   updateToolbar: () => void,
   onResourceExternallyChanged: ({| identifier: string |}) => void,
-  onEventsModifiedOutsideEditor: () => void,
+  onEventsModifiedOutsideEditor: (changes: OutOfEditorChanges) => void,
 |};
 
 // EventsSheet is a wrapper so that the component can use multiple
@@ -2242,6 +2252,11 @@ const EventsSheet = (props, ref) => {
     onEventsModifiedOutsideEditor,
   }));
 
+  const {
+    highlightedAiGeneratedEventIds,
+    addNewAiGeneratedEventIds,
+  } = useHighlightedAiGeneratedEvent({ isActive: props.isActive });
+
   const component = React.useRef<?EventsSheetComponentWithoutHandle>(null);
   const updateToolbar = () => {
     if (component.current) component.current.updateToolbar();
@@ -2250,7 +2265,8 @@ const EventsSheet = (props, ref) => {
     if (component.current)
       component.current.onResourceExternallyChanged(resourceInfo);
   };
-  const onEventsModifiedOutsideEditor = () => {
+  const onEventsModifiedOutsideEditor = (changes: OutOfEditorChanges) => {
+    addNewAiGeneratedEventIds(changes.newOrChangedAiGeneratedEventIds);
     if (component.current) component.current.onEventsModifiedOutsideEditor();
   };
 
@@ -2269,6 +2285,7 @@ const EventsSheet = (props, ref) => {
       leaderboardsManager={leaderboardsManager}
       shortcutMap={shortcutMap}
       windowSize={windowSize}
+      highlightedAiGeneratedEventIds={highlightedAiGeneratedEventIds}
       {...props}
     />
   );

newIDE/app/src/MainFrame/EditorContainers/BaseEditor.js

@@ -28,6 +28,11 @@ export type EditorContainerExtraProps = {|
   storageProviders?: Array<StorageProvider>,
 |};
 
+export type SceneEventsOutsideEditorChanges = {|
+  scene: gdLayout,
+  newOrChangedAiGeneratedEventIds: Set<string>,
+|};
+
 export type RenderEditorContainerProps = {|
   isActive: boolean,
   projectItemName: ?string,
@@ -166,7 +171,9 @@ export type RenderEditorContainerProps = {|
   onSceneObjectsDeleted: (scene: gdLayout) => void,
 
   // Events editing
-  onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+  onSceneEventsModifiedOutsideEditor: (
+    changes: SceneEventsOutsideEditorChanges
+  ) => void,
 
   onExtractAsExternalLayout: (name: string) => void,
   onExtractAsEventBasedObject: (

newIDE/app/src/MainFrame/EditorContainers/CustomObjectEditorContainer.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import { prepareInstancesEditorSettings } from '../../InstancesEditor/InstancesEditorSettings';
 import {
@@ -106,7 +107,7 @@ export class CustomObjectEditorContainer extends React.Component<RenderEditorCon
     // No thing to be done.
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/EditorContainers/DebuggerEditorContainer.js

@@ -6,6 +6,7 @@ import Debugger from '../../Debugger';
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import SubscriptionChecker, {
   type SubscriptionCheckerInterface,
@@ -61,7 +62,7 @@ export class DebuggerEditorContainer extends React.Component<
     // No thing to be done.
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/EditorContainers/EventsEditorContainer.js

@@ -5,6 +5,7 @@ import { sendEventsExtractedAsFunction } from '../../Utils/Analytics/EventSender
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import { ProjectScopedContainersAccessor } from '../../InstructionOrExpression/EventsScope';
 import { type ObjectWithContext } from '../../ObjectsList/EnumerateObjects';
@@ -57,9 +58,13 @@ export class EventsEditorContainer extends React.Component<RenderEditorContainer
     // No thing to be done.
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
-    if (this.getLayout() === scene) {
-      if (this.editor) this.editor.onEventsModifiedOutsideEditor();
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
+    if (this.getLayout() === changes.scene) {
+      if (this.editor)
+        this.editor.onEventsModifiedOutsideEditor({
+          newOrChangedAiGeneratedEventIds:
+            changes.newOrChangedAiGeneratedEventIds,
+        });
     }
   }
 

newIDE/app/src/MainFrame/EditorContainers/EventsFunctionsExtensionEditorContainer.js

@@ -4,6 +4,7 @@ import EventsFunctionsExtensionEditor from '../../EventsFunctionsExtensionEditor
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import { type ObjectWithContext } from '../../ObjectsList/EnumerateObjects';
 
@@ -50,7 +51,7 @@ export class EventsFunctionsExtensionEditorContainer extends React.Component<Ren
     // No thing to be done.
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/EditorContainers/ExternalEventsEditorContainer.js

@@ -7,6 +7,7 @@ import PlaceholderMessage from '../../UI/PlaceholderMessage';
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import ExternalPropertiesDialog, {
   type ExternalProperties,
@@ -94,7 +95,7 @@ export class ExternalEventsEditorContainer extends React.Component<
     // No thing to be done.
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/EditorContainers/ExternalLayoutEditorContainer.js

@@ -12,6 +12,7 @@ import PlaceholderMessage from '../../UI/PlaceholderMessage';
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import ExternalPropertiesDialog, {
   type ExternalProperties,
@@ -152,7 +153,7 @@ export class ExternalLayoutEditorContainer extends React.Component<
     }
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js

@@ -2,7 +2,10 @@
 import * as React from 'react';
 import { I18n } from '@lingui/react';
 import { type I18n as I18nType } from '@lingui/core';
-import { type RenderEditorContainerPropsWithRef } from '../BaseEditor';
+import {
+  type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
+} from '../BaseEditor';
 import {
   type FileMetadataAndStorageProviderName,
   type FileMetadata,
@@ -172,7 +175,9 @@ export type HomePageEditorInterface = {|
     objectWithContext: ObjectWithContext
   ) => void,
   onSceneObjectsDeleted: (scene: gdLayout) => void,
-  onSceneEventsModifiedOutsideEditor: (scene: gdLayout) => void,
+  onSceneEventsModifiedOutsideEditor: (
+    scene: SceneEventsOutsideEditorChanges
+  ) => void,
 |};
 
 export const HomePage = React.memo<Props>(
@@ -489,7 +494,7 @@ export const HomePage = React.memo<Props>(
       }, []);
 
       const onSceneEventsModifiedOutsideEditor = React.useCallback(
-        (scene: gdLayout) => {
+        (changes: SceneEventsOutsideEditorChanges) => {
           // No thing to be done.
         },
         []

newIDE/app/src/MainFrame/EditorContainers/ResourcesEditorContainer.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import ResourcesEditor from '../../ResourcesEditor';
 import { type ObjectWithContext } from '../../ObjectsList/EnumerateObjects';
@@ -45,7 +46,7 @@ export class ResourcesEditorContainer extends React.Component<RenderEditorContai
     // No thing to be done.
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/EditorContainers/SceneEditorContainer.js

@@ -9,6 +9,7 @@ import {
 import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
 } from './BaseEditor';
 import { ProjectScopedContainersAccessor } from '../../InstructionOrExpression/EventsScope';
 import { type ObjectWithContext } from '../../ObjectsList/EnumerateObjects';
@@ -93,7 +94,7 @@ export class SceneEditorContainer extends React.Component<RenderEditorContainerP
     }
   }
 
-  onSceneEventsModifiedOutsideEditor(scene: gdLayout) {
+  onSceneEventsModifiedOutsideEditor(changes: SceneEventsOutsideEditorChanges) {
     // No thing to be done.
   }
 

newIDE/app/src/MainFrame/index.js

@@ -61,7 +61,10 @@ import { renderCustomObjectEditorContainer } from './EditorContainers/CustomObje
 import { renderHomePageContainer } from './EditorContainers/HomePage';
 import { renderAskAiEditorContainer } from '../AiGeneration/AskAiEditorContainer';
 import { renderResourcesEditorContainer } from './EditorContainers/ResourcesEditorContainer';
-import { type RenderEditorContainerPropsWithRef } from './EditorContainers/BaseEditor';
+import {
+  type RenderEditorContainerPropsWithRef,
+  type SceneEventsOutsideEditorChanges,
+} from './EditorContainers/BaseEditor';
 import ErrorBoundary, {
   getEditorErrorBoundaryProps,
 } from '../UI/ErrorBoundary';
@@ -2406,11 +2409,11 @@ const MainFrame = (props: Props) => {
   );
 
   const onSceneEventsModifiedOutsideEditor = React.useCallback(
-    (scene: gdLayout) => {
+    (changes: SceneEventsOutsideEditorChanges) => {
       for (const editor of state.editorTabs.editors) {
         const { editorRef } = editor;
         if (editorRef) {
-          editorRef.onSceneEventsModifiedOutsideEditor(scene);
+          editorRef.onSceneEventsModifiedOutsideEditor(changes);
         }
       }
     },

newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json

@@ -596,6 +596,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#9932cc"
+        },
+        "gradient-color-2": {
+          "value": "#fa7ff1"
+        },
+        "gradient-color-3": {
+          "value": "#9932cc"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#494949"

newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json

@@ -654,6 +654,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#9932cc"
+        },
+        "gradient-color-2": {
+          "value": "#fa7ff1"
+        },
+        "gradient-color-3": {
+          "value": "#9932cc"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#3E4452"

newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json

@@ -652,14 +652,25 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#9932cc"
+        },
+        "gradient-color-2": {
+          "value": "#fa7ff1"
+        },
+        "gradient-color-3": {
+          "value": "#9932cc"
+        }
+      },
       "move-handle": {
         "background-color": {
-          "value": "#4ab0e4"
+          "value": "#d5d5d5"
         }
       },
       "move-handle-hover": {
         "background-color": {
-          "value": "#84d2ff"
+          "value": "#b6b6b6"
         }
       },
       "line": {

newIDE/app/src/UI/Theme/Global/EventsSheet.css

@@ -27,6 +27,17 @@
   background-color: var(--event-sheet-rst-move-handle-hover-background-color);
 }
 
+.gd-events-sheet .ai-generated-event-move-handle {
+  border-left: 1px solid;
+  border-image: linear-gradient(
+      to bottom,
+      var(--event-sheet-rst-ai-generated-event-move-handle-gradient-color-1),
+      var(--event-sheet-rst-ai-generated-event-move-handle-gradient-color-2),
+      var(--event-sheet-rst-ai-generated-event-move-handle-gradient-color-3)
+    )
+    1;
+}
+
 /**
  * Scaffolding lines on the left
  */
@@ -61,7 +72,7 @@
  * Large selectable area (events)
  */
 .gd-events-sheet .large-selectable {
-  border:  var(--event-sheet-selectable-border) !important;
+  border: var(--event-sheet-selectable-border) !important;
 }
 
 .gd-events-sheet .large-selectable.large-selected {
@@ -134,7 +145,8 @@
 }
 
 .gd-events-sheet .instruction-missing {
-  text-decoration: var(--event-sheet-instruction-parameter-error-color) underline wavy;
+  text-decoration: var(--event-sheet-instruction-parameter-error-color)
+    underline wavy;
 }
 
 .gd-events-sheet .instruction-missing .function-name {
@@ -155,7 +167,7 @@
 .gd-events-sheet .instruction-parameter.objectList,
 .gd-events-sheet .instruction-parameter.objectListOrEmptyIfJustDeclared,
 .gd-events-sheet .instruction-parameter.objectListOrEmptyWithoutPicking {
-  color:var(--event-sheet-instruction-parameter-object-color);
+  color: var(--event-sheet-instruction-parameter-object-color);
   font-weight: bold;
 }
 
@@ -193,17 +205,21 @@
 
 .gd-events-sheet .instruction-parameter .instruction-invalid-parameter {
   color: var(--event-sheet-instruction-parameter-error-color);
-  text-decoration:  var(--event-sheet-instruction-parameter-error-color) underline wavy;
+  text-decoration: var(--event-sheet-instruction-parameter-error-color)
+    underline wavy;
 }
 
 .gd-events-sheet .instruction-parameter .instruction-warning-parameter {
   color: var(--event-sheet-instruction-parameter-warning-color);
-  text-decoration:  var(--event-sheet-instruction-parameter-warning-color) underline wavy;
+  text-decoration: var(--event-sheet-instruction-parameter-warning-color)
+    underline wavy;
 }
 
 .gd-events-sheet .instruction-parameter .instruction-missing-parameter {
   display: inline-flex;
-  background-color: var(--event-sheet-instruction-parameter-error-background-color);
+  background-color: var(
+    --event-sheet-instruction-parameter-error-background-color
+  );
   border-bottom: 1px dashed var(--event-sheet-instruction-parameter-error-color);
   min-width: var(--instruction-missing-parameter-min-width);
   min-height: var(--instruction-missing-parameter-min-height);
@@ -221,7 +237,10 @@
 .gd-events-sheet .with-search-results .rst__rowSearchMatch .move-handle:hover {
   filter: brightness(120%);
 }
-.gd-events-sheet .with-search-results .rst__rowSearchMatch .conditions-container {
+.gd-events-sheet
+  .with-search-results
+  .rst__rowSearchMatch
+  .conditions-container {
   outline: none;
   background-color: var(--event-sheet-events-highlighted-background-color);
 }
@@ -229,7 +248,10 @@
   outline: none;
   background-color: var(--event-sheet-events-highlighted-background-color);
 }
-.gd-events-sheet .with-search-results .rst__rowSearchMatch .local-variables-container {
+.gd-events-sheet
+  .with-search-results
+  .rst__rowSearchMatch
+  .local-variables-container {
   outline: none;
   background-color: var(--event-sheet-events-highlighted-background-color);
 }
@@ -242,7 +264,8 @@
 * Drag'n'drop indicator (events - instructions)
 */
 .gd-events-sheet .drop-indicator {
-  border-top: 2px solid var(--event-sheet-drop-indicator-can-drop-border-top-color);
+  border-top: 2px solid
+    var(--event-sheet-drop-indicator-can-drop-border-top-color);
   height: 0;
   margin-top: -1px;
   margin-bottom: -1px;
@@ -251,7 +274,8 @@
 }
 
 .gd-events-sheet .cant-drop-indicator {
-  border-top: 2px solid var(--event-sheet-drop-indicator-can-drop-border-top-color);
+  border-top: 2px solid
+    var(--event-sheet-drop-indicator-can-drop-border-top-color);
   height: 0;
   margin-top: -1px;
   margin-bottom: -1px;
@@ -270,7 +294,8 @@
 }
 .gd-events-sheet .link-container .instruction-invalid-parameter {
   color: var(--event-sheet-instruction-parameter-error-color);
-  text-decoration:  var(--event-sheet-instruction-parameter-error-color) underline wavy;
+  text-decoration: var(--event-sheet-instruction-parameter-error-color)
+    underline wavy;
 }
 
 .gd-events-sheet .link-container .selectable {

newIDE/app/src/UI/Theme/NordTheme/theme.json

@@ -587,6 +587,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#82a1c1"
+        },
+        "gradient-color-2": {
+          "value": "#c6feff"
+        },
+        "gradient-color-3": {
+          "value": "#82a1c1"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#81A1C1"

newIDE/app/src/UI/Theme/OneDarkTheme/theme.json

@@ -592,6 +592,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#9932cc"
+        },
+        "gradient-color-2": {
+          "value": "#fa7ff1"
+        },
+        "gradient-color-3": {
+          "value": "#9932cc"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#3E4452"

newIDE/app/src/UI/Theme/RosePineTheme/theme.json

@@ -588,6 +588,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#381522"
+        },
+        "gradient-color-2": {
+          "value": "#e77f7c"
+        },
+        "gradient-color-3": {
+          "value": "#381522"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#ebbcba"

newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json

@@ -589,6 +589,17 @@
       }
     },
     "rst": {
+      "ai-generated-event-move-handle": {
+        "gradient-color-1": {
+          "value": "#82a1c1"
+        },
+        "gradient-color-2": {
+          "value": "#c6feff"
+        },
+        "gradient-color-3": {
+          "value": "#82a1c1"
+        }
+      },
       "move-handle": {
         "background-color": {
           "value": "#2799b9"

newIDE/app/src/fixtures/TestProject.js

@@ -467,7 +467,7 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
   var evt = testLayout
     .getEvents()
     .insertNewEvent(project, 'BuiltinCommonInstructions::Standard', 0);
-  testLayout
+  const evt2 = testLayout
     .getEvents()
     .insertNewEvent(project, 'BuiltinCommonInstructions::Standard', 1);
   testLayout
@@ -492,6 +492,8 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
     .getEvents()
     .insertNewEvent(project, 'BuiltinCommonInstructions::Standard', 0);
 
+  evt2.setAiGeneratedEventId('fake-ai-generated-event-id-1');
+
   const groupEvent = gd.asGroupEvent(evt6);
   groupEvent.setName('Group #1');
 

newIDE/app/src/stories/componentStories/EventsSheet/EventsTree.stories.js

@@ -78,6 +78,9 @@ export const DefaultMediumScreenScopeInLayout = () => (
           preferences={initialPreferences}
           tutorials={eventsTreeTutorials}
           onEndEditingEvent={action('end editing event')}
+          highlightedAiGeneratedEventIds={
+            new Set(['fake-ai-generated-event-id-1'])
+          }
         />
       </FixedHeightFlexContainer>
     </div>
@@ -131,6 +134,9 @@ export const DefaultSmallScreenScopeInLayout = () => (
           preferences={initialPreferences}
           tutorials={eventsTreeTutorials}
           onEndEditingEvent={action('end editing event')}
+          highlightedAiGeneratedEventIds={
+            new Set(['fake-ai-generated-event-id-1'])
+          }
         />
       </FixedHeightFlexContainer>
     </div>
@@ -181,6 +187,9 @@ export const DefaultMediumScreenScopeNotInLayout = () => (
           preferences={initialPreferences}
           tutorials={eventsTreeTutorials}
           onEndEditingEvent={action('end editing event')}
+          highlightedAiGeneratedEventIds={
+            new Set(['fake-ai-generated-event-id-1'])
+          }
         />
       </FixedHeightFlexContainer>
     </div>
@@ -234,6 +243,9 @@ export const EmptySmallScreenScopeInALayout = () => (
           preferences={initialPreferences}
           tutorials={eventsTreeTutorials}
           onEndEditingEvent={action('end editing event')}
+          highlightedAiGeneratedEventIds={
+            new Set(['fake-ai-generated-event-id-1'])
+          }
         />
       </FixedHeightFlexContainer>
     </div>