Legacy/Styled Components
Custom Scrollbar
If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate @radix-ui/react-scroll-area.
An example implementation of this is shadcn-ui's Scroll Area.
Add shadcn Scroll Area
npx shadcn@latest add scroll-area@radix-ui/react-scroll-area v1.2.0 release candidate required
The v1.2.0-rc.x release candidate can be installed via
pnpm add @radix-ui/react-scroll-area@nextAdditional Styles
The radix-ui Viewport component adds an intermediate <div data-radix-scroll-area-content> element.
Add the following CSS to your globals.css:
.aui-thread-viewport > [data-radix-scroll-area-content] {
@apply flex flex-col items-center self-stretch bg-inherit;
}Integration
- Decompose
ThreadintoMyThread(see Decomposition) - Wrap
Thread.Rootwith<ScrollAreaPrimitive.Root asChild> - Wrap
Thread.Viewportwith<ScrollAreaPrimitive.Viewport asChild> - Add shadcn's
<ScrollBar />toThread.Root
The resulting MyThread component should look like this:
import {
Thread,
ThreadWelcome,
Composer,
type ThreadConfig,
} from "@assistant-ui/react-ui";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { ScrollBar } from "@/components/ui/scroll-area";
const MyThread: FC<ThreadConfig> = (config) => {
return (
<ScrollAreaPrimitive.Root asChild>
<Thread.Root config={config}>
<ScrollAreaPrimitive.Viewport asChild>
<Thread.Viewport>
<ThreadWelcome />
<Thread.Messages />
<Thread.ViewportFooter>
<Thread.ScrollToBottom />
<Composer />
</Thread.ViewportFooter>
</Thread.Viewport>
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
</Thread.Root>
</ScrollAreaPrimitive.Root>
);
};