diff --git a/tests/examples/weather.py b/tests/examples/weather.py
index c03d70ba..ec0459f0 100644
--- a/tests/examples/weather.py
+++ b/tests/examples/weather.py
@@ -16,8 +16,8 @@ async def handle_first_receive(matcher: Matcher, args: Message = CommandArg()):
 
 @weather.got("city", prompt="你想查询哪个城市的天气呢？")
 async def handle_city(city: Message = Arg(), city_name: str = ArgPlainText("city")):
-    print(city_name)
     if city_name not in ["北京", "上海"]:  # 如果参数不符合要求，则提示用户重新输入
+        # 可以使用平台的 Message 类直接构造模板消息
         await weather.reject(city.template("你想查询的城市 {city} 暂不支持，请重新输入！"))
 
     city_weather = await get_weather(city_name)
diff --git a/website/docs/tutorial/plugin/example.mdx b/website/docs/tutorial/plugin/example.mdx
index 581330ee..daf6db31 100644
--- a/website/docs/tutorial/plugin/example.mdx
+++ b/website/docs/tutorial/plugin/example.mdx
@@ -4,6 +4,7 @@ description: 简单插件示例
 ---
 
 import CodeBlock from "@theme/CodeBlock";
+import Messenger from "@site/src/components/Messenger";
 
 # 插件示例
 
@@ -13,6 +14,8 @@ import WeatherSource from "!!raw-loader!../../../../tests/examples/weather.py";
 
 <CodeBlock className="language-python">{WeatherSource}</CodeBlock>
 
+<Messenger />
+
 ### 测试示例
 
 import WeatherTest from "!!raw-loader!../../../../tests/test_examples/test_weather.py";
diff --git a/website/src/components/Messenger/index.tsx b/website/src/components/Messenger/index.tsx
new file mode 100644
index 00000000..4dbf7a47
--- /dev/null
+++ b/website/src/components/Messenger/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export type Message = {
+  position?: "left" | "right";
+  msg: string;
+};
+
+export default function Messenger() {
+  return (
+    <div className="block w-full max-w-full rounded shadow-md outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100">
+      <header className="flex items-center h-12 px-4 bg-blue-500 text-white">
+        <div className="text-left text-base grow">
+          <FontAwesomeIcon icon={["fas", "chevron-left"]} />
+        </div>
+        <div className="flex-initial grow-0">
+          <span className="text-xl font-bold">NoneBot</span>
+        </div>
+        <div className="text-right text-base grow">
+          <FontAwesomeIcon icon={["fas", "user"]} />
+        </div>
+      </header>
+    </div>
+  );
+}