@djangocfg/ui-tools 2.1.466 → 2.1.469

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.466",
+  "version": "2.1.469",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -334,8 +334,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.466",
-    "@djangocfg/ui-core": "^2.1.466",
+    "@djangocfg/i18n": "^2.1.469",
+    "@djangocfg/ui-core": "^2.1.469",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -418,9 +418,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.9.4"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.466",
-    "@djangocfg/typescript-config": "^2.1.466",
-    "@djangocfg/ui-core": "^2.1.466",
+    "@djangocfg/i18n": "^2.1.469",
+    "@djangocfg/typescript-config": "^2.1.469",
+    "@djangocfg/ui-core": "^2.1.469",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.9",
     "@types/node": "^25.9.5",

package/src/tools/chat/messages/MessageBubble.tsx

@@ -41,6 +41,7 @@ import type { ComposerAppearance } from '../composer/types';
 export interface MessageBubbleProps {
   message: ChatMessage;
   isUser?: boolean;
+  /** Show the sender avatar. Defaults to `false` for the flat transcript layout. */
   showAvatar?: boolean;
   /** Override avatar URL (skips persona resolution). */
   avatarSrc?: string;
@@ -158,9 +159,8 @@ const APPEARANCE_CLASSES: Record<ComposerAppearance, {
     avatar: 'size-10',
     avatarFallback: 'text-sm',
     content: 'max-w-[44rem]',
-    // Roomy ChatGPT-style bubble: larger text with generous line-height
-    // and padding so a full-page chat reads spacious, not just bigger.
-    bubble: 'rounded-3xl px-5 py-3.5 text-base leading-relaxed',
+    // Both roles share roomy geometry; their surfaces differ by intensity.
+    bubble: 'text-base leading-relaxed',
     meta: 'text-xs',
   },
 };
@@ -168,7 +168,7 @@ const APPEARANCE_CLASSES: Record<ComposerAppearance, {
 const MessageBubbleInner = ({
   message,
   isUser: isUserProp,
-  showAvatar = true,
+  showAvatar = false,
   avatarSrc,
   avatarFallback,
   user,
@@ -346,6 +346,7 @@ const MessageBubbleInner = ({
               // `select-text` on the prose itself: the text is the only
               // selection island, bounded to this one message.
               'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
+              appearance === 'full' && 'rounded-3xl px-5 py-3.5',
               ap.bubble,
               bubbleSurface,
             )}

package/src/tools/chat/messages/MessageDateSeparator.tsx

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { formatMessageDateLabel } from './messageDate';
+
+export interface MessageDateSeparatorProps {
+  timestamp: number;
+  timeZone: string;
+  locale?: string;
+  now?: number;
+  className?: string;
+}
+
+export const MessageDateSeparator = memo(function MessageDateSeparator({
+  timestamp,
+  timeZone,
+  locale,
+  now,
+  className,
+}: MessageDateSeparatorProps) {
+  const label = formatMessageDateLabel(timestamp, { locale, timeZone, now });
+
+  return (
+    <div
+      role="separator"
+      aria-label={label}
+      className={cn(
+        'flex items-center justify-center px-3 pb-2 pt-5 text-xs font-medium text-muted-foreground',
+        className,
+      )}
+    >
+      <time dateTime={new Date(timestamp).toISOString()}>{label}</time>
+    </div>
+  );
+});

package/src/tools/chat/messages/MessageList.tsx

@@ -19,6 +19,8 @@ import { useCopy } from '@djangocfg/ui-core/hooks';
 import type { ChatMessage } from '../types';
 import { useChatContextOptional } from '../context';
 import { MessageBubble } from './MessageBubble';
+import { MessageDateSeparator } from './MessageDateSeparator';
+import { formatMessageDateLabel, getCalendarDayKey } from './messageDate';
 import type { ComposerAppearance } from '../composer/types';
 
 export interface MessageListProps {
@@ -69,6 +71,18 @@ export interface MessageListProps {
    * whole bubble up for full-page chat. Default `compact` (no change).
    * Ignored when `renderItem` is set (the host owns bubble rendering). */
   appearance?: ComposerAppearance;
+  /** Show a divider when adjacent messages fall on different calendar days. */
+  showDateSeparators?: boolean;
+  /** Locale used for divider labels. Defaults to the viewer's locale. */
+  dateSeparatorLocale?: string;
+  /**
+   * IANA timezone used for calendar grouping (for example `UTC` or
+   * `Asia/Makassar`). Defaults to the viewer's browser timezone after mount.
+   * Message timestamps remain absolute UTC epoch milliseconds.
+   */
+  dateSeparatorTimeZone?: string;
+  /** Replace the default date divider while retaining day-grouping behavior. */
+  renderDateSeparator?: (timestamp: number, label: string) => ReactNode;
 }
 
 export interface MessageListHandle {
@@ -103,6 +117,10 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
     atBottomThreshold = 120,
     scrollAnchorId,
     appearance = 'compact',
+    showDateSeparators = true,
+    dateSeparatorLocale,
+    dateSeparatorTimeZone,
+    renderDateSeparator,
   },
   ref,
 ) {
@@ -110,6 +128,22 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
   const messages = messagesProp ?? ctx?.messages ?? [];
   const isLoadingMore = isLoadingMoreProp ?? ctx?.isLoadingMore ?? false;
   const { copyToClipboard } = useCopy();
+  // Do not guess the server timezone during SSR. When the host does not pass
+  // one explicitly, resolve it in the browser after mount; this avoids a
+  // hydration mismatch around midnight while still grouping for the viewer.
+  const [browserTimeZone, setBrowserTimeZone] = useState<string | undefined>(dateSeparatorTimeZone);
+  useEffect(() => {
+    if (dateSeparatorTimeZone) {
+      setBrowserTimeZone(dateSeparatorTimeZone);
+      return;
+    }
+    setBrowserTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC');
+  }, [dateSeparatorTimeZone]);
+  const resolvedDateSeparatorTimeZone = dateSeparatorTimeZone ?? browserTimeZone;
+  // Keep relative labels stable for the lifetime of this list. Normal chat
+  // activity remounts/re-renders the shell often enough; more importantly,
+  // one render cannot label adjacent separators against different instants.
+  const dateLabelNow = useMemo(() => Date.now(), []);
 
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
   // Virtuoso's `atBottomStateChange` only fires when the list is
@@ -210,6 +244,50 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
   );
 
   const itemRenderer = renderItem ?? defaultRenderItem;
+  const renderTranscriptItem = useCallback(
+    (m: ChatMessage, index: number) => {
+      const item = itemRenderer(m, index);
+      if (!showDateSeparators || !resolvedDateSeparatorTimeZone) return item;
+
+      const previous = messages[index - 1];
+      const startsNewDay =
+        !previous ||
+        getCalendarDayKey(previous.createdAt, resolvedDateSeparatorTimeZone) !==
+          getCalendarDayKey(m.createdAt, resolvedDateSeparatorTimeZone);
+
+      if (!startsNewDay) return item;
+
+      const separator = (
+        <MessageDateSeparator
+          timestamp={m.createdAt}
+          timeZone={resolvedDateSeparatorTimeZone}
+          locale={dateSeparatorLocale}
+          now={dateLabelNow}
+        />
+      );
+      const label = formatMessageDateLabel(m.createdAt, {
+        locale: dateSeparatorLocale,
+        timeZone: resolvedDateSeparatorTimeZone,
+        now: dateLabelNow,
+      });
+
+      return (
+        <>
+          {renderDateSeparator ? renderDateSeparator(m.createdAt, label) : separator}
+          {item}
+        </>
+      );
+    },
+    [
+      dateLabelNow,
+      dateSeparatorLocale,
+      itemRenderer,
+      messages,
+      renderDateSeparator,
+      resolvedDateSeparatorTimeZone,
+      showDateSeparators,
+    ],
+  );
   // Jump to bottom on the first non-empty messages batch. A SINGLE rAF +
   // scrollToIndex is not enough when the list mounts with a long transcript
   // (opening / switching a contact): virtuoso measures the dynamic bubble
@@ -242,9 +320,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
     // self-cancel.
     const scroller = scrollerRef.current;
     const scrollerEl =
-      scroller != null && scroller !== window && scroller instanceof HTMLElement
-        ? scroller
-        : null;
+      scroller != null && scroller !== window && scroller instanceof HTMLElement ? scroller : null;
     scrollerEl?.addEventListener('wheel', cancelOnUserScroll, { passive: true });
     scrollerEl?.addEventListener('touchstart', cancelOnUserScroll, { passive: true });
     scrollerEl?.addEventListener('keydown', cancelOnUserScroll);
@@ -454,7 +530,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
           </div>
         ) : null}
         {messages.map((m, i) => (
-          <div key={m.id ?? i}>{itemRenderer(m, i)}</div>
+          <div key={m.id ?? i}>{renderTranscriptItem(m, i)}</div>
         ))}
         {/* Mirror the virtualized Footer spacer so the last bubble keeps
             its breathing room above the composer in the non-virtual path. */}
@@ -474,7 +550,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       computeItemKey={computeItemKey}
       itemContent={(index, m) => {
         if (!m) return null;
-        const node = itemRenderer(m, index);
+        const node = renderTranscriptItem(m, index);
         // Wrap only the last bubble in a size-observed shell so we can
         // re-pin to the absolute bottom as the streaming reply grows
         // (corrects virtuoso's slight final-chunk under-scroll). The

package/src/tools/chat/messages/__tests__/messageDate.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import { formatMessageDateLabel, getCalendarDayKey } from '../messageDate';
+
+describe('messageDate', () => {
+  it('groups an absolute timestamp by the requested timezone', () => {
+    const timestamp = Date.UTC(2026, 6, 12, 23, 30);
+
+    expect(getCalendarDayKey(timestamp, 'UTC')).toBe('2026-07-12');
+    expect(getCalendarDayKey(timestamp, 'Asia/Makassar')).toBe('2026-07-13');
+  });
+
+  it('formats today and yesterday relative to the display timezone', () => {
+    const now = Date.UTC(2026, 6, 13, 12);
+
+    expect(
+      formatMessageDateLabel(Date.UTC(2026, 6, 13, 1), {
+        locale: 'en-US',
+        timeZone: 'UTC',
+        now,
+      }),
+    ).toBe('Today');
+    expect(
+      formatMessageDateLabel(Date.UTC(2026, 6, 12, 23), {
+        locale: 'en-US',
+        timeZone: 'UTC',
+        now,
+      }),
+    ).toBe('Yesterday');
+  });
+
+  it('includes the year only when the message is outside the current year', () => {
+    const now = Date.UTC(2026, 6, 13, 12);
+
+    expect(
+      formatMessageDateLabel(Date.UTC(2026, 6, 4, 12), {
+        locale: 'en-US',
+        timeZone: 'UTC',
+        now,
+      }),
+    ).toBe('Saturday, July 4');
+    expect(
+      formatMessageDateLabel(Date.UTC(2025, 6, 4, 12), {
+        locale: 'en-US',
+        timeZone: 'UTC',
+        now,
+      }),
+    ).toBe('Friday, July 4, 2025');
+  });
+});

package/src/tools/chat/messages/index.ts

@@ -8,6 +8,13 @@ export {
   type MessageListHandle,
 } from './MessageList';
 export { MessageBubble, type MessageBubbleProps } from './MessageBubble';
+export { MessageDateSeparator, type MessageDateSeparatorProps } from './MessageDateSeparator';
+export {
+  formatMessageDateLabel,
+  getCalendarDateParts,
+  getCalendarDayKey,
+  type CalendarDateParts,
+} from './messageDate';
 // The auto-detect link-preview slot — shared by MessageBubble and any forked
 // bubble (e.g. cmdop's mention bubble) so previews never silently drift.
 export { AutoLinkPreview, type AutoLinkPreviewProps } from './AutoLinkPreview';

package/src/tools/chat/messages/messageDate.ts

@@ -0,0 +1,79 @@
+/**
+ * Calendar helpers for chat timestamps.
+ *
+ * `ChatMessage.createdAt` is an epoch-millisecond value, so it represents an
+ * absolute UTC instant. Calendar grouping is deliberately performed in the
+ * viewer's display timezone: the same instant may belong to Monday in UTC and
+ * Tuesday in Asia/Makassar.
+ */
+
+export interface CalendarDateParts {
+  year: number;
+  month: number;
+  day: number;
+}
+
+export function getCalendarDateParts(timestamp: number, timeZone: string): CalendarDateParts {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts(new Date(timestamp));
+
+  const values = Object.fromEntries(
+    parts
+      .filter((part) => part.type === 'year' || part.type === 'month' || part.type === 'day')
+      .map((part) => [part.type, Number(part.value)]),
+  );
+
+  return {
+    year: values.year,
+    month: values.month,
+    day: values.day,
+  };
+}
+
+export function getCalendarDayKey(timestamp: number, timeZone: string): string {
+  const { year, month, day } = getCalendarDateParts(timestamp, timeZone);
+  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+}
+
+function calendarDayNumber(timestamp: number, timeZone: string): number {
+  const { year, month, day } = getCalendarDateParts(timestamp, timeZone);
+  return Math.floor(Date.UTC(year, month - 1, day) / 86_400_000);
+}
+
+function capitalizeLabel(label: string, locale?: string): string {
+  if (!label) return label;
+  return label[0].toLocaleUpperCase(locale) + label.slice(1);
+}
+
+export function formatMessageDateLabel(
+  timestamp: number,
+  options: {
+    locale?: string;
+    timeZone: string;
+    now?: number;
+  },
+): string {
+  const { locale, timeZone, now = Date.now() } = options;
+  const dayDelta = calendarDayNumber(timestamp, timeZone) - calendarDayNumber(now, timeZone);
+
+  if (dayDelta === 0 || dayDelta === -1) {
+    return capitalizeLabel(
+      new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(dayDelta, 'day'),
+      locale,
+    );
+  }
+
+  const messageYear = getCalendarDateParts(timestamp, timeZone).year;
+  const currentYear = getCalendarDateParts(now, timeZone).year;
+  return new Intl.DateTimeFormat(locale, {
+    timeZone,
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    ...(messageYear === currentYear ? {} : { year: 'numeric' as const }),
+  }).format(new Date(timestamp));
+}

package/src/tools/chat/styles/bubbleTokens.ts

@@ -15,10 +15,10 @@
 
 /** Bubble surface classes (background + text), keyed by message state. */
 export const BUBBLE_SURFACE = {
-  /** User-authored bubble — solid brand color. */
-  user: 'bg-primary text-primary-foreground rounded-tr-md',
-  /** Assistant bubble in normal state — neutral muted surface. */
-  assistant: 'bg-muted text-foreground rounded-tl-md',
+  /** User-authored bubble - a quiet neutral surface aligned to the right. */
+  user: 'bg-muted text-foreground',
+  /** Assistant replies use a lighter neutral surface than user messages. */
+  assistant: 'bg-muted/40 text-foreground',
   /** Assistant bubble when the turn failed — destructive tint. */
   error: 'bg-destructive/10 text-destructive rounded-tl-md border border-destructive/30',
 } as const;
@@ -44,23 +44,22 @@ export const BLOCK_SURFACE =
 /**
  * Anchor (link) classes for markdown content rendered inside a bubble.
  *
- * On `bg-primary` the link MUST stay legible against the cyan/brand fill —
- * `text-primary-foreground` matches the bubble's foreground token, so
- * contrast tracks the design system automatically.
+ * User and assistant prose now share neutral surfaces, so both roles use the
+ * theme's primary link color with a restrained underline.
  *
  * On the neutral assistant bubble we keep the brand-primary color so links
  * still pop without competing with the body text.
  */
 export const ANCHOR = {
   user:
-    'text-primary-foreground underline decoration-primary-foreground/60 underline-offset-2 ' +
-    'hover:decoration-primary-foreground transition-colors break-all',
+    'text-primary underline decoration-primary/50 underline-offset-2 ' +
+    'hover:text-primary/80 hover:decoration-primary transition-colors break-all',
   assistant: 'text-primary underline hover:text-primary/80 transition-colors break-all',
 } as const;
 
 /** Inline secondary action (e.g. "Show more / less"). Same logic as anchors. */
 export const TOGGLE = {
-  user: 'text-primary-foreground/80 hover:text-primary-foreground',
+  user: 'text-primary hover:text-primary/80',
   assistant: 'text-primary hover:text-primary/80',
 } as const;