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 };