Switched from basic/advanced to blocks/tools and added toolbar tabs dynamic width calculation

blocks/blocks/agent.ts

@@ -10,7 +10,7 @@ export const AgentBlock: BlockConfig<ChatResponse> = {
     description: 'Use any LLM',
     bgColor: '#7F2FFF',
     icon: AgentIcon,
-    category: 'basic',
+    category: 'blocks',
   },
   tools: {
     access: ['openai.chat', 'anthropic.chat', 'google.chat', 'xai.chat', 'deepseek.chat', 'deepseek.reasoner'],

blocks/blocks/api.ts

@@ -9,7 +9,7 @@ export const ApiBlock: BlockConfig<RequestResponse> = {
     description: 'Use any API',
     bgColor: '#2F55FF',
     icon: ApiIcon,
-    category: 'basic',
+    category: 'blocks',
   },
   tools: {
     access: ['http.request']

blocks/blocks/crewai.ts

@@ -9,7 +9,7 @@ export const CrewAIVisionBlock: BlockConfig<VisionResponse> = {
     description: 'Analyze images with vision models',
     bgColor: '#FF5A50',
     icon: CrewAIIcon,
-    category: 'advanced'
+    category: 'tools'
   },
   tools: {
     access: ['crewai.vision']

blocks/blocks/firecrawl.ts

@@ -9,7 +9,7 @@ export const FirecrawlScrapeBlock: BlockConfig<ScrapeResponse> = {
     description: 'Scrape website content',
     bgColor: '#FF613A',
     icon: FirecrawlIcon,
-    category: 'advanced'
+    category: 'tools'
   },
   tools: {
     access: ['firecrawl.scrape']

blocks/blocks/function.ts

@@ -9,7 +9,7 @@ export const FunctionBlock: BlockConfig<CodeExecutionOutput> = {
     description: 'Add custom logic',
     bgColor: '#FF8D2F',
     icon: CodeIcon,
-    category: 'advanced',
+    category: 'blocks',
   },
   tools: {
     access: ['function.execute']

blocks/blocks/github.ts

@@ -9,7 +9,7 @@ export const GitHubBlock: BlockConfig<RepoInfoResponse> = {
     description: 'Fetch GitHub repository information and metadata',
     bgColor: '#ffffff',
     icon: GithubIcon,
-    category: 'advanced',
+    category: 'tools',
   },
   tools: {
     access: ['github.repoinfo']

blocks/blocks/jina.ts

@@ -9,7 +9,7 @@ export const JinaBlock: BlockConfig<ReadUrlResponse> = {
     description: 'Convert website content into text',
     bgColor: '#333333',
     icon: JinaAIIcon,
-    category: 'advanced',
+    category: 'tools',
   },
   tools: {
     access: ['jina.readurl']

blocks/blocks/slack.ts

@@ -9,7 +9,7 @@ export const SlackMessageBlock: BlockConfig<SlackMessageResponse> = {
     description: 'Send a message to Slack',
     bgColor: '#611f69',
     icon: SlackIcon,
-    category: 'advanced'
+    category: 'tools'
   },
   tools: {
     access: ['slack.message']

blocks/blocks/translate.ts

@@ -19,7 +19,7 @@ export const TranslateBlock: BlockConfig<ChatResponse> = {
     description: 'Translate text to any language',
     bgColor: '#FF4B4B',
     icon: TranslateIcon,
-    category: 'advanced',
+    category: 'tools',
   },
   tools: {
     access: ['openai.chat', 'anthropic.chat', 'google.chat'],

blocks/index.ts

@@ -50,7 +50,7 @@ export const getBlock = (type: string): BlockConfig | undefined =>
   blocks[type]
 
 
-export const getBlocksByCategory = (category: 'basic' | 'advanced'): BlockConfig[] =>
+export const getBlocksByCategory = (category: 'blocks' | 'tools'): BlockConfig[] =>
   Object.values(blocks).filter(block => block.toolbar.category === category)
 
 export const getAllBlockTypes = (): string[] =>

blocks/types.ts

@@ -4,7 +4,7 @@ import { ToolResponse } from '@/tools/types'
 import { ExtractToolOutput, ToolOutputToValueType } from './utils'
 
 export type BlockIcon = (props: SVGProps<SVGSVGElement>) => JSX.Element
-export type BlockCategory = 'basic' | 'advanced'
+export type BlockCategory = 'blocks' | 'tools'
 
 export type PrimitiveValueType = 'string' | 'number' | 'json' | 'boolean' | 'any'
 export type ValueType = PrimitiveValueType | Record<string, PrimitiveValueType>