diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx index 2bda0383450..157f6f41278 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx @@ -1,10 +1,10 @@ 'use client' import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react' -import { Button, cn, X } from '@sim/emcn' +import { Button, cn } from '@sim/emcn' +import { Search, X } from '@sim/emcn/icons' import { WorkflowBlockBorder, type WorkflowBorderPort } from '@sim/workflow-renderer' import { Command } from 'cmdk' -import { Search } from 'lucide-react' import { useParams } from 'next/navigation' import { usePostHog } from 'posthog-js/react' import { Handle, type NodeProps, Position } from 'reactflow' diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx index 442c67767cc..889eb2aff47 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx @@ -1,20 +1,10 @@ import { type ComponentType, Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react' -import { - BLOCK_DIMENSIONS, - CanvasSentenceView, - SubBlockRowView, - WorkflowBlockView, -} from '@sim/workflow-renderer' -import { wouldCreateCycle } from '@sim/workflow-types/workflow' -import { isEqual } from 'es-toolkit' import { ArrowLeftRight, ArrowUpDown, - Braces, Clock, Globe, - Hash, - KeyRound, + Key, ListFilter, MessageSquareText, Paperclip, @@ -22,8 +12,18 @@ import { SlidersHorizontal, Sparkles, ToggleLeft, + TypeJson, + TypeNumber, Wrench, -} from 'lucide-react' +} from '@sim/emcn/icons' +import { + BLOCK_DIMENSIONS, + CanvasSentenceView, + SubBlockRowView, + WorkflowBlockView, +} from '@sim/workflow-renderer' +import { wouldCreateCycle } from '@sim/workflow-types/workflow' +import { isEqual } from 'es-toolkit' import { useParams } from 'next/navigation' import { usePostHog } from 'posthog-js/react' import { type NodeProps, useStore as useReactFlowStore, useUpdateNodeInternals } from 'reactflow' @@ -129,22 +129,22 @@ const SUBBLOCK_META_ICONS_BY_ID: Record = { filterCriteria: ListFilter, sortBuilder: ArrowUpDown, sort: ArrowUpDown, - limit: Hash, + limit: TypeNumber, offset: SkipForward, - rowId: KeyRound, + rowId: Key, url: Globe, method: ArrowLeftRight, - body: Braces, - data: Braces, + body: TypeJson, + data: TypeJson, } /** Leading icons for compact meta rows, keyed by subblock type. */ const SUBBLOCK_META_ICONS_BY_TYPE: Record = { - code: Braces, + code: TypeJson, 'messages-input': MessageSquareText, 'tool-input': Wrench, 'skill-input': Sparkles, - 'oauth-input': KeyRound, + 'oauth-input': Key, switch: ToggleLeft, 'file-upload': Paperclip, 'time-input': Clock, diff --git a/packages/emcn/src/icons/index.ts b/packages/emcn/src/icons/index.ts index 6c8d3c14159..54b2f5162ff 100644 --- a/packages/emcn/src/icons/index.ts +++ b/packages/emcn/src/icons/index.ts @@ -93,6 +93,7 @@ export { LogOut } from './log-out' export { Mail } from './mail' export { ManageWorkspace } from './manage-workspace' export { Menu } from './menu' +export { MessageSquareText } from './message-square-text' export { Mic } from './mic' export { MicOff } from './mic-off' export { Minus } from './minus' @@ -131,7 +132,9 @@ export { Share } from './share' export { ShieldCheck } from './shield-check' export { Shuffle } from './shuffle' export { Sim } from './sim' +export { SkipForward } from './skip-forward' export { Slash } from './slash' +export { SlidersHorizontal } from './sliders-horizontal' export { Sparkles } from './sparkles' export { Split } from './split' export { Sprout } from './sprout' @@ -147,6 +150,7 @@ export { TerminalWindow } from './terminal-window' export { TextQuote } from './text-quote' export { ThumbsDown } from './thumbs-down' export { ThumbsUp } from './thumbs-up' +export { ToggleLeft } from './toggle-left' export { Trash } from './trash' export { TriangleAlert } from './triangle-alert' export { TypeBoolean } from './type-boolean' diff --git a/packages/emcn/src/icons/message-square-text.tsx b/packages/emcn/src/icons/message-square-text.tsx new file mode 100644 index 00000000000..08ce0624ffb --- /dev/null +++ b/packages/emcn/src/icons/message-square-text.tsx @@ -0,0 +1,27 @@ +import type { SVGProps } from 'react' + +/** + * MessageSquareText icon component - speech bubble with two lines of text + * @param props - SVG properties including className, fill, etc. + */ +export function MessageSquareText(props: SVGProps) { + return ( + + ) +} diff --git a/packages/emcn/src/icons/skip-forward.tsx b/packages/emcn/src/icons/skip-forward.tsx new file mode 100644 index 00000000000..a33cf119e42 --- /dev/null +++ b/packages/emcn/src/icons/skip-forward.tsx @@ -0,0 +1,26 @@ +import type { SVGProps } from 'react' + +/** + * SkipForward icon component - right-facing triangle against an end bar + * @param props - SVG properties including className, fill, etc. + */ +export function SkipForward(props: SVGProps) { + return ( + + ) +} diff --git a/packages/emcn/src/icons/sliders-horizontal.tsx b/packages/emcn/src/icons/sliders-horizontal.tsx new file mode 100644 index 00000000000..aba7249f50a --- /dev/null +++ b/packages/emcn/src/icons/sliders-horizontal.tsx @@ -0,0 +1,33 @@ +import type { SVGProps } from 'react' + +/** + * SlidersHorizontal icon component - three horizontal tracks, each broken by a handle + * @param props - SVG properties including className, fill, etc. + */ +export function SlidersHorizontal(props: SVGProps) { + return ( + + ) +} diff --git a/packages/emcn/src/icons/toggle-left.tsx b/packages/emcn/src/icons/toggle-left.tsx new file mode 100644 index 00000000000..93a58b78a81 --- /dev/null +++ b/packages/emcn/src/icons/toggle-left.tsx @@ -0,0 +1,26 @@ +import type { SVGProps } from 'react' + +/** + * ToggleLeft icon component - pill track with the knob resting on the left + * @param props - SVG properties including className, fill, etc. + */ +export function ToggleLeft(props: SVGProps) { + return ( + + ) +}