owncast/web/components/chat/ChatContainer/ChatContainer.stories.tsx

import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { ChatContainer } from './ChatContainer';
import { ChatMessage } from '../../../interfaces/chat-message.model';

export default {
  title: 'owncast/Chat/Chat messages container',
  component: ChatContainer,
  parameters: {
    chromatic: { diffThreshold: 0.8 },
    docs: {
      description: {
        component: `
- Renders a list of messages from the bottom up.
- Auto-scrolls to the bottom as new messages come in.
- Pauses auto-scroll when reading backlog.
- Uses [Virtuoso](https://virtuoso.dev/) for rendering.`,
      },
    },
  },
} as ComponentMeta<typeof ChatContainer>;

const testMessages =
  '[{"type":"CHAT","id":"wY-MEXwnR","timestamp":"2022-04-28T20:30:27.001762726Z","user":{"id":"h_5GQ6E7R","displayName":"UserDisplayName42","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"this is a test message"},{"type":"CHAT","id":"VhLGEXwnR","timestamp":"2022-04-28T20:30:28.806999545Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hit 3"},{"type":"CHAT","id":"GguMEuw7R","timestamp":"2022-04-28T20:30:34.500150601Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Jkjk"},{"type":"CHAT","id":"y_-VEXwnR","timestamp":"2022-04-28T20:31:32.695583044Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m doing alright. How about you Hatnix?"},{"type":"CHAT","id":"qAaKEuwng","timestamp":"2022-04-28T20:34:16.22275314Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Oh shiet I didn\u0026#39;t think you would kill him"},{"type":"CHAT","id":"8wUFEuwnR","timestamp":"2022-04-28T20:34:21.624898714Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hahaha, ruthless"},{"type":"CHAT","id":"onYcPuQnR","timestamp":"2022-04-28T20:34:50.671024312Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;ve never played it before"},{"type":"CHAT","id":"kORyEXQ7R","timestamp":"2022-04-28T20:40:29.761977233Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"brb real quick"},{"type":"CHAT","id":"F3DvsuQ7g","timestamp":"2022-04-28T20:50:29.451341783Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m back"},{"type":"CHAT","id":"AH2vsXwnR","timestamp":"2022-04-28T20:50:33.872156152Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Whoa what happened here?"},{"type":"CHAT","id":"xGkOsuw7R","timestamp":"2022-04-28T20:50:53.202147658Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Your dwarf was half naked."},{"type":"CHAT","id":"opIdsuw7g","timestamp":"2022-04-28T20:50:59.631595947Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-
const messages: ChatMessage[] = JSON.parse(testMessages);

const AddMessagesChatExample = args => {
  const { messages: m } = args;
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>(m);

  return (
    <RecoilRoot>
      <div style={{ height: '70vh', position: 'relative' }}>
        <button type="button" onClick={() => setChatMessages([...chatMessages, chatMessages[0]])}>
          Add message
        </button>
        <ChatContainer {...args} />
      </div>
    </RecoilRoot>
  );
};

const Template: ComponentStory<typeof ChatContainer> = args => <AddMessagesChatExample {...args} />;

export const Example = Template.bind({});
Example.args = {
  loading: false,
  messages,
  usernameToHighlight: 'testuser',
  chatUserId: 'testuser',
  isModerator: true,
  showInput: true,
};

export const SingleMessage = Template.bind({});
SingleMessage.args = {
  loading: false,
  messages: [messages[0]],
  usernameToHighlight: 'testuser',
  chatUserId: 'testuser',
  isModerator: true,
  showInput: true,
};