📝 update doc message

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";

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>
+  );
+}