fix(Sender): add disabled style for SpeechButton when browser doesn't…

packages/x/components/sender/components/SpeechButton/index.tsx

@@ -1,11 +1,13 @@
 import { AudioMutedOutlined, AudioOutlined } from '@ant-design/icons';
 import type { ButtonProps } from 'antd';
+import classNames from 'classnames';
 import * as React from 'react';
 import ActionButton, { ActionButtonContext } from '../ActionButton';
 import RecordingIcon from './RecordingIcon';
 
 function SpeechButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
   const { speechRecording, onSpeechDisabled, prefixCls } = React.useContext(ActionButtonContext);
+  const { className, ...restProps } = props;
 
   let icon: React.ReactNode = null;
   if (speechRecording) {
@@ -21,7 +23,10 @@ function SpeechButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
       icon={icon}
       color="primary"
       variant="text"
-      {...props}
+      {...restProps}
+      className={classNames(className, {
+        [`${prefixCls}-speech-disabled`]: onSpeechDisabled,
+      })}
       action="onSpeech"
       ref={ref}
     />

packages/x/components/sender/style/index.ts

@@ -127,6 +127,15 @@ const genSenderStyle: GenerateStyle<SenderToken> = (token) => {
           color: token.colorTextLightSolid,
         },
 
+        // Speech button disabled style (e.g. browser doesn't support SpeechRecognition)
+        '&-speech-disabled, &-speech-disabled[disabled]': {
+          color: token.colorTextDisabled,
+          cursor: 'not-allowed',
+          '&:hover': {
+            color: token.colorTextDisabled,
+          },
+        },
+
         '&-loading-button': {
           padding: 0,
           border: 0,