diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss
index 903c763cd44..997e172cee9 100644
--- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss
+++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss
@@ -8,13 +8,6 @@
   --bot-text-color: black;
   --user-background-color: #099ac8;
   --user-text-color: var(--amplify-white);
-
-  width: 100%;
-  height: var(--height);
-  @include md {
-    width: var(--width);
-  }
-  max-width: var(--width);
 }
 .amplify-chatbot {
   display: inline-flex;
@@ -26,7 +19,11 @@
   font-family: var(--amplify-font-family);
   margin-bottom: 1rem;
   width: 100%;
-  height: 100%;
+  height: var(--height);
+  @include md {
+    width: var(--width);
+  }
+  max-width: var(--width);
 }
 .header {
   padding: 1.25rem 0.375rem 1.25rem 0.375rem;
@@ -68,6 +65,7 @@
   align-items: center;
   border-top: 0.062rem solid rgba(0, 0, 0, 0.05);
   padding-right: 0.625rem;
+  min-height: 3.125rem;
   amplify-input {
     --border: none;
     --margin: 0;
diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx
index f957cdec5b5..488eff5a332 100644
--- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx
+++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx
@@ -117,6 +117,8 @@ export class AmplifyChatbot {
       });
       if (this.clearOnComplete) {
         this.reset();
+      } else {
+        this.chatState = ChatState.Initial;
       }
     };