feat: implement HTML GenUI component and register custom markdown tags

astrbot/core/astr_main_agent_resources.py

@@ -54,9 +54,17 @@
     "move toward structure, insight, or guidance.\n"
     "You listen more than you speak, respect uncertainty, avoid forcing quick conclusions or grand narratives, "
     "and prefer clear, restrained language over unnecessary emotional embellishment. At your core, you value "
-    "empathy, clarity, autonomy, and meaning, favoring steady, sustainable progress over judgment or dramatic leaps."
+    "empathy, clarity, autonomy, and meaning, favoring steady, sustainable progress over judgment or dramatic leaps. "
     'When you answered, you need to add a follow up question / summarization but do not add "Follow up" words. '
     "Such as, user asked you to generate codes, you can add: Do you need me to run these codes for you?"
+    "\n\n[ChatUI HTML GenUI]\n"
+    "When the user asks you to create, prototype, preview, or modify a visual HTML UI, "
+    "output the runnable HTML inside exactly one `<html-genui>...</html-genui>` block. "
+    'You may add a short optional title on the opening tag, for example `<html-genui title="Dashboard mockup">`. '
+    "Do not wrap the block in Markdown code fences. Put complete, self-contained HTML/CSS/JavaScript inside the tag, "
+    "including `<style>` and `<script>` when needed. Prefer responsive layouts that fit a chat iframe. "
+    "For revisions, output the full updated `<html-genui>` block instead of a diff. "
+    "Only use this block when an HTML UI preview is useful; otherwise answer normally."
 )
 
 LIVE_MODE_SYSTEM_PROMPT = (

dashboard/src/components/chat/Chat.vue

@@ -1720,22 +1720,6 @@ function toggleTheme() {
   padding: 0 0 18px;
 }
 
-.composer-shell::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  right: 0;
-  top: -36px;
-  height: 36px;
-  pointer-events: none;
-  background: linear-gradient(
-    to bottom,
-    rgba(var(--v-theme-background), 0),
-    var(--chat-page-bg)
-  );
-}
-
 .composer-shell :deep(.input-area) {
   border-top: 0;
 }
@@ -1744,10 +1728,6 @@ function toggleTheme() {
   padding-bottom: 0;
 }
 
-.empty-chat .composer-shell::before {
-  display: none;
-}
-
 kbd {
   padding: 1px 5px;
   border-radius: 4px;

dashboard/src/components/chat/ChatInput.vue

@@ -901,7 +901,7 @@ defineExpose({
 
 <style scoped>
 .input-area {
-  padding: 12px 16px 0;
+  padding: 0 16px;
   background-color: transparent;
   position: relative;
   border-top: 1px solid var(--v-theme-border);

dashboard/src/components/chat/ChatMessageList.vue

@@ -389,8 +389,6 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, ref } from "vue";
 import axios from "axios";
-import { setCustomComponents } from "markstream-vue";
-import "markstream-vue/index.css";
 import RegenerateMenu, {
   type RegenerateModelSelection,
 } from "@/components/chat/RegenerateMenu.vue";
@@ -400,12 +398,13 @@ import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue"
 import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
 import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
 import RefsSidebar from "@/components/chat/message_list_comps/RefsSidebar.vue";
-import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
-import ThreadNode from "@/components/chat/message_list_comps/ThreadNode.vue";
 import ActionRef from "@/components/chat/message_list_comps/ActionRef.vue";
 import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
-import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import StyledMenu from "@/components/shared/StyledMenu.vue";
+import {
+  CHAT_MARKDOWN_CUSTOM_TAGS,
+  registerChatMarkdownComponents,
+} from "@/components/chat/chatMarkdownComponents";
 import {
   displayParts as displayMessageParts,
   messageBlocks as buildMessageBlocks,
@@ -466,15 +465,11 @@ const emit = defineEmits<{
   openRefs: [refs: unknown];
 }>();
 
-setCustomComponents("chat-message", {
-  ref: RefNode,
-  thread: ThreadNode,
-  code_block: ThemeAwareMarkdownCodeBlock,
-});
+registerChatMarkdownComponents();
 
 const { t } = useI18n();
 const { tm } = useModuleI18n("features/chat");
-const customMarkdownTags = ["ref"];
+const customMarkdownTags = CHAT_MARKDOWN_CUSTOM_TAGS;
 const downloadingFiles = ref(new Set<string>());
 const imagePreview = reactive({ visible: false, url: "" });
 const refsSidebarOpen = ref(false);

dashboard/src/components/chat/MessageList.vue

@@ -256,17 +256,17 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, ref } from "vue";
 import axios from "axios";
-import { setCustomComponents } from "markstream-vue";
-import "markstream-vue/index.css";
+import {
+  CHAT_MARKDOWN_CUSTOM_TAGS,
+  registerChatMarkdownComponents,
+} from "@/components/chat/chatMarkdownComponents";
 import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
 import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
 import ReasoningBlock from "@/components/chat/message_list_comps/ReasoningBlock.vue";
-import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
 import RefsSidebar from "@/components/chat/message_list_comps/RefsSidebar.vue";
 import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
 import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
 import ActionRef from "@/components/chat/message_list_comps/ActionRef.vue";
-import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import {
   displayParts as displayMessageParts,
   messageBlocks as buildMessageBlocks,
@@ -294,13 +294,10 @@ const props = withDefaults(
   },
 );
 
-setCustomComponents("chat-message", {
-  ref: RefNode,
-  code_block: ThemeAwareMarkdownCodeBlock,
-});
+registerChatMarkdownComponents();
 
 const { tm } = useModuleI18n("features/chat");
-const customMarkdownTags = ["ref"];
+const customMarkdownTags = CHAT_MARKDOWN_CUSTOM_TAGS;
 const downloadingFiles = ref(new Set<string>());
 const messageListRoot = ref<HTMLElement | null>(null);
 const imagePreview = reactive({ visible: false, url: "" });

dashboard/src/components/chat/StandaloneChat.vue

@@ -184,16 +184,16 @@ import {
   ref,
 } from "vue";
 import axios from "axios";
-import { setCustomComponents } from "markstream-vue";
-import "markstream-vue/index.css";
 import ChatInput from "@/components/chat/ChatInput.vue";
+import {
+  CHAT_MARKDOWN_CUSTOM_TAGS,
+  registerChatMarkdownComponents,
+} from "@/components/chat/chatMarkdownComponents";
 import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
 import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
 import ReasoningBlock from "@/components/chat/message_list_comps/ReasoningBlock.vue";
-import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
 import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
 import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
-import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
 import { useMediaHandling } from "@/composables/useMediaHandling";
 import {
   displayParts as displayMessageParts,
@@ -213,10 +213,7 @@ const props = withDefaults(defineProps<{ configId?: string | null }>(), {
   configId: "default",
 });
 
-setCustomComponents("chat-message", {
-  ref: RefNode,
-  code_block: ThemeAwareMarkdownCodeBlock,
-});
+registerChatMarkdownComponents();
 
 const { tm } = useModuleI18n("features/chat");
 const customizer = useCustomizerStore();
@@ -231,7 +228,7 @@ const inputRef = ref<InstanceType<typeof ChatInput> | null>(null);
 const imagePreview = reactive({ visible: false, url: "" });
 
 const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
-const customMarkdownTags = ["ref"];
+const customMarkdownTags = CHAT_MARKDOWN_CUSTOM_TAGS;
 
 const {
   stagedFiles,
@@ -616,22 +613,6 @@ function closeImage() {
   background: rgb(var(--v-theme-background));
 }
 
-.standalone-composer::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  right: 0;
-  top: -32px;
-  height: 32px;
-  pointer-events: none;
-  background: linear-gradient(
-    to bottom,
-    rgba(var(--v-theme-background), 0),
-    rgb(var(--v-theme-background))
-  );
-}
-
 .standalone-composer :deep(.input-area) {
   border-top: 0;
 }

dashboard/src/components/chat/chatMarkdownComponents.ts

@@ -0,0 +1,17 @@
+import { setCustomComponents } from "markstream-vue";
+import "markstream-vue/index.css";
+import HtmlGenUiNode from "@/components/chat/message_list_comps/HtmlGenUiNode.vue";
+import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
+import ThreadNode from "@/components/chat/message_list_comps/ThreadNode.vue";
+import ThemeAwareMarkdownCodeBlock from "@/components/shared/ThemeAwareMarkdownCodeBlock.vue";
+
+export const CHAT_MARKDOWN_CUSTOM_TAGS: string[] = ["ref", "html-genui"];
+
+export function registerChatMarkdownComponents() {
+  setCustomComponents("chat-message", {
+    ref: RefNode,
+    thread: ThreadNode,
+    "html-genui": HtmlGenUiNode,
+    code_block: ThemeAwareMarkdownCodeBlock,
+  });
+}