docs: add documentation links to nodes & tools (#184)

* docs: add documentation links to nodes & tools

* fix: add type hints to constants

---------

Co-authored-by: Abhishek Kumar <abhishek@a6k.me>

ui/src/components/flow/nodes/AgentNode.tsx

@@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 
 import { NodeContent } from "./common/NodeContent";
 import { NodeEditDialog } from "./common/NodeEditDialog";
@@ -203,6 +204,7 @@ export const AgentNode = memo(({ data, selected, id }: AgentNodeProps) => {
                 title="Edit Agent"
                 onSave={handleSave}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.agent}
             >
                 {open && (
                     <AgentNodeEditForm

ui/src/components/flow/nodes/EndCall.tsx

@@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 
 import { NodeContent } from "./common/NodeContent";
 import { NodeEditDialog } from "./common/NodeEditDialog";
@@ -139,6 +140,7 @@ export const EndCall = memo(({ data, selected, id }: EndCallNodeProps) => {
                 title="End Call"
                 onSave={handleSave}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.endCall}
             >
                 {open && (
                     <EndCallEditForm

ui/src/components/flow/nodes/GlobalNode.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 
 import { NodeContent } from "./common/NodeContent";
 import { NodeEditDialog } from "./common/NodeEditDialog";
@@ -108,6 +109,7 @@ export const GlobalNode = memo(({ data, selected, id }: GlobalNodeProps) => {
                 title="Edit Global Node"
                 onSave={handleSave}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.global}
             >
                 {open && (
                     <GlobalNodeEditForm

ui/src/components/flow/nodes/QANode.tsx

@@ -10,6 +10,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 
 import { NodeContent } from "./common/NodeContent";
 import { NodeEditDialog } from "./common/NodeEditDialog";
@@ -147,6 +148,7 @@ export const QANode = memo(({ data, selected, id }: QANodeProps) => {
                 title="Edit QA Analysis"
                 onSave={handleSave}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.qaAnalysis}
             >
                 {open && (
                     <QANodeEditForm

ui/src/components/flow/nodes/StartCall.tsx

@@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 
 import { NodeContent } from "./common/NodeContent";
 import { NodeEditDialog } from "./common/NodeEditDialog";
@@ -216,6 +217,7 @@ export const StartCall = memo(({ data, selected, id }: StartCallNodeProps) => {
                 title="Start Call"
                 onSave={handleSave}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.startCall}
             >
                 {open && (
                     <StartCallEditForm

ui/src/components/flow/nodes/TriggerNode.tsx

@@ -8,6 +8,7 @@ import { FlowNodeData } from "@/components/flow/types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 import { useAppConfig } from "@/context/AppConfigContext";
 
 import { NodeContent } from "./common/NodeContent";
@@ -145,6 +146,7 @@ export const TriggerNode = memo(({ data, selected, id }: TriggerNodeProps) => {
                 title="Edit API Trigger"
                 onSave={handleSave}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.apiTrigger}
             >
                 {open && (
                     <TriggerNodeEditForm

ui/src/components/flow/nodes/WebhookNode.tsx

@@ -19,6 +19,7 @@ import { JsonEditor, validateJson } from "@/components/ui/json-editor";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { NODE_DOCUMENTATION_URLS } from "@/constants/documentation";
 
 import { NodeContent } from "./common/NodeContent";
 import { NodeEditDialog } from "./common/NodeEditDialog";
@@ -180,6 +181,7 @@ export const WebhookNode = memo(({ data, selected, id }: WebhookNodeProps) => {
                 onSave={handleSave}
                 error={endpointError || jsonError}
                 isDirty={isDirty}
+                documentationUrl={NODE_DOCUMENTATION_URLS.webhook}
             >
                 {open && (
                     <WebhookNodeEditForm

ui/src/components/flow/nodes/common/NodeEditDialog.tsx

@@ -1,4 +1,4 @@
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, ExternalLink } from "lucide-react";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 
 import { FlowNodeData } from "@/components/flow/types";
@@ -24,6 +24,7 @@ interface NodeEditDialogProps {
     onSave?: () => void;
     error?: string | null;
     isDirty?: boolean;
+    documentationUrl?: string;
 }
 
 export const NodeEditDialog = ({
@@ -34,7 +35,8 @@ export const NodeEditDialog = ({
     children,
     onSave,
     error,
-    isDirty = false
+    isDirty = false,
+    documentationUrl,
 }: NodeEditDialogProps) => {
     const [showDiscardAlert, setShowDiscardAlert] = useState(false);
 
@@ -84,7 +86,20 @@ export const NodeEditDialog = ({
                 style={{ maxWidth: "1200px", width: "95vw" }}
             >
                 <DialogHeader>
-                    <DialogTitle>{title}</DialogTitle>
+                    <div className="flex items-center justify-between">
+                        <DialogTitle>{title}</DialogTitle>
+                        {documentationUrl && (
+                            <a
+                                href={documentationUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors pr-6"
+                            >
+                                Docs
+                                <ExternalLink className="h-3.5 w-3.5" />
+                            </a>
+                        )}
+                    </div>
                     <DialogDescription>
                         Configure the settings for this node in your workflow.
                     </DialogDescription>