@jcdecor/ui 0.1.0 → 0.1.6

package/README.md

@@ -2,12 +2,12 @@
 
 Design System da **JC Decor** para React: tema, tokens e componentes construídos sobre o [Mantine 9](https://mantine.dev).
 
-- 🎨 Paleta da marca (Horizon, Obsidian, Electric, Evergreen) em rampas OKLCH com contraste WCAG AA validado, tipografia Poppins, spacing, raios e sombras
-- 🌗 Tema claro (padrão) e escuro, com variáveis CSS `--ds-*` semânticas
-- 🧩 Todo o Mantine reexportado já temado, mais componentes da marca: `KpiCard`, `Tag`, `PromoBanner`, `TopNav`, `DataTable`, `ProductCard`, `PriceTag`…
-- 💬 `@jcdecor/ui/chat`: bolhas, conversa, composer, lista de conversas e layout de atendimento
-- 🛡️ Logos e ilustrações da marca como componentes SVG recoloríveis, com variações para fundo claro e escuro
-- 📊 `@jcdecor/ui/charts`: gráficos do `@mantine/charts` na paleta da marca, em pt-BR
+- Paleta da marca (Horizon, Obsidian, Electric, Evergreen) em rampas OKLCH com contraste WCAG AA validado, tipografia Poppins, spacing, raios e sombras
+- Tema claro (padrão) e escuro, com variáveis CSS `--ds-*` semânticas
+- Todo o Mantine reexportado já temado, mais componentes da marca: `KpiCard`, `Tag`, `PromoBanner`, `TopNav`, `DataTable`, `ProductCard`, `PriceTag`…
+- `@jcdecor/ui/chat`: bolhas, conversa, composer, lista de conversas e layout de atendimento
+- Logos e ilustrações da marca como componentes SVG recoloríveis, com variações para fundo claro e escuro
+- `@jcdecor/ui/charts`: gráficos do `@mantine/charts` na paleta da marca, em pt-BR
 
 ### Logo
 

package/dist/chat/ChatComposer.d.ts

@@ -18,10 +18,22 @@ export interface ChatComposerProps extends Omit<BoxProps, 'onSubmit'> {
     maxRows?: number;
     /** Elementos extras à esquerda (ex.: emoji picker, respostas rápidas) */
     leftSection?: React.ReactNode;
+    /** Elementos extras à direita do campo, antes do botão de enviar (ex.: biblioteca de prompts) */
+    rightSection?: React.ReactNode;
     sendLabel?: string;
+    /**
+     * Uma resposta está em andamento: o envio fica bloqueado (o texto digitado é mantido e o campo
+     * continua editável). Com `onStop`, o botão de enviar vira o botão de interromper.
+     */
+    loading?: boolean;
+    /** Chamado pelo botão de interromper (visível enquanto `loading`) */
+    onStop?: () => void;
+    stopLabel?: string;
+    /** Bloqueia o envio sem desabilitar o campo (ex.: integração ainda não conectada) */
+    sendDisabled?: boolean;
 }
 /** Campo de mensagem: Enter envia, Shift+Enter quebra linha, anexos opcionais. */
-export declare function ChatComposer({ value, defaultValue, onChange, onSend, placeholder, disabled, allowAttachments, accept, maxRows, leftSection, sendLabel, ...others }: ChatComposerProps): import("react").JSX.Element;
+export declare function ChatComposer({ value, defaultValue, onChange, onSend, placeholder, disabled, allowAttachments, accept, maxRows, leftSection, rightSection, sendLabel, loading, onStop, stopLabel, sendDisabled, ...others }: ChatComposerProps): import("react").JSX.Element;
 export declare namespace ChatComposer {
     var displayName: string;
 }

package/dist/chat/ChatMessage.d.ts

@@ -16,10 +16,14 @@ export interface ChatMessageProps extends BoxProps, Omit<React.ComponentProps<'d
     position?: GroupPosition;
     /** Mensagem de sistema (centralizada) */
     system?: boolean;
+    /** `plain` = sem bolha e em largura total (respostas de assistente com markdown/tabelas) @default 'bubble' */
+    variant?: 'bubble' | 'plain';
+    /** Avatar customizado (ex.: ícone do assistente); substitui o avatar do `author` */
+    avatar?: React.ReactNode;
     children?: React.ReactNode;
 }
 /** Bolha de mensagem de chat. */
-export declare function ChatMessage({ own, author, showAuthor, showAvatar, createdAt, status, attachments, position, system, children, ...others }: ChatMessageProps): import("react").JSX.Element;
+export declare function ChatMessage({ own, author, showAuthor, showAvatar, createdAt, status, attachments, position, system, variant, avatar, children, ...others }: ChatMessageProps): import("react").JSX.Element;
 export declare namespace ChatMessage {
     var displayName: string;
 }

package/dist/chat/ChatThread.d.ts

@@ -17,9 +17,13 @@ export interface ChatThreadProps extends Omit<ScrollAreaProps, 'children'> {
     empty?: React.ReactNode;
     /** Renderização customizada do conteúdo da bolha */
     renderContent?: (message: ChatMessageData) => React.ReactNode;
+    /** Avatar customizado por mensagem (ex.: ícone do assistente) */
+    renderAvatar?: (message: ChatMessageData) => React.ReactNode;
+    /** Conteúdo ao fim da conversa, antes do "digitando" (ex.: status de uma resposta em andamento) */
+    footer?: React.ReactNode;
 }
 /** Lista rolável de mensagens com separadores de data, agrupamento e auto-scroll. */
-export declare function ChatThread({ messages, currentUserId, users, typing, showAuthors, autoScroll, groupWindow, empty, renderContent, h, ...others }: ChatThreadProps): import("react").JSX.Element;
+export declare function ChatThread({ messages, currentUserId, users, typing, showAuthors, autoScroll, groupWindow, empty, renderContent, renderAvatar, footer, h, ...others }: ChatThreadProps): import("react").JSX.Element;
 export declare namespace ChatThread {
     var displayName: string;
 }

package/dist/chat/ConversationList.d.ts

@@ -8,9 +8,13 @@ export interface ConversationListProps extends Omit<BoxProps, 'onSelect'> {
     searchable?: boolean;
     searchPlaceholder?: string;
     empty?: React.ReactNode;
+    /** Ícone no lugar do avatar com iniciais (ex.: conversas com um assistente) */
+    renderIcon?: (conversation: Conversation) => React.ReactNode;
+    /** Ações por conversa (ex.: menu renomear/excluir), à direita do item */
+    renderActions?: (conversation: Conversation) => React.ReactNode;
 }
 /** Lista de conversas com busca, não lidas, presença e última mensagem. */
-export declare function ConversationList({ conversations, activeId, onSelect, searchable, searchPlaceholder, empty, ...others }: ConversationListProps): import("react").JSX.Element;
+export declare function ConversationList({ conversations, activeId, onSelect, searchable, searchPlaceholder, empty, renderIcon, renderActions, ...others }: ConversationListProps): import("react").JSX.Element;
 export declare namespace ConversationList {
     var displayName: string;
 }

package/dist/chat/types.d.ts

@@ -23,6 +23,8 @@ export interface ChatMessageData {
     attachments?: ChatAttachment[];
     /** Mensagem de sistema (centralizada, sem bolha) */
     system?: boolean;
+    /** `plain` = sem bolha e em largura total (ex.: respostas longas de assistente com markdown/tabelas) @default 'bubble' */
+    variant?: 'bubble' | 'plain';
 }
 export interface Conversation {
     id: string;