@agents24/chat-react 0.5.34 → 0.5.36

package/dist/styles.css

@@ -284,6 +284,54 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .a24-message-response > :last-child { margin-bottom: 0; }
 .a24-message-response :is(pre, table) { max-width: 100%; overflow-x: auto; }
 .a24-message-response :is(p, li, blockquote, code) { overflow-wrap: anywhere; }
+/* shadcn/ui Code Block: package-owned styles, independent of host Tailwind scanning. */
+.a24-inline-code { background: var(--a24-surface); border-radius: .25rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .875em; padding: .125rem .375rem; }
+.a24-code-block { --a24-code-inset: 1rem; background: color-mix(in srgb, var(--a24-text) 4%, var(--a24-background)); border: 0; border-radius: 1.25rem; box-sizing: border-box; color: var(--a24-text); display: flex; flex-direction: column; font-size: .8125rem; margin-block: 1rem; max-width: 100%; min-width: 0; overflow: hidden; position: relative; width: 100%; }
+.a24-code-block[data-size="sm"] { --a24-code-inset: .625rem; font-size: .75rem; }
+.a24-code-block--destructive { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a24-danger) 35%, transparent); color: var(--a24-danger); }
+.a24-code-block__header, .a24-code-block__footer { align-items: center; color: var(--a24-muted); display: flex; flex-shrink: 0; gap: .5rem; min-width: 0; padding: var(--a24-code-inset); }
+.a24-code-block__header { padding-bottom: 0; }
+.a24-code-block__footer { padding-top: 0; }
+.a24-code-block__title { align-items: center; display: flex; gap: .375rem; color: var(--a24-text); font-family: var(--font-sans, system-ui, sans-serif); font-size: inherit; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-code-block__title > svg { flex-shrink: 0; height: .875rem; width: .875rem; }
+.a24-code-block__title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.a24-code-block__actions { align-items: center; display: flex; flex-shrink: 0; gap: .25rem; margin-block: -.25rem; margin-inline-start: auto; }
+.a24-code-block > .a24-code-block__actions { background: var(--a24-background); border-radius: .375rem; inset-inline-end: .5rem; margin: 0; opacity: 0; position: absolute; top: .5rem; z-index: 1; }
+.a24-code-block:hover > .a24-code-block__actions, .a24-code-block:focus-within > .a24-code-block__actions { opacity: 1; }
+.a24-code-block__action { align-items: center; appearance: none; background: transparent; border: 0; border-radius: .375rem; color: color-mix(in srgb, var(--a24-muted) 70%, transparent); cursor: pointer; display: inline-flex; flex-shrink: 0; height: 1.5rem; justify-content: center; padding: 0; width: 1.5rem; }
+.a24-code-block__action:hover, .a24-code-block__action:focus-visible { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-code-block__action:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: -2px; }
+.a24-code-block__action[aria-pressed="true"] { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-code-block__action:disabled { cursor: default; opacity: .5; }
+.a24-code-block__action svg { flex-shrink: 0; height: .75rem; pointer-events: none; width: .75rem; }
+.a24-code-block__announcement { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
+.a24-code-block .a24-code-block__content { background: transparent; border: 0; border-radius: 0; color: inherit; font-family: var(--font-mono, ui-monospace, monospace); font-size: inherit; line-height: 1.65; margin: 0; max-height: 32rem; max-width: 100%; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--a24-code-inset); scrollbar-width: thin; text-align: start; white-space: pre; }
+.a24-code-block__content:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: -2px; }
+.a24-code-block .a24-code-block__content { scrollbar-color: color-mix(in srgb, var(--a24-muted) 40%, transparent) transparent; }
+.a24-code-block__content::-webkit-scrollbar { display: block; height: 6px; width: 6px; background: transparent; }
+.a24-code-block__content::-webkit-scrollbar-track, .a24-code-block__content::-webkit-scrollbar-corner { background: transparent; border: 0; box-shadow: none; }
+.a24-code-block__content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--a24-muted) 40%, transparent); border: 0; border-radius: 999px; }
+.a24-code-block__content::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--a24-muted) 60%, transparent); }
+.a24-code-block__content::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
+.a24-code-block:has(> .a24-code-block__header) .a24-code-block__content { padding-top: .5rem; }
+.a24-code-block .a24-code-block__code { background: transparent; border: 0; border-radius: 0; color: inherit; content-visibility: visible; display: grid; font: inherit; min-height: 1lh; min-width: max-content; overflow-wrap: normal; padding: 0; }
+.a24-code-block__content[data-numbered] .a24-code-block__code { grid-template-columns: auto minmax(0, 1fr); }
+.a24-code-block__content[data-wrap] { overflow-wrap: anywhere; white-space: pre-wrap; }
+.a24-code-block__content[data-wrap] .a24-code-block__code { min-width: 0; overflow-wrap: anywhere; }
+.a24-code-block__line { display: block; min-height: 1lh; position: relative; }
+.a24-code-block__line-content { min-width: 0; }
+.a24-code-block__content[data-numbered] .a24-code-block__line { column-gap: 1rem; counter-increment: line; display: grid; grid-column: span 2; grid-template-columns: subgrid; }
+.a24-code-block__content[data-numbered] .a24-code-block__line::before { color: var(--a24-muted); content: counter(line); min-width: 1.5rem; text-align: end; user-select: none; }
+@supports (content: counter(line) / "") { .a24-code-block__content[data-numbered] .a24-code-block__line::before { content: counter(line) / ""; } }
+.a24-code-block__line--added, .a24-code-block__line--highlighted { background: var(--a24-surface-hover); }
+.a24-code-block__line--removed { background: color-mix(in srgb, var(--a24-danger) 10%, transparent); }
+.a24-code-block__line--added::after, .a24-code-block__line--removed::after { inset-inline-start: 0; position: absolute; user-select: none; }
+.a24-code-block__line--added::after { content: "+"; }
+.a24-code-block__line--removed::after { color: var(--a24-danger); content: "−"; }
+.a24-code-token { color: var(--shiki-light); }
+:root.dark .a24-code-token, [data-agents24-color-mode="dark"] .a24-code-token, [data-agents24-theme-root].dark .a24-code-token { color: var(--shiki-dark); }
+@media (prefers-color-scheme: dark) { :root:not(.light):not([data-agents24-color-mode="light"]):not(:has([data-agents24-color-mode="light"])) .a24-code-token { color: var(--shiki-dark); } }
+@media (pointer: coarse) { .a24-code-block > .a24-code-block__actions { opacity: 1; } }
 .a24-source-link,
 .a24-citation { color: #075f9a; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
 .a24-output-attachment { background: var(--a24-surface); border: 1px solid var(--a24-border); border-radius: .5rem; display: inline-flex; font-size: .8rem; padding: .45rem .65rem; }

package/dist/ui/bubble.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/ui/code-block.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlock({ className, variant, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof codeBlockVariants> & {
+    size?: "default" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockCopyButton({ value, className, onClick, ...props }: React.ComponentProps<"button"> & {
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockWrapButton({ wrap, onWrapChange, className, onClick, ...props }: React.ComponentProps<"button"> & {
+    wrap: boolean;
+    onWrapChange: (wrap: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockDownloadButton({ value, filename, className, onClick, ...props }: React.ComponentProps<"button"> & {
+    value: string;
+    filename?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: React.ComponentProps<"pre"> & {
+    wrap?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare const codeBlockLineVariants: (props?: ({
+    variant?: "default" | "added" | "removed" | "highlighted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlockLine({ className, variant, children, ...props }: React.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { CodeBlock, CodeBlockHeader, CodeBlockTitle, CodeBlockActions, CodeBlockCopyButton, CodeBlockWrapButton, CodeBlockDownloadButton, CodeBlockContent, CodeBlockLine, CodeBlockFooter, };

package/dist/ui/code-highlighter.d.ts

@@ -0,0 +1,8 @@
+import { type GrammarState } from "shiki/core";
+export declare function loadHighlighter(language: string): Promise<{
+    highlight(code: string, state?: GrammarState): {
+        lines: import("react/jsx-runtime").JSX.Element[][];
+        state: GrammarState | undefined;
+    };
+} | null>;
+export declare function highlightCode(code: string, language: string): Promise<import("react/jsx-runtime").JSX.Element[][] | null>;