Fix AiSummary

Author: floscher

client/src/components/AiSummaries.vue

@@ -1,13 +1,4 @@
 <template>
-  <!-- <div v-for="(d, i) in data" v-bind:key="i" class="summary-container bg-success bg-opacity-25">
-    <ai-summary
-      :summary-data="d"
-      :onAddTag="props.onAddTag"
-      :onSetDescription="props.onSetDescription"
-      @remove-data="removeData(d)"
-    ></ai-summary>
-  </div> -->
-
   <small v-if="fullText.length < 500" class="text-muted"> 🤖 {{ t("ai.summary.hint", { count: 500 - fullText.length }) }}</small>
   <button v-else-if="data.length < 3" type="button" class="btn btn-sm btn-outline-success" :disabled="loading" @click="loadNewSummary">
     <loading-spinner v-if="loading" class="smallSpinner" /><span v-else>🤖🪄</span> {{ t("ai.summarize") }}
@@ -23,6 +14,7 @@
     @canceled="canceled()"
     @acceptDescription="props.onSetDescription"
     @addTag="props.onAddTag"
+    @remove-ai-summary="removeAiSummary"
   ></ai-summary-dialog>
 </template>
 
@@ -69,9 +61,9 @@ const data = ref<AiSummaryData[]>([]);
 const loading = ref<boolean>(false);
 const showAiDialog = ref<boolean>(false);
 
-// const removeData = (d: AiSummaryData) => {
-//   data.value = data.value.filter((it) => it != d);
-// };
+function removeAiSummary(d: AiSummaryData) {
+  data.value = data.value.filter((it) => it != d);
+}
 
 const loadNewSummary = (e: MouseEvent) => {
   e.preventDefault();

client/src/components/AiSummary.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <div v-if="isSuccessfulAiSummaryData(summaryData)">
-      <!-- <button type="button" class="btn-close btn-close-white float-end" aria-label="Close" @click="$emit('removeData')"></button> -->
+      <button type="button" class="btn-close btn-close-white float-end" aria-label="Close" @click="$emit('removeAiSummary')"></button>
       <div class="summary-text-container">
         <div class="summary-text">{{ summaryData.summary }}</div>
-        <button type="button" class="btn btn-sm btn-outline-success" @click="$emit('acceptDescription', summaryData.summary)">
+        <button type="button" class="btn btn-sm btn-outline-success" @click="$emit('updateDescription', summaryData.summary)">
           {{ t("ai.summary.accept") }}
         </button>
       </div>
@@ -24,11 +24,12 @@
       <div class="row">
         <div class="col-md-4" v-for="prompt in summaryData.imagePrompts" v-bind:key="prompt">
           <button class="btn btn-sm btn-outline-success" @click="acceptImagePrompt($event, prompt)">
-            <fa-icon :icon="faImage"></fa-icon>🪄
+            <fa-icon :icon="faImage"></fa-icon><fa-icon :icon="faWandMagicSparkles"></fa-icon>
             {{ prompt }}
           </button>
         </div>
       </div>
+    </div>
     <div v-else class="bg-danger">
       {{ summaryData.error }}
     </div>
@@ -44,28 +45,25 @@
 </style>
 
 <script setup lang="ts">
-import { OpenAiEndpoints } from "@client/util/api-client.js";
 import { t } from "@client/plugins/i18n.js";
+import { OpenAiEndpoints } from "@client/util/api-client.js";
+import { faImage, faWandMagicSparkles } from "@fortawesome/free-solid-svg-icons";
 import type { AiSummaryData } from "@fumix/fu-blog-common";
 import { isSuccessfulAiSummaryData } from "@fumix/fu-blog-common";
-import { onMounted } from "vue";
 import type { PropType } from "vue";
-import { faImage, faWandSparkles } from "@fortawesome/free-solid-svg-icons";
+import { onMounted } from "vue";
 
 const props = defineProps({
   summaryData: { type: Object as PropType<AiSummaryData>, required: true },
-  onAddTag: { type: Function as PropType<(tag: string) => void> },
-  onSetDescription: { type: Function as PropType<(description: string) => void> },
 });
 
 function acceptDescription(e: MouseEvent, description: string) {
   e.preventDefault();
-  props.onSetDescription?.(description);
+  emit("updateDescription", description);
 }
 
 async function acceptImagePrompt(e: MouseEvent, prompt: string) {
   e.preventDefault();
-  alert(prompt); // TODO: send event to parent
   await OpenAiEndpoints.dallEGenerateImage(prompt)
     .then((it) => {
       alert(JSON.stringify(it));
@@ -77,16 +75,16 @@ async function acceptImagePrompt(e: MouseEvent, prompt: string) {
 
 function acceptTag(e: MouseEvent, tag: string) {
   e.preventDefault();
-  props.onAddTag?.(tag);
+  emit("addTag", tag);
 }
 
-const emit = defineEmits(["removeData", "acceptDescription"]);
+const emit = defineEmits(["updateDescription", "addTag", "removeAiSummary"]);
 
 onMounted(() => {
   // auto remove if error
   if (!isSuccessfulAiSummaryData(props.summaryData)) {
     setTimeout(() => {
-      emit("removeData");
+      emit("removeAiSummary");
     }, 5000);
   }
 });

client/src/components/AiSummaryDialog.vue

@@ -9,9 +9,9 @@
           <div v-for="(d, i) in data" v-bind:key="i" class="summary-container">
             <ai-summary
               :summary-data="d"
-              @addTag="addTag($event)"
-              @acceptDescription="acceptDescription($event)"
-              @remove-data="removeData(d)"
+              @add-tag="addTag($event)"
+              @update-description="acceptDescription($event)"
+              @remove-ai-summary="$emit('removeAiSummary', d)"
             ></ai-summary>
           </div>
         </div>
@@ -42,18 +42,14 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(["acceptDescription", "canceled", "addTag"]);
+const emits = defineEmits(["acceptDescription", "canceled", "addTag", "removeAiSummary"]);
 
 watch(props, () => {
   const myModal = new Modal(document.getElementById("aiModal") || "", {});
   const show = props.show;
   show ? myModal?.show() : myModal.hide();
 });
 
-const removeData = (d: AiSummaryData) => {
-  alert("TODO remove data");
-  // data.value = data.value.filter((it) => it != d);
-};
 const acceptDescription = (description: string) => {
   emits("acceptDescription", description);
 };

client/src/views/PostFormView.vue

@@ -24,6 +24,7 @@
                   :placeholder="t('posts.form.tags.enter')"
                   @on-tags-changed="handleTagsChanged"
                   :add-tag-on-keys="[13, 188]"
+                  @input="handleAutocompletion"
                 />
               </div>
 
@@ -46,16 +47,6 @@
                 <div id="markdownHelp" class="form-text">{{ t("posts.form.message.hint") }}</div>
               </div>
 
-              <div class="form-floating mb-3">
-                <label for="stringTags">{{ t("posts.form.tags") }}</label>
-                <vue3-tags-input
-                  :tags="form.stringTags"
-                  placeholder="Geben Sie Schlagwörter ein..."
-                  @on-tags-changed="handleTagsChanged"
-                  @input="handleAutocompletion"
-                />
-              </div>
-
               <div class="form-check form-switch">
                 <input v-model="form.draft" class="form-check-input" type="checkbox" id="draft" />
                 <label class="form-check-label" for="draft">{{ t("posts.form.draft") }}</label>