@djangocfg/ui-tools 2.1.431 → 2.1.432

package/src/tools/chat/composer/Composer.tsx

@@ -94,21 +94,34 @@ const SIZE_CLASSES: Record<ComposerSize, {
   inlineSlot: string;
 }> = {
   sm: {
-    surface: 'rounded-xl px-2 py-1',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges.
+    surface: 'rounded-xl px-2 py-2',
     textarea: 'min-h-7 max-h-44 px-1.5 py-1',
     text: 'text-sm',
     containerPadding: 'px-2 pt-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]',
     inlineSlot: '[&>:not(textarea)]:h-7',
   },
   md: {
-    surface: 'rounded-2xl px-2 py-1.5',
-    textarea: 'min-h-9 max-h-60 px-2 py-1.5',
-    text: 'text-base sm:text-sm',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges (was py-1.5,
+    // which left the button closer to the bottom than the right).
+    surface: 'rounded-2xl px-2 py-2',
+    // ~one-line tall (min-h-8) with tight, balanced vertical padding.
+    // `py-1.5` (6px) stacked under the surface's own `py-1.5` read like a
+    // phantom empty line under a single-line input — `py-1` keeps the
+    // text vertically centred without the extra bottom gap.
+    textarea: 'min-h-8 max-h-60 px-2 py-1',
+    // Comfortable 15px chat body. `text-base sm:text-sm` collapsed to
+    // 14px and read too small; 15px matches the rich-editor baseline.
+    text: 'text-[15px]',
     containerPadding: 'px-2.5 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]',
     inlineSlot: '[&>:not(textarea)]:h-9',
   },
   lg: {
-    surface: 'rounded-2xl px-3 py-2.5',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges.
+    surface: 'rounded-2xl px-3 py-3',
     textarea: 'min-h-12 max-h-72 px-2.5 py-2',
     text: 'text-base',
     containerPadding: 'px-3.5 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))]',
@@ -133,7 +146,9 @@ const APPEARANCE_CLASSES: Record<ComposerAppearance, {
 }> = {
   compact: { surface: '', textarea: '', text: '', containerPadding: '' },
   full: {
-    surface: 'rounded-3xl px-3 py-2',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges.
+    surface: 'rounded-3xl px-3 py-3',
     textarea: 'min-h-10 max-h-80 px-2.5 py-2',
     text: 'text-base',
     containerPadding: 'px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]',
@@ -337,6 +352,8 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
     dragDepth.current = 0;
     setIsDragging(false);
     const dropped = Array.from(e.dataTransfer.files ?? []);
+    // eslint-disable-next-line no-console
+    console.log('[composer] handleDrop files=%d names=%o', dropped.length, dropped.map((f) => f.name));
     if (dropped.length > 0) attachHandle.attachFiles(dropped);
   };
 
@@ -485,7 +502,20 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
   // ── Inline (compact single-row) layout ─────────────────────────────────
   // Drag-drop handlers shared by both layouts. No-op when attaching is
   // disabled — the handlers themselves early-return.
-  const dragProps = {
+  //
+  // `data-wails-dropzone` is load-bearing inside the Wails desktop shell:
+  // its runtime gates DOM file drops on a per-element basis. On `dragover`
+  // it walks `elementFromPoint(...).closest('[data-wails-dropzone]')` and
+  // sets `dataTransfer.dropEffect = 'copy'` ONLY when the cursor is over a
+  // marked element — otherwise it forces `dropEffect = 'none'`, and the
+  // browser then REJECTS the `drop` on that element (the React `onDrop`
+  // never fires). Marking the composer surface makes the runtime allow the
+  // drop here, exactly like the debug drop-test harness. Harmless no-op in
+  // a plain browser (it's just an unknown data-attribute there).
+  const dragProps: React.HTMLAttributes<HTMLDivElement> & {
+    'data-wails-dropzone': string;
+  } = {
+    'data-wails-dropzone': '',
     onDragEnter: handleDragEnter,
     onDragOver: handleDragOver,
     onDragLeave: handleDragLeave,
@@ -615,12 +645,15 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
       ref={surfaceRef}
       onMouseDown={handleSurfaceMouseDown}
       className={cn(
-        // Raised input panel — reads against the chat background via the
-        // neutral `muted` surface + a hairline ring (Gemini/ChatGPT
-        // style), not a heavy drawn border. Focus firms up the ring
-        // without a hard accent frame.
+        // Raised input panel — a *gentle* elevation over the chat
+        // background, not a hard box. `card` is the "slightly elevated
+        // surface" token (one step up from `background`); `muted` is the
+        // chips/fills token and sat far too light, reading as a
+        // high-contrast block on the dark macOS theme. A softened
+        // hairline ring (`border/60`) keeps the edge whisper-quiet
+        // (Gemini/ChatGPT/Claude style). Focus firms the ring up.
         'flex flex-col rounded-2xl text-foreground',
-        'bg-muted ring-1 ring-border',
+        'bg-card ring-1 ring-border/60',
         'focus-within:ring-ring/50',
         'transition-colors',
         // The whole surface reads as a text field — the padding around the

package/src/tools/chat/composer/ComposerRichTextarea.tsx

@@ -12,11 +12,23 @@ import {
 import { useRegisterComposer } from '../hooks/useAutoFocusOnStreamEnd';
 import type { ComposerSize, ComposerTextareaProps } from './types';
 
-/** Single-row baseline height per composer size (px). */
+/**
+ * Single-row min-height FLOOR per composer size (px).
+ *
+ * This is a floor, NOT the row height — the empty `<p>`'s own line box
+ * defines the real single-row height. The floor must stay BELOW one line
+ * box (15px text × line-height) so it can never inflate the editor past
+ * one line: when a host overrides the editor leading (e.g. cmdop pins
+ * `.ProseMirror` to `leading-normal` ≈ 22.5px), a 24/28px min-height used
+ * to sit ABOVE the line box and the empty composer read as having a
+ * phantom extra line under the caret. Keeping every floor ≤ the tightest
+ * expected single line (≈22px) means the line box always wins and the
+ * single-row composer is exactly one line tall in every host.
+ */
 const MIN_HEIGHT: Record<ComposerSize, number> = {
-  sm: 20,
-  md: 24,
-  lg: 28,
+  sm: 18,
+  md: 20,
+  lg: 22,
 };
 
 export interface ComposerRichTextareaProps extends ComposerTextareaProps {

package/src/tools/chat/constants.ts

@@ -44,8 +44,15 @@ export const LIMITS = {
   attachmentsMax: 10,
   /** Composer history slots. */
   composerHistorySize: 50,
-  /** Coalesce stream tokens within this window before dispatching. */
-  streamCoalesceMs: 16,
+  /**
+   * Coalesce stream tokens within this window before dispatching one
+   * aggregated chunk. 33ms ≈ 30fps — enough to feel live while halving
+   * the re-parse count now that markdown renders during streaming
+   * (block-split + per-block memoization keeps each render ~O(n), but
+   * fewer dispatches still means fewer tail re-parses). ai-sdk uses ~50ms
+   * for the same reason.
+   */
+  streamCoalesceMs: 33,
   /** Default history page size. */
   pageSize: 50,
   /** Virtualize list when >= this many messages (host-controlled threshold). */

package/src/tools/chat/core/extractFirstUrl.ts

@@ -0,0 +1,45 @@
+/**
+ * Extract the FIRST previewable http(s) URL from a message's plain text.
+ *
+ * Telegram/WhatsApp rule: at most one preview per message — we surface the
+ * first link only. Returns `null` when there's nothing to unfurl.
+ *
+ * Deliberately conservative: only absolute http/https URLs (no bare
+ * `example.com`, no mailto/ftp), trailing punctuation trimmed, and a length
+ * cap to avoid pathological inputs.
+ */
+
+// http(s) URL up to the first whitespace or closing bracket/quote.
+const URL_RE = /\bhttps?:\/\/[^\s<>"'`)\]}]+/i;
+
+/** Trailing punctuation that's almost always sentence/markup, not the URL. */
+const TRAILING = /[.,;:!?)\]}'"»]+$/;
+
+export function extractFirstUrl(text: string | undefined | null): string | null {
+  if (!text) return null;
+  // Skip fenced/inline code-heavy content cheaply: still match, but the cap
+  // below guards huge blobs.
+  if (text.length > 50_000) return null;
+
+  const match = URL_RE.exec(text);
+  if (!match) return null;
+
+  let url = match[0].replace(TRAILING, '');
+
+  // Balance a trailing ")" that belongs to a markdown link `](url)` wrapper:
+  // if the URL has more ")" than "(", drop the extras.
+  const opens = (url.match(/\(/g) ?? []).length;
+  const closes = (url.match(/\)/g) ?? []).length;
+  if (closes > opens) {
+    url = url.replace(/\)+$/, (m) => m.slice(0, Math.max(0, m.length - (closes - opens))));
+  }
+
+  // Validate — a malformed match resolves to no preview.
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return null;
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+}

package/src/tools/chat/core/reducer.ts

@@ -8,13 +8,23 @@
  *  - `version` bumps on edit so memo keys invalidate.
  */
 
-import type { ChatAttachment, ChatMessage, ChatSource, ChatToolCall } from '../types';
+import type { ChatAttachment, ChatMessage, ChatToolCall } from '../types';
 
 export interface ChatState {
   sessionId: string | null;
   messages: ChatMessage[];
   /** Initial history load in flight. */
   isLoading: boolean;
+  /**
+   * True once the initial history load has settled (done OR errored). False
+   * from mount until then. Lets the UI distinguish "history still loading"
+   * from "genuinely empty conversation": render a spinner while
+   * `!historyLoaded`, the empty-state only once `historyLoaded` is true and
+   * `messages` is empty. `isLoading` alone can't carry this — it is `false`
+   * on the very first synchronous render (before the bootstrap effect runs),
+   * which would flash the empty-state for a session that does have history.
+   */
+  historyLoaded: boolean;
   /** Assistant is generating a reply. */
   isStreaming: boolean;
   /** Older history page in flight. */
@@ -28,6 +38,7 @@ export const initialState: ChatState = {
   sessionId: null,
   messages: [],
   isLoading: false,
+  historyLoaded: false,
   isStreaming: false,
   isLoadingMore: false,
   hasMore: true,
@@ -73,9 +84,12 @@ export type ChatAction =
   | {
       type: 'STREAM_DONE';
       id: string;
-      tokensIn?: number;
-      tokensOut?: number;
-      sources?: ChatSource[];
+      /**
+       * Generic finalize merge (content/blocks/sources/tokens/attachments/
+       * metadata). The single slot the terminal event carries — applied as
+       * a `Partial<ChatMessage>` merge. No-op when absent.
+       */
+      patch?: Partial<ChatMessage>;
     }
   | { type: 'STREAM_CANCELLED'; id: string; partialText: string; label?: string }
   | { type: 'STREAM_ERROR'; id?: string; message: string }
@@ -134,6 +148,11 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
         messages: action.messages ?? state.messages,
         hasMore: action.hasMore ?? state.hasMore,
         oldestCursor: action.cursor ?? state.oldestCursor,
+        // When the session carries its messages (the autoCreateSession /
+        // newSession path commits them here), the initial load is settled.
+        // A bare `SESSION_SET` (resume path sets the id, then awaits
+        // loadHistory → HISTORY_LOAD_DONE) leaves `historyLoaded` untouched.
+        historyLoaded: action.messages !== undefined ? true : state.historyLoaded,
         error: null,
       };
 
@@ -144,6 +163,7 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
       return {
         ...state,
         isLoading: false,
+        historyLoaded: true,
         messages: action.messages,
         hasMore: action.hasMore,
         oldestCursor: action.cursor,
@@ -258,10 +278,11 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
     case 'STREAM_DONE': {
       const patched = patchMessageById(state.messages, action.id, (m) => ({
         ...m,
+        // Generic finalize merge (content/blocks/sources/tokens/attachments/
+        // metadata). No-op when `patch` is absent — `message_end` is then a
+        // pure terminal that only clears `isStreaming`.
+        ...(action.patch ?? {}),
         isStreaming: false,
-        tokensIn: action.tokensIn ?? m.tokensIn,
-        tokensOut: action.tokensOut ?? m.tokensOut,
-        sources: action.sources ?? m.sources,
       }));
       // Drop an assistant message that ended up completely empty (no text, no
       // tool calls). This happens in the HITL approval flow: the first stream
@@ -377,7 +398,10 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
       };
 
     case 'ERROR_SET':
-      return { ...state, error: action.error };
+      // An error settles the initial load — a failed bootstrap must not leave
+      // a stuck spinner; clear `isLoading` and mark the load resolved so the
+      // host can fall through to its error/empty surface.
+      return { ...state, error: action.error, isLoading: false, historyLoaded: true };
 
     case 'ATTACHMENT_PROGRESS': {
       const messages = patchMessageById(state.messages, action.messageId, (m) => {

package/src/tools/chat/core/transport/mappers/pydantic-ai.ts

@@ -100,7 +100,7 @@ export function* mapPydanticAIEvent(
     }
 
     case 'done':
-      yield { type: 'message_end', tokensOut: ev.total_tokens };
+      yield { type: 'message_end', patch: { tokensOut: ev.total_tokens } };
       return;
 
     case 'error':

package/src/tools/chat/core/transport/mock.ts

@@ -93,7 +93,10 @@ export function createMockTransport(opts: MockTransportOptions = {}): ChatTransp
           await sleep(latency);
           yield { type: 'chunk', delta: piece };
         }
-        yield { type: 'message_end', tokensIn: content.length, tokensOut: reply.length };
+        yield {
+          type: 'message_end',
+          patch: { tokensIn: content.length, tokensOut: reply.length },
+        };
       } else {
         for (const ev of reply) {
           if (options.signal.aborted) return;

package/src/tools/chat/hooks/useChat.ts

@@ -143,30 +143,34 @@ export function useChat(config: UseChatConfig): UseChatReturn {
       const t0 = performance.now();
       try {
         if (config.initialSessionId) {
-          if (!cancelled) {
-            dispatch({
-              type: 'SESSION_SET',
-              sessionId: config.initialSessionId,
-            });
-          }
+          dispatch({
+            type: 'SESSION_SET',
+            sessionId: config.initialSessionId,
+          });
           const page = await transport.loadHistory(config.initialSessionId, null, pageSize);
-          if (cancelled) {
-            log.bootstrap.debug('cancelled (post-loadHistory)');
-            // Even though *this* effect is cancelled, the network call did
-            // succeed — return the sessionId so awaitSession() doesn't see
-            // a phantom null when the next mount picks up.
-            return config.initialSessionId;
-          }
+          // Commit the loaded history even if THIS effect run was cancelled.
+          // Under React StrictMode the first mount's effect is always
+          // cancelled (mount → unmount → mount), and the second run skips the
+          // fetch because `sessionId` is already in the persisted reducer
+          // state (the early-return at the top of the effect). If we bailed
+          // here on `cancelled`, `HISTORY_LOAD_DONE` would never dispatch on
+          // either run and the resumed history would silently never reach the
+          // reducer — the read succeeds but the messages are dropped, so the
+          // chat shows the empty-state until a remount re-bootstraps it. The
+          // reducer state survives the StrictMode remount, so dispatching the
+          // load result regardless is correct (mirrors the autoCreateSession
+          // branch below, which already commits post-cancel for the same reason).
           dispatch({
             type: 'HISTORY_LOAD_DONE',
             messages: page.messages,
             hasMore: page.hasMore,
             cursor: page.nextCursor,
           });
-          log.bootstrap.success('resumed', {
+          log.bootstrap.success(cancelled ? 'resumed (post-cancel)' : 'resumed', {
             sessionId: config.initialSessionId,
             messages: page.messages.length,
             hasMore: page.hasMore,
+            cancelled,
             elapsedMs: Math.round(performance.now() - t0),
           });
           return config.initialSessionId;
@@ -397,14 +401,10 @@ export function useChat(config: UseChatConfig): UseChatReturn {
             dispatch({
               type: 'STREAM_DONE',
               id: targetId,
-              tokensIn: ev.tokensIn,
-              tokensOut: ev.tokensOut,
-              sources: ev.sources,
+              patch: ev.patch,
             });
             log.stream.debug('message_end', {
-              tokensIn: ev.tokensIn,
-              tokensOut: ev.tokensOut,
-              sources: ev.sources?.length ?? 0,
+              patchKeys: ev.patch ? Object.keys(ev.patch) : [],
             });
             return;
           case 'message_metrics':

package/src/tools/chat/lazy.tsx

@@ -75,6 +75,16 @@ export * from './composer';
 export * from './shell';
 export * from './launcher';
 
+// Markdown renderer + plain-text helper — also surfaced from index.ts; the
+// `./chat` package entry resolves to THIS file (lazy.tsx), so a host that
+// composes a custom mention-aware bubble needs them re-exported here too
+// (otherwise the symbols typecheck via index.ts but fail to bundle at runtime).
+export {
+  MarkdownMessage,
+  extractTextFromChildren,
+  type MarkdownMessageProps,
+} from '../dev/code/MarkdownMessage';
+
 // Bridge — AI-driven `point` directives (lightweight, no heavy deps).
 export {
   HighlightOverlay,