|
| 1 | +import { useCallback, useEffect, useMemo, useRef } from 'react' |
| 2 | +import { createLogger } from '@sim/logger' |
| 3 | +import { useShallow } from 'zustand/react/shallow' |
| 4 | +import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow' |
| 5 | +import { useCodeUndoRedoStore } from '@/stores/undo-redo' |
| 6 | +import { useWorkflowDiffStore } from '@/stores/workflow-diff/store' |
| 7 | +import { useWorkflowRegistry } from '@/stores/workflows/registry/store' |
| 8 | + |
| 9 | +const logger = createLogger('CodeUndoRedo') |
| 10 | + |
| 11 | +interface UseCodeUndoRedoOptions { |
| 12 | + blockId: string |
| 13 | + subBlockId: string |
| 14 | + value: string |
| 15 | + enabled?: boolean |
| 16 | + isReadOnly?: boolean |
| 17 | + isStreaming?: boolean |
| 18 | + debounceMs?: number |
| 19 | +} |
| 20 | + |
| 21 | +export function useCodeUndoRedo({ |
| 22 | + blockId, |
| 23 | + subBlockId, |
| 24 | + value, |
| 25 | + enabled = true, |
| 26 | + isReadOnly = false, |
| 27 | + isStreaming = false, |
| 28 | + debounceMs = 300, |
| 29 | +}: UseCodeUndoRedoOptions) { |
| 30 | + const { collaborativeSetSubblockValue } = useCollaborativeWorkflow() |
| 31 | + const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId) |
| 32 | + const { isShowingDiff, hasActiveDiff } = useWorkflowDiffStore( |
| 33 | + useShallow((state) => ({ |
| 34 | + isShowingDiff: state.isShowingDiff, |
| 35 | + hasActiveDiff: state.hasActiveDiff, |
| 36 | + })) |
| 37 | + ) |
| 38 | + |
| 39 | + const isBaselineView = hasActiveDiff && !isShowingDiff |
| 40 | + const isEnabled = useMemo( |
| 41 | + () => Boolean(enabled && activeWorkflowId && !isReadOnly && !isStreaming && !isBaselineView), |
| 42 | + [enabled, activeWorkflowId, isReadOnly, isStreaming, isBaselineView] |
| 43 | + ) |
| 44 | + |
| 45 | + const lastCommittedValueRef = useRef<string>(value ?? '') |
| 46 | + const pendingBeforeRef = useRef<string | null>(null) |
| 47 | + const pendingAfterRef = useRef<string | null>(null) |
| 48 | + const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null) |
| 49 | + const isApplyingRef = useRef(false) |
| 50 | + |
| 51 | + const clearTimer = useCallback(() => { |
| 52 | + if (timeoutRef.current) { |
| 53 | + clearTimeout(timeoutRef.current) |
| 54 | + timeoutRef.current = null |
| 55 | + } |
| 56 | + }, []) |
| 57 | + |
| 58 | + const resetPending = useCallback(() => { |
| 59 | + pendingBeforeRef.current = null |
| 60 | + pendingAfterRef.current = null |
| 61 | + }, []) |
| 62 | + |
| 63 | + const commitPending = useCallback(() => { |
| 64 | + if (!isEnabled || !activeWorkflowId) { |
| 65 | + clearTimer() |
| 66 | + resetPending() |
| 67 | + return |
| 68 | + } |
| 69 | + |
| 70 | + const before = pendingBeforeRef.current |
| 71 | + const after = pendingAfterRef.current |
| 72 | + if (before === null || after === null) return |
| 73 | + |
| 74 | + if (before === after) { |
| 75 | + lastCommittedValueRef.current = after |
| 76 | + clearTimer() |
| 77 | + resetPending() |
| 78 | + return |
| 79 | + } |
| 80 | + |
| 81 | + useCodeUndoRedoStore.getState().push({ |
| 82 | + id: crypto.randomUUID(), |
| 83 | + createdAt: Date.now(), |
| 84 | + workflowId: activeWorkflowId, |
| 85 | + blockId, |
| 86 | + subBlockId, |
| 87 | + before, |
| 88 | + after, |
| 89 | + }) |
| 90 | + |
| 91 | + lastCommittedValueRef.current = after |
| 92 | + clearTimer() |
| 93 | + resetPending() |
| 94 | + }, [activeWorkflowId, blockId, clearTimer, isEnabled, resetPending, subBlockId]) |
| 95 | + |
| 96 | + const recordChange = useCallback( |
| 97 | + (nextValue: string) => { |
| 98 | + if (!isEnabled || isApplyingRef.current) return |
| 99 | + |
| 100 | + if (pendingBeforeRef.current === null) { |
| 101 | + pendingBeforeRef.current = lastCommittedValueRef.current ?? '' |
| 102 | + } |
| 103 | + |
| 104 | + pendingAfterRef.current = nextValue |
| 105 | + clearTimer() |
| 106 | + timeoutRef.current = setTimeout(commitPending, debounceMs) |
| 107 | + }, |
| 108 | + [clearTimer, commitPending, debounceMs, isEnabled] |
| 109 | + ) |
| 110 | + |
| 111 | + const recordReplace = useCallback( |
| 112 | + (nextValue: string) => { |
| 113 | + if (!isEnabled || isApplyingRef.current || !activeWorkflowId) return |
| 114 | + |
| 115 | + if (pendingBeforeRef.current !== null) { |
| 116 | + commitPending() |
| 117 | + } |
| 118 | + |
| 119 | + const before = lastCommittedValueRef.current ?? '' |
| 120 | + if (before === nextValue) { |
| 121 | + lastCommittedValueRef.current = nextValue |
| 122 | + resetPending() |
| 123 | + return |
| 124 | + } |
| 125 | + |
| 126 | + useCodeUndoRedoStore.getState().push({ |
| 127 | + id: crypto.randomUUID(), |
| 128 | + createdAt: Date.now(), |
| 129 | + workflowId: activeWorkflowId, |
| 130 | + blockId, |
| 131 | + subBlockId, |
| 132 | + before, |
| 133 | + after: nextValue, |
| 134 | + }) |
| 135 | + |
| 136 | + lastCommittedValueRef.current = nextValue |
| 137 | + clearTimer() |
| 138 | + resetPending() |
| 139 | + }, |
| 140 | + [activeWorkflowId, blockId, clearTimer, commitPending, isEnabled, resetPending, subBlockId] |
| 141 | + ) |
| 142 | + |
| 143 | + const clearHistory = useCallback( |
| 144 | + (nextValue?: string) => { |
| 145 | + if (!activeWorkflowId) return |
| 146 | + clearTimer() |
| 147 | + resetPending() |
| 148 | + useCodeUndoRedoStore.getState().clear(activeWorkflowId, blockId, subBlockId) |
| 149 | + if (nextValue !== undefined) { |
| 150 | + lastCommittedValueRef.current = nextValue |
| 151 | + } |
| 152 | + }, |
| 153 | + [activeWorkflowId, blockId, clearTimer, resetPending, subBlockId] |
| 154 | + ) |
| 155 | + |
| 156 | + const flushPending = useCallback(() => { |
| 157 | + if (!pendingBeforeRef.current) return |
| 158 | + clearTimer() |
| 159 | + commitPending() |
| 160 | + }, [clearTimer, commitPending]) |
| 161 | + |
| 162 | + const startSession = useCallback( |
| 163 | + (currentValue: string) => { |
| 164 | + clearTimer() |
| 165 | + resetPending() |
| 166 | + lastCommittedValueRef.current = currentValue ?? '' |
| 167 | + }, |
| 168 | + [clearTimer, resetPending] |
| 169 | + ) |
| 170 | + |
| 171 | + const applyValue = useCallback( |
| 172 | + (nextValue: string) => { |
| 173 | + if (!isEnabled) return |
| 174 | + isApplyingRef.current = true |
| 175 | + try { |
| 176 | + collaborativeSetSubblockValue(blockId, subBlockId, nextValue) |
| 177 | + } finally { |
| 178 | + isApplyingRef.current = false |
| 179 | + } |
| 180 | + lastCommittedValueRef.current = nextValue |
| 181 | + clearTimer() |
| 182 | + resetPending() |
| 183 | + }, |
| 184 | + [blockId, clearTimer, collaborativeSetSubblockValue, isEnabled, resetPending, subBlockId] |
| 185 | + ) |
| 186 | + |
| 187 | + const undo = useCallback(() => { |
| 188 | + if (!activeWorkflowId || !isEnabled) return |
| 189 | + const entry = useCodeUndoRedoStore.getState().undo(activeWorkflowId, blockId, subBlockId) |
| 190 | + if (!entry) return |
| 191 | + logger.debug('Undo code edit', { blockId, subBlockId }) |
| 192 | + applyValue(entry.before) |
| 193 | + }, [activeWorkflowId, applyValue, blockId, isEnabled, subBlockId]) |
| 194 | + |
| 195 | + const redo = useCallback(() => { |
| 196 | + if (!activeWorkflowId || !isEnabled) return |
| 197 | + const entry = useCodeUndoRedoStore.getState().redo(activeWorkflowId, blockId, subBlockId) |
| 198 | + if (!entry) return |
| 199 | + logger.debug('Redo code edit', { blockId, subBlockId }) |
| 200 | + applyValue(entry.after) |
| 201 | + }, [activeWorkflowId, applyValue, blockId, isEnabled, subBlockId]) |
| 202 | + |
| 203 | + useEffect(() => { |
| 204 | + if (!pendingBeforeRef.current && !isApplyingRef.current) { |
| 205 | + lastCommittedValueRef.current = value ?? '' |
| 206 | + } |
| 207 | + }, [value]) |
| 208 | + |
| 209 | + return { |
| 210 | + recordChange, |
| 211 | + clearHistory, |
| 212 | + recordReplace, |
| 213 | + flushPending, |
| 214 | + startSession, |
| 215 | + undo, |
| 216 | + redo, |
| 217 | + } |
| 218 | +} |
0 commit comments