logoassistant-ui
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@next

Additional Styles

The radix-ui Viewport component adds an intermediate <div data-radix-scroll-area-content> element. Add the following CSS to your globals.css:

@/app/globals.css
.aui-thread-viewport > [data-radix-scroll-area-content] {
  @apply flex flex-col items-center self-stretch bg-inherit;
}

Integration

  • Decompose Thread into MyThread (see Decomposition)
  • Wrap Thread.Root with <ScrollAreaPrimitive.Root asChild>
  • Wrap Thread.Viewport with <ScrollAreaPrimitive.Viewport asChild>
  • Add shadcn's <ScrollBar /> to Thread.Root

The resulting MyThread component should look like this:

import {
  Thread,
  ThreadWelcome,
  Composer,
  type ThreadConfig,
} from "@assistant-ui/react";
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>
  );
};

Previous

Decomposition

Next

Thread

On this page

Edit on Github