@agno-hq/chat-react 0.3.0 → 0.3.1

package/README.md

@@ -179,7 +179,7 @@ as `R, G, B` triples:
 | `<MessageList>` | Auto-scrolling transcript with live status + footer slot. |
 | `<Message>` | A single message: content, behind-the-scenes panel, media, citations, follow-ups. |
 | `<BehindTheScenes>` | One collapsible timeline over a run's reasoning, tools, member turns, steps and events — doubles as the live status line. |
-| `<ChatInput>` | Multiline input with file attach, send, and stop. |
+| `<ChatInput>` | Multiline input with file attach, send, and stop; opens up for @mentions, context chips and a custom textarea. |
 | `<ToolCalls>` | Collapsible tool-call cards (name, args, result, status). |
 | `<Reasoning>` | Collapsible reasoning-steps panel. |
 | `<Citations>` | The sources behind an answer, as linked cards. |
@@ -278,6 +278,88 @@ something longer:
 than send the text. Render `<QuickPrompts>` yourself to place the chips
 elsewhere.
 
+### Building on the composer
+
+`<ChatInput>` is the AgentOS dock: an auto-growing textarea, attach, send and
+stop. `compact` trades the dock for one row — the field with the buttons beside
+it — for a launcher, a sidebar, anywhere narrow; `compactInput` on `<AgnoChat>`
+and `<ChatWindow>` switches their built-in composer to it:
+
+```tsx
+<AgnoChat baseUrl="http://localhost:7777" mode="launcher" compactInput />
+<ChatInput compact placeholder="Send a message" />
+```
+
+When a product needs more from the composer — an @mention menu, context
+chips, a highlighted draft — it opens up rather than being replaced:
+
+```tsx
+<ChatInput
+  value={draft}                           // own the draft
+  onValueChange={setDraft}
+  textareaRef={inputRef}
+  textareaProps={{                        // reach the textarea itself
+    onKeyDown: (e) => { if (menu.handles(e)) e.preventDefault() },  // claims the key
+    role: 'combobox',
+    'aria-expanded': menuOpen,
+  }}
+  renderTextarea={(props) => <HighlightedTextarea {...props} />}  // or swap it
+  above={menuOpen && <MentionMenu />}     // inside the dock, over the field
+  below={contextError && <p>{contextError}</p>}
+  allowFiles
+  accept=".md,.py,image/*"                // dropped files obey this too
+  maxFiles={8}
+  maxFileSize={20 * 1024 * 1024}
+  onSend={async (text, files) => {
+    const ok = await prepare(text)
+    if (!ok) return false                 // keep the draft
+    chat.sendMessage(text, files ? { files } : undefined)
+  }}
+/>
+```
+
+A key handler in `textareaProps` runs before Enter-to-send; `preventDefault()`
+there claims the key. Files can be dropped anywhere on the dock; the first
+reason one was refused shows under the attachment chips (`admitFiles` is the
+same check, exported).
+
+### Links
+
+Every link the components render — in an answer, on a `[1]` chip, on a source
+card — is a plain `<a target="_blank">`. Inside an app with a router, hand the
+provider a `linkComponent` and in-app URLs stay client-side:
+
+```tsx
+<ChatProvider linkComponent={DocsLink}>…</ChatProvider>
+<AgnoChat linkComponent={DocsLink} />
+```
+
+It receives `href`, `children` and the anchor attributes the component would
+have set, and decides how to navigate — nothing sets `target` for it, so a
+link opens in the same page unless the component says otherwise. The usual
+shape routes your own origin through the router and pops everything else out:
+
+```tsx
+import { Link } from 'react-router-dom'
+import type { LinkComponent } from '@agno-hq/chat-react/chat'
+
+const DocsLink: LinkComponent = ({ href, children, ...rest }) => {
+  const url = new URL(href, window.location.href)
+  return url.origin === window.location.origin ? (
+    <Link to={url.pathname + url.search + url.hash} {...rest}>
+      {children}
+    </Link>
+  ) : (
+    <a href={href} target="_blank" rel="noreferrer noopener" {...rest}>
+      {children}
+    </a>
+  )
+}
+```
+
+Sources with no URL — retrieved knowledge-base chunks — are never links; their
+`[1]` chip points at the card below the answer.
+
 ### Run events
 
 Every run keeps the events that produced it on its own message

package/dist/chat/index.cjs

@@ -1,314 +1,334 @@
 'use client';
 'use strict';
 
-var chunkERCKKOF4_cjs = require('../chunk-ERCKKOF4.cjs');
-require('../chunk-ROFIOWGX.cjs');
+var chunkJEPFGKHH_cjs = require('../chunk-JEPFGKHH.cjs');
+require('../chunk-55HQJGLP.cjs');
 
 
 
 Object.defineProperty(exports, "AgnoChat", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.AgnoChat; }
+  get: function () { return chunkJEPFGKHH_cjs.AgnoChat; }
 });
 Object.defineProperty(exports, "AgnoMark", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.AgnoMark; }
+  get: function () { return chunkJEPFGKHH_cjs.AgnoMark; }
 });
 Object.defineProperty(exports, "ArrowUp", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ArrowUp; }
+  get: function () { return chunkJEPFGKHH_cjs.ArrowUp; }
 });
 Object.defineProperty(exports, "BehindTheScenes", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.BehindTheScenes; }
+  get: function () { return chunkJEPFGKHH_cjs.BehindTheScenes; }
 });
 Object.defineProperty(exports, "BookOpen", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.BookOpen; }
+  get: function () { return chunkJEPFGKHH_cjs.BookOpen; }
 });
 Object.defineProperty(exports, "Box", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Box; }
+  get: function () { return chunkJEPFGKHH_cjs.Box; }
 });
 Object.defineProperty(exports, "Brain", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Brain; }
+  get: function () { return chunkJEPFGKHH_cjs.Brain; }
 });
 Object.defineProperty(exports, "ChatBubble", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ChatBubble; }
+  get: function () { return chunkJEPFGKHH_cjs.ChatBubble; }
 });
 Object.defineProperty(exports, "ChatInput", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ChatInput; }
+  get: function () { return chunkJEPFGKHH_cjs.ChatInput; }
 });
 Object.defineProperty(exports, "ChatLauncher", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ChatLauncher; }
+  get: function () { return chunkJEPFGKHH_cjs.ChatLauncher; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ChatProvider; }
+  get: function () { return chunkJEPFGKHH_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatWindow", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ChatWindow; }
+  get: function () { return chunkJEPFGKHH_cjs.ChatWindow; }
 });
 Object.defineProperty(exports, "Check", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Check; }
+  get: function () { return chunkJEPFGKHH_cjs.Check; }
 });
 Object.defineProperty(exports, "ChevronDown", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ChevronDown; }
+  get: function () { return chunkJEPFGKHH_cjs.ChevronDown; }
 });
 Object.defineProperty(exports, "Citations", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Citations; }
+  get: function () { return chunkJEPFGKHH_cjs.Citations; }
 });
 Object.defineProperty(exports, "Close", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Close; }
+  get: function () { return chunkJEPFGKHH_cjs.Close; }
 });
 Object.defineProperty(exports, "Copy", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Copy; }
+  get: function () { return chunkJEPFGKHH_cjs.Copy; }
 });
 Object.defineProperty(exports, "EntityBadge", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.EntityBadge; }
+  get: function () { return chunkJEPFGKHH_cjs.EntityBadge; }
 });
 Object.defineProperty(exports, "EntitySelector", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.EntitySelector; }
+  get: function () { return chunkJEPFGKHH_cjs.EntitySelector; }
 });
 Object.defineProperty(exports, "EventLog", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.EventLog; }
+  get: function () { return chunkJEPFGKHH_cjs.EventLog; }
 });
 Object.defineProperty(exports, "Favicon", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Favicon; }
+  get: function () { return chunkJEPFGKHH_cjs.Favicon; }
 });
 Object.defineProperty(exports, "FileAudio", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.FileAudio; }
+  get: function () { return chunkJEPFGKHH_cjs.FileAudio; }
 });
 Object.defineProperty(exports, "FileIcon", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.FileIcon; }
+  get: function () { return chunkJEPFGKHH_cjs.FileIcon; }
 });
 Object.defineProperty(exports, "FilePreview", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.FilePreview; }
+  get: function () { return chunkJEPFGKHH_cjs.FilePreview; }
+});
+Object.defineProperty(exports, "FileType", {
+  enumerable: true,
+  get: function () { return chunkJEPFGKHH_cjs.FileType; }
 });
 Object.defineProperty(exports, "FileVideo", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.FileVideo; }
+  get: function () { return chunkJEPFGKHH_cjs.FileVideo; }
 });
 Object.defineProperty(exports, "Followups", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Followups; }
+  get: function () { return chunkJEPFGKHH_cjs.Followups; }
 });
 Object.defineProperty(exports, "Globe", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Globe; }
+  get: function () { return chunkJEPFGKHH_cjs.Globe; }
 });
 Object.defineProperty(exports, "GridLoader", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.GridLoader; }
+  get: function () { return chunkJEPFGKHH_cjs.GridLoader; }
 });
 Object.defineProperty(exports, "HoverPreview", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.HoverPreview; }
+  get: function () { return chunkJEPFGKHH_cjs.HoverPreview; }
 });
 Object.defineProperty(exports, "HumanInput", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.HumanInput; }
+  get: function () { return chunkJEPFGKHH_cjs.HumanInput; }
+});
+Object.defineProperty(exports, "LinkIcon", {
+  enumerable: true,
+  get: function () { return chunkJEPFGKHH_cjs.LinkIcon; }
 });
 Object.defineProperty(exports, "LinkPreviewCard", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.LinkPreviewCard; }
+  get: function () { return chunkJEPFGKHH_cjs.LinkPreviewCard; }
 });
 Object.defineProperty(exports, "Markdown", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Markdown; }
+  get: function () { return chunkJEPFGKHH_cjs.Markdown; }
 });
 Object.defineProperty(exports, "MemberResponses", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.MemberResponses; }
+  get: function () { return chunkJEPFGKHH_cjs.MemberResponses; }
 });
 Object.defineProperty(exports, "Memory", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Memory; }
+  get: function () { return chunkJEPFGKHH_cjs.Memory; }
 });
 Object.defineProperty(exports, "Message", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Message; }
+  get: function () { return chunkJEPFGKHH_cjs.Message; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.MessageList; }
+  get: function () { return chunkJEPFGKHH_cjs.MessageList; }
 });
 Object.defineProperty(exports, "Multimedia", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Multimedia; }
+  get: function () { return chunkJEPFGKHH_cjs.Multimedia; }
 });
 Object.defineProperty(exports, "Paperclip", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Paperclip; }
+  get: function () { return chunkJEPFGKHH_cjs.Paperclip; }
 });
 Object.defineProperty(exports, "Plus", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Plus; }
+  get: function () { return chunkJEPFGKHH_cjs.Plus; }
 });
 Object.defineProperty(exports, "Pulse", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Pulse; }
+  get: function () { return chunkJEPFGKHH_cjs.Pulse; }
 });
 Object.defineProperty(exports, "QuickPrompts", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.QuickPrompts; }
+  get: function () { return chunkJEPFGKHH_cjs.QuickPrompts; }
 });
 Object.defineProperty(exports, "Reasoning", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Reasoning; }
+  get: function () { return chunkJEPFGKHH_cjs.Reasoning; }
 });
 Object.defineProperty(exports, "Rerun", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Rerun; }
+  get: function () { return chunkJEPFGKHH_cjs.Rerun; }
 });
 Object.defineProperty(exports, "SessionList", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.SessionList; }
+  get: function () { return chunkJEPFGKHH_cjs.SessionList; }
 });
 Object.defineProperty(exports, "SourceCard", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.SourceCard; }
+  get: function () { return chunkJEPFGKHH_cjs.SourceCard; }
 });
 Object.defineProperty(exports, "SourcesProvider", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.SourcesProvider; }
+  get: function () { return chunkJEPFGKHH_cjs.SourcesProvider; }
 });
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Spinner; }
+  get: function () { return chunkJEPFGKHH_cjs.Spinner; }
 });
 Object.defineProperty(exports, "StatusIndicator", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.StatusIndicator; }
+  get: function () { return chunkJEPFGKHH_cjs.StatusIndicator; }
 });
 Object.defineProperty(exports, "Stop", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Stop; }
+  get: function () { return chunkJEPFGKHH_cjs.Stop; }
 });
 Object.defineProperty(exports, "TeamGlyph", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.TeamGlyph; }
+  get: function () { return chunkJEPFGKHH_cjs.TeamGlyph; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.ToolCalls; }
+  get: function () { return chunkJEPFGKHH_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "Trash", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Trash; }
+  get: function () { return chunkJEPFGKHH_cjs.Trash; }
 });
 Object.defineProperty(exports, "WorkflowSteps", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.WorkflowSteps; }
+  get: function () { return chunkJEPFGKHH_cjs.WorkflowSteps; }
 });
 Object.defineProperty(exports, "Wrench", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.Wrench; }
+  get: function () { return chunkJEPFGKHH_cjs.Wrench; }
+});
+Object.defineProperty(exports, "admitFiles", {
+  enumerable: true,
+  get: function () { return chunkJEPFGKHH_cjs.admitFiles; }
 });
 Object.defineProperty(exports, "behindTheScenesItems", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.behindTheScenesItems; }
+  get: function () { return chunkJEPFGKHH_cjs.behindTheScenesItems; }
 });
 Object.defineProperty(exports, "behindTheScenesLabel", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.behindTheScenesLabel; }
+  get: function () { return chunkJEPFGKHH_cjs.behindTheScenesLabel; }
 });
 Object.defineProperty(exports, "collectSources", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.collectSources; }
+  get: function () { return chunkJEPFGKHH_cjs.collectSources; }
 });
 Object.defineProperty(exports, "displayUrl", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.displayUrl; }
+  get: function () { return chunkJEPFGKHH_cjs.displayUrl; }
 });
 Object.defineProperty(exports, "faviconUrl", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.faviconUrl; }
+  get: function () { return chunkJEPFGKHH_cjs.faviconUrl; }
+});
+Object.defineProperty(exports, "fileAccepted", {
+  enumerable: true,
+  get: function () { return chunkJEPFGKHH_cjs.fileAccepted; }
 });
 Object.defineProperty(exports, "getProviderIcon", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.getProviderIcon; }
+  get: function () { return chunkJEPFGKHH_cjs.getProviderIcon; }
 });
 Object.defineProperty(exports, "hasBehindTheScenes", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.hasBehindTheScenes; }
+  get: function () { return chunkJEPFGKHH_cjs.hasBehindTheScenes; }
 });
 Object.defineProperty(exports, "linkCitations", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.linkCitations; }
+  get: function () { return chunkJEPFGKHH_cjs.linkCitations; }
 });
 Object.defineProperty(exports, "normalizeFollowups", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.normalizeFollowups; }
+  get: function () { return chunkJEPFGKHH_cjs.normalizeFollowups; }
 });
 Object.defineProperty(exports, "quickPromptLabel", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.quickPromptLabel; }
+  get: function () { return chunkJEPFGKHH_cjs.quickPromptLabel; }
 });
 Object.defineProperty(exports, "quickPromptText", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.quickPromptText; }
+  get: function () { return chunkJEPFGKHH_cjs.quickPromptText; }
 });
 Object.defineProperty(exports, "sourceHost", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.sourceHost; }
+  get: function () { return chunkJEPFGKHH_cjs.sourceHost; }
 });
 Object.defineProperty(exports, "sourcesFromMarkdown", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.sourcesFromMarkdown; }
+  get: function () { return chunkJEPFGKHH_cjs.sourcesFromMarkdown; }
 });
 Object.defineProperty(exports, "useAgnoChat", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useAgnoChat; }
+  get: function () { return chunkJEPFGKHH_cjs.useAgnoChat; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useChatContext; }
+  get: function () { return chunkJEPFGKHH_cjs.useChatContext; }
+});
+Object.defineProperty(exports, "useLinkComponent", {
+  enumerable: true,
+  get: function () { return chunkJEPFGKHH_cjs.useLinkComponent; }
 });
 Object.defineProperty(exports, "useLinkPreview", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useLinkPreview; }
+  get: function () { return chunkJEPFGKHH_cjs.useLinkPreview; }
 });
 Object.defineProperty(exports, "useOptionalChatContext", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useOptionalChatContext; }
+  get: function () { return chunkJEPFGKHH_cjs.useOptionalChatContext; }
 });
 Object.defineProperty(exports, "useResolvedChat", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useResolvedChat; }
+  get: function () { return chunkJEPFGKHH_cjs.useResolvedChat; }
 });
 Object.defineProperty(exports, "useResolvedClassNames", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useResolvedClassNames; }
+  get: function () { return chunkJEPFGKHH_cjs.useResolvedClassNames; }
 });
 Object.defineProperty(exports, "useSources", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.useSources; }
+  get: function () { return chunkJEPFGKHH_cjs.useSources; }
 });
 Object.defineProperty(exports, "withoutSourcesLine", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.withoutSourcesLine; }
+  get: function () { return chunkJEPFGKHH_cjs.withoutSourcesLine; }
 });
 Object.defineProperty(exports, "writeClipboard", {
   enumerable: true,
-  get: function () { return chunkERCKKOF4_cjs.writeClipboard; }
+  get: function () { return chunkJEPFGKHH_cjs.writeClipboard; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map