@andrewyang/ai-workflow-editor 0.1.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@andrewyang/ai-workflow-editor",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@element-plus/nuxt": "^1.1.5",
+    "@langchain/community": "^0.3.28",
+    "@langchain/core": "^0.3.37",
+    "@langchain/openai": "^0.4.2",
+    "@nuxtjs/i18n": "^10.2.3",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.41.0",
+    "@vue-flow/node-resizer": "^1.5.1",
+    "clsx": "^2.1.0",
+    "element-plus": "^2.13.2",
+    "lucide-vue-next": "^0.344.0",
+    "nuxt": "^3.0.0",
+    "tailwind-merge": "^2.2.1",
+    "vue": "^3.4.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@unocss/nuxt": "^0.58.5",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.0.0",
+    "vue": "^3.4.0"
+  },
+  "overrides": {
+    "glob": "^10.3.10"
+  }
+}

package/pnpm-lock.yaml

@@ -0,0 +1,24 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      pnpm:
+        specifier: ^10.29.2
+        version: 10.29.2
+
+packages:
+
+  pnpm@10.29.2:
+    resolution: {integrity: sha512-vvQ/p1nZH9LaSzGaWg0T73pFu5haPXNCBYRw+dIFGjuoZ05ilnJlRobvlEOtE6gtor657rPgIhyHuBVP/510uA==}
+    engines: {node: '>=18.12'}
+    hasBin: true
+
+snapshots:
+
+  pnpm@10.29.2: {}

package/src/app.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <div class="h-screen w-screen bg-white">
+      <ClientOnly>
+        <AiWorkflowEditor
+          :default-llm-config="llmConfig"
+          @save="onSave"
+        />
+        <template #fallback>
+          <div class="flex h-full w-full items-center justify-center bg-gray-50">
+            <div class="flex flex-col items-center gap-3">
+              <div class="i-lucide-loader-2 animate-spin text-3xl text-purple-600" />
+              <span class="text-sm font-medium text-gray-500">{{ $t('common.loading') }}</span>
+            </div>
+          </div>
+        </template>
+      </ClientOnly>
+    </div>
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { LlmConfig } from '@/types/ai';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+
+const llmConfig = ref<LlmConfig>({
+  provider: 'ollama',
+  model: 'qwen3:8b',
+  temperature: 0.7,
+  // baseUrl: 'http://192.168.1.10:11434',
+  baseUrl: 'http://localhost:11434/',
+});
+
+const onSave = (workflow: any) => {
+  console.log('Saved workflow:', workflow);
+};
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+</style>

package/src/components/AiWorkflowEditor.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="ai-workflow-editor flex h-screen w-full flex-col bg-gray-50 font-sans text-gray-900">
+    <!-- Top Bar -->
+    <Toolbar
+      @save="handleSave"
+      @import="handleImport"
+      @zoom-in="canvasRef?.zoomIn()"
+      @zoom-out="canvasRef?.zoomOut()"
+      @fit-view="canvasRef?.fitView()"
+    />
+    
+    <!-- Main Content Area -->
+    <div class="flex flex-1 overflow-hidden">
+      <!-- Left Sidebar: Shapes -->
+      <NodePanel />
+      
+      <!-- Center: Canvas -->
+      <div class="flex-1 relative bg-white">
+        <Canvas
+          ref="canvasRef"
+          @node-click="handleNodeClick"
+          @edge-click="handleEdgeClick"
+          @pane-click="handlePaneClick"
+          @node-double-click="handleNodeDoubleClick"
+        />
+        
+        <!-- Loading Overlay -->
+        <div v-if="aiLoading" class="absolute inset-0 z-50 flex items-center justify-center bg-white/50 backdrop-blur-sm">
+           <div class="flex flex-col items-center gap-3">
+             <div class="i-lucide-loader-2 text-4xl text-purple-600 animate-spin" />
+             <span class="text-sm font-medium text-purple-600">{{ $t('common.generating') }}</span>
+           </div>
+        </div>
+      </div>
+      
+      <!-- Right Sidebar: Format Panel or AI Assistant -->
+      <FormatPanel 
+        v-if="selectedNode"
+        :node="selectedNode"
+        @close="selectedNode = null"
+        @update="handleNodeUpdate"
+        @z-index="handleZIndex"
+      />
+      <AiChatPanel 
+        v-else
+        :loading="aiLoading"
+        @generate="handleAiGenerate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Canvas from './editor/Canvas.vue';
+import Toolbar from './editor/Toolbar.vue';
+import NodePanel from './editor/NodePanel.vue';
+import AiChatPanel from './ai/AiChatPanel.vue';
+import FormatPanel from './editor/FormatPanel.vue';
+import { useAi } from '@/composables/useAi';
+import type { LlmConfig } from '@/types/ai';
+
+const props = defineProps<{
+  initialWorkflow?: { nodes: any[]; edges: any[] };
+  defaultLlmConfig?: LlmConfig;
+}>();
+
+const emit = defineEmits<{
+  (e: 'save', workflow: any): void;
+  (e: 'node-click', node: any): void;
+  (e: 'edge-click', edge: any): void;
+  (e: 'ai-generate-success', workflow: any): void;
+}>();
+
+const canvasRef = ref<InstanceType<typeof Canvas>>();
+const { generateWorkflow, loading: aiLoading, error: aiError } = useAi();
+const selectedNode = ref<any>(null);
+
+const handleSave = () => {
+  const workflow = canvasRef.value?.exportWorkflow();
+  if (workflow) emit('save', workflow);
+};
+
+const handleImport = () => {
+  console.log('Import triggered');
+  // Implementation for file import can be added here
+};
+
+const handleAiGenerate = async (prompt: string) => {
+  if (!props.defaultLlmConfig) {
+    console.error('LLM Config not provided');
+    // In a real app, prompt user to configure LLM
+    return;
+  }
+  
+  try {
+    const workflow = await generateWorkflow({
+      prompt,
+      llmConfig: props.defaultLlmConfig,
+    });
+    canvasRef.value?.importWorkflow(workflow);
+    emit('ai-generate-success', workflow);
+  } catch (e) {
+    console.error(`AI Generation failed: ${e}`);
+    // Ideally show a toast notification here
+  }
+};
+
+const handleNodeClick = (node: any) => {
+  selectedNode.value = node;
+  emit('node-click', node);
+};
+
+const handlePaneClick = () => {
+  selectedNode.value = null;
+};
+
+const handleNodeDoubleClick = (node: any) => {
+  selectedNode.value = node;
+  if (node.data) {
+    node.data.isEditing = true;
+  }
+};
+
+const handleNodeUpdate = (update: { type: string; data: any }) => {
+  if (!selectedNode.value) return;
+  canvasRef.value?.updateNode(selectedNode.value.id, update);
+};
+
+const handleZIndex = (action: string) => {
+  if (!selectedNode.value) return;
+  // Implementation for Z-Index change would go here or in Canvas
+  console.log('Z-Index action:', action);
+};
+
+const handleEdgeClick = (edge: any) => emit('edge-click', edge);
+
+defineExpose({
+  exportWorkflow: () => canvasRef.value?.exportWorkflow(),
+  importWorkflow: (data: any) => canvasRef.value?.importWorkflow(data),
+});
+</script>

package/src/components/ai/AiChatPanel.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="flex h-full flex-col bg-white/80 backdrop-blur-xl border-l border-gray-200 w-80 shadow-[-4px_0_24px_rgba(0,0,0,0.08)] z-20 relative">
+    <!-- Header -->
+    <div class="flex items-center justify-between border-b border-gray-100 p-4">
+      <div class="flex items-center gap-2 font-semibold text-gray-800">
+        <div class="i-lucide-sparkles text-purple-600" />
+        <span>{{ $t('aiChat.title') }}</span>
+      </div>
+      <div class="flex gap-2 text-gray-400">
+        <el-button link class="!text-gray-400 hover:!text-gray-600 !p-1.5">
+          <div class="i-lucide-settings w-4 h-4" />
+        </el-button>
+        <el-button link class="!text-gray-400 hover:!text-gray-600 !p-1.5">
+          <div class="i-lucide-panel-right-close w-4 h-4" />
+        </el-button>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto p-4 space-y-6">
+      <!-- Promo Card -->
+      <div class="rounded-xl bg-purple-50 p-4 border border-purple-100">
+        <div class="flex items-center gap-2 mb-2">
+          <span class="bg-purple-600 text-white text-[10px] px-1.5 py-0.5 rounded font-medium">{{ $t('aiChat.new') }}</span>
+          <span class="text-xs font-semibold text-purple-900">{{ $t('aiChat.v2') }}</span>
+        </div>
+        <p class="text-xs text-purple-700/80 leading-relaxed">
+          {{ $t('aiChat.desc') }}
+        </p>
+      </div>
+
+      <!-- Welcome Text -->
+      <div class="text-center py-4">
+        <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $t('aiChat.createTitle') }}</h3>
+        <p class="text-sm text-gray-500">{{ $t('aiChat.createDesc') }}</p>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="space-y-3">
+        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ $t('aiChat.quickStarts') }}</div>
+        
+        <button @click="setInput($t('aiChat.quickInputs.doc'))" class="w-full text-left group flex items-start gap-3 p-3 rounded-xl border border-gray-200 hover:border-purple-300 hover:shadow-md hover:shadow-purple-500/5 transition-all bg-white">
+          <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:text-purple-600 group-hover:bg-purple-50 transition-colors">
+            <div class="i-lucide-file-text w-4 h-4" />
+          </div>
+          <div>
+            <div class="text-sm font-medium text-gray-900">{{ $t('aiChat.docProcess.title') }}</div>
+            <div class="text-xs text-gray-500 mt-0.5">{{ $t('aiChat.docProcess.desc') }}</div>
+          </div>
+        </button>
+
+        <button @click="setInput($t('aiChat.quickInputs.auth'))" class="w-full text-left group flex items-start gap-3 p-3 rounded-xl border border-gray-200 hover:border-purple-300 hover:shadow-md hover:shadow-purple-500/5 transition-all bg-white">
+          <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:text-purple-600 group-hover:bg-purple-50 transition-colors">
+            <div class="i-lucide-user-plus w-4 h-4" />
+          </div>
+          <div>
+            <div class="text-sm font-medium text-gray-900">{{ $t('aiChat.userAuth.title') }}</div>
+            <div class="text-xs text-gray-500 mt-0.5">{{ $t('aiChat.userAuth.desc') }}</div>
+          </div>
+        </button>
+        
+        <button @click="setInput($t('aiChat.quickInputs.etl'))" class="w-full text-left group flex items-start gap-3 p-3 rounded-xl border border-gray-200 hover:border-purple-300 hover:shadow-md hover:shadow-purple-500/5 transition-all bg-white">
+          <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:text-purple-600 group-hover:bg-purple-50 transition-colors">
+            <div class="i-lucide-database w-4 h-4" />
+          </div>
+          <div>
+            <div class="text-sm font-medium text-gray-900">{{ $t('aiChat.etl.title') }}</div>
+            <div class="text-xs text-gray-500 mt-0.5">{{ $t('aiChat.etl.desc') }}</div>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Input Area -->
+    <div class="p-4 border-t border-gray-100 bg-gray-50/50">
+      <div class="relative">
+        <el-input
+          v-model="prompt"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('aiChat.inputPlaceholder')"
+          @keydown.enter.prevent="handleGenerate"
+          resize="none"
+        />
+        
+        <div class="flex items-center justify-between mt-2">
+          <div class="flex gap-2">
+             <el-button link class="!p-1.5 !text-gray-400 hover:!text-gray-600 hover:!bg-gray-100 !rounded-lg">
+               <div class="i-lucide-history w-4 h-4" />
+             </el-button>
+             <el-button link class="!p-1.5 !text-gray-400 hover:!text-gray-600 hover:!bg-gray-100 !rounded-lg">
+               <div class="i-lucide-paperclip w-4 h-4" />
+             </el-button>
+          </div>
+          
+          <el-button 
+            @click="handleGenerate"
+            :loading="loading"
+            :disabled="!prompt.trim()"
+            color="#111827"
+            class="!flex !items-center !gap-2 !px-4 !py-1.5 !rounded-lg !text-sm !font-medium !text-white"
+          >
+            <span v-if="!loading">{{ $t('aiChat.generate') }}</span>
+            <div v-if="!loading" class="i-lucide-send w-3.5 h-3.5" />
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'generate', prompt: string): void;
+}>();
+
+const prompt = ref('');
+
+const setInput = (text: string) => {
+  prompt.value = text;
+};
+
+const handleGenerate = () => {
+  if (!prompt.value.trim() || props.loading) return;
+  emit('generate', prompt.value);
+  // Optional: clear prompt or keep it for refinement?
+  // prompt.value = ''; 
+};
+</script>

package/src/components/ai/AiGenerator.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div class="w-full max-w-lg rounded-xl border border-gray-700 bg-gray-900 p-6 shadow-2xl">
+      <h3 class="mb-4 text-lg font-semibold text-white flex items-center gap-2">
+        <div class="i-lucide-sparkles text-purple-500" />
+        {{ $t('aiGenerator.title') }}
+      </h3>
+      
+      <el-input
+        v-model="prompt"
+        type="textarea"
+        :rows="4"
+        class="custom-dark-input"
+        :placeholder="$t('aiGenerator.placeholder')"
+      />
+
+      <div class="mt-6 flex justify-end gap-3">
+        <el-button @click="close" text class="!text-gray-400 hover:!text-white hover:!bg-gray-800">
+          {{ $t('aiGenerator.cancel') }}
+        </el-button>
+        <el-button @click="confirm" color="#9333ea" class="!text-white !shadow-lg !shadow-purple-500/20">
+          {{ $t('aiGenerator.generate') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-dark-input .el-textarea__inner) {
+  background-color: #030712;
+  border-color: #374151;
+  color: #e5e7eb;
+}
+:deep(.custom-dark-input .el-textarea__inner:focus) {
+  border-color: #a855f7;
+  box-shadow: 0 0 0 1px #a855f7;
+}
+</style>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = defineProps<{ visible: boolean }>();
+const emit = defineEmits(['update:visible', 'confirm']);
+
+const prompt = ref('');
+
+const close = () => {
+  emit('update:visible', false);
+};
+
+const confirm = () => {
+  if (!prompt.value.trim()) return;
+  emit('confirm', prompt.value);
+  close();
+};
+
+watch(() => props.visible, (newVal) => {
+    if (newVal) prompt.value = '';
+});
+</script>

package/src/components/editor/Canvas.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="h-full w-full bg-gray-50/50">
+    <VueFlow
+      v-model:nodes="nodes"
+      v-model:edges="edges"
+      :default-viewport="{ zoom: 1 }"
+      :min-zoom="0.2"
+      :max-zoom="4"
+      fit-view-on-init
+      @node-click="handleNodeClick"
+      @edge-click="handleEdgeClick"
+      @connect="onConnect"
+      @pane-ready="onPaneReady"
+      @dragover="onDragOver"
+      @drop="onDrop"
+      @pane-click="$emit('pane-click')"
+      @node-double-click="$emit('node-double-click', $event.node)"
+    >
+      <Background pattern-color="#e5e7eb" :gap="20" :size="1.5" variant="lines" />
+      
+      <!-- Custom Nodes -->
+      <template #node-custom-ai="props">
+        <AiNode :data="props.data" :selected="props.selected" />
+      </template>
+
+      <template #node-custom-normal="props">
+        <NormalNode :data="props.data" :selected="props.selected" />
+      </template>
+
+      <!-- SysML Nodes -->
+      <template #node-sysml-block="props">
+        <SysmlBlockNode :data="props.data" :selected="props.selected" />
+      </template>
+      <template #node-sysml-req="props">
+        <SysmlRequirementNode :data="props.data" :selected="props.selected" />
+      </template>
+      <template #node-sysml-usecase="props">
+        <SysmlUseCaseNode :data="props.data" :selected="props.selected" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VueFlow, type Node, type Edge, addEdge } from '@vue-flow/core';
+import { Background } from '@vue-flow/background';
+import AiNode from './nodes/AiNode.vue';
+import NormalNode from './nodes/NormalNode.vue';
+import SysmlBlockNode from './nodes/SysmlBlockNode.vue';
+import SysmlRequirementNode from './nodes/SysmlRequirementNode.vue';
+import SysmlUseCaseNode from './nodes/SysmlUseCaseNode.vue';
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+
+const nodes = ref<Node[]>([]);
+const edges = ref<Edge[]>([]);
+
+const emit = defineEmits<{
+  (e: 'node-click', node: Node): void;
+  (e: 'edge-click', edge: Edge): void;
+  (e: 'pane-click'): void;
+  (e: 'node-double-click', node: Node): void;
+}>();
+
+const updateNode = (id: string, update: { type: string; data: any }) => {
+  const node = nodes.value.find((n) => n.id === id);
+  if (!node) return;
+
+  if (update.type === 'style') {
+    // Merge styles into data.style for persistence/reactivity in custom node
+    node.data = {
+      ...node.data,
+      style: {
+        ...(node.data.style || {}),
+        ...update.data,
+      },
+    };
+  } else if (update.type === 'text') {
+    node.data = {
+      ...node.data,
+      label: update.data.label,
+      textStyle: {
+        ...(node.data.textStyle || {}),
+        ...update.data.textStyle,
+      },
+    };
+  } else if (update.type === 'arrange') {
+    // Update position and dimensions
+    if (update.data.x !== undefined) node.position.x = update.data.x;
+    if (update.data.y !== undefined) node.position.y = update.data.y;
+    
+    // Update dimensions via style (standard way in Vue Flow for resizable nodes)
+    node.style = {
+      ...(node.style || {}),
+      width: update.data.width,
+      height: update.data.height,
+    };
+  }
+};
+
+const handleNodeClick = (event: any) => {
+  emit('node-click', event.node);
+};
+
+const handleEdgeClick = (event: any) => {
+  emit('edge-click', event.edge);
+};
+
+const onConnect = (params: any) => {
+  edges.value = addEdge(params, edges.value);
+};
+
+let vueFlowInstance: any = null;
+
+const onPaneReady = (instance: any) => {
+  vueFlowInstance = instance;
+};
+
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move';
+  }
+};
+
+const onDrop = (event: DragEvent) => {
+  const type = event.dataTransfer?.getData('application/vueflow');
+  if (!type || !vueFlowInstance) return;
+
+  const position = vueFlowInstance.project({
+    x: event.clientX,
+    y: event.clientY,
+  });
+
+  const newNode = {
+    id: `node-${Date.now()}`,
+    type,
+    position,
+    data: { 
+      label: type === 'custom-ai' ? 'AI Process' : 
+             type === 'custom-normal' ? 'Action Step' :
+             type === 'sysml-block' ? 'New Block' :
+             type === 'sysml-req' ? 'New Requirement' :
+             type === 'sysml-usecase' ? 'New Use Case' : 'Node'
+    },
+  };
+
+  nodes.value.push(newNode);
+};
+
+defineExpose({
+  addNode: (node: Node) => nodes.value.push(node),
+  exportWorkflow: () => ({ nodes: nodes.value, edges: edges.value }),
+  importWorkflow: (data: { nodes: Node[]; edges: Edge[] }) => {
+    nodes.value = data.nodes;
+    edges.value = data.edges;
+  },
+  updateNode,
+  zoomIn: () => vueFlowInstance?.zoomIn(),
+  zoomOut: () => vueFlowInstance?.zoomOut(),
+  fitView: () => vueFlowInstance?.fitView(),
+});
+</script>
+
+<style>
+/* Custom edge styles for light theme */
+.vue-flow__edge-path {
+  stroke: #94a3b8; /* slate-400 */
+  stroke-width: 2;
+}
+.vue-flow__edge.selected .vue-flow__edge-path {
+  stroke: #7c3aed; /* purple-600 */
+}
+</style>