@adecore/agents-react 0.37.2 → 0.37.3

package/src/chat/ui/rows/MessageRows.tsx

@@ -18,7 +18,10 @@ import { useChatScope } from '../../../scope';
 import { splitQuote } from '../../quote';
 import { jumpToTimelineItem } from '../../timeline-scroll';
 import { useProviders } from '../../../state/providers';
-import { ChatReferenceChip } from '../ChatReferenceChip';
+import { referenceTokens } from '../../chat-references';
+import { presentReferences } from '../../mentions';
+import { ReferenceChip } from '../ReferenceChip';
+import { ReferenceLookupContext } from '../reference-lookup';
 import { ImageThumb } from '../ImageView';
 import { Markdown, MessageMarkdown, ReplyMarkdown } from '../Markdown';
 import { FadingWords } from '../FadingWords';
@@ -34,6 +37,8 @@ import { useOpenForFind } from '../find-reveal';
 import { ReplyContext, UiReplyNavigationContext } from '../reply-context';
 import { UiReply } from '../intelligent-ui/UiReply';
 import { useHostAttachmentUrl, useHostChatPlace, useHostReplyAuthor, useHostStreaming } from '../../../host-hooks';
+import { copySelectionWithChips } from '../chip-clipboard';
+import { useReferenceLookup } from '../thread-references';
 
 // A long prompt folds so the answer stays in view; the reader can open it.
 const USER_FOLD_LINES = 8;
@@ -89,9 +94,14 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
     const [open, setOpen] = useState(false);
     const long = item.text.split('\n').length > USER_FOLD_LINES || item.text.length > USER_FOLD_CHARS;
     const attachments = item.attachments ?? [];
-    const chats = item.chats ?? [];
     const [missing, setMissing] = useState(false);
     const { keyOf } = useChatScope();
+    const lookup = useReferenceLookup(chatId);
+    const referenced = [...(item.chats ?? []), ...(item.references ?? [])];
+    const references = referenceTokens(referenced, lookup.items);
+    // A chat attached before `#` existed, or a view renamed or gone since, is not in the text; it stands beside it.
+    const placed = presentReferences(item.text, referenced, references);
+    const beside = referenced.filter((id) => !placed.includes(id));
     useOpenForFind(item.id, 'text', setOpen);
     // A quote only leads somewhere when the message still opens with the blockquote it was sent with.
     const quoted = item.quoteSource === undefined ? null : splitQuote(item.text);
@@ -104,65 +114,69 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
         }
     }
     return (
-        <div data-find-item={item.id} className="flex flex-col items-end">
-            <MessageHeading>{t('rows.user.heading')}</MessageHeading>
-            {attachments.length > 0 && (
-                <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
-                    {attachments.map((attachment) =>
-                        isImageAttachment(attachment.mime) ? (
-                            <AttachmentThumb key={attachment.id} chatId={chatId} attachment={attachment} />
-                        ) : (
-                            <AttachmentLink key={attachment.id} chatId={chatId} attachment={attachment} />
-                        )
-                    )}
-                </div>
-            )}
-            {chats.length > 0 && (
-                <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
-                    {chats.map((id) => (
-                        <ChatReferenceChip key={id} chatId={id} />
-                    ))}
-                </div>
-            )}
-            {item.uiChoice !== undefined && <ChoiceLine chatId={chatId} choice={item.uiChoice} />}
-            {item.text !== '' && (
-                <div className="relative max-w-[80%] rounded-2xl bg-surface-active px-3.5 py-2.5 text-sm wrap-anywhere text-text select-text">
-                    <div data-find-field="text" className={clsx(long && !open && FOLD)}>
-                        {quoted !== null && source !== undefined ? (
-                            <>
-                                {/* A div, since the quote is block markdown and a button holds none. */}
-                                <Tooltip label={t('composer.quote.goToSource')}>
-                                    <div
-                                        role="button"
-                                        tabIndex={0}
-                                        className="mb-2 cursor-pointer rounded-sm border-l-2 border-border-strong pl-2.5 text-text-muted hover:bg-text/5 hover:text-text focus-visible:outline-2 focus-visible:outline-accent"
-                                        onClick={goToSource}
-                                        onKeyDown={(e) => {
-                                            if (e.key === 'Enter' || e.key === ' ') {
-                                                e.preventDefault();
-                                                goToSource();
-                                            }
-                                        }}
-                                    >
-                                        <MessageMarkdown text={quoted.quote} />
-                                    </div>
-                                </Tooltip>
-                                {missing && <div className="mb-2 text-xs text-text-faint">{t('rows.user.quoteGone')}</div>}
-                                {quoted.rest !== '' && <MessageMarkdown text={quoted.rest} mentions={item.mentions} skills={item.skills} />}
-                            </>
-                        ) : (
-                            <MessageMarkdown text={item.text} mentions={item.mentions} skills={item.skills} />
+        <ReferenceLookupContext value={lookup}>
+            <div data-find-item={item.id} className="flex flex-col items-end" onCopy={(e) => copySelectionWithChips(e.nativeEvent)}>
+                <MessageHeading>{t('rows.user.heading')}</MessageHeading>
+                {attachments.length > 0 && (
+                    <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
+                        {attachments.map((attachment) =>
+                            isImageAttachment(attachment.mime) ? (
+                                <AttachmentThumb key={attachment.id} chatId={chatId} attachment={attachment} />
+                            ) : (
+                                <AttachmentLink key={attachment.id} chatId={chatId} attachment={attachment} />
+                            )
                         )}
                     </div>
-                    {long && (
-                        <button className="mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text" onClick={() => setOpen((o) => !o)}>
-                            <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />{' '}
-                            {open ? t('rows.user.showLess') : t('rows.user.showAll')}
-                        </button>
-                    )}
-                </div>
-            )}
-        </div>
+                )}
+                {beside.length > 0 && (
+                    <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
+                        {beside.map((id) => (
+                            <ReferenceChip key={id} id={id} />
+                        ))}
+                    </div>
+                )}
+                {item.uiChoice !== undefined && <ChoiceLine chatId={chatId} choice={item.uiChoice} />}
+                {item.text !== '' && (
+                    <div className="relative max-w-[80%] rounded-2xl bg-surface-active px-3.5 py-2.5 text-sm wrap-anywhere text-text select-text">
+                        <div data-find-field="text" className={clsx(long && !open && FOLD)}>
+                            {quoted !== null && source !== undefined ? (
+                                <>
+                                    {/* A div, since the quote is block markdown and a button holds none. */}
+                                    <Tooltip label={t('composer.quote.goToSource')}>
+                                        <div
+                                            role="button"
+                                            tabIndex={0}
+                                            className="mb-2 cursor-pointer rounded-sm border-l-2 border-border-strong pl-2.5 text-text-muted hover:bg-text/5 hover:text-text focus-visible:outline-2 focus-visible:outline-accent"
+                                            onClick={goToSource}
+                                            onKeyDown={(e) => {
+                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                    e.preventDefault();
+                                                    goToSource();
+                                                }
+                                            }}
+                                        >
+                                            <MessageMarkdown text={quoted.quote} />
+                                        </div>
+                                    </Tooltip>
+                                    {missing && <div className="mb-2 text-xs text-text-faint">{t('rows.user.quoteGone')}</div>}
+                                    {quoted.rest !== '' && (
+                                        <MessageMarkdown text={quoted.rest} mentions={item.mentions} skills={item.skills} references={references} />
+                                    )}
+                                </>
+                            ) : (
+                                <MessageMarkdown text={item.text} mentions={item.mentions} skills={item.skills} references={references} />
+                            )}
+                        </div>
+                        {long && (
+                            <button className="mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text" onClick={() => setOpen((o) => !o)}>
+                                <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />{' '}
+                                {open ? t('rows.user.showLess') : t('rows.user.showAll')}
+                            </button>
+                        )}
+                    </div>
+                )}
+            </div>
+        </ReferenceLookupContext>
     );
 }
 
@@ -262,10 +276,12 @@ function Writing() {
  * A reply. A word at a time, it follows the text as it arrives. A block at a time, the blocks that
  * closed are drawn and fade in as they land, with "Writing…" where the next one will stand. Whole,
  * it says it is being written and fades in once it is done. Only a row that saw the reply being
- * written fades anything: an old reply scrolled back into view just stands there.
+ * written fades anything: an old reply scrolled back into view just stands there. A `#Name` it
+ * spells for a view, node or chat of the project is a chip that opens it.
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
     const item = useCurrentItem(chatId, derived);
+    const lookup = useReferenceLookup(chatId);
     const scope = useChatScope();
     const context = useContext(ReplyContext);
     const reply = context === null && !item.parentToolUseId ? { scopeId: scope.id, chatId, itemId: item.id, streaming: item.streaming } : undefined;
@@ -295,11 +311,13 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
     if (mode === 'blocks') {
         const settled = item.streaming ? settledBlocksText(item.text) : item.text;
         return (
-            <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
+            <div data-find-item={item.id} className="-mx-1 px-1 pb-2" onCopy={(e) => copySelectionWithChips(e.nativeEvent)}>
                 <ReplyHeading chatId={chatId} />
                 {settled !== '' && (
                     <div data-find-field="text" data-quote-answer className="contents">
-                        <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} reply={reply} />
+                        <ReferenceLookupContext value={lookup}>
+                            <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} reply={reply} />
+                        </ReferenceLookupContext>
                     </div>
                 )}
                 {item.streaming && <Writing />}
@@ -315,10 +333,16 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
         );
     }
     return (
-        <div data-find-item={item.id} className={clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS)}>
+        <div
+            data-find-item={item.id}
+            className={clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS)}
+            onCopy={(e) => copySelectionWithChips(e.nativeEvent)}
+        >
             <ReplyHeading chatId={chatId} />
             <div data-find-field="text" data-quote-answer className="contents">
-                <ReplyMarkdown text={reveal.text} streaming={reveal.active} reply={reply} />
+                <ReferenceLookupContext value={lookup}>
+                    <ReplyMarkdown text={reveal.text} streaming={reveal.active} reply={reply} />
+                </ReferenceLookupContext>
             </div>
             {live && item.text === '' && <span className="inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" />}
         </div>

package/src/chat/ui/thread-references.ts

@@ -0,0 +1,47 @@
+import type { ChatItem } from '@adecore/agent-contracts';
+import { useChatHost } from '../../host';
+import { useHostReferables } from '../../host-hooks';
+import { useChatScope } from '../../scope';
+import { useChatRow } from '../../state/chats';
+import type { ReferenceLookup } from './reference-lookup';
+
+const referencedOf = new WeakMap<Record<string, ChatItem>, string>();
+
+/*
+ * The ids a person pointed at with `#` in a thread, one per line. A string, so the selector that reads
+ * it answers the same value until a message with another one comes; the structure a streamed word
+ * leaves alone is what it is cached on.
+ */
+export function threadReferencedKey(structure: Record<string, ChatItem> | undefined): string {
+    if (structure === undefined) {
+        return '';
+    }
+    const cached = referencedOf.get(structure);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const ids = new Set<string>();
+    for (const item of Object.values(structure)) {
+        if (item.kind === 'user') {
+            for (const id of [...(item.chats ?? []), ...(item.references ?? [])]) {
+                ids.add(id);
+            }
+        }
+    }
+    const key = [...ids].join('\n');
+    referencedOf.set(structure, key);
+    return key;
+}
+
+/* What the views, nodes and chats of a thread stand for now, and how one opens, for the rows that draw chips. */
+export function useReferenceLookup(chatId: string): ReferenceLookup {
+    const { id: scopeId } = useChatScope();
+    const { openReference } = useChatHost();
+    const referables = useHostReferables(scopeId, chatId);
+    const key = useChatRow(chatId, (chat) => threadReferencedKey(chat?.structure));
+    return {
+        items: referables.items,
+        open: openReference ? (id: string) => openReference(scopeId, id) : null,
+        referenced: key === '' ? [] : key.split('\n')
+    };
+}

package/src/host-hooks.ts

@@ -6,6 +6,7 @@
  * key, so they never change under a mounted view; only these wrappers go uncompiled for it.
  */
 import type { ProviderPlatform } from '@adecore/agent-contracts';
+import { referablesOfChats, type Referables } from './chat/chat-references';
 import { useChatHost, type ChatHost, type CommandLook } from './host';
 
 export function useHostCodeMode(): 'light' | 'dark' {
@@ -48,6 +49,14 @@ export function useHostReferableChats(): ReturnType<ChatHost['useReferableChats'
     return useChatHost().useReferableChats();
 }
 
+const useReferablesFromChats = (_scopeId: string, _chatId: string): Referables => referablesOfChats(useHostReferableChats());
+
+/* A host without views of its own offers its chats. */
+export function useHostReferables(scopeId: string, chatId: string): Referables {
+    const useReferables = useChatHost().useReferables ?? useReferablesFromChats;
+    return useReferables(scopeId, chatId);
+}
+
 export function useHostLoginBlocked(...args: Parameters<ChatHost['useLoginBlocked']>): ReturnType<ChatHost['useLoginBlocked']> {
     return useChatHost().useLoginBlocked(...args);
 }

package/src/host.ts

@@ -18,6 +18,7 @@ import type {
     ProviderPlatform
 } from '@adecore/agent-contracts';
 import { isApplePlatform } from '@adecore/ui';
+import type { Referables } from './chat/chat-references';
 import type { TimelineRow } from './chat/logic/timeline';
 import type { FindReveal } from './chat/ui/find-reveal';
 import type { PromptAction } from './prompts/logic/prompts';
@@ -379,8 +380,12 @@ export interface ChatHost {
         render(prompt: HostPrompt, props: PromptViewProps): ReactNode;
         answer(prompt: HostPrompt, action: PromptAction): Promise<void>;
     };
-    /* Other chats a message may point at with `@`, beside the files. */
+    /* Other chats a message may point at with `#`, for a host that has no views; `useReferables` takes over where it is given. */
     useReferableChats(): ReadonlyArray<{ id: string; title: string }>;
+    /* The views and nodes a message of this chat may point at with `#`, under the names they have right now. */
+    useReferables?(scopeId: string, chatId: string): Referables;
+    /* Opens a view or zooms to a node a message points at; left out, a chip opens nothing. */
+    openReference?(scopeId: string, id: string): void;
     /* Opens the CLI's own login for an account, somewhere the app can run a command; null offers none. */
     openLogin: ((scopeId: string, kind: AgentKind, accountId: string, name: string) => Promise<void>) | null;
     /* Why a login cannot start from here right now, or null when it can. */

package/src/locales/en/agent-chat.ts

@@ -16,10 +16,9 @@ export default {
         unreadable: 'Could not read {{name}}',
         unreadableThumbnail: 'Could not read the thumbnail'
     },
-    chatReference: {
-        gone: 'Chat not in this project',
-        untitled: 'Untitled chat',
-        remove: 'Remove {{title}}'
+    references: {
+        gone: 'Not in this project',
+        untitled: 'Untitled'
     },
     fork: {
         refusal: {
@@ -304,7 +303,8 @@ export default {
         menu: {
             commands: 'Commands',
             skills: 'Skills',
-            mentions: 'Mentions'
+            mentions: 'Mentions',
+            references: 'Views and nodes'
         },
         held: {
             question: 'Question waiting. Opens when you pause typing.',
@@ -349,10 +349,27 @@ export default {
         mentions: {
             here: 'Files in this folder',
             files: 'Files',
-            chats: 'Chats in this project',
-            noMatch: 'No files or chats match',
+            noMatch: 'No files match',
             empty: 'No files here'
         },
+        references: {
+            canvas: 'On this canvas',
+            views: 'Views',
+            noMatch: 'No view or node matches',
+            kinds: {
+                canvas: 'canvas',
+                chat: 'chat',
+                terminal: 'terminal',
+                note: 'note',
+                text: 'text',
+                drawing: 'drawing',
+                diagram: 'diagram',
+                browser: 'browser',
+                device: 'device',
+                file: 'file',
+                database: 'table'
+            }
+        },
         queue: {
             attachments_one: '{{count}} attachment',
             attachments_other: '{{count}} attachments',

package/src/locales/nl/agent-chat.ts

@@ -16,10 +16,9 @@ export default {
         unreadable: 'Kon {{name}} niet lezen',
         unreadableThumbnail: 'Kon de miniatuur niet lezen'
     },
-    chatReference: {
-        gone: 'Chat niet in dit project',
-        untitled: 'Naamloze chat',
-        remove: '{{title}} verwijderen'
+    references: {
+        gone: 'Niet in dit project',
+        untitled: 'Naamloos'
     },
     fork: {
         refusal: {
@@ -304,7 +303,8 @@ export default {
         menu: {
             commands: "Commando's",
             skills: 'Skills',
-            mentions: 'Vermeldingen'
+            mentions: 'Vermeldingen',
+            references: 'Views en nodes'
         },
         held: {
             question: 'Er wacht een vraag. Opent zodra je stopt met typen.',
@@ -349,10 +349,27 @@ export default {
         mentions: {
             here: 'Bestanden in deze map',
             files: 'Bestanden',
-            chats: 'Chats in dit project',
-            noMatch: 'Geen bestanden of chats gevonden',
+            noMatch: 'Geen bestanden gevonden',
             empty: 'Hier staan geen bestanden'
         },
+        references: {
+            canvas: 'Op dit canvas',
+            views: 'Views',
+            noMatch: 'Geen view of node gevonden',
+            kinds: {
+                canvas: 'canvas',
+                chat: 'chat',
+                terminal: 'terminal',
+                note: 'notitie',
+                text: 'tekst',
+                drawing: 'tekening',
+                diagram: 'diagram',
+                browser: 'browser',
+                device: 'apparaat',
+                file: 'bestand',
+                database: 'tabel'
+            }
+        },
         queue: {
             attachments_one: '{{count}} bijlage',
             attachments_other: '{{count}} bijlagen',

package/dist/chat/ui/ChatReferenceChip.d.ts

@@ -1,4 +0,0 @@
-export declare function ChatReferenceChip({ chatId, onRemove }: {
-    chatId: string;
-    onRemove?: () => void;
-}): import("react").JSX.Element;

package/dist/chat/ui/ChatReferenceChip.js

@@ -1,110 +0,0 @@
-import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-import { MessageSquare, X } from 'lucide-react';
-import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips.js';
-import { Icon, Tooltip } from '@adecore/ui';
-import { useHostReferableChats } from '../../host-hooks.js';
-/* A chat attached to a message, under the title it has now rather than the one it had when it was attached. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ChatReferenceChip(t0) {
-  const $ = _c(19);
-  const {
-    chatId,
-    onRemove
-  } = t0;
-  const {
-    t
-  } = useTranslation("agent-chat");
-  const t1 = useHostReferableChats();
-  let t2;
-  if ($[0] !== chatId || $[1] !== t1) {
-    let t3;
-    if ($[3] !== chatId) {
-      t3 = candidate => candidate.id === chatId;
-      $[3] = chatId;
-      $[4] = t3;
-    } else {
-      t3 = $[4];
-    }
-    t2 = t1.find(t3);
-    $[0] = chatId;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const chat = t2;
-  let t3;
-  if ($[5] !== chat || $[6] !== t) {
-    t3 = chat === undefined ? t("chatReference.gone") : chat.title || t("chatReference.untitled");
-    $[5] = chat;
-    $[6] = t;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  const title = t3;
-  let t4;
-  let t5;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = clsx(MENTION_TONE, CHIP_IN_MESSAGE);
-    t5 = /*#__PURE__*/_jsx(Icon, {
-      icon: MessageSquare,
-      size: 12,
-      className: "shrink-0"
-    });
-    $[8] = t4;
-    $[9] = t5;
-  } else {
-    t4 = $[8];
-    t5 = $[9];
-  }
-  let t6;
-  if ($[10] !== title) {
-    t6 = /*#__PURE__*/_jsx("span", {
-      className: "truncate",
-      children: title
-    });
-    $[10] = title;
-    $[11] = t6;
-  } else {
-    t6 = $[11];
-  }
-  let t7;
-  if ($[12] !== onRemove || $[13] !== t || $[14] !== title) {
-    t7 = onRemove && /*#__PURE__*/_jsx(Tooltip, {
-      label: t("chatReference.remove", {
-        title
-      }),
-      name: true,
-      children: /*#__PURE__*/_jsx("button", {
-        className: "-mr-0.5 shrink-0 rounded-sm opacity-70 hover:opacity-100",
-        onClick: onRemove,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: X,
-          size: 12
-        })
-      })
-    });
-    $[12] = onRemove;
-    $[13] = t;
-    $[14] = title;
-    $[15] = t7;
-  } else {
-    t7 = $[15];
-  }
-  let t8;
-  if ($[16] !== t6 || $[17] !== t7) {
-    t8 = /*#__PURE__*/_jsxs("span", {
-      className: t4,
-      children: [t5, t6, t7]
-    });
-    $[16] = t6;
-    $[17] = t7;
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
-  return t8;
-}

package/src/chat/ui/ChatReferenceChip.tsx

@@ -1,26 +0,0 @@
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-import { MessageSquare, X } from 'lucide-react';
-import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips';
-import { Icon, Tooltip } from '@adecore/ui';
-import { useHostReferableChats } from '../../host-hooks';
-
-/* A chat attached to a message, under the title it has now rather than the one it had when it was attached. */
-export function ChatReferenceChip({ chatId, onRemove }: { chatId: string; onRemove?: () => void }) {
-    const { t } = useTranslation('agent-chat');
-    const chat = useHostReferableChats().find((candidate) => candidate.id === chatId);
-    const title = chat === undefined ? t('chatReference.gone') : chat.title || t('chatReference.untitled');
-    return (
-        <span className={clsx(MENTION_TONE, CHIP_IN_MESSAGE)}>
-            <Icon icon={MessageSquare} size={12} className="shrink-0" />
-            <span className="truncate">{title}</span>
-            {onRemove && (
-                <Tooltip label={t('chatReference.remove', { title })} name>
-                    <button className="-mr-0.5 shrink-0 rounded-sm opacity-70 hover:opacity-100" onClick={onRemove}>
-                        <Icon icon={X} size={12} />
-                    </button>
-                </Tooltip>
-            )}
-        </span>
-    );
-}