diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
index c5e5e41f3d5e..2a616f14df18 100644
--- a/code/addons/interactions/src/components/Interaction.tsx
+++ b/code/addons/interactions/src/components/Interaction.tsx
@@ -5,12 +5,12 @@ import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
 import { ListUnorderedIcon } from '@storybook/icons';
-import { Expected, MatcherResult, Received } from './MatcherResult';
+import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
 import type { Controls } from './InteractionsPanel';
-import { isJestError } from '../utils';
+import { isChaiError, isJestError } from '../utils';
 
 const MethodCallWrapper = styled.div(() => ({
   fontFamily: typography.fonts.mono,
@@ -117,33 +117,23 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
   if (isJestError(exception)) {
     return <MatcherResult {...exception} />;
   }
+  if (isChaiError(exception)) {
+    return (
+      <RowMessage>
+        <MatcherResult
+          message={`${exception.message}\n${exception.diff ? exception.diff : ''}`}
+          style={{ padding: 0 }}
+        />
+        <p>See the full stack trace in the browser console.</p>
+      </RowMessage>
+    );
+  }
+
   const paragraphs = exception.message.split('\n\n');
   const more = paragraphs.length > 1;
   return (
     <RowMessage>
       <pre>{paragraphs[0]}</pre>
-      {exception.showDiff && exception.diff ? (
-        <>
-          <br />
-          <MatcherResult message={exception.diff} style={{ padding: 0 }} />
-        </>
-      ) : (
-        <pre>
-          <br />
-          {exception.expected && (
-            <>
-              Expected: <Expected value={exception.expected} />
-              <br />
-            </>
-          )}
-          {exception.actual && (
-            <>
-              Received: <Received value={exception.actual} />
-              <br />
-            </>
-          )}
-        </pre>
-      )}
       {more && <p>See the full stack trace in the browser console.</p>}
     </RowMessage>
   );
diff --git a/code/addons/interactions/src/components/MatcherResult.tsx b/code/addons/interactions/src/components/MatcherResult.tsx
index ec75109a0598..fdd1fbdc4b83 100644
--- a/code/addons/interactions/src/components/MatcherResult.tsx
+++ b/code/addons/interactions/src/components/MatcherResult.tsx
@@ -85,7 +85,7 @@ export const MatcherResult = ({
         if (line.match(/^\s*- /)) {
           return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
         }
-        if (line.match(/^\s*\+ /)) {
+        if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
           return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
         }