added ai assistant feature

src/components/DatasetDetailsFeaturesCustom.vue

 <template>
-    <!-- Alle Attribute und Props weiterreichen -->
-    <dataset-details-features v-bind="$attrs">
-        <template #after="{ dataset }">
-            <div class="mt-2 flex-column dsd-feature w-100">
-            <div>               <!--Change the title-->
-                <dataset-details-feature-header title="Custom Section"
-                :arrowDown="!isDisplayed" tag="keywords-toggle" :onClick="() => isDisplayed = !isDisplayed" />
+  <!-- Alle Attribute und Props weiterreichen -->
+  <dataset-details-features v-bind="$attrs">
+    <template #after="{ dataset }">
+      <div class="mt-2 flex-column dsd-feature w-100">
+        <div>
+          <dataset-details-feature-header
+            title="AI Data Assistant"
+            :arrowDown="!isDisplayed"
+            tag="keywords-toggle"
+            :onClick="() => isDisplayed = !isDisplayed"
+          />
+        </div>
+        <div v-if="isDisplayed" class="row mt-4 w-100">
+          <div class="col-11 offset-1">
+            <!-- Question section -->
+            <div class="mb-4">
+              <h5 class="mb-2">Ask about this dataset</h5>
+              <div class="input-group mb-3">
+                <input
+                  type="text"
+                  class="form-control"
+                  v-model="userInput"
+                  placeholder="E.g., What is the main topic of this dataset?"
+                  @keyup.enter="() => submitQuestion(dataset)"
+                />
+                <div class="input-group-append">
+                  <button
+                    class="btn btn-primary"
+                    @click="() => submitQuestion(dataset)"
+                    :disabled="isLoading || !userInput.trim()"
+                  >
+                    <span v-if="isLoading" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                    {{ isLoading ? 'Processing...' : 'Ask' }}
+                  </button>
                 </div>
-                <div v-if="isDisplayed" class="row mt-4 w-100">
-                  <div class="col-11 offset-1">
-                    <div>This is some custom content</div>
-                    <div class="rounded bg-dark overflow-auto" style="max-height: 300px;max-width: 100%">
-                      <pre style="white-space: pre-wrap;"><code class="text-light">{{ JSON.stringify(dataset, null, 2) }}</code></pre>
-                    </div>
-                  </div>
+              </div>
+            </div>
+
+            <!-- Answer section -->
+            <div v-if="response" class="mt-4">
+              <div class="card">
+                <div class="card-header bg-light">
+                  <strong>Answer</strong>
+                </div>
+                <div class="card-body">
+                  <p class="card-text" v-html="formattedResponse"></p>
                 </div>
+              </div>
+            </div>
+
+            <!-- Error display -->
+            <div v-if="error" class="alert alert-danger mt-3" role="alert">
+              {{ error }}
             </div>
-        </template>
-    </dataset-details-features>
+          </div>
+        </div>
+      </div>
+    </template>
+  </dataset-details-features>
 </template>
-  
-  <script>
-  import {
+
+<script>
+import {
+  DatasetDetailsFeatures,
+  DatasetDetailsFeatureHeader,
+} from "@piveau/piveau-hub-ui-modules";
+import { defineComponent } from "vue";
+import axios from 'axios';
+
+export default defineComponent({
+  name: "DatasetDetailsFeaturesCustom",
+  data() {
+    return {
+      isDisplayed: true,
+      userInput: "",
+      response: null,
+      error: null,
+      isLoading: false,
+      previousQuestions: []
+    }
+  },
+  components: {
     DatasetDetailsFeatures,
     DatasetDetailsFeatureHeader,
-  } from "@piveau/piveau-hub-ui-modules";
-  import { defineComponent } from "vue";
-  
-  export default defineComponent({
-    name: "DatasetDetailsFeaturesCustom",
-    data() {
-      return {
-        isDisplayed: true,
+  },
+  computed: {
+    formattedResponse() {
+      if (!this.response) return '';
+
+      // If the response is an object with a response property
+      if (this.response.response) {
+        // Format the text: convert line breaks to <br>, bolden important parts
+        let text = this.response.response
+          .replace(/\n/g, '<br>')
+          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        return text;
+      }
+
+      return JSON.stringify(this.response);
+    }
+  },
+  methods: {
+    async submitQuestion(dataset) {
+      if (!this.userInput.trim() || this.isLoading) return;
+
+      this.isLoading = true;
+      this.error = null;
+
+      try {
+        // Save question for history
+        this.previousQuestions.push(this.userInput);
+
+        const response = await axios.post('https://ask.ki-allianz.de/metadataassistant/', {
+          user_input: this.userInput,
+          json_data: JSON.stringify(dataset)
+        });
+
+        this.response = response.data;
+        console.log('API Response:', response.data);
+      } catch (error) {
+        console.error('Error submitting question:', error);
+        this.error = "Error: " + (error.response?.data?.detail || error.message);
+        this.response = null;
+      } finally {
+        this.isLoading = false;
       }
     },
-    components: {
-      DatasetDetailsFeatures,
-      DatasetDetailsFeatureHeader,
-    },
-  })
-  </script>
-  
\ No newline at end of file
+    clearQuery() {
+      this.userInput = "";
+      this.response = null;
+      this.error = null;
+    }
+  }
+})
+</script>
+
+<style scoped>
+.btn-primary {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+.btn-primary:hover {
+  background-color: #0069d9;
+  border-color: #0062cc;
+}
+.form-control:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+</style>