# Make your own part

> Replace a part of the panel with your own component, built on useAssisted, useAui, useAuiState and the primitives, and drop it where the part went.

A part of your own is a component that reads the panel's state and acts on it. Build it on what `@super-assist/react` exports, then render it where the part it replaces went.

## Read and drive the panel

`useAssisted` gives the panel's open state and the open page's name:

```tsx
import { useAssisted } from "@super-assist/react";

function PageBadge() {
  const { page } = useAssisted();
  if (!page) return null;
  return <span className="rounded bg-muted px-1.5 text-xs">{page}</span>;
}
```

It also returns `isOpen`, `open(message?)` and `close()`.

## Read and drive the thread

`useAuiState` selects from the runtime's state and re-renders when the selection changes. `useAui` returns the client that acts on it:

```tsx
import { useAui, useAuiState } from "@super-assist/react";

function StartOver() {
  const aui = useAui();
  const running = useAuiState((s) => s.thread.isRunning);
  return (
    <button disabled={running} onClick={() => aui.threads.switchToNewThread()}>
      Start over
    </button>
  );
}
```

`s.thread` holds the open thread: `messages`, `isRunning`. `s.threads` holds the list: `threadIds`, `threadItems`, `mainThreadId`. `aui.threads` switches, starts and deletes threads. `useAuiEvent` subscribes to the runtime's events.

## Build on the primitives

The primitives are unstyled components with the panel's behavior: `ComposerPrimitive`, `ThreadPrimitive`, `MessagePrimitive`, `ActionBarPrimitive`, `BranchPickerPrimitive`, `AttachmentPrimitive`, `ErrorPrimitive`, `SuggestionPrimitive`, `ThreadListPrimitive` and `ThreadListItemPrimitive`. Style them with your own classes. A composer of your own:

```tsx
import { ComposerPrimitive } from "@super-assist/react";

function PlainComposer() {
  return (
    <ComposerPrimitive.Root className="flex gap-2 border-t p-2">
      <ComposerPrimitive.Input className="flex-1 bg-transparent" placeholder="Ask the shop…" />
      <ComposerPrimitive.Send className="rounded bg-primary px-3 text-primary-foreground">
        Send
      </ComposerPrimitive.Send>
    </ComposerPrimitive.Root>
  );
}
```

A part you replace takes its behavior with it. `PlainComposer` has no slash commands, which belong to `AssistedPanel.Input`.

## Drop it where the part went

Render the parts around it as before. Your components sit beside them:

```tsx
<AssistedPanel.Floating>
  <AssistedPanel.Main>
    <AssistedPanel.Header>
      <AssistedPanel.Icon />
      <AssistedPanel.Title />
      <PageBadge />
      <StartOver />
      <AssistedPanel.Close />
    </AssistedPanel.Header>
    <AssistedPanel.Conversation />
    <PlainComposer />
  </AssistedPanel.Main>
</AssistedPanel.Floating>
```

Inside a root, your component sits inside the panel's scoped styles and the runtime's context. Outside one, under `AssistedProvider`, `useAssisted`, `useAui` and `useAuiState` still work.

## Replace a message

Parts end where a single message begins. To change how a message looks, pass a component to `Messages`' `components`, built from `MessagePrimitive`:

```tsx
function Mine() {
  return (
    <MessagePrimitive.Root className="rounded-lg border-s-2 border-teal-600 bg-teal-50 px-3 py-2 text-sm">
      <MessagePrimitive.Parts />
    </MessagePrimitive.Root>
  );
}

<AssistedPanel.Conversation>
  <AssistedPanel.Messages components={{ AssistantMessage: Mine }} />
</AssistedPanel.Conversation>;
```

The slots are listed on [Conversation](https://superassist.app/components/panel/conversation.md#props). To change how a tool's call shows, see [Swap a card](https://superassist.app/how-to/swap-a-card.md).

## Reuse the panel's pieces

The pieces the parts are built from are exported too, for a part that keeps their look: `ThreadList`, `ModelSelector`, `EmptyState` with `EmptyStateGreeting`, `EmptyStateSuggestions` and `EmptyStateSuggestion`, `ConversationSearch`, `ThreadSearch`, `StoppedRun`, `SettingsPanel`, `ContextBreakdown`, `QuotaBanner`, `LauncherBubble`, `Suggestions`, `TooltipIconButton` and `ComposerTriggerPopover`. They take their data as props. The [react reference](https://superassist.app/reference/react.md#the-panels-pieces) lists them.