@startsimpli/ui 0.4.25 → 0.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/__tests__/chat.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { ChatMessage } from '../chat/ChatMessage'
 import { ChatThread } from '../chat/ChatThread'
 import { ChatComposer } from '../chat/ChatComposer'
@@ -36,6 +36,28 @@ describe('ChatMessage', () => {
     expect(screen.getByText(/generateSlide/i)).toBeInTheDocument()
     expect(screen.getByText('Generating slide 1…')).toBeInTheDocument()
   })
+
+  it('renders message attachment chips (image thumbnail + file chip)', () => {
+    render(
+      <ChatMessage
+        message={{
+          id: '4',
+          role: 'user',
+          content: 'Match this brand',
+          attachments: [
+            { id: 'att-1', fileUrl: 'logo.png', filename: 'logo.png', contentType: 'image/png' },
+            { id: 'att-2', fileUrl: 'deck.pdf', filename: 'deck.pdf', contentType: 'application/pdf' },
+          ],
+        }}
+      />
+    )
+    // image attachment renders an <img> thumbnail with its filename as alt
+    const img = screen.getByAltText('logo.png') as HTMLImageElement
+    expect(img).toBeInTheDocument()
+    expect(img.src).toContain('logo.png')
+    // non-image attachment renders its filename as text
+    expect(screen.getByText('deck.pdf')).toBeInTheDocument()
+  })
 })
 
 describe('ChatThread', () => {
@@ -62,6 +84,23 @@ describe('ChatThread', () => {
     rerender(<ChatThread messages={[...messages, { id: 'd', role: 'user', content: 'Fourth' }]} />)
     expect(Element.prototype.scrollIntoView).toHaveBeenCalled()
   })
+
+  it('shows an animated working indicator when busy (startsim-ku8o)', () => {
+    render(<ChatThread messages={messages} busy busyLabel="Working on your deck…" />)
+    expect(screen.getByTestId('chat-working-indicator')).toBeInTheDocument()
+    expect(screen.getByText('Working on your deck…')).toBeInTheDocument()
+  })
+
+  it('hides the working indicator when not busy', () => {
+    render(<ChatThread messages={messages} />)
+    expect(screen.queryByTestId('chat-working-indicator')).not.toBeInTheDocument()
+  })
+
+  it('shows the working indicator even when the thread is empty (busy overrides empty state)', () => {
+    render(<ChatThread messages={[]} busy emptyState={<div>Start chatting</div>} />)
+    expect(screen.getByTestId('chat-working-indicator')).toBeInTheDocument()
+    expect(screen.queryByText('Start chatting')).not.toBeInTheDocument()
+  })
 })
 
 describe('ChatComposer', () => {
@@ -126,4 +165,152 @@ describe('ChatComposer', () => {
     fireEvent.keyDown(textarea, { key: 'Enter' })
     expect(onSubmit).not.toHaveBeenCalled()
   })
+
+  describe('attachments', () => {
+    function makeFile(name: string, type = 'image/png') {
+      return new File(['data'], name, { type })
+    }
+
+    it('fires onAttachFiles when files are picked via the attach button input', () => {
+      const onAttachFiles = jest.fn()
+      render(<ChatComposer onSubmit={jest.fn()} onAttachFiles={onAttachFiles} />)
+      // The attach button is present and labelled
+      expect(screen.getByRole('button', { name: /attach/i })).toBeInTheDocument()
+      const input = screen.getByTestId('chat-attach-input') as HTMLInputElement
+      fireEvent.change(input, { target: { files: [makeFile('a.png'), makeFile('b.pdf', 'application/pdf')] } })
+      expect(onAttachFiles).toHaveBeenCalledTimes(1)
+      expect(onAttachFiles.mock.calls[0][0]).toHaveLength(2)
+      expect(onAttachFiles.mock.calls[0][0][0].name).toBe('a.png')
+    })
+
+    it('does NOT render an attach button when onAttachFiles is omitted', () => {
+      render(<ChatComposer onSubmit={jest.fn()} />)
+      expect(screen.queryByRole('button', { name: /attach/i })).not.toBeInTheDocument()
+    })
+
+    it('renders chips for controlled attachments with a remove control', () => {
+      const onRemoveAttachment = jest.fn()
+      render(
+        <ChatComposer
+          onSubmit={jest.fn()}
+          onAttachFiles={jest.fn()}
+          onRemoveAttachment={onRemoveAttachment}
+          attachments={[
+            { id: 'p1', name: 'brand.png', status: 'ready', thumbnailUrl: 'blob:brand', sizeBytes: 2048 },
+            { id: 'p2', name: 'notes.pdf', status: 'ready', sizeBytes: 1024 },
+          ]}
+        />
+      )
+      expect(screen.getByText('notes.pdf')).toBeInTheDocument()
+      // image chip uses thumbnail with the name as alt
+      expect(screen.getByAltText('brand.png')).toBeInTheDocument()
+      fireEvent.click(screen.getByRole('button', { name: /remove brand\.png/i }))
+      expect(onRemoveAttachment).toHaveBeenCalledWith('p1')
+    })
+
+    it('shows upload progress while a chip is uploading and an error state on failure', () => {
+      render(
+        <ChatComposer
+          onSubmit={jest.fn()}
+          onAttachFiles={jest.fn()}
+          attachments={[
+            { id: 'u1', name: 'big.pptx', status: 'uploading', progress: 0.42 },
+            { id: 'e1', name: 'bad.png', status: 'error' },
+          ]}
+        />
+      )
+      const uploading = screen.getByTestId('chat-attachment-u1')
+      expect(uploading).toHaveAttribute('data-status', 'uploading')
+      expect(uploading.querySelector('[role="progressbar"]')).toBeInTheDocument()
+      const errored = screen.getByTestId('chat-attachment-e1')
+      expect(errored).toHaveAttribute('data-status', 'error')
+    })
+
+    it('still submits text with attachments present (attachments are presentation-only)', () => {
+      const onSubmit = jest.fn()
+      render(
+        <ChatComposer
+          onSubmit={onSubmit}
+          onAttachFiles={jest.fn()}
+          attachments={[{ id: 'p1', name: 'a.png', status: 'ready' }]}
+        />
+      )
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'use this' } })
+      fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' })
+      expect(onSubmit).toHaveBeenCalledWith('use this')
+    })
+
+    it('routes dropped files to onAttachFiles', () => {
+      const onAttachFiles = jest.fn()
+      const { container } = render(
+        <ChatComposer onSubmit={jest.fn()} onAttachFiles={onAttachFiles} />
+      )
+      const root = container.firstChild as HTMLElement
+      fireEvent.drop(root, { dataTransfer: { files: [makeFile('dropped.png')] } })
+      expect(onAttachFiles).toHaveBeenCalledTimes(1)
+      expect(onAttachFiles.mock.calls[0][0][0].name).toBe('dropped.png')
+    })
+
+    it('routes pasted image/file data to onAttachFiles', () => {
+      const onAttachFiles = jest.fn()
+      render(<ChatComposer onSubmit={jest.fn()} onAttachFiles={onAttachFiles} />)
+      const textarea = screen.getByRole('textbox')
+      const file = makeFile('pasted.png')
+      fireEvent.paste(textarea, {
+        clipboardData: { files: [file], items: [{ kind: 'file', type: 'image/png' }] },
+      })
+      expect(onAttachFiles).toHaveBeenCalledTimes(1)
+      expect(onAttachFiles.mock.calls[0][0][0].name).toBe('pasted.png')
+    })
+
+    describe('self-managed uploader mode (startsim-dd9o)', () => {
+      beforeAll(() => {
+        if (!('createObjectURL' in URL)) {
+          // @ts-expect-error test shim
+          URL.createObjectURL = jest.fn(() => 'blob:preview')
+        }
+        if (!('revokeObjectURL' in URL)) {
+          // @ts-expect-error test shim
+          URL.revokeObjectURL = jest.fn()
+        }
+      })
+
+      function fakeUploader() {
+        return {
+          uploadAttachment: jest.fn(async (_id: string, file: File) => ({
+            id: `srv-${file.name}`,
+            fileUrl: `https://cdn/${file.name}`,
+          })),
+          deleteAttachment: jest.fn(async () => undefined),
+        }
+      }
+
+      it('uploads picked files through the uploader and shows a ready chip — no controlled props needed', async () => {
+        const uploader = fakeUploader()
+        render(<ChatComposer onSubmit={jest.fn()} uploader={uploader} documentId="doc-1" />)
+        const input = screen.getByTestId('chat-attach-input') as HTMLInputElement
+        fireEvent.change(input, { target: { files: [makeFile('hero.png')] } })
+        await waitFor(() =>
+          expect(uploader.uploadAttachment).toHaveBeenCalledWith('doc-1', expect.any(File), expect.any(Object))
+        )
+        await waitFor(() => {
+          const chips = screen.getByTestId('chat-attachment-chips')
+          expect(chips.querySelector('[data-status="ready"]')).toBeInTheDocument()
+        })
+      })
+
+      it('shows the attach affordance even without onAttachFiles when an uploader is present', () => {
+        render(<ChatComposer onSubmit={jest.fn()} uploader={fakeUploader()} documentId="doc-1" />)
+        expect(screen.getByRole('button', { name: /attach/i })).toBeInTheDocument()
+      })
+
+      it('still submits text in self-managed mode', () => {
+        const onSubmit = jest.fn()
+        render(<ChatComposer onSubmit={onSubmit} uploader={fakeUploader()} documentId="doc-1" />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'use these' } })
+        fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' })
+        expect(onSubmit).toHaveBeenCalledWith('use these')
+      })
+    })
+  })
 })

package/src/components/__tests__/document-status-badge.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import {
+  DocumentStatusBadge,
+  DOCUMENT_STATUS_CONFIG,
+  type DocumentStatus,
+} from '../badge/DocumentStatusBadge'
+
+describe('DocumentStatusBadge', () => {
+  const cases: Array<{ status: DocumentStatus; label: string; tone: string }> = [
+    { status: 'draft', label: 'Draft', tone: 'bg-gray-100' },
+    { status: 'generating', label: 'Generating', tone: 'bg-amber-100' },
+    { status: 'ready', label: 'Ready', tone: 'bg-green-100' },
+    { status: 'error', label: 'Error', tone: 'bg-red-100' },
+  ]
+
+  it.each(cases)('renders $status with the spec label and tone', ({ status, label, tone }) => {
+    render(<DocumentStatusBadge status={status} />)
+    const badge = screen.getByText(label)
+    expect(badge).toBeInTheDocument()
+    expect(badge).toHaveClass(tone)
+  })
+
+  it('exposes the canonical config mapping (single source of truth)', () => {
+    expect(DOCUMENT_STATUS_CONFIG.ready.label).toBe('Ready')
+    expect(DOCUMENT_STATUS_CONFIG.generating.className).toContain('amber')
+    expect(DOCUMENT_STATUS_CONFIG.error.className).toContain('red')
+    expect(DOCUMENT_STATUS_CONFIG.draft.className).toContain('gray')
+  })
+
+  it('renders a status dot by default and omits it when showDot=false', () => {
+    const { container, rerender } = render(<DocumentStatusBadge status="ready" />)
+    expect(container.querySelector('span[aria-hidden="true"]')).not.toBeNull()
+
+    rerender(<DocumentStatusBadge status="ready" showDot={false} />)
+    expect(container.querySelector('span[aria-hidden="true"]')).toBeNull()
+  })
+
+  it('uses a pulsing dot for generating', () => {
+    const { container } = render(<DocumentStatusBadge status="generating" />)
+    const dot = container.querySelector('span[aria-hidden="true"]')
+    expect(dot?.className).toContain('animate-pulse')
+  })
+
+  it('honors the size prop', () => {
+    render(<DocumentStatusBadge status="ready" size="sm" />)
+    expect(screen.getByText('Ready')).toHaveClass('px-2')
+  })
+})

package/src/components/badge/DocumentStatusBadge.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import * as React from 'react'
+import { StatusBadge, type StatusBadgeConfig } from './StatusBadge'
+
+/** Lifecycle status of a generated document (matches @startsimpli/api DocumentStatus). */
+export type DocumentStatus = 'draft' | 'generating' | 'ready' | 'error'
+
+/**
+ * Canonical color + label mapping for document lifecycle status — the single
+ * source of truth shared by the deck list cards and the reopen toolbar (per the
+ * present-web reopen-ux-spec §1.2). Generic enough that any documents-backed app
+ * (vault, market) can reuse it for a status pill.
+ */
+export const DOCUMENT_STATUS_CONFIG: Record<DocumentStatus, StatusBadgeConfig> = {
+  draft: {
+    label: 'Draft',
+    className: 'gap-1.5 bg-gray-100 text-gray-600',
+  },
+  generating: {
+    label: 'Generating',
+    className: 'gap-1.5 bg-amber-100 text-amber-700',
+  },
+  ready: {
+    label: 'Ready',
+    className: 'gap-1.5 bg-green-100 text-green-700',
+  },
+  error: {
+    label: 'Error',
+    className: 'gap-1.5 bg-red-100 text-red-700',
+  },
+}
+
+/** Per-status dot treatment: hollow for draft, pulsing for generating, solid otherwise. */
+const DOT_CLASS: Record<DocumentStatus, string> = {
+  draft: 'border border-current bg-transparent',
+  generating: 'bg-current animate-pulse',
+  ready: 'bg-current',
+  error: 'bg-current',
+}
+
+export interface DocumentStatusBadgeProps {
+  status: DocumentStatus
+  size?: 'sm' | 'md'
+  /** Show the leading status dot. Defaults to true. */
+  showDot?: boolean
+  className?: string
+}
+
+/**
+ * Status pill for a generated document. Wraps the generic `StatusBadge` with the
+ * canonical document-status config and a leading dot whose treatment encodes the
+ * state (hollow draft / pulsing generating / solid ready+error).
+ */
+export function DocumentStatusBadge({
+  status,
+  size = 'md',
+  showDot = true,
+  className,
+}: DocumentStatusBadgeProps) {
+  return (
+    <StatusBadge<DocumentStatus>
+      status={status}
+      config={DOCUMENT_STATUS_CONFIG}
+      size={size}
+      className={className}
+    >
+      {showDot ? (
+        <span
+          aria-hidden="true"
+          className={`mr-1 inline-block h-1.5 w-1.5 shrink-0 rounded-full ${DOT_CLASS[status] ?? 'bg-current'}`}
+        />
+      ) : null}
+    </StatusBadge>
+  )
+}

package/src/components/badge/StatusBadge.tsx

@@ -11,6 +11,8 @@ export interface StatusBadgeProps<T extends string> {
   config: Record<T, StatusBadgeConfig>
   size?: 'sm' | 'md'
   className?: string
+  /** Optional leading content (e.g. a status dot) rendered before the label. */
+  children?: React.ReactNode
 }
 
 const sizeClasses = {
@@ -23,6 +25,7 @@ export function StatusBadge<T extends string>({
   config,
   size = 'md',
   className,
+  children,
 }: StatusBadgeProps<T>) {
   const entry = config[status]
 
@@ -35,6 +38,7 @@ export function StatusBadge<T extends string>({
           className
         )}
       >
+        {children}
         {status}
       </span>
     )
@@ -49,6 +53,7 @@ export function StatusBadge<T extends string>({
         className
       )}
     >
+      {children}
       {entry.label}
     </span>
   )

package/src/components/badge/index.ts

@@ -3,3 +3,6 @@ export type { StatusBadgeProps, StatusBadgeConfig } from './StatusBadge'
 
 export { StageBadge } from './StageBadge'
 export type { StageBadgeProps, StageBadgeConfig } from './StageBadge'
+
+export { DocumentStatusBadge, DOCUMENT_STATUS_CONFIG } from './DocumentStatusBadge'
+export type { DocumentStatusBadgeProps, DocumentStatus } from './DocumentStatusBadge'