📝 write doc messenger component

website/docs/tutorial/plugin/example.mdx

@@ -11,13 +11,22 @@ import Messenger from "@site/src/components/Messenger";
 ## 命令式问答示例
 
 import WeatherSource from "!!raw-loader!../../../../tests/examples/weather.py";
+import WeatherTest from "!!raw-loader!../../../../tests/test_examples/test_weather.py";
 
 <CodeBlock className="language-python">{WeatherSource}</CodeBlock>
 
-<Messenger />
+<Messenger
+  msgs={[
+    { position: "right", msg: "/天气" },
+    { position: "left", msg: "你想查询哪个城市的天气呢？" },
+    { position: "right", msg: "上海" },
+    { position: "left", msg: "上海的天气是..." },
+  ]}
+/>
 
-### 测试示例
-
-import WeatherTest from "!!raw-loader!../../../../tests/test_examples/test_weather.py";
+<details>
+  <summary>测试示例</summary>
 
 <CodeBlock className="language-python">{WeatherTest}</CodeBlock>
+
+</details>

website/src/components/Messenger/index.tsx

@@ -1,16 +1,58 @@
+import clsx from "clsx";
 import React from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Logo from "@theme/Logo";
+
+import styles from "./styles.module.css";
 
 export type Message = {
   position?: "left" | "right";
   msg: string;
 };
 
-export default function Messenger() {
+function MessageBox({
+  msg,
+  isRight,
+}: {
+  msg: string;
+  isRight: boolean;
+}): JSX.Element {
   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={clsx(styles.message, {
+        [styles.messageRight]: isRight,
+      })}
+    >
+      {isRight ? (
+        <div className={clsx("bg-cyan-600 text-base", styles.messageAvatar)}>
+          <FontAwesomeIcon icon={["fas", "user"]} />
+        </div>
+      ) : (
+        <div className={clsx("transparent", styles.messageAvatar)}>
+          <Logo imageClassName="h-full w-full" disabled />
+        </div>
+      )}
+      <div
+        className={clsx(styles.messageBox, { "order-first": isRight })}
+        dangerouslySetInnerHTML={{
+          __html: msg.replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;"),
+        }}
+      ></div>
+    </div>
+  );
+}
+
+export default function Messenger({
+  msgs = [],
+}: {
+  msgs?: Message[];
+}): JSX.Element {
+  const isRight = (msg: Message): boolean => msg.position === "right";
+
+  return (
+    <div className="block w-full max-w-full my-4 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 rounded-t-[inherit]">
         <div className="text-left text-base grow">
           <FontAwesomeIcon icon={["fas", "chevron-left"]} />
         </div>
@@ -21,6 +63,43 @@ export default function Messenger() {
           <FontAwesomeIcon icon={["fas", "user"]} />
         </div>
       </header>
+      <div className="p-3 min-h-[150px]">
+        {msgs.map((msg, i) => (
+          <MessageBox msg={msg.msg} isRight={isRight(msg)} key={i} />
+        ))}
+      </div>
+      <div className="px-3">
+        <div className="flex flex-row items-center">
+          <div className="flex-1 p-1 max-w-full">
+            <input className="w-full rounded bg-light dark:bg-dark" />
+          </div>
+          <div className="flex-initial grow-0 w-fit">
+            <button className="h-7 px-3 rounded-full bg-blue-500 text-white">
+              <span>发送</span>
+            </button>
+          </div>
+        </div>
+        <div className="flex flex-row items-center text-center text-base text-gray-600">
+          <div className="p-1 shrink-0 grow-0 basis-1/6">
+            <FontAwesomeIcon icon={["fas", "microphone"]} />
+          </div>
+          <div className="p-1 shrink-0 grow-0 basis-1/6">
+            <FontAwesomeIcon icon={["fas", "image"]} />
+          </div>
+          <div className="p-1 shrink-0 grow-0 basis-1/6">
+            <FontAwesomeIcon icon={["fas", "camera"]} />
+          </div>
+          <div className="p-1 shrink-0 grow-0 basis-1/6">
+            <FontAwesomeIcon icon={["fas", "wallet"]} />
+          </div>
+          <div className="p-1 shrink-0 grow-0 basis-1/6">
+            <FontAwesomeIcon icon={["fas", "smile-wink"]} />
+          </div>
+          <div className="p-1 shrink-0 grow-0 basis-1/6">
+            <FontAwesomeIcon icon={["fas", "plus-circle"]} />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

website/src/components/Messenger/styles.module.css

@@ -0,0 +1,30 @@
+.message {
+  @apply flex flex-row flex-wrap justify-start;
+}
+
+.messageRight {
+  @apply justify-end;
+}
+
+.message .messageAvatar {
+  @apply relative inline-flex items-center justify-center text-center align-middle h-9 w-9 rounded-full;
+}
+
+.message .messageBox {
+  @apply relative w-fit max-w-[55%] px-2 py-[0.375rem] mx-3 my-2 rounded-lg bg-light;
+}
+:global(.dark) .message .messageBox {
+  @apply bg-dark;
+}
+
+.message .messageBox::after {
+  content: "";
+  border-bottom: 7px solid;
+  @apply absolute top-0 right-full w-2 h-3 text-light rounded-bl-lg;
+}
+:global(.dark) .message .messageBox::after {
+  @apply text-dark;
+}
+.message.messageRight .messageBox::after {
+  @apply !left-full !right-auto !rounded-bl-[0] !rounded-br-lg;
+}