Custom Support Portal

Add a comprehensive customer support portal to this app using the `@helperai/react` hooks. The portal should allow customers to view their support tickets, create new ones, and engage in real-time conversations with AI agents.

IMPORTANT:
- These instructions are for React and Next.js, so adapt them as required for the current framework.
- If you run into an instruction you cannot follow in this app, ask for clarification.
- Reuse existing UI components from this app as much as possible, falling back to simple HTML if necessary.
- Before starting work, read the documentation at the following URL to use as a reference: https://helper.ai/docs/api/05-client-sdk

## 1. Installation

Install the following with npm/pnpm/yarn/etc: `@helperai/client @helperai/react @ai-sdk/react`

## 2. Session management

Create a *server-side* `createHelperSession` helper function that calls `generateHelperAuth` from `@helperai/react` like this:

```tsx
return generateHelperAuth({
  email: "CURRENT_CUSTOMER_EMAIL",
  hmacSecret: "YOUR_HMAC_SECRET", // Store this separately, for example in an environment variable or secret. It MUST NOT be exposed to the client side or committed to version control.
})
```

## 3. Support portal layout

Create a page that wraps the entire support portal in `HelperClientProvider`:

```tsx
"use server";
import { HelperClientProvider } from "@helperai/react";
import { generateSession } from "./generateSession";

export default async function SupportPage() {
  const session = generateSession(); // Create an API endpoint if not using server components
  
  return (
    <HelperClientProvider host="https://your-helper-instance.com" session={session}>
      <SupportPortal />
    </HelperClientProvider>
  );
}
```

## 4. Support portal component

Create the `SupportPortal` component. It should include state management for `selectedConversationSlug`, and do the following:
- When the selected slug is null, it should render a list component which:
  - Uses the `const { data: conversationsData, isLoading, error } = useConversations()` hook to fetch conversations
  - Displays the conversations in a table/grid format with columns: Subject, Message count, Last updated
  - Sets the `selectedConversationSlug` state variable when a conversation is clicked
- When the selected slug is not null, it should instead render a conversation detail component which:
  - Fetches the conversation details using the `const { data: conversation, isLoading, error } = useConversation(conversationSlug)` hook
  - Calls the `useRealtimeEvents(conversation.slug)` hook to automatically update the conversation data
  - Displays the conversation subject as the page heading
  - Displays the conversation messages using `conversation.messages.map(({ content, role, staffName, createdAt }) => ...)`
  - Uses the `MessageContent` component to display the `content` of each message
  - Displays an input field and submit button which adds a new message to the conversation using the `useCreateMessage()` hook, called like: `createMessage({ conversationSlug: conversation.slug, content: input.trim() })`

## 5. New ticket button

- Above the conversation list, add a new ticket button which:
  - Opens a modal containing a form with subject and message input fields
  - Uses the `useCreateConversation()` hook to create a new conversation with the `subject` input value, then calls `useCreateMessage()` to create the first message in the conversation
  - Reloads the conversation list

## 6. Final steps

- Tell me the route of the page you created (e.g., /support)
- Tell me how to add the Helper HMAC secret configuration (note: the secret itself is available at https://your-helper-instance.com/settings/in-app-chat under "Authenticate your users")