feat: sender add suffix

components/sender/demo/_semantic.tsx

@@ -1,4 +1,4 @@
-import { SmileOutlined } from '@ant-design/icons';
+import { SmileOutlined, SunOutlined } from '@ant-design/icons';
 import { Sender } from '@ant-design/x';
 import { Button, Divider, Flex, Typography } from 'antd';
 import React from 'react';
@@ -8,12 +8,14 @@ import useLocale from '../../../.dumi/hooks/useLocale';
 const locales = {
   cn: {
     prefix: '前缀',
+    suffix: '后缀',
     input: '输入框',
     actions: '操作列表',
     footer: '底部',
   },
   en: {
     prefix: 'Prefix',
+    suffix: 'Suffix',
     input: 'Input',
     actions: 'Action List',
     footer: 'Footer',
@@ -42,13 +44,15 @@ const App: React.FC = () => {
         componentName="Sender"
         semantics={[
           { name: 'prefix', desc: locale.prefix },
+          { name: 'suffix', desc: locale.suffix },
           { name: 'input', desc: locale.input },
           { name: 'actions', desc: locale.actions },
           { name: 'footer', desc: locale.footer },
         ]}
       >
         <Sender
           prefix={<Button type="text" icon={<SmileOutlined />} />}
+          suffix={<Button type="text" icon={<SunOutlined />} />}
           footer={() => (
             <Typography.Text type="secondary">
               Deep thinking can understand the intent behind.

components/sender/index.tsx

@@ -60,13 +60,15 @@
   components?: SenderComponents;
   styles?: {
     prefix?: React.CSSProperties;
+    suffix?: React.CSSProperties;
     input?: React.CSSProperties;
     actions?: React.CSSProperties;
     footer?: React.CSSProperties;
   };
   rootClassName?: string;
   classNames?: {
     prefix?: string;
+    suffix?: string;
     input?: string;
     actions?: string;
     footer?: string;
@@ -76,6 +78,7 @@
   actions?: React.ReactNode | ActionsRender;
   allowSpeech?: AllowSpeech;
   prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
   footer?: React.ReactNode | FooterRender;
   header?: React.ReactNode;
   autoSize?: boolean | { minRows?: number; maxRows?: number };
@@ -124,6 +127,7 @@
     disabled,
     allowSpeech,
     prefix,
+    suffix,
     footer,
     header,
     onPaste,
@@ -351,6 +355,20 @@
             variant="borderless"
             readOnly={readOnly}
           />
+
+          {/* Suffix */}
+          {suffix && (
+            <div
+              className={classnames(
+                `${prefixCls}-suffix`,
+                contextConfig.classNames.suffix,
+                classNames.suffix,
+              )}
+              style={{ ...contextConfig.styles.suffix, ...styles.suffix }}
+            >
+              {suffix}
+            </div>
+          )}
           {/* Action List */}
           {actionNode && (
             <div

components/sender/index.zh-CN.md

@@ -46,6 +46,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cOfrS4fVkOMAAA
 | loading | 是否加载中 | boolean | false | - |
 | header | 头部面板 | ReactNode | - | - |
 | prefix | 前缀内容 | ReactNode | - | - |
+| suffix | 后缀内容 | ReactNode | - | - |
 | footer | 底部内容 | ReactNode \| (info: { components: ActionsComponents }) => ReactNode | - | - |
 | readOnly | 是否让输入框只读 | boolean | false | - |
 | rootClassName | 根元素样式类 | string | - | - |

components/sender/style/index.ts

@@ -92,6 +92,11 @@ const genSenderStyle: GenerateStyle<SenderToken> = (token) => {
         flex: 'none',
       },
 
+      // ============================ Suffix =============================
+      [`${componentCls}-suffix`]: {
+        flex: 'none',
+      },
+
       // ============================= Input =============================
       [`${componentCls}-input`]: {
         padding: 0,