@djangocfg/widget-chat 0.1.29 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-chat",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "A transport-agnostic chat surface: a pure core, a store, primitives, a composer, and the assembled components a host mounts",
   "keywords": [
     "chat",
@@ -66,19 +66,19 @@
     "use-stick-to-bottom": "^1.1.6"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.628",
-    "@djangocfg/i18n": "^2.1.628",
-    "@djangocfg/ui-core": "^2.1.628",
+    "@djangocfg/api": "^2.1.635",
+    "@djangocfg/i18n": "^2.1.635",
+    "@djangocfg/ui-core": "^2.1.635",
     "lucide-react": "^1.68.0",
     "react": "^19.0.0",
     "remark-gfm": "^4.0.0",
     "streamdown": "^2.6.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.628",
-    "@djangocfg/i18n": "^2.1.628",
-    "@djangocfg/typescript-config": "^2.1.628",
-    "@djangocfg/ui-core": "^2.1.628",
+    "@djangocfg/api": "^2.1.635",
+    "@djangocfg/i18n": "^2.1.635",
+    "@djangocfg/typescript-config": "^2.1.635",
+    "@djangocfg/ui-core": "^2.1.635",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/composer/controls/button.tsx

@@ -48,7 +48,7 @@ const BASE =
   // The design system's control radius, matching the box around them: both are
   // rounded rectangles from the same scale, so the row reads as one object.
   // (It was `rounded-full` while the box was a capsule — the box drives this.)
-  "shrink-0 items-center justify-center rounded-[var(--radius-control,0.625rem)] transition-colors " +
+  "shrink-0 items-center justify-center rounded-[var(--chat-composer-button-radius,var(--radius-control,0.625rem))] transition-colors " +
   // Height DERIVED from the field beside it, never a literal — a hardcoded 32px
   // silently went 2px short the moment the body text moved from 15px to 16. The
   // expression lives in `composer.css`, which needs the same number to keep the

package/src/styles/composer.css

@@ -28,7 +28,8 @@
  * with `width: 100%` the rule matched, loaded, and changed nothing.
  */
 .composer-box:has(textarea[data-multiline]) > *:has(> textarea),
-.composer-box:has(.tool-chips > *) > *:has(> textarea) {
+.composer-box:has(.tool-chips > *) > *:has(> textarea),
+.composer-box.composer-stacked > *:has(> textarea) {
   flex-basis: 100%;
 }
 
@@ -42,10 +43,19 @@
  * beneath, `+` still at their left edge.
  */
 .composer-box:has(textarea[data-multiline]) > .composer-lead,
-.composer-box:has(.tool-chips > *) > .composer-lead {
+.composer-box:has(.tool-chips > *) > .composer-lead,
+.composer-box.composer-stacked > .composer-lead {
   order: 3;
 }
 
+/**
+ * The stacked composer (Notion's): the field on top with room for two lines, the controls always on their own row beneath it.
+ * Opt-in by the `stacked` prop, so the single-row composer of other hosts is unchanged.
+ */
+.composer-box.composer-stacked textarea {
+  min-height: calc(var(--chat-text, 1rem) * var(--chat-leading, 1.5) * 2);
+}
+
 /* The `+` sits `inset-y` from the left edge, matching the send button's gap to
  * the right and the bottom. The box's horizontal inset is breathing room for
  * the TEXT and is wider, so the difference is given back here — the same
@@ -245,18 +255,19 @@
   /* CONCENTRIC with the controls: their radius plus the inset that clears them.
    * Derived rather than a second token, so a control radius change moves both
    * arcs together and the corners cannot stop running parallel. */
-  border-radius: calc(var(--radius-control, 0.625rem) + var(--chat-composer-inset-y));
+  border-radius: var(--chat-composer-radius, calc(var(--radius-control, 0.625rem) + var(--chat-composer-inset-y)));
   /* The horizontal inset is the TEXT's breathing room and is deliberately wider
    * than the vertical one. The control row gives that difference back on both
    * ends (`.composer-controls`), so a corner button keeps an equal gap to the
    * bottom and the side while the field still starts clear of the edge. */
   padding: var(--chat-composer-inset-y) var(--chat-composer-inset-x);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--border) 55%, transparent);
+  background-color: var(--chat-composer-bg, transparent);
+  box-shadow: 0 0 0 var(--chat-composer-ring-w, 2px) var(--chat-composer-ring, color-mix(in oklab, var(--border) 55%, transparent));
   transition: box-shadow 120ms ease;
 }
 
 .composer-box:focus-within {
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent);
+  box-shadow: 0 0 0 var(--chat-composer-ring-w, 2px) var(--chat-composer-ring-focus, color-mix(in oklab, var(--ring) 40%, transparent));
 }
 
 

package/src/ui/chat-composer.tsx

@@ -82,6 +82,8 @@ export interface ChatComposerProps {
    * stale SILENTLY — an unmapped key still renders.
    */
   readonly toolCategoryLabel?: (category: string) => string;
+  /** Field on top, controls always on their own row beneath (the Notion arrangement). Absent: the controls share the field's row while the draft is short. */
+  readonly stacked?: boolean;
   readonly className?: string;
 }
 
@@ -122,6 +124,7 @@ export function ChatComposer({
   suggestionIcon,
   toolIcon,
   toolCategoryLabel,
+  stacked = false,
   className,
 }: ChatComposerProps) {
   return (
@@ -141,7 +144,7 @@ export function ChatComposer({
       transcript's scrollbar can reach the pane. Here rather than there because
       only this element knows it is the composer's outer box.
     */
-    <div className="chat-column chat-inset-r relative">
+    <div className={`chat-column chat-inset-r relative${stacked ? " pt-3" : ""}`}>
       {above}
       {/*
         Part of the assembly, not a host slot — the same reason `ComposerQueue`
@@ -162,7 +165,7 @@ export function ChatComposer({
         descendant and acts on a different child, legible as CSS and unreadable
         as a class list.
       */
-      className={`composer-box flex cursor-text flex-wrap items-end gap-2 border border-border bg-background focus-within:border-ring ${className ?? ""}`}
+      className={`composer-box ${stacked ? "composer-stacked " : ""}flex cursor-text flex-wrap items-end gap-2 border border-border bg-background focus-within:border-ring ${className ?? ""}`}
     >
       <DraftPersistence room={draftRoom} />
       <ChatReplyChip />

package/src/ui/collapsible-row.tsx

@@ -32,7 +32,7 @@ export function CollapsibleRow({
   const collapse = useCollapse(
     message.status.state === "streaming",
     parts,
-    useMayCollapse(message.id),
+    useMayCollapse(message.id) && !carriesWidget(message),
   );
   return (
     <ChatMessageFrame
@@ -79,3 +79,11 @@ function useMayCollapse(id: string): boolean {
   const ids = useMessageIds();
   return ids[ids.length - 1] !== id;
 }
+
+/**
+ * A turn that carries a widget (an approval, a media row, a table) is never folded: the card is the point of the turn, it can be waiting for a
+ * click, and the fold's fixed height cut it in half.
+ */
+function carriesWidget(message: ChatMessage): boolean {
+  return message.parts.some((part) => part.type === "data");
+}

package/src/ui/index.ts

@@ -23,6 +23,7 @@ export { ChatMessageView, ChatMessageFrame, MessageProse } from "./message";
 export { CollapsibleBody } from "./collapsible-body";
 export { JumpToLatest } from "./jump-to-latest";
 export type { JumpToLatestProps } from "./jump-to-latest";
+export { MessageTime } from "./message-time";
 export { MessageActions, messageCopyText, useCopyAction } from "./message-actions";
 export type {
   MessageAction,

package/src/ui/message-time.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@djangocfg/ui-core/lib";
+import { formatTimeOfDay } from "@djangocfg/widget-kit";
+
+import type { ChatMessage } from "../core/parts";
+
+/**
+ * The time a message was sent, quiet beside its actions and shown with them (on hover or focus within the row).
+ *
+ * The instant is stored as UTC (an ISO string on the wire, epoch milliseconds in the message) and drawn in the READER'S zone and
+ * locale by `formatTimeOfDay` — no zone name is ever shown. The exact instant stays one hover away in the native `title` as UTC
+ * ISO, which is also the `dateTime` a machine reads. A message with no usable time draws nothing.
+ */
+export function MessageTime({ message, className }: { readonly message: ChatMessage; readonly className?: string }) {
+  const at = message.createdAt;
+  if (!at) return null;
+  const label = formatTimeOfDay(at);
+  if (label === "") return null;
+  const iso = new Date(at).toISOString();
+  return (
+    <time
+      dateTime={iso}
+      title={iso}
+      className={cn(
+        "text-xs text-muted-foreground tabular-nums opacity-0 transition-opacity",
+        "group-hover:opacity-100 group-focus-within:opacity-100",
+        className,
+      )}
+    >
+      {label}
+    </time>
+  );
+}

package/src/ui/panel-header.tsx

@@ -5,7 +5,7 @@ import { Button } from "@djangocfg/ui-core/components";
 import { cn } from "@djangocfg/ui-core/lib";
 
 /** The heading's look, one for every surface (column, side panel, phone sheet). The caller supplies the element: `h2`, or the dialog's own title. */
-export const PANEL_TITLE_CLASS = "truncate font-display text-sm font-semibold uppercase tracking-wide text-muted-foreground outline-none";
+export const PANEL_TITLE_CLASS = "truncate font-display text-sm font-(weight:--panel-title-weight) tracking-(--panel-title-tracking) text-(color:--panel-title-color) [text-transform:var(--panel-title-transform)] outline-none";
 
 export interface ChatPanelHeaderProps {
   /** The heading element, styled with `PANEL_TITLE_CLASS`. */
@@ -25,7 +25,8 @@ export interface ChatPanelHeaderProps {
  */
 export function ChatPanelHeader({ heading, description, actions, close, className }: ChatPanelHeaderProps) {
   return (
-    <header className={cn("flex shrink-0 items-center justify-between gap-3 border-b px-4 py-2.5", className)}>
+    // A fixed height, `--panel-header-h` (3rem): a host gives its own page header the same value, so the two hairlines meet on one horizontal line.
+    <header className={cn("box-border flex h-[var(--panel-header-h,3rem)] shrink-0 items-center justify-between gap-3 border-b px-4", className)}>
       <div className="min-w-0">
         {heading}
         {description ? <div className="truncate text-xs text-muted-foreground">{description}</div> : null}