### Installing Reachat Package (npm)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Installs the core Reachat library as a production dependency in your project using npm.

```sh
npm i reachat --save
```

--------------------------------

### Installing Tailwind CSS and CLI (npm)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Installs Tailwind CSS and its command-line interface, which are prerequisites for Reablocks and Reachat styling, preparing your project for utility-first CSS.

```sh
npm install tailwindcss @tailwindcss/cli
```

--------------------------------

### Cloning Reachat Repository (Bash)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Clones the Reachat GitHub repository to your local machine and navigates into the project directory, preparing for local development and contribution.

```bash
git clone https://github.com/your-repo/reachat.git
cd reachat
```

--------------------------------

### Installing Development Dependencies (npm)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Installs all necessary project dependencies for local development of Reachat, as defined in the package.json file, ensuring all tools and libraries are available.

```sh
npm install
```

--------------------------------

### Starting Reachat Development Server (Bash)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Starts the local development server for Reachat, typically making the application accessible via a web browser at a specified localhost address for testing and development.

```bash
npm run start
```

--------------------------------

### Configuring Tailwind CSS Directives

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Adds the necessary Tailwind CSS directives to your main CSS file, enabling Tailwind's utility classes and ensuring proper styling of components.

```css
@import "tailwindcss";
```

--------------------------------

### Wrapping Application with Reablocks ThemeProvider (TypeScript/React)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Wraps your React application with Reablocks' ThemeProvider component, applying the default theme to ensure proper styling of Reablocks and Reachat components throughout your application.

```tsx
import { ThemeProvider, theme } from 'reablocks';

export const App = () => (
  <ThemeProvider theme={theme}>
    <YourComponents />
  </ThemeProvider>
);
```

--------------------------------

### Integrating Reachat Components into a React Application (TypeScript/React)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/setup.mdx

Demonstrates how to import and structure various Reachat components (e.g., Chat, SessionsList, SessionMessagePanel) to build a functional chat interface within a React application, including session and message rendering logic.

```tsx
import {
  Chat,
  ChatInput,
  Conversation,
  NewSessionButton,
  Session,
  SessionGroups,
  SessionListItem,
  SessionMessage,
  SessionMessages,
  SessionMessagePanel,
  SessionMessagesHeader,
  SessionsGroup,
  SessionsList,
} from "reachat";

export default function App() {
  return (
    <Chat sessions={[]}>
      <SessionsList>
        <NewSessionButton />
        <SessionGroups>
          {(groups) =>
            groups.map(({ heading, sessions }) => (
              <SessionsGroup heading={heading} key={heading}>
                {sessions.map((s) => (
                  <SessionListItem key={s.id} session={s} />
                ))}
              </SessionsGroup>
            ))
          }
        </SessionGroups>
      </SessionsList>
      <SessionMessagePanel>
        <SessionMessagesHeader />
        <SessionMessages>
          {(conversations) =>
            conversations.map((conversation) => (
              <SessionMessage
                key={conversation.id}
                conversation={conversation}
              />
            ))
          }
        </SessionMessages>
        <ChatInput />
      </SessionMessagePanel>
    </Chat>
  );
}
```

--------------------------------

### Applying Custom Theme to Reachat's Chat Component

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This JSX snippet demonstrates how to integrate the previously defined `chatTheme` into the `<Chat />` component by passing it via the `theme` prop. It also illustrates the typical props required for the `Chat` component, such as session management handlers and loading state, along with its nested sub-components like `SessionsList` and `SessionMessagePanel`.

```JSX
<Chat
  sessions={sessions}
  activeSessionId={activeSessionId}
  onNewSession={handleNewSession}
  onSelectSession={setActiveSessionId}
  onDeleteSession={handleDeleteSession}
  onSendMessage={handleNewMessage}
  isLoading={loading}
  theme={chatTheme}
>
  <SessionsList>
    <NewSessionButton />
    <SessionGroups />
  </SessionsList>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages />
    <ChatInput />
  </SessionMessagePanel>
</Chat>
```

--------------------------------

### Handling Chat Conversations and Loading State in React

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This snippet shows how to implement the `onSendMessage` handler to add new conversations to the active session. It also demonstrates managing a `loading` state, which can be passed as an `isLoading` prop to the `Chat` component, simulating asynchronous operations like backend requests for message responses.

```tsx
const [loading, setLoading] = useState<boolean>(false);

const handleNewMessage = (message: string) => {
  setLoading(true);
  const current = sessions.find((s) => s.id === activeId);
  if (current) {
    const newMessage: Conversation = {
      id: `${current.id}-${current.conversations.length}`,
      question: message,
      response: "this is an example response",
      createdAt: new Date(),
      updatedAt: new Date(),
    };
    const updated = {
      ...current,
      conversations: [...current.conversations, newMessage],
    };
    setSessions([...sessions.filter((s) => s.id !== activeId), updated]);
  }
  setLoading(false);
};

...

return (
  <Chat
    sessions={sessions}
    activeSessionId={activeSessionId}
    onNewSession={handleNewSession}
    onSelectSession={setActiveSessionId}
    onDeleteSession={handleDeleteSession}
    onSendMessage={handleNewMessage}
    isLoading={loading}
  >
    <SessionsList>
      <NewSessionButton />
      <SessionGroups />
    </SessionsList>
    <SessionMessagePanel>
      <SessionMessagesHeader />
      <SessionMessages />
      <ChatInput />
    </SessionMessagePanel>
  </Chat>
);
```

--------------------------------

### Extending Reachat's Chat Theme with Custom Styles

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This TypeScript snippet shows how to create a custom `theme.ts` file to extend the default `reachat` theme. It uses `twMerge` from `tailwind-merge` to combine default and custom Tailwind classes, allowing granular styling of components like session consoles, delete buttons, and message types (questions, responses).

```TypeScript
import { chatTheme as defaultTheme, ChatTheme } from "reachat";
import { twMerge } from "tailwind-merge";

export const chatTheme: ChatTheme = {
  ...defaultTheme,
  sessions: {
    ...defaultTheme.sessions,
    console: twMerge(defaultTheme.sessions.console, "min-w-[300px]"),
    session: {
      ...defaultTheme.sessions.session,
      delete:
        "[&>svg]:w-4 [&>svg]:h-4 opacity-70 hover:opacity-100 transition-opacity",
    },
  },
  messages: {
    ...defaultTheme.messages,
    base: "py-4 pr-4",
    message: {
      ...defaultTheme.messages.message,
      question: twMerge(
        defaultTheme.messages.message.question,
        "text-purple-300 text-lg",
      ),
      response: "border-l border-purple-300 pl-4",
    },
  },
};
```

--------------------------------

### Creating New Chat Sessions with React useState

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This snippet demonstrates how to implement a `onNewSession` handler for the `Chat` component. It uses React's `useState` hook to manage an array of `Session` objects, adding a new session with a unique ID, title, and timestamps to the state when the handler is invoked.

```tsx
const [sessions, setSessions] = useState<Session[]>([]);

const handleNewSession = () => {
  const newId = (sessions.length + 1).toString();
  setSessions([
    ...sessions,
    {
      id: newId,
      title: `New Session #${newId}`,
      createdAt: new Date(),
      updatedAt: new Date(),
      conversations: [],
    },
  ]);
};

return (
  <Chat sessions={sessions} onNewSession={handleNewSession}>
    <SessionsList>
      <NewSessionButton />
      <SessionGroups />
    </SessionsList>
    <SessionMessagePanel>
      <SessionMessagesHeader />
      <SessionMessages />
      <ChatInput />
    </SessionMessagePanel>
  </Chat>
);
```

--------------------------------

### Selecting Active Chat Sessions in React

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This code snippet illustrates how to manage the currently active chat session. It introduces an `activeSessionId` state variable and passes it, along with an `onSelectSession` handler, to the `Chat` component, enabling users to switch between different chat sessions.

```tsx
const [activeSessionId, setActiveSessionId] = useState<string>();

...

return (
  <Chat
    sessions={sessions}
    activeSessionId={activeSessionId}
    onNewSession={handleNewSession}
    onSelectSession={setActiveSessionId}
  >
    <SessionsList>
      <NewSessionButton />
      <SessionGroups />
    </SessionsList>
    <SessionMessagePanel>
      <SessionMessagesHeader />
      <SessionMessages />
      <ChatInput />
    </SessionMessagePanel>
  </Chat>
);
```

--------------------------------

### Deleting Chat Sessions and Managing Active State in React

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This snippet demonstrates implementing the `onDeleteSession` prop for the `Chat` component. The `handleDeleteSession` function filters out the specified session from the state and conditionally resets the `activeSessionId` if the deleted session was the one currently active, ensuring UI consistency.

```tsx
const handleDeleteSession = (id: string) => {
  setSessions(sessions.filter((session) => session.id !== id));
  if (id === activeId) {
    setActiveId(undefined)
  }
};

...

return (
  <Chat
    sessions={sessions}
    activeSessionId={activeSessionId}
    onNewSession={handleNewSession}
    onSelectSession={setActiveSessionId}
    onDeleteSession={handleDeleteSession}
  >
    <SessionsList>
      <NewSessionButton />
      <SessionGroups />
    </SessionsList>
    <SessionMessagePanel>
      <SessionMessagesHeader />
      <SessionMessages />
      <ChatInput />
    </SessionMessagePanel>
  </Chat>
);
```

--------------------------------

### Implementing Companion Chat with Reachat (TSX)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/examples/companion.mdx

This snippet demonstrates how to set up a basic companion chat interface using the `Chat` component from the `reachat` library. It initializes the chat with pre-defined session data, including conversations, and configures it for the 'companion' view type. The example also includes components for session management like `SessionsList`, `NewSessionButton`, `SessionGroups`, and message display components such as `SessionMessagePanel`, `SessionMessagesHeader`, `SessionMessages`, and `ChatInput`.

```tsx
<Chat
  sessions={[
    {
      id: '1',
      title: 'Session 1',
      createdAt: new Date(),
      updatedAt: new Date(),
      conversations: [
        {
          id: '1',
          question: 'What is React?',
          response: 'React is a JavaScript library for building user interfaces.',
          createdAt: new Date(),
          updatedAt: new Date()
        },
        {
          id: '2',
          question: 'What is JSX?',
          response: 'JSX is a syntax extension for JavaScript.',
          createdAt: new Date(),
          updatedAt: new Date()
        }
      ]
    }
  ]}
viewType="companion"
  onDeleteSession={() => alert("delete!")}
  >
  <SessionsList>
    <NewSessionButton />
    <SessionGroups />
  </SessionsList>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages />
    <ChatInput />
  </SessionMessagePanel>
  </Chat>
```

--------------------------------

### Example Reachat ChatTheme Object (TypeScript)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/theme.mdx

This snippet provides a concrete example of a `ChatTheme` object, demonstrating how to assign Tailwind CSS classes to various UI elements of the Reachat components. It shows detailed styling for sessions, messages, input fields, and their sub-components, including handling dark mode variations. This object can be passed to the `Chat` component's `theme` prop.

```ts
export const chatTheme: ChatTheme = {
  base: 'dark:text-white text-gray-500',
  console: 'flex w-full gap-4 h-full',
  companion: 'w-full h-full overflow-hidden',
  empty: 'text-center flex-1',
  sessions: {
    base: 'overflow-auto',
    console:
      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',
    companion: 'w-full h-full',
    group:
      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',
    create: 'relative mb-4 rounded-[10px] text-white',
    session: {
      base: [
        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',
        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'
      ].join(' '),
      active: [
        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',
        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',
        '[&_button]:!opacity-100'
      ].join(' '),
      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:!opacity-50'
    }
  },
  messages: {
    base: '',
    console: 'flex flex-col mx-5 flex-1 overflow-hidden',
    companion: 'flex w-full h-full',
    back: 'self-start p-0 my-2',
    inner: 'flex-1 h-full flex flex-col',
    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(
      ' '
    ),
    date: 'text-xs whitespace-nowrap text-gray-400',
    content: [
      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',
      'dark:[&_hr]:bg-gray-800/60'
    ].join(' '),
    header: 'flex justify-between items-center gap-2',
    showMore: 'mb-4',
    message: {
      base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent',
      question: [
        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',
        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'
      ].join(' '),
      response: ['relative data-[compact=false]:px-4 text-gray-900', 'dark:text-gray-100'].join(' '),
      overlay: "overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200",
      cursor: 'inline-block w-1 h-4 bg-current',
      expand: 'absolute bottom-1 right-1 z-10',
      files: {
        base: 'mb-2 flex flex-wrap gap-3 ',
        file: {
          base: [
            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',
            'dark:border-gray-700'
          ].join(' '),
          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')
        }
      },
      sources: {
        base: 'my-4 flex flex-wrap gap-3',
        source: {
          base: [
            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',
            'dark:border-gray-700'
          ].join(' ')
        }
      }
    }
  }
}
```

--------------------------------

### Defining SessionContextProps Interface (TypeScript)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/custom.mdx

Defines the `SessionContextProps` interface, outlining the properties and methods available through the `useSessionContext` hook. It includes session data, active session ID, theme, loading state, and functions for session selection, deletion, and creation.

```TypeScript
export interface SessionContextProps {
  sessions: Session[];
  activeSessionId: string | null;
  theme?: ChatTheme;
  isLoading?: boolean;
  activeSession?: Session | null;
  remarkPlugins?: PluggableList[];
  selectSession?: (sessionId: string) => void;
  deleteSession?: (sessionId: string) => void;
  createSession?: () => void;
}
```

--------------------------------

### Customizing Primary Colors in Tailwind CSS

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/getting-started/getting-started.mdx

This snippet demonstrates how to extend the Tailwind CSS `theme` configuration to customize the `primary` color palette. It allows overriding default colors for various states like `DEFAULT`, `active`, `hover`, and `inactive` using a `colorPalette` object, effectively changing the default blue to purple.

```JavaScript
theme: {
  extend: {
    colors: {
      primary: {
        DEFAULT: colorPalette.purple[500],
        active: colorPalette.purple[500],
        hover: colorPalette.purple[600],
        inactive: colorPalette.purple[200]
      },
      ...
    }
  }
}
```

--------------------------------

### Using useSessionContext Hook to Send Messages (TSX)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/custom.mdx

Demonstrates how to use the `useSessionContext` hook from 'reachat' to access the `sendMessage` function. This allows for creating custom UI components, like a send button, that interact with the chat session to send messages programmatically.

```TSX
import { useSessionContext } from 'reachat';

const CustomSendButton = () => {
  const { sendMessage } = useSessionContext();
  const handleSend = () => {
    sendMessage('Hello, AI!');
    return <button onClick={handleSend}>Send Custom Message</button>;
  };
};
```

--------------------------------

### Integrating Custom Components into Reachat Chat in TSX

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/custom.mdx

This snippet demonstrates how to integrate the previously defined custom UI components into the main Chat component from Reachat. It shows how to pass CustomSessionListItem to SessionListItem and CustomMessageQuestion, CustomMessageResponse, CustomMessageSource to their respective parent message components, illustrating the composition pattern for customizing the chat interface.

```tsx
export const CustomComponents = () => {
  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        padding: 20,
        margin: 20,
        background: '#02020F',
        borderRadius: 5
      }}
    >
      <Chat
        sessions={[
          ...fakeSessions,
          ...sessionsWithFiles,
          ...sessionWithSources
        ]}
        activeSessionId="1"
      >
        <SessionsList>
          <NewSessionButton>
            <button className="text-blue-500">New Session</button>
          </NewSessionButton>
          <Divider variant="secondary" />
          <SessionGroups>
            {groups =>
              groups.map(({ heading, sessions }) => (
                <SessionsGroup heading={heading} key={heading}>
                  {sessions.map(s => (
                    <SessionListItem key={s.id} session={s}>
                      <CustomSessionListItem session={s} />
                    </SessionListItem>
                  ))}
                </SessionsGroup>
              ))
            }
          </SessionGroups>
        </SessionsList>
        <SessionMessagePanel>
          <SessionMessagesHeader>
            <CustomMessagesHeader />
          </SessionMessagesHeader>
          <SessionMessages>
            {conversations =>
              conversations.map((conversation, index) => (
                <SessionMessage
                  conversation={conversation}
                  isLast={index === conversations.length - 1}
                  key={conversation.id}
                >
                  <MessageQuestion
                    question={conversation.question}
                    files={conversation.files}
                  >
                    <CustomMessageQuestion />
                  </MessageQuestion>
                  <MessageResponse response={conversation.response}>
                    <CustomMessageResponse />
                  </MessageResponse>
                  <MessageSources sources={conversation.sources}>
                    <CustomMessageSource />
                  </MessageSources>
                  <MessageActions
                    question={conversation.question}
                    response={conversation.response}
                  />
                </SessionMessage>
              ))
            }
          </SessionMessages>
          <ChatInput />
        </SessionMessagePanel>
      </Chat>
    </div>
  );
};
```

--------------------------------

### Defining Custom Chat UI Components in TSX

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/custom.mdx

This snippet defines several functional React components (FC) used to customize various parts of the Reachat Chat UI. It includes components for rendering custom message questions, responses, attached files, and message sources, as well as a custom session list item with an action menu. These components demonstrate how to extend the default UI with custom styling and functionality.

```tsx
const CustomMessageQuestion: FC<any> = ({ question, files }) => (
  <>
    <span className="text-lg font-semibold text-blue-500">
      This is my question: {question}
    </span>
    <MessageFiles files={files}>
      <CustomMessageFile />
    </MessageFiles>
  </>
);

const CustomMessageResponse: FC<any> = ({ response }) => (
  <blockquote className="border-l border-blue-500 pl-2">
    This is the response: {response}
  </blockquote>
);

const CustomMessageFile: FC<any> = ({ name, type }) => (
  <Chip size="small" className="rounded-full border border-gray-700">
    {name || type}
  </Chip>
);

const CustomMessageSource: FC<any> = ({ title, url, image }) => {
  const { theme } = useContext(ChatContext);
  return (
    <Chip
      size="small"
      className="rounded-full border border-blue-500 border-opacity-50"
      onClick={() => alert('take me to ' + url)}
      start={
        image && (
          <img
            src={image}
            alt={title}
            className={cn(theme.messages.message.sources.source.image)}
          />
        )
      }
    >
      {title || url}
    </Chip>
  );
};

const CustomSessionListItem: FC<SessionListItemProps> = ({
  session,
  children,
  ...rest
}) => {
  const [open, setOpen] = useState(false);
  const btnRef = useRef(null);
  return (
    <>
      <ListItem
        {...rest}
        end={
          <IconButton
            ref={btnRef}
            size="small"
            variant="text"
            onClick={e => {
              e.stopPropagation();
              setOpen(true);
            }}
          >
            <MenuIcon />
          </IconButton>
        }
      >
        <span className="truncate">{session.title}</span>
      </ListItem>
      <Menu
        open={open}
        onClose={() => setOpen(false)}
        reference={btnRef}
        appendToBody={false}
      >
        <Card disablePadding>
          <List>
            <ListItem onClick={() => alert('rename')}>Rename</ListItem>
            <ListItem onClick={() => alert('delete')}>Delete</ListItem>
          </List>
        </Card>
      </Menu>
    </>
  );
};
```

--------------------------------

### Sample Markdown Input for CVE Plugin

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/markdown.mdx

This markdown snippet demonstrates the input format for the custom CVE plugin, showing how CVE identifiers are listed before processing.

```Markdown
Please review the following CVEs:

- CVE-2021-34527
- CVE-2021-44228
- CVE-2021-45046
```

--------------------------------

### Implementing a Basic Console Chat with Reachat (TSX)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/examples/console.mdx

This snippet demonstrates how to set up a basic console-style chat interface using the Reachat library. It initializes the `Chat` component with predefined sessions and conversations, and includes sub-components like `SessionsList`, `NewSessionButton`, `SessionGroup`, `SessionMessagePanel`, `SessionMessagesHeader`, `SessionMessages`, and `ChatInput` to build a complete chat UI. It also shows how to handle session deletion.

```tsx
<Chat
  sessions={[
    {
      id: '1',
      title: 'Session 1',
      createdAt: new Date(),
      updatedAt: new Date(),
      conversations: [
        {
          id: '1',
          question: 'What is React?',
          response: 'React is a JavaScript library for building user interfaces.',
          createdAt: new Date(),
          updatedAt: new Date()
        },
        {
          id: '2',
          question: 'What is JSX?',
          response: 'JSX is a syntax extension for JavaScript.',
          createdAt: new Date(),
          updatedAt: new Date()
        }
      ]
    }
  ]}
  viewType="console"
  onDeleteSession={() => alert("delete!")}
  >
  <SessionsList>
    <NewSessionButton />
    <SessionGroup />
  </SessionsList>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages />
    <ChatInput />
  </SessionMessagePanel>
  </Chat>
```

--------------------------------

### Displaying Project Badges and Image in React JSX

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/index.mdx

This JSX snippet renders a central div containing a preview image and a series of linked badges for project status, npm, license, GitHub stars, and Discord. It uses Tailwind CSS classes for styling and imports an image asset, demonstrating a common pattern for project landing pages.

```jsx
import img from '../../icons/preview.png';

<div className="my-0 mx-auto text-white text-center flex flex-col">
  <img
    className="mx-auto mb-8 mt-8"
    src={img.src}
  />
  <br />
  <div className="flex justify-center">
    <a href="https://github.com/reaviz/reachat/actions/workflows/build.yml" target="_blank">
      <img src="https://github.com/reaviz/reachat/actions/workflows/build.yml/badge.svg" />
    </a>
    <span>&nbsp;&nbsp;</span>
    <a href="https://npm.im/reachat" target="_blank">
      <img src="https://img.shields.io/npm/v/reachat.svg" />
    </a>
    <span>&nbsp;&nbsp;</span>
    <a href="https://npm.im/reachat" target="_blank">
      <img src="https://badgen.net/npm/dw/reachat" />
    </a>
    <span>&nbsp;&nbsp;</span>
    <a href="https://github.com/reaviz/reachat/blob/master/LICENSE" target="_blank">
      <img src="https://badgen.now.sh/badge/license/apache2" />
    </a>
    <span>&nbsp;&nbsp;</span>
    <a href="https://github.com/reaviz/reachat" target="_blank">
      <img alt="GitHub stars" src="https://img.shields.io/github/stars/reaviz/reachat?style=social" />
    </a>
    <span>&nbsp;&nbsp;</span>
    <a href="https://discord.gg/tt8wGExq35" target="_blank">
      <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
    </a>
  </div>

---
</div>
```

--------------------------------

### Rendered Markdown Output with CVE Links

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/markdown.mdx

This markdown snippet illustrates the expected output after the `remarkCve` plugin processes the input, showing how CVE identifiers are transformed into hyperlinked references to the MITRE CVE database.

```Markdown
Please review the following CVEs:

- [CVE-2021-34527](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-34527)
- [CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228)
- [CVE-2021-45046](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-45046)
```

--------------------------------

### Importing Core Reachat UI Components - TypeScript

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/examples/providers.mdx

This snippet imports essential UI components from the 'reachat' library. These components are fundamental for constructing a complete chat application, covering elements like the main chat interface, session lists, individual messages, and input fields. It serves as a foundational import for any application utilizing the 'reachat' UI toolkit.

```TypeScript
import {
  Chat,
  SessionsList,
  SessionsGroup,
  SessionListItem,
  NewSessionButton,
  SessionMessages,
  SessionGroups,
  ChatInput,
  SessionMessagePanel,
  SessionMessagesHeader,
  SessionMessage,
} from "reachat";
```

--------------------------------

### Implementing a Custom Remark CVE Plugin in TypeScript

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/markdown.mdx

This TypeScript code defines a custom remark plugin, `remarkCve`, which uses `mdast-util-find-and-replace` to identify CVE patterns in a markdown abstract syntax tree (AST) and transform them into clickable links to the MITRE CVE database. It requires `mdast-util-find-and-replace` as a dependency.

```TypeScript
import { findAndReplace } from 'mdast-util-find-and-replace';

const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;

export function remarkCve() {
  return (tree, _file) => {
    findAndReplace(tree, [[
      CVE_REGEX,
      replaceCve as unknown as any
    ]]);
  };

  function replaceCve(value, id) {
    return [
      {
        type: 'link',
        url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
        children: [
          { children: [{ type: 'text', value: value.trim() }] }
        ]
      }
    ];
  }
}
```

--------------------------------

### Defining the Conversation API Model in TypeScript

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/api/models.mdx

This interface outlines the structure of a `Conversation` object, representing a single turn of interaction within a session. It captures the user's question, the AI's response, timestamps, and optional arrays for `ConversationSource` and `ConversationFile` references, providing detailed context for each exchange.

```TypeScript
export interface Conversation {
  /**
   * Unique identifier for the conversation
   */
  id: string;

  /**
   * Date and time when the conversation was created
   */
  createdAt: Date;

  /**
   * Date and time when the conversation was last updated
   */
  updatedAt?: Date;

  /**
   * The user's question or input that initiated the conversation
   */
  question: string;

  /**
   * The AI's response to the user's question
   */
  response?: string;

  /**
   * Array of sources referenced in the conversation
   */
  sources?: ConversationSource[];

  /**
   * Array of file paths or identifiers associated with the conversation
   */
  files?: ConversationFile[];
}
```

--------------------------------

### Initializing Reachat Chat Component with Predefined Sessions (TSX)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/examples/chat.mdx

This snippet demonstrates how to initialize the `Chat` component from `reachat` with a predefined set of sessions and conversations. It configures the component for a 'chat' view type, allowing users to interact with messages within a specific active session. The `onDeleteSession` prop is also shown, providing a callback for session deletion.

```tsx
<Chat
  sessions={[
    {
      id: '1',
      title: 'Session 1',
      createdAt: new Date(),
      updatedAt: new Date(),
      conversations: [
        {
          id: '1',
          question: 'What is React?',
          response: 'React is a JavaScript library for building user interfaces.',
          createdAt: new Date(),
          updatedAt: new Date()
        },
        {
          id: '2',
          question: 'What is JSX?',
          response: 'JSX is a syntax extension for JavaScript.',
          createdAt: new Date(),
          updatedAt: new Date()
        }
      ]
    }
  ]}
  activeSessionId="1"
  viewType="chat"
  onDeleteSession={() => alert("delete!")}
>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages>
      {(conversations) =>
        conversations.map((conversation) => (
          <SessionMessage
            key={conversation.id}
            conversation={conversation}
          />
        ))
      }
    </SessionMessages>
    <ChatInput />
  </SessionMessagePanel>
</Chat>
```

--------------------------------

### Integrating a Custom Remark Plugin into Reachat Chat Component

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/markdown.mdx

This TSX code demonstrates how to integrate the custom `remarkCve` plugin into the Reachat `Chat` component by passing it as an array element to the `remarkPlugins` prop. This enables the chat component to process and render CVE links according to the plugin's logic.

```TSX
import { Chat } from 'reachat';
import { remarkCve } from 'PATH_YOU_SAVED_THE_PLUGIN';

export function App() {
  return (
    <Chat remarkPlugins={[remarkCve]}>
      ...rest of your code...
    </Chat>
  );
}
```

--------------------------------

### Defining the ConversationFile API Model in TypeScript

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/api/models.mdx

This interface defines the structure for a `ConversationFile` object, representing files associated with a conversation. It includes properties for the file's name, and optional properties for type, size, and URL, enabling the tracking of relevant documents or media within a chat exchange.

```TypeScript
export interface ConversationFile {
  /**
   * Name of the file
   */
  name: string;

  /**
   * Type of the file
   */
  type?: string;

  /**
   * Size of the file
   */
  size?: number;

  /**
   * URL of the file
   */
  url?: string;
}
```

--------------------------------

### Defining the ChatTheme Interface (TypeScript)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/theme.mdx

This TypeScript interface defines the structure for customizing the Reachat UI. It specifies various string properties for styling different components like `base`, `console`, `companion`, `sessions`, `messages`, and `input` elements. Each property typically represents a CSS class string or a set of classes to apply for styling.

```ts
export interface ChatTheme {
  base: string;
  console: string;
  companion: string;
  empty: string;
  sessions: {
    base: string;
    console: string;
    companion: string;
    create: string;
    group: string;
    session: {
      base: string;
      active: string;
      delete: string;
    };
  };
  messages: {
    base: string;
    console: string;
    companion: string;
    back: string;
    inner: string;
    title: string;
    date: string;
    content: string;
    header: string;
    showMore: string;
    message: {
      base: string;
      question: string;
      response: string;
      cursor: string;
      overlay: string;
      expand: string;
      files: {
        base: string;
        file: {
          base: string;
          name: string;
        };
      };
      sources: {
        base: string;
        source: {
          base: string;
          companion: string;
          image: string;
          title: string;
          url: string;
        };
      };
      markdown: {
        p: string;
        a: string;
        table: string;
        th: string;
        td: string;
        code: string;
        toolbar: string;
        li: string;
        ul: string;
        ol: string;
        copy: string;
      };
      footer: {
        base: string;
        copy: string;
        upvote: string;
        downvote: string;
        refresh: string;
      };
    };
  };
  input: {
    base: string;
    upload: string;
    input: string;
    actions: {
      base: string;
      send: string;
      stop: string;
    };
  };
}
```

--------------------------------

### Defining the ConversationSource API Model in TypeScript

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/api/models.mdx

This interface specifies the structure for a `ConversationSource` object, used to describe external references or sources related to a conversation. It includes optional properties for a URL, title, and image URL, allowing for rich linking to information used in the AI's response.

```TypeScript
export interface ConversationSource {
  /**
   * URL of the source, if applicable
   */
  url?: string;

  /**
   * Title or description of the source
   */
  title?: string;

  /**
   * Image URL of the source, if applicable.
   */
  image?: string;
}
```

--------------------------------

### Applying Custom Theme to Chat Component (TSX)

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/customization/theme.mdx

This snippet demonstrates how to apply a custom theme to the `Chat` component in a Reachat application. It shows the `theme` prop being passed to the `Chat` component, allowing for comprehensive visual customization of the chat interface. The `theme` variable should be an object conforming to the `ChatTheme` interface.

```tsx
export default function App() {
  return <Chat theme={theme} ...rest of your props... />;
}
```

--------------------------------

### Defining the Session API Model in TypeScript

Source: https://github.com/reaviz/reachat-website/blob/master/src/pages/docs/api/models.mdx

This interface defines the structure of a `Session` object, representing a unique chat session. It includes properties for identification, timestamps, an optional title, and an array of associated `Conversation` objects, serving as the primary container for chat history.

```TypeScript
export interface Session {
  /**
   * Unique identifier for the session
   */
  id: string;

  /**
   * Title of the session
   */
  title?: string;

  /**
   * Date and time when the session was created
   */
  createdAt?: Date;

  /**
   * Date and time when the session was last updated
   */
  updatedAt?: Date;

  /**
   * Array of conversations within this session
   */
  conversations: Conversation[];
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.