@gyramais/gyra-design 0.2.56 → 0.2.58

package/dist/emails/balance-sheet-finalized/components/ChatWidget/ChatBlocks.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { ChatActionBlock, ChatBlock, ChatLinkBlock, ChatVideoBlock } from "./types";
+export interface ChatLinkCardProps {
+    block: ChatLinkBlock;
+    /** Recebe o `href` relativo. Sem ele, o link interno vira navegacao comum. */
+    onNavigate?: (href: string) => void;
+}
+declare const ChatLinkCard: ({ block, onNavigate }: ChatLinkCardProps) => React.JSX.Element | null;
+export interface ChatVideoCardProps {
+    block: ChatVideoBlock;
+}
+declare const ChatVideoCard: ({ block }: ChatVideoCardProps) => React.JSX.Element | null;
+export interface ChatActionCardProps {
+    block: ChatActionBlock;
+    /** Manda a resposta como a proxima mensagem do usuario. */
+    onRespond?: (text: string) => void | Promise<void>;
+    /** Trava os botoes (ja respondido, ou a conversa seguiu adiante). */
+    locked?: boolean;
+    onNavigate?: (href: string) => void;
+}
+declare const ChatActionCard: ({ block, onRespond, locked, onNavigate }: ChatActionCardProps) => React.JSX.Element;
+export interface ChatBlocksProps {
+    blocks: ChatBlock[];
+    onNavigate?: (href: string) => void;
+    onRespond?: (text: string) => void | Promise<void>;
+    actionsLocked?: boolean;
+}
+declare const ChatBlocks: ({ blocks, onNavigate, onRespond, actionsLocked }: ChatBlocksProps) => React.JSX.Element;
+export { ChatBlocks, ChatLinkCard, ChatVideoCard, ChatActionCard };

package/dist/emails/balance-sheet-finalized/components/ChatWidget/ChatMarkdown.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const isSafeHttpUrl: (href: string | undefined | null) => boolean;
+/** Caminho interno do app ("/relatorios/123"). "//host" e protocolo relativo, nao conta. */
+export declare const isInternalHref: (href: string | undefined | null) => boolean;
+interface ChatMarkdownProps {
+    children: string;
+    onNavigate?: (href: string) => void;
+}
+declare const ChatMarkdown: ({ children, onNavigate }: ChatMarkdownProps) => React.JSX.Element;
+export { ChatMarkdown };

package/dist/emails/balance-sheet-finalized/components/ChatWidget/ChatMessageBubble.d.ts

@@ -2,6 +2,15 @@ import React from "react";
 import { ChatMessage } from "./types";
 interface ChatMessageBubbleProps {
     message: ChatMessage;
+    /** Esta e a resposta sendo gerada agora (mostra o passo atual). */
+    streaming?: boolean;
+    /** Rotulo do "pensando" quando a mensagem nao traz `steps` proprios. */
+    statusLabel?: string;
+    onNavigate?: (href: string) => void;
+    /** Resposta dos cards de confirmacao, pelo mesmo caminho do composer. */
+    onRespond?: (text: string) => void | Promise<void>;
+    /** Trava os cards de confirmacao desta mensagem. */
+    actionsLocked?: boolean;
 }
-declare const ChatMessageBubble: ({ message }: ChatMessageBubbleProps) => React.JSX.Element;
+declare const ChatMessageBubble: ({ message, streaming, statusLabel, onNavigate, onRespond, actionsLocked, }: ChatMessageBubbleProps) => React.JSX.Element;
 export { ChatMessageBubble };

package/dist/emails/balance-sheet-finalized/components/ChatWidget/ChatWidget.d.ts

@@ -1,13 +1,36 @@
 import React from "react";
 import "./index.css";
-import { ChatMessage, ChatStatus, ChatTheme } from "./types";
+import { ChatAttachment, ChatMessage, ChatSendOptions, ChatStatus, ChatTheme } from "./types";
 export interface ChatWidgetProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     messages: ChatMessage[];
     status: ChatStatus;
-    onSend: (text: string) => void | Promise<void>;
+    /**
+     * `options.attachmentIds` so vem quando ha anexos prontos no composer. Os
+     * cards de confirmacao tambem respondem por aqui (sem o segundo argumento).
+     */
+    onSend: (text: string, options?: ChatSendOptions) => void | Promise<void>;
     onReset?: () => void;
+    /**
+     * Links internos (href comecando com "/") dos cards e do markdown. Sem ele,
+     * viram navegacao comum do navegador.
+     */
+    onNavigate?: (href: string) => void;
+    /**
+     * Com ele, o composer ganha o clipe de anexo. Recebe o arquivo escolhido e
+     * devolve `{ id, name }` do upload; um erro lancado vira aviso no composer
+     * (use a `message` do erro para o texto em portugues).
+     */
+    onAttach?: (file: File) => Promise<ChatAttachment>;
+    /** `accept` do seletor de arquivos. */
+    attachAccept?: string;
+    /** Dica de formatos e tamanho, no tooltip do clipe e abaixo dos anexos. */
+    attachHint?: string;
+    /** Maximo de anexos por mensagem. */
+    maxAttachments?: number;
+    /** Texto ao lado dos pontinhos enquanto a resposta nao comeca a chegar. */
+    statusLabel?: string;
     theme?: ChatTheme;
     title?: string;
     triggerLabel?: string;
@@ -26,5 +49,5 @@ export interface ChatWidgetProps {
     headerExtra?: React.ReactNode;
     belowHeader?: React.ReactNode;
 }
-declare const ChatWidget: ({ open, onOpenChange, messages, status, onSend, onReset, theme, title, triggerLabel, placeholder, emptyTitle, emptySubtitle, suggestions, collapsedHeight, expandedHeight, collapsedWidth, expandedWidth, defaultExpanded, expandable, className, zIndex, headerExtra, belowHeader, }: ChatWidgetProps) => React.JSX.Element;
+declare const ChatWidget: ({ open, onOpenChange, messages, status, onSend, onReset, onNavigate, onAttach, attachAccept, attachHint, maxAttachments, statusLabel, theme, title, triggerLabel, placeholder, emptyTitle, emptySubtitle, suggestions, collapsedHeight, expandedHeight, collapsedWidth, expandedWidth, defaultExpanded, expandable, className, zIndex, headerExtra, belowHeader, }: ChatWidgetProps) => React.JSX.Element;
 export { ChatWidget };

package/dist/emails/balance-sheet-finalized/components/ChatWidget/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./ChatWidget";
 export * from "./ChatMessageBubble";
+export * from "./ChatBlocks";
+export { ChatMarkdown } from "./ChatMarkdown";
 export * from "./types";

package/dist/emails/balance-sheet-finalized/components/ChatWidget/types.d.ts

@@ -10,9 +10,61 @@ export interface ChatCitation {
     excerpt: string;
     url: string;
 }
+/**
+ * Atalho com botao. `href` relativo (comeca com "/") navega dentro do app pelo
+ * `onNavigate` do widget; `https://...` abre em nova aba.
+ */
+export interface ChatLinkBlock {
+    kind: 'link';
+    href: string;
+    label: string;
+    description?: string;
+}
+/** Video curto (mp4) tocando dentro do chat, com opcao de abrir grande. */
+export interface ChatVideoBlock {
+    kind: 'video';
+    title: string;
+    src: string;
+    poster?: string;
+    description?: string;
+    docsUrl?: string;
+}
+/**
+ * Pedido de confirmacao. O clique manda `confirmMessage` (ou `cancelMessage`)
+ * como a proxima mensagem do usuario, pelo mesmo `onSend` do composer.
+ */
+export interface ChatActionBlock {
+    kind: 'action';
+    actionId: string;
+    title: string;
+    /** Markdown com o resumo do que vai ser feito. */
+    preview: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmMessage: string;
+    cancelMessage: string;
+}
+export type ChatBlock = ChatLinkBlock | ChatVideoBlock | ChatActionBlock;
+export interface ChatAttachment {
+    id: string;
+    name: string;
+}
+/** Segundo argumento opcional de `onSend`. */
+export interface ChatSendOptions {
+    attachmentIds?: string[];
+}
 export interface ChatMessage {
     role: ChatRole;
     content: string;
     toolCalls?: ChatToolCall[];
     citations?: ChatCitation[];
+    /** Cards ricos (link, video, confirmacao) abaixo do texto do assistente. */
+    blocks?: ChatBlock[];
+    /** Arquivos enviados junto com a mensagem do usuario (viram chips). */
+    attachments?: ChatAttachment[];
+    /**
+     * Passos do turno em andamento ("Lendo o relatorio..."). So o ultimo
+     * aparece, e so enquanto a resposta esta sendo gerada.
+     */
+    steps?: string[];
 }

package/dist/emails/email/components/ChatWidget/ChatBlocks.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { ChatActionBlock, ChatBlock, ChatLinkBlock, ChatVideoBlock } from "./types";
+export interface ChatLinkCardProps {
+    block: ChatLinkBlock;
+    /** Recebe o `href` relativo. Sem ele, o link interno vira navegacao comum. */
+    onNavigate?: (href: string) => void;
+}
+declare const ChatLinkCard: ({ block, onNavigate }: ChatLinkCardProps) => React.JSX.Element | null;
+export interface ChatVideoCardProps {
+    block: ChatVideoBlock;
+}
+declare const ChatVideoCard: ({ block }: ChatVideoCardProps) => React.JSX.Element | null;
+export interface ChatActionCardProps {
+    block: ChatActionBlock;
+    /** Manda a resposta como a proxima mensagem do usuario. */
+    onRespond?: (text: string) => void | Promise<void>;
+    /** Trava os botoes (ja respondido, ou a conversa seguiu adiante). */
+    locked?: boolean;
+    onNavigate?: (href: string) => void;
+}
+declare const ChatActionCard: ({ block, onRespond, locked, onNavigate }: ChatActionCardProps) => React.JSX.Element;
+export interface ChatBlocksProps {
+    blocks: ChatBlock[];
+    onNavigate?: (href: string) => void;
+    onRespond?: (text: string) => void | Promise<void>;
+    actionsLocked?: boolean;
+}
+declare const ChatBlocks: ({ blocks, onNavigate, onRespond, actionsLocked }: ChatBlocksProps) => React.JSX.Element;
+export { ChatBlocks, ChatLinkCard, ChatVideoCard, ChatActionCard };

package/dist/emails/email/components/ChatWidget/ChatMarkdown.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const isSafeHttpUrl: (href: string | undefined | null) => boolean;
+/** Caminho interno do app ("/relatorios/123"). "//host" e protocolo relativo, nao conta. */
+export declare const isInternalHref: (href: string | undefined | null) => boolean;
+interface ChatMarkdownProps {
+    children: string;
+    onNavigate?: (href: string) => void;
+}
+declare const ChatMarkdown: ({ children, onNavigate }: ChatMarkdownProps) => React.JSX.Element;
+export { ChatMarkdown };

package/dist/emails/email/components/ChatWidget/ChatMessageBubble.d.ts

@@ -2,6 +2,15 @@ import React from "react";
 import { ChatMessage } from "./types";
 interface ChatMessageBubbleProps {
     message: ChatMessage;
+    /** Esta e a resposta sendo gerada agora (mostra o passo atual). */
+    streaming?: boolean;
+    /** Rotulo do "pensando" quando a mensagem nao traz `steps` proprios. */
+    statusLabel?: string;
+    onNavigate?: (href: string) => void;
+    /** Resposta dos cards de confirmacao, pelo mesmo caminho do composer. */
+    onRespond?: (text: string) => void | Promise<void>;
+    /** Trava os cards de confirmacao desta mensagem. */
+    actionsLocked?: boolean;
 }
-declare const ChatMessageBubble: ({ message }: ChatMessageBubbleProps) => React.JSX.Element;
+declare const ChatMessageBubble: ({ message, streaming, statusLabel, onNavigate, onRespond, actionsLocked, }: ChatMessageBubbleProps) => React.JSX.Element;
 export { ChatMessageBubble };

package/dist/emails/email/components/ChatWidget/ChatWidget.d.ts

@@ -1,13 +1,36 @@
 import React from "react";
 import "./index.css";
-import { ChatMessage, ChatStatus, ChatTheme } from "./types";
+import { ChatAttachment, ChatMessage, ChatSendOptions, ChatStatus, ChatTheme } from "./types";
 export interface ChatWidgetProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     messages: ChatMessage[];
     status: ChatStatus;
-    onSend: (text: string) => void | Promise<void>;
+    /**
+     * `options.attachmentIds` so vem quando ha anexos prontos no composer. Os
+     * cards de confirmacao tambem respondem por aqui (sem o segundo argumento).
+     */
+    onSend: (text: string, options?: ChatSendOptions) => void | Promise<void>;
     onReset?: () => void;
+    /**
+     * Links internos (href comecando com "/") dos cards e do markdown. Sem ele,
+     * viram navegacao comum do navegador.
+     */
+    onNavigate?: (href: string) => void;
+    /**
+     * Com ele, o composer ganha o clipe de anexo. Recebe o arquivo escolhido e
+     * devolve `{ id, name }` do upload; um erro lancado vira aviso no composer
+     * (use a `message` do erro para o texto em portugues).
+     */
+    onAttach?: (file: File) => Promise<ChatAttachment>;
+    /** `accept` do seletor de arquivos. */
+    attachAccept?: string;
+    /** Dica de formatos e tamanho, no tooltip do clipe e abaixo dos anexos. */
+    attachHint?: string;
+    /** Maximo de anexos por mensagem. */
+    maxAttachments?: number;
+    /** Texto ao lado dos pontinhos enquanto a resposta nao comeca a chegar. */
+    statusLabel?: string;
     theme?: ChatTheme;
     title?: string;
     triggerLabel?: string;
@@ -26,5 +49,5 @@ export interface ChatWidgetProps {
     headerExtra?: React.ReactNode;
     belowHeader?: React.ReactNode;
 }
-declare const ChatWidget: ({ open, onOpenChange, messages, status, onSend, onReset, theme, title, triggerLabel, placeholder, emptyTitle, emptySubtitle, suggestions, collapsedHeight, expandedHeight, collapsedWidth, expandedWidth, defaultExpanded, expandable, className, zIndex, headerExtra, belowHeader, }: ChatWidgetProps) => React.JSX.Element;
+declare const ChatWidget: ({ open, onOpenChange, messages, status, onSend, onReset, onNavigate, onAttach, attachAccept, attachHint, maxAttachments, statusLabel, theme, title, triggerLabel, placeholder, emptyTitle, emptySubtitle, suggestions, collapsedHeight, expandedHeight, collapsedWidth, expandedWidth, defaultExpanded, expandable, className, zIndex, headerExtra, belowHeader, }: ChatWidgetProps) => React.JSX.Element;
 export { ChatWidget };

package/dist/emails/email/components/ChatWidget/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./ChatWidget";
 export * from "./ChatMessageBubble";
+export * from "./ChatBlocks";
+export { ChatMarkdown } from "./ChatMarkdown";
 export * from "./types";

package/dist/emails/email/components/ChatWidget/types.d.ts

@@ -10,9 +10,61 @@ export interface ChatCitation {
     excerpt: string;
     url: string;
 }
+/**
+ * Atalho com botao. `href` relativo (comeca com "/") navega dentro do app pelo
+ * `onNavigate` do widget; `https://...` abre em nova aba.
+ */
+export interface ChatLinkBlock {
+    kind: 'link';
+    href: string;
+    label: string;
+    description?: string;
+}
+/** Video curto (mp4) tocando dentro do chat, com opcao de abrir grande. */
+export interface ChatVideoBlock {
+    kind: 'video';
+    title: string;
+    src: string;
+    poster?: string;
+    description?: string;
+    docsUrl?: string;
+}
+/**
+ * Pedido de confirmacao. O clique manda `confirmMessage` (ou `cancelMessage`)
+ * como a proxima mensagem do usuario, pelo mesmo `onSend` do composer.
+ */
+export interface ChatActionBlock {
+    kind: 'action';
+    actionId: string;
+    title: string;
+    /** Markdown com o resumo do que vai ser feito. */
+    preview: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmMessage: string;
+    cancelMessage: string;
+}
+export type ChatBlock = ChatLinkBlock | ChatVideoBlock | ChatActionBlock;
+export interface ChatAttachment {
+    id: string;
+    name: string;
+}
+/** Segundo argumento opcional de `onSend`. */
+export interface ChatSendOptions {
+    attachmentIds?: string[];
+}
 export interface ChatMessage {
     role: ChatRole;
     content: string;
     toolCalls?: ChatToolCall[];
     citations?: ChatCitation[];
+    /** Cards ricos (link, video, confirmacao) abaixo do texto do assistente. */
+    blocks?: ChatBlock[];
+    /** Arquivos enviados junto com a mensagem do usuario (viram chips). */
+    attachments?: ChatAttachment[];
+    /**
+     * Passos do turno em andamento ("Lendo o relatorio..."). So o ultimo
+     * aparece, e so enquanto a resposta esta sendo gerada.
+     */
+    steps?: string[];
 }

package/dist/index.css

@@ -4512,6 +4512,8 @@ h6 {
   --chat-bg-code: var(--color-surface-secondary);
   --chat-bg-pre: var(--color-surface-secondary);
   --chat-bg-empty-icon: var(--gyra-blue-light);
+  --chat-bg-card: var(--color-surface-primary);
+  --chat-bg-media: var(--color-surface-secondary);
 
   --chat-fg-primary: var(--color-text-primary);
   --chat-fg-secondary: var(--color-text-secondary);
@@ -4525,6 +4527,7 @@ h6 {
   --chat-border: var(--color-border-secondary);
   --chat-border-strong: var(--color-border-primary);
   --chat-shadow: var(--shadow-modal);
+  --chat-fg-danger: var(--color-danger);
 }
 
 .gyramais-chat-theme-dark {
@@ -4542,6 +4545,8 @@ h6 {
   --chat-bg-code: #262626;
   --chat-bg-pre: #171717;
   --chat-bg-empty-icon: rgba(139, 92, 246, 0.1);
+  --chat-bg-card: #0a0a0a;
+  --chat-bg-media: #000000;
 
   --chat-fg-primary: #e5e5e5;
   --chat-fg-secondary: #a3a3a3;
@@ -4555,6 +4560,7 @@ h6 {
   --chat-border: #262626;
   --chat-border-strong: #404040;
   --chat-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
+  --chat-fg-danger: #f87171;
 }
 
 /* ============================================================================
@@ -4864,9 +4870,18 @@ h6 {
 .gyramais-chat-typing {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  font-size: 11.5px;
   color: var(--chat-fg-tertiary);
 }
+.gyramais-chat-typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.gyramais-chat-typing-label {
+  color: var(--chat-fg-secondary);
+}
 .gyramais-chat-typing-dot {
   height: 4px;
   width: 4px;
@@ -5106,6 +5121,268 @@ h6 {
   font-size: 14px !important;
 }
 
+/* ============================================================================
+   User bubble attachments
+   ============================================================================ */
+.gyramais-chat-bubble-user-stack {
+  display: flex;
+  max-width: 82%;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+.gyramais-chat-bubble-user-stack .gyramais-chat-bubble-user {
+  max-width: 100%;
+}
+
+.gyramais-chat-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.gyramais-chat-attachments-sent {
+  justify-content: flex-end;
+}
+.gyramais-chat-attachment {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--radius-sm);
+  border-width: 1px;
+  border-color: var(--chat-border);
+  background-color: var(--chat-bg-card);
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 11px;
+  color: var(--chat-fg-secondary);
+}
+.gyramais-chat-attachment.is-uploading {
+  opacity: 0.7;
+}
+.gyramais-chat-attachment-icon {
+  height: 12px !important;
+  width: 12px !important;
+  flex-shrink: 0;
+  font-size: 12px !important;
+}
+.gyramais-chat-attachment-name {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gyramais-chat-attachment-status {
+  font-style: italic;
+  color: var(--chat-fg-tertiary);
+}
+.gyramais-chat-attachment-remove {
+  display: inline-flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-xs);
+  border-style: none;
+  background-color: transparent;
+  padding: 1px;
+  color: var(--chat-fg-tertiary);
+}
+.gyramais-chat-attachment-remove:hover {
+  background-color: var(--chat-bg-icon-hover);
+  color: var(--chat-fg-primary);
+}
+.gyramais-chat-attachment-remove-icon {
+  height: 12px !important;
+  width: 12px !important;
+  font-size: 12px !important;
+}
+
+/* Composer: anexos acima do campo de texto */
+.gyramais-chat-composer-attachments {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.gyramais-chat-attach-hint {
+  font-size: 10.5px;
+  color: var(--chat-fg-tertiary);
+}
+.gyramais-chat-attach-error {
+  font-size: 11px;
+  color: var(--chat-fg-danger);
+}
+.gyramais-chat-file-input {
+  display: none;
+}
+.gyramais-chat-attach {
+  display: inline-flex;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-xs);
+  border-style: none;
+  background-color: transparent;
+  color: var(--chat-fg-tertiary);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-chat-attach:hover:not(:disabled) {
+  background-color: var(--chat-bg-icon-hover);
+  color: var(--chat-fg-primary);
+}
+.gyramais-chat-attach:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.gyramais-chat-attach:focus-visible,
+.gyramais-chat-attachment-remove:focus-visible,
+.gyramais-chat-card-button:focus-visible {
+  outline: 2px solid var(--chat-fg-accent);
+  outline-offset: 1px;
+}
+
+/* ============================================================================
+   Rich blocks (link, video, action)
+   ============================================================================ */
+.gyramais-chat-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.gyramais-chat-card {
+  display: flex;
+  min-width: 0px;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-color: var(--chat-border);
+  background-color: var(--chat-bg-card);
+  padding: 10px;
+}
+.gyramais-chat-link-card {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.gyramais-chat-card-body {
+  display: flex;
+  min-width: 0px;
+  flex-direction: column;
+  gap: 2px;
+}
+.gyramais-chat-card-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--chat-fg-primary);
+  overflow-wrap: anywhere;
+}
+.gyramais-chat-card-description {
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--chat-fg-secondary);
+  overflow-wrap: anywhere;
+}
+.gyramais-chat-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+.gyramais-chat-card-button {
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-radius: var(--radius-sm);
+  border-width: 1px;
+  border-color: var(--chat-border);
+  background-color: var(--chat-bg-suggestion);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--chat-fg-primary);
+  text-decoration-line: none;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+  font-family: inherit;
+}
+.gyramais-chat-card-button:hover:not(:disabled) {
+  border-color: var(--chat-border-strong);
+  background-color: var(--chat-bg-icon-hover);
+}
+.gyramais-chat-card-button-primary {
+  border-color: transparent;
+  background-color: var(--chat-bg-send);
+  color: var(--chat-fg-on-send);
+}
+.gyramais-chat-card-button-primary:hover:not(:disabled) {
+  border-color: transparent;
+  background-color: var(--chat-bg-send-hover);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.gyramais-chat-card-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.gyramais-chat-card-button[aria-pressed="true"]:disabled {
+  opacity: 1;
+  box-shadow: inset 0 0 0 1px var(--chat-fg-accent);
+}
+.gyramais-chat-card-button-icon {
+  height: 13px !important;
+  width: 13px !important;
+  font-size: 13px !important;
+}
+
+.gyramais-chat-video {
+  display: block;
+  max-height: 240px;
+  width: 100%;
+  border-radius: var(--radius-sm);
+  background-color: var(--chat-bg-media);
+  aspect-ratio: 16 / 9;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.gyramais-chat-video-expanded {
+  display: block;
+  max-height: 70vh;
+  width: 100%;
+  border-radius: var(--radius-sm);
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  aspect-ratio: 16 / 9;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.gyramais-chat-action-card {
+  border-color: color-mix(in srgb, var(--chat-fg-accent) 35%, var(--chat-border));
+}
+.gyramais-chat-action-preview {
+  padding-top: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .gyramais-checkbox-container {
 
     display: flex
@@ -11778,9 +12055,16 @@ h6 {
 }
 
 /* Estado anunciado uma vez para leitor de tela, invisivel na tela. As celulas
-   de skeleton sao decorativas (`aria-hidden`), entao nao repetem o anuncio. */
+   de skeleton sao decorativas (`aria-hidden`), entao nao repetem o anuncio.
+   `top`/`left` ancoram no topo de quem contem: sem eles o absolute fica na
+   posicao estatica, e com o container sem posicao e a tabela no fim da tela
+   ele cai abaixo da dobra, estica o documento e a pagina inteira rola junto
+   com a sidebar. O container nao vira `relative` de proposito: com o
+   overflow dele, cortaria menu e popover abertos dentro de uma celula. */
 .gyramais-table-container .gyramais-table-status {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 1px;
   height: 1px;
   padding: 0;