Update src/App.tsx

src/App.tsx

@@ -12,19 +12,82 @@ const initialNodes: Node<TurboNodeData>[] = [
   {
     id: '1',
     position: { x: 0, y: 0 },
-    data: { icon: <FunctionIcon />, title: 'Prompt 1', subline: 'Description 1' },
+    data: {
+      icon: <FunctionIcon />,
+      title: 'LLM Provider',
+      subline: 'Select the LLM provider',
+      inputFields: [],
+      options: [
+        { id: 'provider-openai', label: 'OpenAI', checked: true },
+        { id: 'provider-azure', label: 'Azure', checked: false },
+        { id: 'provider-cohere', label: 'Cohere', checked: false },
+        { id: 'provider-huggingface', label: 'Hugging Face', checked: false },
+        { id: 'provider-anthropic', label: 'Anthropic', checked: false },
+      ],
+    },
     type: 'turbo',
   },
   {
     id: '2',
     position: { x: 250, y: 0 },
-    data: { icon: <FunctionIcon />, title: 'Prompt 2', subline: 'Description 2' },
+    data: {
+      icon: <FunctionIcon />,
+      title: 'Model Selection',
+      subline: 'Choose the LLM model',
+      inputFields: [],
+      options: [
+        { id: 'model-gpt-3.5-turbo', label: 'GPT-3.5-turbo', checked: true },
+        { id: 'model-gpt-4', label: 'GPT-4', checked: false },
+        { id: 'model-claude', label: 'Claude', checked: false },
+        { id: 'model-flan-t5', label: 'Flan-T5', checked: false },
+      ],
+    },
     type: 'turbo',
   },
   {
     id: '3',
     position: { x: 500, y: 0 },
-    data: { icon: <FiFile />, title: 'Output' },
+    data: {
+      icon: <FunctionIcon />,
+      title: 'Prompt Engineering',
+      subline: 'Configure prompt settings',
+      inputFields: [
+        { id: 'prompt-template', label: 'Prompt Template', value: '' },
+        { id: 'prompt-examples', label: 'Prompt Examples', value: '' },
+      ],
+      options: [
+        { id: 'prompt-fewshot', label: 'Few-shot Learning', checked: false },
+        { id: 'prompt-cot', label: 'Chain-of-Thought', checked: false },
+      ],
+    },
+    type: 'turbo',
+  },
+  {
+    id: '4',
+    position: { x: 750, y: 0 },
+    data: {
+      icon: <FunctionIcon />,
+      title: 'API Settings',
+      subline: 'Set API parameters',
+      inputFields: [
+        { id: 'api-key', label: 'API Key', value: '' },
+        { id: 'api-base', label: 'API Base URL', value: '' },
+      ],
+      options: [
+        { id: 'api-streaming', label: 'Enable Streaming', checked: false },
+        { id: 'api-retry', label: 'Enable Auto-Retry', checked: true },
+      ],
+    },
+    type: 'turbo',
+  },
+  {
+    id: '5',
+    position: { x: 1000, y: 0 },
+    data: {
+      icon: <FiFile />,
+      title: 'Output',
+      subline: 'Generated output from LLM',
+    },
     type: 'turbo',
   },
 ];
@@ -40,6 +103,16 @@ const initialEdges: Edge[] = [
     source: '2',
     target: '3',
   },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+  },
+  {
+    id: 'e4-5',
+    source: '4',
+    target: '5',
+  },
 ];
 
 const nodeTypes = {
@@ -101,4 +174,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;