Component System

/**
 * Node Details View component for node configuration
 */
interface NodeDetailsViewProps {
  workflowObject: Workflow;
  readOnly?: boolean;
  renaming?: boolean;
  isProductionExecutionPreview?: boolean;
}

interface NodeDetailsViewEvents {
  'save-keyboard-shortcut': (event: KeyboardEvent) => void;
  'value-changed': (data: IUpdateInformation) => void;
  'switch-selected-node': (nodeName: string) => void;
  'open-connection-node-creator': (data: any) => void;
  'stop-execution': () => void;
}

/**
 * Canvas component for visual workflow editing
 */
interface CanvasProps {
  id?: string;
  nodes: CanvasNode[];
  connections: CanvasConnection[];
  controlsPosition?: PanelPosition;
  readOnly?: boolean;
  executing?: boolean;
}

/**
 * Parameter Input component for dynamic node configuration
 */
interface ParameterInputProps {
  parameter: INodeProperties;
  value: NodeParameterValueType;
  path: string;
  isReadOnly?: boolean;
  hideIssues?: boolean;
  documentationUrl?: string;
  errorHighlight?: boolean;
  isForCredential?: boolean;
  eventSource?: string;
}

interface ParameterInputEvents {
  'update:value': (value: NodeParameterValueType) => void;
  'focus': () => void;
  'blur': () => void;
  'text-input': (value: string) => void;
}

/**
 * Main Sidebar component for navigation
 */
interface MainSidebarProps {
  collapsed?: boolean;
}

interface MainSidebarEvents {
  'toggle-collapse': (collapsed: boolean) => void;
  'menu-item-click': (item: string) => void;
}

/**
 * Main Header component with workflow controls
 */
interface MainHeaderProps {
  workflowName: string;
  workflowStatus: WorkflowTitleStatus;
  isReadOnly?: boolean;
}

interface MainHeaderEvents {
  'save-workflow': () => void;
  'execute-workflow': () => void;
  'stop-execution': () => void;
  'workflow-settings': () => void;
}

/**
 * Modal component for dialogs and overlays
 */
interface ModalProps {
  name: string;
  title?: string;
  subtitle?: string;
  width?: string;
  minWidth?: string;
  maxWidth?: string;
  height?: string;
  minHeight?: string;
  maxHeight?: string;
  showClose?: boolean;
  closeOnClickModal?: boolean;
  closeOnPressEscape?: boolean;
  scrollable?: boolean;
  centerVertically?: boolean;
  keepAlive?: boolean;
}

/**
 * Code Editor component with syntax highlighting
 */
interface CodeEditorProps {
  modelValue: string;
  language?: string;
  readOnly?: boolean;
  placeholder?: string;
  lineNumbers?: boolean;
  foldGutter?: boolean;
  autocomplete?: boolean;
  resizable?: boolean;
}

/**
 * Expression Editor component for n8n expressions
 */
interface ExpressionEditorProps {
  modelValue: string;
  path: string;
  isReadOnly?: boolean;
  rows?: number;
  additionalData?: IDataObject;
}

/**
 * Resource Locator component for API resource selection
 */
interface ResourceLocatorProps {
  parameter: INodeProperties;
  value: INodeParameterResourceLocator;
  path: string;
  isReadOnly?: boolean;
  inputSize?: string;
}

/**
 * Credentials Select component
 */
interface CredentialsSelectProps {
  parameter: INodeProperties;
  value: string | ICredentialsResponse;
  path: string;
  isReadOnly?: boolean;
  showAll?: boolean;
}

/**
 * Run Data component for displaying node execution results
 */
interface RunDataProps {
  nodeUi: INodeUi;
  runIndex: number;
  outputIndex: number;
  connectionType: NodeConnectionType;
  mode: 'input' | 'output';
  dataCount?: number;
  hasRunData?: boolean;
}

/**
 * JSON View component for structured data display
 */
interface JsonViewProps {
  value: any;
  maxDepth?: number;
  collapsed?: boolean;
  collapseStringsAfterLength?: number;
  showLength?: boolean;
  showType?: boolean;
}

/**
 * Binary Data component for file/binary data display
 */
interface BinaryDataProps {
  binaryData: IBinaryData;
  index: number;
  totalCount: number;
}

/**
 * Table View component for tabular data display
 */
interface TableViewProps {
  data: INodeExecutionData[];
  nodeUi: INodeUi;
  distanceFromActive?: number;
  branch?: number;
  isExecuting?: boolean;
}

/**
 * Node Creator component for adding new nodes
 */
interface NodeCreatorProps {
  createNodeActive: boolean;
  nodeCreatorView?: NodeFilterType;
  hasAddedNodes?: boolean;
}

interface NodeCreatorEvents {
  'toggle-activation': (active: boolean) => void;
  'add-nodes-and-connections': (data: AddedNodesAndConnections) => void;
}

/**
 * Node Settings component for node configuration
 */
interface NodeSettingsProps {
  nodeType: INodeTypeDescription;
  node: INodeUi;
  workflow: Workflow;
  isReadOnly?: boolean;
  hideDelete?: boolean;
}

/**
 * Workflow Settings component
 */
interface WorkflowSettingsProps {
  workflow: IWorkflowDb;
}

interface WorkflowSettingsEvents {
  'save-settings': (settings: IWorkflowSettings) => void;
}

/**
 * AI Assistant component for workflow help
 */
interface AiAssistantProps {
  enabled: boolean;
  sessionId?: string;
}

/**
 * Execution List component for workflow execution history
 */
interface ExecutionListProps {
  executions: ExecutionSummary[];
  loading?: boolean;
  autoRefresh?: boolean;
}

/**
 * Chat component for chat-based workflows
 */
interface ChatProps {
  sessionId: string;
  messages: ChatMessage[];
  isLoading?: boolean;
}

/**
 * Templates component for workflow templates
 */
interface TemplatesProps {
  categories: string[];
  collections: ITemplatesCollection[];
  workflows: ITemplatesWorkflow[];
}

<template>
  <div class="workflow-editor">
    <!-- Canvas for workflow editing -->
    <Canvas
      :nodes="canvasNodes"
      :connections="canvasConnections"
      :read-only="isReadOnly"
      :executing="isExecuting"
      @click:node="onNodeClick"
      @create:node="onCreateNode"
      @save:workflow="onSaveWorkflow"
    />
    
    <!-- Node Details View for configuration -->
    <NodeDetailsView
      v-if="activeNode"
      :workflow-object="workflowObject"
      :read-only="isReadOnly"
      @value-changed="onParameterChange"
      @save-keyboard-shortcut="onSaveShortcut"
    />
    
    <!-- Parameter inputs -->
    <ParameterInput
      v-for="parameter in nodeParameters"
      :key="parameter.name"
      :parameter="parameter"
      :value="parameterValues[parameter.name]"
      :path="parameter.name"
      @update:value="updateParameter"
    />
  </div>
</template>

<script setup lang="ts">
import Canvas from '@/components/canvas/Canvas.vue';
import NodeDetailsView from '@/components/NodeDetailsView.vue';
import ParameterInput from '@/components/ParameterInput.vue';

// Component logic here
</script>

// Render parameter input based on type
const renderParameterInput = (parameter: INodeProperties) => {
  switch (parameter.type) {
    case 'string':
      return resolveComponent('ParameterInputString');
    case 'number':
      return resolveComponent('ParameterInputNumber');
    case 'boolean':
      return resolveComponent('ParameterInputBoolean');
    case 'collection':
      return resolveComponent('ParameterInputCollection');
    case 'credentials':
      return resolveComponent('CredentialsSelect');
    default:
      return resolveComponent('ParameterInput');
  }
};

interface INodeProperties {
  displayName: string;
  name: string;
  type: NodePropertyTypes;
  typeOptions?: INodePropertyTypeOptions;
  default: NodeParameterValueType;
  description?: string;
  hint?: string;
  displayOptions?: IDisplayOptions;
  options?: Array<INodePropertyOptions | INodeProperties | INodePropertyCollection>;
  placeholder?: string;
  isNodeSetting?: boolean;
  noDataExpression?: boolean;
  required?: boolean;
  routing?: INodePropertyRouting;
  credentialTypes?: string[];
  extractValue?: INodePropertyValueExtractor;
}

type NodeParameterValueType = 
  | string 
  | number 
  | boolean 
  | undefined 
  | null 
  | GenericValue 
  | INodeParameters 
  | ResourceLocatorModes 
  | Expression;

interface INodeParameterResourceLocator {
  mode: string;
  value: NodeParameterValueType;
  cachedResultName?: string;
  cachedResultUrl?: string;
  __rl?: boolean;
}

interface ChatMessage {
  id: string;
  text: string;
  sender: 'user' | 'bot';
  timestamp: number;
  type?: 'text' | 'code' | 'workflow';
}

interface AddedNodesAndConnections {
  nodes: AddedNode[];
  connections: AddedNodeConnection[];
}

type NodeFilterType = 
  | 'Regular' 
  | 'Trigger' 
  | 'AI' 
  | 'AI_Others' 
  | 'AI_Uncategorized' 
  | 'AI_Evaluation';

type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR' | 'DEBUG';

type PanelPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';