Merge branch 'fix/select' of github.com:simstudioai/sim into fix/select

Author: icecrasher321

apps/sim/app/api/webhooks/route.ts

@@ -744,7 +744,7 @@ export async function POST(request: NextRequest) {
     if (savedWebhook && provider === 'grain') {
       logger.info(`[${requestId}] Grain provider detected. Creating Grain webhook subscription.`)
       try {
-        const grainHookId = await createGrainWebhookSubscription(
+        const grainResult = await createGrainWebhookSubscription(
           request,
           {
             id: savedWebhook.id,
@@ -754,11 +754,12 @@ export async function POST(request: NextRequest) {
           requestId
         )
 
-        if (grainHookId) {
-          // Update the webhook record with the external Grain hook ID
+        if (grainResult) {
+          // Update the webhook record with the external Grain hook ID and event types for filtering
           const updatedConfig = {
             ...(savedWebhook.providerConfig as Record<string, any>),
-            externalId: grainHookId,
+            externalId: grainResult.id,
+            eventTypes: grainResult.eventTypes,
           }
           await db
             .update(webhook)
@@ -770,7 +771,8 @@ export async function POST(request: NextRequest) {
 
           savedWebhook.providerConfig = updatedConfig
           logger.info(`[${requestId}] Successfully created Grain webhook`, {
-            grainHookId,
+            grainHookId: grainResult.id,
+            eventTypes: grainResult.eventTypes,
             webhookId: savedWebhook.id,
           })
         }
@@ -1176,10 +1178,10 @@ async function createGrainWebhookSubscription(
   request: NextRequest,
   webhookData: any,
   requestId: string
-): Promise<string | undefined> {
+): Promise<{ id: string; eventTypes: string[] } | undefined> {
   try {
     const { path, providerConfig } = webhookData
-    const { apiKey, includeHighlights, includeParticipants, includeAiSummary } =
+    const { apiKey, triggerId, includeHighlights, includeParticipants, includeAiSummary } =
       providerConfig || {}
 
     if (!apiKey) {
@@ -1191,12 +1193,53 @@ async function createGrainWebhookSubscription(
       )
     }
 
+    // Map trigger IDs to Grain API hook_type (only 2 options: recording_added, upload_status)
+    const hookTypeMap: Record<string, string> = {
+      grain_webhook: 'recording_added',
+      grain_recording_created: 'recording_added',
+      grain_recording_updated: 'recording_added',
+      grain_highlight_created: 'recording_added',
+      grain_highlight_updated: 'recording_added',
+      grain_story_created: 'recording_added',
+      grain_upload_status: 'upload_status',
+    }
+
+    const eventTypeMap: Record<string, string[]> = {
+      grain_webhook: [],
+      grain_recording_created: ['recording_added'],
+      grain_recording_updated: ['recording_updated'],
+      grain_highlight_created: ['highlight_created'],
+      grain_highlight_updated: ['highlight_updated'],
+      grain_story_created: ['story_created'],
+      grain_upload_status: ['upload_status'],
+    }
+
+    const hookType = hookTypeMap[triggerId] ?? 'recording_added'
+    const eventTypes = eventTypeMap[triggerId] ?? []
+
+    if (!hookTypeMap[triggerId]) {
+      logger.warn(
+        `[${requestId}] Unknown triggerId for Grain: ${triggerId}, defaulting to recording_added`,
+        {
+          webhookId: webhookData.id,
+        }
+      )
+    }
+
+    logger.info(`[${requestId}] Creating Grain webhook`, {
+      triggerId,
+      hookType,
+      eventTypes,
+      webhookId: webhookData.id,
+    })
+
     const notificationUrl = `${getBaseUrl()}/api/webhooks/trigger/${path}`
 
     const grainApiUrl = 'https://api.grain.com/_/public-api/v2/hooks/create'
 
     const requestBody: Record<string, any> = {
       hook_url: notificationUrl,
+      hook_type: hookType,
     }
 
     // Build include object based on configuration
@@ -1226,8 +1269,10 @@ async function createGrainWebhookSubscription(
 
     const responseBody = await grainResponse.json()
 
-    if (!grainResponse.ok || responseBody.error) {
+    if (!grainResponse.ok || responseBody.error || responseBody.errors) {
+      logger.warn('[App] Grain response body:', responseBody)
       const errorMessage =
+        responseBody.errors?.detail ||
         responseBody.error?.message ||
         responseBody.error ||
         responseBody.message ||
@@ -1255,10 +1300,11 @@ async function createGrainWebhookSubscription(
       `[${requestId}] Successfully created webhook in Grain for webhook ${webhookData.id}.`,
       {
         grainWebhookId: responseBody.id,
+        eventTypes,
       }
     )
 
-    return responseBody.id
+    return { id: responseBody.id, eventTypes }
   } catch (error: any) {
     logger.error(
       `[${requestId}] Exception during Grain webhook creation for webhook ${webhookData.id}.`,

apps/sim/app/chat/[identifier]/chat.tsx

@@ -175,7 +175,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       const distanceFromBottom = scrollHeight - scrollTop - clientHeight
       setShowScrollButton(distanceFromBottom > 100)
 
-      // Track if user is manually scrolling during streaming
       if (isStreamingResponse && !isUserScrollingRef.current) {
         setUserHasScrolled(true)
       }
@@ -191,13 +190,10 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     return () => container.removeEventListener('scroll', handleScroll)
   }, [handleScroll])
 
-  // Reset user scroll tracking when streaming starts
   useEffect(() => {
     if (isStreamingResponse) {
-      // Reset userHasScrolled when streaming starts
       setUserHasScrolled(false)
 
-      // Give a small delay to distinguish between programmatic scroll and user scroll
       isUserScrollingRef.current = true
       setTimeout(() => {
         isUserScrollingRef.current = false
@@ -215,7 +211,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       })
 
       if (!response.ok) {
-        // Check if auth is required
         if (response.status === 401) {
           const errorData = await response.json()
 
@@ -236,7 +231,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         throw new Error(`Failed to load chat configuration: ${response.status}`)
       }
 
-      // Reset auth required state when authentication is successful
       setAuthRequired(null)
 
       const data = await response.json()
@@ -260,7 +254,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }
 
-  // Fetch chat config on mount and generate new conversation ID
   useEffect(() => {
     fetchChatConfig()
     setConversationId(uuidv4())
@@ -285,7 +278,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }, 800)
   }
 
-  // Handle sending a message
   const handleSendMessage = async (
     messageParam?: string,
     isVoiceInput = false,
@@ -308,7 +300,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       filesCount: files?.length,
     })
 
-    // Reset userHasScrolled when sending a new message
     setUserHasScrolled(false)
 
     const userMessage: ChatMessage = {
@@ -325,24 +316,20 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       })),
     }
 
-    // Add the user's message to the chat
     setMessages((prev) => [...prev, userMessage])
     setInputValue('')
     setIsLoading(true)
 
-    // Scroll to show only the user's message and loading indicator
     setTimeout(() => {
       scrollToMessage(userMessage.id, true)
     }, 100)
 
-    // Create abort controller for request cancellation
     const abortController = new AbortController()
     const timeoutId = setTimeout(() => {
       abortController.abort()
     }, CHAT_REQUEST_TIMEOUT_MS)
 
     try {
-      // Send structured payload to maintain chat context
       const payload: any = {
         input:
           typeof userMessage.content === 'string'
@@ -351,7 +338,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         conversationId,
       }
 
-      // Add files if present (convert to base64 for JSON transmission)
       if (files && files.length > 0) {
         payload.files = await Promise.all(
           files.map(async (file) => ({
@@ -379,7 +365,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         signal: abortController.signal,
       })
 
-      // Clear timeout since request succeeded
       clearTimeout(timeoutId)
 
       if (!response.ok) {
@@ -392,7 +377,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         throw new Error('Response body is missing')
       }
 
-      // Use the streaming hook with audio support
       const shouldPlayAudio = isVoiceInput || isVoiceFirstMode
       const audioHandler = shouldPlayAudio
         ? createAudioStreamHandler(
@@ -421,7 +405,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         }
       )
     } catch (error: any) {
-      // Clear timeout in case of error
       clearTimeout(timeoutId)
 
       if (error.name === 'AbortError') {
@@ -442,7 +425,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }
 
-  // Stop audio when component unmounts or when streaming is stopped
   useEffect(() => {
     return () => {
       stopAudio()
@@ -452,28 +434,23 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }, [stopAudio])
 
-  // Voice interruption - stop audio when user starts speaking
   const handleVoiceInterruption = useCallback(() => {
     stopAudio()
 
-    // Stop any ongoing streaming response
     if (isStreamingResponse) {
       stopStreaming(setMessages)
     }
   }, [isStreamingResponse, stopStreaming, setMessages, stopAudio])
 
-  // Handle voice mode activation
   const handleVoiceStart = useCallback(() => {
     setIsVoiceFirstMode(true)
   }, [])
 
-  // Handle exiting voice mode
   const handleExitVoiceMode = useCallback(() => {
     setIsVoiceFirstMode(false)
-    stopAudio() // Stop any playing audio when exiting
+    stopAudio()
   }, [stopAudio])
 
-  // Handle voice transcript from voice-first interface
   const handleVoiceTranscript = useCallback(
     (transcript: string) => {
       logger.info('Received voice transcript:', transcript)
@@ -482,14 +459,11 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     [handleSendMessage]
   )
 
-  // If error, show error message using the extracted component
   if (error) {
     return <ChatErrorState error={error} starCount={starCount} />
   }
 
-  // If authentication is required, use the extracted components
   if (authRequired) {
-    // Get title and description from the URL params or use defaults
     const title = new URLSearchParams(window.location.search).get('title') || 'chat'
     const primaryColor =
       new URLSearchParams(window.location.search).get('color') || 'var(--brand-primary-hover-hex)'
@@ -526,12 +500,10 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }
 
-  // Loading state while fetching config using the extracted component
   if (!chatConfig) {
     return <ChatLoadingState />
   }
 
-  // Voice-first mode interface
   if (isVoiceFirstMode) {
     return (
       <VoiceInterface
@@ -551,7 +523,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     )
   }
 
-  // Standard text-based chat interface
   return (
     <div className='fixed inset-0 z-[100] flex flex-col bg-white text-foreground'>
       {/* Header component */}

apps/sim/app/templates/[id]/template.tsx

@@ -36,7 +36,7 @@ import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import type { CredentialRequirement } from '@/lib/workflows/credentials/credential-extractor'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate, useTemplate } from '@/hooks/queries/templates'
 

apps/sim/app/templates/components/template-card.tsx

@@ -4,7 +4,7 @@ import { Star, User } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate } from '@/hooks/queries/templates'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'

apps/sim/app/workspace/[workspaceId]/logs/components/index.ts

@@ -1,7 +1,7 @@
 export { Dashboard } from './dashboard'
 export { LogDetails } from './log-details'
+export { ExecutionSnapshot } from './log-details/components/execution-snapshot'
 export { FileCards } from './log-details/components/file-download'
-export { FrozenCanvas } from './log-details/components/frozen-canvas'
 export { TraceSpans } from './log-details/components/trace-spans'
 export { LogRowContextMenu } from './log-row-context-menu'
 export { LogsList } from './logs-list'