feat: scaffold copilot

.gitignore

@@ -5,4 +5,5 @@ index.d.ts
 lib/**/*.d.ts
 .idea
 *.iml
-.DS_Store
+.DS_Store
+.env

assets/bpmn-js.css

@@ -142,3 +142,7 @@
  height: 20px;
  width: 20px;
 }
+
+.layer-copilot {
+ opacity: 0.5;
+}

lib/Modeler.js

@@ -18,6 +18,7 @@ import BendpointsModule from 'diagram-js/lib/features/bendpoints';
 import ConnectModule from 'diagram-js/lib/features/connect';
 import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';
 import ContextPadModule from './features/context-pad';
+import CopilotModule from './features/copilot';
 import CopyPasteModule from './features/copy-paste';
 import CreateModule from 'diagram-js/lib/features/create';
 import DistributeElementsModule from './features/distribute-elements';
@@ -175,6 +176,7 @@ Modeler.prototype._modelingModules = [
  ConnectModule,
  ConnectionPreviewModule,
  ContextPadModule,
+ CopilotModule,
  CopyPasteModule,
  CreateModule,
  DistributeElementsModule,

lib/features/copilot/Copilot.js

@@ -0,0 +1,152 @@
+import { isNil } from 'min-dash';
+
+import { clear as svgClear } from 'tiny-svg';
+
+export default class Copilot {
+ constructor(
+ canvas,
+ createPreview,
+ directEditing,
+ eventBus,
+ keyboard,
+ modeling,
+ selection) {
+ this._canvas = canvas;
+ this._createPreview = createPreview;
+ this._directEditing = directEditing;
+ this._modeling = modeling;
+ this._selection = selection;
+
+ eventBus.on('selection.changed', (context) => {
+ const { newSelection } = context;
+
+ this.clearSuggestion();
+
+ if (newSelection.length === 1) {
+ this.makeSuggestion(newSelection[ 0 ]);
+ }
+ });
+
+ eventBus.on('directEditing.activate', () => {
+ this.hideSuggestion();
+ });
+
+ eventBus.on('directEditing.deactivate', () => {
+ this.showSuggestion();
+ });
+
+ keyboard.addListener((context) => {
+ if (context.keyEvent.key === 'Tab') {
+ context.keyEvent.preventDefault();
+
+ this.acceptSuggestion();
+ } else if (context.keyEvent.key === 'Escape') {
+ this.clearSuggestion();
+ }
+ });
+
+ this._suggestion = null;
+
+ this._layer = canvas.getLayer('copilot', 1000);
+ }
+
+ acceptSuggestion() {
+ console.log('acceptSuggestion');
+
+ if (!this._suggestion) {
+ return;
+ }
+
+ const {
+ connectionSource,
+ connectionTarget,
+ elements,
+ position,
+ target
+ } = this._suggestion;
+
+ const createdElements = this._modeling.createElements(elements, position, target, {
+ position: 'absolute'
+ });
+
+ if (connectionSource && connectionTarget) {
+ this._modeling.connect(connectionSource, connectionTarget);
+ }
+
+ this.clearSuggestion();
+
+ if (createdElements.length === 1) {
+ this._selection.select(createdElements[ 0 ]);
+
+ this._directEditing.activate(createdElements[ 0 ]);
+ }
+ }
+
+ async makeSuggestion(element) {
+ console.log('makeSuggestion');
+
+ const suggestion = this._suggestion = await this.createSuggestion(element);
+
+ console.log('suggestion', suggestion);
+
+ if (!suggestion) {
+ return;
+ }
+
+ const {
+ connection,
+ elements
+ } = suggestion;
+
+ const group = this._createPreview.createPreview([
+ connection,
+ ...elements
+ ].filter(element => !isNil(element)));
+
+ this._layer.appendChild(group);
+ }
+
+ showSuggestion() {
+ console.log('showSuggestion');
+
+ this._canvas.showLayer('copilot');
+ }
+
+ hideSuggestion() {
+ console.log('hideSuggestion');
+
+ this._canvas.hideLayer('copilot');
+ }
+
+ clearSuggestion() {
+ console.log('clearSuggestion');
+
+ this._suggestion = null;
+
+ svgClear(this._layer);
+ }
+
+ createSuggestion(element) {
+ console.log('createSuggestion');
+
+ if (!this._provider) {
+ return null;
+ }
+
+ return this._provider.createSuggestion(element);
+ }
+
+ setProvider(provider) {
+ this._provider = provider;
+ }
+}
+
+Copilot.$inject = [
+ 'canvas',
+ 'createPreview',
+ 'directEditing',
+ 'eventBus',
+ 'keyboard',
+ 'modeling',
+ 'selection'
+];

lib/features/copilot/OpenAIProvider.js

@@ -0,0 +1,189 @@
+import { OpenAI } from 'langchain/llms/openai';
+
+import {
+ getBusinessObject,
+ is
+} from '../../util/ModelUtil';
+
+const model = new OpenAI({
+
+ // modelName: 'text-davinchi-003',
+ maxTokens: 2000,
+
+ // eslint-disable-next-line no-undef
+ openAIApiKey: process.env.OPENAI_API_KEY,
+ temperature: 0.9,
+ verbose: true,
+});
+
+export default class OpenAIProvider {
+ constructor(autoPlace, connectionPreview, copilot, elementFactory, eventBus, layouter, rules) {
+ this._autoPlace = autoPlace;
+ this._connectionPreview = connectionPreview;
+ this._eventBus = eventBus;
+ this._layouter = layouter;
+ this._rules = rules;
+
+ copilot.setProvider(this);
+
+ this._elementFactory = elementFactory;
+ }
+
+ async createSuggestion(element) {
+ if (!is(element, 'bpmn:FlowNode')) {
+ return null;
+ }
+
+ const suggestedNextElement = await suggestNextElement(element);
+
+ if (!suggestedNextElement) {
+ return null;
+ }
+
+ const {
+ name,
+ type
+ } = suggestedNextElement;
+
+ const nextElement = this._elementFactory.createShape({
+ type
+ });
+
+ nextElement.businessObject.set('name', name);
+
+ console.log('nextElement', nextElement);
+
+ const position = this._eventBus.fire('autoPlace', {
+ source: element,
+ shape: nextElement
+ });
+
+ if (!position) {
+ throw new Error('no position');
+ }
+
+ nextElement.x = position.x - nextElement.width / 2;
+ nextElement.y = position.y - nextElement.height / 2;
+
+ const connectionCreateAllowed = this._rules.allowed('connection.create', {
+ source: element,
+ target: nextElement,
+ hints: {
+ targetParent: element.parent
+ }
+ });
+
+ let connection = null;
+
+ if (connectionCreateAllowed) {
+ connection = this._elementFactory.createConnection(connectionCreateAllowed);
+
+ connection.waypoints = this._layouter.layoutConnection(connection, {
+ source: element,
+ target: nextElement
+ });
+ }
+
+ return {
+ connection,
+ connectionSource: connectionCreateAllowed ? element : null,
+ connectionTarget: connectionCreateAllowed ? nextElement : null,
+ elements: [ nextElement ],
+ position: null,
+ target: element.parent
+ };
+ }
+}
+
+OpenAIProvider.$inject = [
+ 'autoPlace',
+ 'connectionPreview',
+ 'copilot',
+ 'elementFactory',
+ 'eventBus',
+ 'layouter',
+ 'rules'
+];
+
+async function suggestNextElement(element) {
+ const prompt = [
+ 'BPMN Process:',
+ ...getEdges(element),
+ 'Selected element:',
+ getName(element),
+ 'Suggested next element name and type (e.g., Do work[bpmn:Task]):'
+ ].join('\n');
+
+ console.log('prompt', prompt);
+
+ const response = await model.call(prompt);
+
+ console.log('response', response);
+
+ try {
+ const [ _, name, type ] = /(.*)\[(.*)\]/.exec(response);
+
+ console.log('name', name);
+ console.log('type', type);
+
+ return {
+ type,
+ name
+ };
+ } catch (error) {
+ return null;
+ }
+}
+
+function getEdges(element, edges = [], visitedSequenceFlows = []) {
+ element = getBusinessObject(element);
+
+ const incoming = element.get('incoming');
+
+ if (!incoming) {
+ return edges;
+ }
+
+ incoming
+ .filter(
+ (incoming) =>
+ is(incoming, 'bpmn:SequenceFlow') &&
+ !visitedSequenceFlows.includes(incoming)
+ )
+ .forEach((sequenceFlow) => {
+ visitedSequenceFlows.push(sequenceFlow);
+
+ const edge = getEdge(sequenceFlow);
+
+ edges.push(edge, ...getEdges(sequenceFlow.get('sourceRef')));
+ });
+
+ return edges;
+}
+
+function getEdge(sequenceFlow) {
+ const name = getName(sequenceFlow, true);
+
+ const source = sequenceFlow.get('sourceRef'),
+ target = sequenceFlow.get('targetRef');
+
+ return name
+ ? `${getName(source)}[${source.$type}] -- ${name} --> ${getName(target)}[${
+ target.$type
+ }]`
+ : `${getName(source)}[${source.$type}] --> ${getName(target)}[${
+ target.$type
+ }]`;
+}
+
+function getName(element, strict = false) {
+ const businessObject = getBusinessObject(element);
+
+ let name = businessObject.get('name');
+
+ if (!name && !strict) {
+ name = businessObject.get('id');
+ }
+
+ return name;
+}

lib/features/copilot/index.js

@@ -0,0 +1,15 @@
+import Copilot from './Copilot';
+import OpenAIProvider from './OpenAIProvider';
+
+export default {
+ __depends__: [
+
+ // TODO
+ ],
+ __init__: [
+ 'copilot',
+ 'openaiprovider'
+ ],
+ copilot: [ 'type', Copilot ],
+ openaiprovider: [ 'type', OpenAIProvider ]
+};