From 5bf21c78e6ef7287d6f02c4de1a2a3b90200b30c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 7 Nov 2024 19:43:18 +0800
Subject: [PATCH] docs: add ref demo (#189)

* docs: add ref demo

* fix: lint
---
 components/sender/SenderHeader.tsx            |  24 +--
 .../__snapshots__/demo-extend.test.ts.snap    | 166 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 163 +++++++++++++++++
 components/sender/demo/header-fixed.md        |   7 +
 components/sender/demo/header-fixed.tsx       |  45 +++++
 components/sender/index.en-US.md              |   1 +
 components/sender/index.zh-CN.md              |   1 +
 7 files changed, 396 insertions(+), 11 deletions(-)
 create mode 100644 components/sender/demo/header-fixed.md
 create mode 100644 components/sender/demo/header-fixed.tsx

diff --git a/components/sender/SenderHeader.tsx b/components/sender/SenderHeader.tsx
index 74cf4706..3953b750 100644
--- a/components/sender/SenderHeader.tsx
+++ b/components/sender/SenderHeader.tsx
@@ -73,7 +73,7 @@ export default function SenderHeader(props: SenderHeaderProps) {
             }}
           >
             {/* Header */}
-            {closable !== false && (
+            {(closable !== false || title) && (
               <div
                 className={
                   // We follow antd naming standard here.
@@ -86,16 +86,18 @@ export default function SenderHeader(props: SenderHeaderProps) {
                 }}
               >
                 <div className={`${headerCls}-title`}>{title}</div>
-                <div className={`${headerCls}-close`}>
-                  <Button
-                    type="text"
-                    icon={<CloseOutlined />}
-                    size="small"
-                    onClick={() => {
-                      onOpenChange?.(!open);
-                    }}
-                  />
-                </div>
+                {closable !== false && (
+                  <div className={`${headerCls}-close`}>
+                    <Button
+                      type="text"
+                      icon={<CloseOutlined />}
+                      size="small"
+                      onClick={() => {
+                        onOpenChange?.(!open);
+                      }}
+                    />
+                  </div>
+                )}
               </div>
             )}
 
diff --git a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8b270738..f049d9ca 100644
--- a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -392,6 +392,172 @@ exports[`renders components/sender/demo/header.tsx extend context correctly 1`]
 
 exports[`renders components/sender/demo/header.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/sender/demo/header-fixed.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-flex ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked"
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          With Reference
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          With Reference
+        </span>
+      </span>
+    </button>
+    <div
+      class="ant-sender"
+    >
+      <div
+        class="ant-sender-header ant-sender-header-motion-appear ant-sender-header-motion-appear-start ant-sender-header-motion"
+      >
+        <div
+          class="ant-sender-header-header"
+        >
+          <div
+            class="ant-sender-header-title"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <span
+                  aria-label="enter"
+                  class="anticon anticon-enter"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="enter"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 000 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <span
+                  class="ant-typography ant-typography-secondary"
+                >
+                  "Tell more about Ant Design X"
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-sender-header-close"
+          >
+            <button
+              class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-sender-content"
+      >
+        <textarea
+          class="ant-input ant-input-borderless ant-sender-input"
+          style="overflow-y: hidden; resize: none;"
+        />
+        <div
+          class="ant-sender-actions-list"
+        >
+          <div
+            class="ant-sender-actions-list-presets ant-flex"
+          >
+            <button
+              class="ant-btn ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="arrow-up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/header-fixed.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/sender/demo/paste-image.tsx extend context correctly 1`] = `
 <div
   class="ant-app"
diff --git a/components/sender/__tests__/__snapshots__/demo.test.ts.snap b/components/sender/__tests__/__snapshots__/demo.test.ts.snap
index 49a57fce..ef20d245 100644
--- a/components/sender/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/sender/__tests__/__snapshots__/demo.test.ts.snap
@@ -381,6 +381,169 @@ exports[`renders components/sender/demo/header.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/sender/demo/header-fixed.tsx correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-flex ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked"
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          With Reference
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          With Reference
+        </span>
+      </span>
+    </button>
+    <div
+      class="ant-sender"
+    >
+      <div
+        class="ant-sender-header"
+      >
+        <div
+          class="ant-sender-header-header"
+        >
+          <div
+            class="ant-sender-header-title"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <span
+                  aria-label="enter"
+                  class="anticon anticon-enter"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="enter"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 000 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <span
+                  class="ant-typography ant-typography-secondary"
+                >
+                  "Tell more about Ant Design X"
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-sender-header-close"
+          >
+            <button
+              class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-sender-content"
+      >
+        <textarea
+          class="ant-input ant-input-borderless ant-sender-input"
+        />
+        <div
+          class="ant-sender-actions-list"
+        >
+          <div
+            class="ant-sender-actions-list-presets ant-flex"
+          >
+            <button
+              class="ant-btn ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="arrow-up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/sender/demo/paste-image.tsx correctly 1`] = `
 <div
   class="ant-app"
diff --git a/components/sender/demo/header-fixed.md b/components/sender/demo/header-fixed.md
new file mode 100644
index 00000000..7e1ecfb6
--- /dev/null
+++ b/components/sender/demo/header-fixed.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `header` 做引用效果。
+
+## en-US
+
+Use `header` to do the reference effect.
diff --git a/components/sender/demo/header-fixed.tsx b/components/sender/demo/header-fixed.tsx
new file mode 100644
index 00000000..69623670
--- /dev/null
+++ b/components/sender/demo/header-fixed.tsx
@@ -0,0 +1,45 @@
+import { EnterOutlined } from '@ant-design/icons';
+import { Sender } from '@ant-design/x';
+import { App, Flex, Space, Switch, Typography } from 'antd';
+import React from 'react';
+
+const Demo: React.FC = () => {
+  const { message } = App.useApp();
+  const [hasRef, setHasRef] = React.useState(true);
+
+  const headerNode = (
+    <Sender.Header
+      open={hasRef}
+      title={
+        <Space>
+          <EnterOutlined />
+          <Typography.Text type="secondary">"Tell more about Ant Design X"</Typography.Text>
+        </Space>
+      }
+      onOpenChange={setHasRef}
+    />
+  );
+
+  return (
+    <Flex vertical gap="middle" align="flex-start">
+      <Switch
+        checked={hasRef}
+        onChange={() => setHasRef(!hasRef)}
+        checkedChildren="With Reference"
+        unCheckedChildren="With Reference"
+      />
+      <Sender
+        header={headerNode}
+        onSubmit={() => {
+          message.success('Send message successfully!');
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default () => (
+  <App>
+    <Demo />
+  </App>
+);
diff --git a/components/sender/index.en-US.md b/components/sender/index.en-US.md
index d5022c17..be90ac82 100644
--- a/components/sender/index.en-US.md
+++ b/components/sender/index.en-US.md
@@ -22,6 +22,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 <code src="./demo/speech-custom.tsx">Custom speech input</code>
 <code src="./demo/actions.tsx">Custom actions</code>
 <code src="./demo/header.tsx">Header panel</code>
+<code src="./demo/header-fixed.tsx">Reference</code>
 <code src="./demo/send-style.tsx">Adjust style</code>
 <code src="./demo/paste-image.tsx">Paste image</code>
 
diff --git a/components/sender/index.zh-CN.md b/components/sender/index.zh-CN.md
index 7b4e67cf..f712839a 100644
--- a/components/sender/index.zh-CN.md
+++ b/components/sender/index.zh-CN.md
@@ -23,6 +23,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 <code src="./demo/speech-custom.tsx">自定义语音输入</code>
 <code src="./demo/actions.tsx">自定义按钮</code>
 <code src="./demo/header.tsx">展开面板</code>
+<code src="./demo/header-fixed.tsx">引用</code>
 <code src="./demo/send-style.tsx">调整样式</code>
 <code src="./demo/paste-image.tsx">黏贴图片</code>