diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index eb14794..cf2b90c 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -6,6 +6,15 @@ import ReactFlow, {
ReactFlowProvider,
} from 'reactflow';
import { shallow } from 'zustand/shallow';
+import { useCallback, useRef, useState } from 'react';
+import {
+ FiPlayCircle,
+ FiKey,
+ FiMessageSquare,
+ FiImage,
+ FiMusic,
+ FiSettings,
+} from 'react-icons/fi';
import useStore from './store';
import 'reactflow/dist/style.css';
@@ -19,18 +28,10 @@ import CodeBlock from './nodes/Codeblock';
import Start from './nodes/Start';
import Explanation from './nodes/Explanation';
import CodeTypeSelector from './nodes/CodeTypeSelector';
-import { useCallback, useRef, useState } from 'react';
import OpenAITranscription from './nodes/OpenAITranscription';
-import {
- FiPlayCircle,
- FiKey,
- FiMessageSquare,
- FiImage,
- FiMusic,
- FiSettings,
-} from 'react-icons/fi';
import Display from './nodes/Display';
+import Tutorial from './nodes/Tutorial';
const nodeTypes = {
openAI: OpenAI,
@@ -42,7 +43,8 @@ const nodeTypes = {
codeBlock: CodeBlock,
explanation: Explanation,
codeLanguage: CodeTypeSelector,
- display: Display
+ display: Display,
+ tutorial: Tutorial,
};
const selector = (store) => ({
@@ -60,7 +62,7 @@ const selector = (store) => ({
addNode: store.addNode,
updateData: store.updateData,
updateLanguage: store.updateLanguage,
- updateCompletionType: store.updateCompletionType
+ updateCompletionType: store.updateCompletionType,
});
export default function App() {
@@ -82,7 +84,7 @@ export default function App() {
}
const position = reactFlowInstance.screenToFlowPosition({
- x: event.clientX,
+ x: event.clientX - 210,
y: event.clientY,
});
@@ -94,11 +96,11 @@ export default function App() {
const isValidConnection = (connection) => {
const sourceNode = store.nodes.find((val) => val.id === connection.source);
- const targetNode = store.nodes.find((val) => val.id === connection.target);
+ const targetNode = store.nodes.find((val) => val.id === connection.target);
- if (sourceNode.type === 'start' && targetNode.type === 'openAI') {
- return true;
- }
+ if (sourceNode.type === 'start' && targetNode.type === 'openAI') {
+ return true;
+ }
if (
sourceNode.type === 'openAI' &&
@@ -118,8 +120,8 @@ export default function App() {
return true;
}
- if (sourceNode.type === "codeLanguage" && targetNode.type === "end") {
- return true
+ if (sourceNode.type === 'codeLanguage' && targetNode.type === 'end') {
+ return true;
}
// if (sourceNode.type === "codeLanguage" && targetNode.type === "display") {
@@ -167,24 +169,30 @@ export default function App() {
if (allPaths.length <= 0) return;
- for (const nodes of allPaths) {
- for (let i = 0; i < nodes.length; i++) {
- const node = store.getNode(nodes[i]);
- myJson[node.type] = node.data;
- }
- }
+ for (const nodes of allPaths) {
+ for (let i = 0; i < nodes.length; i++) {
+ const node = store.getNode(nodes[i]);
+ myJson[node.type] = node.data;
+ }
+ }
- let myCode = "";
+ let myCode = '';
- for (const x in myJson) {
- if (x === "start" || x === "end" || x === "codeLanguage" || x === "display") continue;
+ for (const x in myJson) {
+ if (
+ x === 'start' ||
+ x === 'end' ||
+ x === 'codeLanguage' ||
+ x === 'display'
+ )
+ continue;
- store.updateCompletionType(x)
+ store.updateCompletionType(x);
- const { fn, ...args } = myJson[x];
- if (fn) {
- myCode += fn({ ...args, language: store.language });
- myCode += `
+ const { fn, ...args } = myJson[x];
+ if (fn) {
+ myCode += fn({ ...args, language: store.language });
+ myCode += `
`;
}
}
@@ -259,7 +267,8 @@ export default function App() {
onInit={setReactFlowInstance}
onDrop={onDrop}
onDragOver={onDragOver}
- fitView>
+ fitView
+ >
diff --git a/src/renderer/components/Handler/index.tsx b/src/renderer/components/Handler/index.tsx
index 09e6ca1..bc10d17 100644
--- a/src/renderer/components/Handler/index.tsx
+++ b/src/renderer/components/Handler/index.tsx
@@ -2,35 +2,33 @@ import React, { useMemo } from 'react';
import { getConnectedEdges, Handle, useNodeId, useStore } from 'reactflow';
const selector = (s) => ({
- nodeInternals: s.nodeInternals,
- edges: s.edges,
+ nodeInternals: s.nodeInternals,
+ edges: s.edges,
});
-const CustomHandle = (props) => {
- const { nodeInternals, edges } = useStore(selector);
- const nodeId = useNodeId();
+function CustomHandle(props) {
+ const { nodeInternals, edges } = useStore(selector);
+ const nodeId = useNodeId();
- const isHandleConnectable = useMemo(() => {
- if (typeof props.isConnectable === 'function') {
- const node = nodeInternals.get(nodeId);
- const connectedEdges = getConnectedEdges([node], edges);
+ const isHandleConnectable = useMemo(() => {
+ if (typeof props.isConnectable === 'function') {
+ const node = nodeInternals.get(nodeId);
+ const connectedEdges = getConnectedEdges([node], edges);
- return props.isConnectable({ node, connectedEdges });
- }
+ return props.isConnectable({ node, connectedEdges });
+ }
- if (typeof props.isConnectable === 'number') {
- const node = nodeInternals.get(nodeId);
- const connectedEdges = getConnectedEdges([node], edges);
+ if (typeof props.isConnectable === 'number') {
+ const node = nodeInternals.get(nodeId);
+ const connectedEdges = getConnectedEdges([node], edges);
- return connectedEdges.length < props.isConnectable;
- }
+ return connectedEdges.length < props.isConnectable;
+ }
- return props.isConnectable;
- }, [nodeInternals, edges, nodeId, props.isConnectable]);
+ return props.isConnectable;
+ }, [nodeInternals, edges, nodeId, props.isConnectable]);
- return (
-
- );
-};
+ return ;
+}
export default CustomHandle;
diff --git a/src/renderer/index.ejs b/src/renderer/index.ejs
index 167cf37..563ad94 100644
--- a/src/renderer/index.ejs
+++ b/src/renderer/index.ejs
@@ -6,7 +6,7 @@
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
-
Hello Electron React!
+ VisualChain
diff --git a/src/renderer/nodes/Display.tsx b/src/renderer/nodes/Display.tsx
index 51ce7ed..a38a2ca 100644
--- a/src/renderer/nodes/Display.tsx
+++ b/src/renderer/nodes/Display.tsx
@@ -1,23 +1,30 @@
-import { shallow } from "zustand/shallow";
-import useStore from "../store";
+import { shallow } from 'zustand/shallow';
+import useStore from '../store';
const selector = (store) => ({
- outputString: store.outputString,
- completionType: store.completionType
+ outputString: store.outputString,
+ completionType: store.completionType,
});
export default function Display() {
+ const store = useStore(selector, shallow);
- const store = useStore(selector, shallow);
-
-
- return (
-
-
- Output
-
-
-
- );
-}
\ No newline at end of file
+ return (
+
+
+ Output
+
+
+
+ );
+}
diff --git a/src/renderer/nodes/End.tsx b/src/renderer/nodes/End.tsx
index 2b7cec9..6380b94 100644
--- a/src/renderer/nodes/End.tsx
+++ b/src/renderer/nodes/End.tsx
@@ -1,14 +1,19 @@
-import React from "react";
-import { Handle } from "reactflow";
-import CustomHandle from "../components/Handler";
+import React from 'react';
+import CustomHandle from '../components/Handler';
export default function End() {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/src/renderer/nodes/Start.tsx b/src/renderer/nodes/Start.tsx
index cff2b09..cb97f5d 100644
--- a/src/renderer/nodes/Start.tsx
+++ b/src/renderer/nodes/Start.tsx
@@ -1,14 +1,19 @@
-import React from "react";
-import { Handle } from "reactflow";
-import CustomHandle from "../components/Handler";
+import React from 'react';
+import CustomHandle from '../components/Handler';
export default function Start() {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/src/renderer/nodes/Tutorial.tsx b/src/renderer/nodes/Tutorial.tsx
new file mode 100644
index 0000000..8f89c07
--- /dev/null
+++ b/src/renderer/nodes/Tutorial.tsx
@@ -0,0 +1,15 @@
+export default function Tutorial() {
+ return (
+
+
+ Here is VisualChain, to start please drag the AI
+ components from the sidebar.
+
+
+ Then you want and connect the nodes and if all the connections are
+ correct just hit the Run button and you will see magic
+ happen.
+
+
+ );
+}
diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts
index de77d6a..de1b98e 100644
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -12,6 +12,13 @@ const useStore = create((set, get) => {
return {
nodes: [
{ id: nanoid(), type: 'start', position: { x: 50, y: 50 } },
+ {
+ id: nanoid(),
+ type: 'tutorial',
+ draggable: false,
+ selectable: false,
+ position: { x: 200, y: 50 },
+ },
{ id: nanoid(), type: 'end', position: { x: 50, y: 700 } },
],
edges: [],
@@ -112,14 +119,14 @@ const useStore = create((set, get) => {
set({ nodes: [...get().nodes, { id, type, data, position }] });
break;
}
- case 'start': {
- set({ nodes: [...get().nodes, { id, type, position }] });
- break;
- }
- case 'end': {
- set({ nodes: [...get().nodes, { id, type, position }] });
- break;
- }
+ // case 'start': {
+ // set({ nodes: [...get().nodes, { id, type, position }] });
+ // break;
+ // }
+ // case 'end': {
+ // set({ nodes: [...get().nodes, { id, type, position }] });
+ // break;
+ // }
case 'codeBlock': {
const data = { code: get().data };
const position = { x: 200, y: 300 };