Feat/jq playground

packages/entities/entities-plugins/package.json

@@ -90,6 +90,8 @@
     "errorLimit": "2.8MB"
   },
   "dependencies": {
+    "@ai-sdk/deepseek": "^1.0.19",
+    "@jq-tools/jq": "^0.0.10",
     "@kong-ui-public/entities-consumer-groups": "workspace:^",
     "@kong-ui-public/entities-consumers": "workspace:^",
     "@kong-ui-public/entities-gateway-services": "workspace:^",
@@ -99,6 +101,7 @@
     "@kong-ui-public/entities-routes": "workspace:^",
     "@kong-ui-public/entities-vaults": "workspace:^",
     "@kong-ui-public/forms": "workspace:^",
+    "ai": "^5.0.51",
     "lodash-es": "^4.17.21",
     "marked": "^14.1.4"
   }

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/JqField.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="jq-field">
+    <StringField
+      autosize
+      :error="error"
+      :error-message="errorMessage"
+      :label="label"
+      :label-attributes="{}"
+      :model-value="modelValue"
+      multiline
+      :name="name"
+      resizable
+      @blur="handleBlur"
+      @update:model-value="handleUpdate"
+    >
+      <template #help>
+        <div class="jq-field-help">
+          <i18nT keypath="plugins.free-form.datakit.flow_editor.node_properties.jq.help">
+            <template #link>
+              <KExternalLink
+                hide-icon
+                :href="externalLinks.jqlang"
+              >
+                {{ externalLinks.jqlang }}
+              </KExternalLink>
+            </template>
+          </i18nT>
+        </div>
+      </template>
+    </StringField>
+
+    <!-- Floating JQ Playground Button -->
+    <KButton
+      appearance="tertiary"
+      class="jq-playground-button"
+      size="small"
+      @click="openJqPlayground"
+    >
+      <RocketIcon />
+      JQ Playground
+    </KButton>
+
+    <!-- JQ Playground Modal -->
+    <JqPlaygroundModal
+      v-model:visible="isPlaygroundVisible"
+      :initial-jq-script="modelValue"
+      @update-jq-script="updateJqScript"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import StringField from '../../../shared/StringField.vue'
+import JqPlaygroundModal from './JqPlaygroundModal.vue'
+import useI18n from '../../../../../composables/useI18n'
+import externalLinks from '../../../../../external-links'
+import { RocketIcon } from '@kong/icons'
+
+interface Props {
+  modelValue: string
+  name: string
+  label?: string
+  error?: boolean
+  errorMessage?: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'blur'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+
+const { i18nT } = useI18n()
+
+// JQ Playground Modal state
+const isPlaygroundVisible = ref(false)
+
+function openJqPlayground() {
+  isPlaygroundVisible.value = true
+}
+
+function handleUpdate(value: string | null) {
+  emit('update:modelValue', value || '')
+}
+
+function handleBlur() {
+  emit('blur')
+}
+
+function updateJqScript(script: string) {
+  emit('update:modelValue', script)
+}
+</script>
+
+<style lang="scss" scoped>
+.jq-field {
+  position: relative;
+
+  .jq-field-help {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: $kui-space-40;
+    justify-content: space-between;
+  }
+
+  .jq-playground-button {
+    opacity: 0;
+    position: absolute;
+    right: 8px;
+    top: 0px;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 10;
+  }
+
+  &:hover .jq-playground-button {
+    opacity: 1;
+  }
+}
+</style>