feat(custom-agent): add support for custom webview in chat interface #51

phodal · phodal · commit dcae35ca798e · 2024-03-06T14:46:11.000+08:00
The commit introduces a new feature to the chat interface, allowing for the display of custom webviews. This enhancement enables the chat system to render dynamic content such as HTML, CSS, and JavaScript, providing a more interactive user experience. The changes include modifications to the server.py file to handle incoming webview requests, and updates to the CustomAgentChatProcessor.kt and WebViewWindow.kt files to implement the webview functionality within the chat application. Additionally, the ChatCodingPanel.kt file has been updated to include the necessary imports and functions for displaying webviews and code blocks.
diff --git a/example/custom_agent/server.py b/example/custom_agent/server.py
@@ -58,7 +58,7 @@ def mock_frontend(messages: Messages):
 
 @app.post("/api/agent/ux")
 def mock_frontend(messages: Messages):
-    return """```html
+    return """
 <html>
 <head>
     <meta charset="UTF-8">
@@ -72,7 +72,7 @@ def mock_frontend(messages: Messages):
     <p>你好，世界</p>
 </body>
 </html>
-```"""
+"""
 
 
 @app.exception_handler(RequestValidationError)
diff --git a/src/main/kotlin/cc/unitmesh/devti/counit/CustomAgentChatProcessor.kt b/src/main/kotlin/cc/unitmesh/devti/counit/CustomAgentChatProcessor.kt
@@ -4,17 +4,13 @@ import cc.unitmesh.devti.AutoDevBundle
 import cc.unitmesh.devti.counit.model.CustomAgentConfig
 import cc.unitmesh.devti.counit.model.CustomAgentState
 import cc.unitmesh.devti.counit.model.ResponseAction
-import cc.unitmesh.devti.counit.view.WebBlock
-import cc.unitmesh.devti.counit.view.WebBlockView
 import cc.unitmesh.devti.gui.chat.ChatCodingPanel
 import cc.unitmesh.devti.gui.chat.ChatContext
-import cc.unitmesh.devti.gui.chat.ChatRole
 import cc.unitmesh.devti.provider.ContextPrompter
 import cc.unitmesh.devti.util.LLMCoroutineScope
 import com.intellij.openapi.components.Service
 import com.intellij.openapi.diagnostic.logger
 import com.intellij.openapi.project.Project
-import com.intellij.temporary.gui.block.SimpleMessage
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.runBlocking
 
@@ -79,11 +75,10 @@ class CustomAgentChatProcessor(val project: Project) {
                         sb.append(it)
                     }
                 }
+                // TODO: add decode support
                 val content = sb.toString()
 
-                val webBlock = WebBlock(SimpleMessage(content, content, ChatRole.User))
-                val blockView = WebBlockView(webBlock, project, {})
-                ui.appendWebView(blockView)
+                ui.appendWebView(content, project)
                 ui.hiddenProgressBar()
             }
         }
diff --git a/src/main/kotlin/cc/unitmesh/devti/counit/view/WebViewWindow.kt b/src/main/kotlin/cc/unitmesh/devti/counit/view/WebViewWindow.kt
@@ -13,7 +13,9 @@ import java.awt.Component
  * for custom webview can refs: https://github.com/mucharafal/jcef_example
  */
 class WebViewWindow {
-    private val browser: JBCefBrowser = JBCefBrowser().also {}
+    private val browser: JBCefBrowser = JBCefBrowser().also {
+
+    }
 
     val component: Component = browser.component
 
diff --git a/src/main/kotlin/cc/unitmesh/devti/gui/chat/ChatCodingPanel.kt b/src/main/kotlin/cc/unitmesh/devti/gui/chat/ChatCodingPanel.kt
@@ -3,18 +3,23 @@ package cc.unitmesh.devti.gui.chat
 import cc.unitmesh.devti.AutoDevBundle
 import cc.unitmesh.devti.alignRight
 import cc.unitmesh.devti.counit.model.CustomAgentConfig
+import cc.unitmesh.devti.counit.view.WebBlock
+import cc.unitmesh.devti.counit.view.WebBlockView
 import cc.unitmesh.devti.fullHeight
 import cc.unitmesh.devti.fullWidth
 import cc.unitmesh.devti.provider.ContextPrompter
 import cc.unitmesh.devti.settings.AutoDevSettingsState
 import com.intellij.ide.BrowserUtil
 import com.intellij.openapi.Disposable
 import com.intellij.openapi.diagnostic.logger
+import com.intellij.openapi.project.Project
 import com.intellij.openapi.ui.DialogPanel
 import com.intellij.openapi.ui.NullableComponent
 import com.intellij.openapi.ui.SimpleToolWindowPanel
 import com.intellij.openapi.wm.IdeFocusManager
-import com.intellij.temporary.gui.block.MessageBlockView
+import com.intellij.temporary.gui.block.CodeBlock
+import com.intellij.temporary.gui.block.CodeBlockView
+import com.intellij.temporary.gui.block.SimpleMessage
 import com.intellij.temporary.gui.block.whenDisposed
 import com.intellij.ui.Gray
 import com.intellij.ui.JBColor
@@ -266,27 +271,37 @@ class ChatCodingPanel(private val chatCodingService: ChatCodingService, val disp
         updateUI()
     }
 
-    fun appendWebView(blockView: MessageBlockView) {
-        myList.add(SimpleView(blockView))
+    fun appendWebView(content: String, project: Project) {
+        val msg = SimpleMessage(content, content, ChatRole.System)
+        val webBlock = WebBlock(msg)
+        val blockView = WebBlockView(webBlock, project, {})
+        val codeView = CodeBlockView(CodeBlock(msg), project, {})
+
+        myList.add(SimpleView(blockView, codeView))
+
         updateUI()
     }
 }
 
-class SimpleView(val view: MessageBlockView) : JBPanel<MessageView>() {
+class SimpleView(val webview: WebBlockView, val codeView: CodeBlockView) : JBPanel<MessageView>() {
     init {
         isDoubleBuffered = true
         isOpaque = true
-        background = JBColor(0x6F59FF, 0x2d2f30)
+        background = JBColor(0xE0EEF7, 0x2d2f30)
 
         layout = BorderLayout(JBUI.scale(8), 0)
         val centerPanel = JPanel(VerticalLayout(JBUI.scale(8)))
 
         centerPanel.isOpaque = false
         centerPanel.border = JBUI.Borders.emptyRight(8)
+        centerPanel.background = JBColor(0xE0EEF7, 0x2d2f30)
 
         add(centerPanel, BorderLayout.WEST)
 
-        view.initialize()
-        centerPanel.add(view.getComponent())
+        webview.initialize()
+        centerPanel.add(webview.getComponent())
+
+        codeView.initialize()
+        centerPanel.add(codeView.getComponent())
     }
 }
