fix(wand): add shimmer to long-input while isStreaming, better prompt for system prompt generation (#852)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/long-input.tsx

@@ -287,6 +287,10 @@ export function LongInput({
       setShowEnvVars(false)
       setShowTags(false)
     }
+    // Prevent user input during streaming
+    if (wandHook?.isStreaming) {
+      e.preventDefault()
+    }
   }
 
   // Handle wheel events to control ReactFlow zoom
@@ -352,14 +356,19 @@ export function LongInput({
         />
       )}
 
-      <div ref={containerRef} className='group relative w-full' style={{ height: `${height}px` }}>
+      <div
+        ref={containerRef}
+        className={cn('group relative w-full', wandHook?.isStreaming && 'streaming-effect')}
+        style={{ height: `${height}px` }}
+      >
         <Textarea
           ref={textareaRef}
           className={cn(
             'allow-scroll min-h-full w-full resize-none text-transparent caret-foreground placeholder:text-muted-foreground/50',
             isConnecting &&
               config?.connectionDroppable !== false &&
-              'ring-2 ring-blue-500 ring-offset-2 focus-visible:ring-blue-500'
+              'ring-2 ring-blue-500 ring-offset-2 focus-visible:ring-blue-500',
+            wandHook?.isStreaming && 'pointer-events-none cursor-not-allowed opacity-50'
           )}
           rows={rows ?? DEFAULT_ROWS}
           placeholder={placeholder ?? ''}
@@ -397,7 +406,7 @@ export function LongInput({
         </div>
 
         {/* Wand Button */}
-        {wandHook && !isPreview && (
+        {wandHook && !isPreview && !wandHook.isStreaming && (
           <div className='absolute top-2 right-3 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
             <Button
               variant='ghost'
@@ -415,51 +424,57 @@ export function LongInput({
         )}
 
         {/* Custom resize handle */}
-        <div
-          className='absolute right-1 bottom-1 flex h-4 w-4 cursor-s-resize items-center justify-center rounded-sm bg-background'
-          onMouseDown={startResize}
-          onDragStart={(e) => {
-            e.preventDefault()
-          }}
-        >
-          <ChevronsUpDown className='h-3 w-3 text-muted-foreground/70' />
-        </div>
+        {!wandHook?.isStreaming && (
+          <div
+            className='absolute right-1 bottom-1 flex h-4 w-4 cursor-s-resize items-center justify-center rounded-sm bg-background'
+            onMouseDown={startResize}
+            onDragStart={(e) => {
+              e.preventDefault()
+            }}
+          >
+            <ChevronsUpDown className='h-3 w-3 text-muted-foreground/70' />
+          </div>
+        )}
 
-        <EnvVarDropdown
-          visible={showEnvVars}
-          onSelect={(newValue) => {
-            if (onChange) {
-              onChange(newValue)
-            } else if (!isPreview) {
-              emitTagSelection(newValue)
-            }
-          }}
-          searchTerm={searchTerm}
-          inputValue={value?.toString() ?? ''}
-          cursorPosition={cursorPosition}
-          onClose={() => {
-            setShowEnvVars(false)
-            setSearchTerm('')
-          }}
-        />
-        <TagDropdown
-          visible={showTags}
-          onSelect={(newValue) => {
-            if (onChange) {
-              onChange(newValue)
-            } else if (!isPreview) {
-              emitTagSelection(newValue)
-            }
-          }}
-          blockId={blockId}
-          activeSourceBlockId={activeSourceBlockId}
-          inputValue={value?.toString() ?? ''}
-          cursorPosition={cursorPosition}
-          onClose={() => {
-            setShowTags(false)
-            setActiveSourceBlockId(null)
-          }}
-        />
+        {!wandHook?.isStreaming && (
+          <>
+            <EnvVarDropdown
+              visible={showEnvVars}
+              onSelect={(newValue) => {
+                if (onChange) {
+                  onChange(newValue)
+                } else if (!isPreview) {
+                  emitTagSelection(newValue)
+                }
+              }}
+              searchTerm={searchTerm}
+              inputValue={value?.toString() ?? ''}
+              cursorPosition={cursorPosition}
+              onClose={() => {
+                setShowEnvVars(false)
+                setSearchTerm('')
+              }}
+            />
+            <TagDropdown
+              visible={showTags}
+              onSelect={(newValue) => {
+                if (onChange) {
+                  onChange(newValue)
+                } else if (!isPreview) {
+                  emitTagSelection(newValue)
+                }
+              }}
+              blockId={blockId}
+              activeSourceBlockId={activeSourceBlockId}
+              inputValue={value?.toString() ?? ''}
+              cursorPosition={cursorPosition}
+              onClose={() => {
+                setShowTags(false)
+                setActiveSourceBlockId(null)
+              }}
+            />
+          </>
+        )}
       </div>
     </>
   )

apps/sim/blocks/blocks/agent.ts

@@ -72,36 +72,56 @@ export const AgentBlock: BlockConfig<AgentResponse> = {
       wandConfig: {
         enabled: true,
         maintainHistory: true, // Enable conversation history for iterative improvements
-        prompt: `You are an expert at writing system prompts for AI agents. Write a system prompt based exactly on what the user asks for.
+        prompt: `You are an expert system prompt engineer. Create a system prompt based on the user's request.
 
-Current context: {context}
+### CONTEXT
+{context}
 
-IMPORTANT: Write the system prompt as if the user asked you directly to create it. Match their level of detail and complexity. If they ask for something "comprehensive" or "detailed", write a thorough, in-depth prompt. If they ask for something "simple", keep it concise.
+### INSTRUCTIONS
+Write a system prompt following best practices. Match the complexity level the user requests.
 
-Key guidelines:
-- Always start with "You are..." to define the agent's role
-- Include everything the user specifically requests
-- If they mention specific tools (like "use Exa to search", "send emails via Gmail", "post to Slack"), explicitly include those tool usage instructions in the prompt
-- If they want extensive capabilities, write extensively about them
-- If they mention specific behaviors, tone, or constraints, include those
-- Write naturally - don't worry about sentence counts or rigid structure
-- Focus on being comprehensive when they ask for comprehensive
+### CORE PRINCIPLES
+1. **Role Definition**: Start with "You are..." to establish identity and function
+2. **Direct Commands**: Use action verbs like "Analyze", "Generate", "Classify"
+3. **Be Specific**: Include output format, quality standards, behaviors, target audience
+4. **Clear Boundaries**: Define focus areas and priorities
+5. **Examples**: Add concrete examples when helpful
 
-Tool Integration: Since this is an AI agent platform, users often want agents that use specific tools. If the user mentions:
-- Web search → Include instructions about using search tools like Exa
-- Email → Include instructions about Gmail integration
-- Communication → Include Slack, Discord, Teams instructions
-- Data → Include instructions about databases, APIs, spreadsheets
-- Any other specific tools → Include explicit usage instructions
+### STRUCTURE
+- **Primary Role**: Clear identity statement
+- **Core Capabilities**: Main functions and expertise
+- **Behavioral Guidelines**: Task approach and interaction style
+- **Output Requirements**: Format, style, quality expectations
+- **Tool Integration**: Specific tool usage instructions
 
-Examples:
-SIMPLE REQUEST: "Write a basic customer service agent"
-You are a helpful customer service representative. Assist customers with their questions about orders, returns, and products. Be polite and professional in all interactions.
+### TOOL INTEGRATION
+When users mention tools, include explicit instructions:
+- **Web Search**: "Use Exa to gather current information from authoritative sources"
+- **Communication**: "Send messages via Slack/Discord/Teams with appropriate tone"
+- **Email**: "Compose emails through Gmail with professional formatting"
+- **Data**: "Query databases, analyze spreadsheets, call APIs as needed"
 
-COMPREHENSIVE REQUEST: "Create a detailed AI research assistant that can search the web and analyze information"
-You are an advanced AI research assistant specializing in conducting thorough research and analysis across various topics. Your primary capabilities include web searching, information synthesis, critical analysis, and presenting findings in clear, actionable formats. When conducting research, use Exa or other web search tools to gather current, relevant information from authoritative sources. Always verify information from multiple sources when possible and clearly distinguish between established facts and emerging trends or opinions. For each research query, begin by understanding the specific research objectives, target audience, and desired depth of analysis. Structure your research process systematically: start with broad topic exploration, then narrow down to specific aspects, and finally synthesize findings into coherent insights. When presenting results, include source citations, highlight key findings, note any limitations or gaps in available information, and suggest areas for further investigation. Adapt your communication style to match the user's expertise level - provide detailed technical explanations for expert audiences and clear, accessible summaries for general audiences. Always maintain objectivity and acknowledge when information is uncertain or conflicting.
+### EXAMPLES
 
-Write naturally and comprehensively based on what the user actually asks for.`,
+**Simple**: "Create a customer service agent"
+→ You are a professional customer service representative. Respond to inquiries about orders, returns, and products with empathy and efficiency. Maintain a helpful tone while providing accurate information and clear next steps.
+
+**Detailed**: "Build a research assistant for market analysis"
+→ You are an expert market research analyst specializing in competitive intelligence and industry trends. Conduct thorough market analysis using systematic methodologies.
+
+Use Exa to gather information from industry sources, financial reports, and market research firms. Cross-reference findings across multiple credible sources.
+
+For each request, follow this structure:
+1. Define research scope and key questions
+2. Identify market segments and competitors
+3. Gather quantitative data (market size, growth rates)
+4. Collect qualitative insights (trends, consumer behavior)
+5. Synthesize findings into actionable recommendations
+
+Present findings in executive-ready formats with source citations, highlight key insights, and provide specific recommendations with rationale.
+
+### FINAL INSTRUCTION
+Create a system prompt appropriately detailed for the request, using clear language and relevant tool instructions.`,
         placeholder: 'Describe the AI agent you want to create...',
         generationType: 'system-prompt',
       },