Skip to content

Commit c65a582

Browse files
emir-karabegemir-karabeg
committed
feat: workflow-block, connections, action-bar, copilot
1 parent 2694d71 commit c65a582

File tree

21 files changed

+625
-348
lines changed

21 files changed

+625
-348
lines changed

‎apps/sim/app/layout.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
6565
if (stored) {
6666
var parsed = JSON.parse(stored);
6767
var state = parsed?.state;
68-
69-
// Set sidebar width
7068
var width = state?.sidebarWidth;
71-
if (width >= 232 && width <= 400) {
69+
var maxSidebarWidth = window.innerWidth * 0.3;
70+
71+
// Cap stored width at 30% of viewport
72+
if (width >= 232 && width <= maxSidebarWidth) {
7273
document.documentElement.style.setProperty('--sidebar-width', width + 'px');
74+
} else if (width > maxSidebarWidth) {
75+
// If stored width exceeds 30%, cap it
76+
document.documentElement.style.setProperty('--sidebar-width', maxSidebarWidth + 'px');
7377
}
7478
}
7579
} catch (e) {
@@ -83,8 +87,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
8387
var panelParsed = JSON.parse(panelStored);
8488
var panelState = panelParsed?.state;
8589
var panelWidth = panelState?.panelWidth;
86-
if (panelWidth >= 236 && panelWidth <= 400) {
90+
var maxPanelWidth = window.innerWidth * 0.4;
91+
92+
// Cap stored width at 40% of viewport
93+
if (panelWidth >= 244 && panelWidth <= maxPanelWidth) {
8794
document.documentElement.style.setProperty('--panel-width', panelWidth + 'px');
95+
} else if (panelWidth > maxPanelWidth) {
96+
// If stored width exceeds 40%, cap it
97+
document.documentElement.style.setProperty('--panel-width', maxPanelWidth + 'px');
8898
}
8999
90100
// Set active tab to prevent flash on hydration

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { type FC, memo, useMemo, useState } from 'react'
4-
import { Check, Copy, CornerDownLeft, RotateCcw, Square, ThumbsDown, ThumbsUp } from 'lucide-react'
4+
import { Check, Copy, RotateCcw, Square, ThumbsDown, ThumbsUp } from 'lucide-react'
55
import { Button } from '@/components/emcn'
66
import { createLogger } from '@/lib/logs/console/logger'
77
import { InlineToolCall } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components'
@@ -263,29 +263,33 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
263263

264264
{/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
265265
{showCheckpointDiscardModal && (
266-
<div className='mt-2 rounded-lg border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-900'>
267-
<p className='mb-2 text-foreground text-sm'>Continue from a previous message?</p>
268-
<div className='flex gap-1.5'>
269-
<button
266+
<div className='mt-[8px] rounded-[4px] border border-[#3D3D3D] bg-[#282828] p-[10px] dark:border-[#3D3D3D] dark:bg-[#353535]'>
267+
<p className='mb-[8px] text-[#E6E6E6] text-sm'>
268+
Continue from a previous message?
269+
</p>
270+
<div className='flex gap-[6px]'>
271+
<Button
270272
onClick={handleCancelCheckpointDiscard}
271-
className='flex flex-1 items-center justify-center gap-1.5 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600 dark:bg-background dark:hover:bg-muted'
273+
variant='default'
274+
className='flex flex-1 items-center justify-center gap-[6px] px-[8px] py-[4px] text-xs'
272275
>
273276
<span>Cancel</span>
274-
<span className='text-[10px] text-muted-foreground'>(Esc)</span>
275-
</button>
276-
<button
277+
<span className='text-[#787878] text-[10px]'>(Esc)</span>
278+
</Button>
279+
<Button
277280
onClick={handleContinueWithoutRevert}
278-
className='flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs transition-colors hover:bg-muted dark:bg-muted dark:hover:bg-muted/80'
281+
variant='outline'
282+
className='flex-1 px-[8px] py-[4px] text-xs'
279283
>
280284
Continue
281-
</button>
282-
<button
285+
</Button>
286+
<Button
283287
onClick={handleContinueAndRevert}
284-
className='flex flex-1 items-center justify-center gap-1.5 rounded-md bg-[var(--brand-primary-hover-hex)] px-2 py-1 text-white text-xs transition-colors hover:bg-[var(--brand-primary-hex)]'
288+
variant='outline'
289+
className='flex-1 px-[8px] py-[4px] text-xs'
285290
>
286-
<span>Continue and revert</span>
287-
<CornerDownLeft className='h-3 w-3' />
288-
</button>
291+
Revert
292+
</Button>
289293
</div>
290294
</div>
291295
)}
@@ -373,18 +377,19 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
373377
)}
374378

375379
{/* Revert button on hover (only when has checkpoints and not generating) */}
376-
{!isSendingMessage && hasCheckpoints && (
377-
<div className='pointer-events-auto absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100'>
378-
<button
380+
{!isSendingMessage && hasCheckpoints && isHoveringMessage && (
381+
<div className='pointer-events-auto absolute right-[6px] bottom-[6px]'>
382+
<Button
379383
onClick={(e) => {
380384
e.stopPropagation()
381385
handleRevertToCheckpoint()
382386
}}
383-
className='flex h-6 w-6 items-center justify-center rounded-full bg-muted text-muted-foreground transition-all duration-200 hover:bg-muted-foreground/20'
387+
variant='ghost'
388+
className='h-[22px] w-[22px] rounded-full p-0'
384389
title='Revert to checkpoint'
385390
>
386-
<RotateCcw className='h-3 w-3' />
387-
</button>
391+
<RotateCcw className='h-3.5 w-3.5' />
392+
</Button>
388393
</div>
389394
)}
390395
</div>
@@ -393,29 +398,28 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
393398

394399
{/* Inline Restore Checkpoint Confirmation */}
395400
{showRestoreConfirmation && (
396-
<div className='mt-2 rounded-lg border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-900'>
397-
<p className='mb-2 text-foreground text-sm'>
401+
<div className='mt-[8px] rounded-[4px] border border-[#3D3D3D] bg-[#282828] p-[10px] dark:border-[#3D3D3D] dark:bg-[#353535]'>
402+
<p className='mb-[8px] text-[#E6E6E6] text-sm'>
398403
Revert to checkpoint? This will restore your workflow to the state saved at this
399404
checkpoint.{' '}
400-
<span className='font-medium text-red-600 dark:text-red-400'>
401-
This action cannot be undone.
402-
</span>
405+
<span className='font-medium text-[#EF4444]'>This action cannot be undone.</span>
403406
</p>
404-
<div className='flex gap-1.5'>
405-
<button
407+
<div className='flex gap-[6px]'>
408+
<Button
406409
onClick={handleCancelRevert}
407-
className='flex flex-1 items-center justify-center gap-1.5 rounded-md border border-gray-300 bg-muted px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/80 dark:border-gray-600'
410+
variant='default'
411+
className='flex flex-1 items-center justify-center gap-[6px] px-[8px] py-[4px] text-xs'
408412
>
409413
<span>Cancel</span>
410-
<span className='text-[10px] text-muted-foreground'>(Esc)</span>
411-
</button>
412-
<button
414+
<span className='text-[#787878] text-[10px]'>(Esc)</span>
415+
</Button>
416+
<Button
413417
onClick={handleConfirmRevert}
414-
className='flex flex-1 items-center justify-center gap-1.5 rounded-md bg-red-500 px-2 py-1 text-white text-xs transition-colors hover:bg-red-600'
418+
variant='outline'
419+
className='flex-1 px-[8px] py-[4px] text-xs'
415420
>
416-
<span>Revert</span>
417-
<CornerDownLeft className='h-3 w-3' />
418-
</button>
421+
Revert
422+
</Button>
419423
</div>
420424
</div>
421425
)}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/connection-blocks/connection-blocks.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
276276
return (
277277
<div className='rounded-[4px] px-[8px] pt-[1.5px] pb-[4px]'>
278278
<Label className='pb-[8px] pl-[2px]'>Connection blocks</Label>
279-
<div className='-mr-[8px] max-h-[240px] space-y-[4px] overflow-y-auto pr-[8px]'>
279+
<div className='-mr-[8px] max-h-[120px] space-y-[4px] overflow-y-auto pr-[8px]'>
280280
{connections.map((connection) => {
281281
const blockConfig = getBlock(connection.type)
282282
const isExpanded = expandedConnections.has(connection.id)

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/editor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,11 +182,11 @@ export function Editor() {
182182
>
183183
{!currentBlockId ? (
184184
<div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
185-
Select a block to configure
185+
Select a block to edit
186186
</div>
187187
) : subBlocks.length === 0 ? (
188-
<div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
189-
No configuration available for this block
188+
<div className='flex h-full items-center justify-center text-center text-muted-foreground text-sm'>
189+
This block has no subblocks
190190
</div>
191191
) : (
192192
<div className='flex flex-col'>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/hooks/use-panel-resize.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { usePanelStore } from '@/stores/panel-new/store'
55
* Constants for panel sizing
66
*/
77
const MIN_WIDTH = 244
8-
const MAX_WIDTH = 400
8+
const MAX_WIDTH_PERCENTAGE = 0.4 // 40% of viewport width
99

1010
/**
1111
* Custom hook to handle panel resize functionality.
1212
* Manages mouse events for resizing and enforces min/max width constraints.
13+
* Maximum width is capped at 40% of the viewport width for optimal layout.
1314
*
1415
* @returns Resize state and handlers
1516
*/
@@ -34,7 +35,9 @@ export function usePanelResize() {
3435
const handleMouseMove = (e: MouseEvent) => {
3536
// Calculate width from the right edge of the viewport
3637
const newWidth = window.innerWidth - e.clientX
37-
if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
38+
const maxWidth = window.innerWidth * MAX_WIDTH_PERCENTAGE
39+
40+
if (newWidth >= MIN_WIDTH && newWidth <= maxWidth) {
3841
setPanelWidth(newWidth)
3942
}
4043
}

0 commit comments

Comments
 (0)