fix: Chat Ended Spacing (DSN-2543) (#323)

<!-- 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/NewChat/NewChat.css.ts

@@ -2,6 +2,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/styles/colors';
+import { transition } from '@/styles/transitions';
 
 export const DIALOG_PADDING = 20;
 
@@ -40,10 +41,22 @@ export const dialogContainer = style({
   overflowY: 'auto',
 });
 
-export const bottomSpacer = style({
-  display: 'block',
-  width: '100%',
-  height: '24px',
+export const bottomSpacer = recipe({
+  base: {
+    display: 'block',
+    width: '100%',
+    transition: transition(['height']),
+  },
+  variants: {
+    hasEnded: {
+      true: {
+        height: '0px',
+      },
+      false: {
+        height: '24px',
+      },
+    },
+  },
 });
 
 export const chatEndedContainer = style({

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

@@ -118,7 +118,7 @@ export const NewChat: React.FC<INewChat> = ({
               <Separator text="Chat has ended" />
             </div>
           )}
-          <div className={bottomSpacer} />
+          <div className={bottomSpacer({ hasEnded })} />
         </div>
         <NewFooter
           buttons={buttons}

packages/chat/src/components/Separator/Separator.story.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Separator } from '.';
+
+type Story = StoryObj<typeof Separator>;
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Chat/Separator',
+  component: Separator,
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    text: 'Chat has ended',
+  },
+};

packages/chat/src/components/Separator/styles.css.ts

@@ -8,6 +8,7 @@ export const separatorContainer = style({
   display: 'flex',
   gap: 12,
   alignItems: 'center',
+  padding: '4px 0',
 });
 
 export const line = style({