@djangocfg/ui-tools 2.1.382 → 2.1.384

package/src/tools/Chat/stories/07-audio-actions.story.tsx

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-
-import { defineStory } from '@djangocfg/playground';
-import { DialogProvider } from '@djangocfg/ui-core/lib';
-
-import { ChatRoot } from '../components/ChatRoot';
-import { useChatAudio } from '../hooks/useChatAudio';
-import { ChatDock } from '../launcher/ChatDock';
-import { ChatHeaderAudioToggle } from '../launcher/ChatHeaderAudioToggle';
-import { ChatHeaderResetButton } from '../launcher/ChatHeaderResetButton';
-import { ChatLauncher } from '../launcher/ChatLauncher';
-import { SEED_BASIC, makeBasicTransport } from './shared';
-
-export default defineStory({
-  title: 'Tools/Chat/Audio & Actions',
-  component: ChatHeaderAudioToggle,
-  description:
-    'Header audio toggle (auto-injected when `audio` is passed) and header reset action with `window.dialog.confirm`. Wrap stories in `<DialogProvider>` so confirm prompts render.',
-});
-
-// ── Audio toggle ──────────────────────────────────────────────────────────
-
-function AudioLauncher() {
-  const transport = useMemo(() => makeBasicTransport(SEED_BASIC), []);
-  // A real notification sound — bundle your own assets in production.
-  // No `sounds` prop — uses bundled DEFAULT_CHAT_SOUNDS automatically.
-  const audio = useChatAudio();
-
-  return (
-    <ChatLauncher
-      audio={audio}
-      hotkey={{ key: '/', meta: true }}
-      fab={{ ariaLabel: 'Open chat', tooltip: 'Open chat' }}
-      dock={{ title: 'Assistant', height: 600 }}
-    >
-      <ChatRoot transport={transport} />
-    </ChatLauncher>
-  );
-}
-
-export const AudioToggleAutoInjected = () => <AudioLauncher />;
-
-// ── Reset with confirm ────────────────────────────────────────────────────
-
-function ResetLauncher() {
-  const transport = useMemo(() => makeBasicTransport(SEED_BASIC), []);
-
-  return (
-    <DialogProvider>
-      <ChatLauncher
-        hotkey={{ key: '/', meta: true }}
-        fab={{ ariaLabel: 'Open chat', tooltip: 'Open chat' }}
-        dock={{
-          title: 'CRM Assistant',
-          height: 600,
-          headerActions: (
-            <ChatHeaderResetButton
-              onReset={async () => {
-                await new Promise((r) => setTimeout(r, 600));
-                return true;
-              }}
-              onSuccess={() => alert('Context cleared.')}
-            />
-          ),
-        }}
-      >
-        <ChatRoot transport={transport} />
-      </ChatLauncher>
-    </DialogProvider>
-  );
-}
-
-/**
- * `ChatHeaderResetButton` prompts `window.dialog.confirm` (destructive
- * variant) before running the backend reset. `DialogProvider` from
- * `@djangocfg/ui-core` installs that API.
- */
-export const ResetWithConfirm = () => <ResetLauncher />;
-
-// ── Both together ────────────────────────────────────────────────────────
-
-function FullLauncher() {
-  const transport = useMemo(() => makeBasicTransport(SEED_BASIC), []);
-  // No `sounds` prop — uses bundled DEFAULT_CHAT_SOUNDS automatically.
-  const audio = useChatAudio();
-  return (
-    <DialogProvider>
-      <ChatLauncher
-        audio={audio}
-        hotkey={{ key: '/', meta: true }}
-        fab={{ ariaLabel: 'Open chat', tooltip: 'Open chat' }}
-        dock={{
-          title: 'CRM Assistant',
-          height: 600,
-          headerActions: (
-            <ChatHeaderResetButton
-              onReset={async () => {
-                await new Promise((r) => setTimeout(r, 600));
-                return true;
-              }}
-              onSuccess={() => alert('Context cleared.')}
-            />
-          ),
-        }}
-      >
-        <ChatRoot transport={transport} />
-      </ChatLauncher>
-    </DialogProvider>
-  );
-}
-
-export const AudioPlusReset = () => <FullLauncher />;

package/src/tools/Chat/stories/shared/Frame.tsx

@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react';
-
-/** Fixed-size container so chat stories have a viewport to live in. */
-export function Frame({
-  children,
-  h = 560,
-  w = 480,
-}: {
-  children: ReactNode;
-  h?: number | string;
-  w?: number | string;
-}) {
-  return (
-    <div
-      className="overflow-hidden rounded-lg border border-border bg-background shadow-sm"
-      style={{ height: h, width: w }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/tools/Chat/stories/shared/index.ts

@@ -1,5 +0,0 @@
-export { Frame } from './Frame';
-export { makeBasicTransport, makeToolCallsTransport } from './transports';
-export { BUBBLE_GALLERY } from './messages';
-export { USER_ANNA, ASSISTANT_AURA } from './personas';
-export { SEED_BASIC, SEED_TOOL_CALLS, SEED_JSON_PAYLOAD } from './seeds';

package/src/tools/Chat/stories/shared/messages.ts

@@ -1,39 +0,0 @@
-import type { ChatMessage } from '../../types';
-
-/** Compact transcript that exercises every bubble state for visual review. */
-export const BUBBLE_GALLERY: ChatMessage[] = [
-  {
-    id: 'u-1',
-    role: 'user',
-    content: 'How do I add a new persona?',
-    createdAt: Date.now() - 5 * 60_000,
-  },
-  {
-    id: 'a-1',
-    role: 'assistant',
-    content:
-      'Set `config.assistant = { name, avatarUrl }`. You can also override per message via `message.sender`.\n\nMore info: [docs](https://example.com/docs/personas).',
-    createdAt: Date.now() - 4 * 60_000,
-  },
-  {
-    id: 'u-2',
-    role: 'user',
-    content: 'And errors? What if the turn fails?',
-    createdAt: Date.now() - 3 * 60_000,
-  },
-  {
-    id: 'a-err',
-    role: 'assistant',
-    content: 'Network blew up — try again in a moment.',
-    isError: true,
-    createdAt: Date.now() - 2 * 60_000,
-  },
-  {
-    id: 'a-streaming',
-    role: 'assistant',
-    content: 'Live reply tokens arrive here',
-    isStreaming: true,
-    createdAt: Date.now() - 60_000,
-    toolActivity: 'Searching knowledge base…',
-  },
-];

package/src/tools/Chat/stories/shared/personas.ts

@@ -1,13 +0,0 @@
-import type { ChatAssistantContext, ChatUserContext } from '../../types';
-
-export const USER_ANNA: ChatUserContext = {
-  name: 'Anna',
-  email: 'anna@example.com',
-  avatarUrl: 'https://i.pravatar.cc/64?img=5',
-};
-
-export const ASSISTANT_AURA: ChatAssistantContext = {
-  name: 'Aura',
-  avatarUrl: 'https://i.pravatar.cc/64?img=11',
-  model: 'gpt-4o',
-};

package/src/tools/Chat/stories/shared/seeds.ts

@@ -1,92 +0,0 @@
-import type { ChatMessage, ChatToolCall } from '../../types';
-
-const now = Date.now();
-
-/** Two-turn transcript exercising markdown + plain reply. Used in Basic stories. */
-export const SEED_BASIC: ChatMessage[] = [
-  {
-    id: 'seed-u-1',
-    role: 'user',
-    content: 'Give me a markdown sample with a list and a code snippet.',
-    createdAt: now - 4 * 60_000,
-  },
-  {
-    id: 'seed-a-1',
-    role: 'assistant',
-    content:
-      '**Sure!** Here is a list:\n\n- alpha\n- beta\n- gamma\n\nAnd a snippet:\n\n```ts\nconst answer = 42;\n```',
-    createdAt: now - 3 * 60_000,
-  },
-  {
-    id: 'seed-u-2',
-    role: 'user',
-    content: 'How does streaming work?',
-    createdAt: now - 2 * 60_000,
-  },
-  {
-    id: 'seed-a-2',
-    role: 'assistant',
-    content:
-      'Each token arrives separately over SSE. The UI sticks to the bottom while the stream is in flight and shows a streaming indicator until `message_end` fires.',
-    createdAt: now - 60_000,
-  },
-];
-
-/** A completed tool-call so the panel is visible without sending anything. */
-const SEED_TOOL_CALL: ChatToolCall = {
-  id: 'tc-seed-1',
-  name: 'search_docs',
-  input: { query: 'streaming protocol' },
-  output: { hits: 3, top: 'streaming.md' },
-  status: 'success',
-  startedAt: now - 90_000,
-  endedAt: now - 89_000,
-};
-
-export const SEED_TOOL_CALLS: ChatMessage[] = [
-  {
-    id: 'seed-u-tool',
-    role: 'user',
-    content: 'Find docs about streaming.',
-    createdAt: now - 2 * 60_000,
-  },
-  {
-    id: 'seed-a-tool',
-    role: 'assistant',
-    content: 'Let me check the docs for you.\n\nFound 3 relevant chunks. Here is a summary…',
-    createdAt: now - 60_000,
-    toolCalls: [SEED_TOOL_CALL],
-  },
-];
-
-/** Tool-call with a richer JSON payload — drives the JsonTree dispatcher story. */
-const SEED_JSON_TOOL_CALL: ChatToolCall = {
-  id: 'tc-seed-json',
-  name: 'fetch_user',
-  input: { id: 'usr_42', fields: ['email', 'roles', 'metadata'] },
-  output: {
-    id: 'usr_42',
-    email: 'mark@example.com',
-    roles: ['admin', 'editor'],
-    metadata: { plan: 'pro', seats: 5, trial: false },
-  },
-  status: 'success',
-  startedAt: now - 90_000,
-  endedAt: now - 89_000,
-};
-
-export const SEED_JSON_PAYLOAD: ChatMessage[] = [
-  {
-    id: 'seed-u-json',
-    role: 'user',
-    content: 'Fetch user 42.',
-    createdAt: now - 2 * 60_000,
-  },
-  {
-    id: 'seed-a-json',
-    role: 'assistant',
-    content: 'Open the tool panel to inspect the payload.',
-    createdAt: now - 60_000,
-    toolCalls: [SEED_JSON_TOOL_CALL],
-  },
-];

package/src/tools/Chat/stories/shared/transports.ts

@@ -1,36 +0,0 @@
-import { createMockTransport } from '../../core/transport/mock';
-import type { ChatMessage, ChatStreamEvent } from '../../types';
-
-/** Scripted-replies transport. Pass `seed` to pre-populate the bubble area. */
-export function makeBasicTransport(seed: ChatMessage[] = []) {
-  return createMockTransport({
-    initialMessages: seed,
-    replies: [
-      'Hello! I am a mock assistant. Ask me anything — I will reply with scripted text.',
-      '**Sure!** Here is a list:\n\n- alpha\n- beta\n- gamma\n\nAnd a snippet:\n\n```ts\nconst answer = 42;\n```',
-      'Streaming chunked text works too. Each token arrives separately and the UI sticks to the bottom while the stream is in flight.',
-    ],
-    latencyMs: 35,
-  });
-}
-
-/** Transport with an inline tool_call + result on send. Seedable. */
-export function makeToolCallsTransport(seed: ChatMessage[] = []) {
-  const toolTurn: ChatStreamEvent[] = [
-    { type: 'chunk', delta: 'Let me check the docs for you.\n\n' },
-    {
-      type: 'tool_call_start',
-      toolId: 'search-live',
-      name: 'search_docs',
-      input: { query: 'streaming protocol' },
-    },
-    {
-      type: 'tool_call_end',
-      toolId: 'search-live',
-      status: 'success',
-      output: { hits: 3, top: 'streaming.md' },
-    },
-    { type: 'chunk', delta: 'Found 3 relevant chunks. Here is a summary…' },
-  ];
-  return createMockTransport({ initialMessages: seed, replies: [toolTurn], latencyMs: 25 });
-}

package/src/tools/CodeEditor/CodeEditor.story.tsx

@@ -1,202 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Editor, DiffEditor } from './components';
-
-export default defineStory({
-  title: 'Tools/Code Editor',
-  component: Editor,
-  description: 'Monaco-based code editor with syntax highlighting, diff view, and full IDE features.',
-});
-
-const SAMPLE_CODE = {
-  typescript: `import { useState, useCallback, useMemo } from 'react';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: 'admin' | 'user' | 'viewer';
-}
-
-export function useUsers() {
-  const [users, setUsers] = useState<User[]>([]);
-
-  const addUser = useCallback((user: Omit<User, 'id'>) => {
-    setUsers(prev => [...prev, { ...user, id: crypto.randomUUID() }]);
-  }, []);
-
-  const admins = useMemo(
-    () => users.filter(u => u.role === 'admin'),
-    [users],
-  );
-
-  return { users, admins, addUser };
-}`,
-
-  python: `from __future__ import annotations
-
-from dataclasses import dataclass
-from datetime import datetime
-from typing import AsyncIterator
-
-import httpx
-from pydantic import BaseModel, Field
-
-
-class User(BaseModel):
-    id: str
-    name: str
-    email: str
-    role: str = "user"
-    created_at: datetime = Field(default_factory=datetime.utcnow)
-
-
-@dataclass
-class UserService:
-    base_url: str
-    client: httpx.AsyncClient | None = None
-
-    async def list_users(self, page: int = 1) -> list[User]:
-        async with httpx.AsyncClient(base_url=self.base_url) as client:
-            response = await client.get("/users", params={"page": page})
-            response.raise_for_status()
-            return [User(**u) for u in response.json()["data"]]`,
-
-  json: `{
-  "name": "@djangocfg/ui-tools",
-  "version": "2.1.0",
-  "description": "Heavy React tools with lazy loading",
-  "dependencies": {
-    "monaco-editor": "^0.55.1",
-    "react": "^19.1.0"
-  },
-  "exports": {
-    ".": "./src/index.ts",
-    "./code-editor": "./src/tools/CodeEditor/index.ts"
-  }
-}`,
-
-  css: `/* Design tokens */
-:root {
-  --radius: 0.5rem;
-  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-
-.editor-container {
-  position: relative;
-  border-radius: var(--radius);
-  border: 1px solid hsl(var(--border));
-  overflow: hidden;
-
-  &:focus-within {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-}`,
-};
-
-const DIFF_ORIGINAL = `function greet(name: string) {
-  console.log("Hello, " + name);
-}
-
-greet("World");`;
-
-const DIFF_MODIFIED = `function greet(name: string, greeting = "Hello") {
-  console.log(\`\${greeting}, \${name}!\`);
-}
-
-function farewell(name: string) {
-  console.log(\`Goodbye, \${name}!\`);
-}
-
-greet("World");
-farewell("World");`;
-
-export const Interactive = () => {
-  const [language] = useSelect('language', {
-    options: ['typescript', 'python', 'json', 'css'] as const,
-    defaultValue: 'typescript',
-    label: 'Language',
-  });
-
-  const [readOnly] = useBoolean('readOnly', {
-    defaultValue: false,
-    label: 'Read Only',
-  });
-
-  const [minimap] = useBoolean('minimap', {
-    defaultValue: false,
-    label: 'Minimap',
-  });
-
-  const [autoHeight] = useBoolean('autoHeight', {
-    defaultValue: false,
-    label: 'Auto Height',
-    description: 'Resize editor to fit content',
-  });
-
-  return autoHeight ? (
-    <Editor
-      value={SAMPLE_CODE[language]}
-      language={language}
-      autoHeight
-      minHeight={100}
-      maxHeight={500}
-      options={{ readOnly, minimap, fontSize: 14 }}
-    />
-  ) : (
-    <div style={{ height: 400 }}>
-      <Editor
-        value={SAMPLE_CODE[language]}
-        language={language}
-        options={{ readOnly, minimap, fontSize: 14 }}
-      />
-    </div>
-  );
-};
-
-export const TypeScript = () => (
-  <div style={{ height: 350 }}>
-    <Editor value={SAMPLE_CODE.typescript} language="typescript" />
-  </div>
-);
-
-export const Python = () => (
-  <div style={{ height: 350 }}>
-    <Editor value={SAMPLE_CODE.python} language="python" />
-  </div>
-);
-
-export const ReadOnly = () => (
-  <div style={{ height: 300 }}>
-    <Editor
-      value={SAMPLE_CODE.json}
-      language="json"
-      options={{ readOnly: true, lineNumbers: 'on' }}
-    />
-  </div>
-);
-
-export const AutoHeight = () => (
-  <div className="flex flex-col gap-4 max-w-3xl">
-    <p className="text-sm text-muted-foreground">
-      Editor grows with content (min 100px, max 400px). Try typing new lines.
-    </p>
-    <Editor
-      value={`const x = 1;\nconst y = 2;\nconst z = x + y;`}
-      language="typescript"
-      autoHeight
-      minHeight={100}
-      maxHeight={400}
-    />
-  </div>
-);
-
-export const DiffView = () => (
-  <div style={{ height: 400 }}>
-    <DiffEditor
-      original={DIFF_ORIGINAL}
-      modified={DIFF_MODIFIED}
-      language="typescript"
-    />
-  </div>
-);