import { Source, Meta } from '@storybook/addon-docs'

<Meta title="Documentation/Quick Start" />

# Quick Start

Follow these steps to quickly integrate Rustic UI Components into your application and start leveraging its features and functionalities.

1. Install the core package of Rustic UI Components using npm:

   ```bash
   npm install @rustic-ai/ui-components
   ```

   Additionally, ensure you have the necessary [Material UI](https://mui.com/material-ui/) packages installed:

   ```bash
   npm install @mui/material @emotion/react @emotion/styled
   ```

   Please refer to the documentation for each component to determine if additional packages need to be installed for its use.

2. Add the following to the top of your `index.css` file to import the CSS styles:

   ```
   @import '@rustic-ai/ui-components/index.css';
   ```

3. Rustic UI Components use [Material Symbols](https://fonts.google.com/icons) icons. To ensure the icons are displayed correctly, add the following to the `<head>` of your `index.html` file:

   ```
   <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0"
   />
   ```

4. Start integrating Rustic UI Components into your application by importing the necessary components. Below is a sample code snippet demonstrating how to use the MessageSpace component to render messages:

   ```
   import FCCalendar from "@rustic-ai/ui-components/calendar"
   import CodeSnippet from "@rustic-ai/ui-components/codeSnippet"
   import Image from "@rustic-ai/ui-components/image"
   import OpenLayersMap from "@rustic-ai/ui-components/map"
   import MarkedMarkdown, { MarkedStreamingMarkdown } from "@rustic-ai/ui-components/markdown"
   import Sound from "@rustic-ai/ui-components/media/audio"
   import Video from "@rustic-ai/ui-components/media/video"
   import MessageSpace from "@rustic-ai/ui-components/messageSpace"
   import Question from "@rustic-ai/ui-components/question"
   import Table from "@rustic-ai/ui-components/table"
   import { StreamingText, Text } from "@rustic-ai/ui-components/text"
   import YoutubeVideo from "@rustic-ai/ui-components/video"
   import RechartsTimeSeries from "@rustic-ai/ui-components/visualization/chart"

   export default function YourApp() {
       // Sample data for messages. Please make sure your message data uses props we defined for each message format.
       const messages = [/* Your message data array */];

       // Sender data of user viewing the messages.
       const sender = {
            name: 'John Doe',
            id: '123'
       }

       // Sample WebSocket connection object.
       const ws = {
            send: (message: Message) => {
                /* Your custom logic */
            },
            close: () => {
            /* Your custom logic */
            },
            reconnect: () => {
            /* Your custom logic */
            },
       }

       return (
           <>
               <MessageSpace
                   messages={messages}
                   sender={sender}
                   ws={ws}
                   supportedElements={{
                   text: Text,
                   streamingText: StreamingText,
                   markdown: MarkedMarkdown,
                   streamingMarkdown: MarkedStreamingMarkdown,
                   image: Image,
                   timeSeries: RechartsTimeSeries,
                   map: OpenLayersMap,
                   youtubeVideo: YoutubeVideo,
                   table: Table,
                   calendar: FCCalendar,
                   codeSnippet: CodeSnippet,
                   audio: Sound,
                   video: Video
               }}
               // Include other components as needed
               />
           </>
       )
   }
   ```
