ai-design-system 0.1.116 → 0.1.117

package/components/composites/SessionHeader/SessionHeader.tsx

@@ -17,10 +17,24 @@ export interface ChatSessionInfo {
 }
 
 import type { FileDownloadResult } from '@/components/composites/FileTreeExplorer';
+import { formatDayLabel } from '@/lib/date';
 
 
 export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string;
+  /**
+   * What a session is called.
+   * - "title": the session's own title (default).
+   * - "date": the day it was created, as "21 Aug 2025", in the reader's time
+   *   zone. For a surface that keeps one session per day, where the day is
+   *   what tells sessions apart and a first message is not.
+   * @default "title"
+   */
+  titleFormat?: 'title' | 'date';
+  /**
+   * IANA time zone for "date" titles. Defaults to the reader's own.
+   */
+  timeZone?: string;
   sessions?: ChatSessionInfo[];
   activeSessionId?: string | null;
   onNewSession?: () => void;
@@ -48,7 +62,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
+  ({ title, titleFormat = 'title', timeZone, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
     const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -66,9 +80,16 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
       URL.revokeObjectURL(url);
     }, [onDownloadSession]);
 
-    const displayTitle = title || (activeSessionId 
-      ? (activeSession?.title || 'Untitled Session')
-      : 'New Session');
+    const byDate = titleFormat === 'date';
+    const sessionLabel = (session: ChatSessionInfo | undefined): string => {
+      if (!byDate) return session?.title || 'Untitled Session';
+      // A session not yet in the list is the one being started now: today's.
+      return formatDayLabel(session?.created_at ?? new Date(), { timeZone }) || 'Untitled Session';
+    };
+
+    const displayTitle = title || (activeSessionId
+      ? sessionLabel(activeSession)
+      : byDate ? formatDayLabel(new Date(), { timeZone }) : 'New Session');
 
     return (
       <div 
@@ -121,8 +142,11 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
                       onClick={() => onSelectSession?.(session.id)}
                       className="flex flex-col items-start py-2 cursor-pointer"
                     >
-                      <span className="text-sm font-medium truncate w-full">{session.title || 'Untitled Session'}</span>
-                      <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                      <span className="text-sm font-medium truncate w-full">{sessionLabel(session)}</span>
+                      {/* The date is the title in "date" mode; repeating it underneath says nothing. */}
+                      {!byDate && (
+                        <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                      )}
                     </DropdownMenuItem>
                   ))
                 ) : (

package/components/features/ChatPanel/ChatPanel.tsx

@@ -220,6 +220,17 @@ export interface ChatPanelProps {
    * Title override for the session header
    */
   sessionTitle?: string;
+  /**
+   * What sessions are called in the header and the history list: their own
+   * title ("title", default) or the day they were created ("date", shown as
+   * "21 Aug 2025" in the reader's time zone).
+   * @default "title"
+   */
+  sessionTitleFormat?: 'title' | 'date';
+  /**
+   * IANA time zone for "date" session titles. Defaults to the reader's own.
+   */
+  sessionTimeZone?: string;
   /**
    * Whether to show action buttons in the session header
    * @default true
@@ -304,6 +315,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
+    sessionTitleFormat = 'title',
+    sessionTimeZone,
     showSessionActions = true,
     showNewSession = true,
     showDownloadSession = true,
@@ -468,6 +481,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
         {showHeader && (
           <SessionHeader
             title={sessionTitle}
+            titleFormat={sessionTitleFormat}
+            timeZone={sessionTimeZone}
             showActions={showSessionActions}
             showNewSession={showNewSession}
             showDownloadSession={showDownloadSession}

package/components/index.ts

@@ -94,6 +94,9 @@ export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
 
 // Utilities
 export { cn } from '@/lib/utils';
+// Calendar days in the reader's time zone
+export { formatDayLabel, dayKey, isSameDay, userTimeZone } from '@/lib/date';
+export type { DayOptions } from '@/lib/date';
 export { ButtonSwitcher } from './composites';
 export type { ButtonSwitcherProps, ButtonSwitcherItem } from './composites';
 

package/dist/index.cjs

@@ -8136,9 +8136,43 @@ var ApprovalCard = React3__namespace.memo(
   }
 );
 ApprovalCard.displayName = "ApprovalCard";
+
+// lib/date.ts
+function userTimeZone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+function dayParts(value, options) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  const zone = (options == null ? void 0 : options.timeZone) ? { timeZone: options.timeZone } : {};
+  const named = new Intl.DateTimeFormat("en-US", __spreadValues({ day: "numeric", month: "short", year: "numeric" }, zone)).formatToParts(date);
+  const numeric = new Intl.DateTimeFormat("en-US", __spreadValues({ month: "2-digit" }, zone)).formatToParts(date);
+  const part = (parts, type) => {
+    var _a, _b;
+    return (_b = (_a = parts.find((p) => p.type === type)) == null ? void 0 : _a.value) != null ? _b : "";
+  };
+  return {
+    day: part(named, "day"),
+    month: part(named, "month"),
+    monthNumber: part(numeric, "month"),
+    year: part(named, "year")
+  };
+}
+function formatDayLabel(value, options) {
+  const parts = dayParts(value, options);
+  return parts ? `${parts.day} ${parts.month} ${parts.year}` : "";
+}
+function dayKey(value, options) {
+  const parts = dayParts(value, options);
+  return parts ? `${parts.year}-${parts.monthNumber}-${parts.day.padStart(2, "0")}` : "";
+}
+function isSameDay(a, b, options) {
+  const key = dayKey(a, options);
+  return key !== "" && key === dayKey(b, options);
+}
 var SessionHeader = React3__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "showNewSession", "showDownloadSession", "onOverview", "showOverview", "className"]);
+    var _b = _a, { title, titleFormat = "title", timeZone, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className } = _b, props = __objRest(_b, ["title", "titleFormat", "timeZone", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "showNewSession", "showDownloadSession", "onOverview", "showOverview", "className"]);
     const activeSession = sessions == null ? void 0 : sessions.find((s) => s.id === activeSessionId);
     const downloadRef = React3__namespace.useRef(null);
     const handleDownloadClick = React3__namespace.useCallback(async () => {
@@ -8154,7 +8188,13 @@ var SessionHeader = React3__namespace.forwardRef(
       }
       URL.revokeObjectURL(url);
     }, [onDownloadSession]);
-    const displayTitle = title || (activeSessionId ? (activeSession == null ? void 0 : activeSession.title) || "Untitled Session" : "New Session");
+    const byDate = titleFormat === "date";
+    const sessionLabel = (session) => {
+      var _a2;
+      if (!byDate) return (session == null ? void 0 : session.title) || "Untitled Session";
+      return formatDayLabel((_a2 = session == null ? void 0 : session.created_at) != null ? _a2 : /* @__PURE__ */ new Date(), { timeZone }) || "Untitled Session";
+    };
+    const displayTitle = title || (activeSessionId ? sessionLabel(activeSession) : byDate ? formatDayLabel(/* @__PURE__ */ new Date(), { timeZone }) : "New Session");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -8188,8 +8228,8 @@ var SessionHeader = React3__namespace.forwardRef(
                     onClick: () => onSelectSession == null ? void 0 : onSelectSession(session.id),
                     className: "flex flex-col items-start py-2 cursor-pointer",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate w-full", children: session.title || "Untitled Session" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: new Date(session.created_at).toLocaleString() })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate w-full", children: sessionLabel(session) }),
+                      !byDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: new Date(session.created_at).toLocaleString() })
                     ]
                   },
                   session.id
@@ -8407,6 +8447,8 @@ var ChatPanel = React3__namespace.memo(
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
+    sessionTitleFormat = "title",
+    sessionTimeZone,
     showSessionActions = true,
     showNewSession = true,
     showDownloadSession = true,
@@ -8536,6 +8578,8 @@ var ChatPanel = React3__namespace.memo(
         SessionHeader,
         {
           title: sessionTitle,
+          titleFormat: sessionTitleFormat,
+          timeZone: sessionTimeZone,
           showActions: showSessionActions,
           showNewSession,
           showDownloadSession,
@@ -18607,10 +18651,14 @@ exports.WorkflowCanvas = WorkflowCanvas;
 exports.WorkflowObservabilityFeature = WorkflowObservabilityFeature;
 exports.bmcToCanvas = bmcToCanvas;
 exports.cn = cn;
+exports.dayKey = dayKey;
+exports.formatDayLabel = formatDayLabel;
 exports.getLayoutedElements = getLayoutedElements;
 exports.getPreset = getPreset;
+exports.isSameDay = isSameDay;
 exports.useOptionalPromptInputController = useOptionalPromptInputController;
 exports.usePromptInputAttachments = usePromptInputAttachments;
 exports.usePromptInputController = usePromptInputController;
+exports.userTimeZone = userTimeZone;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map