feat(long-description): added long description to blocks and info in workflow bloc kheader

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

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,

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,

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',

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,

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,

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,

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,

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,

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,

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,

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,

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',

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,