From 2d005ec9008683631772ab85c4fd58b20c338377 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 4 Mar 2025 22:46:30 -0800
Subject: [PATCH] feat(long-description): added long description to blocks and
 info in workflow bloc kheader

---
 .../workflow-block/workflow-block.tsx         | 59 +++++++++++++++++--
 blocks/blocks/agent.ts                        |  2 +
 blocks/blocks/api.ts                          |  2 +
 blocks/blocks/condition.ts                    |  3 +-
 blocks/blocks/crewai.ts                       |  2 +
 blocks/blocks/evaluator.ts                    |  2 +
 blocks/blocks/exa.ts                          |  2 +
 blocks/blocks/firecrawl.ts                    |  2 +
 blocks/blocks/function.ts                     |  2 +
 blocks/blocks/github.ts                       |  2 +
 blocks/blocks/gmail.ts                        |  2 +
 blocks/blocks/jina.ts                         |  2 +
 blocks/blocks/memory.ts                       |  2 +
 blocks/blocks/notion.ts                       |  2 +
 blocks/blocks/openai.ts                       |  2 +
 blocks/blocks/pinecone.ts                     |  2 +
 blocks/blocks/router.ts                       |  2 +
 blocks/blocks/serper.ts                       |  2 +
 blocks/blocks/slack.ts                        |  2 +
 blocks/blocks/starter.ts                      |  2 +
 blocks/blocks/tavily.ts                       |  2 +
 blocks/blocks/translate.ts                    |  2 +
 blocks/blocks/x.ts                            |  2 +
 blocks/blocks/youtube.ts                      |  2 +
 24 files changed, 99 insertions(+), 7 deletions(-)

diff --git a/app/w/[id]/components/workflow-block/workflow-block.tsx b/app/w/[id]/components/workflow-block/workflow-block.tsx
index 9990e16cda..150b080e48 100644
--- a/app/w/[id]/components/workflow-block/workflow-block.tsx
+++ b/app/w/[id]/components/workflow-block/workflow-block.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { RectangleHorizontal, RectangleVertical } from 'lucide-react'
+import { Info, RectangleHorizontal, RectangleVertical } from 'lucide-react'
 import { Handle, NodeProps, Position, useUpdateNodeInternals } from 'reactflow'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -165,7 +165,7 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
   }
 
   const handleNameSubmit = () => {
-    const trimmedName = editedName.trim()
+    const trimmedName = editedName.trim().slice(0, 18)
     if (trimmedName && trimmedName !== name) {
       updateBlockName(id, trimmedName)
     }
@@ -230,17 +230,21 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
               <input
                 type="text"
                 value={editedName}
-                onChange={(e) => setEditedName(e.target.value.slice(0, 40))}
+                onChange={(e) => setEditedName(e.target.value.slice(0, 18))}
                 onBlur={handleNameSubmit}
                 onKeyDown={handleNameKeyDown}
                 autoFocus
-                className="font-medium text-md bg-transparent border-none outline-none p-0 w-[200px]"
-                maxLength={40}
+                className="font-medium text-md bg-transparent border-none outline-none p-0 w-[180px]"
+                maxLength={18}
               />
             ) : (
               <span
-                className="font-medium text-md hover:text-muted-foreground cursor-text"
+                className={cn(
+                  'font-medium text-md hover:text-muted-foreground cursor-text truncate',
+                  !isEnabled ? (isWide ? 'max-w-[200px]' : 'max-w-[100px]') : 'max-w-[180px]'
+                )}
                 onClick={handleNameClick}
+                title={name}
               >
                 {name}
               </span>
@@ -252,6 +256,49 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
                 Disabled
               </Badge>
             )}
+            {config.longDescription && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="sm" className="text-gray-500 p-1 h-7">
+                    <Info className="h-5 w-5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-[300px] p-4">
+                  <div className="space-y-3">
+                    <div>
+                      <p className="text-sm font-medium mb-1">Description</p>
+                      <p className="text-sm text-muted-foreground">{config.longDescription}</p>
+                    </div>
+                    {config.outputs && (
+                      <div>
+                        <p className="text-sm font-medium mb-1">Output</p>
+                        <div className="text-sm">
+                          {Object.entries(config.outputs).map(([key, value]) => (
+                            <div key={key} className="mb-1">
+                              <span className="text-muted-foreground">{key}</span>{' '}
+                              {typeof value.type === 'object' ? (
+                                <div className="pl-3 mt-1">
+                                  {Object.entries(value.type).map(([typeKey, typeValue]) => (
+                                    <div key={typeKey} className="flex items-start">
+                                      <span className="text-blue-500 font-medium">{typeKey}:</span>
+                                      <span className="text-green-500 ml-1">
+                                        {typeValue as string}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              ) : (
+                                <span className="text-green-500">{value.type as string}</span>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            )}
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
diff --git a/blocks/blocks/agent.ts b/blocks/blocks/agent.ts
index 53e22e3384..4a5663f581 100644
--- a/blocks/blocks/agent.ts
+++ b/blocks/blocks/agent.ts
@@ -26,6 +26,8 @@ export const AgentBlock: BlockConfig<AgentResponse> = {
   type: 'agent',
   name: 'Agent',
   description: 'Build an agent',
+  longDescription:
+    'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.',
   category: 'blocks',
   bgColor: '#7F2FFF',
   icon: AgentIcon,
diff --git a/blocks/blocks/api.ts b/blocks/blocks/api.ts
index 7a3103ff61..7b0ddcb782 100644
--- a/blocks/blocks/api.ts
+++ b/blocks/blocks/api.ts
@@ -6,6 +6,8 @@ export const ApiBlock: BlockConfig<RequestResponse> = {
   type: 'api',
   name: 'API',
   description: 'Use any API',
+  longDescription:
+    'Connect to any external API with support for all standard HTTP methods and customizable request parameters. Configure headers, query parameters, and request bodies.',
   category: 'blocks',
   bgColor: '#2F55FF',
   icon: ApiIcon,
diff --git a/blocks/blocks/condition.ts b/blocks/blocks/condition.ts
index b10c466648..a2c8f916e6 100644
--- a/blocks/blocks/condition.ts
+++ b/blocks/blocks/condition.ts
@@ -20,7 +20,8 @@ export const ConditionBlock: BlockConfig<ConditionBlockOutput> = {
   type: 'condition',
   name: 'Condition',
   description: 'Add a condition',
-  longDescription: 'Add a condition to the workflow',
+  longDescription:
+    'Add a condition to the workflow to branch the execution path based on a boolean expression.',
   bgColor: '#FF972F',
   icon: ConditionalIcon,
   category: 'blocks',
diff --git a/blocks/blocks/crewai.ts b/blocks/blocks/crewai.ts
index 4acca2215c..48dee6c3a2 100644
--- a/blocks/blocks/crewai.ts
+++ b/blocks/blocks/crewai.ts
@@ -6,6 +6,8 @@ export const CrewAIVisionBlock: BlockConfig<VisionResponse> = {
   type: 'crewai_vision',
   name: 'CrewAI Vision',
   description: 'Analyze images with vision models',
+  longDescription:
+    'Process visual content with customizable prompts to extract insights and information from images.',
   category: 'tools',
   bgColor: '#FF5A50',
   icon: CrewAIIcon,
diff --git a/blocks/blocks/evaluator.ts b/blocks/blocks/evaluator.ts
index 6ec344805b..b2640fba61 100644
--- a/blocks/blocks/evaluator.ts
+++ b/blocks/blocks/evaluator.ts
@@ -60,6 +60,8 @@ export const EvaluatorBlock: BlockConfig<EvaluatorResponse> = {
   type: 'evaluator',
   name: 'Evaluator',
   description: 'Evaluate content',
+  longDescription:
+    'Assess content quality using customizable evaluation metrics and scoring criteria. Create objective evaluation frameworks with numeric scoring to measure performance across multiple dimensions.',
   category: 'blocks',
   bgColor: '#2FA1FF',
   icon: ChartBarIcon,
diff --git a/blocks/blocks/exa.ts b/blocks/blocks/exa.ts
index 9811a9c024..530586423b 100644
--- a/blocks/blocks/exa.ts
+++ b/blocks/blocks/exa.ts
@@ -17,6 +17,8 @@ export const ExaBlock: BlockConfig<ExaResponse> = {
   type: 'exa',
   name: 'Exa',
   description: 'Search with Exa AI',
+  longDescription:
+    "Search the web, retrieve content, find similar links, and answer questions using Exa's powerful AI search capabilities.",
   category: 'tools',
   bgColor: '#1F40ED',
   icon: ExaAIIcon,
diff --git a/blocks/blocks/firecrawl.ts b/blocks/blocks/firecrawl.ts
index 760b33f6d5..9f09d611a1 100644
--- a/blocks/blocks/firecrawl.ts
+++ b/blocks/blocks/firecrawl.ts
@@ -6,6 +6,8 @@ export const FirecrawlBlock: BlockConfig<ScrapeResponse> = {
   type: 'firecrawl',
   name: 'Firecrawl',
   description: 'Scrape website content',
+  longDescription:
+    'Extract content from any website with advanced web scraping capabilities and content filtering. Retrieve clean, structured data from web pages with options to focus on main content.',
   category: 'tools',
   bgColor: '#181C1E',
   icon: FirecrawlIcon,
diff --git a/blocks/blocks/function.ts b/blocks/blocks/function.ts
index a3f842916f..835a5ab8c4 100644
--- a/blocks/blocks/function.ts
+++ b/blocks/blocks/function.ts
@@ -6,6 +6,8 @@ export const FunctionBlock: BlockConfig<CodeExecutionOutput> = {
   type: 'function',
   name: 'Function',
   description: 'Run custom logic',
+  longDescription:
+    'Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic. Create reusable functions to process inputs and generate outputs for other blocks.',
   category: 'blocks',
   bgColor: '#FF402F',
   icon: CodeIcon,
diff --git a/blocks/blocks/github.ts b/blocks/blocks/github.ts
index 39397b2a0c..fcd5aa378c 100644
--- a/blocks/blocks/github.ts
+++ b/blocks/blocks/github.ts
@@ -8,6 +8,8 @@ export const GitHubBlock: BlockConfig<GitHubResponse> = {
   type: 'github',
   name: 'GitHub',
   description: 'Interact with GitHub repositories and PRs',
+  longDescription:
+    'Access GitHub repositories, pull requests, and comments through the GitHub API. Automate code reviews, PR management, and repository interactions within your workflow.',
   category: 'tools',
   bgColor: '#181C1E',
   icon: GithubIcon,
diff --git a/blocks/blocks/gmail.ts b/blocks/blocks/gmail.ts
index e451a2f177..4d327bfd1f 100644
--- a/blocks/blocks/gmail.ts
+++ b/blocks/blocks/gmail.ts
@@ -6,6 +6,8 @@ export const GmailBlock: BlockConfig<GmailToolResponse> = {
   type: 'gmail',
   name: 'Gmail',
   description: 'Send, read, and search Gmail messages',
+  longDescription:
+    'Integrate Gmail functionality to send, read, and search email messages within your workflow. Automate email communications and process email content using OAuth authentication.',
   category: 'tools',
   bgColor: '#F14537',
   icon: GmailIcon,
diff --git a/blocks/blocks/jina.ts b/blocks/blocks/jina.ts
index f4ec5b807a..7b4f267714 100644
--- a/blocks/blocks/jina.ts
+++ b/blocks/blocks/jina.ts
@@ -6,6 +6,8 @@ export const JinaBlock: BlockConfig<ReadUrlResponse> = {
   type: 'jina',
   name: 'Jina',
   description: 'Convert website content into text',
+  longDescription:
+    "Transform web content into clean, readable text using Jina AI's advanced extraction capabilities. Extract meaningful content from websites while preserving important information and optionally gathering links.",
   category: 'tools',
   bgColor: '#333333',
   icon: JinaAIIcon,
diff --git a/blocks/blocks/memory.ts b/blocks/blocks/memory.ts
index a4d3e2159f..d691297737 100644
--- a/blocks/blocks/memory.ts
+++ b/blocks/blocks/memory.ts
@@ -5,6 +5,8 @@ export const MemoryBlock: BlockConfig = {
   type: 'memory',
   name: 'Memory',
   description: 'Add memory store',
+  longDescription:
+    'Create persistent storage for data that needs to be accessed across multiple workflow steps. Store and retrieve information throughout your workflow execution to maintain context and state.',
   bgColor: '#FF65BF',
   icon: BrainIcon,
   category: 'blocks',
diff --git a/blocks/blocks/notion.ts b/blocks/blocks/notion.ts
index d4daba89c7..8e08c62185 100644
--- a/blocks/blocks/notion.ts
+++ b/blocks/blocks/notion.ts
@@ -6,6 +6,8 @@ export const NotionBlock: BlockConfig<NotionResponse> = {
   type: 'notion',
   name: 'Notion',
   description: 'Read and write to Notion pages and databases',
+  longDescription:
+    'Integrate with Notion to read content from pages or write new content programmatically. Access and modify your Notion workspace directly from your workflow using the official API.',
   category: 'tools',
   bgColor: '#000000',
   icon: NotionIcon,
diff --git a/blocks/blocks/openai.ts b/blocks/blocks/openai.ts
index 6aa56a94f3..29faa6e49a 100644
--- a/blocks/blocks/openai.ts
+++ b/blocks/blocks/openai.ts
@@ -5,6 +5,8 @@ export const OpenAIBlock: BlockConfig = {
   type: 'openai',
   name: 'OpenAI Embeddings',
   description: 'Generate embeddings from text',
+  longDescription:
+    "Convert text into numerical vector representations using OpenAI's embedding models. Transform text data into embeddings for semantic search, clustering, and other vector-based operations.",
   category: 'tools',
   bgColor: '#10a37f',
   icon: OpenAIIcon,
diff --git a/blocks/blocks/pinecone.ts b/blocks/blocks/pinecone.ts
index cc0c05e005..f56b749dce 100644
--- a/blocks/blocks/pinecone.ts
+++ b/blocks/blocks/pinecone.ts
@@ -7,6 +7,8 @@ export const PineconeBlock: BlockConfig<PineconeResponse> = {
   type: 'pinecone',
   name: 'Pinecone',
   description: 'Interact with Pinecone vector database',
+  longDescription:
+    "Store, search, and retrieve vector embeddings using Pinecone's specialized vector database. Generate embeddings from text and perform semantic similarity searches with customizable filtering options.",
   category: 'tools',
   bgColor: '#0D1117',
   icon: PineconeIcon,
diff --git a/blocks/blocks/router.ts b/blocks/blocks/router.ts
index 0dedba0ceb..4a9db4c828 100644
--- a/blocks/blocks/router.ts
+++ b/blocks/blocks/router.ts
@@ -90,6 +90,8 @@ export const RouterBlock: BlockConfig<RouterResponse> = {
   type: 'router',
   name: 'Router',
   description: 'Route workflow',
+  longDescription:
+    'Intelligently direct workflow execution to different paths based on input analysis. Use AI to determine the most appropriate next step in your workflow based on content, intent, or specific criteria.',
   category: 'blocks',
   bgColor: '#28C43F',
   icon: ConnectIcon,
diff --git a/blocks/blocks/serper.ts b/blocks/blocks/serper.ts
index 49fdd9f790..1c270fdfee 100644
--- a/blocks/blocks/serper.ts
+++ b/blocks/blocks/serper.ts
@@ -6,6 +6,8 @@ export const SerperBlock: BlockConfig<SearchResponse> = {
   type: 'serper',
   name: 'Serper',
   description: 'Search the web using Serper',
+  longDescription:
+    "Access real-time web search results with Serper's Google Search API integration. Retrieve structured search data including web pages, news, images, and places with customizable language and region settings.",
   category: 'tools',
   bgColor: '#2B3543',
   icon: SerperIcon,
diff --git a/blocks/blocks/slack.ts b/blocks/blocks/slack.ts
index 01f10757ea..32fce58cb0 100644
--- a/blocks/blocks/slack.ts
+++ b/blocks/blocks/slack.ts
@@ -6,6 +6,8 @@ export const SlackBlock: BlockConfig<SlackMessageResponse> = {
   type: 'slack',
   name: 'Slack',
   description: 'Send a message to Slack',
+  longDescription:
+    'Send messages to any Slack channel using OAuth authentication. Integrate automated notifications and alerts into your workflow to keep your team informed.',
   category: 'tools',
   bgColor: '#611f69',
   icon: SlackIcon,
diff --git a/blocks/blocks/starter.ts b/blocks/blocks/starter.ts
index f3cec60d16..1f7fc28553 100644
--- a/blocks/blocks/starter.ts
+++ b/blocks/blocks/starter.ts
@@ -5,6 +5,8 @@ export const StarterBlock: BlockConfig = {
   type: 'starter',
   name: 'Starter',
   description: 'Start workflow',
+  longDescription:
+    'Initiate your workflow manually, on a schedule, or via webhook triggers. Configure flexible execution patterns with customizable timing options and webhook security.',
   category: 'blocks',
   bgColor: '#2FB3FF',
   icon: StartIcon,
diff --git a/blocks/blocks/tavily.ts b/blocks/blocks/tavily.ts
index 5a9ebb7eb2..3f0b4ab2ce 100644
--- a/blocks/blocks/tavily.ts
+++ b/blocks/blocks/tavily.ts
@@ -8,6 +8,8 @@ export const TavilyBlock: BlockConfig<TavilyResponse> = {
   type: 'tavily',
   name: 'Tavily',
   description: 'Search and extract information using Tavily AI',
+  longDescription:
+    "Access Tavily's AI-powered search engine to find relevant information from across the web. Extract and process content from specific URLs with customizable depth options.",
   category: 'tools',
   bgColor: '#0066FF',
   icon: TavilyIcon,
diff --git a/blocks/blocks/translate.ts b/blocks/blocks/translate.ts
index 5763d87684..c14a290222 100644
--- a/blocks/blocks/translate.ts
+++ b/blocks/blocks/translate.ts
@@ -18,6 +18,8 @@ export const TranslateBlock: BlockConfig = {
   type: 'translate',
   name: 'Translate',
   description: 'Translate text to any language',
+  longDescription:
+    'Convert text between languages while preserving meaning, nuance, and formatting. Utilize powerful language models to produce natural, fluent translations with appropriate cultural adaptations.',
   category: 'tools',
   bgColor: '#FF4B4B',
   icon: TranslateIcon,
diff --git a/blocks/blocks/x.ts b/blocks/blocks/x.ts
index 0e193a402f..7c5e54f809 100644
--- a/blocks/blocks/x.ts
+++ b/blocks/blocks/x.ts
@@ -8,6 +8,8 @@ export const XBlock: BlockConfig<XResponse> = {
   type: 'x',
   name: 'X',
   description: 'Interact with X',
+  longDescription:
+    'Connect with X to post tweets, read content, search for information, and access user profiles. Integrate social media capabilities into your workflow with comprehensive X platform access.',
   category: 'tools',
   bgColor: '#000000', // X's black color
   icon: xIcon,
diff --git a/blocks/blocks/youtube.ts b/blocks/blocks/youtube.ts
index 7ef306e42b..a7ac19fc6d 100644
--- a/blocks/blocks/youtube.ts
+++ b/blocks/blocks/youtube.ts
@@ -6,6 +6,8 @@ export const YouTubeBlock: BlockConfig<YouTubeSearchResponse> = {
   type: 'youtube',
   name: 'YouTube',
   description: 'Search for videos on YouTube',
+  longDescription:
+    'Find relevant videos on YouTube using the YouTube Data API. Search for content with customizable result limits and retrieve structured video metadata for integration into your workflow.',
   category: 'tools',
   bgColor: '#FF0000',
   icon: YouTubeIcon,