@dxos/plugin-assistant 0.8.4-main.67995b8 → 0.8.4-main.f5c0578

package/src/components/ChatThread/ChatMessage.tsx

@@ -2,13 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, type FC, type PropsWithChildren } from 'react';
+import React, { type FC, Fragment, type PropsWithChildren, useMemo } from 'react';
 
 import { type Tool } from '@dxos/ai';
-import { Surface } from '@dxos/app-framework';
+import { ErrorBoundary, Surface } from '@dxos/app-framework';
+import { resolveRef } from '@dxos/client';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
+import { DXN, DXN_ECHO_REGEXP } from '@dxos/keys';
+import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { Button, Icon, IconButton, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Button, IconButton, Link, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import {
   MarkdownViewer,
   ToggleContainer as NativeToggleContainer,
@@ -18,35 +22,39 @@ import { mx } from '@dxos/react-ui-theme';
 import { type ContentBlock, type DataType } from '@dxos/schema';
 import { safeParseJson } from '@dxos/util';
 
-import { Json, ToolBlock, isToolMessage } from './ToolBlock';
-import { type ChatProcessor } from '../../hooks';
 import { meta } from '../../meta';
 import { type ChatEvent } from '../Chat';
-import { ToolboxContainer } from '../Toolbox';
+import { Toolbox } from '../Toolbox';
+
+import { ObjectLink } from './Link';
+import { Json, ToolBlock, isToolMessage } from './ToolBlock';
+
+const panelClasses = 'flex flex-col is-full bg-activeSurface rounded-sm';
+const marginClasses = 'pie-4 pis-4';
+const paddingClasses = 'pis-2 pie-2 pbs-0.5 pbe-0.5';
 
 export type ChatMessageProps = ThemedClassName<{
   debug?: boolean;
   space?: Space;
   message: DataType.Message;
-  // TODO(burdon): Move to context.
-  processor?: ChatProcessor;
   tools?: Tool[];
   onEvent?: (event: ChatEvent) => void;
+  onDelete?: () => void;
 }>;
 
-export const ChatMessage = ({ classNames, debug, space, message, processor, tools, onEvent }: ChatMessageProps) => {
+export const ChatMessage = ({ classNames, debug, space, message, tools, onEvent, onDelete }: ChatMessageProps) => {
   const { t } = useTranslation(meta.id);
   const {
     sender: { role },
     blocks,
   } = message;
 
-  // TODO(burdon): Restructure types to make check unnecessary.
+  // TODO(burdon): Consolidate tools upstream?
   if (isToolMessage(message)) {
     return (
-      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
+      <MessageItem classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
         <ToolBlock classNames={panelClasses} message={message} tools={tools} />
-      </MessageContainer>
+      </MessageItem>
     );
   }
 
@@ -64,16 +72,18 @@ export const ChatMessage = ({ classNames, debug, space, message, processor, tool
           return null;
         }
 
-        const Component: BlockComponent = components[block._tag] ?? components.default!;
+        const Component: ContentBlockComponent = components[block._tag] ?? components.default!;
         if (!Component) {
           return null;
         }
 
         return (
           <Fragment key={idx}>
-            <MessageContainer classNames={classNames} user={block._tag === 'text' && role === 'user'}>
-              <Component space={space} processor={processor} block={block} onEvent={onEvent} />
-            </MessageContainer>
+            <MessageItem classNames={classNames} user={block._tag === 'text' && role === 'user'}>
+              <ErrorBoundary data={block}>
+                <Component space={space} block={block} onEvent={onEvent} />
+              </ErrorBoundary>
+            </MessageItem>
             {debug && (
               <div className={mx('flex justify-end text-subdued', marginClasses)}>
                 <pre className='text-xs'>{JSON.stringify({ block: block._tag })}</pre>
@@ -82,64 +92,122 @@ export const ChatMessage = ({ classNames, debug, space, message, processor, tool
           </Fragment>
         );
       })}
-      <div className={mx('flex justify-end pbs-2 pbe-2 opacity-50 hover:opacity-100', marginClasses)}>
-        <IconButton
-          classNames='animate-[fadeIn_0.5s]'
-          icon='ph--trash--regular'
-          iconOnly
-          label={t('button delete message')}
-          onClick={() => onEvent?.({ type: 'delete', id: message.id })}
-        />
-      </div>
+
+      {onDelete && (
+        <div className={mx('flex justify-end pbs-2 pbe-2 opacity-50 hover:opacity-100', marginClasses)}>
+          <IconButton
+            classNames='animate-[fadeIn_0.5s]'
+            icon='ph--trash--regular'
+            iconOnly
+            label={t('button delete message')}
+            onClick={() => onDelete()}
+          />
+        </div>
+      )}
     </>
   );
 };
 
-type BlockComponentProps = {
+type ContentBlockProps = {
   space?: Space;
   block: ContentBlock.Any;
-  /** @deprecated Replace with context */
-  processor?: ChatProcessor;
   onEvent?: (event: ChatEvent) => void;
 };
 
-type BlockComponent = FC<BlockComponentProps>;
+type ContentBlockComponent = FC<ContentBlockProps>;
 
-const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComponent>> = {
+/**
+ * Components for rendering content blocks.
+ */
+const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', ContentBlockComponent>> = {
   //
   // Text
   //
-  ['text' as const]: ({ block }) => {
+  ['text' as const]: ({ space, block }) => {
     invariant(block._tag === 'text');
-    // const [open, setOpen] = useState(block.disposition === 'cot' && block.pending);
-    const title = block.disposition ? titles[block.disposition] : undefined;
-    if (!title) {
-      return <MarkdownViewer content={block.text} />;
-    }
+    return (
+      <MarkdownViewer
+        content={preprocessTextContent(block.text)}
+        components={{
+          a: ({ node: { properties }, children, href, ...props }) => {
+            if (space && typeof properties?.href === 'string' && properties?.href?.startsWith('dxn')) {
+              try {
+                // TODO(burdon): Check valid length (since serialized).
+                const dxn = DXN.parse(properties.href);
+                return <ObjectLink space={space} dxn={dxn} />;
+              } catch {}
+            }
 
-    // TOOD(burdon): Store last time user opened/closed COT.
-    // Autoclose when streaming ends.
-    // useEffect(() => {
-    //   if (block.disposition === 'cot' && !block.pending) {
-    //     setOpen(false);
-    //   }
-    // }, [block.disposition, block.pending]);
+            // TODO(burdon): Can we revert to the default handler?
+            return (
+              <Link href={href} target='_blank' rel='noopener noreferrer' {...props}>
+                {children}
+              </Link>
+            );
+          },
+          img: ({ node: { properties }, ...props }) => {
+            const client = useClient();
+            if (space && typeof properties?.src === 'string' && properties?.src?.startsWith('dxn')) {
+              try {
+                const dxn = DXN.parse(properties?.src);
+                const subject = resolveRef(client, dxn, space);
+                const data = useMemo(() => ({ subject }), [subject]);
+                return <Surface role='card--transclusion' data={data} limit={1} />;
+              } catch {}
+            }
+            return <img {...properties} />;
+          },
+        }}
+      />
+    );
+  },
 
+  //
+  // Suggest
+  //
+  ['suggest' as const]: ({ block, onEvent }) => {
+    const { t } = useTranslation(meta.id);
+    invariant(block._tag === 'suggest');
     return (
-      <ToggleContainer
-        // open={open}
-        defaultOpen={systemDispositions.includes(block.disposition ?? '') && block.pending}
-        title={title}
-        icon={
-          block.pending ? (
-            <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued animate-spin' size={4} />
-          ) : undefined
-        }
-      >
-        <MarkdownViewer
-          content={block.text}
-          classNames={['pbe-2', systemDispositions.includes(block.disposition ?? '') && 'text-sm text-subdued']}
-        />
+      <IconButton
+        icon='ph--lightning--regular'
+        label={block.text}
+        title={t('button suggest')}
+        onClick={() => onEvent?.({ type: 'submit', text: block.text })}
+      />
+    );
+  },
+
+  //
+  // Select
+  //
+  ['select' as const]: ({ block, onEvent }) => {
+    const { t } = useTranslation(meta.id);
+    invariant(block._tag === 'select');
+    return (
+      <div className='flex flex-wrap gap-1'>
+        {block.options.map((option, idx) => (
+          <Button
+            classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
+            key={idx}
+            onClick={() => onEvent?.({ type: 'submit', text: option })}
+            title={t('button select option')}
+          >
+            {option}
+          </Button>
+        ))}
+      </div>
+    );
+  },
+
+  //
+  // Toolkit
+  //
+  ['toolkit' as const]: ({ block }) => {
+    invariant(block._tag === 'toolkit');
+    return (
+      <ToggleContainer title='Toolbox' classNames={panelClasses} defaultOpen>
+        <Toolbox classNames={marginClasses} />
       </ToggleContainer>
     );
   },
@@ -147,42 +215,11 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
   //
   // JSON
   //
-  ['json' as const]: ({ space, processor, block, onEvent }) => {
+  ['json' as const]: ({ block, onEvent }) => {
     invariant(block._tag === 'json');
 
+    // TODO(burdon): Disposition is deprecated.
     switch (block.disposition) {
-      case 'tool_list': {
-        return (
-          <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} processor={processor} classNames='pbe-2' />
-          </ToggleContainer>
-        );
-      }
-
-      case 'suggest': {
-        const { text = '' }: { text: string } = safeParseJson(block.data ?? '{}') ?? ({} as any);
-        return (
-          <IconButton icon='ph--lightning--regular' label={text} onClick={() => onEvent?.({ type: 'submit', text })} />
-        );
-      }
-
-      case 'select': {
-        const { options = [] }: { options: string[] } = safeParseJson(block.data ?? '{}') ?? ({} as any);
-        return (
-          <div className='flex flex-wrap gap-1'>
-            {options.map((text, idx) => (
-              <Button
-                classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
-                key={idx}
-                onClick={() => onEvent?.({ type: 'submit', text })}
-              >
-                {text}
-              </Button>
-            ))}
-          </div>
-        );
-      }
-
       case 'graph': {
         return (
           <div className='flex flex-wrap gap-1'>
@@ -204,9 +241,8 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
       }
 
       default: {
-        const title = block.disposition ? titles[block.disposition] : undefined;
         return (
-          <ToggleContainer title={title ?? 'JSON'}>
+          <ToggleContainer title={block.disposition ?? block._tag}>
             <Json data={safeParseJson(block.data ?? block)} />
           </ToggleContainer>
         );
@@ -215,41 +251,21 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
   },
 
   //
-  // Default
+  // Fallback
   //
   default: ({ block }) => {
-    let title = titles[block._tag];
-    if (block._tag === 'toolCall') {
-      title = `Tool [${block.name}]`; // TODO(burdon): Get label from tool.
-    } else {
-      title = block._tag;
-    }
-
     return (
-      <ToggleContainer title={title ?? 'JSON'}>
+      <ToggleContainer title={block._tag}>
         <Json data={block} />
       </ToggleContainer>
     );
   },
 };
 
-// TODO(burdon): Translations.
-const titles: Record<string, string> = {
-  ['cot' as const]: 'Chain of thought',
-  ['artifact' as const]: 'Artifact',
-  ['tool_use' as const]: 'Tool request',
-  ['tool_result' as const]: 'Tool result',
-  ['tool_list' as const]: 'Tools',
-  ['artifact-update' as const]: 'Artifact(s) changed',
-};
-
-const systemDispositions: string[] = ['cot', 'artifact-update'];
-
-const panelClasses = 'flex flex-col is-full bg-activeSurface rounded-sm';
-const marginClasses = 'pie-4 pis-4';
-const paddingClasses = 'pis-2 pie-2 pbs-0.5 pbe-0.5';
-
-const MessageContainer = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
+/**
+ * Wrapper for each message.
+ */
+const MessageItem = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
   if (!children) {
     return null;
   }
@@ -266,3 +282,10 @@ const MessageContainer = ({ classNames, children, user }: ThemedClassName<PropsW
 const ToggleContainer = (props: ToggleContainerProps) => {
   return <NativeToggleContainer {...props} classNames={mx(panelClasses, props.classNames)} />;
 };
+
+export const renderObjectLink = (obj: Obj.Any, transclusion?: boolean) =>
+  `${transclusion ? '!' : ''}[${Obj.getLabel(obj)}](${Obj.getDXN(obj).toString()})`;
+
+// TODO(burdon): Move to parser.
+const preprocessTextContent = (content: string) =>
+  content.replaceAll(new RegExp(DXN_ECHO_REGEXP, 'g'), (_, dxn) => `<${dxn}>`);