black bar simulete side-bar added and prompt node created, need to try drag and drop

space_flow/src/App.tsx

@@ -1,9 +1,11 @@
 import Flow from "./flow";
 import "./App.css";
+import { Sidebar } from "./components/sidebar";
 function App() {
   return (
     <div className="w-screen h-screen">
-      <Flow></Flow>
+      <Sidebar/>
+      <Flow></Flow> 
     </div>
   );
 }

space_flow/src/CustomNodes/PromptNode/index.tsx

@@ -0,0 +1,15 @@
+import { Handle, Position } from 'reactflow';
+
+
+export default function PromptNode({data}){
+    console.log(data.template)
+    return(
+        <div 
+        className='prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center'>
+            <Handle type='target' position={Position.Left}></Handle>
+            <label className='absolute text-sm -top-3 left-1 bg-white w-14 text-center'> Prompt</label>
+            <div className='w-full h-10 truncate bg-slate-50 text-xs'> {data.template}</div>
+            <Handle type='source' position={Position.Right}></Handle>
+        </div>
+    )
+}

space_flow/src/components/sidebar.tsx

@@ -0,0 +1,5 @@
+export function Sidebar(){
+    return(
+    <div className="h-full w-48 bg-black absolute z-10" > ablue blue </div>
+    )
+}

space_flow/src/data_assets/agent.ts

@@ -0,0 +1,36 @@
+export const agent = {
+    "llm_chain": {
+        "memory": null,
+        "verbose": false,
+        "prompt": {
+            "input_variables": [
+                "input",
+                "agent_scratchpad"
+            ],
+            "output_parser": null,
+            "template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
+            "template_format": "f-string",
+            "_type": "prompt"
+        },
+        "llm": {
+            "model_name": "text-davinci-003",
+            "temperature": 0.0,
+            "max_tokens": 256,
+            "top_p": 1,
+            "frequency_penalty": 0,
+            "presence_penalty": 0,
+            "n": 1,
+            "best_of": 1,
+            "request_timeout": null,
+            "logit_bias": {},
+            "_type": "openai"
+        },
+        "output_key": "text",
+        "_type": "llm_chain"
+    },
+    "allowed_tools": null,
+    "return_values": [
+        "output"
+    ],
+    "_type": "zero-shot-react-description"
+}

space_flow/src/data_assets/llm_chain.ts

@@ -0,0 +1,29 @@
+export const llm_chain = {
+    "memory": null,
+    "verbose": false,
+    "prompt": {
+        "input_variables": [
+            "input",
+            "agent_scratchpad"
+        ],
+        "output_parser": null,
+        "template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
+        "template_format": "f-string",
+        "_type": "prompt"
+    },
+    "llm": {
+        "model_name": "text-davinci-003",
+        "temperature": 0.0,
+        "max_tokens": 256,
+        "top_p": 1,
+        "frequency_penalty": 0,
+        "presence_penalty": 0,
+        "n": 1,
+        "best_of": 1,
+        "request_timeout": null,
+        "logit_bias": {},
+        "_type": "openai"
+    },
+    "output_key": "text",
+    "_type": "llm_chain"
+}

space_flow/src/data_assets/prompt.ts

@@ -0,0 +1,10 @@
+export const prompt={
+    "input_variables": [
+        "input",
+        "agent_scratchpad"
+    ],
+    "output_parser": null,
+    "template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
+    "template_format": "f-string",
+    "_type": "prompt"
+}

space_flow/src/flow/index.tsx

@@ -1,13 +1,13 @@
 import 'reactflow/dist/style.css';
 import { useState, useCallback } from 'react';
-import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls } from 'reactflow';
+import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, Position } from 'reactflow';
 import type { Node, Edge } from 'reactflow';
 import TextUpdaterNode from '../CustomNodes/inputTextFolder';
 import '../CustomNodes/inputTextFolder/inputText.css'
-import { type } from 'os';
-
+import PromptNode from '../CustomNodes/PromptNode';
+import { prompt } from '../data_assets/prompt';
     // outside component to avoid render trigger
-    const nodeTypes = {textUpdater:TextUpdaterNode}
+    const nodeTypes = {textUpdater:TextUpdaterNode, promptNode:PromptNode}
 
     const rfStyle={
         backgroundCOlor:"#B8CEFF"
@@ -16,8 +16,8 @@ import { type } from 'os';
 export default function Flow(){
     
 
-    const [nodes,setNodes] =  useState<Array<Node>>([{id:'1', position:{x:0,y:0}, data:{label:"hello"}},
-    {id:'2',data:{label:"world"},position:{x:100,y:100}}, {id:'text-node1',position:{x:50,y:50},data:{value:123}, type:"textUpdater"}])
+    const [nodes,setNodes] =  useState<Array<Node>>([{id:'1', position:{x:0,y:0}, data:{label:"node"},style:{color:"blue", width:100, height:40},sourcePosition:Position.Left,targetPosition:Position.Right},
+    {id:'2',data:{label:"world"},position:{x:100,y:100}}, {id:'4',data:prompt,position:{x:50,y:120},type:"promptNode"}])
     const [edges,setEdges] = useState<Array<Edge>>([])
     //allow iteractive with the react flow
     const onNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),[] );

space_flow/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{js,ts,tsx,jsx}"],
+  important:true,
   theme: {
     extend: {},
   },