-
-
- Start voice conversation
+
+
+ You've been invited to join a workspace
+
+ {isNewUser
+ ? 'Create an account to join this workspace on Sim'
+ : 'Sign in to your account to accept this invitation'}
+
+
+
+ {isNewUser ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+
)
}
+ // Show loading state
if (isLoading || isPending) {
return (
-
+
)
}
+ // Show error state
if (error) {
- const errorReason = searchParams.get('error')
- const isExpiredError = errorReason === 'expired'
-
return (
- Loading invitation...
+
+
+
+
)
}
+ // Show success state
if (accepted) {
return (
-
+
+ Invitation Error
+{error}
+
+
+
+
)
}
+ // Show invitation details
return (
-
+
+ Invitation Accepted
++ You have successfully joined {invitationDetails?.name || 'the workspace'}. Redirecting + to your workspace... +
+
+
+
+ Workspace Invitation
+
+ You've been invited to join{' '}
+ {invitationDetails?.name || 'a workspace'}
+
+
+
+
+
+
+
)
}
diff --git a/apps/sim/app/invite/[id]/utils.ts b/apps/sim/app/invite/[id]/utils.ts
deleted file mode 100644
index 61c90f5867..0000000000
--- a/apps/sim/app/invite/[id]/utils.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export function getErrorMessage(reason: string): string {
- switch (reason) {
- case 'missing-token':
- return 'The invitation link is invalid or missing a required parameter.'
- case 'invalid-token':
- return 'The invitation link is invalid or has already been used.'
- case 'expired':
- return 'This invitation has expired. Please ask for a new invitation.'
- case 'already-processed':
- return 'This invitation has already been accepted or declined.'
- case 'email-mismatch':
- return 'This invitation was sent to a different email address. Please log in with the correct account or contact the person who invited you.'
- case 'workspace-not-found':
- return 'The workspace associated with this invitation could not be found.'
- case 'user-not-found':
- return 'Your user account could not be found. Please try logging out and logging back in.'
- case 'already-member':
- return 'You are already a member of this organization or workspace.'
- case 'invalid-invitation':
- return 'This invitation is invalid or no longer exists.'
- case 'missing-invitation-id':
- return 'The invitation link is missing required information. Please use the original invitation link.'
- case 'server-error':
- return 'An unexpected error occurred while processing your invitation. Please try again later.'
- default:
- return 'An unknown error occurred while processing your invitation.'
- }
-}
diff --git a/apps/sim/app/invite/components/index.ts b/apps/sim/app/invite/components/index.ts
deleted file mode 100644
index e95425f803..0000000000
--- a/apps/sim/app/invite/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { InviteLayout } from './layout'
-export { InviteStatusCard } from './status-card'
diff --git a/apps/sim/app/invite/components/layout.tsx b/apps/sim/app/invite/components/layout.tsx
deleted file mode 100644
index a3d01e34d0..0000000000
--- a/apps/sim/app/invite/components/layout.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { useBrandConfig } from '@/lib/branding/branding'
-import { GridPattern } from '@/app/(landing)/components/grid-pattern'
-
-interface InviteLayoutProps {
- children: React.ReactNode
-}
-
-export function InviteLayout({ children }: InviteLayoutProps) {
- const brandConfig = useBrandConfig()
-
- return (
- + Click the accept below to join the workspace. +
+
-
- )
- }
-
- const IconComponent = icon ? iconMap[icon] : null
- const iconColor = icon ? iconColorMap[icon] : ''
- const iconBg = icon ? iconBgMap[icon] : ''
-
- return (
- {description}
-
- {IconComponent && (
-
- )
-}
diff --git a/apps/sim/app/invite/invite-error/invite-error.tsx b/apps/sim/app/invite/invite-error/invite-error.tsx
new file mode 100644
index 0000000000..064a70b933
--- /dev/null
+++ b/apps/sim/app/invite/invite-error/invite-error.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+
+function getErrorMessage(reason: string, details?: string): string {
+ switch (reason) {
+ case 'missing-token':
+ return 'The invitation link is invalid or missing a required parameter.'
+ case 'invalid-token':
+ return 'The invitation link is invalid or has already been used.'
+ case 'expired':
+ return 'This invitation has expired. Please ask for a new invitation.'
+ case 'already-processed':
+ return 'This invitation has already been accepted or declined.'
+ case 'email-mismatch':
+ return details
+ ? details
+ : 'This invitation was sent to a different email address than the one you are logged in with.'
+ case 'workspace-not-found':
+ return 'The workspace associated with this invitation could not be found.'
+ case 'server-error':
+ return 'An unexpected error occurred while processing your invitation. Please try again later.'
+ default:
+ return 'An unknown error occurred while processing your invitation.'
+ }
+}
+
+export default function InviteError() {
+ const searchParams = useSearchParams()
+ const reason = searchParams?.get('reason') || 'unknown'
+ const details = searchParams?.get('details')
+ const [errorMessage, setErrorMessage] = useState('')
+
+ useEffect(() => {
+ // Only set the error message on the client side
+ setErrorMessage(getErrorMessage(reason, details || undefined))
+ }, [reason, details])
+
+ // Provide a fallback message for SSR
+ const displayMessage = errorMessage || 'Loading error details...'
+
+ return (
+
-
- )}
-
- {title}
- -{description}
- -
- {isExpiredError && (
-
- )}
-
- {actions.map((action, index) => (
-
- ))}
-
-
+
+ )
+}
diff --git a/apps/sim/app/invite/invite-error/page.tsx b/apps/sim/app/invite/invite-error/page.tsx
new file mode 100644
index 0000000000..646f4a3d8e
--- /dev/null
+++ b/apps/sim/app/invite/invite-error/page.tsx
@@ -0,0 +1,7 @@
+import InviteError from '@/app/invite/invite-error/invite-error'
+
+export const dynamic = 'force-dynamic'
+
+export default function InviteErrorPage() {
+ return
+
+
+
+ Invitation Error
+ +{displayMessage}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ if (error) {
+ return (
+
+
+
+ Invalid Unsubscribe Link
+
+ This unsubscribe link is invalid or has expired
+
+
+
+
+
+
+ )
+ }
+
+ // Handle transactional emails
+ if (data?.isTransactional) {
+ return (
+
+
+
+ + Error: {error} +
+
+
+
+ This could happen if:
+-
+
- The link is missing required parameters +
- The link has expired or been used already +
- The link was copied incorrectly +
+
+
+
+
+
+
+ + Need immediate help? Email us at{' '} + + {brand.supportEmail} + +
+
+
+
+ Important Account Emails
+
+ This email contains important information about your account
+
+
+
+
+
+
+ )
+ }
+
+ if (unsubscribed) {
+ return (
+
+
+
+ + Transactional emails like password resets, account confirmations, + and security alerts cannot be unsubscribed from as they contain essential + information for your account security and functionality. +
+
+
+
+ + If you no longer wish to receive these emails, you can: +
+-
+
- Close your account entirely +
- Contact our support team for assistance +
+
+
+
+
+
+
+ Successfully Unsubscribed
+
+ You have been unsubscribed from our emails. You will stop receiving emails within 48
+ hours.
+
+
+
+
+
+
+ )
+ }
+
+ return (
+ + If you change your mind, you can always update your email preferences in your account + settings or contact us at{' '} + + {brand.supportEmail} + +
+
+
+
+ We're sorry to see you go!
+
+ We understand email preferences are personal. Choose which emails you'd like to
+ stop receiving from Sim.
+
+
+
+
+
+
+ )
+}
+
+export default function UnsubscribePage() {
+ return (
+
+
+ + Email: {data?.email} +
+
+
+
+
+
+
+ or choose specific types:
+
+
+
+
+
+
+
+
+
+
+
+
+ + Note: You'll continue receiving important account emails like + password resets and security alerts. +
++ Questions? Contact us at{' '} + + {brand.supportEmail} + +
+
-
-
-
-
-
- )
- }
-
- if (error) {
- return (
-
-
-
- Invalid Unsubscribe Link
-
- This unsubscribe link is invalid or has expired
-
-
-
-
-
-
- )
- }
-
- // Handle transactional emails
- if (data?.isTransactional) {
- return (
-
-
-
- - Error: {error} -
-
-
-
- This could happen if:
--
-
- The link is missing required parameters -
- The link has expired or been used already -
- The link was copied incorrectly -
-
-
-
-
-
-
- - Need immediate help? Email us at{' '} - - {brand.supportEmail} - -
-
-
-
- Important Account Emails
-
- This email contains important information about your account
-
-
-
-
-
-
- )
- }
-
- if (unsubscribed) {
- return (
-
-
-
- - Transactional emails like password resets, account confirmations, - and security alerts cannot be unsubscribed from as they contain essential - information for your account security and functionality. -
-
-
-
- - If you no longer wish to receive these emails, you can: -
--
-
- Close your account entirely -
- Contact our support team for assistance -
-
-
-
-
-
-
- Successfully Unsubscribed
-
- You have been unsubscribed from our emails. You will stop receiving emails within 48
- hours.
-
-
-
-
-
-
- )
- }
-
- return (
- - If you change your mind, you can always update your email preferences in your account - settings or contact us at{' '} - - {brand.supportEmail} - -
-
-
-
- We're sorry to see you go!
-
- We understand email preferences are personal. Choose which emails you'd like to
- stop receiving from Sim.
-
-
-
-
-
-
- )
-}
-
-export default function Unsubscribe() {
- return (
-
-
- - Email: {data?.email} -
-
-
-
-
-
-
- or choose specific types:
-
-
-
-
-
-
-
-
-
-
-
-
- - Note: You'll continue receiving important account emails like - password resets and security alerts. -
-- Questions? Contact us at{' '} - - {brand.supportEmail} - -
-
@@ -774,12 +732,26 @@ export function KnowledgeBase({
className='h-3.5 w-3.5 border-gray-300 focus-visible:ring-[var(--brand-primary-hex)]/20 data-[state=checked]:border-[var(--brand-primary-hex)] data-[state=checked]:bg-[var(--brand-primary-hex)] [&>*]:h-3 [&>*]:w-3'
/>
- {renderSortableHeader('filename', 'Name')}
- {renderSortableHeader('fileSize', 'Size')}
- {renderSortableHeader('tokenCount', 'Tokens')}
- {renderSortableHeader('chunkCount', 'Chunks', 'hidden lg:table-cell')}
- {renderSortableHeader('uploadedAt', 'Uploaded')}
- {renderSortableHeader('processingStatus', 'Status')}
+
+ Name
+
+
+ Size
+
+
+ Tokens
+
+
+ Chunks
+
+
+
+ Uploaded
+
+
+
+ Status
+
Actions
@@ -893,7 +865,11 @@ export function KnowledgeBase({
key={doc.id}
className={`border-b transition-colors hover:bg-accent/30 ${
isSelected ? 'bg-accent/30' : ''
- } ${doc.processingStatus === 'completed' ? 'cursor-pointer' : 'cursor-default'}`}
+ } ${
+ doc.processingStatus === 'completed'
+ ? 'cursor-pointer'
+ : 'cursor-default'
+ }`}
onClick={() => {
if (doc.processingStatus === 'completed') {
handleDocumentClick(doc.id)
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/upload-modal/upload-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/upload-modal/upload-modal.tsx
index 8d8a7b9a62..2936f0fdcc 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/upload-modal/upload-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/upload-modal/upload-modal.tsx
@@ -7,12 +7,22 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
import { Label } from '@/components/ui/label'
import { Progress } from '@/components/ui/progress'
import { createLogger } from '@/lib/logs/console/logger'
-import { ACCEPT_ATTRIBUTE, ACCEPTED_FILE_TYPES, MAX_FILE_SIZE } from '@/lib/uploads/validation'
import { getDocumentIcon } from '@/app/workspace/[workspaceId]/knowledge/components'
import { useKnowledgeUpload } from '@/app/workspace/[workspaceId]/knowledge/hooks/use-knowledge-upload'
const logger = createLogger('UploadModal')
+const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB
+const ACCEPTED_FILE_TYPES = [
+ 'application/pdf',
+ 'application/msword',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ 'text/plain',
+ 'text/csv',
+ 'application/vnd.ms-excel',
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+]
+
interface FileWithPreview extends File {
preview: string
}
@@ -64,7 +74,7 @@ export function UploadModal({
return `File "${file.name}" is too large. Maximum size is 100MB.`
}
if (!ACCEPTED_FILE_TYPES.includes(file.type)) {
- return `File "${file.name}" has an unsupported format. Please use PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, or HTML files.`
+ return `File "${file.name}" has an unsupported format. Please use PDF, DOC, DOCX, TXT, CSV, XLS, or XLSX files.`
}
return null
}
@@ -156,9 +166,15 @@ export function UploadModal({
return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`
}
+ // Calculate progress percentage
+ const progressPercentage =
+ uploadProgress.totalFiles > 0
+ ? Math.round((uploadProgress.filesCompleted / uploadProgress.totalFiles) * 100)
+ : 0
+
return (
)}
>({})
-
- const formatFileSize = (bytes: number) => {
- if (bytes === 0) return '0 B'
- const k = 1024
- const sizes = ['B', 'KB', 'MB', 'GB']
- const i = Math.floor(Math.log(bytes) / Math.log(k))
- return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`
- }
-
- const getFileIcon = (mediaType: string) => {
- if (mediaType.startsWith('image/')) {
- return (null)
- const indexRef = useRef(0)
- const streamingStartTimeRef = useRef(null)
- const isAnimatingRef = useRef(false)
-
- useEffect(() => {
- // Update content reference
- contentRef.current = content
-
- if (content.length === 0) {
- setDisplayedContent('')
- indexRef.current = 0
- streamingStartTimeRef.current = null
- return
- }
-
- if (isStreaming) {
- // Start timing when streaming begins
- if (streamingStartTimeRef.current === null) {
- streamingStartTimeRef.current = Date.now()
- }
-
- // Continue animation if there's more content to show
- if (indexRef.current < content.length) {
- const animateText = () => {
- const currentContent = contentRef.current
- const currentIndex = indexRef.current
-
- if (currentIndex < currentContent.length) {
- // Add characters one by one for true character-by-character streaming
- const chunkSize = 1
- const newDisplayed = currentContent.slice(0, currentIndex + chunkSize)
-
- setDisplayedContent(newDisplayed)
- indexRef.current = currentIndex + chunkSize
-
- // Consistent fast speed for all characters
- const delay = 3 // Consistent fast delay in ms for all characters
-
- timeoutRef.current = setTimeout(animateText, delay)
- } else {
- // Animation complete
- isAnimatingRef.current = false
- }
- }
-
- // Only start new animation if not already animating
- if (!isAnimatingRef.current) {
- // Clear any existing animation
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current)
- }
-
- isAnimatingRef.current = true
- // Continue animation from current position
- animateText()
- }
- }
- } else {
- // Not streaming, show all content immediately and reset timing
- setDisplayedContent(content)
- indexRef.current = content.length
- isAnimatingRef.current = false
- streamingStartTimeRef.current = null
- }
-
- // Cleanup on unmount
- return () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current)
- }
- isAnimatingRef.current = false
- }
- }, [content, isStreaming])
-
- return (
- >({})
+
+ const formatFileSize = (bytes: number) => {
+ if (bytes === 0) return '0 B'
+ const k = 1024
+ const sizes = ['B', 'KB', 'MB', 'GB']
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+ return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`
+ }
+
+ const getFileIcon = (mediaType: string) => {
+ if (mediaType.startsWith('image/')) {
+ return (null)
+ const indexRef = useRef(0)
+ const streamingStartTimeRef = useRef(null)
+ const isAnimatingRef = useRef(false)
+
+ useEffect(() => {
+ // Update content reference
+ contentRef.current = content
+
+ if (content.length === 0) {
+ setDisplayedContent('')
+ indexRef.current = 0
+ streamingStartTimeRef.current = null
+ return
+ }
+
+ if (isStreaming) {
+ // Start timing when streaming begins
+ if (streamingStartTimeRef.current === null) {
+ streamingStartTimeRef.current = Date.now()
+ }
+
+ // Continue animation if there's more content to show
+ if (indexRef.current < content.length) {
+ const animateText = () => {
+ const currentContent = contentRef.current
+ const currentIndex = indexRef.current
+
+ if (currentIndex < currentContent.length) {
+ // Add characters one by one for true character-by-character streaming
+ const chunkSize = 1
+ const newDisplayed = currentContent.slice(0, currentIndex + chunkSize)
+
+ setDisplayedContent(newDisplayed)
+ indexRef.current = currentIndex + chunkSize
+
+ // Consistent fast speed for all characters
+ const delay = 3 // Consistent fast delay in ms for all characters
+
+ timeoutRef.current = setTimeout(animateText, delay)
+ } else {
+ // Animation complete
+ isAnimatingRef.current = false
+ }
+ }
+
+ // Only start new animation if not already animating
+ if (!isAnimatingRef.current) {
+ // Clear any existing animation
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+
+ isAnimatingRef.current = true
+ // Continue animation from current position
+ animateText()
+ }
+ }
+ } else {
+ // Not streaming, show all content immediately and reset timing
+ setDisplayedContent(content)
+ indexRef.current = content.length
+ isAnimatingRef.current = false
+ streamingStartTimeRef.current = null
+ }
+
+ // Cleanup on unmount
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ isAnimatingRef.current = false
+ }
+ }, [content, isStreaming])
+
+ return (
+ = memo(
({ message, isStreaming }) => {
const isUser = message.role === 'user'
@@ -48,7 +295,6 @@ const CopilotMessage: FC = memo(
const [showUpvoteSuccess, setShowUpvoteSuccess] = useState(false)
const [showDownvoteSuccess, setShowDownvoteSuccess] = useState(false)
const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
- const [showAllContexts, setShowAllContexts] = useState(false)
// Get checkpoint functionality from copilot store
const {
@@ -375,86 +621,6 @@ const CopilotMessage: FC = memo(
)}
- {/* Context chips displayed above the message bubble, independent of inline text */}
- {(Array.isArray((message as any).contexts) && (message as any).contexts.length > 0) ||
- (Array.isArray(message.contentBlocks) &&
- (message.contentBlocks as any[]).some((b: any) => b?.type === 'contexts')) ? (
- (
disabled = false,
isLoading = false,
isAborting = false,
- placeholder,
+ placeholder = 'How can I help you today?',
className,
mode = 'agent',
onModeChange,
@@ -123,83 +100,9 @@ const UserInput = forwardRef(
const [dragCounter, setDragCounter] = useState(0)
const textareaRef = useRef(null)
const fileInputRef = useRef(null)
- const [showMentionMenu, setShowMentionMenu] = useState(false)
- const mentionMenuRef = useRef(null)
- const submenuRef = useRef(null)
- const menuListRef = useRef(null)
- const [mentionActiveIndex, setMentionActiveIndex] = useState(0)
- const mentionOptions = [
- 'Chats',
- 'Workflows',
- 'Workflow Blocks',
- 'Blocks',
- 'Knowledge',
- 'Docs',
- 'Templates',
- 'Logs',
- ]
- const [openSubmenuFor, setOpenSubmenuFor] = useState(null)
- const [submenuActiveIndex, setSubmenuActiveIndex] = useState(0)
- const [inAggregated, setInAggregated] = useState(false)
- const isSubmenu = (
- v: 'Chats' | 'Workflows' | 'Workflow Blocks' | 'Knowledge' | 'Blocks' | 'Templates' | 'Logs'
- ) => openSubmenuFor === v
- const [pastChats, setPastChats] = useState<
- Array<{ id: string; title: string | null; workflowId: string | null; updatedAt?: string }>
- >([])
- const [isLoadingPastChats, setIsLoadingPastChats] = useState(false)
- // Removed explicit submenu query inputs; we derive query from the text typed after '@'
- const [selectedContexts, setSelectedContexts] = useState([])
- const [workflows, setWorkflows] = useState>(
- []
- )
- const [isLoadingWorkflows, setIsLoadingWorkflows] = useState(false)
- const [knowledgeBases, setKnowledgeBases] = useState>([])
- const [isLoadingKnowledge, setIsLoadingKnowledge] = useState(false)
- const [blocksList, setBlocksList] = useState<
- Array<{ id: string; name: string; iconComponent?: any; bgColor?: string }>
- >([])
- const [isLoadingBlocks, setIsLoadingBlocks] = useState(false)
- const [templatesList, setTemplatesList] = useState<
- Array<{ id: string; name: string; stars: number }>
- >([])
- const [isLoadingTemplates, setIsLoadingTemplates] = useState(false)
- // const [templatesQuery, setTemplatesQuery] = useState('')
- // Add logs list state
- const [logsList, setLogsList] = useState<
- Array<{
- id: string
- executionId?: string
- level: string
- trigger: string | null
- createdAt: string
- workflowName: string
- }>
- >([])
- const [isLoadingLogs, setIsLoadingLogs] = useState(false)
const { data: session } = useSession()
const { currentChat, workflowId } = useCopilotStore()
- const params = useParams()
- const workspaceId = params.workspaceId as string
- // Track per-chat preference for auto-adding workflow context
- const [workflowAutoAddDisabledMap, setWorkflowAutoAddDisabledMap] = useState<
- Record
- >({})
- // Also track for new chats (no ID yet)
- const [newChatWorkflowDisabled, setNewChatWorkflowDisabled] = useState(false)
- const workflowAutoAddDisabled = currentChat?.id
- ? workflowAutoAddDisabledMap[currentChat.id] || false
- : newChatWorkflowDisabled
-
- // Determine placeholder based on mode
- const effectivePlaceholder =
- placeholder ||
- (mode === 'ask' ? 'Ask, plan, understand workflows' : 'Build, edit, debug workflows')
-
- // Track submenu query anchor and aggregate mode
- const [submenuQueryStart, setSubmenuQueryStart] = useState(null)
- const [aggregatedActive, setAggregatedActive] = useState(false)
// Expose focus method to parent
useImperativeHandle(
@@ -217,105 +120,6 @@ const UserInput = forwardRef(
const setMessage =
controlledValue !== undefined ? onControlledChange || (() => {}) : setInternalMessage
- // Load workflows on mount if we have a workflowId
- useEffect(() => {
- if (workflowId && workflows.length === 0) {
- ensureWorkflowsLoaded()
- }
- }, [workflowId])
-
- // Track the last chat ID we've seen to detect chat changes
- const [lastChatId, setLastChatId] = useState(undefined)
- // Track if we just sent a message to avoid re-adding context after submit
- const [justSentMessage, setJustSentMessage] = useState(false)
-
- // Reset states when switching to a truly new chat
- useEffect(() => {
- const currentChatId = currentChat?.id
-
- // Detect when we're switching to a different chat
- if (lastChatId !== currentChatId) {
- // If switching to a new chat (undefined ID) from a different state
- // reset the disabled flag so each new chat starts fresh
- if (!currentChatId && lastChatId !== undefined) {
- setNewChatWorkflowDisabled(false)
- }
-
- // If a new chat just got an ID assigned, transfer the disabled state
- if (currentChatId && !lastChatId && newChatWorkflowDisabled) {
- setWorkflowAutoAddDisabledMap((prev) => ({
- ...prev,
- [currentChatId]: true,
- }))
- // Keep newChatWorkflowDisabled as false for the next new chat
- setNewChatWorkflowDisabled(false)
- }
-
- // Reset the "just sent" flag when switching chats
- setJustSentMessage(false)
-
- setLastChatId(currentChatId)
- }
- }, [currentChat?.id, lastChatId, newChatWorkflowDisabled])
-
- // Auto-add workflow context when message is empty and not disabled
- useEffect(() => {
- // Don't auto-add if disabled or no workflow
- if (!workflowId || workflowAutoAddDisabled) return
-
- // Don't auto-add right after sending a message
- if (justSentMessage) return
-
- // Only add when message is empty (new message being composed)
- if (message && message.trim().length > 0) return
-
- // Check if current_workflow context already exists
- const hasCurrentWorkflowContext = selectedContexts.some(
- (ctx) => ctx.kind === 'current_workflow' && (ctx as any).workflowId === workflowId
- )
- if (hasCurrentWorkflowContext) {
- return
- }
-
- const addWorkflowContext = async () => {
- // Double-check disabled state right before adding
- if (workflowAutoAddDisabled) return
-
- // Get workflow name
- let workflowName = 'Current Workflow'
-
- // Try loaded workflows first
- const existingWorkflow = workflows.find((w) => w.id === workflowId)
- if (existingWorkflow) {
- workflowName = existingWorkflow.name
- } else if (workflows.length === 0) {
- // If workflows not loaded yet, try to fetch this specific one
- try {
- const resp = await fetch(`/api/workflows/${workflowId}`)
- if (resp.ok) {
- const data = await resp.json()
- workflowName = data?.data?.name || 'Current Workflow'
- }
- } catch {}
- }
-
- // Add current_workflow context using functional update to prevent duplicates
- setSelectedContexts((prev) => {
- const alreadyHasCurrentWorkflow = prev.some(
- (ctx) => ctx.kind === 'current_workflow' && (ctx as any).workflowId === workflowId
- )
- if (alreadyHasCurrentWorkflow) return prev
-
- return [
- ...prev,
- { kind: 'current_workflow', workflowId, label: workflowName } as ChatContext,
- ]
- })
- }
-
- addWorkflowContext()
- }, [workflowId, workflowAutoAddDisabled, workflows.length, message, justSentMessage]) // Re-run when message changes
-
// Auto-resize textarea and toggle vertical scroll when exceeding max height
useEffect(() => {
const textarea = textareaRef.current
@@ -328,164 +132,6 @@ const UserInput = forwardRef(
}
}, [message])
- // Close mention menu on outside click
- useEffect(() => {
- if (!showMentionMenu) return
- const handleClickOutside = (e: MouseEvent) => {
- const target = e.target as Node | null
- if (
- mentionMenuRef.current &&
- !mentionMenuRef.current.contains(target) &&
- (!submenuRef.current || !submenuRef.current.contains(target)) &&
- textareaRef.current &&
- !textareaRef.current.contains(target as Node)
- ) {
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
- }
- document.addEventListener('mousedown', handleClickOutside)
- return () => document.removeEventListener('mousedown', handleClickOutside)
- }, [showMentionMenu])
-
- const ensurePastChatsLoaded = async () => {
- if (isLoadingPastChats || pastChats.length > 0) return
- try {
- setIsLoadingPastChats(true)
- const resp = await fetch('/api/copilot/chats')
- if (!resp.ok) throw new Error(`Failed to load chats: ${resp.status}`)
- const data = await resp.json()
- const items = Array.isArray(data?.chats) ? data.chats : []
-
- if (workflows.length === 0) {
- await ensureWorkflowsLoaded()
- }
-
- const workspaceWorkflowIds = new Set(workflows.map((w) => w.id))
-
- const workspaceChats = items.filter(
- (c: any) => !c.workflowId || workspaceWorkflowIds.has(c.workflowId)
- )
-
- setPastChats(
- workspaceChats.map((c: any) => ({
- id: c.id,
- title: c.title ?? null,
- workflowId: c.workflowId ?? null,
- updatedAt: c.updatedAt,
- }))
- )
- } catch {
- } finally {
- setIsLoadingPastChats(false)
- }
- }
-
- const ensureWorkflowsLoaded = async () => {
- if (isLoadingWorkflows || workflows.length > 0) return
- try {
- setIsLoadingWorkflows(true)
- const resp = await fetch('/api/workflows')
- if (!resp.ok) throw new Error(`Failed to load workflows: ${resp.status}`)
- const data = await resp.json()
- const items = Array.isArray(data?.data) ? data.data : []
- // Filter workflows by workspace (same as sidebar)
- const workspaceFiltered = items.filter(
- (w: any) => w.workspaceId === workspaceId || !w.workspaceId
- )
- // Sort by last modified/updated (newest first), matching sidebar behavior
- const sorted = [...workspaceFiltered].sort((a: any, b: any) => {
- const ta = new Date(a.lastModified || a.updatedAt || a.createdAt || 0).getTime()
- const tb = new Date(b.lastModified || b.updatedAt || b.createdAt || 0).getTime()
- return tb - ta
- })
- setWorkflows(
- sorted.map((w: any) => ({
- id: w.id,
- name: w.name || 'Untitled Workflow',
- color: w.color,
- }))
- )
- } catch {
- } finally {
- setIsLoadingWorkflows(false)
- }
- }
-
- const ensureKnowledgeLoaded = async () => {
- if (isLoadingKnowledge || knowledgeBases.length > 0) return
- try {
- setIsLoadingKnowledge(true)
- // Filter by workspace like the Knowledge page does
- const resp = await fetch(`/api/knowledge?workspaceId=${workspaceId}`)
- if (!resp.ok) throw new Error(`Failed to load knowledge bases: ${resp.status}`)
- const data = await resp.json()
- const items = Array.isArray(data?.data) ? data.data : []
- // Sort by updatedAt desc
- const sorted = [...items].sort((a: any, b: any) => {
- const ta = new Date(a.updatedAt || a.createdAt || 0).getTime()
- const tb = new Date(b.updatedAt || b.createdAt || 0).getTime()
- return tb - ta
- })
- setKnowledgeBases(sorted.map((k: any) => ({ id: k.id, name: k.name || 'Untitled' })))
- } catch {
- } finally {
- setIsLoadingKnowledge(false)
- }
- }
-
- const ensureBlocksLoaded = async () => {
- if (isLoadingBlocks || blocksList.length > 0) return
- try {
- setIsLoadingBlocks(true)
- const { getAllBlocks } = await import('@/blocks')
- const all = getAllBlocks()
- const regularBlocks = all
- .filter((b: any) => b.type !== 'starter' && !b.hideFromToolbar && b.category === 'blocks')
- .map((b: any) => ({
- id: b.type,
- name: b.name || b.type,
- iconComponent: b.icon,
- bgColor: b.bgColor,
- }))
- .sort((a: any, b: any) => a.name.localeCompare(b.name))
-
- const toolBlocks = all
- .filter((b: any) => b.type !== 'starter' && !b.hideFromToolbar && b.category === 'tools')
- .map((b: any) => ({
- id: b.type,
- name: b.name || b.type,
- iconComponent: b.icon,
- bgColor: b.bgColor,
- }))
- .sort((a: any, b: any) => a.name.localeCompare(b.name))
-
- const mapped = [...regularBlocks, ...toolBlocks]
- setBlocksList(mapped)
- } catch {
- } finally {
- setIsLoadingBlocks(false)
- }
- }
-
- const ensureTemplatesLoaded = async () => {
- if (isLoadingTemplates || templatesList.length > 0) return
- try {
- setIsLoadingTemplates(true)
- const resp = await fetch('/api/templates?limit=50&offset=0')
- if (!resp.ok) throw new Error(`Failed to load templates: ${resp.status}`)
- const data = await resp.json()
- const items = Array.isArray(data?.data) ? data.data : []
- const mapped = items
- .map((t: any) => ({ id: t.id, name: t.name || 'Untitled Template', stars: t.stars || 0 }))
- .sort((a: any, b: any) => b.stars - a.stars)
- setTemplatesList(mapped)
- } catch {
- } finally {
- setIsLoadingTemplates(false)
- }
- }
-
// Cleanup preview URLs on unmount
useEffect(() => {
return () => {
@@ -497,9 +143,6 @@ const UserInput = forwardRef(
}
}, [])
- // Helper to read current caret position for filtering
- const getCaretPos = () => textareaRef.current?.selectionStart ?? message.length
-
// Drag and drop handlers
const handleDragEnter = (e: React.DragEvent) => {
e.preventDefault()
@@ -548,18 +191,12 @@ const UserInput = forwardRef(
const userId = session?.user?.id
if (!userId) {
- logger.error('User ID not available for file upload')
+ console.error('User ID not available for file upload')
return
}
// Process files one by one
for (const file of Array.from(fileList)) {
- // Only accept image files
- if (!file.type.startsWith('image/')) {
- logger.warn(`File ${file.name} is not an image. Only image files are allowed.`)
- continue
- }
-
// Create a preview URL for images
let previewUrl: string | undefined
if (file.type.startsWith('image/')) {
@@ -600,22 +237,21 @@ const UserInput = forwardRef(
const presignedData = await presignedResponse.json()
- logger.info(`Uploading file: ${presignedData.presignedUrl}`)
- const uploadHeaders = presignedData.uploadHeaders || {}
+ // Upload file to S3
+ console.log('Uploading to S3:', presignedData.presignedUrl)
const uploadResponse = await fetch(presignedData.presignedUrl, {
method: 'PUT',
headers: {
'Content-Type': file.type,
- ...uploadHeaders,
},
body: file,
})
- logger.info(`Upload response status: ${uploadResponse.status}`)
+ console.log('S3 Upload response status:', uploadResponse.status)
if (!uploadResponse.ok) {
const errorText = await uploadResponse.text()
- logger.error(`Upload failed: ${errorText}`)
+ console.error('S3 Upload failed:', errorText)
throw new Error(`Failed to upload file: ${uploadResponse.status} ${errorText}`)
}
@@ -626,28 +262,31 @@ const UserInput = forwardRef(
? {
...f,
path: presignedData.fileInfo.path,
- key: presignedData.fileInfo.key, // Store the actual storage key
+ key: presignedData.fileInfo.key, // Store the actual S3 key
uploading: false,
}
: f
)
)
} catch (error) {
- logger.error(`File upload failed: ${error}`)
+ console.error('File upload failed:', error)
// Remove failed upload
setAttachedFiles((prev) => prev.filter((f) => f.id !== tempFile.id))
}
}
}
- const handleSubmit = async () => {
+ const handleSubmit = () => {
const trimmedMessage = message.trim()
if (!trimmedMessage || disabled || isLoading) return
// Check for failed uploads and show user feedback
const failedUploads = attachedFiles.filter((f) => !f.uploading && !f.key)
if (failedUploads.length > 0) {
- logger.error(`Some files failed to upload: ${failedUploads.map((f) => f.name).join(', ')}`)
+ console.error(
+ 'Some files failed to upload:',
+ failedUploads.map((f) => f.name)
+ )
}
// Convert attached files to the format expected by the API
@@ -655,22 +294,13 @@ const UserInput = forwardRef(
.filter((f) => !f.uploading && f.key) // Only include successfully uploaded files with keys
.map((f) => ({
id: f.id,
- key: f.key!, // Use the actual storage key from the upload response
+ s3_key: f.key!, // Use the actual S3 key stored from the upload response
filename: f.name,
media_type: f.type,
size: f.size,
}))
- // Build contexts to send: hide current_workflow in UI but always include it in payload
- const uiContexts = selectedContexts.filter((c) => (c as any).kind !== 'current_workflow')
- const finalContexts: any[] = [...uiContexts]
-
- if (workflowId) {
- // Include current_workflow for the agent; label not shown in UI
- finalContexts.push({ kind: 'current_workflow', workflowId, label: 'Current Workflow' })
- }
-
- onSubmit(trimmedMessage, fileAttachments, finalContexts as any)
+ onSubmit(trimmedMessage, fileAttachments)
// Clean up preview URLs before clearing
attachedFiles.forEach((f) => {
@@ -686,21 +316,6 @@ const UserInput = forwardRef(
setInternalMessage('')
}
setAttachedFiles([])
-
- // Clear @mention contexts after submission, but preserve current_workflow if not disabled
- setSelectedContexts((prev) => {
- // Keep current_workflow context if it's not disabled
- const currentWorkflowCtx = prev.find(
- (ctx) => ctx.kind === 'current_workflow' && !workflowAutoAddDisabled
- )
- return currentWorkflowCtx ? [currentWorkflowCtx] : []
- })
-
- // Mark that we just sent a message to prevent auto-add
- setJustSentMessage(true)
-
- setOpenSubmenuFor(null)
- setShowMentionMenu(false)
}
const handleAbort = () => {
@@ -710,679 +325,12 @@ const UserInput = forwardRef(
}
const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === 'Escape' && showMentionMenu) {
- e.preventDefault()
- if (openSubmenuFor) {
- setOpenSubmenuFor(null)
- setSubmenuQueryStart(null)
- } else {
- setShowMentionMenu(false)
- // Reset all mention states so @ is treated as regular text
- setOpenSubmenuFor(null)
- setSubmenuQueryStart(null)
- setMentionActiveIndex(0)
- setSubmenuActiveIndex(0)
- setInAggregated(false)
- }
- return
- }
- if (showMentionMenu && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
- e.preventDefault()
- const caretPos = getCaretPos()
- const active = getActiveMentionQueryAtPosition(caretPos)
- const mainQ = (!openSubmenuFor ? active?.query || '' : '').toLowerCase()
- const filteredMain = !openSubmenuFor
- ? mentionOptions.filter((o) => o.toLowerCase().includes(mainQ))
- : []
- const isAggregate = !openSubmenuFor && mainQ.length > 0 && filteredMain.length === 0
- const aggregatedList =
- !openSubmenuFor && mainQ.length > 0
- ? [
- ...workflowBlocks
- .filter((b) => (b.name || b.id).toLowerCase().includes(mainQ))
- .map((b) => ({ type: 'Workflow Blocks' as const, value: b })),
- ...workflows
- .filter((w) => (w.name || 'Untitled Workflow').toLowerCase().includes(mainQ))
- .map((w) => ({ type: 'Workflows' as const, value: w })),
- ...blocksList
- .filter((b) => (b.name || b.id).toLowerCase().includes(mainQ))
- .map((b) => ({ type: 'Blocks' as const, value: b })),
- ...knowledgeBases
- .filter((k) => (k.name || 'Untitled').toLowerCase().includes(mainQ))
- .map((k) => ({ type: 'Knowledge' as const, value: k })),
- ...templatesList
- .filter((t) => (t.name || 'Untitled Template').toLowerCase().includes(mainQ))
- .map((t) => ({ type: 'Templates' as const, value: t })),
- ...pastChats
- .filter((c) => (c.title || 'Untitled Chat').toLowerCase().includes(mainQ))
- .map((c) => ({ type: 'Chats' as const, value: c })),
- ]
- : []
-
- if (openSubmenuFor === 'Chats' && pastChats.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = pastChats.filter((c) =>
- (c.title || 'Untitled Chat').toLowerCase().includes(q)
- )
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (openSubmenuFor === 'Workflows' && workflows.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = workflows.filter((w) =>
- (w.name || 'Untitled Workflow').toLowerCase().includes(q)
- )
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (openSubmenuFor === 'Knowledge' && knowledgeBases.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = knowledgeBases.filter((k) =>
- (k.name || 'Untitled').toLowerCase().includes(q)
- )
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (openSubmenuFor === 'Blocks' && blocksList.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = blocksList.filter((b) => (b.name || b.id).toLowerCase().includes(q))
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (openSubmenuFor === 'Workflow Blocks' && workflowBlocks.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = workflowBlocks.filter((b) => (b.name || b.id).toLowerCase().includes(q))
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (openSubmenuFor === 'Templates' && templatesList.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = templatesList.filter((t) =>
- (t.name || 'Untitled Template').toLowerCase().includes(q)
- )
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (openSubmenuFor === 'Logs' && logsList.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = logsList.filter((l) =>
- [l.workflowName, l.trigger || ''].join(' ').toLowerCase().includes(q)
- )
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, filtered.length - 1)
- let next = prev
- if (filtered.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else if (isAggregate) {
- const q = mainQ
- const aggregated = [
- ...workflows
- .filter((w) => (w.name || 'Untitled Workflow').toLowerCase().includes(q))
- .map((w) => ({ type: 'Workflows' as const, value: w })),
- ...blocksList
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({ type: 'Blocks' as const, value: b })),
- ...knowledgeBases
- .filter((k) => (k.name || 'Untitled').toLowerCase().includes(q))
- .map((k) => ({ type: 'Knowledge' as const, value: k })),
- ...templatesList
- .filter((t) => (t.name || 'Untitled Template').toLowerCase().includes(q))
- .map((t) => ({ type: 'Templates' as const, value: t })),
- ...pastChats
- .filter((c) => (c.title || 'Untitled Chat').toLowerCase().includes(q))
- .map((c) => ({ type: 'Chats' as const, value: c })),
- ...logsList
- .filter((l) => (l.workflowName || 'Untitled Workflow').toLowerCase().includes(q))
- .map((l) => ({ type: 'Logs' as const, value: l })),
- ]
- setInAggregated(true)
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, aggregated.length - 1)
- let next = prev
- if (aggregated.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? 0 : prev + 1
- else next = prev <= 0 ? last : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- } else {
- // Navigate through main options, then into aggregated matches
- if (!inAggregated) {
- const lastMain = Math.max(0, filteredMain.length - 1)
- if (filteredMain.length === 0) {
- // jump straight into aggregated if any
- if (aggregatedList.length > 0) {
- setInAggregated(true)
- setSubmenuActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- }
- } else if (e.key === 'ArrowDown' && mentionActiveIndex >= lastMain) {
- if (aggregatedList.length > 0) {
- setInAggregated(true)
- setSubmenuActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- } else {
- setMentionActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- }
- } else if (
- e.key === 'ArrowUp' &&
- mentionActiveIndex <= 0 &&
- aggregatedList.length > 0
- ) {
- setInAggregated(true)
- setSubmenuActiveIndex(Math.max(0, aggregatedList.length - 1))
- requestAnimationFrame(() =>
- scrollActiveItemIntoView(Math.max(0, aggregatedList.length - 1))
- )
- } else {
- setMentionActiveIndex((prev) => {
- const last = lastMain
- let next = prev
- if (filteredMain.length === 0) next = 0
- else if (e.key === 'ArrowDown') next = prev >= last ? last : prev + 1
- else next = prev <= 0 ? 0 : prev - 1
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- }
- } else {
- // inside aggregated list
- setSubmenuActiveIndex((prev) => {
- const last = Math.max(0, aggregatedList.length - 1)
- let next = prev
- if (aggregatedList.length === 0) next = 0
- else if (e.key === 'ArrowDown') {
- if (prev >= last) {
- // wrap to main
- setInAggregated(false)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- return prev
- }
- next = prev + 1
- } else {
- if (prev <= 0) {
- // move to main last
- setInAggregated(false)
- setMentionActiveIndex(Math.max(0, filteredMain.length - 1))
- requestAnimationFrame(() =>
- scrollActiveItemIntoView(Math.max(0, filteredMain.length - 1))
- )
- return prev
- }
- next = prev - 1
- }
- requestAnimationFrame(() => scrollActiveItemIntoView(next))
- return next
- })
- }
- }
- return
- }
- if (showMentionMenu && e.key === 'ArrowRight') {
- e.preventDefault()
- if (inAggregated) return
- const caretPos = getCaretPos()
- const active = getActiveMentionQueryAtPosition(caretPos)
- const mainQ = (active?.query || '').toLowerCase()
- const filteredMain = mentionOptions.filter((o) => o.toLowerCase().includes(mainQ))
- const selected = filteredMain[mentionActiveIndex]
- if (selected === 'Chats') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Chats')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensurePastChatsLoaded()
- } else if (selected === 'Workflows') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Workflows')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureWorkflowsLoaded()
- } else if (selected === 'Knowledge') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Knowledge')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureKnowledgeLoaded()
- } else if (selected === 'Blocks') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Blocks')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureBlocksLoaded()
- } else if (selected === 'Workflow Blocks') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Workflow Blocks')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureWorkflowBlocksLoaded()
- } else if (selected === 'Docs') {
- // No submenu; insert immediately
- resetActiveMentionQuery()
- insertDocsMention()
- } else if (selected === 'Templates') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Templates')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureTemplatesLoaded()
- } else if (selected === 'Logs') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Logs')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureLogsLoaded()
- }
- return
- }
- if (showMentionMenu && e.key === 'ArrowLeft') {
- if (openSubmenuFor) {
- e.preventDefault()
- setOpenSubmenuFor(null)
- setSubmenuQueryStart(null)
- return
- }
- if (inAggregated) {
- e.preventDefault()
- setInAggregated(false)
- return
- }
- }
-
- // Mention token behavior (outside of menus)
- const textarea = textareaRef.current
- const selStart = textarea?.selectionStart ?? 0
- const selEnd = textarea?.selectionEnd ?? selStart
- const selectionLength = Math.abs(selEnd - selStart)
-
- // Backspace: delete entire token if cursor is inside or right after token
- if (!showMentionMenu && e.key === 'Backspace') {
- const pos = selStart
- const ranges = computeMentionRanges()
- // If there is a selection intersecting a token, delete those tokens
- const target =
- selectionLength > 0
- ? ranges.find((r) => !(selEnd <= r.start || selStart >= r.end))
- : ranges.find((r) => pos > r.start && pos <= r.end)
- if (target) {
- e.preventDefault()
- deleteRange(target)
- return
- }
- }
-
- // Delete: if at start of token, delete whole token
- if (!showMentionMenu && e.key === 'Delete') {
- const pos = selStart
- const ranges = computeMentionRanges()
- const target = ranges.find((r) => pos >= r.start && pos < r.end)
- if (target) {
- e.preventDefault()
- deleteRange(target)
- return
- }
- }
-
- // Arrow navigation: jump over mention tokens, never land inside
- if (
- !showMentionMenu &&
- selectionLength === 0 &&
- (e.key === 'ArrowLeft' || e.key === 'ArrowRight')
- ) {
- const textarea = textareaRef.current
- if (textarea) {
- if (e.key === 'ArrowLeft') {
- const nextPos = Math.max(0, selStart - 1)
- const r = findRangeContaining(nextPos)
- if (r) {
- e.preventDefault()
- const target = r.start
- requestAnimationFrame(() => textarea.setSelectionRange(target, target))
- return
- }
- } else if (e.key === 'ArrowRight') {
- const nextPos = Math.min(message.length, selStart + 1)
- const r = findRangeContaining(nextPos)
- if (r) {
- e.preventDefault()
- const target = r.end
- requestAnimationFrame(() => textarea.setSelectionRange(target, target))
- return
- }
- }
- }
- }
-
- // Prevent typing inside token
- if (!showMentionMenu && (e.key.length === 1 || e.key === 'Space')) {
- const pos = selStart
- const ranges = computeMentionRanges()
- // Only block when caret is strictly inside a token with no selection
- const blocked =
- selectionLength === 0 && !!findRangeContaining(pos) && !!findRangeContaining(pos)?.label
- if (blocked) {
- e.preventDefault()
- // Move caret to end of the token
- const r = findRangeContaining(pos)
- if (r && textarea) {
- requestAnimationFrame(() => {
- textarea.setSelectionRange(r.end, r.end)
- })
- }
- return
- }
- }
-
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
- if (!showMentionMenu) {
- handleSubmit()
- } else {
- const caretPos = getCaretPos()
- const active = getActiveMentionQueryAtPosition(caretPos)
- const mainQ = (active?.query || '').toLowerCase()
- const filteredMain = mentionOptions.filter((o) => o.toLowerCase().includes(mainQ))
- const isAggregate = !openSubmenuFor && mainQ.length > 0 && filteredMain.length === 0
- const selected = filteredMain[mentionActiveIndex]
- if (inAggregated) {
- const q = mainQ
- const aggregated: Array<{ type: string; value: any }> = [
- ...workflowBlocks
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({ type: 'Workflow Blocks', value: b })),
- ...workflows
- .filter((w) => (w.name || 'Untitled Workflow').toLowerCase().includes(q))
- .map((w) => ({ type: 'Workflows', value: w })),
- ...blocksList
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({ type: 'Blocks', value: b })),
- ...knowledgeBases
- .filter((k) => (k.name || 'Untitled').toLowerCase().includes(q))
- .map((k) => ({ type: 'Knowledge', value: k })),
- ...templatesList
- .filter((t) => (t.name || 'Untitled Template').toLowerCase().includes(q))
- .map((t) => ({ type: 'Templates', value: t })),
- ...pastChats
- .filter((c) => (c.title || 'Untitled Chat').toLowerCase().includes(q))
- .map((c) => ({ type: 'Chats', value: c })),
- ...logsList
- .filter((l) => (l.workflowName || 'Untitled Workflow').toLowerCase().includes(q))
- .map((l) => ({ type: 'Logs', value: l })),
- ]
- const idx = Math.max(0, Math.min(submenuActiveIndex, aggregated.length - 1))
- const chosen = aggregated[idx]
- if (chosen) {
- if (chosen.type === 'Chats') insertPastChatMention(chosen.value as any)
- else if (chosen.type === 'Workflows') insertWorkflowMention(chosen.value as any)
- else if (chosen.type === 'Knowledge') insertKnowledgeMention(chosen.value as any)
- else if (chosen.type === 'Workflow Blocks')
- insertWorkflowBlockMention(chosen.value as any)
- else if (chosen.type === 'Blocks') insertBlockMention(chosen.value as any)
- else if (chosen.type === 'Templates') insertTemplateMention(chosen.value as any)
- else if (chosen.type === 'Logs') insertLogMention(chosen.value as any)
- }
- } else if (!openSubmenuFor && selected === 'Chats') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Chats')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensurePastChatsLoaded()
- } else if (openSubmenuFor === 'Chats') {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = pastChats.filter((c) =>
- (c.title || 'Untitled Chat').toLowerCase().includes(q)
- )
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertPastChatMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (!openSubmenuFor && selected === 'Workflows') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Workflows')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureWorkflowsLoaded()
- } else if (openSubmenuFor === 'Workflows') {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = workflows.filter((w) =>
- (w.name || 'Untitled Workflow').toLowerCase().includes(q)
- )
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertWorkflowMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (!openSubmenuFor && selected === 'Knowledge') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Knowledge')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureKnowledgeLoaded()
- } else if (openSubmenuFor === 'Knowledge') {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = knowledgeBases.filter((k) =>
- (k.name || 'Untitled').toLowerCase().includes(q)
- )
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertKnowledgeMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (!openSubmenuFor && selected === 'Blocks') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Blocks')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureBlocksLoaded()
- } else if (openSubmenuFor === 'Blocks') {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = blocksList.filter((b) => (b.name || b.id).toLowerCase().includes(q))
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertBlockMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (!openSubmenuFor && selected === 'Workflow Blocks') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Workflow Blocks')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureWorkflowBlocksLoaded()
- } else if (openSubmenuFor === 'Workflow Blocks') {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = workflowBlocks.filter((b) =>
- (b.name || b.id).toLowerCase().includes(q)
- )
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertWorkflowBlockMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (!openSubmenuFor && selected === 'Docs') {
- resetActiveMentionQuery()
- insertDocsMention()
- } else if (!openSubmenuFor && selected === 'Templates') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Templates')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureTemplatesLoaded()
- } else if (!openSubmenuFor && selected === 'Logs') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Logs')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureLogsLoaded()
- } else if (openSubmenuFor === 'Templates') {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = templatesList.filter((t) =>
- (t.name || 'Untitled Template').toLowerCase().includes(q)
- )
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertTemplateMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (openSubmenuFor === 'Logs' && logsList.length > 0) {
- const q = getSubmenuQuery().toLowerCase()
- const filtered = logsList.filter((l) =>
- [l.workflowName, l.trigger || ''].join(' ').toLowerCase().includes(q)
- )
- if (filtered.length > 0) {
- const chosen =
- filtered[Math.max(0, Math.min(submenuActiveIndex, filtered.length - 1))]
- insertLogMention(chosen)
- setSubmenuQueryStart(null)
- }
- } else if (isAggregate || inAggregated) {
- const q = mainQ
- const aggregated: Array<{ type: string; value: any }> = [
- ...workflowBlocks
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({ type: 'Workflow Blocks', value: b })),
- ...workflows
- .filter((w) => (w.name || 'Untitled Workflow').toLowerCase().includes(q))
- .map((w) => ({ type: 'Workflows', value: w })),
- ...blocksList
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({ type: 'Blocks', value: b })),
- ...knowledgeBases
- .filter((k) => (k.name || 'Untitled').toLowerCase().includes(q))
- .map((k) => ({ type: 'Knowledge', value: k })),
- ...templatesList
- .filter((t) => (t.name || 'Untitled Template').toLowerCase().includes(q))
- .map((t) => ({ type: 'Templates', value: t })),
- ...pastChats
- .filter((c) => (c.title || 'Untitled Chat').toLowerCase().includes(q))
- .map((c) => ({ type: 'Chats', value: c })),
- ...logsList
- .filter((l) => (l.workflowName || 'Untitled Workflow').toLowerCase().includes(q))
- .map((l) => ({ type: 'Logs', value: l })),
- ]
- const idx = Math.max(0, Math.min(submenuActiveIndex, aggregated.length - 1))
- const chosen = aggregated[idx]
- if (chosen) {
- if (chosen.type === 'Chats') insertPastChatMention(chosen.value)
- else if (chosen.type === 'Workflows') insertWorkflowMention(chosen.value)
- else if (chosen.type === 'Knowledge') insertKnowledgeMention(chosen.value)
- else if (chosen.type === 'Workflow Blocks') insertWorkflowBlockMention(chosen.value)
- else if (chosen.type === 'Blocks') insertBlockMention(chosen.value)
- else if (chosen.type === 'Templates') insertTemplateMention(chosen.value)
- else if (chosen.type === 'Logs') insertLogMention(chosen.value)
- }
- }
- }
+ handleSubmit()
}
}
- const getActiveMentionQueryAtPosition = (pos: number, textOverride?: string) => {
- const text = textOverride ?? message
- const before = text.slice(0, pos)
- const atIndex = before.lastIndexOf('@')
- if (atIndex === -1) return null
- // Ensure '@' starts a token (start or whitespace before)
- if (atIndex > 0 && !/\s/.test(before.charAt(atIndex - 1))) return null
- // If this '@' falls anywhere inside an existing mention token, ignore.
- // This also covers labels that themselves contain '@' characters.
- if (selectedContexts.length > 0) {
- const labels = selectedContexts.map((c) => c.label).filter(Boolean) as string[]
- for (const label of labels) {
- const token = `@${label}`
- let fromIndex = 0
- while (fromIndex <= text.length) {
- const idx = text.indexOf(token, fromIndex)
- if (idx === -1) break
- const end = idx + token.length
- if (atIndex >= idx && atIndex < end) {
- return null
- }
- fromIndex = end
- }
- }
- }
- const segment = before.slice(atIndex + 1)
- // Close the popup if user types space immediately after @ (just "@ " with nothing between)
- // This means they want to use @ as a regular character, not as a mention trigger
- if (segment.length > 0 && /^\s/.test(segment)) {
- return null
- }
- // Keep the popup open for valid queries
- return { query: segment, start: atIndex, end: pos }
- }
-
- const getSubmenuQuery = () => {
- const pos = getCaretPos()
- if (submenuQueryStart == null) return ''
- return message.slice(submenuQueryStart, pos)
- }
-
- const resetActiveMentionQuery = () => {
- const textarea = textareaRef.current
- if (!textarea) return
- const pos = textarea.selectionStart ?? message.length
- const active = getActiveMentionQueryAtPosition(pos)
- if (!active) return
- // Keep the '@' but clear everything typed after it
- const before = message.slice(0, active.start + 1)
- const after = message.slice(active.end)
- const next = `${before}${after}`
- if (controlledValue !== undefined) onControlledChange?.(next)
- else setInternalMessage(next)
- requestAnimationFrame(() => {
- const caretPos = before.length
- textarea.setSelectionRange(caretPos, caretPos)
- textarea.focus()
- })
- }
-
const handleInputChange = (e: React.ChangeEvent) => {
const newValue = e.target.value
if (controlledValue !== undefined) {
@@ -1390,159 +338,6 @@ const UserInput = forwardRef(
} else {
setInternalMessage(newValue)
}
-
- // Reset the "just sent" flag when user starts typing
- if (justSentMessage && newValue.length > 0) {
- setJustSentMessage(false)
- }
-
- const caret = e.target.selectionStart ?? newValue.length
- const active = getActiveMentionQueryAtPosition(caret, newValue)
- if (active) {
- setShowMentionMenu(true)
- setInAggregated(false)
- if (openSubmenuFor) {
- setSubmenuActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- } else {
- setMentionActiveIndex(0)
- setSubmenuActiveIndex(0) // ensure aggregated lists also default to first
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- }
- } else {
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- setSubmenuQueryStart(null)
- }
- }
-
- const handleSelectAdjust = () => {
- const textarea = textareaRef.current
- if (!textarea) return
- const pos = textarea.selectionStart ?? 0
- const r = findRangeContaining(pos)
- if (r) {
- // Snap caret to token boundary to avoid typing inside
- const snapPos = pos - r.start < r.end - pos ? r.start : r.end
- requestAnimationFrame(() => {
- textarea.setSelectionRange(snapPos, snapPos)
- })
- }
- }
-
- const insertAtCursor = (text: string) => {
- const textarea = textareaRef.current
- if (!textarea) return
- const start = textarea.selectionStart ?? message.length
- const end = textarea.selectionEnd ?? message.length
- let before = message.slice(0, start)
- const after = message.slice(end)
- // Avoid duplicate '@' if user typed trigger
- if (before.endsWith('@') && text.startsWith('@')) {
- before = before.slice(0, -1)
- }
- const next = `${before}${text}${after}`
- if (controlledValue !== undefined) {
- onControlledChange?.(next)
- } else {
- setInternalMessage(next)
- }
- // Move cursor to after inserted text
- setTimeout(() => {
- const pos = before.length + text.length
- textarea.setSelectionRange(pos, pos)
- textarea.focus()
- }, 0)
- }
-
- const replaceActiveMentionWith = (label: string) => {
- const textarea = textareaRef.current
- if (!textarea) return false
- const pos = textarea.selectionStart ?? message.length
- const active = getActiveMentionQueryAtPosition(pos)
- if (!active) return false
- const before = message.slice(0, active.start)
- const after = message.slice(active.end)
- const insertion = `@${label} `
- const next = `${before}${insertion}${after}`.replace(/\s{2,}/g, ' ')
- if (controlledValue !== undefined) onControlledChange?.(next)
- else setInternalMessage(next)
- requestAnimationFrame(() => {
- const cursorPos = before.length + insertion.length
- textarea.setSelectionRange(cursorPos, cursorPos)
- textarea.focus()
- })
- return true
- }
-
- const insertPastChatMention = (chat: { id: string; title: string | null }) => {
- const label = chat.title || 'Untitled Chat'
- replaceActiveMentionWith(label)
- setSelectedContexts((prev) => {
- // Avoid duplicate contexts for same chat
- if (prev.some((c) => c.kind === 'past_chat' && (c as any).chatId === chat.id)) return prev
- return [...prev, { kind: 'past_chat', chatId: chat.id, label } as ChatContext]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
- const insertWorkflowMention = (wf: { id: string; name: string }) => {
- const label = wf.name || 'Untitled Workflow'
- const token = `@${label}`
- if (!replaceActiveMentionWith(label)) insertAtCursor(`${token} `)
- setSelectedContexts((prev) => {
- if (prev.some((c) => c.kind === 'workflow' && (c as any).workflowId === wf.id)) return prev
- return [...prev, { kind: 'workflow', workflowId: wf.id, label } as ChatContext]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
- const insertKnowledgeMention = (kb: { id: string; name: string }) => {
- const label = kb.name || 'Untitled'
- replaceActiveMentionWith(label)
- setSelectedContexts((prev) => {
- if (prev.some((c) => c.kind === 'knowledge' && (c as any).knowledgeId === kb.id))
- return prev
- return [...prev, { kind: 'knowledge', knowledgeId: kb.id, label } as any]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
- const insertBlockMention = (blk: { id: string; name: string }) => {
- const label = blk.name || blk.id
- replaceActiveMentionWith(label)
- setSelectedContexts((prev) => {
- if (prev.some((c) => c.kind === 'blocks' && (c as any).blockId === blk.id)) return prev
- return [...prev, { kind: 'blocks', blockId: blk.id, label } as any]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
- const insertTemplateMention = (tpl: { id: string; name: string }) => {
- const label = tpl.name || 'Untitled Template'
- replaceActiveMentionWith(label)
- setSelectedContexts((prev) => {
- if (prev.some((c) => c.kind === 'templates' && (c as any).templateId === tpl.id))
- return prev
- return [...prev, { kind: 'templates', templateId: tpl.id, label } as any]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
- const insertDocsMention = () => {
- const label = 'Docs'
- if (!replaceActiveMentionWith(label)) insertAtCursor(`@${label} `)
- setSelectedContexts((prev) => {
- if (prev.some((c) => c.kind === 'docs')) return prev
- return [...prev, { kind: 'docs', label } as any]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
}
const handleFileSelect = () => {
@@ -1577,9 +372,9 @@ const UserInput = forwardRef(
}
const handleFileClick = (file: AttachedFile) => {
- // If file has been uploaded and has a storage key, open the file URL
+ // If file has been uploaded and has an S3 key, open the S3 URL
if (file.key) {
- const serveUrl = file.path
+ const serveUrl = `/api/files/serve/s3/${encodeURIComponent(file.key)}?bucket=copilot`
window.open(serveUrl, '_blank')
} else if (file.previewUrl) {
// If file hasn't been uploaded yet but has a preview URL, open that
@@ -1612,124 +407,6 @@ const UserInput = forwardRef(
return ()
- const ranges = computeMentionRanges()
- for (const r of ranges) presentLabels.add(r.label)
- setSelectedContexts((prev) => {
- // Keep contexts that are mentioned in text OR are current_workflow (unless disabled)
- const filteredContexts = prev.filter((c) => {
- // Always preserve current_workflow context if it's not disabled
- // It should only be removable via the X button
- if (c.kind === 'current_workflow' && !workflowAutoAddDisabled) {
- return true
- }
- // For other contexts, check if they're mentioned in text
- return !!c.label && presentLabels.has(c.label!)
- })
-
- return filteredContexts
- })
- }, [message, workflowAutoAddDisabled])
-
- // Manage aggregate mode and preloading when needed
- useEffect(() => {
- if (!showMentionMenu || openSubmenuFor) {
- setAggregatedActive(false)
- setInAggregated(false)
- return
- }
- const q = (getActiveMentionQueryAtPosition(getCaretPos())?.query || '').trim().toLowerCase()
- const filteredMain = mentionOptions.filter((o) => o.toLowerCase().includes(q))
- const needAggregate = q.length > 0 && filteredMain.length === 0
- setAggregatedActive(needAggregate)
- // Prefetch all lists whenever there is any query so the Matches section has data
- if (q.length > 0) {
- void ensurePastChatsLoaded()
- void ensureWorkflowsLoaded()
- void ensureWorkflowBlocksLoaded()
- void ensureKnowledgeLoaded()
- void ensureBlocksLoaded()
- void ensureTemplatesLoaded()
- void ensureLogsLoaded()
- }
- if (needAggregate) {
- setSubmenuActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- }
- }, [showMentionMenu, openSubmenuFor, message])
-
- // When switching into a submenu, select the first item and scroll to it
- useEffect(() => {
- if (openSubmenuFor) {
- setInAggregated(false)
- setSubmenuActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- }
- }, [openSubmenuFor])
-
const canSubmit = message.trim().length > 0 && !disabled && !isLoading
const showAbortButton = isLoading && onAbort
@@ -1804,194 +481,6 @@ const UserInput = forwardRef(
const getDepthIcon = () => getDepthIconFor(agentDepth)
- const scrollActiveItemIntoView = (index: number) => {
- const container = menuListRef.current
- if (!container) return
- const item = container.querySelector(`[data-idx="${index}"]`) as HTMLElement | null
- if (!item) return
- const tolerance = 8
- const itemTop = item.offsetTop
- const itemBottom = itemTop + item.offsetHeight
- const viewTop = container.scrollTop
- const viewBottom = viewTop + container.clientHeight
- const needsScrollUp = itemTop < viewTop + tolerance
- const needsScrollDown = itemBottom > viewBottom - tolerance
- if (needsScrollUp || needsScrollDown) {
- if (needsScrollUp) {
- container.scrollTop = Math.max(0, itemTop - tolerance)
- } else {
- container.scrollTop = itemBottom + tolerance - container.clientHeight
- }
- }
- }
-
- const handleOpenMentionMenuWithAt = () => {
- if (disabled || isLoading) return
- const textarea = textareaRef.current
- if (!textarea) return
- textarea.focus()
- const pos = textarea.selectionStart ?? message.length
- const needsSpaceBefore = pos > 0 && !/\s/.test(message.charAt(pos - 1))
- insertAtCursor(needsSpaceBefore ? ' @' : '@')
- // Open the menu at top level
- setShowMentionMenu(true)
- setOpenSubmenuFor(null)
- setMentionActiveIndex(0)
- setSubmenuActiveIndex(0)
- requestAnimationFrame(() => scrollActiveItemIntoView(0))
- }
-
- // Load recent logs (executions)
- const ensureLogsLoaded = async () => {
- if (isLoadingLogs || logsList.length > 0) return
- try {
- setIsLoadingLogs(true)
- const resp = await fetch(`/api/logs?workspaceId=${workspaceId}&limit=50&details=full`)
- if (!resp.ok) throw new Error(`Failed to load logs: ${resp.status}`)
- const data = await resp.json()
- const items = Array.isArray(data?.data) ? data.data : []
- const mapped = items.map((l: any) => ({
- id: l.id,
- executionId: l.executionId || l.id,
- level: l.level,
- trigger: l.trigger || null,
- createdAt: l.createdAt,
- workflowName:
- (l.workflow && (l.workflow.name || l.workflow.title)) ||
- l.workflowName ||
- 'Untitled Workflow',
- }))
- setLogsList(mapped)
- } catch {
- } finally {
- setIsLoadingLogs(false)
- }
- }
-
- // Insert a logs mention
- const insertLogMention = (log: {
- id: string
- executionId?: string
- level: string
- trigger: string | null
- createdAt: string
- workflowName: string
- }) => {
- const label = log.workflowName
- replaceActiveMentionWith(label)
- setSelectedContexts((prev) => {
- if (prev.some((c) => c.kind === 'logs' && c.label === label)) return prev
- return [...prev, { kind: 'logs', executionId: log.executionId, label }]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
- // Helper to format timestamps
- const formatTimestamp = (iso: string) => {
- try {
- const d = new Date(iso)
- const mm = String(d.getMonth() + 1).padStart(2, '0')
- const dd = String(d.getDate()).padStart(2, '0')
- const hh = String(d.getHours()).padStart(2, '0')
- const min = String(d.getMinutes()).padStart(2, '0')
- return `${mm}-${dd} ${hh}:${min}`
- } catch {
- return iso
- }
- }
-
- // Get workflow blocks from the workflow store
- const workflowStoreBlocks = useWorkflowStore((state) => state.blocks)
-
- // Transform workflow store blocks into the format needed for the mention menu
- const [workflowBlocks, setWorkflowBlocks] = useState<
- Array<{ id: string; name: string; type: string; iconComponent?: any; bgColor?: string }>
- >([])
- const [isLoadingWorkflowBlocks, setIsLoadingWorkflowBlocks] = useState(false)
-
- // Sync workflow blocks from store whenever they change
- useEffect(() => {
- const syncWorkflowBlocks = async () => {
- if (!workflowId || !workflowStoreBlocks || Object.keys(workflowStoreBlocks).length === 0) {
- setWorkflowBlocks([])
- logger.debug('No workflow blocks to sync', {
- workflowId,
- hasBlocks: !!workflowStoreBlocks,
- blockCount: Object.keys(workflowStoreBlocks || {}).length,
- })
- return
- }
-
- try {
- // Map to display with block registry icons/colors
- const { registry: blockRegistry } = await import('@/blocks/registry')
- const mapped = Object.values(workflowStoreBlocks).map((b: any) => {
- const reg = (blockRegistry as any)[b.type]
- return {
- id: b.id,
- name: b.name || b.id,
- type: b.type,
- iconComponent: reg?.icon,
- bgColor: reg?.bgColor || '#6B7280',
- }
- })
- setWorkflowBlocks(mapped)
- logger.debug('Synced workflow blocks for mention menu', {
- count: mapped.length,
- blocks: mapped.map((b) => b.name),
- })
- } catch (error) {
- logger.debug('Failed to sync workflow blocks:', error)
- }
- }
-
- syncWorkflowBlocks()
- }, [workflowStoreBlocks, workflowId])
-
- const ensureWorkflowBlocksLoaded = async () => {
- // Since blocks are now synced from store via useEffect, this can be a no-op
- // or just ensure the blocks are loaded in the store
- if (!workflowId) return
-
- // Debug: Log current state
- logger.debug('ensureWorkflowBlocksLoaded called', {
- workflowId,
- storeBlocksCount: Object.keys(workflowStoreBlocks || {}).length,
- workflowBlocksCount: workflowBlocks.length,
- })
-
- // Blocks will be automatically synced from the store
- }
-
- const insertWorkflowBlockMention = (blk: { id: string; name: string }) => {
- const label = `${blk.name}`
- const token = `@${label}`
- if (!replaceActiveMentionWith(label)) insertAtCursor(`${token} `)
- setSelectedContexts((prev) => {
- if (
- prev.some(
- (c) =>
- c.kind === 'workflow_block' &&
- (c as any).workflowId === workflowId &&
- (c as any).blockId === blk.id
- )
- )
- return prev
- return [
- ...prev,
- {
- kind: 'workflow_block',
- workflowId: workflowId as string,
- blockId: blk.id,
- label,
- } as any,
- ]
- })
- setShowMentionMenu(false)
- setOpenSubmenuFor(null)
- }
-
return (
(
type='file'
onChange={handleFileChange}
className='hidden'
- accept='image/*'
+ accept='.pdf,.doc,.docx,.txt,.md,.png,.jpg,.jpeg,.gif,.svg'
multiple
disabled={disabled || isLoading}
/>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
index 79415b13ad..9a6c607282 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
@@ -1,6 +1,6 @@
'use client'
-import { Blocks, Bot, LibraryBig, Workflow } from 'lucide-react'
+import { Bot } from 'lucide-react'
interface CopilotWelcomeProps {
onQuestionClick?: (question: string) => void
@@ -8,90 +8,49 @@ interface CopilotWelcomeProps {
}
export function CopilotWelcome({ onQuestionClick, mode = 'ask' }: CopilotWelcomeProps) {
+ const askQuestions = [
+ 'How do I create a workflow?',
+ 'What tools are available?',
+ 'What does my workflow do?',
+ ]
+
+ const agentQuestions = [
+ 'Help me build a workflow',
+ 'Help me optimize my workflow',
+ 'Help me debug my workflow',
+ ]
+
+ const exampleQuestions = mode === 'ask' ? askQuestions : agentQuestions
+
const handleQuestionClick = (question: string) => {
onQuestionClick?.(question)
}
- const subtitle =
- mode === 'ask'
- ? 'Ask about workflows, tools, or how to get started'
- : 'Build, edit, and optimize workflows'
-
- const capabilities =
- mode === 'agent'
- ? [
- {
- title: 'Build & edit workflows',
- question: 'Help me build a workflow',
- Icon: Workflow,
- },
- {
- title: 'Optimize workflows',
- question: 'Help me optimize my workflow',
- Icon: Blocks,
- },
- {
- title: 'Debug workflows',
- question: 'Help me debug my workflow',
- Icon: LibraryBig,
- },
- ]
- : [
- {
- title: 'Understand my workflow',
- question: 'What does my workflow do?',
- Icon: Workflow,
- },
- {
- title: 'Discover tools',
- question: 'What tools are available?',
- Icon: Blocks,
- },
- {
- title: 'Get started',
- question: 'How do I create a workflow?',
- Icon: LibraryBig,
- },
- ]
-
return (
- ('')
- useEffect(() => {
- if (dependsOn.length === 0) return
- const currentSig = JSON.stringify(dependencyValues)
- if (prevDepsSigRef.current && prevDepsSigRef.current !== currentSig) {
- if (!isPreview) {
- setSelectedChannelId('')
- setChannelInfo(null)
- setStoreValue('')
- }
- }
- prevDepsSigRef.current = currentSig
- }, [dependsOn, dependencyValues, isPreview, setStoreValue])
-
// Handle channel selection (same pattern as file-selector)
const handleChannelChange = (channelId: string, info?: SlackChannelInfo) => {
setSelectedChannelId(channelId)
@@ -109,8 +90,6 @@ export function ChannelSelectorInput({
credential={credential}
label={subBlock.placeholder || 'Select Slack channel'}
disabled={finalDisabled}
- workflowId={workflowIdFromUrl}
- isForeignCredential={isForeignCredential}
/>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/channel-selector/components/slack-channel-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/channel-selector/components/slack-channel-selector.tsx
index 43dd60e1b5..e5f72fa82f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/channel-selector/components/slack-channel-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/channel-selector/components/slack-channel-selector.tsx
@@ -24,8 +24,6 @@ interface SlackChannelSelectorProps {
credential: string
label?: string
disabled?: boolean
- workflowId?: string
- isForeignCredential?: boolean
}
export function SlackChannelSelector({
@@ -34,8 +32,6 @@ export function SlackChannelSelector({
credential,
label = 'Select Slack channel',
disabled = false,
- workflowId,
- isForeignCredential = false,
}: SlackChannelSelectorProps) {
const [channels, setChannels] = useState([])
const [loading, setLoading] = useState(false)
@@ -55,7 +51,7 @@ export function SlackChannelSelector({
const res = await fetch('/api/tools/slack/channels', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ credential, workflowId }),
+ body: JSON.stringify({ credential }),
})
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
@@ -129,7 +125,6 @@ export function SlackChannelSelector({
aria-expanded={open}
className='relative w-full justify-between'
disabled={disabled || !credential}
- title={isForeignCredential ? 'Using a shared account' : undefined}
>
(null)
+ // Function to toggle collapsed state
const toggleCollapsed = () => {
setCollapsedValue(blockId, collapsedStateKey, !isCollapsed)
}
+ // Create refs to hold the handlers
const handleStreamStartRef = useRef<() => void>(() => {})
const handleGeneratedContentRef = useRef<(generatedCode: string) => void>(() => {})
const handleStreamChunkRef = useRef<(chunk: string) => void>(() => {})
- const [languageValue] = useSubBlockValue(blockId, 'language')
- const [remoteExecution] = useSubBlockValue(blockId, 'remoteExecution')
-
- const effectiveLanguage = (languageValue as 'javascript' | 'python' | 'json') || language
-
- const dynamicPlaceholder = useMemo(() => {
- if (remoteExecution && languageValue === CodeLanguage.Python) {
- return 'Write Python...'
- }
- return placeholder
- }, [remoteExecution, languageValue, placeholder])
-
- const dynamicWandConfig = useMemo(() => {
- if (remoteExecution && languageValue === CodeLanguage.Python) {
- return {
- ...wandConfig,
- prompt: `You are an expert Python programmer.
-Generate ONLY the raw body of a Python function based on the user's request.
-The code should be executable within a Python function body context.
-- 'params' (object): Contains input parameters derived from the JSON schema. Access these directly using the parameter name wrapped in angle brackets, e.g., ''. Do NOT use 'params.paramName'.
-- 'environmentVariables' (object): Contains environment variables. Reference these using the double curly brace syntax: '{{ENV_VAR_NAME}}'. Do NOT use os.environ or env.
-
-Current code context: {context}
-
-IMPORTANT FORMATTING RULES:
-1. Reference Environment Variables: Use the exact syntax {{VARIABLE_NAME}}. Do NOT wrap it in quotes.
-2. Reference Input Parameters/Workflow Variables: Use the exact syntax . Do NOT wrap it in quotes.
-3. Function Body ONLY: Do NOT include the function signature (e.g., 'def my_func(...)') or surrounding braces. Return the final value with 'return'.
-4. Imports: You may add imports as needed (standard library or pip-installed packages) without comments.
-5. No Markdown: Do NOT include backticks, code fences, or any markdown.
-6. Clarity: Write clean, readable Python code.`,
- placeholder: 'Describe the Python function you want to create...',
- }
- }
- return wandConfig
- }, [wandConfig, remoteExecution, languageValue])
-
- const wandHook = useWand({
- wandConfig: wandConfig || { enabled: false, prompt: '' },
- currentValue: code,
- onStreamStart: () => handleStreamStartRef.current?.(),
- onStreamChunk: (chunk: string) => handleStreamChunkRef.current?.(chunk),
- onGeneratedContent: (content: string) => handleGeneratedContentRef.current?.(content),
- })
+ // AI Code Generation Hook - use new wand system
+ const wandHook = wandConfig?.enabled
+ ? useWand({
+ wandConfig,
+ currentValue: code,
+ onStreamStart: () => handleStreamStartRef.current?.(),
+ onStreamChunk: (chunk: string) => handleStreamChunkRef.current?.(chunk),
+ onGeneratedContent: (content: string) => handleGeneratedContentRef.current?.(content),
+ })
+ : null
+ // Extract values from wand hook
const isAiLoading = wandHook?.isLoading || false
const isAiStreaming = wandHook?.isStreaming || false
const generateCodeStream = wandHook?.generateStream || (() => {})
@@ -197,8 +161,10 @@ IMPORTANT FORMATTING RULES:
const updatePromptValue = wandHook?.updatePromptValue || (() => {})
const cancelGeneration = wandHook?.cancelGeneration || (() => {})
+ // State management - useSubBlockValue with explicit streaming control
const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId, false, {
- isStreaming: isAiStreaming,
+ debounceMs: 150,
+ isStreaming: isAiStreaming, // Use AI streaming state directly
onStreamingEnd: () => {
logger.debug('AI streaming ended, value persisted', { blockId, subBlockId })
},
@@ -206,28 +172,43 @@ IMPORTANT FORMATTING RULES:
const emitTagSelection = useTagSelection(blockId, subBlockId)
+ // Use preview value when in preview mode, otherwise use store value or prop value
const value = isPreview ? previewValue : propValue !== undefined ? propValue : storeValue
+ // Define the handlers in useEffect to avoid setState during render
useEffect(() => {
handleStreamStartRef.current = () => {
setCode('')
+ // Streaming state is now controlled by isAiStreaming
}
handleGeneratedContentRef.current = (generatedCode: string) => {
setCode(generatedCode)
if (!isPreview && !disabled) {
setStoreValue(generatedCode)
+ // Final value will be persisted when isAiStreaming becomes false
}
}
+
+ handleStreamChunkRef.current = (chunk: string) => {
+ setCode((currentCode) => {
+ const newCode = currentCode + chunk
+ if (!isPreview && !disabled) {
+ // Update the value - it won't be persisted until streaming ends
+ setStoreValue(newCode)
+ }
+ return newCode
+ })
+ }
}, [isPreview, disabled, setStoreValue])
+ // Effects
useEffect(() => {
- if (isAiStreaming) return
const valueString = value?.toString() ?? ''
if (valueString !== code) {
setCode(valueString)
}
- }, [value, code, isAiStreaming])
+ }, [value])
useEffect(() => {
if (!editorRef.current) return
@@ -296,6 +277,7 @@ IMPORTANT FORMATTING RULES:
}
}, [code])
+ // Handlers
const handleDrop = (e: React.DragEvent) => {
if (isPreview) return
e.preventDefault()
@@ -354,11 +336,12 @@ IMPORTANT FORMATTING RULES:
}, 0)
}
- const renderLineNumbers = (): ReactElement[] => {
+ // Render helpers
+ const renderLineNumbers = () => {
const numbers: ReactElement[] = []
let lineNumber = 1
- visualLineHeights.forEach((height) => {
+ visualLineHeights.forEach((height, index) => {
numbers.push(
handleFileClick(file)}
- title={`${file.filename} (${formatFileSize(file.size)})`}
- >
- {isImageFile(file.media_type) ? (
- // For images, show actual thumbnail
- })
{
- // If image fails to load, replace with icon
- const target = e.target as HTMLImageElement
- target.style.display = 'none'
- const parent = target.parentElement
- if (parent) {
- const iconContainer = document.createElement('div')
- iconContainer.className =
- 'flex items-center justify-center w-full h-full bg-background/50'
- iconContainer.innerHTML =
- ''
- parent.appendChild(iconContainer)
- }
- }}
- />
- ) : (
- // For other files, show icon centered
-
- ))}
-
- )
-})
-
-FileAttachmentDisplay.displayName = 'FileAttachmentDisplay'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/index.ts
deleted file mode 100644
index e713631e35..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './file-display'
-export * from './markdown-renderer'
-export * from './smooth-streaming'
-export * from './thinking-block'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming.tsx
deleted file mode 100644
index a3fddf7881..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { memo, useEffect, useRef, useState } from 'react'
-import CopilotMarkdownRenderer from './markdown-renderer'
-
-export const StreamingIndicator = memo(() => (
-
- {getFileIcon(file.media_type)}
-
- )}
-
- {/* Hover overlay effect */}
-
-
-
-))
-
-StreamingIndicator.displayName = 'StreamingIndicator'
-
-interface SmoothStreamingTextProps {
- content: string
- isStreaming: boolean
-}
-
-export const SmoothStreamingText = memo(
- ({ content, isStreaming }: SmoothStreamingTextProps) => {
- const [displayedContent, setDisplayedContent] = useState('')
- const contentRef = useRef(content)
- const timeoutRef = useRef
-
-
-
-
-
-
- )
- },
- (prevProps, nextProps) => {
- // Prevent re-renders during streaming unless content actually changed
- return (
- prevProps.content === nextProps.content && prevProps.isStreaming === nextProps.isStreaming
- // markdownComponents is now memoized so no need to compare
- )
- }
-)
-
-SmoothStreamingText.displayName = 'SmoothStreamingText'
-
-// Maximum character length for a word before it's broken up
-const MAX_WORD_LENGTH = 25
-
-export const WordWrap = ({ text }: { text: string }) => {
- if (!text) return null
-
- // Split text into words, keeping spaces and punctuation
- const parts = text.split(/(\s+)/g)
-
- return (
- <>
- {parts.map((part, index) => {
- // If the part is whitespace or shorter than the max length, render it as is
- if (part.match(/\s+/) || part.length <= MAX_WORD_LENGTH) {
- return {part}
- }
-
- // For long words, break them up into chunks
- const chunks = []
- for (let i = 0; i < part.length; i += MAX_WORD_LENGTH) {
- chunks.push(part.substring(i, i + MAX_WORD_LENGTH))
- }
-
- return (
-
- {chunks.map((chunk, chunkIndex) => (
- {chunk}
- ))}
-
- )
- })}
-
- )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 426913eb76..efd7157216 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -1,37 +1,24 @@
'use client'
-import { type FC, memo, useEffect, useMemo, useState } from 'react'
+import { type FC, memo, useEffect, useMemo, useRef, useState } from 'react'
import {
- Blocks,
- BookOpen,
- Bot,
- Box,
Check,
Clipboard,
- Info,
- LibraryBig,
+ FileText,
+ Image,
Loader2,
RotateCcw,
- Shapes,
- SquareChevronRight,
ThumbsDown,
ThumbsUp,
- Workflow,
X,
} from 'lucide-react'
import { InlineToolCall } from '@/lib/copilot/inline-tool-call'
import { createLogger } from '@/lib/logs/console/logger'
-import {
- FileAttachmentDisplay,
- SmoothStreamingText,
- StreamingIndicator,
- ThinkingBlock,
- WordWrap,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components'
-import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer'
import { usePreviewStore } from '@/stores/copilot/preview-store'
import { useCopilotStore } from '@/stores/copilot/store'
import type { CopilotMessage as CopilotMessageType } from '@/stores/copilot/types'
+import CopilotMarkdownRenderer from './components/markdown-renderer'
+import { ThinkingBlock } from './components/thinking-block'
const logger = createLogger('CopilotMessage')
@@ -40,6 +27,266 @@ interface CopilotMessageProps {
isStreaming?: boolean
}
+// Memoized streaming indicator component for better performance
+const StreamingIndicator = memo(() => (
+
+
+))
+
+StreamingIndicator.displayName = 'StreamingIndicator'
+
+// File attachment display component
+interface FileAttachmentDisplayProps {
+ fileAttachments: any[]
+}
+
+const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayProps) => {
+ // Cache for file URLs to avoid re-fetching on every render
+ const [fileUrls, setFileUrls] = useState
+
+
+
+
+ handleFileClick(file)}
+ title={`${file.filename} (${formatFileSize(file.size)})`}
+ >
+ {isImageFile(file.media_type) ? (
+ // For images, show actual thumbnail
+ {
+ // If image fails to load, replace with icon
+ const target = e.target as HTMLImageElement
+ target.style.display = 'none'
+ const parent = target.parentElement
+ if (parent) {
+ const iconContainer = document.createElement('div')
+ iconContainer.className =
+ 'flex items-center justify-center w-full h-full bg-background/50'
+ iconContainer.innerHTML =
+ ''
+ parent.appendChild(iconContainer)
+ }
+ }}
+ />
+ ) : (
+ // For other files, show icon centered
+
+ ))}
+
+ )
+})
+
+FileAttachmentDisplay.displayName = 'FileAttachmentDisplay'
+
+// Smooth streaming text component with typewriter effect
+interface SmoothStreamingTextProps {
+ content: string
+ isStreaming: boolean
+}
+
+const SmoothStreamingText = memo(
+ ({ content, isStreaming }: SmoothStreamingTextProps) => {
+ const [displayedContent, setDisplayedContent] = useState('')
+ const contentRef = useRef(content)
+ const timeoutRef = useRef
+ {getFileIcon(file.media_type)}
+
+ )}
+
+ {/* Hover overlay effect */}
+
+
+
+ )
+ },
+ (prevProps, nextProps) => {
+ // Prevent re-renders during streaming unless content actually changed
+ return (
+ prevProps.content === nextProps.content && prevProps.isStreaming === nextProps.isStreaming
+ // markdownComponents is now memoized so no need to compare
+ )
+ }
+)
+
+SmoothStreamingText.displayName = 'SmoothStreamingText'
+
+// Maximum character length for a word before it's broken up
+const MAX_WORD_LENGTH = 25
+
+const WordWrap = ({ text }: { text: string }) => {
+ if (!text) return null
+
+ // Split text into words, keeping spaces and punctuation
+ const parts = text.split(/(\s+)/g)
+
+ return (
+ <>
+ {parts.map((part, index) => {
+ // If the part is whitespace or shorter than the max length, render it as is
+ if (part.match(/\s+/) || part.length <= MAX_WORD_LENGTH) {
+ return {part}
+ }
+
+ // For long words, break them up into chunks
+ const chunks = []
+ for (let i = 0; i < part.length; i += MAX_WORD_LENGTH) {
+ chunks.push(part.substring(i, i + MAX_WORD_LENGTH))
+ }
+
+ return (
+
+ {chunks.map((chunk, chunkIndex) => (
+ {chunk}
+ ))}
+
+ )
+ })}
+
+ )
+}
+
const CopilotMessage: FC
-
- ) : null}
-
-
-
- {(() => {
- const direct = Array.isArray((message as any).contexts)
- ? ((message as any).contexts as any[])
- : []
- const block = Array.isArray(message.contentBlocks)
- ? (message.contentBlocks as any[]).find((b: any) => b?.type === 'contexts')
- : null
- const fromBlock = Array.isArray((block as any)?.contexts)
- ? ((block as any).contexts as any[])
- : []
- const allContexts = (direct.length > 0 ? direct : fromBlock).filter(
- (c: any) => c?.kind !== 'current_workflow'
- )
- const MAX_VISIBLE = 4
- const visible = showAllContexts
- ? allContexts
- : allContexts.slice(0, MAX_VISIBLE)
- return (
- <>
- {visible.map((ctx: any, idx: number) => (
-
- {ctx?.kind === 'past_chat' ? (
-
-
{hasCheckpoints && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/copilot-slider.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/copilot-slider.tsx
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/copilot-slider.tsx
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/copilot-slider.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index 4e763ea3dd..9da8fe935f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -10,57 +10,38 @@ import {
} from 'react'
import {
ArrowUp,
- AtSign,
- Blocks,
- BookOpen,
- Bot,
- Box,
Brain,
BrainCircuit,
Check,
- ChevronRight,
FileText,
Image,
Infinity as InfinityIcon,
Info,
- LibraryBig,
Loader2,
MessageCircle,
Package,
Paperclip,
- Shapes,
- SquareChevronRight,
- Workflow,
X,
Zap,
} from 'lucide-react'
-import { useParams } from 'next/navigation'
+import { Button } from '@/components/ui/button'
import {
- Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- Switch,
- Textarea,
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from '@/components/ui'
+} from '@/components/ui/dropdown-menu'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { useSession } from '@/lib/auth-client'
-import { createLogger } from '@/lib/logs/console/logger'
import { cn } from '@/lib/utils'
-import { CopilotSlider } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/copilot-slider'
import { useCopilotStore } from '@/stores/copilot/store'
-import type { ChatContext } from '@/stores/copilot/types'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-
-const logger = createLogger('CopilotUserInput')
+import { CopilotSlider as Slider } from './copilot-slider'
export interface MessageFileAttachment {
id: string
- key: string
+ s3_key: string
filename: string
media_type: string
size: number
@@ -72,17 +53,13 @@ interface AttachedFile {
size: number
type: string
path: string
- key?: string // Add key field to store the actual storage key
+ key?: string // Add key field to store the actual S3 key
uploading: boolean
previewUrl?: string // For local preview of images before upload
}
interface UserInputProps {
- onSubmit: (
- message: string,
- fileAttachments?: MessageFileAttachment[],
- contexts?: ChatContext[]
- ) => void
+ onSubmit: (message: string, fileAttachments?: MessageFileAttachment[]) => void
onAbort?: () => void
disabled?: boolean
isLoading?: boolean
@@ -107,7 +84,7 @@ const UserInput = forwardRef
@@ -506,42 +672,7 @@ const CopilotMessage: FC = memo(
}}
>
- {(() => {
- const text = message.content || ''
- const contexts: any[] = Array.isArray((message as any).contexts)
- ? ((message as any).contexts as any[])
- : []
- const labels = contexts
- .filter((c) => c?.kind !== 'current_workflow')
- .map((c) => c?.label)
- .filter(Boolean) as string[]
- if (!labels.length) return
(
className='h-full w-full object-cover'
/>
) : isImageFile(file.type) && file.key ? (
- // For uploaded images without preview URL, use storage URL
+ // For uploaded images without preview URL, use S3 URL
@@ -2065,981 +554,18 @@ const UserInput = forwardRef(
)}
- {/* Selected Context Pills */}
- {selectedContexts.filter((c) => c.kind !== 'current_workflow').length > 0 && (
-
- {selectedContexts
- .filter((c) => c.kind !== 'current_workflow')
- .map((ctx, idx) => (
-
- {ctx.kind === 'past_chat' ? (
-
- )}
-
- {/* Textarea Field with overlay */}
-
- {/* Highlight overlay */}
-
+ {/* Textarea Field */}
+
{/* Bottom Row: Mode Selector + Attach Button + Send Button */}
-
-
-
- {showMentionMenu && (
- <>
-
- {(() => {
- const elements: React.ReactNode[] = []
- const remaining = message
- const contexts = selectedContexts
- if (contexts.length === 0 || !remaining) return remaining
- // Build regex for all labels
- const labels = contexts.map((c) => c.label).filter(Boolean)
- const pattern = new RegExp(
- `@(${labels.map((l) => l.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('|')})`,
- 'g'
- )
- let lastIndex = 0
- let match: RegExpExecArray | null
- while ((match = pattern.exec(remaining)) !== null) {
- const i = match.index
- const before = remaining.slice(lastIndex, i)
- if (before) elements.push(before)
- const mentionText = match[0]
- const mentionLabel = match[1]
- elements.push(
-
- {mentionText}
-
- )
- lastIndex = i + mentionText.length
- }
- const tail = remaining.slice(lastIndex)
- if (tail) elements.push(tail)
- return elements
- })()}
-
-
- {openSubmenuFor ? (
- <>
-
-
- )}
-
- {openSubmenuFor === 'Chats'
- ? 'Chats'
- : openSubmenuFor === 'Workflows'
- ? 'All workflows'
- : openSubmenuFor === 'Knowledge'
- ? 'Knowledge Bases'
- : openSubmenuFor === 'Blocks'
- ? 'Blocks'
- : openSubmenuFor === 'Workflow Blocks'
- ? 'Workflow Blocks'
- : openSubmenuFor === 'Templates'
- ? 'Templates'
- : 'Logs'}
-
-
- {isSubmenu('Chats') && (
- <>
- {isLoadingPastChats ? (
-
-
- ) : (
- <>
- {(() => {
- const q = (
- getActiveMentionQueryAtPosition(getCaretPos())?.query || ''
- ).toLowerCase()
- const filtered = mentionOptions.filter((label) =>
- label.toLowerCase().includes(q)
- )
- if (q.length > 0 && filtered.length === 0) {
- // Aggregated search view
- const aggregated = [
- ...workflowBlocks
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({
- type: 'Workflow Blocks' as const,
- id: b.id,
- value: b,
- onClick: () => insertWorkflowBlockMention(b),
- })),
- ...workflows
- .filter((w) =>
- (w.name || 'Untitled Workflow').toLowerCase().includes(q)
- )
- .map((w) => ({
- type: 'Workflows' as const,
- id: w.id,
- value: w,
- onClick: () => insertWorkflowMention(w),
- })),
- ...blocksList
- .filter((b) => (b.name || b.id).toLowerCase().includes(q))
- .map((b) => ({
- type: 'Blocks' as const,
- id: b.id,
- value: b,
- onClick: () => insertBlockMention(b),
- })),
- ...knowledgeBases
- .filter((k) => (k.name || 'Untitled').toLowerCase().includes(q))
- .map((k) => ({
- type: 'Knowledge' as const,
- id: k.id,
- value: k,
- onClick: () => insertKnowledgeMention(k),
- })),
- ...templatesList
- .filter((t) =>
- (t.name || 'Untitled Template').toLowerCase().includes(q)
- )
- .map((t) => ({
- type: 'Templates' as const,
- id: t.id,
- value: t,
- onClick: () => insertTemplateMention(t),
- })),
- ...pastChats
- .filter((c) => (c.title || 'Untitled Chat').toLowerCase().includes(q))
- .map((c) => ({
- type: 'Chats' as const,
- id: c.id,
- value: c,
- onClick: () => insertPastChatMention(c),
- })),
- ...logsList
- .filter((l) =>
- (l.workflowName || 'Untitled Workflow').toLowerCase().includes(q)
- )
- .map((l) => ({
- type: 'Logs' as const,
- id: l.id,
- value: l,
- onClick: () => insertLogMention(l),
- })),
- ]
- return (
-
- Loading...
-
- ) : pastChats.length === 0 ? (
-
- No past chats
-
- ) : (
- pastChats
- .filter((c) =>
- (c.title || 'Untitled Chat')
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((chat, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertPastChatMention(chat)
- setSubmenuQueryStart(null)
- }}
- >
-
- ))
- )}
-
- )}
- {isSubmenu('Workflows') && (
- <>
- {isLoadingWorkflows ? (
-
-
-
- {chat.title || 'Untitled Chat'}
-
-
- Loading...
-
- ) : workflows.length === 0 ? (
-
- No workflows
-
- ) : (
- workflows
- .filter((w) =>
- (w.name || 'Untitled Workflow')
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((wf, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertWorkflowMention(wf)
- setSubmenuQueryStart(null)
- }}
- >
-
-
- {wf.name || 'Untitled Workflow'}
-
-
- ))
- )}
-
- )}
- {isSubmenu('Knowledge') && (
- <>
- {isLoadingKnowledge ? (
-
- Loading...
-
- ) : knowledgeBases.length === 0 ? (
-
- No knowledge bases
-
- ) : (
- knowledgeBases
- .filter((k) =>
- (k.name || 'Untitled')
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((kb, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertKnowledgeMention(kb)
- setSubmenuQueryStart(null)
- }}
- >
-
- ))
- )}
-
- )}
- {isSubmenu('Blocks') && (
- <>
- {isLoadingBlocks ? (
-
- Loading...
-
- ) : blocksList.length === 0 ? (
-
- No blocks found
-
- ) : (
- blocksList
- .filter((b) =>
- (b.name || b.id)
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((blk, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertBlockMention(blk)
- setSubmenuQueryStart(null)
- }}
- >
-
- ))
- )}
-
- )}
- {isSubmenu('Workflow Blocks') && (
- <>
- {isLoadingWorkflowBlocks ? (
-
- {blk.iconComponent && (
-
- {blk.name || blk.id}
-
- Loading...
-
- ) : workflowBlocks.length === 0 ? (
-
- No blocks in this workflow
-
- ) : (
- workflowBlocks
- .filter((b) =>
- (b.name || b.id)
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((blk, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertWorkflowBlockMention(blk)
- setSubmenuQueryStart(null)
- }}
- >
-
- ))
- )}
-
- )}
- {isSubmenu('Templates') && (
- <>
- {isLoadingTemplates ? (
-
- {blk.iconComponent && (
-
- {blk.name || blk.id}
-
- Loading...
-
- ) : templatesList.length === 0 ? (
-
- No templates found
-
- ) : (
- templatesList
- .filter((t) =>
- (t.name || 'Untitled Template')
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((tpl, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertTemplateMention(tpl)
- setSubmenuQueryStart(null)
- }}
- >
-
- ))
- )}
-
- )}
- {isSubmenu('Logs') && (
- <>
- {isLoadingLogs ? (
-
- ★
-
- {tpl.name}
-
- {tpl.stars}
-
-
- Loading...
-
- ) : logsList.length === 0 ? (
-
- No executions found
-
- ) : (
- logsList
- .filter((l) =>
- [l.workflowName, l.trigger || '']
- .join(' ')
- .toLowerCase()
- .includes(getSubmenuQuery().toLowerCase())
- )
- .map((log, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => {
- insertLogMention(log)
- setSubmenuQueryStart(null)
- }}
- >
- {log.level === 'error' ? (
-
- ))
- )}
-
- )}
-
- {aggregated.length === 0 ? (
-
- )
- }
- // Filtered top-level options view
- return (
-
- No matches
-
- ) : (
- aggregated.map((item, idx) => (
- setSubmenuActiveIndex(idx)}
- onClick={() => item.onClick()}
- >
- {item.type === 'Chats' ? (
- <>
-
- ))
- )}
-
-
-
- {(item.value as any).title || 'Untitled Chat'}
-
-
- ) : item.type === 'Workflows' ? (
- <>
-
-
- {(item.value as any).name || 'Untitled Workflow'}
-
-
- ) : item.type === 'Knowledge' ? (
- <>
-
- {(() => {
- const Icon = (item.value as any).iconComponent
- return Icon ? (
-
-
- {(item.value as any).name || (item.value as any).id}
-
-
- ) : item.type === 'Workflow Blocks' ? (
- <>
-
- {(() => {
- const Icon = (item.value as any).iconComponent
- return Icon ? (
-
-
- {(item.value as any).name || (item.value as any).id}
-
-
- ) : item.type === 'Logs' ? (
- <>
- {(() => {
- const v = item.value as any
- return v.level === 'error' ? (
-
- ★
-
-
- {(item.value as any).name || 'Untitled Template'}
-
- {typeof (item.value as any).stars === 'number' && (
-
- {(item.value as any).stars}
-
- )}
-
- )}
-
- {filtered.map((label, idx) => (
-
- )
- })()}
-
- )}
- {
- setInAggregated(false)
- setMentionActiveIndex(idx)
- }}
- onClick={() => {
- if (label === 'Chats') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Chats')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensurePastChatsLoaded()
- } else if (label === 'Workflows') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Workflows')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureWorkflowsLoaded()
- } else if (label === 'Knowledge') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Knowledge')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureKnowledgeLoaded()
- } else if (label === 'Blocks') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Blocks')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureBlocksLoaded()
- } else if (label === 'Workflow Blocks') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Workflow Blocks')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureWorkflowBlocksLoaded()
- } else if (label === 'Docs') {
- // No submenu; insert immediately
- insertDocsMention()
- } else if (label === 'Templates') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Templates')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureTemplatesLoaded()
- } else if (label === 'Logs') {
- resetActiveMentionQuery()
- setOpenSubmenuFor('Logs')
- setSubmenuActiveIndex(0)
- setSubmenuQueryStart(getCaretPos())
- void ensureLogsLoaded()
- }
- }}
- >
-
- ))}
-
- {(() => {
- const aq = (
- getActiveMentionQueryAtPosition(getCaretPos())?.query || ''
- ).toLowerCase()
- const filteredLen = mentionOptions.filter((label) =>
- label.toLowerCase().includes(aq)
- ).length
- const aggregated = [
- ...workflowBlocks
- .filter((b) => (b.name || b.id).toLowerCase().includes(aq))
- .map((b) => ({ type: 'Workflow Blocks' as const, value: b })),
- ...workflows
- .filter((w) =>
- (w.name || 'Untitled Workflow').toLowerCase().includes(aq)
- )
- .map((w) => ({ type: 'Workflows' as const, value: w })),
- ...blocksList
- .filter((b) => (b.name || b.id).toLowerCase().includes(aq))
- .map((b) => ({ type: 'Blocks' as const, value: b })),
- ...knowledgeBases
- .filter((k) => (k.name || 'Untitled').toLowerCase().includes(aq))
- .map((k) => ({ type: 'Knowledge' as const, value: k })),
- ...templatesList
- .filter((t) =>
- (t.name || 'Untitled Template').toLowerCase().includes(aq)
- )
- .map((t) => ({ type: 'Templates' as const, value: t })),
- ...pastChats
- .filter((c) =>
- (c.title || 'Untitled Chat').toLowerCase().includes(aq)
- )
- .map((c) => ({ type: 'Chats' as const, value: c })),
- ...logsList
- .filter((l) =>
- (l.workflowName || 'Untitled Workflow')
- .toLowerCase()
- .includes(aq)
- )
- .map((l) => ({ type: 'Logs' as const, value: l })),
- ]
- if (!aq || aq.length === 0 || aggregated.length === 0) return null
- return (
- <>
-
-
- {label === 'Chats' ? (
-
- {label !== 'Docs' && (
-
- Matches
-
- {aggregated.map((item, idx) => (
- {
- setInAggregated(true)
- setSubmenuActiveIndex(idx)
- }}
- onClick={() => {
- if (item.type === 'Chats')
- insertPastChatMention(item.value as any)
- else if (item.type === 'Workflows')
- insertWorkflowMention(item.value as any)
- else if (item.type === 'Knowledge')
- insertKnowledgeMention(item.value as any)
- else if (item.type === 'Blocks')
- insertBlockMention(item.value as any)
- else if ((item as any).type === 'Workflow Blocks')
- insertWorkflowBlockMention(item.value as any)
- else if (item.type === 'Templates')
- insertTemplateMention(item.value as any)
- else if (item.type === 'Logs')
- insertLogMention(item.value as any)
- }}
- >
- {item.type === 'Chats' ? (
- <>
-
- ))}
-
- )
- })()}
-
-
-
- {(item.value as any).title || 'Untitled Chat'}
-
-
- ) : item.type === 'Workflows' ? (
- <>
-
-
- {(item.value as any).name || 'Untitled Workflow'}
-
-
- ) : item.type === 'Knowledge' ? (
- <>
-
- {(() => {
- const Icon = (item.value as any).iconComponent
- return Icon ? (
-
-
- {(item.value as any).name || (item.value as any).id}
-
-
- ) : item.type === 'Workflow Blocks' ? (
- <>
-
- {(() => {
- const Icon = (item.value as any).iconComponent
- return Icon ? (
-
-
- {(item.value as any).name || (item.value as any).id}
-
-
- ) : item.type === 'Logs' ? (
- <>
- {(() => {
- const v = item.value as any
- return v.level === 'error' ? (
-
- ★
-
-
- {(item.value as any).name || 'Untitled Template'}
-
- {typeof (item.value as any).stars === 'number' && (
-
- {(item.value as any).stars}
-
- )}
-
- )}
-
@@ -3193,7 +719,7 @@ const UserInput = forwardRef(
- (
}
-
{/* Right side: Attach Button + Send Button */}
@@ -3280,7 +796,7 @@ const UserInput = forwardRef
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index 9bde88bd96..0c1134ec1a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -132,7 +132,7 @@ export function WandPromptBar({
variant='ghost'
size='icon'
onClick={() => onSubmit(promptValue)}
- className='h-8 w-8 rounded-full text-muted-foreground hover:bg-primary/10 hover:text-foreground'
+ className='h-8 w-8 rounded-full text-primary hover:bg-primary/10 hover:text-primary'
disabled={isLoading || isStreaming || !promptValue.trim()}
>
- {/* Header */}
- ('')
const [isHistoryDropdownOpen, setIsHistoryDropdownOpen] = useState(false)
@@ -70,7 +67,7 @@ export function Panel() {
try {
await deleteChat(chatId)
} catch (error) {
- logger.error('Error deleting chat:', error)
+ console.error('Error deleting chat:', error)
}
},
[deleteChat]
@@ -104,7 +101,7 @@ export function Panel() {
lastLoadedWorkflowRef.current = activeWorkflowId
}
} catch (error) {
- logger.error('Failed to load copilot data:', error)
+ console.error('Failed to load copilot data:', error)
}
},
[
@@ -120,10 +117,8 @@ export function Panel() {
// Handle new chat creation with data loading
const handleNewChat = useCallback(async () => {
- // Instantly clear to a fresh chat locally
+ await ensureCopilotDataLoaded()
copilotRef.current?.createNewChat()
- // Ensure copilot data is loaded in the background (do not await)
- ensureCopilotDataLoaded().catch(() => {})
}, [ensureCopilotDataLoaded])
// Handle history dropdown opening - use smart caching instead of force refresh
@@ -139,14 +134,14 @@ export function Panel() {
if (!areChatsFresh(activeWorkflowId)) {
// Don't await - let it load in background while dropdown is already open
ensureCopilotDataLoaded(false).catch((error) => {
- logger.error('Failed to load chat history:', error)
+ console.error('Failed to load chat history:', error)
})
}
}
// If streaming, just log that we're showing cached data
if (open && isSendingMessage) {
- logger.info('Chat history opened during stream - showing cached data only')
+ console.log('Chat history opened during stream - showing cached data only')
}
},
[ensureCopilotDataLoaded, activeWorkflowId, areChatsFresh, isSendingMessage]
@@ -283,7 +278,7 @@ export function Panel() {
// This is a real workflow change, not just a tab switch
if (copilotWorkflowId !== activeWorkflowId || !copilotWorkflowId) {
ensureCopilotDataLoaded().catch((error) => {
- logger.error('Failed to auto-load copilot data on workflow change:', error)
+ console.error('Failed to auto-load copilot data on workflow change:', error)
})
}
}
@@ -392,19 +387,15 @@ export function Panel() {
open={isHistoryDropdownOpen}
onOpenChange={handleHistoryDropdownOpen}
>
-
-
-
-
-
-
- Chat history
-
+
+
+
Clear {activeTab}
)}
-
-
-
-
- Close panel
-
+
-
-
- {/* Unified capability cards */}
- {subtitle}
-
- {capabilities.map(({ title, question, Icon }, idx) => (
-
- ))}
-
-
- {/* Tips */}
-
- (({ panelWidth }, ref
// Handle message submission
const handleSubmit = useCallback(
- async (query: string, fileAttachments?: MessageFileAttachment[], contexts?: any[]) => {
+ async (query: string, fileAttachments?: MessageFileAttachment[]) => {
if (!query || isSendingMessage || !activeWorkflowId) return
// Clear todos when sending a new message
@@ -356,7 +356,7 @@ export const Copilot = forwardRef(({ panelWidth }, ref
}
try {
- await sendMessage(query, { stream: true, fileAttachments, contexts })
+ await sendMessage(query, { stream: true, fileAttachments })
logger.info(
'Sent message:',
query,
@@ -417,9 +417,9 @@ export const Copilot = forwardRef(({ panelWidth }, ref
onClick={scrollToBottom}
size='sm'
variant='outline'
- className='flex items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1 shadow-lg transition-all hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700'
+ className='flex items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1 shadow-lg transition-all hover:bg-gray-50'
>
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/variables/variables.tsx
index 3540ad99ab..9714fc45f0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/variables/variables.tsx
@@ -16,18 +16,16 @@ import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism.css'
import Editor from 'react-simple-code-editor'
+import { Button } from '@/components/ui/button'
import {
- Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- Input,
- ScrollArea,
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/components/ui'
+} from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { createLogger } from '@/lib/logs/console/logger'
import { validateName } from '@/lib/utils'
import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
@@ -38,8 +36,15 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
const logger = createLogger('Variables')
export function Variables() {
- const { activeWorkflowId } = useWorkflowRegistry()
- const { getVariablesByWorkflowId } = useVariablesStore()
+ const { activeWorkflowId, workflows } = useWorkflowRegistry()
+ const {
+ variables: storeVariables,
+ addVariable,
+ updateVariable,
+ deleteVariable,
+ duplicateVariable,
+ getVariablesByWorkflowId,
+ } = useVariablesStore()
const {
collaborativeUpdateVariable,
collaborativeAddVariable,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 6c26be1b9b..90dad4afc2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -9,7 +9,6 @@ import {
} from '@/components/ui/dropdown-menu'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { createLogger } from '@/lib/logs/console/logger'
import { useCopilotStore } from '@/stores/copilot/store'
import { useChatStore } from '@/stores/panel/chat/store'
import { useConsoleStore } from '@/stores/panel/console/store'
@@ -20,8 +19,6 @@ import { Console } from './components/console/console'
import { Copilot } from './components/copilot/copilot'
import { Variables } from './components/variables/variables'
-const logger = createLogger('Panel')
-
export function Panel() {
const [chatMessage, setChatMessage] = useState- Tip: Use @ to reference chats, - workflows, knowledge, blocks, or templates +
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 8bfa7a0e6e..0e5332efc4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -346,7 +346,7 @@ export const Copilot = forwardRef
+
+
+ How can I help you today?
++ {mode === 'ask' + ? 'Ask me anything about your workflows, available tools, or how to get started.' + : 'I can help you build, edit, and optimize workflows. What would you like to do?'}
-Shift+Enter for newline
+
+
Try asking:
+
+ {exampleQuestions.map((question, index) => (
+
+ ))}
+
{lineNumber}
@@ -379,7 +362,7 @@ IMPORTANT FORMATTING RULES:
if (numbers.length === 0) {
numbers.push(
-
+
1
)
@@ -398,21 +381,21 @@ IMPORTANT FORMATTING RULES:
onSubmit={(prompt: string) => generateCodeStream({ prompt })}
onCancel={isAiStreaming ? cancelGeneration : hidePromptInline}
onChange={updatePromptValue}
- placeholder={dynamicWandConfig?.placeholder || aiPromptPlaceholder}
+ placeholder={wandConfig?.placeholder || aiPromptPlaceholder}
/>
e.preventDefault()}
onDrop={handleDrop}
>
- {wandConfig?.enabled && !isCollapsed && !isAiStreaming && !isPreview && (
+ {!isCollapsed && !isAiStreaming && !isPreview && (