feat: Audio input button transition (DSN-2581) (#375)

<!-- You can erase any parts of this template not applicable to your Pull Request. -->

**Fixes or implements VF-XXX**

### Brief description. What is this change?

<!-- Build up some context for your teammates on the changes made here and potential tradeoffs made and/or highlight any topics for discussion -->

### Implementation details. How do you make this change?

<!-- Explain the way/approach you follow to make this change more deeply in order to help your teammates to understand much easier this change -->

### Setup information

<!-- Notes regarding local environment. These should note any new configurations, new environment variables, etc. -->

### Deployment Notes

<!-- Notes regarding deployment the contained body of work. These should note any db migrations, etc. -->

### Related PRs

<!-- List related PRs against other branches -->

- https://github.com/voiceflow/XXXXXXXXX/pull/123

### Checklist

- [ ] Breaking changes have been communicated, including:
    - New required environment variables
    - Renaming of interfaces (API routes, request/response interface, etc)
- [ ] New environment variables have [been deployed](https://www.notion.so/voiceflow/Add-Environment-Variables-be1b0136479f45f1adece7995a7adbfb)
- [ ] Appropriate tests have been written
    - Bug fixes are accompanied by an updated or new test
    - New features are accompanied by a new test

packages/chat/src/components/MessageInput/AudioInputButton.tsx

@@ -11,6 +11,7 @@ interface AudioInputButtonProps {
   listening?: boolean;
   processing?: boolean;
   initializing?: boolean;
+  showButton?: boolean;
 }
 
 export const AudioInputButton: React.FC<AudioInputButtonProps> = ({
@@ -19,13 +20,14 @@ export const AudioInputButton: React.FC<AudioInputButtonProps> = ({
   listening,
   processing,
   initializing,
+  showButton,
 }) => {
   return (
     <button
       className={clsx(
         squareButtonStyles({ size: 'medium', isActive: listening }),
         SquareButtonTheme.light,
-        audioInputButton()
+        audioInputButton({ hidden: !showButton })
       )}
       onClick={listening ? onStop : onStart}
       disabled={processing || initializing}

packages/chat/src/components/MessageInput/MessageInput.css.ts

@@ -117,12 +117,25 @@ export const audioInputButton = recipe({
   base: {
     display: 'flex',
     borderRadius: 100,
+    overflow: 'hidden', // Ensures smooth shrinking
+    transition: transition(['opacity', 'width']), // Common transitions
   },
   variants: {
     disabled: {
       true: {
         cursor: 'not-allowed',
       },
     },
+    hidden: {
+      true: {
+        opacity: 0,
+        transition: 'opacity 0.15s, width 0.15s 0.15s', // Delay width transition to occur after opacity
+        width: 0,
+      },
+      false: {
+        opacity: 1,
+        transition: 'opacity 0.15s 0.15s, width 0s', // Delay opacity to occur after width expands
+      },
+    },
   },
 });

packages/chat/src/components/MessageInput/index.tsx

@@ -88,15 +88,15 @@ export const MessageInput: React.FC<IMessageInput> = ({
         />
       </div>
       <div className={buttonContainer}>
-        {withAudioInput && (
-          <AudioInputButton
-            onStop={speechRecognition.stopListening}
-            onStart={speechRecognition.startListening}
-            listening={speechRecognition.listening}
-            processing={speechRecognition.processing}
-            initializing={speechRecognition.initializing}
-          />
-        )}
+        <AudioInputButton
+          onStop={speechRecognition.stopListening}
+          onStart={speechRecognition.startListening}
+          listening={speechRecognition.listening}
+          processing={speechRecognition.processing}
+          initializing={speechRecognition.initializing}
+          showButton={withAudioInput}
+        />
+
         <SendButton onClick={sendMessage} disabled={!message?.length} />
       </div>
     </div>