add metabot animation (#23448)

* add metabot animation

* review

enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.styled.tsx

@@ -10,7 +10,7 @@ export const MetabotSettingWidgetRoot = styled.div`
 `;
 
 export const MetabotContainer = styled.div`
-  padding: 2rem;
+  padding: 0.5rem 1rem 0.75rem 1.25rem;
   border-right: 1px solid ${color("border")};
 `;
 

enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotSettingWidget/MetabotSettingWidget.tsx

@@ -11,11 +11,18 @@ import {
 import Toggle from "metabase/core/components/Toggle";
 
 const MetabotSettingWidget = ({ setting, onChange }: any) => {
+  const isEnabled = setting.value ?? setting.defaultValue;
+  const metabotImage = isEnabled ? "metabot-happy" : "metabot-sad";
+
   const toggleId = useUniqueId("show-metabot-switch");
   return (
     <MetabotSettingWidgetRoot>
       <MetabotContainer>
-        <MetabotLogo />
+        <img
+          src={`app/assets/img/${metabotImage}.gif`}
+          width="94px"
+          alt="Metabot"
+        />
       </MetabotContainer>
       <ToggleContainer>
         <ToggleLabel
@@ -25,7 +32,7 @@ const MetabotSettingWidget = ({ setting, onChange }: any) => {
           id={toggleId}
           aria-checked={setting.value}
           role="switch"
-          value={setting.value ?? setting.defaultValue}
+          value={isEnabled}
           onChange={onChange}
         />
       </ToggleContainer>