@djangocfg/ui-tools 2.1.350 → 2.1.351

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.350",
+  "version": "2.1.351",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -101,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.350",
-    "@djangocfg/ui-core": "^2.1.350",
+    "@djangocfg/i18n": "^2.1.351",
+    "@djangocfg/ui-core": "^2.1.351",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -155,10 +155,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.350",
+    "@djangocfg/i18n": "^2.1.351",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.350",
-    "@djangocfg/ui-core": "^2.1.350",
+    "@djangocfg/typescript-config": "^2.1.351",
+    "@djangocfg/ui-core": "^2.1.351",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/components/AudioToggle.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+/**
+ * Mute / unmute toggle for chat audio events.
+ *
+ * Reads the current ``muted`` state from the active chat context and
+ * persists changes through ``useChatAudioPrefs`` (cross-tab safe). The
+ * button auto-hides when no ``audio.sounds`` config is provided —
+ * showing a mute toggle for a chat with no sounds is just clutter.
+ *
+ * Drop into a ChatRoot ``header`` slot or anywhere inside a chat
+ * provider:
+ *
+ * ```tsx
+ * <ChatRoot
+ *   header={<AudioToggle />}
+ *   audio={{ sounds: { messageReceived: '/ping.mp3' } }}
+ *   ...
+ * />
+ * ```
+ */
+
+import { Volume2, VolumeX } from 'lucide-react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useChatContextOptional } from '../context';
+import { useChatAudioPrefs } from '../core/audio/preferences';
+
+export interface AudioToggleProps {
+  /** Visual size — matches Button sizes. Default: ``icon``. */
+  size?: 'sm' | 'icon';
+  /** Variant passed to the underlying Button. Default: ``ghost``. */
+  variant?: 'ghost' | 'outline' | 'secondary';
+  /** Force-show even when no audio config is wired (e.g. for stories). */
+  alwaysShow?: boolean;
+  className?: string;
+}
+
+export function AudioToggle({
+  size = 'icon',
+  variant = 'ghost',
+  alwaysShow = false,
+  className,
+}: AudioToggleProps) {
+  // Read straight from the persist store so the toggle works even
+  // when rendered OUTSIDE the ChatRoot (e.g. in a parent header). The
+  // chat audio bus reads the same store, so a click here flips the
+  // "muted" state for any sibling ChatRoot in the same tab and
+  // mirrors across tabs via the storage event.
+  const muted = useChatAudioPrefs((s) => s.muted);
+  const setMuted = useChatAudioPrefs((s) => s.setMuted);
+
+  // If a ChatRoot is in scope, hide unless it actually wired sounds —
+  // otherwise the button is a no-op for that surface. When rendered
+  // standalone (no context), default to visible.
+  const ctx = useChatContextOptional();
+  if (ctx && !ctx.hasAudio && !alwaysShow) return null;
+
+  const Icon = muted ? VolumeX : Volume2;
+  const label = muted ? 'Unmute chat sounds' : 'Mute chat sounds';
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      onClick={() => setMuted(!muted)}
+      aria-label={label}
+      aria-pressed={muted}
+      title={label}
+      className={cn(size === 'icon' ? 'h-9 w-9' : '', className)}
+    >
+      <Icon aria-hidden className="size-4" />
+    </Button>
+  );
+}

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

@@ -22,3 +22,4 @@ export { EmptyState, type EmptyStateProps } from './EmptyState';
 export { ErrorBanner, type ErrorBannerProps } from './ErrorBanner';
 export { JumpToLatest, type JumpToLatestProps } from './JumpToLatest';
 export { StreamingIndicator, type StreamingIndicatorProps } from './StreamingIndicator';
+export { AudioToggle, type AudioToggleProps } from './AudioToggle';

package/src/tools/Chat/context/ChatProvider.tsx

@@ -22,6 +22,10 @@ export interface ChatContextValue extends UseChatReturn {
   config: ChatConfig;
   labels: ChatLabels;
   audio: UseChatAudioReturn;
+  /** True iff the host wired at least one ``audio.sounds[event]`` URL.
+   * Components like ``AudioToggle`` use this to auto-hide when there
+   * is nothing to mute. */
+  hasAudio: boolean;
 }
 
 const Ctx = createContext<ChatContextValue | null>(null);
@@ -101,9 +105,17 @@ export function ChatProvider({
     [config.labels],
   );
 
+  const hasAudio = useMemo<boolean>(() => {
+    const sounds = audio?.sounds;
+    if (!sounds) return false;
+    return Object.values(sounds).some(
+      (v) => typeof v === 'string' && v.length > 0,
+    );
+  }, [audio]);
+
   const value = useMemo<ChatContextValue>(
-    () => ({ ...chat, layout, config, labels, audio: audioApi }),
-    [chat, layout, config, labels, audioApi],
+    () => ({ ...chat, layout, config, labels, audio: audioApi, hasAudio }),
+    [chat, layout, config, labels, audioApi, hasAudio],
   );
 
   return (

package/src/tools/Chat/index.ts

@@ -137,6 +137,7 @@ export {
   ErrorBanner,
   JumpToLatest,
   StreamingIndicator,
+  AudioToggle,
   type ChatRootProps,
   type MessageListProps,
   type MessageBubbleProps,
@@ -155,6 +156,7 @@ export {
   type ErrorBannerProps,
   type JumpToLatestProps,
   type StreamingIndicatorProps,
+  type AudioToggleProps,
 } from './components';
 
 // Lazy preset

package/dist/ChatRoot-3FZ6DXBD.mjs

@@ -1,5 +0,0 @@
-export { ChatRoot } from './chunk-XG3XAO7W.mjs';
-import './chunk-2ZLKZ5VR.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=ChatRoot-3FZ6DXBD.mjs.map
-//# sourceMappingURL=ChatRoot-3FZ6DXBD.mjs.map

package/dist/ChatRoot-7TTJRYBA.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var chunkHVIL2FEQ_cjs = require('./chunk-HVIL2FEQ.cjs');
-require('./chunk-B5AWZOHJ.cjs');
-require('./chunk-OLISEQHS.cjs');
-
-
-
-Object.defineProperty(exports, "ChatRoot", {
-  enumerable: true,
-  get: function () { return chunkHVIL2FEQ_cjs.ChatRoot; }
-});
-//# sourceMappingURL=ChatRoot-7TTJRYBA.cjs.map
-//# sourceMappingURL=ChatRoot-7TTJRYBA.cjs.map