@mirodan/ai-insight 0.1.0

package/README.md

@@ -0,0 +1,31 @@
+# @mirodan/ai-insight
+
+AI-powered insight tooltip component for Nuxt UI.
+
+## Installation
+
+```bash
+npm install @mirodan/ai-insight
+```
+
+## Usage
+
+```vue
+<template>
+  <AiInsight
+    :data="chartData"
+    title="Sales Report"
+    :prompt="'Analyze sales trends'"
+  >
+    <LineChart :data="chartData" />
+  </AiInsight>
+</template>
+
+<script setup>
+import { AiInsight } from '@mirodan/ai-insight'
+</script>
+```
+
+## License
+
+MIT

package/dist/module.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("@nuxt/schema").NuxtModule<{
+    endpoint: string;
+}, {
+    endpoint: string;
+}, false>;
+export default _default;

package/dist/module.js

@@ -0,0 +1,26 @@
+import { addComponent as e, addServerHandler as t, createResolver as n, defineNuxtModule as r } from "@nuxt/kit";
+//#region src/module.ts
+var i = r({
+	meta: { name: "@mirodan/ai-insight" },
+	defaults: { endpoint: "https://api.mirodan.ai/v1/insight" },
+	setup(r, i) {
+		let a = n(import.meta.url);
+		i.options.runtimeConfig.aiInsight = {
+			key: "",
+			endpoint: r.endpoint
+		}, e({
+			name: "AiInsight",
+			filePath: a.resolve("./runtime/components/AiInsight.vue")
+		}), e({
+			name: "AiInsightDialog",
+			filePath: a.resolve("./runtime/components/AiInsightDialog.vue")
+		}), t({
+			route: "/api/ai-insight/proxy",
+			handler: a.resolve("./runtime/server/proxy.post.ts")
+		});
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","names":[],"sources":["../src/module.ts"],"sourcesContent":["import { defineNuxtModule, createResolver, addComponent, addServerHandler } from '@nuxt/kit'\n\nexport default defineNuxtModule({\n  meta: { name: '@mirodan/ai-insight' },\n  defaults: { endpoint: 'https://api.mirodan.ai/v1/insight' },\n  setup(options, nuxt) {\n    const resolver = createResolver(import.meta.url)\n\n    nuxt.options.runtimeConfig.aiInsight = {\n      key: '',\n      endpoint: options.endpoint\n    }\n\n    addComponent({\n      name: 'AiInsight',\n      filePath: resolver.resolve('./runtime/components/AiInsight.vue')\n    })\n\n    addComponent({\n      name: 'AiInsightDialog',\n      filePath: resolver.resolve('./runtime/components/AiInsightDialog.vue')\n    })\n\n    addServerHandler({\n      route: '/api/ai-insight/proxy',\n      handler: resolver.resolve('./runtime/server/proxy.post.ts')\n    })\n  }\n})\n"],"mappings":";;AAEA,IAAA,IAAe,EAAiB;CAC9B,MAAM,EAAE,MAAM,sBAAsB;CACpC,UAAU,EAAE,UAAU,oCAAoC;CAC1D,MAAM,GAAS,GAAM;EACnB,IAAM,IAAW,EAAe,YAAY,GAAG;EAiB/C,AAfA,EAAK,QAAQ,cAAc,YAAY;GACrC,KAAK;GACL,UAAU,EAAQ;EACpB,GAEA,EAAa;GACX,MAAM;GACN,UAAU,EAAS,QAAQ,oCAAoC;EACjE,CAAC,GAED,EAAa;GACX,MAAM;GACN,UAAU,EAAS,QAAQ,0CAA0C;EACvE,CAAC,GAED,EAAiB;GACf,OAAO;GACP,SAAS,EAAS,QAAQ,gCAAgC;EAC5D,CAAC;CACH;AACF,CAAC"}

package/dist/runtime/components/AiInsight.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  data: unknown
+  title?: string
+  prompt?: string
+  position?: 'top' | 'bottom'
+}
+
+withDefaults(defineProps<Props>(), { position: 'top' })
+const dialogOpen = ref(false)
+</script>
+<template>
+  <div class="relative">
+    <slot />
+    <div
+      v-if="!dialogOpen"
+      class="absolute z-10 flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground cursor-pointer transition-opacity hover:opacity-80"
+      :class="position === 'top' ? 'bottom-full left-1/2 -translate-x-1/2 mb-2' : 'top-full left-1/2 -translate-x-1/2 mt-2'"
+      @click="dialogOpen = true"
+    >
+      <span>AI анализ</span>
+      <UIcon
+        name="i-lucide-brain"
+        class="size-3.5"
+      />
+    </div>
+    <AiInsightDialog
+      v-model:open="dialogOpen"
+      :data
+      :title
+      :prompt
+    />
+  </div>
+</template>

package/dist/runtime/components/AiInsightDialog.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from 'vue'
+import { useDraggable } from '@vueuse/core'
+import { parseUIMessageStream } from '../../utils/parseUIMessageStream'
+
+interface Props {
+  open: boolean
+  data: unknown
+  title?: string
+  prompt?: string
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { open: false })
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+const panelEl = ref<HTMLElement | null>(null)
+const headerEl = ref<HTMLElement | null>(null)
+const panelWidth = ref(440)
+const panelHeight = ref(400)
+const resizing = ref(false)
+const { x, y, isDragging } = useDraggable(panelEl, {
+  handle: headerEl,
+  initialValue: { x: 800, y: 80 }
+})
+
+onMounted(() => {
+  x.value = window.innerWidth - panelWidth.value - 20
+})
+
+function onResizeStart(e: PointerEvent) {
+  resizing.value = true
+  const startX = e.clientX
+  const startY = e.clientY
+  const startW = panelWidth.value
+  const startH = panelEl.value?.offsetHeight ?? 400
+
+  function onMove(ev: PointerEvent) {
+    panelWidth.value = Math.max(280, startW + ev.clientX - startX)
+    panelHeight.value = Math.max(200, startH + ev.clientY - startY)
+  }
+  function onUp() {
+    resizing.value = false
+    window.removeEventListener('pointermove', onMove)
+    window.removeEventListener('pointerup', onUp)
+  }
+  window.addEventListener('pointermove', onMove)
+  window.addEventListener('pointerup', onUp)
+}
+
+const insight = ref('')
+const loading = ref(false)
+const errorMsg = ref('')
+const followUpInput = ref('')
+const followUpMessages = ref<Array<{ role: 'user' | 'assistant', content: string }>>([])
+const currentPrompt = ref('')
+
+async function loadInsight() {
+  loading.value = true
+  errorMsg.value = ''
+  insight.value = ''
+  followUpMessages.value = []
+  currentPrompt.value = ''
+
+  const locale = props.locale || navigator.language
+
+  try {
+    const response = await fetch('/api/ai-insight/proxy', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        data: props.data,
+        prompt: currentPrompt.value || props.prompt,
+        locale
+      })
+    })
+
+    if (!response.ok) {
+      const text = await response.text()
+      throw new Error(text || `HTTP ${response.status}`)
+    }
+
+    let result = ''
+    for await (const delta of parseUIMessageStream(response)) {
+      result += delta
+      insight.value = result
+    }
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : 'Unknown error'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function sendFollowUp() {
+  if (!followUpInput.value.trim()) return
+  const text = followUpInput.value
+  followUpInput.value = ''
+  followUpMessages.value.push({ role: 'user', content: text })
+
+  currentPrompt.value = `Context: ${insight.value}\n\nQuestion: ${text}`
+  await loadInsight()
+}
+
+function close() {
+  emit('update:open', false)
+}
+
+function refresh() {
+  loadInsight()
+}
+
+onMounted(() => {
+  if (props.open) loadInsight()
+})
+
+watch(() => props.open, (val) => {
+  if (val) nextTick(() => loadInsight())
+})
+</script>
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      ref="panelEl"
+      class="ai-insight-panel fixed z-50 flex flex-col rounded-lg border bg-background text-foreground shadow-xl"
+      :class="{ 'cursor-grabbing select-none': isDragging, 'cursor-se-resize select-none': resizing }"
+      :style="{ left: `${x}px`, top: `${y}px`, width: `${panelWidth}px`, height: `${panelHeight}px` }"
+    >
+      <div
+        ref="headerEl"
+        class="flex cursor-grab items-center justify-between rounded-t-lg border-b px-4 py-3"
+      >
+        <h3 class="text-sm font-medium">
+          {{ title || 'AI Insight' }}
+        </h3>
+        <div class="flex items-center gap-1">
+          <UButton
+            icon="i-lucide-refresh-cw"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="refresh"
+          />
+          <UButton
+            icon="i-lucide-x"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="close"
+          />
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-4 py-3">
+        <div class="space-y-4">
+          <div
+            v-if="loading && !insight"
+            class="flex items-center gap-2 text-sm text-muted-foreground"
+          >
+            <UIcon
+              name="i-lucide-loader-2"
+              class="size-4 animate-spin"
+            />
+            <span>Analyzing...</span>
+          </div>
+
+          <div
+            v-else-if="errorMsg"
+            class="rounded-lg border border-error/30 bg-error/10 p-3 text-sm text-error"
+          >
+            <div class="flex items-start gap-2">
+              <UIcon
+                name="i-lucide-alert-circle"
+                class="size-4 mt-0.5 shrink-0"
+              />
+              <div>
+                <p class="font-medium">
+                  {{ errorMsg }}
+                </p>
+                <UButton
+                  variant="ghost"
+                  color="neutral"
+                  size="xs"
+                  class="mt-2"
+                  @click="refresh"
+                >
+                  Retry
+                </UButton>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-else-if="insight"
+            class="prose prose-sm max-w-none"
+          >
+            <ChatComark :markdown="insight" />
+          </div>
+
+          <div
+            v-else
+            class="text-sm text-muted-foreground"
+          >
+            {{ loading ? 'Analyzing...' : 'No data available' }}
+          </div>
+
+          <div
+            v-if="insight && !loading"
+            class="border-t pt-4"
+          >
+            <div class="flex flex-col items-center space-y-3">
+              <div
+                v-for="(msg, i) in followUpMessages"
+                :key="i"
+                :class="msg.role === 'user' ? 'text-right self-end' : 'text-left self-start'"
+              >
+                <span
+                  class="inline-block rounded-lg px-3 py-2 text-sm"
+                  :class="msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'"
+                >
+                  {{ msg.content }}
+                </span>
+              </div>
+              <UInput
+                v-model="followUpInput"
+                placeholder="Ask a follow-up..."
+                class="max-w-md w-full"
+                size="lg"
+                @keydown.enter="sendFollowUp"
+              >
+                <template #trailing>
+                  <UButton
+                    icon="i-lucide-send"
+                    size="xs"
+                    :disabled="!followUpInput.trim() || loading"
+                    @click="sendFollowUp"
+                  />
+                </template>
+              </UInput>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="absolute bottom-0 right-0 z-10 h-4 w-4 cursor-se-resize"
+        @pointerdown.stop="onResizeStart"
+      />
+    </div>
+  </Teleport>
+</template>
+<style scoped>
+.ai-insight-panel { min-height: 200px; }
+.ai-insight-panel :deep(.prose) { word-break: break-word; }
+</style>

package/dist/runtime/server/proxy.post.ts

@@ -0,0 +1,22 @@
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event)
+  const body = await readBody(event)
+
+  const response = await $fetch.raw(config.aiInsight.endpoint, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${config.aiInsight.key}`,
+      'Content-Type': 'application/json'
+    },
+    body,
+    responseType: 'stream'
+  })
+
+  setHeaders(event, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    Connection: 'keep-alive'
+  })
+
+  return response.body
+})

package/dist/types/index.d.ts

@@ -0,0 +1,13 @@
+export interface AiInsightProps {
+    data: unknown;
+    title?: string;
+    prompt?: string;
+    position?: 'top' | 'bottom';
+}
+export interface AiInsightDialogProps {
+    open: boolean;
+    data: unknown;
+    title?: string;
+    prompt?: string;
+    locale?: string;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mirodan/ai-insight",
+  "version": "0.1.0",
+  "description": "AI-powered insight tooltip component for Nuxt",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && node scripts/copy-runtime.mjs && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch",
+    "prepare": "vite build && node scripts/copy-runtime.mjs && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint .",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.0.0",
+    "defu": "^6.1.0"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^1.16.0",
+    "@types/node": "^26.1.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "eslint": "^10.8.0",
+    "happy-dom": "^17.4.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vitest": "^3.1.2"
+  },
+  "peerDependencies": {
+    "@comark/nuxt": "^0.4.0",
+    "@iconify-json/lucide": "^1.0.0",
+    "@nuxt/kit": "^4.0.0",
+    "@nuxt/ui": "^4.0.0",
+    "nuxt": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "vue": "^3.0.0"
+  }
+}