@fluentui-copilot/react-send-button 0.0.0-nightly-20250416-0405-24e1479b.1 → 0.0.0-nightly-20250418-0405-0b1ae88d.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-send-button",
   "entries": [
     {
-      "date": "Wed, 16 Apr 2025 04:13:14 GMT",
-      "tag": "@fluentui-copilot/react-send-button_v0.0.0-nightly-20250416-0405-24e1479b.1",
-      "version": "0.0.0-nightly-20250416-0405-24e1479b.1",
+      "date": "Fri, 18 Apr 2025 04:13:08 GMT",
+      "tag": "@fluentui-copilot/react-send-button_v0.0.0-nightly-20250418-0405-0b1ae88d.1",
+      "version": "0.0.0-nightly-20250418-0405-0b1ae88d.1",
       "comments": {
         "prerelease": [
           {

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # Change Log - @fluentui-copilot/react-send-button
 
-This log was last generated on Wed, 16 Apr 2025 04:13:14 GMT and should not be manually modified.
+This log was last generated on Fri, 18 Apr 2025 04:13:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250416-0405-24e1479b.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.0-nightly-20250416-0405-24e1479b.1)
+## [0.0.0-nightly-20250418-0405-0b1ae88d.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.0-nightly-20250418-0405-0b1ae88d.1)
 
-Wed, 16 Apr 2025 04:13:14 GMT
+Fri, 18 Apr 2025 04:13:08 GMT
 
 ### Changes
 

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export declare type SendButtonProps = ComponentProps<Partial<SendButtonSlots>> &
      */
     isSending?: boolean;
     isSendIconFilled?: boolean;
+    isDictationActive?: boolean;
 };
 
 export declare type SendButtonSlots = {
@@ -45,7 +46,7 @@ export declare type SendButtonSlots = {
 /**
  * State used in rendering SendButton
  */
-export declare type SendButtonState = ComponentState<SendButtonSlots> & Pick<ButtonState, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> & Pick<SendButtonProps, 'isSendIconFilled' | 'isSending'> & Pick<Required<SendButtonProps>, 'designVersion' | 'mode'> & {
+export declare type SendButtonState = ComponentState<SendButtonSlots> & Pick<ButtonState, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> & Pick<SendButtonProps, 'isSendIconFilled' | 'isSending'> & Pick<Required<SendButtonProps>, 'designVersion' | 'mode' | 'isDictationActive'> & {
     isButtonMotionRunning?: boolean;
 };
 

package/lib/components/SendButton/SendButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SendButton.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ButtonProps, ButtonState, ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nexport type SendButtonSlots = {\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n  sendIcon: NonNullable<Slot<'span'>>;\n  stopIcon?: Slot<'span'>;\n  /** Stop button's circle background */\n  stopBackground: NonNullable<Slot<'div'>>;\n  sendButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopBackgroundMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\n/**\n * SendButton Props\n */\nexport type SendButtonProps = ComponentProps<Partial<SendButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  DesignVersion &\n  CopilotMode & {\n    /**\n     * Checks whether query is sending.\n     */\n    isSending?: boolean;\n    isSendIconFilled?: boolean;\n  };\n\n/**\n * State used in rendering SendButton\n */\nexport type SendButtonState = ComponentState<SendButtonSlots> &\n  Pick<ButtonState, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  Pick<SendButtonProps, 'isSendIconFilled' | 'isSending'> &\n  Pick<Required<SendButtonProps>, 'designVersion' | 'mode'> & {\n    isButtonMotionRunning?: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA6BA;;CAEC,GACD,WAKI"}
+{"version":3,"sources":["SendButton.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ButtonProps, ButtonState, ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nexport type SendButtonSlots = {\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n  sendIcon: NonNullable<Slot<'span'>>;\n  stopIcon?: Slot<'span'>;\n  /** Stop button's circle background */\n  stopBackground: NonNullable<Slot<'div'>>;\n  sendButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopBackgroundMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\n/**\n * SendButton Props\n */\nexport type SendButtonProps = ComponentProps<Partial<SendButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  DesignVersion &\n  CopilotMode & {\n    /**\n     * Checks whether query is sending.\n     */\n    isSending?: boolean;\n    isSendIconFilled?: boolean;\n\n    /*\n     * Use alternate styles when dictation is active\n     */\n    isDictationActive?: boolean;\n  };\n\n/**\n * State used in rendering SendButton\n */\nexport type SendButtonState = ComponentState<SendButtonSlots> &\n  Pick<ButtonState, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  Pick<SendButtonProps, 'isSendIconFilled' | 'isSending'> &\n  Pick<Required<SendButtonProps>, 'designVersion' | 'mode' | 'isDictationActive'> & {\n    isButtonMotionRunning?: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAkCA;;CAEC,GACD,WAKI"}

package/lib/components/SendButton/useSendButton.js

@@ -53,6 +53,7 @@ export const useSendButton_unstable = (props, ref) => {
       }
     }
   })();
+  var _props_isDictationActive;
   const state = {
     ...buttonState,
     components: {
@@ -107,6 +108,7 @@ export const useSendButton_unstable = (props, ref) => {
       }
     }),
     isButtonMotionRunning,
+    isDictationActive: (_props_isDictationActive = props.isDictationActive) !== null && _props_isDictationActive !== void 0 ? _props_isDictationActive : false,
     isSendIconFilled: props.isSendIconFilled,
     isSending: props.isSending,
     designVersion,

package/lib/components/SendButton/useSendButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n  bundleIcon,\n  SendFilled,\n  SendRegular,\n  Stop16Filled,\n  Stop24Filled,\n  ArrowRight24Filled,\n  ArrowRight24Regular,\n  Stop20Filled,\n  ArrowRight20Regular,\n  ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\nconst SendIconV2Canvas = bundleIcon(ArrowRight24Filled, ArrowRight24Regular);\nconst SendIconV2Sidecar = bundleIcon(ArrowRight20Filled, ArrowRight20Regular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n  props: SendButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n  /** Used to apply/remove styles when button is animating */\n  const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n  const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n  const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const [visible, setVisible] = React.useState(false);\n  const mountRef = React.useCallback((elem: HTMLElement | null) => {\n    if (elem) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, []);\n  const finalRef = useMergedRefs(ref, mountRef);\n  const buttonState = useButton_unstable(\n    {\n      shape: designVersion === 'next' ? 'circular' : undefined,\n      ...(props as ButtonProps),\n      appearance: 'transparent',\n      'aria-disabled': props.disabled ? true : undefined,\n      type: 'submit',\n    },\n    finalRef,\n  );\n\n  const icon = (() => {\n    if (designVersion === 'next') {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Regular />;\n      } else {\n        return mode === 'canvas' ? <SendIconV2Canvas /> : <SendIconV2Sidecar />;\n      }\n    } else {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return <SendFilled />;\n      } else {\n        return <SendIcon />;\n      }\n    }\n  })();\n\n  const state: SendButtonState = {\n    ...buttonState,\n    components: {\n      root: 'button',\n      sendIcon: 'span',\n      stopIcon: 'span',\n      stopBackground: 'div',\n      sendButtonMotion: SendButtonMotion as React.ComponentType,\n      stopButtonMotion: StopButtonMotion as React.ComponentType,\n      stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n    },\n    root: buttonState.root,\n    sendIcon: slot.always(props.sendIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: icon,\n      },\n    }),\n    stopIcon: slot.optional(props.stopIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: designVersion === 'next' ? mode === 'canvas' ? <Stop24Filled /> : <Stop20Filled /> : <Stop16Filled />,\n      },\n      renderByDefault: true,\n    }),\n    stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n    sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n      elementType: SendButtonMotion,\n      defaultProps: {\n        visible: !props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsSendMotionRunning(false),\n        onMotionStart: () => setIsSendMotionRunning(true),\n      },\n    }),\n    stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n      elementType: StopButtonMotion,\n      defaultProps: {\n        visible: props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsStopMotionRunning(false),\n        onMotionStart: () => setIsStopMotionRunning(true),\n      },\n    }),\n    stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n      elementType: CircleButtonMotion,\n      defaultProps: {\n        visible: designVersion === 'next' ? visible : props.isSending,\n        unmountOnExit: true,\n      },\n    }),\n    isButtonMotionRunning,\n    isSendIconFilled: props.isSendIconFilled,\n    isSending: props.isSending,\n    designVersion,\n    mode,\n  };\n\n  return state;\n};\n"],"names":["React","slot","useButton_unstable","useMergedRefs","CircleButtonMotion","SendButtonMotion","StopButtonMotion","bundleIcon","SendFilled","SendRegular","Stop16Filled","Stop24Filled","ArrowRight24Filled","ArrowRight24Regular","Stop20Filled","ArrowRight20Regular","ArrowRight20Filled","presenceMotionSlot","useCopilotMode","useDesignVersion","SendIcon","SendIconV2Canvas","SendIconV2Sidecar","useSendButton_unstable","props","ref","isSendMotionRunning","setIsSendMotionRunning","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","always","elementType","defaultProps","children","optional","renderByDefault","isSending","unmountOnExit","onMotionFinish","onMotionStart"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n  bundleIcon,\n  SendFilled,\n  SendRegular,\n  Stop16Filled,\n  Stop24Filled,\n  ArrowRight24Filled,\n  ArrowRight24Regular,\n  Stop20Filled,\n  ArrowRight20Regular,\n  ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\nconst SendIconV2Canvas = bundleIcon(ArrowRight24Filled, ArrowRight24Regular);\nconst SendIconV2Sidecar = bundleIcon(ArrowRight20Filled, ArrowRight20Regular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n  props: SendButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n  /** Used to apply/remove styles when button is animating */\n  const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n  const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n  const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const [visible, setVisible] = React.useState(false);\n  const mountRef = React.useCallback((elem: HTMLElement | null) => {\n    if (elem) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, []);\n  const finalRef = useMergedRefs(ref, mountRef);\n  const buttonState = useButton_unstable(\n    {\n      shape: designVersion === 'next' ? 'circular' : undefined,\n      ...(props as ButtonProps),\n      appearance: 'transparent',\n      'aria-disabled': props.disabled ? true : undefined,\n      type: 'submit',\n    },\n    finalRef,\n  );\n\n  const icon = (() => {\n    if (designVersion === 'next') {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Regular />;\n      } else {\n        return mode === 'canvas' ? <SendIconV2Canvas /> : <SendIconV2Sidecar />;\n      }\n    } else {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return <SendFilled />;\n      } else {\n        return <SendIcon />;\n      }\n    }\n  })();\n\n  const state: SendButtonState = {\n    ...buttonState,\n    components: {\n      root: 'button',\n      sendIcon: 'span',\n      stopIcon: 'span',\n      stopBackground: 'div',\n      sendButtonMotion: SendButtonMotion as React.ComponentType,\n      stopButtonMotion: StopButtonMotion as React.ComponentType,\n      stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n    },\n    root: buttonState.root,\n    sendIcon: slot.always(props.sendIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: icon,\n      },\n    }),\n    stopIcon: slot.optional(props.stopIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: designVersion === 'next' ? mode === 'canvas' ? <Stop24Filled /> : <Stop20Filled /> : <Stop16Filled />,\n      },\n      renderByDefault: true,\n    }),\n    stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n    sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n      elementType: SendButtonMotion,\n      defaultProps: {\n        visible: !props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsSendMotionRunning(false),\n        onMotionStart: () => setIsSendMotionRunning(true),\n      },\n    }),\n    stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n      elementType: StopButtonMotion,\n      defaultProps: {\n        visible: props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsStopMotionRunning(false),\n        onMotionStart: () => setIsStopMotionRunning(true),\n      },\n    }),\n    stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n      elementType: CircleButtonMotion,\n      defaultProps: {\n        visible: designVersion === 'next' ? visible : props.isSending,\n        unmountOnExit: true,\n      },\n    }),\n    isButtonMotionRunning,\n    isDictationActive: props.isDictationActive ?? false,\n    isSendIconFilled: props.isSendIconFilled,\n    isSending: props.isSending,\n    designVersion,\n    mode,\n  };\n\n  return state;\n};\n"],"names":["React","slot","useButton_unstable","useMergedRefs","CircleButtonMotion","SendButtonMotion","StopButtonMotion","bundleIcon","SendFilled","SendRegular","Stop16Filled","Stop24Filled","ArrowRight24Filled","ArrowRight24Regular","Stop20Filled","ArrowRight20Regular","ArrowRight20Filled","presenceMotionSlot","useCopilotMode","useDesignVersion","SendIcon","SendIconV2Canvas","SendIconV2Sidecar","useSendButton_unstable","props","ref","isSendMotionRunning","setIsSendMotionRunning","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","always","elementType","defaultProps","children","optional","renderByDefault","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/SendButton/useSendButtonStyles.styles.js

@@ -70,13 +70,17 @@ const useNextStyles = __styles({
     Ijaq50: 0,
     Bq1tomu: "fwzfryc",
     qhf8xq: "f1tmlkn4",
-    Bj3rh1h: "f19g0ac"
+    Bj3rh1h: "f19g0ac",
+    sj55zd: "f1phragk"
+  },
+  dictationActive: {
+    sj55zd: "fkfq4zb"
   },
   sendIconFilled: {
-    sj55zd: "f1oyzx04"
+    sj55zd: "f1phragk"
   },
   stopIconFilled: {
-    sj55zd: "f1phragk"
+    sj55zd: "faj9fo0"
   },
   stopBackground: {
     Bw0ie65: 0,
@@ -91,19 +95,28 @@ const useNextStyles = __styles({
     Btl43ni: 0,
     B7oj6ja: 0,
     Dimara: "f44lkw9",
-    De3pzq: "f16xkysk"
+    De3pzq: "ffp7eso"
   },
   stopBackgroundSending: {
-    De3pzq: "ffp7eso"
+    De3pzq: "f16xkysk"
+  },
+  stopBackgroundDictationActive: {
+    De3pzq: "f1c21dwh"
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o"
+  },
+  stopBackgroundDisabled: {
+    De3pzq: "f1bg9a2p"
   }
 }, {
   d: [".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", [".fwzfryc{grid-area:button;}", {
     p: -1
-  }], ".f1tmlkn4{position:initial;}", ".f19g0ac{z-index:1;}", ".f1oyzx04{color:var(--colorCompoundBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", [".fwzfryc{grid-area:button;}", {
+  }], ".f1tmlkn4{position:initial;}", ".f19g0ac{z-index:1;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".fwzfryc{grid-area:button;}", {
     p: -1
   }], ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
     p: -1
-  }], ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".ffp7eso{background-color:var(--colorBrandBackground);}"]
+  }], ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"]
 });
 const useRootNextStyles = __styles({
   root: {
@@ -151,13 +164,21 @@ const useRootNextStyles = __styles({
     Bqenvij: "f1d2rq10"
   },
   notSending: {
-    Bmdhgnd: "f1hzdlu9",
-    yc1b9o: "f147vv5y",
-    f30giq: "f876z59"
-  },
-  sending: {
     Bmdhgnd: "fiaw31n",
+    yc1b9o: "f7x9b1s",
     f30giq: "f3l45fr"
+  },
+  notSendingDictationActive: {
+    Bmdhgnd: "fkhxdak",
+    jhc297: "f1dxmfzy",
+    f30giq: "f1zsivl",
+    Ba808g4: "f50srwi"
+  },
+  sending: {
+    Bmdhgnd: "f1hzdlu9",
+    uj1ttc: "fe9pnmy",
+    f30giq: "f876z59",
+    Bssu2nw: "fqsoy9w"
   }
 }, {
   d: [".f13qh94s{display:grid;}", ".f9o42qa{grid-template-areas:\"button\";}", ".f1u7ey36{grid-template-rows:1fr;}", ".f1c2z91y{grid-template-columns:1fr;}", ".f1oiokrs{justify-items:center;}", ".f122n59{align-items:center;}", [".fv5o1b5{padding:var(--spacingVerticalNone);}", {
@@ -167,8 +188,8 @@ const useRootNextStyles = __styles({
   }], ".f10pi13n{position:relative;}", [".f1pz6nmm[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}", {
     p: -1
   }], ".f43rluz[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".f12clzc2{min-width:40px;}", ".fbhnoac{height:40px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}"],
-  h: [".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".f147vv5y:hover .fai-SendButton__sendIcon,.f147vv5y:hover.fai-SendButton__stopIcon{color:var(--colorCompoundBrandBackground);}", ".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}"],
-  a: [".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}", ".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}"]
+  h: [".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}", ".f7x9b1s:hover .fai-SendButton__sendIcon,.f7x9b1s:hover.fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}", ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}", ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}", ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"],
+  a: [".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}", ".f1zsivl:active .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundPressed);}", ".f50srwi:active .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Pressed);}", ".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}", ".fqsoy9w:active .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Pressed);}"]
 });
 /**
  * Apply styling to the SendButton slots based on the state
@@ -177,6 +198,7 @@ export const useSendButtonStyles_unstable = state => {
   'use no memo';
 
   const {
+    isDictationActive,
     isSendIconFilled,
     isSending,
     disabled,
@@ -188,15 +210,15 @@ export const useSendButtonStyles_unstable = state => {
   const rootNextStyles = useRootNextStyles();
   const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
   const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
-  state.root.className = mergeClasses(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && rootNextStyles.notSending, !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
+  state.root.className = mergeClasses(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending), !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
   if (state.sendIcon) {
-    state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, state.sendIcon.className);
+    state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
   }
   if (state.stopIcon) {
     state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
   }
   if (state.stopBackground) {
-    state.stopBackground.className = mergeClasses(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, state.stopBackground.className);
+    state.stopBackground.className = mergeClasses(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive, designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled, state.stopBackground.className);
   }
   // Add style hooks from button
   useButtonStyles_unstable({

package/lib/components/SendButton/useSendButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  mergeClasses,\n  useButtonStyles_unstable,\n  createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n  root: 'fai-SendButton',\n  sendIcon: 'fai-SendButton__sendIcon',\n  stopIcon: 'fai-SendButton__stopIcon',\n  stopBackground: 'fai-SendButton__stopBackground',\n  sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n  stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n  stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    width: '32px',\n    minWidth: '32px',\n    height: '32px',\n    alignItems: 'center',\n    padding: '0',\n  },\n\n  baseIconButton: {\n    position: 'absolute',\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: tokens.fontSizeBase500, // 20px\n    height: '20px',\n    width: '20px',\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n\n  iconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      color: tokens.colorCompoundBrandBackgroundHover,\n    },\n  },\n\n  stopBackground: {\n    position: 'absolute',\n    width: 'inherit',\n    height: 'inherit',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  baseIconButton: {\n    display: 'inline-flex',\n    justifyContent: 'center',\n    gridArea: 'button',\n    position: 'initial',\n    zIndex: 1,\n  },\n\n  sendIconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n  },\n\n  stopIconFilled: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  stopBackground: {\n    gridArea: 'button',\n    height: '100%',\n    width: '100%',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n\n  stopBackgroundSending: {\n    backgroundColor: tokens.colorBrandBackground,\n  },\n});\nconst useRootNextStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateAreas: `\"button\"`,\n    gridTemplateRows: '1fr',\n    gridTemplateColumns: '1fr',\n    justifyItems: 'center',\n    alignItems: 'center',\n    padding: tokens.spacingVerticalNone,\n    border: 'none',\n    position: 'relative',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n    }),\n  },\n\n  canvas: {\n    minWidth: '40px',\n    height: '40px',\n  },\n\n  sidecar: {\n    minWidth: '32px',\n    height: '32px',\n  },\n\n  notSending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorCompoundBrandBackground,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n    },\n  },\n\n  sending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundHover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundPressed,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n  'use no memo';\n  const { isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const rootNextStyles = useRootNextStyles();\n\n  const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n  state.root.className = mergeClasses(\n    sendButtonClassNames.root,\n    designVersion === 'next' ? rootNextStyles.root : styles.root,\n    isSendIconFilled && sendIconFilledStyle,\n    (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n    designVersion === 'next' && rootNextStyles[mode],\n    designVersion === 'next' && rootNextStyles.root,\n    !disabled && designVersion === 'next' && !isSending && rootNextStyles.notSending,\n    !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.sendIcon) {\n    state.sendIcon.className = mergeClasses(\n      sendButtonClassNames.sendIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      state.sendIcon.className,\n    );\n  }\n\n  if (state.stopIcon) {\n    state.stopIcon.className = mergeClasses(\n      sendButtonClassNames.stopIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      stopIconFilledStyle,\n      state.stopIcon.className,\n    );\n  }\n\n  if (state.stopBackground) {\n    state.stopBackground.className = mergeClasses(\n      sendButtonClassNames.stopBackground,\n      designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n      designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n      state.stopBackground.className,\n    );\n  }\n\n  // Add style hooks from button\n  useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","sendIconFilled","stopIconFilled","colorNeutralForegroundOnBrand","stopBackgroundSending","colorBrandBackground","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackground2Hover","colorBrandBackground2Pressed","sending","colorBrandBackgroundHover","colorBrandBackgroundPressed","useSendButtonStyles_unstable","state","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  mergeClasses,\n  useButtonStyles_unstable,\n  createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n  root: 'fai-SendButton',\n  sendIcon: 'fai-SendButton__sendIcon',\n  stopIcon: 'fai-SendButton__stopIcon',\n  stopBackground: 'fai-SendButton__stopBackground',\n  sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n  stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n  stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    width: '32px',\n    minWidth: '32px',\n    height: '32px',\n    alignItems: 'center',\n    padding: '0',\n  },\n\n  baseIconButton: {\n    position: 'absolute',\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: tokens.fontSizeBase500, // 20px\n    height: '20px',\n    width: '20px',\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n\n  iconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      color: tokens.colorCompoundBrandBackgroundHover,\n    },\n  },\n\n  stopBackground: {\n    position: 'absolute',\n    width: 'inherit',\n    height: 'inherit',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  baseIconButton: {\n    display: 'inline-flex',\n    justifyContent: 'center',\n    gridArea: 'button',\n    position: 'initial',\n    zIndex: 1,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  dictationActive: {\n    color: tokens.colorNeutralForeground2,\n  },\n\n  sendIconFilled: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  stopIconFilled: {\n    color: tokens.colorBrandForeground2,\n  },\n\n  stopBackground: {\n    gridArea: 'button',\n    height: '100%',\n    width: '100%',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorBrandBackground,\n  },\n\n  stopBackgroundSending: {\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n\n  stopBackgroundDictationActive: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  stopBackgroundDisabled: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateAreas: `\"button\"`,\n    gridTemplateRows: '1fr',\n    gridTemplateColumns: '1fr',\n    justifyItems: 'center',\n    alignItems: 'center',\n    padding: tokens.spacingVerticalNone,\n    border: 'none',\n    position: 'relative',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n    }),\n  },\n\n  canvas: {\n    minWidth: '40px',\n    height: '40px',\n  },\n\n  sidecar: {\n    minWidth: '32px',\n    height: '32px',\n  },\n\n  notSending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundHover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundPressed,\n      },\n    },\n  },\n  notSendingDictationActive: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`& .${sendButtonClassNames.sendIcon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  sending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n      [`& .${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorBrandForeground2Hover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n      [`& .${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorBrandForeground2Pressed,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n  'use no memo';\n  const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const rootNextStyles = useRootNextStyles();\n\n  const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n  state.root.className = mergeClasses(\n    sendButtonClassNames.root,\n    designVersion === 'next' ? rootNextStyles.root : styles.root,\n    isSendIconFilled && sendIconFilledStyle,\n    (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n    designVersion === 'next' && rootNextStyles[mode],\n    designVersion === 'next' && rootNextStyles.root,\n    !disabled &&\n      designVersion === 'next' &&\n      !isSending &&\n      (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n    !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.sendIcon) {\n    state.sendIcon.className = mergeClasses(\n      sendButtonClassNames.sendIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n      disabled && designVersion === 'next' && nextStyles.disabled,\n      state.sendIcon.className,\n    );\n  }\n\n  if (state.stopIcon) {\n    state.stopIcon.className = mergeClasses(\n      sendButtonClassNames.stopIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      stopIconFilledStyle,\n      state.stopIcon.className,\n    );\n  }\n\n  if (state.stopBackground) {\n    state.stopBackground.className = mergeClasses(\n      sendButtonClassNames.stopBackground,\n      designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n      designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n      designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n      designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n      state.stopBackground.className,\n    );\n  }\n\n  // Add style hooks from button\n  useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,UAAU,EACVC,YAAY,EACZC,wBAAwB,EACxBC,+BAA+B,QAC1B,6BAA6B;AACpC,SAASC,MAAM,QAAQ,2BAA2B;AAKlD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,UAAU;IACVC,UAAU;IACVC,gBAAgB;IAChBC,kBAAkB;IAClBC,kBAAkB;IAClBC,sBAAsB;AACxB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYb,WAAW;IAC3BM,MAAM;QACJQ,SAAS;QACTC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,YAAY;QACZC,SAAS;IACX;IAEAC,gBAAgB;QACdC,UAAU;QACVH,YAAY;QACZJ,SAAS;QACTQ,gBAAgB;QAChBC,UAAUnB,OAAOoB,eAAe;QAChCP,QAAQ;QACRF,OAAO;IACT;IAEAU,UAAU;QACRC,OAAOtB,OAAOuB,8BAA8B;IAC9C;IAEAC,YAAY;QACVF,OAAOtB,OAAOyB,4BAA4B;QAC1C,UAAU;YACRH,OAAOtB,OAAO0B,iCAAiC;QACjD;IACF;IAEArB,gBAAgB;QACdY,UAAU;QACVN,OAAO;QACPE,QAAQ;QACRc,cAAc3B,OAAO4B,oBAAoB;QACzC,iFAAiF,GACjFC,iBAAiB7B,OAAO8B,qBAAqB;IAC/C;AACF;AAEA,MAAMC,gBAAgBnC,WAAW;IAC/BoB,gBAAgB;QACdN,SAAS;QACTQ,gBAAgB;QAChBc,UAAU;QACVf,UAAU;QACVgB,QAAQ;QACRX,OAAOtB,OAAOkC,6BAA6B;IAC7C;IAEAC,iBAAiB;QACfb,OAAOtB,OAAOoC,uBAAuB;IACvC;IAEAC,gBAAgB;QACdf,OAAOtB,OAAOkC,6BAA6B;IAC7C;IAEAI,gBAAgB;QACdhB,OAAOtB,OAAOuC,qBAAqB;IACrC;IAEAlC,gBAAgB;QACd2B,UAAU;QACVnB,QAAQ;QACRF,OAAO;QACPgB,cAAc3B,OAAO4B,oBAAoB;QACzCC,iBAAiB7B,OAAOwC,oBAAoB;IAC9C;IAEAC,uBAAuB;QACrBZ,iBAAiB7B,OAAO8B,qBAAqB;IAC/C;IAEAY,+BAA+B;QAC7Bb,iBAAiB7B,OAAO2C,0BAA0B;IACpD;IACAtB,UAAU;QACRC,OAAOtB,OAAOuB,8BAA8B;IAC9C;IACAqB,wBAAwB;QACtBf,iBAAiB7B,OAAO6C,8BAA8B;IACxD;AACF;AAEA,MAAMC,oBAAoBlD,WAAW;IACnCM,MAAM;QACJQ,SAAS;QACTqC,mBAAmB,CAAC,QAAQ,CAAC;QAC7BC,kBAAkB;QAClBC,qBAAqB;QACrBC,cAAc;QACdpC,YAAY;QACZC,SAASf,OAAOmD,mBAAmB;QACnCC,QAAQ;QACRnC,UAAU;QACV,GAAGlB,gCAAgC;YACjCsD,SAAS,CAAC,EAAErD,OAAOsD,gBAAgB,CAAC,OAAO,EAAEtD,OAAOuD,sBAAsB,CAAC,CAAC;YAC5EC,WAAW,CAAC,MAAM,EAAExD,OAAOsD,gBAAgB,CAAC,CAAC,EAAEtD,OAAOyD,iBAAiB,CAAC,CAAC;QAC3E,EAAE;IACJ;IAEAC,QAAQ;QACN9C,UAAU;QACVC,QAAQ;IACV;IAEA8C,SAAS;QACP/C,UAAU;QACVC,QAAQ;IACV;IAEA+C,YAAY;QACV,UAAU;YACR,CAAC,CAAC,GAAG,EAAE3D,qBAAqBI,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7CwB,iBAAiB7B,OAAO6D,yBAAyB;YACnD;YAEA,CAAC,CAAC,GAAG,EAAE5D,qBAAqBE,QAAQ,CAAC,EAAE,EAAEF,qBAAqBG,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACzEkB,OAAOtB,OAAOkC,6BAA6B;YAC7C;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEjC,qBAAqBI,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7CwB,iBAAiB7B,OAAO8D,2BAA2B;YACrD;QACF;IACF;IACAC,2BAA2B;QACzB,UAAU;YACR,CAAC,CAAC,GAAG,EAAE9D,qBAAqBI,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7CwB,iBAAiB7B,OAAOgE,0BAA0B;YACpD;YAEA,CAAC,CAAC,GAAG,EAAE/D,qBAAqBE,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCmB,OAAOtB,OAAOiE,4BAA4B;YAC5C;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEhE,qBAAqBI,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7CwB,iBAAiB7B,OAAOkE,4BAA4B;YACtD;YACA,CAAC,CAAC,GAAG,EAAEjE,qBAAqBE,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCmB,OAAOtB,OAAOmE,8BAA8B;YAC9C;QACF;IACF;IAEAC,SAAS;QACP,UAAU;YACR,CAAC,CAAC,GAAG,EAAEnE,qBAAqBI,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7CwB,iBAAiB7B,OAAOqE,0BAA0B;YACpD;YACA,CAAC,CAAC,GAAG,EAAEpE,qBAAqBG,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCkB,OAAOtB,OAAOsE,0BAA0B;YAC1C;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAErE,qBAAqBI,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC7CwB,iBAAiB7B,OAAOuE,4BAA4B;YACtD;YACA,CAAC,CAAC,GAAG,EAAEtE,qBAAqBG,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACvCkB,OAAOtB,OAAOwE,4BAA4B;YAC5C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IACA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAEC,SAAS,EAAExD,QAAQ,EAAEyD,aAAa,EAAEC,IAAI,EAAE,GAAGL;IAE1F,MAAMM,SAASvE;IACf,MAAMwE,aAAalD;IACnB,MAAMmD,iBAAiBpC;IAEvB,MAAMqC,sBAAsBL,kBAAkB,SAASG,WAAW5C,cAAc,GAAG2C,OAAOxD,UAAU;IACpG,MAAM4D,sBAAsBN,kBAAkB,SAASG,WAAW3C,cAAc,GAAG0C,OAAOxD,UAAU;IAEpGkD,MAAMxE,IAAI,CAACmF,SAAS,GAAGxF,aACrBI,qBAAqBC,IAAI,EACzB4E,kBAAkB,SAASI,eAAehF,IAAI,GAAG8E,OAAO9E,IAAI,EAC5D0E,oBAAoBO,qBACpB,AAACT,CAAAA,MAAMY,qBAAqB,IAAIT,SAAQ,KAAMM,qBAC9CL,kBAAkB,UAAUI,cAAc,CAACH,KAAK,EAChDD,kBAAkB,UAAUI,eAAehF,IAAI,EAC/C,CAACmB,YACCyD,kBAAkB,UAClB,CAACD,aACAF,CAAAA,oBAAoBO,eAAenB,yBAAyB,GAAGmB,eAAetB,UAAU,AAAD,GAC1F,CAACvC,YAAYyD,kBAAkB,UAAUD,aAAaK,eAAed,OAAO,EAC5E/C,YAAY2D,OAAO3D,QAAQ,EAC3BqD,MAAMxE,IAAI,CAACmF,SAAS;IAGtB,IAAIX,MAAMvE,QAAQ,EAAE;QAClBuE,MAAMvE,QAAQ,CAACkF,SAAS,GAAGxF,aACzBI,qBAAqBE,QAAQ,EAC7B2E,kBAAkB,SAASG,WAAWjE,cAAc,GAAGgE,OAAOhE,cAAc,EAC5E,CAACK,YAAYyD,kBAAkB,UAAU,CAACD,aAAaF,qBAAqBM,WAAW9C,eAAe,EACtGd,YAAYyD,kBAAkB,UAAUG,WAAW5D,QAAQ,EAC3DqD,MAAMvE,QAAQ,CAACkF,SAAS;IAE5B;IAEA,IAAIX,MAAMtE,QAAQ,EAAE;QAClBsE,MAAMtE,QAAQ,CAACiF,SAAS,GAAGxF,aACzBI,qBAAqBG,QAAQ,EAC7B0E,kBAAkB,SAASG,WAAWjE,cAAc,GAAGgE,OAAOhE,cAAc,EAC5EoE,qBACAV,MAAMtE,QAAQ,CAACiF,SAAS;IAE5B;IAEA,IAAIX,MAAMrE,cAAc,EAAE;QACxBqE,MAAMrE,cAAc,CAACgF,SAAS,GAAGxF,aAC/BI,qBAAqBI,cAAc,EACnCyE,kBAAkB,SAASG,WAAW5E,cAAc,GAAG2E,OAAO3E,cAAc,EAC5EyE,kBAAkB,UAAUD,aAAaI,WAAWxC,qBAAqB,EACzEqC,kBAAkB,UAAU,CAACD,aAAaF,qBAAqBM,WAAWvC,6BAA6B,EACvGoC,kBAAkB,UAAUzD,YAAY4D,WAAWrC,sBAAsB,EACzE8B,MAAMrE,cAAc,CAACgF,SAAS;IAElC;IAEA,8BAA8B;IAC9BvF,yBAAyB;QAAE,GAAG4E,KAAK;QAAEa,YAAY;YAAE,GAAGb,MAAMa,UAAU;YAAEC,MAAM;QAAO;QAAGC,UAAU;IAAM;IAExG,OAAOf;AACT,EAAE"}

package/lib-commonjs/components/SendButton/SendButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SendButton.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ButtonProps, ButtonState, ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nexport type SendButtonSlots = {\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n  sendIcon: NonNullable<Slot<'span'>>;\n  stopIcon?: Slot<'span'>;\n  /** Stop button's circle background */\n  stopBackground: NonNullable<Slot<'div'>>;\n  sendButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopBackgroundMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\n/**\n * SendButton Props\n */\nexport type SendButtonProps = ComponentProps<Partial<SendButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  DesignVersion &\n  CopilotMode & {\n    /**\n     * Checks whether query is sending.\n     */\n    isSending?: boolean;\n    isSendIconFilled?: boolean;\n  };\n\n/**\n * State used in rendering SendButton\n */\nexport type SendButtonState = ComponentState<SendButtonSlots> &\n  Pick<ButtonState, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  Pick<SendButtonProps, 'isSendIconFilled' | 'isSending'> &\n  Pick<Required<SendButtonProps>, 'designVersion' | 'mode'> & {\n    isButtonMotionRunning?: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA6BA;;CAEC"}
+{"version":3,"sources":["SendButton.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ButtonProps, ButtonState, ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nexport type SendButtonSlots = {\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n  sendIcon: NonNullable<Slot<'span'>>;\n  stopIcon?: Slot<'span'>;\n  /** Stop button's circle background */\n  stopBackground: NonNullable<Slot<'div'>>;\n  sendButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopButtonMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n  stopBackgroundMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\n/**\n * SendButton Props\n */\nexport type SendButtonProps = ComponentProps<Partial<SendButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  DesignVersion &\n  CopilotMode & {\n    /**\n     * Checks whether query is sending.\n     */\n    isSending?: boolean;\n    isSendIconFilled?: boolean;\n\n    /*\n     * Use alternate styles when dictation is active\n     */\n    isDictationActive?: boolean;\n  };\n\n/**\n * State used in rendering SendButton\n */\nexport type SendButtonState = ComponentState<SendButtonSlots> &\n  Pick<ButtonState, 'appearance' | 'disabled' | 'disabledFocusable' | 'iconPosition' | 'shape' | 'size'> &\n  Pick<SendButtonProps, 'isSendIconFilled' | 'isSending'> &\n  Pick<Required<SendButtonProps>, 'designVersion' | 'mode' | 'isDictationActive'> & {\n    isButtonMotionRunning?: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAkCA;;CAEC"}

package/lib-commonjs/components/SendButton/useSendButton.js

@@ -55,6 +55,7 @@ const useSendButton_unstable = (props, ref)=>{
             }
         }
     })();
+    var _props_isDictationActive;
     const state = {
         ...buttonState,
         components: {
@@ -109,6 +110,7 @@ const useSendButton_unstable = (props, ref)=>{
             }
         }),
         isButtonMotionRunning,
+        isDictationActive: (_props_isDictationActive = props.isDictationActive) !== null && _props_isDictationActive !== void 0 ? _props_isDictationActive : false,
         isSendIconFilled: props.isSendIconFilled,
         isSending: props.isSending,
         designVersion,

package/lib-commonjs/components/SendButton/useSendButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n  bundleIcon,\n  SendFilled,\n  SendRegular,\n  Stop16Filled,\n  Stop24Filled,\n  ArrowRight24Filled,\n  ArrowRight24Regular,\n  Stop20Filled,\n  ArrowRight20Regular,\n  ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\nconst SendIconV2Canvas = bundleIcon(ArrowRight24Filled, ArrowRight24Regular);\nconst SendIconV2Sidecar = bundleIcon(ArrowRight20Filled, ArrowRight20Regular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n  props: SendButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n  /** Used to apply/remove styles when button is animating */\n  const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n  const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n  const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const [visible, setVisible] = React.useState(false);\n  const mountRef = React.useCallback((elem: HTMLElement | null) => {\n    if (elem) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, []);\n  const finalRef = useMergedRefs(ref, mountRef);\n  const buttonState = useButton_unstable(\n    {\n      shape: designVersion === 'next' ? 'circular' : undefined,\n      ...(props as ButtonProps),\n      appearance: 'transparent',\n      'aria-disabled': props.disabled ? true : undefined,\n      type: 'submit',\n    },\n    finalRef,\n  );\n\n  const icon = (() => {\n    if (designVersion === 'next') {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Regular />;\n      } else {\n        return mode === 'canvas' ? <SendIconV2Canvas /> : <SendIconV2Sidecar />;\n      }\n    } else {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return <SendFilled />;\n      } else {\n        return <SendIcon />;\n      }\n    }\n  })();\n\n  const state: SendButtonState = {\n    ...buttonState,\n    components: {\n      root: 'button',\n      sendIcon: 'span',\n      stopIcon: 'span',\n      stopBackground: 'div',\n      sendButtonMotion: SendButtonMotion as React.ComponentType,\n      stopButtonMotion: StopButtonMotion as React.ComponentType,\n      stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n    },\n    root: buttonState.root,\n    sendIcon: slot.always(props.sendIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: icon,\n      },\n    }),\n    stopIcon: slot.optional(props.stopIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: designVersion === 'next' ? mode === 'canvas' ? <Stop24Filled /> : <Stop20Filled /> : <Stop16Filled />,\n      },\n      renderByDefault: true,\n    }),\n    stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n    sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n      elementType: SendButtonMotion,\n      defaultProps: {\n        visible: !props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsSendMotionRunning(false),\n        onMotionStart: () => setIsSendMotionRunning(true),\n      },\n    }),\n    stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n      elementType: StopButtonMotion,\n      defaultProps: {\n        visible: props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsStopMotionRunning(false),\n        onMotionStart: () => setIsStopMotionRunning(true),\n      },\n    }),\n    stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n      elementType: CircleButtonMotion,\n      defaultProps: {\n        visible: designVersion === 'next' ? visible : props.isSending,\n        unmountOnExit: true,\n      },\n    }),\n    isButtonMotionRunning,\n    isSendIconFilled: props.isSendIconFilled,\n    isSending: props.isSending,\n    designVersion,\n    mode,\n  };\n\n  return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","SendIconV2Canvas","ArrowRight24Filled","ArrowRight24Regular","SendIconV2Sidecar","ArrowRight20Filled","ArrowRight20Regular","props","ref","React","useState","setIsSendMotionRunning","isStopMotionRunning","isButtonMotionRunning","isSendMotionRunning","useDesignVersion","designVersion","useCopilotMode","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","useButton_unstable","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","createElement","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","StopButtonMotion","stopBackgroundMotion","CircleButtonMotion","slot","always","elementType","defaultProps","children","Stop24Filled","Stop20Filled","Stop16Filled","SendButtonMotion","unmountOnExit","onMotionFinish","onMotionStart","setIsStopMotionRunning","isSending"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n  bundleIcon,\n  SendFilled,\n  SendRegular,\n  Stop16Filled,\n  Stop24Filled,\n  ArrowRight24Filled,\n  ArrowRight24Regular,\n  Stop20Filled,\n  ArrowRight20Regular,\n  ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\nconst SendIconV2Canvas = bundleIcon(ArrowRight24Filled, ArrowRight24Regular);\nconst SendIconV2Sidecar = bundleIcon(ArrowRight20Filled, ArrowRight20Regular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n  props: SendButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n  /** Used to apply/remove styles when button is animating */\n  const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n  const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n  const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const [visible, setVisible] = React.useState(false);\n  const mountRef = React.useCallback((elem: HTMLElement | null) => {\n    if (elem) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, []);\n  const finalRef = useMergedRefs(ref, mountRef);\n  const buttonState = useButton_unstable(\n    {\n      shape: designVersion === 'next' ? 'circular' : undefined,\n      ...(props as ButtonProps),\n      appearance: 'transparent',\n      'aria-disabled': props.disabled ? true : undefined,\n      type: 'submit',\n    },\n    finalRef,\n  );\n\n  const icon = (() => {\n    if (designVersion === 'next') {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Regular />;\n      } else {\n        return mode === 'canvas' ? <SendIconV2Canvas /> : <SendIconV2Sidecar />;\n      }\n    } else {\n      if (props.isSendIconFilled || isButtonMotionRunning) {\n        return <SendFilled />;\n      } else {\n        return <SendIcon />;\n      }\n    }\n  })();\n\n  const state: SendButtonState = {\n    ...buttonState,\n    components: {\n      root: 'button',\n      sendIcon: 'span',\n      stopIcon: 'span',\n      stopBackground: 'div',\n      sendButtonMotion: SendButtonMotion as React.ComponentType,\n      stopButtonMotion: StopButtonMotion as React.ComponentType,\n      stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n    },\n    root: buttonState.root,\n    sendIcon: slot.always(props.sendIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: icon,\n      },\n    }),\n    stopIcon: slot.optional(props.stopIcon, {\n      elementType: 'span',\n      defaultProps: {\n        children: designVersion === 'next' ? mode === 'canvas' ? <Stop24Filled /> : <Stop20Filled /> : <Stop16Filled />,\n      },\n      renderByDefault: true,\n    }),\n    stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n    sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n      elementType: SendButtonMotion,\n      defaultProps: {\n        visible: !props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsSendMotionRunning(false),\n        onMotionStart: () => setIsSendMotionRunning(true),\n      },\n    }),\n    stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n      elementType: StopButtonMotion,\n      defaultProps: {\n        visible: props.isSending,\n        unmountOnExit: true,\n        onMotionFinish: () => setIsStopMotionRunning(false),\n        onMotionStart: () => setIsStopMotionRunning(true),\n      },\n    }),\n    stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n      elementType: CircleButtonMotion,\n      defaultProps: {\n        visible: designVersion === 'next' ? visible : props.isSending,\n        unmountOnExit: true,\n      },\n    }),\n    isButtonMotionRunning,\n    isDictationActive: props.isDictationActive ?? false,\n    isSendIconFilled: props.isSendIconFilled,\n    isSending: props.isSending,\n    designVersion,\n    mode,\n  };\n\n  return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","SendIconV2Canvas","ArrowRight24Filled","ArrowRight24Regular","SendIconV2Sidecar","ArrowRight20Filled","ArrowRight20Regular","props","ref","React","useState","setIsSendMotionRunning","isStopMotionRunning","isButtonMotionRunning","isSendMotionRunning","useDesignVersion","designVersion","useCopilotMode","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","useButton_unstable","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","createElement","_props_isDictationActive","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","StopButtonMotion","stopBackgroundMotion","CircleButtonMotion","slot","always","elementType","defaultProps","children","Stop24Filled","Stop20Filled","Stop16Filled","SendButtonMotion","unmountOnExit","onMotionFinish","onMotionStart","setIsStopMotionRunning","isSending","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js

@@ -113,13 +113,17 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         Ijaq50: 0,
         Bq1tomu: "fwzfryc",
         qhf8xq: "f1tmlkn4",
-        Bj3rh1h: "f19g0ac"
+        Bj3rh1h: "f19g0ac",
+        sj55zd: "f1phragk"
+    },
+    dictationActive: {
+        sj55zd: "fkfq4zb"
     },
     sendIconFilled: {
-        sj55zd: "f1oyzx04"
+        sj55zd: "f1phragk"
     },
     stopIconFilled: {
-        sj55zd: "f1phragk"
+        sj55zd: "faj9fo0"
     },
     stopBackground: {
         Bw0ie65: 0,
@@ -134,10 +138,19 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         Btl43ni: 0,
         B7oj6ja: 0,
         Dimara: "f44lkw9",
-        De3pzq: "f16xkysk"
+        De3pzq: "ffp7eso"
     },
     stopBackgroundSending: {
-        De3pzq: "ffp7eso"
+        De3pzq: "f16xkysk"
+    },
+    stopBackgroundDictationActive: {
+        De3pzq: "f1c21dwh"
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o"
+    },
+    stopBackgroundDisabled: {
+        De3pzq: "f1bg9a2p"
     }
 }, {
     d: [
@@ -151,8 +164,9 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         ],
         ".f1tmlkn4{position:initial;}",
         ".f19g0ac{z-index:1;}",
-        ".f1oyzx04{color:var(--colorCompoundBrandBackground);}",
         ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".faj9fo0{color:var(--colorBrandForeground2);}",
         [
             ".fwzfryc{grid-area:button;}",
             {
@@ -167,8 +181,11 @@ const useNextStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
+        ".ffp7eso{background-color:var(--colorBrandBackground);}",
         ".f16xkysk{background-color:var(--colorBrandBackground2);}",
-        ".ffp7eso{background-color:var(--colorBrandBackground);}"
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"
     ]
 });
 const useRootNextStyles = (0, _reactcomponents.__styles)({
@@ -217,13 +234,21 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
         Bqenvij: "f1d2rq10"
     },
     notSending: {
-        Bmdhgnd: "f1hzdlu9",
-        yc1b9o: "f147vv5y",
-        f30giq: "f876z59"
-    },
-    sending: {
         Bmdhgnd: "fiaw31n",
+        yc1b9o: "f7x9b1s",
         f30giq: "f3l45fr"
+    },
+    notSendingDictationActive: {
+        Bmdhgnd: "fkhxdak",
+        jhc297: "f1dxmfzy",
+        f30giq: "f1zsivl",
+        Ba808g4: "f50srwi"
+    },
+    sending: {
+        Bmdhgnd: "f1hzdlu9",
+        uj1ttc: "fe9pnmy",
+        f30giq: "f876z59",
+        Bssu2nw: "fqsoy9w"
     }
 }, {
     d: [
@@ -259,32 +284,38 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
         ".f1d2rq10{height:32px;}"
     ],
     h: [
+        ".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}",
+        ".f7x9b1s:hover .fai-SendButton__sendIcon,.f7x9b1s:hover.fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}",
+        ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}",
+        ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}",
         ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}",
-        ".f147vv5y:hover .fai-SendButton__sendIcon,.f147vv5y:hover.fai-SendButton__stopIcon{color:var(--colorCompoundBrandBackground);}",
-        ".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}"
+        ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"
     ],
     a: [
+        ".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}",
+        ".f1zsivl:active .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundPressed);}",
+        ".f50srwi:active .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Pressed);}",
         ".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}",
-        ".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}"
+        ".fqsoy9w:active .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Pressed);}"
     ]
 });
 const useSendButtonStyles_unstable = (state)=>{
     'use no memo';
-    const { isSendIconFilled, isSending, disabled, designVersion, mode } = state;
+    const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
     const styles = useStyles();
     const nextStyles = useNextStyles();
     const rootNextStyles = useRootNextStyles();
     const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
     const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
-    state.root.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && rootNextStyles.notSending, !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending), !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
     if (state.sendIcon) {
-        state.sendIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, state.sendIcon.className);
+        state.sendIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
     }
     if (state.stopIcon) {
         state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
     }
     if (state.stopBackground) {
-        state.stopBackground.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, state.stopBackground.className);
+        state.stopBackground.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive, designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled, state.stopBackground.className);
     }
     // Add style hooks from button
     (0, _reactcomponents.useButtonStyles_unstable)({

package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  mergeClasses,\n  useButtonStyles_unstable,\n  createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n  root: 'fai-SendButton',\n  sendIcon: 'fai-SendButton__sendIcon',\n  stopIcon: 'fai-SendButton__stopIcon',\n  stopBackground: 'fai-SendButton__stopBackground',\n  sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n  stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n  stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    width: '32px',\n    minWidth: '32px',\n    height: '32px',\n    alignItems: 'center',\n    padding: '0',\n  },\n\n  baseIconButton: {\n    position: 'absolute',\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: tokens.fontSizeBase500, // 20px\n    height: '20px',\n    width: '20px',\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n\n  iconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      color: tokens.colorCompoundBrandBackgroundHover,\n    },\n  },\n\n  stopBackground: {\n    position: 'absolute',\n    width: 'inherit',\n    height: 'inherit',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  baseIconButton: {\n    display: 'inline-flex',\n    justifyContent: 'center',\n    gridArea: 'button',\n    position: 'initial',\n    zIndex: 1,\n  },\n\n  sendIconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n  },\n\n  stopIconFilled: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  stopBackground: {\n    gridArea: 'button',\n    height: '100%',\n    width: '100%',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n\n  stopBackgroundSending: {\n    backgroundColor: tokens.colorBrandBackground,\n  },\n});\nconst useRootNextStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateAreas: `\"button\"`,\n    gridTemplateRows: '1fr',\n    gridTemplateColumns: '1fr',\n    justifyItems: 'center',\n    alignItems: 'center',\n    padding: tokens.spacingVerticalNone,\n    border: 'none',\n    position: 'relative',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n    }),\n  },\n\n  canvas: {\n    minWidth: '40px',\n    height: '40px',\n  },\n\n  sidecar: {\n    minWidth: '32px',\n    height: '32px',\n  },\n\n  notSending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorCompoundBrandBackground,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n    },\n  },\n\n  sending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundHover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundPressed,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n  'use no memo';\n  const { isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const rootNextStyles = useRootNextStyles();\n\n  const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n  state.root.className = mergeClasses(\n    sendButtonClassNames.root,\n    designVersion === 'next' ? rootNextStyles.root : styles.root,\n    isSendIconFilled && sendIconFilledStyle,\n    (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n    designVersion === 'next' && rootNextStyles[mode],\n    designVersion === 'next' && rootNextStyles.root,\n    !disabled && designVersion === 'next' && !isSending && rootNextStyles.notSending,\n    !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.sendIcon) {\n    state.sendIcon.className = mergeClasses(\n      sendButtonClassNames.sendIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      state.sendIcon.className,\n    );\n  }\n\n  if (state.stopIcon) {\n    state.stopIcon.className = mergeClasses(\n      sendButtonClassNames.stopIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      stopIconFilledStyle,\n      state.stopIcon.className,\n    );\n  }\n\n  if (state.stopBackground) {\n    state.stopBackground.className = mergeClasses(\n      sendButtonClassNames.stopBackground,\n      designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n      designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n      state.stopBackground.className,\n    );\n  }\n\n  // Add style hooks from button\n  useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n  return state;\n};\n"],"names":["sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","__styles","display","width","minWidth","height","alignItems","padding","Byoj8tv","baseIconButton","position","tokens","mc9l5x","disabled","color","Bqenvij","iconFilled","borderRadius","Beyfa6y","Bbmb7ep","useNextStyles","justifyContent","gridArea","sendIconFilled","colorCompoundBrandBackground","p","stopIconFilled","nk6f5a","stopBackgroundSending","backgroundColor","qhf8xq","Bj3rh1h","gridTemplateRows","gridTemplateColumns","border","createCustomFocusIndicatorStyle","outline","boxShadow","canvas","Dimara","sidecar","De3pzq","wkccdc","sending","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","u1mtju","h3c5rm","isSendIconFilled","vrafjx","styles","Bekrc4i","nextStyles","i8vvqc","rootNextStyles","g2u3we","sendIconFilledStyle","icvyot","stopIconFilledStyle","state","irswps","Bfpq7zp","g9k6zt","giviqs","j6ew2k","Bf4jedk","useButtonStyles_unstable","components","icon","iconOnly","Bmdhgnd","yc1b9o","f30giq"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,oBAAAA;eAAAA;;;;;;iCAPoB;AAO1B,MAAMA,uBAAwD;UACnEC;cACAC;cACAC;oBACAC;sBACAC;sBACAC;0BACAC;AACF;AAEA;;CAEC,SAECN,YAAMO,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,QAAAA;gBACEC;gBACAJ;iBACAJ;;oBAEUS;gBACVN;iBACAF;QACFS,QAAA;QAEAC,SAAAA;iBACEC;QACFC,SAAA;QAEAC,QAAAA;;cAEE;gBACEF;;gBAEJ;QAEAjB,QAAAA;iBACEa;;oBAEQ;gBACRO;gBACA;QAEFF,SAAA;QACFG,SAAA;QAEAC,SAAMC;QACJX,SAAAA;iBACEP;gBACAmB;gBACAC;;;OAGF;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAEAC,GAAAA,CAAAA;;;;QACgBC;QAA4B;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAC5CC,GAAA,CAAA;;SAEAC;QAAAA;KAAgB;;;KAC6B;;MAG7C7B,gBAAgBI,IAAAA,yBAAA,EAAA;oBACJ;gBACVI;iBACAF;iBACAc;iBACA;QAEFU,QAAA;QAEAC,QAAAA;iBACEC;QACFC,QAAA;QACFC,SAAA;IACA;oBACQ;gBACJ7B;;oBAEA8B;gBACAC;;oBAEA3B;iBACAC;iBACA2B;gBACAxB;gBACGyB;iBACDC;iBACAC;gBACA;QACJnB,SAAA;QAEAoB,SAAQ;iBACNlC;iBACAC;QACFkC,QAAA;QAEAC,QAAAA;;2BAEU;QACVC,QAAA;;;;;QAIgC5C;QAAmB;YAAA;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;YAAA;YAAA;;;;;QAGgB2B;QAA4B;YAAA;YAAA;;;;;QAE9C;KAAA;;0BAES/B,IAAAA,yBAAAA,EAAAA;;gBAEP;gBACF;QACFiD,QAAA;QAEAC,SAAS;iBACP;iBACG;;gBAED;gBACF;gBACA;iBACG;;iBAED;gBACF;QACFC,SAAA;QACFC,SAAA;QAEAC,QAAA;;QAGAC,QAAO;QACLC,QAAA;QACAC,QAAQC;QAERC,QAAMC;QACNC,SAAMC;QACNC,QAAMC;QAENC,QAAMC;QACNC,QAAMC;QAENC,SAAMnE;QAaNoE,QAAID;gBACFA;QAKFE,SAAA;QAEAC,QAAIH;iBACFA;QAMFI,QAAA;QAEAC,QAAIL;;YAOJ;QAEAM,SAAA;QACAC,SAAAA;;aAAqCC;iBAAc;iBAAqBC;;gBAAgBC;QAAgBC,SAAA;QAExGC,QAAOZ;QACPa,QAAA"}
+{"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeStyles,\n  mergeClasses,\n  useButtonStyles_unstable,\n  createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n  root: 'fai-SendButton',\n  sendIcon: 'fai-SendButton__sendIcon',\n  stopIcon: 'fai-SendButton__stopIcon',\n  stopBackground: 'fai-SendButton__stopBackground',\n  sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n  stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n  stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    width: '32px',\n    minWidth: '32px',\n    height: '32px',\n    alignItems: 'center',\n    padding: '0',\n  },\n\n  baseIconButton: {\n    position: 'absolute',\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: tokens.fontSizeBase500, // 20px\n    height: '20px',\n    width: '20px',\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n\n  iconFilled: {\n    color: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      color: tokens.colorCompoundBrandBackgroundHover,\n    },\n  },\n\n  stopBackground: {\n    position: 'absolute',\n    width: 'inherit',\n    height: 'inherit',\n    borderRadius: tokens.borderRadiusCircular,\n    /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n});\n\nconst useNextStyles = makeStyles({\n  baseIconButton: {\n    display: 'inline-flex',\n    justifyContent: 'center',\n    gridArea: 'button',\n    position: 'initial',\n    zIndex: 1,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  dictationActive: {\n    color: tokens.colorNeutralForeground2,\n  },\n\n  sendIconFilled: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  stopIconFilled: {\n    color: tokens.colorBrandForeground2,\n  },\n\n  stopBackground: {\n    gridArea: 'button',\n    height: '100%',\n    width: '100%',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorBrandBackground,\n  },\n\n  stopBackgroundSending: {\n    backgroundColor: tokens.colorBrandBackground2,\n  },\n\n  stopBackgroundDictationActive: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  stopBackgroundDisabled: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateAreas: `\"button\"`,\n    gridTemplateRows: '1fr',\n    gridTemplateColumns: '1fr',\n    justifyItems: 'center',\n    alignItems: 'center',\n    padding: tokens.spacingVerticalNone,\n    border: 'none',\n    position: 'relative',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n    }),\n  },\n\n  canvas: {\n    minWidth: '40px',\n    height: '40px',\n  },\n\n  sidecar: {\n    minWidth: '32px',\n    height: '32px',\n  },\n\n  notSending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundHover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackgroundPressed,\n      },\n    },\n  },\n  notSendingDictationActive: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n\n      [`& .${sendButtonClassNames.sendIcon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`& .${sendButtonClassNames.sendIcon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  sending: {\n    ':hover': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Hover,\n      },\n      [`& .${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorBrandForeground2Hover,\n      },\n    },\n    ':active': {\n      [`& .${sendButtonClassNames.stopBackground}`]: {\n        backgroundColor: tokens.colorBrandBackground2Pressed,\n      },\n      [`& .${sendButtonClassNames.stopIcon}`]: {\n        color: tokens.colorBrandForeground2Pressed,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n  'use no memo';\n  const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const rootNextStyles = useRootNextStyles();\n\n  const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n  state.root.className = mergeClasses(\n    sendButtonClassNames.root,\n    designVersion === 'next' ? rootNextStyles.root : styles.root,\n    isSendIconFilled && sendIconFilledStyle,\n    (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n    designVersion === 'next' && rootNextStyles[mode],\n    designVersion === 'next' && rootNextStyles.root,\n    !disabled &&\n      designVersion === 'next' &&\n      !isSending &&\n      (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n    !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.sendIcon) {\n    state.sendIcon.className = mergeClasses(\n      sendButtonClassNames.sendIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n      disabled && designVersion === 'next' && nextStyles.disabled,\n      state.sendIcon.className,\n    );\n  }\n\n  if (state.stopIcon) {\n    state.stopIcon.className = mergeClasses(\n      sendButtonClassNames.stopIcon,\n      designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n      stopIconFilledStyle,\n      state.stopIcon.className,\n    );\n  }\n\n  if (state.stopBackground) {\n    state.stopBackground.className = mergeClasses(\n      sendButtonClassNames.stopBackground,\n      designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n      designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n      designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n      designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n      state.stopBackground.className,\n    );\n  }\n\n  // Add style hooks from button\n  useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n  return state;\n};\n"],"names":["sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","__styles","display","width","minWidth","height","alignItems","padding","Byoj8tv","baseIconButton","position","tokens","mc9l5x","disabled","color","Bqenvij","iconFilled","borderRadius","Beyfa6y","Bbmb7ep","useNextStyles","justifyContent","gridArea","colorNeutralForegroundOnBrand","p","dictationActive","sendIconFilled","stopIconFilled","Brf1p80","backgroundColor","Bj3rh1h","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Bw0ie65","Br312pm","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","border","createCustomFocusIndicatorStyle","sidecar","De3pzq","wkccdc","notSendingDictationActive","h3c5rm","sending","Bf4jedk","Bmdhgnd","isDictationActive","yc1b9o","styles","f30giq","nextStyles","sendIconFilledStyle","stopIconFilledStyle","state","uj1ttc","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,oBAAAA;eAAAA;;;;;;iCAPoB;AAO1B,MAAMA,uBAAwD;UACnEC;cACAC;cACAC;oBACAC;sBACAC;sBACAC;0BACAC;AACF;AAEA;;CAEC,SAECN,YAAMO,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,QAAAA;gBACEC;gBACAJ;iBACAJ;;oBAEUS;gBACVN;iBACAF;QACFS,QAAA;QAEAC,SAAAA;iBACEC;QACFC,SAAA;QAEAC,QAAAA;;cAEE;gBACEF;;gBAEJ;QAEAjB,QAAAA;iBACEa;;oBAEQ;gBACRO;gBACA;QAEFF,SAAA;QACFG,SAAA;QAEAC,SAAMC;QACJX,SAAAA;iBACEP;gBACAmB;gBACAC;;;;;QAGcC;QAA6B;QAAA;QAAA;QAAA;YAAA;YAAA;gBAC7CC,GAAA,CAAA;;SAEAC;QAAAA;QAAiB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACfX;;SACF;QAAA;KAAA;OAEAY;QAAAA;KAAgB;;MAEhBN,gBAAAnB,IAAAA,yBAAA,EAAA;oBAEA0B;gBACEb;QACFc,SAAA;QAEA/B,SAAAA;iBACEyB;gBACAjB;gBACAF;iBACAc;gBACAY;QACFC,SAAA;QAEAC,QAAAA;;qBAEA;QAEAC,QAAAA;;oBAEA;QACAnB,QAAAA;;oBAEA;QACAoB,QAAAA;;oBAEA;QACFC,SAAA;QAEAC,SAAMC;QACJ1C,QAAM;gBACJQ;iBACAmC;iBACAC;gBACAC;iBACAC;iBACAlC;iBACAC;iBACAkC;gBACA/B;gBACGgC;;2BAEW;gBACZ;;mCAGI;gBACNtC;;cAEF;QAEAuC,QAAAA;;4BAEU;QACVC,QAAA;;;;;QAIgC/C;QAAmB;YAAA;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;;;;;QAGgB0B;QAAAA;YAA6B;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;KAAA;;0BAES9B,IAAAA,yBAAAA,EAAAA;;gBAEP;gBACF;QACFoD,QAAA;QACAC,SAAAA;iBACE;iBACG;;gBAED;gBAEA;;iBAEA;iBACF;iBACA;gBACE;;iBAEA;gBACA;;gBAEA;gBACF;QACFC,QAAA;QAEAC,QAAAA;iBACE;gBACE;;gBAEA;iBACC;;gBAED;iBACF;gBACA;iBACG;;gBAED;;;iBAGA;iBACF;;IAEJL,SAAA;QAEAM,SAAA;;IAEC;gBAEC;QACAC,SAAQC;QAERC,QAAMC;QACNC,QAAMC;;+BAGAC;QACNN,SAAMO;QAENC,QAAMhE;QAgBN4D,QAAII;iBACFA;;aASEA;iBACFA;QAMFC,QAAA;QAEAL,QAAII;iBACFA;;;OAWFE;QAAAA;QAAyB;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBAAE;;;;;YAAsB;;;;;QAA6B;YAAA;YAAA;oBAAO;;;;QAAa;QAAA;QAAA;QAAA;KAAA;OAAM;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;OAExG;QAAA;QAAOF;QAAAA;QAAAA;QAAAA;KAAAA;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-send-button",
-  "version": "0.0.0-nightly-20250416-0405-24e1479b.1",
+  "version": "0.0.0-nightly-20250418-0405-0b1ae88d.1",
   "description": "Fluent AI control for the send button used in ChatInput and PromptInput.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,9 +12,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.0.0-nightly-20250416-0405-24e1479b.1",
-    "@fluentui-copilot/react-utilities": "^0.0.0-nightly-20250416-0405-24e1479b.1",
-    "@fluentui-copilot/tokens": "^0.0.0-nightly-20250416-0405-24e1479b.1",
+    "@fluentui-copilot/react-provider": "^0.0.0-nightly-20250418-0405-0b1ae88d.1",
+    "@fluentui-copilot/react-utilities": "^0.0.0-nightly-20250418-0405-0b1ae88d.1",
+    "@fluentui-copilot/tokens": "^0.0.0-nightly-20250418-0405-0b1ae88d.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {