add wand to generate diff

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx

@@ -10,7 +10,10 @@ import {
   ModalHeader,
   Textarea,
 } from '@/components/emcn'
-import { useUpdateDeploymentVersion } from '@/hooks/queries/deployments'
+import {
+  useGenerateVersionDescription,
+  useUpdateDeploymentVersion,
+} from '@/hooks/queries/deployments'
 
 interface VersionDescriptionModalProps {
   open: boolean
@@ -29,14 +32,15 @@ export function VersionDescriptionModal({
   versionName,
   currentDescription,
 }: VersionDescriptionModalProps) {
-  // Initialize state from props - component remounts via key prop when version changes
   const initialDescription = currentDescription || ''
   const [description, setDescription] = useState(initialDescription)
   const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
 
   const updateMutation = useUpdateDeploymentVersion()
+  const generateMutation = useGenerateVersionDescription()
 
   const hasChanges = description.trim() !== initialDescription.trim()
+  const isGenerating = generateMutation.isPending
 
   const handleCloseAttempt = useCallback(() => {
     if (hasChanges && !updateMutation.isPending) {
@@ -52,6 +56,16 @@ export function VersionDescriptionModal({
     onOpenChange(false)
   }, [initialDescription, onOpenChange])
 
+  const handleGenerateDescription = useCallback(() => {
+    generateMutation.mutate({
+      workflowId,
+      version,
+      onStreamChunk: (accumulated) => {
+        setDescription(accumulated)
+      },
+    })
+  }, [workflowId, version, generateMutation])
+
   const handleSave = useCallback(async () => {
     if (!workflowId) return
 
@@ -76,41 +90,51 @@ export function VersionDescriptionModal({
           <ModalHeader>
             <span>Version Description</span>
           </ModalHeader>
-          <ModalBody className='space-y-[12px]'>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
-              {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
-              <span className='font-medium text-[var(--text-primary)]'>{versionName}</span>
-            </p>
+          <ModalBody className='space-y-[10px]'>
+            <div className='flex items-center justify-between'>
+              <p className='text-[12px] text-[var(--text-secondary)]'>
+                {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
+                <span className='font-medium text-[var(--text-primary)]'>{versionName}</span>
+              </p>
+              <Button
+                variant='active'
+                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                onClick={handleGenerateDescription}
+                disabled={isGenerating || updateMutation.isPending}
+              >
+                {isGenerating ? 'Generating...' : 'Generate'}
+              </Button>
+            </div>
             <Textarea
               placeholder='Describe the changes in this deployment version...'
               className='min-h-[120px] resize-none'
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               maxLength={500}
+              disabled={isGenerating}
             />
             <div className='flex items-center justify-between'>
-              {updateMutation.error ? (
+              {(updateMutation.error || generateMutation.error) && (
                 <p className='text-[12px] text-[var(--text-error)]'>
-                  {updateMutation.error.message}
+                  {updateMutation.error?.message || generateMutation.error?.message}
                 </p>
-              ) : (
-                <div />
               )}
+              {!updateMutation.error && !generateMutation.error && <div />}
               <p className='text-[11px] text-[var(--text-tertiary)]'>{description.length}/500</p>
             </div>
           </ModalBody>
           <ModalFooter>
             <Button
               variant='default'
               onClick={handleCloseAttempt}
-              disabled={updateMutation.isPending}
+              disabled={updateMutation.isPending || isGenerating}
             >
               Cancel
             </Button>
             <Button
               variant='tertiary'
               onClick={handleSave}
-              disabled={updateMutation.isPending || !hasChanges}
+              disabled={updateMutation.isPending || isGenerating || !hasChanges}
             >
               {updateMutation.isPending ? 'Saving...' : 'Save'}
             </Button>

apps/sim/hooks/queries/deployments.ts

@@ -411,6 +411,147 @@ export function useUpdateDeploymentVersion() {
   })
 }
 
+/**
+ * Variables for generating a version description
+ */
+interface GenerateVersionDescriptionVariables {
+  workflowId: string
+  version: number
+  onStreamChunk?: (accumulated: string) => void
+}
+
+const VERSION_DESCRIPTION_SYSTEM_PROMPT = `You are a technical writer generating concise deployment version descriptions.
+
+Given a diff of changes between two workflow versions, write a brief, factual description (1-2 sentences, under 300 characters) that states ONLY what changed.
+
+RULES:
+- State specific values when provided (e.g. "model changed from X to Y")
+- Do NOT wrap your response in quotes
+- Do NOT add filler phrases like "streamlining the workflow", "for improved efficiency"
+- Do NOT use markdown formatting
+- Do NOT include version numbers
+- Do NOT start with "This version" or similar phrases
+
+Good examples:
+- Changes model in Agent 1 from gpt-4o to claude-sonnet-4-20250514.
+- Adds Slack notification block. Updates webhook URL to production endpoint.
+- Removes Function block and its connection to Router.
+
+Bad examples:
+- "Changes model..." (NO - don't wrap in quotes)
+- Changes model, streamlining the workflow. (NO - don't add filler)
+
+Respond with ONLY the plain text description.`
+
+/**
+ * Hook for generating a version description using AI based on workflow diff
+ */
+export function useGenerateVersionDescription() {
+  return useMutation({
+    mutationFn: async ({
+      workflowId,
+      version,
+      onStreamChunk,
+    }: GenerateVersionDescriptionVariables): Promise<string> => {
+      const { generateWorkflowDiffSummary, formatDiffSummaryForDescription } = await import(
+        '@/lib/workflows/comparison/compare'
+      )
+
+      const currentResponse = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
+      if (!currentResponse.ok) {
+        throw new Error('Failed to fetch current version state')
+      }
+      const currentData = await currentResponse.json()
+      const currentState = currentData.deployedState
+
+      let previousState = null
+      if (version > 1) {
+        const previousResponse = await fetch(
+          `/api/workflows/${workflowId}/deployments/${version - 1}`
+        )
+        if (previousResponse.ok) {
+          const previousData = await previousResponse.json()
+          previousState = previousData.deployedState
+        }
+      }
+
+      const diffSummary = generateWorkflowDiffSummary(currentState, previousState)
+      const diffText = formatDiffSummaryForDescription(diffSummary)
+
+      const wandResponse = await fetch('/api/wand', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-cache, no-transform',
+        },
+        body: JSON.stringify({
+          prompt: `Generate a deployment version description based on these changes:\n\n${diffText}`,
+          systemPrompt: VERSION_DESCRIPTION_SYSTEM_PROMPT,
+          stream: true,
+          workflowId,
+        }),
+        cache: 'no-store',
+      })
+
+      if (!wandResponse.ok) {
+        const errorText = await wandResponse.text()
+        throw new Error(errorText || 'Failed to generate description')
+      }
+
+      if (!wandResponse.body) {
+        throw new Error('Response body is null')
+      }
+
+      const reader = wandResponse.body.getReader()
+      const decoder = new TextDecoder()
+      let accumulatedContent = ''
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+
+          const chunk = decoder.decode(value)
+          const lines = chunk.split('\n\n')
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const lineData = line.substring(6)
+              if (lineData === '[DONE]') continue
+
+              try {
+                const data = JSON.parse(lineData)
+                if (data.error) throw new Error(data.error)
+                if (data.chunk) {
+                  accumulatedContent += data.chunk
+                  onStreamChunk?.(accumulatedContent)
+                }
+                if (data.done) break
+              } catch {
+                // Skip unparseable lines
+              }
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock()
+      }
+
+      if (!accumulatedContent) {
+        throw new Error('Failed to generate description')
+      }
+
+      return accumulatedContent.trim()
+    },
+    onSuccess: (content) => {
+      logger.info('Generated version description', { length: content.length })
+    },
+    onError: (error) => {
+      logger.error('Failed to generate version description', { error })
+    },
+  })
+}
+
 /**
  * Variables for activate version mutation
  */