mirror of
				https://github.com/owncast/owncast.git
				synced 2025-11-04 13:27:21 +08:00 
			
		
		
		
	* Migrate web action-buttons directory to CSF3 notation * Migrate web chat directory to CSF3 notation * Migrate web common directory to CSF3 notation * Migrate web layout directory to CSF3 notation * Migrate web modals directory to CSF3 notation * Migrate web ui directory to CSF3 notation * Migrate web video directory to CSF3 notation * Migrate web stories directory to CSF3 notation
		
			
				
	
	
		
			48 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			48 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
import { Meta } from '@storybook/react';
 | 
						|
import { ChatSystemMessage } from './ChatSystemMessage';
 | 
						|
import Mock from '../../../stories/assets/mocks/chatmessage-system.png';
 | 
						|
import { ChatMessage } from '../../../interfaces/chat-message.model';
 | 
						|
 | 
						|
const meta = {
 | 
						|
  title: 'owncast/Chat/Messages/System',
 | 
						|
  component: ChatSystemMessage,
 | 
						|
  parameters: {
 | 
						|
    design: {
 | 
						|
      type: 'image',
 | 
						|
      url: Mock,
 | 
						|
    },
 | 
						|
    docs: {
 | 
						|
      description: {
 | 
						|
        component: `This is the message design used when the server sends a message to chat.`,
 | 
						|
      },
 | 
						|
    },
 | 
						|
  },
 | 
						|
} satisfies Meta<typeof ChatSystemMessage>;
 | 
						|
 | 
						|
export default meta;
 | 
						|
 | 
						|
const message: ChatMessage = JSON.parse(`{
 | 
						|
  "type": "SYSTEM",
 | 
						|
  "id": "wY-MEXwnR",
 | 
						|
  "timestamp": "2022-04-28T20:30:27.001762726Z",
 | 
						|
  "user": {
 | 
						|
    "id": "h_5GQ6E7R",
 | 
						|
    "displayName": "Cool Server Name",
 | 
						|
    "createdAt": "2022-03-24T03:52:37.966584694Z",
 | 
						|
    "scopes": []
 | 
						|
  },
 | 
						|
  "body": "Test system message from the chat server."}`);
 | 
						|
 | 
						|
export const Basic = {
 | 
						|
  args: {
 | 
						|
    message,
 | 
						|
  },
 | 
						|
};
 | 
						|
 | 
						|
export const HighlightExample = {
 | 
						|
  args: {
 | 
						|
    message,
 | 
						|
    highlightString: 'chat',
 | 
						|
  },
 | 
						|
};
 |