Skip to content

Commit c915798

Browse files
emir-karabegemir-karabeg
committed
feat: panel, workflow, emcn, workflow block, subblocks; clean copilot
1 parent c65a582 commit c915798

File tree

70 files changed

+5225
-5558
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+5225
-5558
lines changed

‎apps/sim/app/api/copilot/chat/update-title/route.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* @deprecated This route is not currently in use
3+
* @remarks Kept for reference - may be removed in future cleanup
4+
*/
5+
16
import { db } from '@sim/db'
27
import { copilotChats } from '@sim/db/schema'
38
import { eq } from 'drizzle-orm'

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { memo, useCallback } from 'react'
22
import { Eye, EyeOff } from 'lucide-react'
3-
import { Button } from '@/components/ui/button'
3+
import { Button } from '@/components/emcn'
44
import { createLogger } from '@/lib/logs/console/logger'
55
import { useCopilotStore } from '@/stores/panel-new/copilot/store'
66
import { useWorkflowDiffStore } from '@/stores/workflow-diff'
@@ -303,35 +303,36 @@ export const DiffControls = memo(function DiffControls() {
303303

304304
return (
305305
<div className='-translate-x-1/2 fixed bottom-20 left-1/2 z-30'>
306-
<div className='flex items-center gap-2'>
307-
{/* Toggle (left, icon-only, no background) */}
306+
<div className='flex items-center gap-[6px] rounded-[10px] bg-[#242424] p-[6px]'>
307+
{/* Toggle (left, icon-only) */}
308308
<Button
309309
variant='ghost'
310-
size='sm'
311310
onClick={handleToggleDiff}
312-
className='h-8 rounded-full px-2 text-muted-foreground hover:bg-transparent'
311+
className='h-[30px] w-[30px] rounded-[8px] bg-[#363636] p-0 text-[#868686] hover:bg-[#8E4CFB] hover:text-[#E6E6E6]'
313312
title={isShowingDiff ? 'View original' : 'Preview changes'}
314313
>
315-
{isShowingDiff ? <Eye className='h-5 w-5' /> : <EyeOff className='h-5 w-5' />}
314+
{isShowingDiff ? (
315+
<Eye className='h-[14px] w-[14px]' />
316+
) : (
317+
<EyeOff className='h-[14px] w-[14px]' />
318+
)}
316319
</Button>
317320

318-
{/* Reject (middle, light gray, icon-only) */}
321+
{/* Reject */}
319322
<Button
320-
variant='outline'
321-
size='sm'
323+
variant='ghost'
322324
onClick={handleReject}
323-
className='h-8 rounded-[6px] border-gray-200 bg-gray-100 px-3 text-gray-700 hover:bg-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
325+
className='h-[30px] rounded-[8px] bg-[#363636] px-3 text-[#868686] hover:bg-[#8E4CFB] hover:text-[#E6E6E6]'
324326
title='Reject changes'
325327
>
326328
Reject
327329
</Button>
328330

329-
{/* Accept (right, brand purple, icon-only) */}
331+
{/* Accept (primary) */}
330332
<Button
331-
variant='default'
332-
size='sm'
333+
variant='primary'
333334
onClick={handleAccept}
334-
className='h-8 rounded-[6px] bg-[var(--brand-primary-hover-hex)] px-3 text-white hover:bg-[var(--brand-primary-hover-hex)]/90 hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
335+
className='h-[30px] rounded-[8px] px-3'
335336
title='Accept changes'
336337
>
337338
Accept

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

Lines changed: 0 additions & 102 deletions
This file was deleted.

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

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ import CopilotMarkdownRenderer from './markdown-renderer'
66
*/
77
const CHARACTER_DELAY = 3
88

9-
/**
10-
* Maximum word length before breaking
11-
*/
12-
const MAX_WORD_LENGTH = 25
13-
149
/**
1510
* StreamingIndicator shows animated dots during message streaming
1611
* Uses CSS classes for animations to follow best practices
@@ -132,50 +127,3 @@ export const SmoothStreamingText = memo(
132127
)
133128

134129
SmoothStreamingText.displayName = 'SmoothStreamingText'
135-
136-
/**
137-
* Props for the WordWrap component
138-
*/
139-
interface WordWrapProps {
140-
/** Text content to wrap */
141-
text: string
142-
}
143-
144-
/**
145-
* WordWrap component breaks up long words to prevent overflow
146-
* Splits words longer than MAX_WORD_LENGTH into smaller chunks
147-
*
148-
* @param props - Component props
149-
* @returns Wrapped text with break-all applied to long words
150-
*/
151-
export const WordWrap = ({ text }: WordWrapProps) => {
152-
if (!text) return null
153-
154-
// Split text into words, keeping spaces and punctuation
155-
const parts = text.split(/(\s+)/g)
156-
157-
return (
158-
<>
159-
{parts.map((part, index) => {
160-
// If the part is whitespace or shorter than the max length, render it as is
161-
if (part.match(/\s+/) || part.length <= MAX_WORD_LENGTH) {
162-
return <span key={index}>{part}</span>
163-
}
164-
165-
// For long words, break them up into chunks
166-
const chunks = []
167-
for (let i = 0; i < part.length; i += MAX_WORD_LENGTH) {
168-
chunks.push(part.substring(i, i + MAX_WORD_LENGTH))
169-
}
170-
171-
return (
172-
<span key={index} className='break-all'>
173-
{chunks.map((chunk, chunkIndex) => (
174-
<span key={chunkIndex}>{chunk}</span>
175-
))}
176-
</span>
177-
)
178-
})}
179-
</>
180-
)
181-
}

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

Lines changed: 25 additions & 16 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, RotateCcw, Square, ThumbsDown, ThumbsUp } from 'lucide-react'
4+
import { Check, Copy, RotateCcw, 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'
@@ -73,6 +73,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
7373
abortMessage,
7474
mode,
7575
setMode,
76+
isAborting,
7677
} = useCopilotStore()
7778

7879
// Get checkpoints for this message if it's a user message
@@ -135,11 +136,9 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
135136
messageContentRef,
136137
userInputRef,
137138
setEditedContent,
138-
handleEditMessage,
139139
handleCancelEdit,
140140
handleMessageClick,
141141
handleSubmitEdit,
142-
performEdit,
143142
} = useMessageEditing({
144143
message,
145144
messages,
@@ -248,22 +247,26 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
248247
<UserInput
249248
ref={userInputRef}
250249
onSubmit={handleSubmitEdit}
251-
onAbort={handleCancelEdit}
250+
onAbort={() => {
251+
if (isSendingMessage && isLastUserMessage) {
252+
abortMessage()
253+
}
254+
}}
252255
isLoading={isSendingMessage && isLastUserMessage}
256+
isAborting={isAborting}
253257
disabled={showCheckpointDiscardModal}
254258
value={editedContent}
255259
onChange={setEditedContent}
256260
placeholder='Edit your message...'
257261
mode={mode}
258262
onModeChange={setMode}
259263
panelWidth={panelWidth}
260-
hideContextUsage={true}
261264
clearOnSubmit={false}
262265
/>
263266

264267
{/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
265268
{showCheckpointDiscardModal && (
266-
<div className='mt-[8px] rounded-[4px] border border-[#3D3D3D] bg-[#282828] p-[10px] dark:border-[#3D3D3D] dark:bg-[#353535]'>
269+
<div className='mt-[8px] rounded-[4px] border border-[#3D3D3D] bg-[#282828] p-[10px] dark:border-[#3D3D3D] dark:bg-[#363636]'>
267270
<p className='mb-[8px] text-[#E6E6E6] text-sm'>
268271
Continue from a previous message?
269272
</p>
@@ -277,18 +280,18 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
277280
<span className='text-[#787878] text-[10px]'>(Esc)</span>
278281
</Button>
279282
<Button
280-
onClick={handleContinueWithoutRevert}
283+
onClick={handleContinueAndRevert}
281284
variant='outline'
282285
className='flex-1 px-[8px] py-[4px] text-xs'
283286
>
284-
Continue
287+
Revert
285288
</Button>
286289
<Button
287-
onClick={handleContinueAndRevert}
290+
onClick={handleContinueWithoutRevert}
288291
variant='outline'
289292
className='flex-1 px-[8px] py-[4px] text-xs'
290293
>
291-
Revert
294+
Continue
292295
</Button>
293296
</div>
294297
</div>
@@ -310,7 +313,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
310313
onClick={handleMessageClick}
311314
onMouseEnter={() => setIsHoveringMessage(true)}
312315
onMouseLeave={() => setIsHoveringMessage(false)}
313-
className='group relative cursor-pointer rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-all duration-200 hover:border-[#4A4A4A] hover:bg-[#353535] dark:border-[#3D3D3D] dark:bg-[#353535] dark:hover:border-[#454545] dark:hover:bg-[#3D3D3D]'
316+
className='group relative cursor-pointer rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-all duration-200 hover:border-[#4A4A4A] hover:bg-[#363636] dark:border-[#3D3D3D] dark:bg-[#363636] dark:hover:border-[#454545] dark:hover:bg-[#3D3D3D]'
314317
>
315318
<div
316319
ref={messageContentRef}
@@ -356,7 +359,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
356359

357360
{/* Gradient fade when truncated - applies to entire message box */}
358361
{!isExpanded && needsExpansion && (
359-
<div className='pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-0% from-[#282828] via-40% via-[#282828]/70 to-100% to-transparent group-hover:from-[#353535] group-hover:via-[#353535]/70 dark:from-[#353535] dark:via-[#353535]/70 dark:group-hover:from-[#3D3D3D] dark:group-hover:via-[#3D3D3D]/70' />
362+
<div className='pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-0% from-[#282828] via-40% via-[#282828]/70 to-100% to-transparent group-hover:from-[#363636] group-hover:via-[#363636]/70 dark:from-[#363636] dark:via-[#363636]/70 dark:group-hover:from-[#3D3D3D] dark:group-hover:via-[#3D3D3D]/70' />
360363
)}
361364

362365
{/* Abort button when hovering and response is generating (only on last user message) */}
@@ -367,11 +370,17 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
367370
e.stopPropagation()
368371
abortMessage()
369372
}}
370-
variant='primary'
371-
className='h-[22px] w-[22px] rounded-full p-0 ring-2 ring-[#8E4CFB]/60 ring-offset-[#282828] ring-offset-[1.25px] dark:ring-offset-[#353535]'
373+
className='h-[20px] w-[20px] rounded-full bg-[#C0C0C0] p-0 transition-colors hover:bg-[#D0D0D0] dark:bg-[#C0C0C0] dark:hover:bg-[#D0D0D0]'
372374
title='Stop generation'
373375
>
374-
<Square className='h-3.5 w-3.5' fill='currentColor' />
376+
<svg
377+
className='h-[13px] w-[13px]'
378+
viewBox='0 0 24 24'
379+
fill='black'
380+
xmlns='http://www.w3.org/2000/svg'
381+
>
382+
<rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
383+
</svg>
375384
</Button>
376385
</div>
377386
)}
@@ -398,7 +407,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
398407

399408
{/* Inline Restore Checkpoint Confirmation */}
400409
{showRestoreConfirmation && (
401-
<div className='mt-[8px] rounded-[4px] border border-[#3D3D3D] bg-[#282828] p-[10px] dark:border-[#3D3D3D] dark:bg-[#353535]'>
410+
<div className='mt-[8px] rounded-[4px] border border-[#3D3D3D] bg-[#282828] p-[10px] dark:border-[#3D3D3D] dark:bg-[#363636]'>
402411
<p className='mb-[8px] text-[#E6E6E6] text-sm'>
403412
Revert to checkpoint? This will restore your workflow to the state saved at this
404413
checkpoint.{' '}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/hooks/use-checkpoint-management.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function useCheckpointManagement(
3232
contexts?: any[]
3333
} | null>(null)
3434

35-
const { revertToCheckpoint, currentChat, sendMessage } = useCopilotStore()
35+
const { revertToCheckpoint, currentChat } = useCopilotStore()
3636

3737
/**
3838
* Handles initiating checkpoint revert

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,6 @@ const logger = createLogger('useMessageEditing')
1212
*/
1313
const MESSAGE_TRUNCATION_HEIGHT = 60
1414

15-
/**
16-
* Delay before focusing input after edit mode activation
17-
*/
18-
const FOCUS_DELAY = 100
19-
2015
/**
2116
* Delay before attaching click-outside listener to avoid immediate trigger
2217
*/
@@ -264,10 +259,8 @@ export function useMessageEditing(props: UseMessageEditingProps) {
264259

265260
// Operations
266261
setEditedContent,
267-
handleEditMessage,
268262
handleCancelEdit,
269263
handleMessageClick,
270264
handleSubmitEdit,
271-
performEdit,
272265
}
273266
}

0 commit comments

Comments
 (0)