@flamingo-stack/openframe-frontend-core 0.0.685 → 0.0.686-2463.7461.1

package/src/components/chat/chat-message-list.tsx

@@ -14,10 +14,12 @@ import { useStickToBottom } from 'use-stick-to-bottom';
 import { cn } from '../../utils/cn';
 import { DotsLoaderIcon, Arrow02DownIcon } from '../icons-v2-generated';
 import { OverlayOpenRegistryProvider } from '../ui/overlay-open-registry';
+import { ChatAppearanceContext } from './chat-appearance-context';
 import { ChatMessageEnhanced } from './chat-message-enhanced';
 import { ChatMessageListSkeleton } from './chat-message-skeleton';
 import { CyclingPhrase } from './cycling-phrase';
 import type { ChatMessageListProps } from './types';
+import { CHAT_APPEARANCE } from './types/chat.types';
 import { SCROLL_ANCHOR } from './types/message.types';
 import type { MessageContent } from './types/message.types';
 
@@ -128,6 +130,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       contentClassName,
       assistantType,
       approvalVariant,
+      appearance = CHAT_APPEARANCE.CLASSIC,
       assistantIcon,
       pendingApprovals,
       hasNextPage,
@@ -915,118 +918,119 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     const showStreamingLoader = isTyping && !isPausedOnApproval && !(pendingApprovals && pendingApprovals.length > 0);
 
     return (
-      <OverlayOpenRegistryProvider onOpenChange={handleOverlayOpenChange}>
-        <div className="flex min-h-0 flex-1 flex-col">
-          {/* Positioning box for the jump-to-bottom button: it wraps ONLY the
+      <ChatAppearanceContext.Provider value={appearance}>
+        <OverlayOpenRegistryProvider onOpenChange={handleOverlayOpenChange}>
+          <div className="flex min-h-0 flex-1 flex-col">
+            {/* Positioning box for the jump-to-bottom button: it wraps ONLY the
             scroller, so `absolute bottom-…` really is the scroller's lower
             edge. The outer flex column also holds the streaming loader and the
             approvals bar, and anchoring against THAT box put the button over
             the loader for the whole of every stream — precisely when it is
             most likely to be visible. */}
-          <div className="relative flex min-h-0 flex-1 flex-col">
-            <div
-              ref={setScrollRef}
-              className={cn(
-                'flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden',
-                // `overscroll-contain` (default ON, opt-out via `overscrollContain={false}`):
-                // reaching the top/bottom of the thread must NOT chain the wheel/
-                // touch scroll to the page behind the chat — e.g. the company-hub
-                // deck (native body scroll + sticky slide panels) would otherwise
-                // advance slides while you scroll the chat (fixed in #1501; kept as
-                // the prop default here). Passive in-page DEMO chats disable it so
-                // the surrounding page keeps scrolling normally when the pointer is
-                // over the (non-interactive) thread.
-                overscrollContain && 'overscroll-contain',
-                'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30',
-                className,
-              )}
-              {...props}
-            >
+            <div className="relative flex min-h-0 flex-1 flex-col">
               <div
-                ref={setContentRef}
+                ref={setScrollRef}
                 className={cn(
-                  // `fullWidth=true` drops the centered-narrow column for
-                  // side-panel hosts (e.g. multi-platform-hub Mingo). Same
-                  // semantics as ChatHeader / ChatInput / ChatFooter.
-                  fullWidth
-                    ? 'flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]'
-                    : 'mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]',
-                  contentClassName ?? 'px-[var(--spacing-system-m)]',
+                  'flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden',
+                  // `overscroll-contain` (default ON, opt-out via `overscrollContain={false}`):
+                  // reaching the top/bottom of the thread must NOT chain the wheel/
+                  // touch scroll to the page behind the chat — e.g. the company-hub
+                  // deck (native body scroll + sticky slide panels) would otherwise
+                  // advance slides while you scroll the chat (fixed in #1501; kept as
+                  // the prop default here). Passive in-page DEMO chats disable it so
+                  // the surrounding page keeps scrolling normally when the pointer is
+                  // over the (non-interactive) thread.
+                  overscrollContain && 'overscroll-contain',
+                  'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30',
+                  className,
                 )}
-                style={{ minHeight: '100%' }}
+                {...props}
               >
-                {hasNextPage && <div ref={sentinelRef} className="h-px" />}
-                <div className="flex-1" />
-                {messages.map((message, index) => {
-                  // Hidden messages (synthetic continuation prompts the host
-                  // injects after an approval card) are part of the API
-                  // conversation history but never render. Skipping here
-                  // keeps the visible thread coherent — see
-                  // `Message.hidden` doc-comment in message.types.ts.
-                  if (message.hidden) return null;
-                  // ONE OWNER for the pending turn. Both send paths mint an empty
-                  // assistant placeholder (the accumulation target — it MUST stay
-                  // in state) and flip the phase to 'thinking'. Rendering it here
-                  // too would put an author label with no body in the transcript
-                  // WHILE the footer loader below already represents the same
-                  // pending turn — two owners, and an `aria-live` log that
-                  // announces a bare "Mingo". The footer loader wins (it is
-                  // already `role="status" aria-live="polite"`, sits outside the
-                  // scroller so it can't jitter the thread, and cycles the
-                  // progress phrase), so the placeholder is not rendered AT ALL
-                  // until it carries something visible — removed from the live
-                  // region, not merely hidden. Mirrors `endSseTurn`, which prunes
-                  // an empty trailing assistant AFTER a turn; this closes the same
-                  // window BEFORE the first token. Any non-text segment (tool
-                  // execution, approval card, thinking) counts as visible.
-                  const isEmptyPendingTurn =
-                    index === messages.length - 1 &&
-                    isTyping &&
-                    message.role === 'assistant' &&
-                    !hasNonEmptyContent(message.content) &&
-                    (!Array.isArray(message.content) || message.content.every(s => s.type === 'text'));
-                  if (isEmptyPendingTurn) return null;
-                  const ownedContent = renderAfterMessage?.(message, index);
-                  const row = (
-                    <ChatMessageEnhanced
-                      key={message.id}
-                      ref={getRegisterMessageEl(message.id)}
-                      role={message.role}
-                      name={message.name}
-                      content={message.content}
-                      timestamp={message.timestamp}
-                      isTyping={index === messages.length - 1 && isTyping && message.role === 'assistant'}
-                      avatar={showAvatars ? message.avatar : null}
-                      showAvatar={showAvatars}
-                      assistantType={message.assistantType || assistantType}
-                      approvalVariant={approvalVariant}
-                      authorType={message.authorType}
-                      assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
-                      contextItems={message.contextItems}
-                      resolveContextIcon={resolveContextIcon}
-                      renderContextItem={renderContextItem}
-                      renderMention={renderMention}
-                      renderEntityCard={renderEntityCard}
-                      refs={message.refs}
-                      onAskSelect={index > lastUserMessageIndex ? onAskSelect : undefined}
-                      NavLinkAnchor={NavLinkAnchor}
-                    />
-                  );
-                  // Only wrap when there IS owned content: the bare row keeps
-                  // its own key and its place as a direct flex child, so a
-                  // thread without any stays byte-identical to before.
-                  if (!ownedContent) return row;
-                  return (
-                    <div key={message.id} className="grid w-full min-w-0 grid-cols-1">
-                      {row}
-                      {ownedContent}
-                    </div>
-                  );
-                })}
+                <div
+                  ref={setContentRef}
+                  className={cn(
+                    // `fullWidth=true` drops the centered-narrow column for
+                    // side-panel hosts (e.g. multi-platform-hub Mingo). Same
+                    // semantics as ChatHeader / ChatInput / ChatFooter.
+                    fullWidth
+                      ? 'flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]'
+                      : 'mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]',
+                    contentClassName ?? 'px-[var(--spacing-system-m)]',
+                  )}
+                  style={{ minHeight: '100%' }}
+                >
+                  {hasNextPage && <div ref={sentinelRef} className="h-px" />}
+                  <div className="flex-1" />
+                  {messages.map((message, index) => {
+                    // Hidden messages (synthetic continuation prompts the host
+                    // injects after an approval card) are part of the API
+                    // conversation history but never render. Skipping here
+                    // keeps the visible thread coherent — see
+                    // `Message.hidden` doc-comment in message.types.ts.
+                    if (message.hidden) return null;
+                    // ONE OWNER for the pending turn. Both send paths mint an empty
+                    // assistant placeholder (the accumulation target — it MUST stay
+                    // in state) and flip the phase to 'thinking'. Rendering it here
+                    // too would put an author label with no body in the transcript
+                    // WHILE the footer loader below already represents the same
+                    // pending turn — two owners, and an `aria-live` log that
+                    // announces a bare "Mingo". The footer loader wins (it is
+                    // already `role="status" aria-live="polite"`, sits outside the
+                    // scroller so it can't jitter the thread, and cycles the
+                    // progress phrase), so the placeholder is not rendered AT ALL
+                    // until it carries something visible — removed from the live
+                    // region, not merely hidden. Mirrors `endSseTurn`, which prunes
+                    // an empty trailing assistant AFTER a turn; this closes the same
+                    // window BEFORE the first token. Any non-text segment (tool
+                    // execution, approval card, thinking) counts as visible.
+                    const isEmptyPendingTurn =
+                      index === messages.length - 1 &&
+                      isTyping &&
+                      message.role === 'assistant' &&
+                      !hasNonEmptyContent(message.content) &&
+                      (!Array.isArray(message.content) || message.content.every(s => s.type === 'text'));
+                    if (isEmptyPendingTurn) return null;
+                    const ownedContent = renderAfterMessage?.(message, index);
+                    const row = (
+                      <ChatMessageEnhanced
+                        key={message.id}
+                        ref={getRegisterMessageEl(message.id)}
+                        role={message.role}
+                        name={message.name}
+                        content={message.content}
+                        timestamp={message.timestamp}
+                        isTyping={index === messages.length - 1 && isTyping && message.role === 'assistant'}
+                        avatar={showAvatars ? message.avatar : null}
+                        showAvatar={showAvatars}
+                        assistantType={message.assistantType || assistantType}
+                        approvalVariant={approvalVariant}
+                        authorType={message.authorType}
+                        assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
+                        contextItems={message.contextItems}
+                        resolveContextIcon={resolveContextIcon}
+                        renderContextItem={renderContextItem}
+                        renderMention={renderMention}
+                        renderEntityCard={renderEntityCard}
+                        refs={message.refs}
+                        onAskSelect={index > lastUserMessageIndex ? onAskSelect : undefined}
+                        NavLinkAnchor={NavLinkAnchor}
+                      />
+                    );
+                    // Only wrap when there IS owned content: the bare row keeps
+                    // its own key and its place as a direct flex child, so a
+                    // thread without any stays byte-identical to before.
+                    if (!ownedContent) return row;
+                    return (
+                      <div key={message.id} className="grid w-full min-w-0 grid-cols-1">
+                        {row}
+                        {ownedContent}
+                      </div>
+                    );
+                  })}
+                </div>
               </div>
-            </div>
 
-            {/* Jump to bottom. The manual escape hatch from auto-scroll that
+              {/* Jump to bottom. The manual escape hatch from auto-scroll that
               every 2026 chat surface ships (AI Elements calls it
               `ConversationScrollButton`) and the WCAG 2.2.2 counterpart to
               moving content: the reader can always get back to the live
@@ -1037,79 +1041,80 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
               height either way — a sibling would shrink the scroller and
               move the very bottom it points at. Hidden while at the bottom
               and in passive demo hosts. */}
-            {autoScroll && !atBottom && messages.length > 0 && (
-              <button
-                type="button"
-                onClick={() => {
-                  // Clicking IS the intent to return to the live end, so it
-                  // re-arms the follow lock a scroll-up had released.
-                  followBottomRef.current = true;
-                  void scrollToBottom({ animation: 'smooth' });
-                }}
-                aria-label="Scroll to latest message"
-                className={cn(
-                  'absolute bottom-[var(--spacing-system-s)] left-1/2 z-10 -translate-x-1/2',
-                  'flex size-9 items-center justify-center rounded-full',
-                  'border border-ods-border bg-ods-card text-ods-text-primary shadow-lg',
-                  'transition-colors hover:bg-ods-bg-hover',
-                )}
-              >
-                <Arrow02DownIcon size={16} />
-              </button>
-            )}
-          </div>
+              {autoScroll && !atBottom && messages.length > 0 && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    // Clicking IS the intent to return to the live end, so it
+                    // re-arms the follow lock a scroll-up had released.
+                    followBottomRef.current = true;
+                    void scrollToBottom({ animation: 'smooth' });
+                  }}
+                  aria-label="Scroll to latest message"
+                  className={cn(
+                    'absolute bottom-[var(--spacing-system-s)] left-1/2 z-10 -translate-x-1/2',
+                    'flex size-9 items-center justify-center rounded-full',
+                    'border border-ods-border bg-ods-card text-ods-text-primary shadow-lg',
+                    'transition-colors hover:bg-ods-bg-hover',
+                  )}
+                >
+                  <Arrow02DownIcon size={16} />
+                </button>
+              )}
+            </div>
 
-          {/* Footer-pinned streaming loader — outside the scroller so it
+            {/* Footer-pinned streaming loader — outside the scroller so it
             doesn't jitter as the streaming message grows. Color is set
             via inline style (CSS var) rather than a Tailwind class so it
             is JIT-independent when this lib is consumed via yalc. */}
-          {showStreamingLoader && (
-            <div
-              className={cn(
-                fullWidth
-                  ? 'flex w-full items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]'
-                  : 'mx-auto flex w-full max-w-ods-content-narrow items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]',
-                contentClassName ?? 'px-[var(--spacing-system-m)]',
-              )}
-              style={{ color: 'var(--color-text-muted)' }}
-              role="status"
-              aria-live="polite"
-            >
-              <DotsLoaderIcon className="h-6 w-6" />
-              <CyclingPhrase words={STREAMING_WORDS} className="text-h6" />
-            </div>
-          )}
+            {showStreamingLoader && (
+              <div
+                className={cn(
+                  fullWidth
+                    ? 'flex w-full items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]'
+                    : 'mx-auto flex w-full max-w-ods-content-narrow items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]',
+                  contentClassName ?? 'px-[var(--spacing-system-m)]',
+                )}
+                style={{ color: 'var(--color-text-muted)' }}
+                role="status"
+                aria-live="polite"
+              >
+                <DotsLoaderIcon className="h-6 w-6" />
+                <CyclingPhrase words={STREAMING_WORDS} className="text-h6" />
+              </div>
+            )}
 
-          {/* Sticky Pending Approvals — outside the scroller; same
+            {/* Sticky Pending Approvals — outside the scroller; same
             structure as the v1 baseline. The library's RO watches
             `contentRef` (INSIDE the scroller), so height changes to
             this sibling don't trigger the library directly. If a
             future UX requires snapping to bottom when approvals
             appear, that hookup goes here. */}
-          {pendingApprovals && pendingApprovals.length > 0 && (
-            <div
-              className={cn(
-                'border-t border-ods-border bg-ods-bg/95 backdrop-blur-sm',
-                fullWidth ? 'w-full' : 'mx-auto w-full max-w-ods-content-narrow',
-                contentClassName ?? 'px-[var(--spacing-system-m)]',
-              )}
-            >
-              <ChatMessageEnhanced
-                role="assistant"
-                name={assistantType === 'mingo' ? 'Mingo' : 'Fae'}
-                content={pendingApprovals}
-                timestamp={new Date()}
-                showAvatar={showAvatars}
-                assistantType={assistantType}
-                approvalVariant={approvalVariant}
-                assistantIcon={assistantIcon}
-                NavLinkAnchor={NavLinkAnchor}
-                className="py-3"
-              />
-            </div>
-          )}
-        </div>
-      </OverlayOpenRegistryProvider>
+            {pendingApprovals && pendingApprovals.length > 0 && (
+              <div
+                className={cn(
+                  'border-t border-ods-border bg-ods-bg/95 backdrop-blur-sm',
+                  fullWidth ? 'w-full' : 'mx-auto w-full max-w-ods-content-narrow',
+                  contentClassName ?? 'px-[var(--spacing-system-m)]',
+                )}
+              >
+                <ChatMessageEnhanced
+                  role="assistant"
+                  name={assistantType === 'mingo' ? 'Mingo' : 'Fae'}
+                  content={pendingApprovals}
+                  timestamp={new Date()}
+                  showAvatar={showAvatars}
+                  assistantType={assistantType}
+                  approvalVariant={approvalVariant}
+                  assistantIcon={assistantIcon}
+                  NavLinkAnchor={NavLinkAnchor}
+                  className="py-3"
+                />
+              </div>
+            )}
+          </div>
+        </OverlayOpenRegistryProvider>
+      </ChatAppearanceContext.Provider>
     );
   },
 );

package/src/components/chat/chat-nav-sidebar.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
+
+export interface ChatNavSidebarItem {
+  id: string;
+  label: string;
+  /** 24px glyph before the label. */
+  icon: ReactNode;
+  /** The view this item opens is the one on screen. */
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export interface ChatNavSidebarProps extends HTMLAttributes<HTMLElement> {
+  /** Brand row at the top. */
+  logo?: ReactNode;
+  /** Primary actions under the logo (new chat, archive, help, ...). */
+  items: ChatNavSidebarItem[];
+  /** Caption over the list (e.g. "Your Current Chats"). */
+  sectionLabel?: string;
+  /** The list itself, typically `ChatListItem` rows or an empty state. Scrolls
+   *  on its own; everything above it stays put. */
+  children?: ReactNode;
+  /** Pinned under the list, full width, above a divider (e.g. the MSP card). */
+  footer?: ReactNode;
+}
+
+/**
+ * Left rail of the fae chat v2 layout (Figma `chat-sidebar`): brand, a stack of
+ * navigation actions, a captioned scrolling list and a pinned footer. It only
+ * lays things out; which rows exist, what they show and what selecting them
+ * does belong to the host.
+ */
+const ChatNavSidebar = forwardRef<HTMLElement, ChatNavSidebarProps>(
+  ({ className, logo, items, sectionLabel, children, footer, ...props }, ref) => {
+    const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>();
+
+    return (
+      <aside
+        ref={ref}
+        className={cn('flex h-full w-[296px] shrink-0 flex-col border-r border-ods-border bg-ods-bg', className)}
+        {...props}
+      >
+        <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] px-[var(--spacing-system-xs)] pt-[var(--spacing-system-mf)]">
+          {logo && <div className="flex shrink-0 items-center px-[var(--spacing-system-xs)]">{logo}</div>}
+
+          <nav className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]">
+            {items.map(item => (
+              <ChatNavSidebarButton key={item.id} icon={item.icon} active={item.active} onClick={item.onClick}>
+                {item.label}
+              </ChatNavSidebarButton>
+            ))}
+          </nav>
+
+          <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
+            {sectionLabel && (
+              <p className="shrink-0 px-[var(--spacing-system-xs)] pt-[var(--spacing-system-xs)] text-ods-text-secondary text-h5">
+                {sectionLabel}
+              </p>
+            )}
+            <div className="relative flex min-h-0 flex-1 flex-col">
+              <div
+                ref={scrollRef}
+                onScroll={updateFade}
+                className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)] overflow-y-auto overscroll-contain pb-[var(--spacing-system-mf)]"
+              >
+                {children}
+              </div>
+              <ScrollFadeOverlay edge="top" visible={fadeTop} />
+              <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
+            </div>
+          </div>
+        </div>
+
+        {footer && <div className="shrink-0 border-t border-ods-border">{footer}</div>}
+      </aside>
+    );
+  },
+);
+
+ChatNavSidebar.displayName = 'ChatNavSidebar';
+
+interface ChatNavSidebarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  active?: boolean;
+}
+
+function ChatNavSidebarButton({ icon, active, className, children, ...props }: ChatNavSidebarButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-current={active ? 'page' : undefined}
+      className={cn(
+        'flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left text-h4',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
+        '[&_svg]:size-6 [&_svg]:shrink-0',
+        active ? 'text-ods-accent' : 'text-ods-text-primary [&_svg]:text-ods-text-secondary',
+        className,
+      )}
+      {...props}
+    >
+      {icon}
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+    </button>
+  );
+}
+
+export interface ChatListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+  title: ReactNode;
+  /** Second line (e.g. the ticket number). */
+  subtitle?: ReactNode;
+  /** 16px mark before the title (e.g. a resolved check). */
+  leading?: ReactNode;
+  /** 24px status glyph at the row's end. */
+  trailing?: ReactNode;
+  /** The chat open on screen. */
+  active?: boolean;
+}
+
+/**
+ * One row of the `ChatNavSidebar` list (Figma `chat-list-item`): a one-line
+ * title over a caption, an optional mark before the title and a status glyph
+ * at the end. The selected row takes the accent's secondary fill, so a tenant
+ * accent recolours it with the rest of the brand.
+ */
+const ChatListItem = forwardRef<HTMLButtonElement, ChatListItemProps>(
+  ({ className, title, subtitle, leading, trailing, active, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      aria-current={active ? 'true' : undefined}
+      className={cn(
+        'flex w-full shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
+        active && 'bg-ods-accent-secondary',
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+          {leading && <span className="flex shrink-0 items-center [&_svg]:size-4">{leading}</span>}
+          <span className={cn('min-w-0 flex-1 truncate text-h4', active ? 'text-ods-accent' : 'text-ods-text-primary')}>
+            {title}
+          </span>
+        </span>
+        {subtitle != null && (
+          <span className={cn('truncate text-h6', active ? 'text-ods-text-primary' : 'text-ods-text-secondary')}>
+            {subtitle}
+          </span>
+        )}
+      </span>
+      {trailing && <span className="flex shrink-0 items-center [&_svg]:size-6">{trailing}</span>}
+    </button>
+  ),
+);
+
+ChatListItem.displayName = 'ChatListItem';
+
+export { ChatNavSidebar, ChatListItem };