added new components, bug fixes, docs updates

Author: code-forge-temple

README.md

@@ -46,12 +46,47 @@
 - **Conversation Memory** - Maintain context across workflow executions
 
 ### 🔗 **Rich Integrations**
-- See the [Nodes Reference](https://code-forge-temple.github.io/agentic-signal/docs/nodes/overview) for all supported integrations and node types.
-- **More integrations coming soon** - Discord, Slack, Notion, Airtable, and many more!
+
+#### Node Types
+
+- [Data Source](https://agentic-signal.com/docs/nodes/input/data-source)
+- [AI Data Processing](https://agentic-signal.com/docs/nodes/ai/llm-process)
+- [AI Tool](https://agentic-signal.com/docs/nodes/ai/ai-tool)
+- [HTTP Data](https://agentic-signal.com/docs/nodes/input/http-data)
+- [JSON Reformatter](https://agentic-signal.com/docs/nodes/data/json-reformatter)
+- [Stock Analysis](https://agentic-signal.com/docs/nodes/data/stock-analysis)
+- [Async Data Aggregator](https://agentic-signal.com/docs/nodes/data/async-data-aggregator)
+- [Data Validation](https://agentic-signal.com/docs/nodes/data/data-validation)
+- [Chart](https://agentic-signal.com/docs/nodes/output/chart)
+- [Data Flow Spy](https://agentic-signal.com/docs/nodes/output/data-flow-spy)
+- [Timer](https://agentic-signal.com/docs/nodes/input/timer)
+- [Reddit Post](https://agentic-signal.com/docs/nodes/output/reddit-post) *(PRO)*
+- [Slack Input](https://agentic-signal.com/docs/nodes/input/slack-input) *(PRO)*
+- [Slack Output](https://agentic-signal.com/docs/nodes/output/slack-output) *(PRO)*
+
+> See the full [Nodes Reference](https://agentic-signal.com/docs/nodes/overview) for details on all node types.
+
+#### Workflows
+
+Explore ready-to-use workflow templates in the [Workflow Examples](https://agentic-signal.com/docs/workflows/overview).
+
+#### AI & Tool Integrations
+
+- **Ollama LLMs**: Use local language models for text analysis and generation.
+- **Google Services**: Gmail, Google Drive, Google Calendar.
+- **Weather APIs**: Real-time weather data.
+- **Search Engines**: DuckDuckGo, Brave Search.
+- **Financial Analysis**: Stock market data analysis with technical indicators.
+- **Date/Time Tools**: Get current date and time.
+- **Slack**: Send and receive messages via Slack slash commands using Socket Mode. *(PRO)*
+- **Reddit**: Automatically post text or link content to subreddits via OAuth2. *(PRO)*
+- **Custom APIs**: Integrate any REST API via HTTP Data node.
+- **More integrations coming soon** - Discord, Notion, Airtable, and many more!
 
 ## 🚀 Quick Start
 
-See the [Quick Start](https://code-forge-temple.github.io/agentic-signal/docs/getting-started/windows-app/quick-start) for setup and configuration instructions.
+ - Windows/Linux/macOS App: [quick start](https://agentic-signal.com/docs/getting-started/windows-app/quick-start) for setup and configuration instructions, or
+ - Web App: [installation](https://agentic-signal.com/docs/getting-started/web-app/installation) & [quick start](https://agentic-signal.com/docs/getting-started/web-app/quick-start) (includes Docker option)
 
 ## 🤝 Contributing
 

client/bun.lock

@@ -37,7 +37,8 @@
         "react-syntax-highlighter": "^15.6.1",
         "remark-gfm": "^4.0.0",
         "uuid": "^11.1.0",
-        "zod": "^3.25.64"
+        "zod": "^3.25.64",
+        "zod-to-json-schema": "^3.25.2"
     },
     "devDependencies": {
         "@eslint/js": "^9.25.0",

client/package.json

@@ -9,7 +9,7 @@ import '@xyflow/react/dist/style.css';
 import './App.scss';
 import {useWorkflow} from '../../hooks/useWorkflow';
 import {nodeFactory, nodeTypes} from '../nodes';
-import {useCallback} from 'react';
+import {useCallback, useState} from 'react';
 import {Dock} from '../Dock';
 import {v4 as uuidv4} from 'uuid';
 import {useSnackbar} from 'notistack'
@@ -20,6 +20,7 @@ import {NODE_TYPE as TOOL_NODE_TYPE} from '../nodes/ToolNode/constants';
 import {useFullscreen} from '../../hooks/useFullscreen';
 import {getDefaultUserConfigValues} from '../../types/ollama.types';
 import {Chip} from '@mui/material';
+import {ConfirmDialog} from '../ConfirmDialog';
 
 
 const getId = () => uuidv4();
@@ -44,6 +45,32 @@ function deleteByPath (obj: Record<string, any>, path: string): void {
     }
 }
 
+function remapNodeAndEdgeIds (nodes: any[], edges: any[]) {
+    const idMap = new Map<string, string>(
+        nodes.map((node: any) => [node.id, getId()])
+    );
+
+    const remappedNodes = nodes.map((node: any) => ({
+        ...node,
+        id: idMap.get(node.id)!
+    }));
+
+    const remappedEdges = edges.map((edge: any) => {
+        const newSource = idMap.get(edge.source) ?? edge.source;
+        const newTarget = idMap.get(edge.target) ?? edge.target;
+        const newId = `xy-edge__${newSource}${edge.sourceHandle ?? ''}-${newTarget}${edge.targetHandle ?? ''}`;
+
+        return {
+            ...edge,
+            source: newSource,
+            target: newTarget,
+            id: newId
+        };
+    });
+
+    return {remappedNodes, remappedEdges};
+}
+
 const descriptorMap = Object.fromEntries(
     nodeRegistry.map(desc => [desc.type, desc])
 );
@@ -62,10 +89,17 @@ function AppFlow () {
         setEdges,
     } = useWorkflow();
     const {enqueueSnackbar} = useSnackbar();
+    const [pendingWorkflow, setPendingWorkflow] = useState<{nodes: any[], edges: any[]} | null>(null);
 
     useFullscreen();
 
     const handleSave = () => {
+        if (nodes.length === 0 && edges.length === 0) {
+            enqueueSnackbar('Nothing to save.', {variant: 'info'});
+
+            return;
+        }
+
         const sanitizedNodes = nodes.map(node => {
             const nodeData = JSON.parse(JSON.stringify(node.data));
             const toSanitize = Array.isArray(nodeData.toSanitize) ? nodeData.toSanitize : [];
@@ -173,8 +207,14 @@ function AppFlow () {
                     return updatedNode;
                 });
 
-                setNodes(hydratedNodes);
-                setEdges(data.edges || []);
+                const {remappedNodes, remappedEdges} = remapNodeAndEdgeIds(hydratedNodes, data.edges || []);
+
+                if (nodes.length > 0) {
+                    setPendingWorkflow({nodes: remappedNodes, edges: remappedEdges});
+                } else {
+                    setNodes(remappedNodes);
+                    setEdges(remappedEdges);
+                }
             } catch (error) {
                 enqueueSnackbar('Failed to load workflow: ' + (error instanceof Error ? error.message : String(error)), {variant: 'error'});
             } finally {
@@ -184,6 +224,32 @@ function AppFlow () {
         reader.readAsText(file);
     };
 
+    const handleMergeWorkflow = () => {
+        if (!pendingWorkflow) return;
+
+        const maxY = Math.max(...nodes.map(n => n.position.y + (n.measured?.height ?? 40)));
+        const minX = Math.min(...nodes.map(n => n.position.x));
+        const yOffset = maxY + 100;
+        const pendingMinY = Math.min(...pendingWorkflow.nodes.map((n: any) => n.position.y));
+        const pendingMinX = Math.min(...pendingWorkflow.nodes.map((n: any) => n.position.x));
+        const shiftedNodes = pendingWorkflow.nodes.map((node: any) => ({
+            ...node,
+            position: {
+                x: node.position.x - pendingMinX + minX,
+                y: node.position.y + yOffset - pendingMinY}
+        }));
+
+        setNodes([...nodes, ...shiftedNodes]);
+        setEdges([...edges, ...pendingWorkflow.edges]);
+    };
+
+    const handleReplaceWorkflow = () => {
+        if (!pendingWorkflow) return;
+
+        setNodes(pendingWorkflow.nodes);
+        setEdges(pendingWorkflow.edges);
+    };
+
     const onDragOver = useCallback((event: React.DragEvent) => {
         event.preventDefault();
         event.dataTransfer.dropEffect = 'move';
@@ -213,6 +279,16 @@ function AppFlow () {
     return (
         <>
             <Dock onSave={handleSave} onLoad={handleLoad} onClear={handleClear} />
+            <ConfirmDialog
+                open={pendingWorkflow !== null}
+                onClose={() => setPendingWorkflow(null)}
+                title="Load Workflow"
+                message="A workflow is already loaded. Would you like to add to the existing workflow or replace it?"
+                confirmLabel="Add to Existing"
+                cancelLabel="Replace"
+                onConfirm={handleMergeWorkflow}
+                onCancel={handleReplaceWorkflow}
+            />
             <ReactFlow
                 nodes={nodes}
                 edges={edges}

client/src/components/App/App.tsx

@@ -0,0 +1,58 @@
+/************************************************************************
+ *    Copyright (C) 2025 Code Forge Temple                              *
+ *    This file is part of agentic-signal project                       *
+ *    See the LICENSE file in the project root for license details.     *
+ ************************************************************************/
+
+import {Button, Typography} from "@mui/material";
+import {BaseDialog} from "../BaseDialog";
+
+export interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+}
+
+export function ConfirmDialog ({
+    open,
+    onClose,
+    title,
+    message,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel,
+}: ConfirmDialogProps) {
+    const handleCancel = () => {
+        onCancel?.();
+        onClose();
+    };
+
+    const handleConfirm = () => {
+        onConfirm();
+        onClose();
+    };
+
+    return (
+        <BaseDialog
+            open={open}
+            onClose={onClose}
+            title={title}
+            maxWidth="sm"
+            fullWidth={false}
+            actions={
+                <>
+                    <Button onClick={handleCancel}>{cancelLabel}</Button>
+                    <Button variant="contained" onClick={handleConfirm}>{confirmLabel}</Button>
+                </>
+            }
+        >
+            <Typography>{message}</Typography>
+        </BaseDialog>
+    );
+}

client/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1 @@
+export * from "./ConfirmDialog";

client/src/components/ConfirmDialog/index.ts

@@ -11,9 +11,10 @@ import {FormControl, FormLabel} from "@mui/material";
 type FieldsetGroupProps = {
     children: ReactNode;
     title: string;
+    height?: string;
 };
 
-export const FieldsetGroup = ({children, title}: FieldsetGroupProps) => {
+export const FieldsetGroup = ({children, title, height}: FieldsetGroupProps) => {
     return (
         <FormControl component="fieldset"
             sx={{
@@ -22,8 +23,9 @@ export const FieldsetGroup = ({children, title}: FieldsetGroupProps) => {
                 border: '1px solid',
                 borderColor: 'divider',
                 borderRadius: 2,
-                pt: 2, pb: 0, pl: 2, pr: 2,
+                pt: 2, pb: 2, pl: 2, pr: 2,
                 mb: 2,
+                height: height || 'auto',
             }}
         >
             <FormLabel

client/src/components/FieldsetGroup/FieldsetGroup.tsx

@@ -16,6 +16,10 @@
     display: flex;
     flex-direction: column;
 
+    img {
+        width: 100%;
+    }
+
     table {
         border-collapse: collapse;
         width: 100%;

client/src/components/MarkdownRenderer/MarkdownRenderer.scss

@@ -29,32 +29,4 @@ export const extractFromMarkdown = (markdown: string, type: EXTRACTION_TYPE): st
     }
 
     return results;
-}
-
-const extensionLangMap: Record<string, string> = {
-    js: 'javascript',
-    ts: 'typescript',
-    tsx: 'tsx',
-    json: 'json',
-    html: 'html',
-    css: 'css',
-    scss: 'scss',
-    md: 'markdown',
-    xml: 'xml',
-    csv: 'csv',
-    yaml: 'yaml',
-    yml: 'yaml',
-    ini: 'ini',
-    sh: 'bash',
-    sql: 'sql',
-    py: 'python',
-    java: 'java',
-    c: 'c',
-    cpp: 'cpp',
-    h: 'c',
-    bat: 'bat'
-};
-
-export const fileExtensionToCodeBlockLang = (extension: string | undefined): string => {
-    return extensionLangMap[extension?.toLowerCase() || ''] ?? '';
-};
+}

client/src/components/MarkdownRenderer/utils.ts

@@ -1 +1,3 @@
 RedditPostNode
+SlackInputNode
+SlackOutputNode