Fix Messages stories wrap with SessionProvider

website/src/components/Messages/MessageTable.stories.tsx

@@ -1,3 +1,4 @@
+import { SessionProvider } from "next-auth/react";
 import React from "react";
 import { Message } from "src/types/Conversation";
 
@@ -18,7 +19,11 @@ const Template = ({
   enableLink: boolean;
   highlightLastMessage: boolean;
 }) => {
-  return <MessageTable messages={messages} enableLink={enableLink} highlightLastMessage={highlightLastMessage} />;
+  return (
+    <SessionProvider>
+      <MessageTable messages={messages} enableLink={enableLink} highlightLastMessage={highlightLastMessage} />;
+    </SessionProvider>
+  );
 };
 
 export const Default = Template.bind({});

website/src/components/Messages/MessageTableEntry.stories.tsx

@@ -1,3 +1,4 @@
+import { SessionProvider } from "next-auth/react";
 import React from "react";
 import { Message } from "src/types/Conversation";
 
@@ -10,7 +11,11 @@ export default {
 };
 
 const Template = ({ enabled, highlight, ...message }) => {
-  return <MessageTableEntry message={message as Message} enabled={enabled} highlight={highlight} />;
+  return (
+    <SessionProvider>
+      <MessageTableEntry message={message as Message} enabled={enabled} highlight={highlight} />;
+    </SessionProvider>
+  );
 };
 
 export const Default = Template.bind({});

website/src/components/Messages/MessageWithChildren.stories.tsx

@@ -1,4 +1,6 @@
 import { rest } from "msw";
+import { SessionProvider } from "next-auth/react";
+
 import { MessageWithChildren } from "./MessageWithChildren";
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -28,7 +30,11 @@ export default {
   },
 };
 
-const Template = (args) => <MessageWithChildren {...args} />;
+const Template = (args) => (
+  <SessionProvider>
+    <MessageWithChildren {...args} />;
+  </SessionProvider>
+);
 
 export const NoChildren = Template.bind({});
 NoChildren.args = {