feat(editor): Implement AI Assistant chat UI (#9300)

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -1,11 +1,16 @@
 <template>
 	<div>
-		<aside :class="{ [$style.nodeCreatorScrim]: true, [$style.active]: showScrim }" />
+		<aside
+			:class="{
+				[$style.nodeCreatorScrim]: true,
+				[$style.active]: showScrim,
+			}"
+		/>
 		<SlideTransition>
 			<div
 				v-if="active"
 				ref="nodeCreator"
-				:class="$style.nodeCreator"
+				:class="{ [$style.nodeCreator]: true, [$style.chatOpened]: chatSidebarOpen }"
 				:style="nodeCreatorInlineStyle"
 				data-test-id="node-creator"
 				@dragover="onDragOver"
@@ -32,6 +37,7 @@ import { useActionsGenerator } from './composables/useActionsGeneration';
 import NodesListPanel from './Panel/NodesListPanel.vue';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useUIStore } from '@/stores/ui.store';
+import { useAIStore } from '@/stores/ai.store';
 import { DRAG_EVENT_DATA_KEY } from '@/constants';
 
 export interface Props {
@@ -47,6 +53,7 @@ const emit = defineEmits<{
 	(event: 'nodeTypeSelected', value: string[]): void;
 }>();
 const uiStore = useUIStore();
+const aiStore = useAIStore();
 
 const { setShowScrim, setActions, setMergeNodes } = useNodeCreatorStore();
 const { generateMergedNodesAndActions } = useActionsGenerator();
@@ -60,6 +67,8 @@ const showScrim = computed(() => useNodeCreatorStore().showScrim);
 
 const viewStacksLength = computed(() => useViewStacks().viewStacks.length);
 
+const chatSidebarOpen = computed(() => aiStore.assistantChatOpen);
+
 const nodeCreatorInlineStyle = computed(() => {
 	return { top: `${uiStore.bannersHeight + uiStore.headerHeight}px` };
 });
@@ -168,6 +177,10 @@ onBeforeUnmount(() => {
 	z-index: 200;
 	width: $node-creator-width;
 	color: $node-creator-text-color;
+
+	&.chatOpened {
+		right: $chat-width;
+	}
 }
 
 .nodeCreatorScrim {