✨ feat: Sender / ChatInput components (#46)

* ✨ Feat: InputArea components * ✨ Feat: change name as sender * ✨ Feat: sender init * ✨ Feat: sender components * ✨ Feat: add enter type & fix some small change * 🐛 Fix: change namespace * ✨ Feat: change actions to components * 🐛 Fix: slove chinese input render problem * chore: adjust code * chore: fix demo * test: add test case * test: coverage * docs: update docs * chore: fix lint --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
ant-design · Aug 15, 2024 · f5fe430 · f5fe430
1 parent 670f871
commit f5fe430
Show file tree

Hide file tree

Showing 30 changed files with 1,498 additions and 23 deletions.
diff --git a/.dumi/preset/components-changelog-cn.json b/.dumi/preset/components-changelog-cn.json
@@ -1 +1 @@
-{"Prompts":[],"Conversations":[],"Bubble":[]}
+{"Sender":[],"Prompts":[],"Conversations":[],"Bubble":[]}
diff --git a/.dumi/preset/components-changelog-en.json b/.dumi/preset/components-changelog-en.json
@@ -1 +1 @@
-{"Prompts":[],"Conversations":[],"Bubble":[]}
+{"Sender":[],"Prompts":[],"Conversations":[],"Bubble":[]}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -43,11 +43,9 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
         'no-unused-expressions': 'off',
         '@typescript-eslint/no-unused-expressions': 2,
-        '@typescript-eslint/consistent-type-imports': [
-          2,
-          { disallowTypeAnnotations: false },
-        ],
+        '@typescript-eslint/consistent-type-imports': [2, { disallowTypeAnnotations: false }],
         'import/consistent-type-specifier-style': 0,
+        'default-case': 0,
       },
     },
     {
@@ -117,12 +115,7 @@ module.exports = {
       },
     },
     {
-      files: [
-        '.dumi/**/*.ts',
-        '.dumi/**/*.tsx',
-        '.dumi/**/*.js',
-        '.dumi/**/*.jsx',
-      ],
+      files: ['.dumi/**/*.ts', '.dumi/**/*.tsx', '.dumi/**/*.js', '.dumi/**/*.jsx'],
       rules: {
         'import/no-extraneous-dependencies': 0,
         'no-console': 0,
@@ -145,13 +138,7 @@ module.exports = {
       },
     },
     {
-      files: [
-        '**/*.test.ts',
-        '**/*.test.tsx',
-        '**/*.spec.ts',
-        '**/*.spec.tsx',
-        '**/tests/**',
-      ],
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx', '**/tests/**'],
       rules: {
         'compat/compat': 0,
         'import/no-extraneous-dependencies': 0,
@@ -163,10 +150,7 @@ module.exports = {
     'react/prop-types': 0,
     'react/forbid-prop-types': 0,
     'react/jsx-indent': 0,
-    'react/jsx-wrap-multilines': [
-      'error',
-      { declaration: false, assignment: false },
-    ],
+    'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
     'react/jsx-filename-extension': 0,
     'react/state-in-constructor': 0,
     'react/jsx-props-no-spreading': 0,

diff --git a/components/index.ts b/components/index.ts
@@ -1,3 +1,4 @@
+export { default as Sender } from './sender';
 export { default as Bubble } from './bubble';
 export type { BubbleProps } from './bubble';
 export { default as Conversations } from './conversations';

diff --git a/components/sender/StopLoading.tsx b/components/sender/StopLoading.tsx
@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import useAntdToken from 'antd/lib/theme/useToken';
+
+const StopLoadingIcon = memo(() => {
+  // eslint-disable-next-line
+  const [_, token] = useAntdToken();
+  return (
+    <svg
+      color="currentColor"
+      height={16}
+      viewBox="0 0 1024 1024"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g fill="none">
+        <circle cx="512" cy="512" fill="none" r="426" stroke={token.colorBgBase} strokeWidth="72" />
+        <rect fill="currentColor" height="252" rx="24" ry="24" width="252" x="386" y="386" />
+        <path
+          d="M938.667 512C938.667 276.359 747.64 85.333 512 85.333"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeWidth="73"
+        >
+          <animateTransform
+            attributeName="transform"
+            dur="1s"
+            from="0 512 512"
+            repeatCount="indefinite"
+            to="360 512 512"
+            type="rotate"
+          />
+        </path>
+      </g>
+    </svg>
+  );
+});
+export default StopLoadingIcon;
diff --git a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/sender/demo/actions.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-sender"
+  >
+    <textarea
+      class="ant-input ant-input-outlined ant-sender-input"
+      style="resize: none; height: -110px; max-height: -110px;"
+    />
+    <div
+      class="ant-sender-actions-list"
+    >
+      <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
+            class="ant-typography ant-typography-secondary"
+          >
+            <small>
+              \`Shift + Enter\` to submit
+            </small>
+          </span>
+        </div>
+        <div
+          class="ant-space-item"
+        >
+          <button
+            class="ant-btn ant-btn-primary ant-btn-icon-only ant-sender-actions-btn"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="open-a-i"
+                class="anticon anticon-open-a-i"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="open-a-i"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M482.88 128c-84.35 0-156.58 52.8-185.68 126.98-60.89 8.13-115.3 43.63-146.6 97.84-42.16 73-32.55 161.88 17.14 224.16-23.38 56.75-19.85 121.6 11.42 175.78 42.18 73.02 124.1 109.15 202.94 97.23C419.58 898.63 477.51 928 540.12 928c84.35 0 156.58-52.8 185.68-126.98 60.89-8.13 115.3-43.62 146.6-97.84 42.16-73 32.55-161.88-17.14-224.16 23.38-56.75 19.85-121.6-11.42-175.78-42.18-73.02-124.1-109.15-202.94-97.23C603.42 157.38 545.49 128 482.88 128m0 61.54c35.6 0 68.97 13.99 94.22 37.74-1.93 1.03-3.92 1.84-5.83 2.94l-136.68 78.91a46.11 46.11 0 00-23.09 39.78l-.84 183.6-65.72-38.34V327.4c0-76 61.9-137.86 137.94-137.86m197.7 75.9c44.19 3.14 86.16 27.44 109.92 68.57 17.8 30.8 22.38 66.7 14.43 100.42-1.88-1.17-3.6-2.49-5.53-3.6l-136.73-78.91a46.23 46.23 0 00-46-.06l-159.47 91.1.36-76.02 144.5-83.41a137.19 137.19 0 0178.53-18.09m-396.92 55.4c-.07 2.2-.3 4.35-.3 6.56v157.75a46.19 46.19 0 0022.91 39.9l158.68 92.5-66.02 37.67-144.55-83.35c-65.86-38-88.47-122.53-50.45-188.34 17.78-30.78 46.55-52.69 79.73-62.68m340.4 79.93l144.54 83.35c65.86 38 88.47 122.53 50.45 188.34-17.78 30.78-46.55 52.69-79.73 62.68.07-2.19.3-4.34.3-6.55V570.85a46.19 46.19 0 00-22.9-39.9l-158.69-92.5zM511.8 464.84l54.54 31.79-.3 63.22-54.84 31.31-54.54-31.85.3-63.16zm100.54 58.65l65.72 38.35V728.6c0 76-61.9 137.86-137.94 137.86-35.6 0-68.97-13.99-94.22-37.74 1.93-1.03 3.92-1.84 5.83-2.94l136.68-78.9a46.11 46.11 0 0023.09-39.8zm-46.54 89.55l-.36 76.02-144.5 83.41c-65.85 38-150.42 15.34-188.44-50.48-17.8-30.8-22.38-66.7-14.43-100.42 1.88 1.17 3.6 2.5 5.53 3.6l136.74 78.91a46.23 46.23 0 0046 .06z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/actions.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-sender"
+  >
+    <textarea
+      class="ant-input ant-input-outlined ant-sender-input"
+      style="resize: none; height: -110px; max-height: -110px;"
+    >
+      Hello? this is X!
+    </textarea>
+    <div
+      class="ant-sender-actions-list"
+    >
+      <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"
+        >
+          <button
+            class="ant-btn ant-btn-text ant-btn-icon-only ant-sender-actions-btn"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="clear"
+                class="anticon anticon-clear"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="clear"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+        >
+          <button
+            class="ant-btn ant-btn-text ant-btn-icon-only ant-sender-actions-btn"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="send"
+                class="anticon anticon-send"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="send"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/sender/demo/submitType.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-sender"
+  >
+    <textarea
+      class="ant-input ant-input-outlined ant-sender-input"
+      placeholder="Press Shift + Enter to send message"
+      style="resize: none; height: -110px; max-height: -110px;"
+    />
+    <div
+      class="ant-sender-actions-list"
+    >
+      <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"
+        >
+          <button
+            class="ant-btn ant-btn-text ant-btn-icon-only ant-sender-actions-btn"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="clear"
+                class="anticon anticon-clear"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="clear"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+        >
+          <button
+            class="ant-btn ant-btn-text ant-btn-icon-only ant-sender-actions-btn"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="send"
+                class="anticon anticon-send"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="send"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/submitType.tsx extend context correctly 2`] = `[]`;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Prompts":[],"Conversations":[],"Bubble":[]}
		{"Sender":[],"Prompts":[],"Conversations":[],"Bubble":[]}