mirror of
https://github.com/simstudioai/sim.git
synced 2026-04-06 03:00:16 -04:00
* feat(home): resizable chat/resource panel divider * fix(home): address PR review comments - Remove aria-hidden from resize handle outer div so separator role is visible to AT - Add viewport-resize re-clamping in useMothershipResize to prevent panel exceeding max % after browser window narrows - Change default MothershipView width from 60% to 50% * refactor(home): eradicate useEffect anti-patterns per you-might-not-need-an-effect - use-chat: remove messageQueue→ref sync Effect; inline assignment like other refs - use-chat: replace activeResourceId selection Effect with useMemo (derived value, avoids extra re-render cycle; activeResourceIdRef now tracks effective value for API payloads) - use-chat: replace 3x useLayoutEffect ref-sync (processSSEStream, finalize, sendMessage) with direct render-phase assignment — consistent with existing resourcesRef pattern - user-input: fold onEditValueConsumed callback into existing render-phase guard; remove Effect - home: move isResourceAnimatingIn 400ms timer into expandResource/handleResourceEvent event handlers where setIsResourceAnimatingIn(true) is called; remove reactive Effect watcher * fix(home): revert default width to 60%, reduce max resize to 63% * improvement(react): replace useEffect anti-patterns with better React primitives * improvement(react): replace useEffect anti-patterns with better React primitives * improvement(home): use pointer events for resize handle (touch + mouse support) * fix(autosave): store idle-reset timer ref to prevent status corruption on rapid saves * fix(home): move onEditValueConsumed call out of render phase into useEffect * fix(home): add pointercancel handler; fix(settings): sync name on profile refetch * fix(home): restore cleanupRef assignment dropped during AbortController refactor
197 lines
6.3 KiB
TypeScript
197 lines
6.3 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef } from 'react'
|
|
import { createLogger } from '@sim/logger'
|
|
import { useParams } from 'next/navigation'
|
|
import { getBaseUrl } from '@/lib/core/utils/urls'
|
|
import { getBlock } from '@/blocks'
|
|
import { useWebhookQuery } from '@/hooks/queries/webhooks'
|
|
import { populateTriggerFieldsFromConfig } from '@/hooks/use-trigger-config-aggregation'
|
|
import { useSubBlockStore } from '@/stores/workflows/subblock/store'
|
|
import { useWorkflowStore } from '@/stores/workflows/workflow/store'
|
|
import { isTriggerValid } from '@/triggers'
|
|
|
|
const logger = createLogger('useWebhookManagement')
|
|
|
|
interface UseWebhookManagementProps {
|
|
blockId: string
|
|
triggerId?: string
|
|
isPreview?: boolean
|
|
useWebhookUrl?: boolean
|
|
}
|
|
|
|
interface WebhookManagementState {
|
|
webhookUrl: string
|
|
webhookPath: string
|
|
webhookId: string | null
|
|
isLoading: boolean
|
|
}
|
|
|
|
/**
|
|
* Resolves the effective triggerId from various sources in order of priority
|
|
*/
|
|
function resolveEffectiveTriggerId(
|
|
blockId: string,
|
|
triggerId: string | undefined,
|
|
webhook?: { providerConfig?: { triggerId?: string } }
|
|
): string | undefined {
|
|
if (triggerId && isTriggerValid(triggerId)) {
|
|
return triggerId
|
|
}
|
|
|
|
const selectedTriggerId = useSubBlockStore.getState().getValue(blockId, 'selectedTriggerId')
|
|
if (typeof selectedTriggerId === 'string' && isTriggerValid(selectedTriggerId)) {
|
|
return selectedTriggerId
|
|
}
|
|
|
|
const storedTriggerId = useSubBlockStore.getState().getValue(blockId, 'triggerId')
|
|
if (typeof storedTriggerId === 'string' && isTriggerValid(storedTriggerId)) {
|
|
return storedTriggerId
|
|
}
|
|
|
|
if (webhook?.providerConfig?.triggerId && typeof webhook.providerConfig.triggerId === 'string') {
|
|
return webhook.providerConfig.triggerId
|
|
}
|
|
|
|
const workflowState = useWorkflowStore.getState()
|
|
const block = workflowState.blocks?.[blockId]
|
|
if (block) {
|
|
const blockConfig = getBlock(block.type)
|
|
if (blockConfig) {
|
|
if (blockConfig.category === 'triggers') {
|
|
return block.type
|
|
}
|
|
if (block.triggerMode && blockConfig.triggers?.enabled) {
|
|
const selectedTriggerIdValue = block.subBlocks?.selectedTriggerId?.value
|
|
const triggerIdValue = block.subBlocks?.triggerId?.value
|
|
return (
|
|
(typeof selectedTriggerIdValue === 'string' && isTriggerValid(selectedTriggerIdValue)
|
|
? selectedTriggerIdValue
|
|
: undefined) ||
|
|
(typeof triggerIdValue === 'string' && isTriggerValid(triggerIdValue)
|
|
? triggerIdValue
|
|
: undefined) ||
|
|
blockConfig.triggers?.available?.[0]
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
return undefined
|
|
}
|
|
|
|
/**
|
|
* Hook to load webhook info for trigger blocks.
|
|
* Uses React Query for data fetching and syncs results to the sub-block store.
|
|
* Webhook creation/updates are handled by the deploy flow.
|
|
*/
|
|
export function useWebhookManagement({
|
|
blockId,
|
|
triggerId,
|
|
isPreview = false,
|
|
useWebhookUrl = false,
|
|
}: UseWebhookManagementProps): WebhookManagementState {
|
|
const params = useParams()
|
|
const workflowId = params.workflowId as string
|
|
const syncedRef = useRef(false)
|
|
|
|
const webhookId = useSubBlockStore(
|
|
useCallback((state) => state.getValue(blockId, 'webhookId') as string | null, [blockId])
|
|
)
|
|
const webhookPath = useSubBlockStore(
|
|
useCallback((state) => state.getValue(blockId, 'triggerPath') as string | null, [blockId])
|
|
)
|
|
|
|
const webhookUrl = useMemo(() => {
|
|
const baseUrl = getBaseUrl()
|
|
if (!webhookPath) {
|
|
return `${baseUrl}/api/webhooks/trigger/${blockId}`
|
|
}
|
|
return `${baseUrl}/api/webhooks/trigger/${webhookPath}`
|
|
}, [webhookPath, blockId])
|
|
|
|
useEffect(() => {
|
|
if (triggerId && !isPreview) {
|
|
const storedTriggerId = useSubBlockStore.getState().getValue(blockId, 'triggerId')
|
|
if (storedTriggerId !== triggerId) {
|
|
useSubBlockStore.getState().setValue(blockId, 'triggerId', triggerId)
|
|
}
|
|
}
|
|
}, [triggerId, blockId, isPreview])
|
|
|
|
const queryEnabled = useWebhookUrl && !isPreview && Boolean(workflowId && blockId)
|
|
|
|
// Reset sync flag when blockId changes or query becomes disabled (render-phase guard)
|
|
const prevBlockIdRef = useRef(blockId)
|
|
if (blockId !== prevBlockIdRef.current) {
|
|
prevBlockIdRef.current = blockId
|
|
syncedRef.current = false
|
|
}
|
|
if (!queryEnabled) {
|
|
syncedRef.current = false
|
|
}
|
|
|
|
const { data: webhook, isLoading: queryLoading } = useWebhookQuery(
|
|
workflowId,
|
|
blockId,
|
|
queryEnabled
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (!queryEnabled || syncedRef.current) return
|
|
if (webhook === undefined) return
|
|
|
|
if (webhook) {
|
|
syncedRef.current = true
|
|
useSubBlockStore.getState().setValue(blockId, 'webhookId', webhook.id)
|
|
logger.info('Webhook loaded from API', {
|
|
blockId,
|
|
webhookId: webhook.id,
|
|
hasProviderConfig: !!webhook.providerConfig,
|
|
})
|
|
|
|
if (webhook.path) {
|
|
useSubBlockStore.getState().setValue(blockId, 'triggerPath', webhook.path)
|
|
}
|
|
|
|
if (webhook.providerConfig) {
|
|
const effectiveTriggerId = resolveEffectiveTriggerId(blockId, triggerId, webhook)
|
|
|
|
const {
|
|
credentialId: _credId,
|
|
credentialSetId: _credSetId,
|
|
userId: _userId,
|
|
historyId: _historyId,
|
|
lastCheckedTimestamp: _lastChecked,
|
|
setupCompleted: _setupCompleted,
|
|
externalId: _externalId,
|
|
triggerId: _triggerId,
|
|
blockId: _blockId,
|
|
...userConfigurableFields
|
|
} = webhook.providerConfig as Record<string, unknown>
|
|
|
|
useSubBlockStore.getState().setValue(blockId, 'triggerConfig', userConfigurableFields)
|
|
|
|
if (effectiveTriggerId) {
|
|
populateTriggerFieldsFromConfig(blockId, webhook.providerConfig, effectiveTriggerId)
|
|
} else {
|
|
logger.warn('Cannot migrate - triggerId not available', {
|
|
blockId,
|
|
propTriggerId: triggerId,
|
|
providerConfigTriggerId: webhook.providerConfig.triggerId,
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
// Deliberately leave syncedRef.current = false here: when no webhook exists yet
|
|
// (e.g., before deploy), a later refetch may return a real webhook that must be synced.
|
|
useSubBlockStore.getState().setValue(blockId, 'webhookId', null)
|
|
}
|
|
}, [webhook, queryEnabled, blockId, triggerId])
|
|
|
|
return {
|
|
webhookUrl,
|
|
webhookPath: webhookPath || blockId,
|
|
webhookId,
|
|
isLoading: queryLoading,
|
|
}
|
|
}
|