in data editor, show message and block ai prompt if no schema defined

meta_configurator/src/components/panels/ai-prompts/AiPromptsData.vue

@@ -2,6 +2,10 @@
 import AiPromptsTemplate from '@/components/panels/ai-prompts/AiPromptsTemplate.vue';
 import {queryDataConversion, queryDataModification, queryDataQuestion} from '@/utility/openai';
 import {SessionMode} from '@/store/sessionMode';
+import {getDataForMode} from "@/data/useDataLink";
+import _ from 'lodash';
+import ApiKey from "@/components/panels/ai-prompts/ApiKey.vue";
+import Divider from "primevue/divider";
 
 function queryDocumentCreation(apiKey: string, prompt: string, schema: string): Promise<string> {
   return queryDataConversion(apiKey, prompt, schema);
@@ -24,10 +28,14 @@ function queryDocumentQuestion(
 ): Promise<string> {
   return queryDataQuestion(apiKey, prompt, currentData, schema);
 }
+
+function isSchemaEmpty() {
+  return _.isEmpty(getDataForMode(SessionMode.SchemaEditor).data.value)
+}
 </script>
 
 <template>
-  <AiPromptsTemplate
+  <AiPromptsTemplate v-if="!isSchemaEmpty()"
     :session-mode="SessionMode.DataEditor"
     default-text-create-document="Enter or describe your Data in any format"
     default-text-modify-document="How do you want your Data to be modified?"
@@ -37,6 +45,30 @@ function queryDocumentQuestion(
     :function-query-document-creation="queryDocumentCreation"
     :function-query-document-modification="queryDocumentModification"
     :function-query-document-question="queryDocumentQuestion" />
+  <div v-else>
+
+    <ApiKey class="api-key-top" />
+    <Divider />
+
+    <label class="heading">AI Prompts</label>
+    <span>
+    Before using the AI prompts to generate data, please create or select a schema in the Schema Editor tab.
+    </span>
+  </div>
 </template>
 
 <style scoped></style>
+
+
+<style scoped>
+.heading {
+  font-size: 24px; /* Make the text bigger */
+  font-weight: bold; /* Make the text bold */
+  text-align: center; /* Center the text horizontally */
+  display: block; /* Ensure the label behaves like a block element */
+  margin-bottom: 10px; /* Add some space below the label */
+}
+.api-key-top {
+  margin-bottom: auto;
+}
+</style>