@djangocfg/ui-tools 2.1.411 → 2.1.412

package/src/tools/Chat/composer/useComposerAttach.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, type RefObject } from 'react';
+
+import { buildAcceptString, useClipboardPaste } from '../../Uploader';
+import type { UseChatComposerReturn } from '../hooks/useChatComposer';
+import { fileToAttachment, revokeAttachmentUrl } from './fileToAttachment';
+import type {
+  ComposerAcceptType,
+  ComposerAttachConfig,
+  ComposerAttachHandle,
+} from './types';
+
+const ALL_ACCEPT: ComposerAcceptType[] = ['image', 'audio', 'video', 'document'];
+
+/** True when a file's MIME is allowed by the accepted asset categories. */
+function isAcceptedType(file: File, accept: ComposerAcceptType[]): boolean {
+  const mime = file.type;
+  if (mime.startsWith('image/')) return accept.includes('image');
+  if (mime.startsWith('audio/')) return accept.includes('audio');
+  if (mime.startsWith('video/')) return accept.includes('video');
+  // No / other MIME — treat as a document.
+  return accept.includes('document');
+}
+
+export interface UseComposerAttachParams {
+  composer: UseChatComposerReturn;
+  config: ComposerAttachConfig;
+  disabled?: boolean;
+  /** Paste listener scope. Defaults to `document` when omitted. */
+  pasteScopeRef?: RefObject<HTMLElement | null>;
+}
+
+/**
+ * The unified attach pipeline. One validated path that the paperclip
+ * button, the `+` menu, drag-drop and Ctrl+V paste all funnel into:
+ *
+ *   openPicker() / attachFiles(File[])
+ *     → validate (size / type / count)
+ *     → fileToAttachment()
+ *     → composer.addAttachment()
+ *
+ * Phase 2 stops at `status:'ready'` (object-URL). The `uploadFn`
+ * lifecycle lands in phase 5 — `config.uploadFn` is accepted here but
+ * not yet consumed.
+ *
+ * Reuses `useClipboardPaste` + `buildAcceptString` from the Uploader
+ * tool rather than re-implementing clipboard / mime handling.
+ */
+export function useComposerAttach({
+  composer,
+  config,
+  disabled = false,
+  pasteScopeRef,
+}: UseComposerAttachParams): ComposerAttachHandle {
+  const {
+    accept = ALL_ACCEPT,
+    maxFiles,
+    maxSizeBytes,
+    multiple = true,
+    pasteEnabled = true,
+    uploadFn,
+    onReject,
+  } = config;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Stable refs so the paste listener / handlers never go stale without
+  // forcing the consumer to memoize anything.
+  const composerRef = useRef(composer);
+  composerRef.current = composer;
+  const onRejectRef = useRef(onReject);
+  onRejectRef.current = onReject;
+  const uploadFnRef = useRef(uploadFn);
+  uploadFnRef.current = uploadFn;
+
+  const acceptString = useMemo(() => {
+    // buildAcceptString expects the Uploader's AssetType — same string
+    // union as ComposerAcceptType, so the cast is safe.
+    return buildAcceptString(accept as Parameters<typeof buildAcceptString>[0]);
+  }, [accept]);
+
+  // Drive one file through the host `uploadFn`: flip the attachment to
+  // `uploading`, stream progress, then settle on `ready` (url rewritten
+  // to the remote location) or `error`. Fire-and-forget — failures are
+  // surfaced on the attachment, never thrown.
+  const runUpload = useCallback(
+    (file: File, attachmentId: string, localUrl: string) => {
+      const fn = uploadFnRef.current;
+      if (!fn) return;
+      const c = composerRef.current;
+      c.updateAttachment(attachmentId, { status: 'uploading', progress: 0 });
+      fn(file, (fraction) => {
+        composerRef.current.updateAttachment(attachmentId, {
+          progress: Math.max(0, Math.min(1, fraction)),
+        });
+      })
+        .then((result) => {
+          composerRef.current.updateAttachment(attachmentId, {
+            status: 'ready',
+            progress: 1,
+            url: result.url,
+            thumbnailUrl: result.thumbnailUrl,
+          });
+          // The remote URL replaced the object-URL — free it.
+          revokeAttachmentUrl({ url: localUrl });
+        })
+        .catch(() => {
+          composerRef.current.updateAttachment(attachmentId, { status: 'error' });
+        });
+    },
+    [],
+  );
+
+  // The single validated entry point. Drop / paste / picker all land here.
+  const attachFiles = useCallback(
+    (files: File[]) => {
+      if (disabled || files.length === 0) return;
+      const c = composerRef.current;
+      const cap = maxFiles ?? Number.POSITIVE_INFINITY;
+
+      let slots = cap - c.attachments.length;
+      for (const file of files) {
+        if (slots <= 0) {
+          onRejectRef.current?.(file, 'count');
+          continue;
+        }
+        if (maxSizeBytes != null && file.size > maxSizeBytes) {
+          onRejectRef.current?.(file, 'size');
+          continue;
+        }
+        if (!isAcceptedType(file, accept)) {
+          onRejectRef.current?.(file, 'type');
+          continue;
+        }
+        const attachment = fileToAttachment(file);
+        c.addAttachment(attachment);
+        // With an uploadFn the attachment starts local then uploads in
+        // the background; without one it stays `ready` immediately.
+        if (uploadFnRef.current) {
+          runUpload(file, attachment.id, attachment.url);
+        }
+        slots -= 1;
+      }
+    },
+    [disabled, maxFiles, maxSizeBytes, accept, runUpload],
+  );
+
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    inputRef.current?.click();
+  }, [disabled]);
+
+  // Remove a staged attachment, freeing its object-URL first so a
+  // discarded blob does not leak.
+  const removeAttachment = useCallback((id: string) => {
+    const c = composerRef.current;
+    const found = c.attachments.find((a) => a.id === id);
+    if (found) revokeAttachmentUrl(found);
+    c.removeAttachment(id);
+  }, []);
+
+  const onInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const picked = e.target.files;
+      if (picked && picked.length > 0) attachFiles(Array.from(picked));
+      // Reset so picking the same file twice still fires `change`.
+      e.target.value = '';
+    },
+    [attachFiles],
+  );
+
+  // Ctrl+V / Cmd+V — reuse the Uploader's clipboard resolver. It already
+  // skips text fields when the clipboard carries text, so pasting an
+  // image into the composer textarea attaches without hijacking typing.
+  const pasteAccept = useMemo(
+    () => accept.filter((a) => a !== 'document'),
+    [accept],
+  );
+  useClipboardPaste(
+    {
+      enabled: pasteEnabled && !disabled,
+      acceptTypes: pasteAccept.length > 0 ? pasteAccept : undefined,
+      maxBytes: maxSizeBytes,
+      onFiles: attachFiles,
+    },
+    pasteScopeRef,
+  );
+
+  // On unmount, free any object-URLs still held by staged attachments
+  // (drafts abandoned without sending). `composerRef` gives the latest
+  // list without re-running the effect on every attach.
+  useEffect(() => {
+    return () => {
+      for (const a of composerRef.current.attachments) {
+        revokeAttachmentUrl(a);
+      }
+    };
+  }, []);
+
+  const atCap =
+    maxFiles != null && composer.attachments.length >= maxFiles;
+
+  return {
+    openPicker,
+    attachFiles,
+    removeAttachment,
+    disabled: disabled || atCap,
+    inputProps: {
+      ref: inputRef,
+      type: 'file',
+      accept: acceptString,
+      multiple,
+      hidden: true,
+      onChange: onInputChange,
+    },
+  };
+}

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

@@ -407,6 +407,38 @@ export function useChat(config: UseChatConfig): UseChatReturn {
               sources: ev.sources?.length ?? 0,
             });
             return;
+          case 'message_metrics':
+            // Non-terminal: attach per-turn metrics to the streaming
+            // message. The stream stays open until message_end / error.
+            dispatch({
+              type: 'MESSAGE_PATCH',
+              id: targetId,
+              patch: {
+                metrics: ev.metrics,
+                ...(ev.metrics.resolvedModel
+                  ? { resolvedModel: ev.metrics.resolvedModel }
+                  : {}),
+              },
+            });
+            log.stream.debug('message_metrics', {
+              turns: ev.metrics.turns,
+              toolCallCount: ev.metrics.toolCallCount,
+              resolvedModel: ev.metrics.resolvedModel,
+            });
+            return;
+          case 'resolved_model':
+            // Non-terminal: model alias was resolved mid-run.
+            dispatch({
+              type: 'MESSAGE_PATCH',
+              id: targetId,
+              patch: { resolvedModel: ev.resolvedModel },
+            });
+            log.stream.debug('resolved_model', {
+              originalAlias: ev.originalAlias,
+              resolvedModel: ev.resolvedModel,
+              upgraded: ev.upgraded,
+            });
+            return;
           case 'error':
             tokenBuffer.flush();
             dispatch({

package/src/tools/Chat/hooks/useChatComposer.ts

@@ -50,6 +50,9 @@ export interface UseChatComposerReturn {
   setValue: (next: string) => void;
   attachments: ChatAttachment[];
   addAttachment: (a: ChatAttachment) => void;
+  /** Patch an existing attachment in place — used by the upload lifecycle
+   *  to flip `status` / `progress` / `url` without losing list order. */
+  updateAttachment: (id: string, patch: Partial<ChatAttachment>) => void;
   removeAttachment: (id: string) => void;
   isSubmitting: boolean;
   canSubmit: boolean;
@@ -192,6 +195,15 @@ export function useChatComposer(options: UseChatComposerOptions): UseChatCompose
     [maxAttachments],
   );
 
+  const updateAttachment = useCallback(
+    (id: string, patch: Partial<ChatAttachment>) => {
+      setAttachments((prev) =>
+        prev.map((a) => (a.id === id ? { ...a, ...patch } : a)),
+      );
+    },
+    [],
+  );
+
   const removeAttachment = useCallback((id: string) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
   }, []);
@@ -276,6 +288,7 @@ export function useChatComposer(options: UseChatComposerOptions): UseChatCompose
     setValue,
     attachments,
     addAttachment,
+    updateAttachment,
     removeAttachment,
     isSubmitting,
     canSubmit,

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

@@ -264,7 +264,7 @@ const MessageBubbleInner = ({
         {message.blocks?.length ? (
           <MessageBlocks
             blocks={message.blocks}
-            registry={resolvedBlockRegistry}
+            registry={resolvedBlockRegistry ?? undefined}
             appearance={appearance}
             isUser={isUser}
           />

package/src/tools/Chat/public.ts

@@ -34,6 +34,7 @@ export type {
   ChatLabels,
   ChatTransport,
   ChatStreamEvent,
+  ChatMessageMetrics,
   CreateSessionOptions,
   SessionInfo,
   HistoryPage,

package/src/tools/Chat/types/events.ts

@@ -7,6 +7,32 @@
 
 import type { ChatSource } from './attachment';
 
+/**
+ * Per-run metrics block. Emitted once per assistant turn alongside the
+ * terminal `message_end` event (a separate `message_metrics` event so
+ * `message_end` keeps its lean `tokensIn`/`tokensOut`/`sources` shape).
+ *
+ * All fields optional — the backend omits anything it could not measure.
+ */
+export interface ChatMessageMetrics {
+  inputTokens?: number;
+  outputTokens?: number;
+  totalTokens?: number;
+  cacheReadTokens?: number;
+  cacheWriteTokens?: number;
+  processingTimeMs?: number;
+  firstTokenMs?: number;
+  turns?: number;
+  toolCallCount?: number;
+  toolNames?: string[];
+  /** Model the request was sent with (may be an alias). */
+  model?: string;
+  /** Concrete model the alias resolved to. */
+  resolvedModel?: string;
+  /** Short summary of the model's thinking, if available. */
+  thinkingSummary?: string;
+}
+
 export type ChatStreamEvent =
   | { type: 'message_start'; messageId: string; sessionId: string }
   | { type: 'resume_start' }
@@ -32,4 +58,28 @@ export type ChatStreamEvent =
       tokensOut?: number;
       sources?: ChatSource[];
     }
+  | {
+      /**
+       * Per-turn metrics for the assistant message currently streaming.
+       * Non-terminal — arrives near the end of the run but does not
+       * close the stream (`message_end` / `error` do that).
+       */
+      type: 'message_metrics';
+      metrics: ChatMessageMetrics;
+    }
+  | {
+      /**
+       * One-shot model-alias resolution (e.g. `@code` → `glm-5.1`).
+       * Non-terminal — lets the UI update the model chip mid-run.
+       */
+      type: 'resolved_model';
+      /** Alias the user/request originally specified. */
+      originalAlias: string;
+      /** Concrete model id the alias resolved to. */
+      resolvedModel: string;
+      /** True when routing upgraded the model (e.g. for a larger context). */
+      upgraded?: boolean;
+      /** Human-readable reason the router picked this model. */
+      routingReason?: string;
+    }
   | { type: 'error'; code: string; message: string };

package/src/tools/Chat/types/index.ts

@@ -40,7 +40,7 @@ export type { ChatMessage } from './message';
 export { DEFAULT_LABELS } from './labels';
 export type { ChatLabels } from './labels';
 export type { ChatConfig, ChatPrefs, ChatDisplayMode } from './config';
-export type { ChatStreamEvent } from './events';
+export type { ChatStreamEvent, ChatMessageMetrics } from './events';
 export type {
   CreateSessionOptions,
   SessionInfo,

package/src/tools/Chat/types/message.ts

@@ -7,6 +7,7 @@
 
 import type { ChatAttachment, ChatSource } from './attachment';
 import type { MessageBlock } from './block';
+import type { ChatMessageMetrics } from './events';
 import type { ChatPersona, ChatRole } from './persona';
 import type { ChatToolCall } from './tool-call';
 
@@ -32,4 +33,8 @@ export interface ChatMessage {
   sources?: ChatSource[];
   tokensIn?: number;
   tokensOut?: number;
+  /** Per-turn metrics (from a `message_metrics` stream event). */
+  metrics?: ChatMessageMetrics;
+  /** Concrete model the request resolved to (from a `resolved_model` event). */
+  resolvedModel?: string;
 }

package/src/tools/CronScheduler/CronScheduler.client.tsx

@@ -18,7 +18,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { CronSchedulerProvider } from './context/CronSchedulerContext';
-import { useCronType, useCronPreview } from './context/hooks';
+import { useCronType, useCronPreview, useCronSize } from './context/hooks';
 import {
   ScheduleTypeSelector,
   TimeSelector,
@@ -39,9 +39,11 @@ interface ScheduleEditorProps {
 
 function ScheduleEditor({ timeFormat, disabled }: ScheduleEditorProps) {
   const { type } = useCronType();
+  const size = useCronSize();
+  const isSm = size === 'sm';
 
   return (
-    <div className="space-y-3">
+    <div className={isSm ? 'space-y-1.5' : 'space-y-3'}>
       <ScheduleTypeSelector disabled={disabled} />
 
       {type !== 'custom' && (
@@ -67,6 +69,7 @@ function CronExpressionLine({
 }) {
   const [copied, setCopied] = useState(false);
   const { cronExpression, isValid } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   const handleCopy = async (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -80,8 +83,13 @@ function CronExpressionLine({
   };
 
   return (
-    <div className={cn('flex items-center gap-1.5', className)}>
-      <code className="font-mono text-xs text-muted-foreground">
+    <div className={cn('flex items-center', isSm ? 'gap-1' : 'gap-1.5', className)}>
+      <code
+        className={cn(
+          'font-mono text-muted-foreground',
+          isSm ? 'text-[11px]' : 'text-xs'
+        )}
+      >
         {cronExpression}
       </code>
       {allowCopy && (
@@ -131,9 +139,10 @@ function CompactTrigger({
 }: CompactTriggerProps) {
   const [open, setOpen] = useState(false);
   const { humanDescription, isValid } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   return (
-    <div className={cn('space-y-1.5', className)}>
+    <div className={cn(isSm ? 'space-y-1' : 'space-y-1.5', className)}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <button
@@ -142,17 +151,19 @@ function CompactTrigger({
             aria-expanded={open}
             disabled={disabled}
             className={cn(
-              'flex h-9 w-full items-center gap-2 rounded-md border px-3',
-              'border-input bg-transparent text-sm shadow-xs transition-colors',
+              'flex w-full items-center rounded-md border',
+              'border-input bg-transparent shadow-xs transition-colors',
               'hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
               'disabled:cursor-not-allowed disabled:opacity-50',
+              isSm ? 'h-8 gap-1.5 px-2 text-xs' : 'h-9 gap-2 px-3 text-sm',
               !isValid && 'border-destructive/50'
             )}
           >
             <Calendar
               aria-hidden="true"
               className={cn(
-                'h-4 w-4 shrink-0',
+                'shrink-0',
+                isSm ? 'h-3.5 w-3.5' : 'h-4 w-4',
                 isValid ? 'text-muted-foreground' : 'text-destructive'
               )}
             />
@@ -166,12 +177,15 @@ function CompactTrigger({
             </span>
             <ChevronsUpDown
               aria-hidden="true"
-              className="h-4 w-4 shrink-0 opacity-50"
+              className={cn('shrink-0 opacity-50', isSm ? 'h-3.5 w-3.5' : 'h-4 w-4')}
             />
           </button>
         </PopoverTrigger>
         <PopoverContent
-          className="w-[var(--radix-popover-trigger-width)] min-w-[320px] p-3"
+          className={cn(
+            'w-[var(--radix-popover-trigger-width)]',
+            isSm ? 'min-w-[280px] p-2' : 'min-w-[320px] p-3'
+          )}
           align="start"
         >
           <ScheduleEditor timeFormat={timeFormat} disabled={disabled} />
@@ -202,8 +216,10 @@ function InlineScheduler({
   allowCopy,
   className,
 }: InlineSchedulerProps) {
+  const isSm = useCronSize() === 'sm';
+
   return (
-    <div className={cn('space-y-3', className)}>
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-3', className)}>
       <ScheduleEditor timeFormat={timeFormat} disabled={disabled} />
       <InlinePreview showCronExpression={showCronExpression} allowCopy={allowCopy} />
     </div>
@@ -218,26 +234,35 @@ function InlinePreview({
   allowCopy: boolean;
 }) {
   const { humanDescription, isValid } = useCronPreview();
+  const isSm = useCronSize() === 'sm';
 
   return (
     <div
       role="status"
       aria-live="polite"
       className={cn(
-        'flex items-center justify-between gap-2 rounded-md border px-3 py-2',
+        'flex items-center justify-between gap-2 rounded-md border',
         'bg-muted/30 border-border/50',
+        isSm ? 'px-2 py-1' : 'px-3 py-2',
         !isValid && 'border-destructive/30 bg-destructive/5'
       )}
     >
-      <div className="flex min-w-0 items-center gap-2">
+      <div className={cn('flex min-w-0 items-center', isSm ? 'gap-1.5' : 'gap-2')}>
         <Calendar
           aria-hidden="true"
           className={cn(
-            'h-4 w-4 shrink-0',
+            'shrink-0',
+            isSm ? 'h-3 w-3' : 'h-4 w-4',
             isValid ? 'text-primary' : 'text-destructive'
           )}
         />
-        <span className={cn('truncate text-sm', !isValid && 'text-destructive')}>
+        <span
+          className={cn(
+            'truncate',
+            isSm ? 'text-[11px]' : 'text-sm',
+            !isValid && 'text-destructive'
+          )}
+        >
           {humanDescription}
         </span>
       </div>
@@ -276,6 +301,7 @@ export function CronScheduler({
   disabled = false,
   inline = false,
   placeholder = 'Set a schedule',
+  size = 'default',
   className,
 }: CronSchedulerProps) {
   return (
@@ -283,6 +309,7 @@ export function CronScheduler({
       value={value}
       onChange={onChange}
       defaultType={defaultType}
+      size={size}
     >
       {inline ? (
         <InlineScheduler

package/src/tools/CronScheduler/components/CustomInput.tsx

@@ -10,7 +10,7 @@ import { useState, useEffect } from 'react';
 import { Input } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { AlertCircle, CheckCircle2 } from 'lucide-react';
-import { useCronCustom } from '../context/hooks';
+import { useCronCustom, useCronSize } from '../context/hooks';
 import { isValidCron } from '../utils/cron-parser';
 
 export interface CustomInputProps {
@@ -20,6 +20,7 @@ export interface CustomInputProps {
 
 export function CustomInput({ disabled, className }: CustomInputProps) {
   const { customCron, isValid, setCustomCron } = useCronCustom();
+  const isSm = useCronSize() === 'sm';
   const [localValue, setLocalValue] = useState(customCron);
   const [localValid, setLocalValid] = useState(isValid);
 
@@ -39,8 +40,14 @@ export function CustomInput({ disabled, className }: CustomInputProps) {
   const showError = !localValid && localValue.trim().length > 0;
 
   return (
-    <div className={cn('space-y-2', className)}>
-      <label htmlFor="cron-custom-input" className="text-sm text-muted-foreground">
+    <div className={cn(isSm ? 'space-y-1.5' : 'space-y-2', className)}>
+      <label
+        htmlFor="cron-custom-input"
+        className={cn(
+          'text-muted-foreground',
+          isSm ? 'text-xs' : 'text-sm'
+        )}
+      >
         Cron expression
       </label>
 
@@ -59,16 +66,28 @@ export function CustomInput({ disabled, className }: CustomInputProps) {
           aria-invalid={showError}
           aria-describedby={showError ? 'cron-custom-error' : undefined}
           className={cn(
-            'font-mono text-base pr-10 h-11',
+            'font-mono',
+            isSm ? 'text-xs h-8 pr-8' : 'text-base h-11 pr-10',
             showError && 'border-destructive focus-visible:ring-destructive/50'
           )}
         />
-        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+        <div
+          className={cn(
+            'absolute top-1/2 -translate-y-1/2',
+            isSm ? 'right-2' : 'right-3'
+          )}
+        >
           {localValue.trim() && (
             localValid ? (
-              <CheckCircle2 aria-hidden="true" className="h-5 w-5 text-success" />
+              <CheckCircle2
+                aria-hidden="true"
+                className={cn('text-success', isSm ? 'h-4 w-4' : 'h-5 w-5')}
+              />
             ) : (
-              <AlertCircle aria-hidden="true" className="h-5 w-5 text-destructive" />
+              <AlertCircle
+                aria-hidden="true"
+                className={cn('text-destructive', isSm ? 'h-4 w-4' : 'h-5 w-5')}
+              />
             )
           )}
         </div>