viur-ui 0.0.1

package/src/forms/bones/actions/DescribeImage.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="image-description-wrapper">
+    <div class="image-description-grid">
+      <div>
+        <vi-image
+          :src="state.url"
+          style="height: 50px"
+        ></vi-image>
+      </div>
+
+      <div class="image-description-flex">
+        <wa-tab-group
+          v-if="state.value"
+          class="bone-lang-tabs"
+          placement="bottom"
+        >
+          <template
+            v-for="(_val, lang) in state.value"
+            :key="lang + '_tab'"
+          >
+            <wa-tab
+              slot="nav"
+              :panel="'lang_' + lang"
+              :disabled="state.loading"
+              @click="state.currentLang = lang"
+            >
+              {{ $t(lang) }}
+            </wa-tab>
+
+            <wa-tab-panel :name="'lang_' + lang">
+              <wa-textarea
+                :value="state.value[lang]"
+                :label="t('actions.describeImage.label', { lang })"
+                @change="updateValue($event, lang)"
+              ></wa-textarea>
+            </wa-tab-panel>
+          </template>
+        </wa-tab-group>
+
+        <wa-input
+          v-model="state.prompt"
+          :placeholder="t('actions.describeImage.instructions')"
+        ></wa-input>
+        <span class="image-description-small-print">
+          {{ t("actions.aiHint") }}
+        </span>
+        <wa-button
+          size="small"
+          variant="brand"
+          :loading="state.loading"
+          @click="describe"
+        >
+          {{ t("actions.describeImage.run") }}
+        </wa-button>
+      </div>
+    </div>
+  </div>
+
+  <div
+    slot="footer"
+    class="footer"
+  >
+    <wa-button
+      variant="danger"
+      size="small"
+      appearance="outlined"
+      @click="CloseAction"
+    >
+      {{ $t("relation.abort") }}
+    </wa-button>
+
+    <wa-button
+      variant="success"
+      size="small"
+      @click="ApplySelection"
+    >
+      {{ t("actions.describeImage.apply") }}
+    </wa-button>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n"
+import { reactive, onMounted, inject, computed } from "vue"
+import { createControllerFetch } from "../../../request/index.js"
+import viImage from "@viur/vue-utils/generic/Image.vue"
+
+const { t } = useI18n()
+
+const props = defineProps({
+  name: String,
+  module: String,
+  tabId: String,
+  action: Object,
+  params: Object,
+})
+const viform = inject("viform")
+const emit = defineEmits(["close", "next"])
+const describeImageFetch = createControllerFetch({ endpoint: "describe_image", method: "POST" })
+
+const state = reactive({
+  value: null,
+  currentLang: null,
+  url: computed(
+    () => (import.meta.env.VITE_API_URL ?? window.location.origin) + (props.params.value?.dest?.downloadUrl ?? "")
+  ),
+  prompt: null,
+  loading: false,
+})
+
+async function describe() {
+  state.loading = true
+  try {
+    const fetchResult = describeImageFetch(
+      "assistant",
+      "/",
+      {
+        filekey: props.params.value.dest.key,
+        context: JSON.stringify(viform?.value?.state?.skel),
+        prompt: state.prompt,
+        language: state.currentLang,
+      },
+      { immediate: false }
+    )
+    await fetchResult.execute()
+    // v2 envelope carries the payload in `data`; fall back to the raw body for
+    // non-envelope responses.
+    const result = fetchResult.data.value
+    state.value[state.currentLang] = result?.data ?? result
+  } finally {
+    state.loading = false
+  }
+}
+
+onMounted(() => {
+  state.value = props.params.value?.rel?.alt
+  if (!state.value) {
+    const langs = {}
+    for (const l of props.params.bone?.using?.alt?.languages ?? []) {
+      langs[l] = ""
+    }
+    state.value = langs
+  }
+  state.currentLang = props.params.bone?.using?.alt?.languages?.[0]
+})
+
+function updateValue(e, lang) {
+  state.value[lang] = e.target.value
+}
+
+function CloseAction() {
+  emit("close")
+}
+
+function ApplySelection() {
+  const val = { ...(props.params.value ?? {}) }
+  if (!val.rel) {
+    val.rel = { alt: state.value }
+  } else {
+    val.rel = { ...val.rel, alt: state.value }
+  }
+  emit("close", val, props.params.lang ?? null)
+}
+</script>
+
+<style scoped>
+.image-description-wrapper {
+  padding: var(--wa-space-l);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-s);
+}
+
+.image-description-grid {
+  display: grid;
+  grid-template-columns: 15em minmax(0, 1fr);
+  gap: var(--wa-space-l);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.image-description-small-print {
+  font-size: 0.7em;
+}
+
+.image-description-flex {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-s);
+}
+
+wa-textarea {
+  &::part(form-control-label) {
+    margin-bottom: var(--wa-space-xs);
+    font-weight: 600;
+  }
+}
+</style>

package/src/forms/bones/actions/Download.vue

@@ -0,0 +1,27 @@
+<script>
+import { downloadUrlFor } from "../../../request/index.js"
+
+/**
+ * Direct-fire Action: lädt die im Bone-Value referenzierte Datei herunter.
+ * Wird von `BoneActions` bei `type: "callback"` direkt aufgerufen — kein Dialog.
+ *
+ * @param {{ value: object, name: string, lang: string, index: number, bone: object, boneState: object }} ctx
+ */
+export function handler(ctx) {
+  const url = downloadUrlFor(ctx.value)
+  if (!url) return
+
+  // Anchor-Click statt window.open: funktioniert auch mit Data-URLs
+  // (Browser blockt Top-Level-Navigation zu data:-URLs aus Phishing-Gründen).
+  const a = document.createElement("a")
+  a.href = url
+  a.download = ctx.value?.dest?.name ?? ""
+  a.rel = "noopener"
+  a.target = "_blank"
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+export default {}
+</script>

package/src/forms/bones/actions/Placeholder.vue

@@ -0,0 +1,14 @@
+<script>
+/**
+ * Platzhalter-Action zum Testen der Anzeige mehrerer Buttons.
+ * TODO: wieder entfernen sobald nicht mehr benötigt.
+ *
+ * @param {{ value: object, name: string, lang: string, index: number, bone: object, boneState: object }} ctx
+ */
+export function handler(ctx) {
+  // eslint-disable-next-line no-console
+  console.log("[Placeholder Action]", ctx)
+}
+
+export default {}
+</script>

package/src/forms/bones/actions/Translation.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="translate-wrapper">
+    <div class="translate-grid">
+      <div class="translate-flex">
+        <wa-textarea
+          :value="state.value_de"
+          :label="t('actions.translate.original', { lang: 'de' })"
+          @change="updateValueDe"
+        ></wa-textarea>
+      </div>
+
+      <div class="translate-icon-wrap">
+        <wa-icon name="arrows-left-right"></wa-icon>
+      </div>
+
+      <div class="translate-flex">
+        <wa-textarea
+          :value="state.result || '-'"
+          :label="t('actions.translate.target', { lang: state.currentLang })"
+          @change="updateValue"
+        ></wa-textarea>
+      </div>
+    </div>
+
+    <div class="translate-footer">
+      <span class="translate-small-print">
+        {{ t("actions.aiHint") }}
+      </span>
+      <div></div>
+      <wa-button
+        size="small"
+        variant="brand"
+        :loading="state.loading"
+        @click="translate"
+      >
+        {{ t("actions.translate.run") }}
+      </wa-button>
+    </div>
+  </div>
+
+  <div
+    slot="footer"
+    class="translate-dialog-footer"
+  >
+    <wa-button
+      variant="danger"
+      size="small"
+      appearance="outlined"
+      @click="CloseAction"
+    >
+      {{ $t("relation.abort") }}
+    </wa-button>
+
+    <div class="translate-dialog-footer-spacer"></div>
+
+    <wa-button
+      variant="success"
+      appearance="outlined"
+      size="small"
+      :disabled="!state.nextlang"
+      @click="nextlang"
+    >
+      {{ t("actions.translate.applyNext") }}
+    </wa-button>
+    <wa-button
+      variant="success"
+      size="small"
+      @click="ApplySelection"
+    >
+      {{ t("actions.translate.apply", { lang: state.currentLang }) }}
+    </wa-button>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from "vue-i18n"
+import { reactive, onMounted, computed, watch } from "vue"
+import { createControllerFetch } from "../../../request/index.js"
+
+const { t } = useI18n()
+
+const props = defineProps({
+  name: String,
+  module: String,
+  tabId: String,
+  action: Object,
+  params: Object,
+})
+
+const emit = defineEmits(["close", "next"])
+const translateFetch = createControllerFetch({ endpoint: "translate", method: "POST" })
+
+const state = reactive({
+  result: null,
+  currentLang: null,
+  rawLang: computed(() => state.currentLang?.split("_")[0]),
+  simple: computed(() => state.currentLang?.split("-x-")?.length === 2),
+  value_de: null,
+  loading: false,
+  nextlang: computed(() => {
+    const val = getValue()
+    if (!val) return "de"
+    for (const [l, v] of Object.entries(val)) {
+      if ((!v || (Array.isArray(v) && (v.length === 0 || !v?.[props.params.index]))) && state.currentLang !== l) {
+        return l
+      }
+    }
+    return Object.keys(val).filter((x) => x !== "de")?.[0]
+  }),
+})
+
+async function translate() {
+  state.loading = true
+  try {
+    const fetchResult = translateFetch(
+      "assistant",
+      "/",
+      {
+        text: state.value_de,
+        language: state.rawLang,
+        characteristic: state.simple ? "simple" : null,
+      },
+      { immediate: false }
+    )
+    await fetchResult.execute()
+    // v2 envelope carries the payload in `data`; fall back to the raw body for
+    // non-envelope responses.
+    const result = fetchResult.data.value
+    state.result = result?.data ?? result
+  } finally {
+    state.loading = false
+  }
+}
+
+function getValue(lang = null) {
+  let val = props.params.boneState.bonevalue
+  if (props.params.index !== null) {
+    if (lang) {
+      val = val?.[lang]
+      val = val?.[props.params.index]
+    }
+  } else if (lang) {
+    val = val?.[lang]
+  }
+  return val
+}
+
+onMounted(() => {
+  state.value_de = getValue("de")
+  state.currentLang = state.nextlang
+  if (state.nextlang !== "de") {
+    state.currentLang = props.params.boneState.currentLanguage
+  }
+  state.result = getValue(state.currentLang)
+})
+
+watch(
+  () => getValue("de"),
+  (newVal) => {
+    state.value_de = newVal
+  }
+)
+
+function updateValue(e) {
+  state.result = e.target.value
+}
+function updateValueDe(e) {
+  state.value_de = e.target.value
+}
+
+function nextlang() {
+  emit("next", state.result, state.currentLang)
+  state.currentLang = state.nextlang
+  state.result = getValue(state.currentLang)
+}
+
+function CloseAction() {
+  state.result = null
+  emit("close")
+}
+
+function ApplySelection() {
+  emit("close", state.result, state.currentLang)
+}
+</script>
+
+<style scoped>
+.translate-wrapper {
+  padding: var(--wa-space-l);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-s);
+}
+
+.translate-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 3em minmax(0, 1fr);
+}
+
+.translate-flex {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-xs);
+}
+
+.translate-icon-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.translate-footer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 3em minmax(0, 1fr);
+}
+
+.translate-small-print {
+  font-size: 0.7em;
+}
+
+wa-textarea {
+  &::part(form-control-label) {
+    margin-bottom: var(--wa-space-xs);
+    font-weight: 600;
+  }
+}
+
+.translate-dialog-footer {
+  display: flex;
+  flex-direction: row;
+  gap: var(--wa-space-s);
+}
+
+.translate-dialog-footer-spacer {
+  flex: 1;
+}
+</style>