From 19c6207801822c146320c335a938a60f143b4ad8 Mon Sep 17 00:00:00 2001
From: mikaalnaik <25439925+mikaalnaik@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:13:49 +0000
Subject: [PATCH] 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
---
 .../MessageInput/AudioInputButton.tsx          |  4 +++-
 .../MessageInput/MessageInput.css.ts           | 13 +++++++++++++
 .../chat/src/components/MessageInput/index.tsx | 18 +++++++++---------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/chat/src/components/MessageInput/AudioInputButton.tsx b/packages/chat/src/components/MessageInput/AudioInputButton.tsx
index ba4fd7de8f..e73ff2f117 100644
--- a/packages/chat/src/components/MessageInput/AudioInputButton.tsx
+++ b/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}
diff --git a/packages/chat/src/components/MessageInput/MessageInput.css.ts b/packages/chat/src/components/MessageInput/MessageInput.css.ts
index ec6e47cca5..2de5755367 100644
--- a/packages/chat/src/components/MessageInput/MessageInput.css.ts
+++ b/packages/chat/src/components/MessageInput/MessageInput.css.ts
@@ -117,6 +117,8 @@ export const audioInputButton = recipe({
   base: {
     display: 'flex',
     borderRadius: 100,
+    overflow: 'hidden', // Ensures smooth shrinking
+    transition: transition(['opacity', 'width']), // Common transitions
   },
   variants: {
     disabled: {
@@ -124,5 +126,16 @@ export const audioInputButton = recipe({
         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
+      },
+    },
   },
 });
diff --git a/packages/chat/src/components/MessageInput/index.tsx b/packages/chat/src/components/MessageInput/index.tsx
index 1ea461a539..54941bbee0 100644
--- a/packages/chat/src/components/MessageInput/index.tsx
+++ b/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>