@rodrigocoliveira/agno-react 1.4.0 → 2.0.0

package/README.md

@@ -288,7 +288,7 @@ npm install @radix-ui/react-accordion @radix-ui/react-avatar @radix-ui/react-col
 All UI components are imported from the `/ui` sub-path:
 
 ```tsx
-import { AgnoChat, AgnoChatInterface, AgnoChatInput, Button, Response } from '@rodrigocoliveira/agno-react/ui';
+import { AgnoChat, AgnoChatInput, AgnoMessage, byToolName, Button, Response } from '@rodrigocoliveira/agno-react/ui';
 ```
 
 ---
@@ -298,8 +298,8 @@ import { AgnoChat, AgnoChatInterface, AgnoChatInput, Button, Response } from '@r
 The primary way to build a full-featured chat interface. Uses a compound component pattern — compose only the pieces you need.
 
 ```tsx
-import { AgnoChat } from '@rodrigocoliveira/agno-react/ui';
-import type { ToolHandler } from '@rodrigocoliveira/agno-react';
+import { AgnoChat, byToolName } from '@rodrigocoliveira/agno-react/ui';
+import type { ToolHandler, RenderTool } from '@rodrigocoliveira/agno-react';
 
 const toolHandlers: Record<string, ToolHandler> = {
   show_alert: async (args) => {
@@ -308,21 +308,37 @@ const toolHandlers: Record<string, ToolHandler> = {
   },
 };
 
+// Optional: customize per-tool rendering. `byToolName` is a helper that
+// dispatches by `tool.tool_name`; unlisted tools fall through to the default.
+const renderTool: RenderTool = byToolName({
+  internal_log: false,                                    // hide entirely
+  search_flights: (tool) => <FlightResults tool={tool} />, // custom widget
+});
+
 function ChatPage() {
   return (
-    <AgnoChat toolHandlers={toolHandlers} autoExecuteTools={true}>
+    <AgnoChat
+      toolHandlers={toolHandlers}
+      autoExecuteTools={true}
+      renderTool={renderTool}
+      // debug auto-detects from NODE_ENV; set explicitly to force the debug
+      // tool card on/off (e.g. enable in prod to investigate a live bug).
+      debug={false}
+    >
       <AgnoChat.Messages
-        userAvatar={<img src="/user.png" className="h-8 w-8 rounded-full" />}
-        assistantAvatar={<img src="/bot.png" className="h-8 w-8 rounded-full" />}
-        messageItemProps={{
-          showToolCalls: false,
-          showReasoning: false,
-          renderActions: (message) => (
+        avatars={{
+          user: <img src="/user.png" className="h-8 w-8 rounded-full" />,
+          assistant: <img src="/bot.png" className="h-8 w-8 rounded-full" />,
+        }}
+        actions={{
+          visibility: 'hover-last-visible',
+          assistant: (message) => (
             <button onClick={() => navigator.clipboard.writeText(message.content || '')}>
               Copy
             </button>
           ),
         }}
+        showReasoning={false}
       >
         <AgnoChat.EmptyState>
           <h3>Welcome!</h3>
@@ -348,12 +364,16 @@ function ChatPage() {
 }
 ```
 
+For custom message layouts (reordering slots, replacing sections), use the
+`<AgnoMessage>` compound components via `renderMessage`. See
+[docs/tool-rendering.md](../../docs/tool-rendering.md) for the full reference.
+
 **Sub-components:**
 
 | Component | Description |
 |-----------|-------------|
-| `AgnoChat` | Root wrapper. Accepts `toolHandlers` and `autoExecuteTools` props. |
-| `AgnoChat.Messages` | Message list with auto-scroll. Accepts `userAvatar`, `assistantAvatar`, `messageItemProps`. |
+| `AgnoChat` | Root wrapper. Accepts `toolHandlers`, `autoExecuteTools`, `renderTool`, `debug`, `skipHydration`. |
+| `AgnoChat.Messages` | Message list with auto-scroll. Accepts `avatars`, `actions`, `showReasoning`, `showReferences`, `showTimestamp`, `renderMessage`, `renderTool`, and more. |
 | `AgnoChat.EmptyState` | Shown when there are no messages. Place inside `Messages`. |
 | `AgnoChat.SuggestedPrompts` | Clickable prompt suggestions. Place inside `EmptyState`. |
 | `AgnoChat.ErrorBar` | Error display bar. |
@@ -361,40 +381,6 @@ function ChatPage() {
 
 ---
 
-### AgnoChatInterface
-
-A single-component shortcut that renders a complete chat interface. Less flexible than `AgnoChat` but requires zero composition.
-
-```tsx
-import { AgnoChatInterface } from '@rodrigocoliveira/agno-react/ui';
-
-function ChatPage() {
-  return (
-    <AgnoChatInterface
-      placeholder="Type a message..."
-      suggestedPrompts={[
-        { text: 'What can you help me with?' },
-        { text: 'Explain how you work' },
-      ]}
-      toolHandlers={toolHandlers}
-      showAudioRecorder={true}
-      userAvatar={<img src="/user.png" />}
-      assistantAvatar={<img src="/bot.png" />}
-      emptyState={<div>Start a conversation!</div>}
-      classNames={{
-        root: 'h-full',
-        messagesArea: 'px-4',
-        inputArea: 'border-t',
-      }}
-    />
-  );
-}
-```
-
-**Key props:** `className`, `classNames`, `renderMessage`, `renderInput`, `emptyState`, `headerSlot`, `inputToolbarSlot`, `suggestedPrompts`, `toolHandlers`, `autoExecuteTools`, `placeholder`, `userAvatar`, `assistantAvatar`, `fileUpload`, `showAudioRecorder`, `messageItemProps`, `chatInputProps`.
-
----
-
 ### AgnoChatInput
 
 Standalone chat input component with file uploads, audio recording, and transcription support.

package/dist/index.d.ts

@@ -17,7 +17,12 @@ export { useAgnoSession } from './hooks/useAgnoSession';
 export { useAgnoActions } from './hooks/useAgnoActions';
 export { useAgnoToolExecution, getCustomRender } from './hooks/useAgnoToolExecution';
 export type { ToolHandler, ToolExecutionEvent } from './hooks/useAgnoToolExecution';
-export type { ToolResultRenderer } from './ui/composed/agno-chat/context';
+export { byToolName } from './ui/composed/agno-chat/render-tool';
+export type { RenderTool, ToolRenderArgs, ToolEntry } from './ui/composed/agno-chat/render-tool';
+export { ToolDebugCard, ToolGenerativeUI } from './ui/composed/agno-chat/tool-building-blocks';
+export type { ToolDebugCardProps, ToolGenerativeUIProps, } from './ui/composed/agno-chat/tool-building-blocks';
+export { AgnoMessage, AgnoMessageReasoning, AgnoMessageMedia, AgnoMessageTools, AgnoMessageContent, AgnoMessageReferences, AgnoMessageFooter, AgnoMessageContext, useAgnoMessageContext, } from './ui/composed/agno-message';
+export type { AgnoMessageProps, AgnoMessageToolsProps, AgnoMessageFooterProps, AgnoMessageContextValue, } from './ui/composed/agno-message';
 export { useAgnoCustomEvents } from './hooks/useAgnoCustomEvents';
 export { useAgnoMemory } from './hooks/useAgnoMemory';
 export { useAgnoSessionState } from './hooks/useAgnoSessionState';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}