Dify Web Assistant Feasibility Study?

[liushoukun]

Self Checks

• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:)
• Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

Dify Web Assistant Feasibility Study

Embedding iframe Dify chat into my website to enable users to intelligently fill forms, analyze page content, etc.

Requirements

In the content management system, users can interact with an AI agent that can intelligently fill forms, analyze page content, etc., similar to Cursor for web pages.

Workflow Design

Main Participants

• User: Website visitor
• Website Page: Main page containing forms
• Embedded Chat Page: Dify Chat within iframe
• AI Agent: AI assistant in Dify

Workflow Steps

1. Initialization Phase

User → Website Page: Open article editing page
Website Page → Embedded Chat Page: Embed iframe dify chat
Website Page → Embedded Chat Page: Send page context (postMessage)

Page Context Data:

{
  "page": "This is a content management system for editing articles",
  "schema": {
    "type": "object",
    "properties": {
      "title": {"type": "string", "description": "Title"},
      "desc": {"type": "string", "description": "Description"},
      "content": {"type": "string", "description": "Content"}
    }
  },
  "data": {
    "title": "",
    "desc": "",
    "content": ""
  }
}

2. Intelligent Generation Phase

User → Embedded Chat Page: Initiate conversation (e.g., "Help me write an article about the advantages of dify chat")
Embedded Chat Page → AI Agent: LLM analyzes problem → Structured output → Generate actionable HTML

AI Agent Processing Logic:

• LLM analyzes user requirements based on system prompts and input context
• Outputs structured data and change suggestions
• Converts to HTML format with "Accept" button:

<button onclick="window.parent.postMessage({
  type:'chat-action-page',
  payload:{
    action:'update',
    data:{title:'Dify is a Great LLM Assistant',desc:'xxxx',content:'xxx'}
  }
},'*')">
  Accept
</button>

3. User Interaction Phase

AI Agent → Embedded Chat Page: Display results (similar to Cursor's display effect)
User → Embedded Chat Page: Click "Accept" button
Embedded Chat Page → Website Page: Send postMessage
Website Page → Website Page: Listen for messages, update form according to protocol

4. Real-time Synchronization Phase

User → Website Page: Manually adjust generated title and content
Website Page → Embedded Chat Page: Send updated data in real-time (postMessage)

Real-time Synchronization Mechanism:

• Automatically send messages to embedded page when form data changes
• Keep inputs in Chat synchronized with real-time data
• AI agent always understands the latest page state

5. Continuous Optimization Phase

User → Embedded Chat Page: Make new requests (e.g., "Check for typos and sentence issues")
Embedded Chat Page → AI Agent: Analyze current content, output suggestions and action buttons
User → Embedded Chat Page: Selectively accept suggestions

Core Features

• Bidirectional Communication: Real-time data synchronization between page and Chat
• Intelligent Awareness: AI understands page structure and current state
• Actionable Output: Generate suggestions with interactive buttons
• User Control: Users can choose to accept or ignore suggestions

Core Implementation

Page Sends Context to Chat for Input Setting

The page needs to send current context information to the embedded chat, allowing the AI agent to understand the page state and provide more precise assistance.

// Send page context to iframe chat
function sendContextToChat() {
  const contextData = {
    page: "This is a content management system for editing articles",
    schema: {
      type: "object",
      properties: {
        title: { type: "string", description: "Title" },
        desc: { type: "string", description: "Description" },
        content: { type: "string", description: "Content" }
      }
    },
    data: {
      title: document.querySelector('[name="title"]')?.value || '',
      desc: document.querySelector('[name="desc"]')?.value || '',
      content: document.querySelector('[name="content"]')?.value || ''
    }
  };

  // Use existing setDifyChatbotInputs API
  if (window.setDifyChatbotInputs) {
    window.setDifyChatbotInputs({
      page_context: JSON.stringify(contextData)
    });
  }
}

// Send on page load
window.addEventListener('DOMContentLoaded', function() {
  setTimeout(sendContextToChat, 2000);
});

// Send on form changes
document.addEventListener('input', function() {
  sendContextToChat();
});

AI Agent Website Page Operation Event Protocol

Event Name: chat-action-page

{
  type: 'chat-action-page',
  payload: {
    action: string,              // Operation type
    data?: Record<string, any>,  // Operation data
    target?: string,             // Target element
    options?: Record<string, any> // Other options
  }
}

Operation Type Definitions

// 1. Update data
{
  type: 'chat-action-page',
  payload: {
    action: 'update',
    data: {
      title: 'New Title',
      desc: 'New Description',
      content: 'New Content'
    }
  }
}

// 2. Insert content
{
  type: 'chat-action-page',
  payload: {
    action: 'insert',
    target: '[name="content"]',
    data: {
      content: 'Content to insert',
      position: 'append' // 'append' | 'prepend' | 'replace'
    }
  }
}

// 3. Show suggestions
{
  type: 'chat-action-page',
  payload: {
    action: 'suggest',
    data: {
      message: 'I have generated content for you',
      suggestions: [{
        title: 'Accept',
        action: 'update',
        data: { title: 'Suggested Title', content: 'Suggested Content' }
      }]
    }
  }
}

// 4. Rollback operation
{
  type: 'chat-action-page',
  payload: {
    action: 'rollback',
    options: {
      steps: 1,                  // Number of steps to rollback
      target: 'last'             // 'last' | 'initial'
    }
  }
}

Dify Modification Points

• Add message handling in embedded-chatbot, everything else is implemented by ourselves.

 // web\app\components\base\chat\embedded-chatbot\header\index.tsx

const Header: FC<IHeaderProps> = ({
  isMobile,
  allowResetChat,
  customerIcon,
  title,
  theme,
  onCreateNewChat,
}) => {
  const { t } = useTranslation()
  const {
    appData,
    currentConversationId,
    inputsForms,
    handleNewConversationInputsChange,
    newConversationInputs,
    setCurrentConversationInputs,
    currentConversationInputs,
  } = useEmbeddedChatbotContext()

  const isClient = typeof window !== 'undefined'
  const isIframe = isClient ? window.self !== window.top : false
  const [parentOrigin, setParentOrigin] = useState('')
  const [showToggleExpandButton, setShowToggleExpandButton] = useState(false)
  const [expanded, setExpanded] = useState(false)
  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)

  // Handle setting inputs from parent window message
  const handleSetInputsFromMessage = useCallback((payload: Record<string, any>) => {
    if (!payload || typeof payload !== 'object') {
      console.warn('Invalid payload for dify-chatbot-set-inputs event')
      return
    }

    // Validate inputs against inputsForms to ensure only valid variables are set
    const validatedInputs: Record<string, any> = {}
    const validVariables = new Set(inputsForms.map(form => form.variable))

    Object.entries(payload).forEach(([key, value]) => {
      if (validVariables.has(key)) {
        validatedInputs[key] = value
      } else {
        console.warn(`Invalid input variable: ${key}. Valid variables are:`, Array.from(validVariables))
      }
    })

    // Update inputs based on current conversation state
    if (currentConversationId) {
      // Update current conversation inputs
      setCurrentConversationInputs({
        ...currentConversationInputs,
        ...validatedInputs,
      })
    } else {
      // Update new conversation inputs
      handleNewConversationInputsChange({
        ...newConversationInputs,
        ...validatedInputs,
      })
    }

    // Send confirmation back to parent window
    if (parentOrigin) {
      window.parent.postMessage({
        type: 'dify-chatbot-inputs-updated',
        payload: {
          success: true,
          updatedInputs: validatedInputs,
          conversationId: currentConversationId || null,
        },
      }, parentOrigin)
    }
  }, [
    inputsForms,
    currentConversationId,
    currentConversationInputs,
    newConversationInputs,
    setCurrentConversationInputs,
    handleNewConversationInputsChange,
    parentOrigin,
  ])

  const handleMessageReceived = useCallback((event: MessageEvent) => {
    ... 
    // Handle set inputs event
    if (event.data.type === 'dify-chatbot-set-inputs') {
      handleSetInputsFromMessage(event.data.payload)
    }
    
    // Handle chat action page event
    if (event.data.type === 'chat-action-page') {
      handleChatActionPage(event.data.payload)
    }
  }, [parentOrigin, handleSetInputsFromMessage])

Summary

This Dify Web Assistant Solution provides websites with an intelligent editing experience similar to Cursor. By embedding iframe chatbots, it enables bidirectional communication and collaboration between AI agents and web pages.

🎯 Core Value

1. Intelligent Awareness: Pages send real-time context to AI agents, allowing AI to understand current editing state
2. Intelligent Operations: AI agents can directly manipulate page forms and provide precise content suggestions
3. Seamless Integration: Based on postMessage communication, easy to integrate into existing websites
4. User-Friendly: Provides interactive elements like "Accept" buttons, allowing users to selectively adopt suggestions

🚀 Technical Highlights

• Bidirectional Communication: Real-time data synchronization between page ↔ AI agent
• Standardized Protocol: Defines the chat-action-page event protocol
• Secure and Controllable: Security mechanisms including input validation and origin verification
• Minimal Changes: Only requires adding message handling logic to Dify embedded-chatbot

💡 Application Scenarios

• Intelligent writing assistant for content management systems
• Smart form filling and validation
• Intelligent suggestions and optimization for document editing
• Any web application requiring AI-assisted editing

This solution upgrades traditional chatbots into true Web Intelligent Assistants, providing users with more efficient and intelligent editing experiences!

2. Additional context or comments

No response

3. Can you help us with this feature?

• I am interested in contributing to this feature.