Ace editor issues

packages/client/hmi-client/src/ace-config.ts

@@ -0,0 +1,42 @@
+import ace from 'ace-builds';
+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
+import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url';
+import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url';
+import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url';
+import modePythonUrl from 'ace-builds/src-noconflict/mode-python?url';
+import modeJuliaUrl from 'ace-builds/src-noconflict/mode-julia?url';
+import modeRUrl from 'ace-builds/src-noconflict/mode-r?url';
+import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url';
+import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
+import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url';
+import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url';
+import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
+import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
+import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url';
+import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url';
+import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url';
+import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url';
+import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url';
+import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url';
+import 'ace-builds/src-noconflict/ext-language_tools';
+
+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
+ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl);
+ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl);
+ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl);
+ace.config.setModuleUrl('ace/mode/python', modePythonUrl);
+ace.config.setModuleUrl('ace/mode/julia', modeJuliaUrl);
+ace.config.setModuleUrl('ace/mode/r', modeRUrl);
+ace.config.setModuleUrl('ace/theme/github', themeGithubUrl);
+ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
+ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl);
+ace.config.setModuleUrl('ace/mode/base', workerBaseUrl);
+ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
+ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
+ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl);
+ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl);
+ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl);
+ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl);
+ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl);
+ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl);
+ace.require('ace/ext/language_tools');

packages/client/hmi-client/src/components/code/tera-code.vue

@@ -185,9 +185,7 @@
 import { computed, ref, watch } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
-import 'ace-builds/src-noconflict/mode-python';
-import 'ace-builds/src-noconflict/mode-julia';
-import 'ace-builds/src-noconflict/mode-r';
+import '@/ace-config';
 import Button from 'primevue/button';
 import {
 	getCodeAsset,

packages/client/hmi-client/src/components/widgets/tera-import-github-file.vue

@@ -200,6 +200,7 @@ import { AssetType, FileCategory } from '@/types/Types';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import { getModeForPath } from 'ace-builds/src-noconflict/ext-modelist';
+import '@/ace-config';
 import Checkbox from 'primevue/checkbox';
 import Dropdown, { DropdownChangeEvent } from 'primevue/dropdown';
 import Breadcrumb from 'primevue/breadcrumb';

packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config.vue

@@ -268,6 +268,7 @@ import { VAceEditor } from 'vue3-ace-editor';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
 import { KernelSessionManager } from '@/services/jupyter';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
+import '@/ace-config';
 import LoadingWateringCan from '@/assets/images/lottie-loading-wateringCan.json';
 import EmptySeed from '@/assets/images/lottie-empty-seed.json';
 import { Vue3Lottie } from 'vue3-lottie';

packages/client/hmi-client/src/workflow/ops/model-coupling/tera-model-coupling.vue

@@ -96,6 +96,7 @@ import { useProjects } from '@/composables/project';
 import { logger } from '@/utils/logger';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
+import '@/ace-config';
 import { v4 as uuidv4 } from 'uuid';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';

packages/client/hmi-client/src/workflow/ops/model-edit/tera-model-edit.vue

@@ -19,15 +19,14 @@
 						outlined
 						severity="secondary"
 						size="small"
-						@click="runFromCodeWrapper(editor?.getValue() as string)"
+						@click="runFromCodeWrapper"
 					/>
 				</div>
 				<Suspense>
 					<tera-notebook-jupyter-input
 						:kernel-manager="kernelManager"
-						:defaultOptions="sampleAgentQuestions"
+						:default-options="sampleAgentQuestions"
 						@llm-output="(data: any) => appendCode(data, 'code')"
-						class="ai-assistant-container"
 					/>
 				</Suspense>
 				<v-ace-editor
@@ -84,7 +83,7 @@
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import type { Model } from '@/types/Types';
@@ -96,6 +95,7 @@ import { useProjects } from '@/composables/project';
 import { logger } from '@/utils/logger';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
+import '@/ace-config';
 import { v4 as uuidv4 } from 'uuid';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
@@ -152,23 +152,28 @@ const sampleAgentQuestions = [
 	'Rename the transition infection to inf.'
 ];
 
-const codeText = ref(
-	'# This environment contains the variable "model" \n# which is displayed on the right'
-);
+const defaultCodeText =
+	'# This environment contains the variable "model" \n# which is displayed on the right';
+const codeText = ref(defaultCodeText);
 
 const appendCode = (data: any, property: string) => {
-	codeText.value = codeText.value.concat(' \n', data.content[property] as string);
+	const code = data.content[property] as string;
+	if (code) {
+		codeText.value = (codeText.value ?? defaultCodeText).concat(' \n', code);
+	} else {
+		logger.error('No code to append');
+	}
 };
 
 const syncWithMiraModel = (data: any) => {
 	amr.value = data.content['application/json'];
 };
 
 // Reset model, then execute the code
-const runFromCodeWrapper = (code: string) => {
+const runFromCodeWrapper = () => {
 	// Reset model
 	kernelManager.sendMessage('reset_request', {}).register('reset_response', () => {
-		runFromCode(code);
+		runFromCode(editor?.getValue() as string);
 	});
 };
 
@@ -220,7 +225,7 @@ const handleResetResponse = (data: any) => {
 	if (data.content.success) {
 		// updateStratifyGroupForm(blankStratifyGroup);
 
-		codeText.value = '';
+		codeText.value = defaultCodeText;
 		saveCodeToState('', false);
 
 		logger.info('Model reset');
@@ -250,7 +255,7 @@ const inputChangeHandler = async () => {
 	amr.value = await getModel(modelId);
 	if (!amr.value) return;
 
-	codeText.value = props.node.state.modelEditCodeHistory?.[0]?.code;
+	codeText.value = props.node.state.modelEditCodeHistory?.[0]?.code ?? defaultCodeText;
 
 	// Create a new session and context based on model
 	try {
@@ -265,7 +270,7 @@ const inputChangeHandler = async () => {
 		}
 
 		if (codeText.value && codeText.value.length > 0) {
-			runFromCodeWrapper(codeText.value);
+			runFromCodeWrapper();
 		}
 	} catch (error) {
 		logger.error(`Error initializing Jupyter session: ${error}`);
@@ -375,10 +380,6 @@ onUnmounted(() => {
 	align-items: center;
 }
 
-.ai-assistant-container {
-	margin-left: var(--gap);
-}
-
 .preview-container {
 	display: flex;
 	flex-direction: column;

packages/client/hmi-client/src/workflow/ops/model-from-code/tera-model-from-code.vue

@@ -144,9 +144,7 @@ import { cloneDeep, isEmpty } from 'lodash';
 import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 import { VAceEditor } from 'vue3-ace-editor';
-import 'ace-builds/src-noconflict/mode-python';
-import 'ace-builds/src-noconflict/mode-julia';
-import 'ace-builds/src-noconflict/mode-r';
+import '@/ace-config';
 import { AssetType, ProgrammingLanguage } from '@/types/Types';
 import type { Card, Code, DocumentAsset, Model } from '@/types/Types';
 import { AssetBlock, WorkflowNode, WorkflowOutput } from '@/types/workflow';

packages/client/hmi-client/src/workflow/ops/stratify-mira/tera-stratify-mira.vue

@@ -115,6 +115,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import { useToastService } from '@/services/toast';
+import '@/ace-config';
 
 /* Jupyter imports */
 import { KernelSessionManager } from '@/services/jupyter';