@dxos/plugin-thread 0.6.8-main.046e6cf

package/src/components/MessageContainer.tsx

@@ -0,0 +1,200 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { EditorView } from '@codemirror/view';
+import { Check, PencilSimple, X } from '@phosphor-icons/react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { type Expando, type EchoReactiveObject } from '@dxos/echo-schema';
+import { type MessageType } from '@dxos/plugin-space/types';
+import { PublicKey } from '@dxos/react-client';
+import { type SpaceMember } from '@dxos/react-client/echo';
+import { useIdentity, type Identity } from '@dxos/react-client/halo';
+import {
+  Button,
+  ButtonGroup,
+  DensityProvider,
+  Tooltip,
+  useOnTransition,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from '@dxos/react-ui-editor';
+import { Mosaic, type MosaicTileComponent } from '@dxos/react-ui-mosaic';
+import {
+  getSize,
+  hoverableControlItem,
+  hoverableControls,
+  hoverableFocusedWithinControls,
+  mx,
+} from '@dxos/react-ui-theme';
+import { MessageHeading, MessageRoot } from '@dxos/react-ui-thread';
+import { nonNullable } from '@dxos/util';
+
+import { command } from './command-extension';
+import { useOnEditAnalytics } from '../hooks';
+import { THREAD_ITEM, THREAD_PLUGIN } from '../meta';
+import { getMessageMetadata } from '../util';
+
+const messageControlClassNames = ['p-1 min-bs-0 transition-opacity items-start', hoverableControlItem];
+
+export const MessageContainer = ({
+  message,
+  members,
+  onDelete,
+}: {
+  message: MessageType;
+  members: SpaceMember[];
+  onDelete?: (id: string) => void;
+}) => {
+  const senderIdentity = members.find(
+    (member) => message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey),
+  )?.identity;
+  const messageMetadata = getMessageMetadata(message.id, senderIdentity);
+  const userIsAuthor = useIdentity()?.identityKey.toHex() === messageMetadata.authorId;
+  const [editing, setEditing] = useState(false);
+  const handleDelete = useCallback(() => onDelete?.(message.id), [message, onDelete]);
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const editLabel = t(editing ? 'save message label' : 'edit message label');
+  const deleteLabel = t('delete message label');
+
+  return (
+    <MessageRoot {...messageMetadata} classNames={[hoverableControls, hoverableFocusedWithinControls]}>
+      <MessageHeading authorName={messageMetadata.authorName} timestamp={messageMetadata.timestamp}>
+        <ButtonGroup classNames='mie-1'>
+          {userIsAuthor && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  variant='ghost'
+                  data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
+                  classNames={messageControlClassNames}
+                  onClick={() => setEditing((editing) => !editing)}
+                >
+                  <span className='sr-only'>{editLabel}</span>
+                  {editing ? <Check className={getSize(4)} /> : <PencilSimple className={getSize(4)} />}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content classNames='z-[21]'>
+                  {editLabel}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+          {onDelete && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  variant='ghost'
+                  data-testid='thread.message.delete'
+                  classNames={messageControlClassNames}
+                  onClick={handleDelete}
+                >
+                  <span className='sr-only'>{deleteLabel}</span>
+                  <X className={getSize(4)} />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content classNames='z-[21]'>
+                  {deleteLabel}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+        </ButtonGroup>
+      </MessageHeading>
+      <TextboxBlock message={message} isAuthor={userIsAuthor} editing={editing} />
+      {message.parts?.filter(nonNullable).map((part, index) => <MessagePart key={index} part={part} />)}
+    </MessageRoot>
+  );
+};
+
+const MessagePart = ({ part }: { part: Expando }) => {
+  return (
+    <Mosaic.Container id={part.id}>
+      <Mosaic.DraggableTile type={THREAD_ITEM} path={part.id} item={part} Component={MessageBlockObjectTile} />
+    </Mosaic.Container>
+  );
+};
+
+const TextboxBlock = ({
+  message,
+  isAuthor,
+  editing,
+}: {
+  message: MessageType;
+  editing?: boolean;
+  isAuthor?: boolean;
+  identity?: Identity;
+}) => {
+  const { themeMode } = useThemeContext();
+  const inMemoryContentRef = useRef(message.text);
+
+  const handleDocumentChange = useCallback((newState: string) => {
+    inMemoryContentRef.current = newState;
+  }, []);
+
+  const saveDocumentChange = useCallback(() => {
+    message.text = inMemoryContentRef.current;
+  }, [message]);
+
+  useOnTransition(editing, true, false, saveDocumentChange);
+
+  const { parentRef, focusAttributes, view } = useTextEditor(
+    () => ({
+      initialValue: message.text,
+      extensions: [
+        createBasicExtensions({ readonly: !isAuthor || !editing }),
+        createThemeExtensions({ themeMode }),
+        command,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            handleDocumentChange(update.state.doc.toString());
+          }
+        }),
+      ],
+    }),
+    [message.text, editing, isAuthor, themeMode, handleDocumentChange],
+  );
+
+  useEffect(() => {
+    editing && view?.focus();
+  }, [editing, view]);
+
+  useOnEditAnalytics(message, !!editing);
+
+  return <div role='none' ref={parentRef} className='mie-4' {...focusAttributes} />;
+};
+
+const MessageBlockObjectTile: MosaicTileComponent<EchoReactiveObject<any>> = forwardRef(
+  ({ draggableStyle, draggableProps, item, active, ...props }, forwardedRef) => {
+    let title = item.name ?? item.title ?? item.__typename ?? 'Object';
+    if (typeof title !== 'string') {
+      title = title?.content ?? '';
+    }
+
+    return (
+      <div
+        role='group'
+        className={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
+        style={draggableStyle}
+        ref={forwardedRef}
+      >
+        <DensityProvider density='fine'>
+          <Surface
+            role='card'
+            limit={1}
+            data={{ content: item }}
+            draggableProps={draggableProps}
+            fallback={title}
+            {...props}
+          />
+        </DensityProvider>
+      </div>
+    );
+  },
+);

package/src/components/ThreadArticle.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ComponentProps, type FC } from 'react';
+
+import { ChatContainer } from './ChatContainer';
+
+const ThreadArticle: FC<Pick<ComponentProps<typeof ChatContainer>, 'thread' | 'context'>> = (props) => {
+  // TODO(burdon): Factor out Main container across plugins?
+  return (
+    <div role='none' className='row-span-2'>
+      <ChatContainer {...props} />
+    </div>
+  );
+};
+
+export default ThreadArticle;

package/src/components/ThreadMain.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { type ThreadType } from '@dxos/plugin-space/types';
+import { Main } from '@dxos/react-ui';
+import {
+  baseSurface,
+  topbarBlockPaddingStart,
+  fixedInsetFlexLayout,
+  bottombarBlockPaddingEnd,
+} from '@dxos/react-ui-theme';
+
+import { ChatContainer } from './ChatContainer';
+
+const ThreadMain: FC<{ thread: ThreadType }> = ({ thread }) => {
+  // TODO(burdon): Factor out Main container across plugins?
+  return (
+    <Main.Content classNames={[baseSurface, fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
+      <ChatContainer thread={thread} />
+    </Main.Content>
+  );
+};
+
+export default ThreadMain;

package/src/components/ThreadSettings.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { THREAD_PLUGIN } from '../meta';
+import type { ThreadSettingsProps } from '../types';
+
+export const ThreadSettings = ({ settings }: { settings: ThreadSettingsProps }) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+
+  return (
+    <>
+      <SettingsValue label={t('settings standalone label')}>
+        <Input.Switch checked={settings.standalone} onCheckedChange={(checked) => (settings.standalone = !!checked)} />
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/command-extension.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { StreamLanguage, HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+
+import { tags } from '@dxos/react-ui-editor';
+import { mx, tagRoot } from '@dxos/react-ui-theme';
+
+/**
+ * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
+ */
+const parser = StreamLanguage.define<{ count: number }>({
+  startState: () => ({ count: 0 }),
+  token: (stream, state) => {
+    state.count++;
+    if (stream.eatSpace()) {
+      return null;
+    }
+    if (state.count === 1 && stream.match(/^(\/\w+)/)) {
+      return 'tagName';
+    }
+    stream.next();
+    return null;
+  },
+});
+
+const styles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: mx(tagRoot({ palette: 'cyan' }), 'text-base font-medium'),
+  },
+]);
+
+export const command: Extension = [parser, syntaxHighlighting(styles)];

package/src/components/index.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+// Lazily load components for content surfaces.
+export const ThreadMain = React.lazy(() => import('./ThreadMain'));
+export const ThreadArticle = React.lazy(() => import('./ThreadArticle'));
+
+// TODO(wittjosiah): Suspense boundary for sidebar?
+export * from './ThreadSettings';
+export * from './CommentContainer';
+export * from './MessageContainer';
+export * from './CommentsContainer';
+export * from './ChatContainer';

package/src/components/testing.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { create, Expando } from '@dxos/echo-schema';
+import { PublicKey } from '@dxos/keys';
+import { MessageType, ThreadType } from '@dxos/plugin-space/types';
+import { faker } from '@dxos/random';
+import { type Identity } from '@dxos/react-client/halo';
+
+export const createChatThread = (identity: Identity) => {
+  return create(ThreadType, {
+    messages: Array.from({ length: 8 }).map(() =>
+      create(MessageType, {
+        sender: {
+          identityKey: faker.datatype.boolean() ? identity.identityKey.toHex() : PublicKey.random().toHex(),
+        },
+        timestamp: faker.date.recent().toISOString(),
+        text: faker.lorem.sentences(3),
+        parts: faker.helpers.multiple(
+          () =>
+            faker.datatype.boolean({ probability: 0.8 })
+              ? undefined
+              : create(Expando, { name: faker.lorem.sentence() }),
+          { count: { min: 1, max: 3 } },
+        ),
+      }),
+    ),
+  });
+};
+
+export const createCommentThread = (identity: Identity) => {
+  return create(ThreadType, {
+    messages: faker.helpers.multiple(
+      () =>
+        create(MessageType, {
+          sender: {
+            identityKey: faker.datatype.boolean() ? identity.identityKey.toHex() : PublicKey.random().toHex(),
+          },
+          timestamp: new Date().toISOString(),
+          text: faker.lorem.sentences(3),
+        }),
+      { count: { min: 2, max: 3 } },
+    ),
+  });
+};

package/src/components/types.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EchoReactiveObject } from '@dxos/echo-schema';
+import { type ThreadType } from '@dxos/plugin-space/types';
+import type { ThreadProps } from '@dxos/react-ui-thread';
+
+/**
+ * Props for components which connect an ECHO Thread object to the UI component Thread.
+ * @param space - the containing Space entity
+ * @param thread - the Thread entity
+ * @param context - current application context
+ * @param current - whether this thread is current (wrt ARIA) in the app
+ * @param autoFocusTextbox - whether to set `autoFocus` on the thread’s textbox
+ * @param onTextboxFocus - a callback for when the textbox is focused
+ * @param detached - whether this thread is detached from the object
+ * @param onAttend - combined callback for `onClickCapture` and `onFocusCapture` within the thread
+ * @param onDelete - callback for deleting the thread
+ */
+export type ThreadContainerProps = {
+  thread: ThreadType;
+  context?: EchoReactiveObject<any>;
+  autoFocusTextbox?: boolean;
+  onTextboxFocus?: () => void;
+  detached?: boolean;
+  onAttend?: () => void;
+  onResolve?: () => void;
+  onThreadDelete?: () => void;
+  onMessageDelete?: (messageId: string) => void;
+  onComment?: (thread: ThreadType) => void;
+} & Pick<ThreadProps, 'current'>;

package/src/hooks/analytics.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { type ReactiveObject } from '@dxos/echo-schema';
+import { ObservabilityAction } from '@dxos/plugin-observability/meta';
+import { getSpace } from '@dxos/react-client/echo';
+import { useOnTransition } from '@dxos/react-ui';
+
+export const useAnalyticsCallback = (spaceId: string | undefined, name: string, meta?: any) => {
+  const dispatch = useIntentDispatcher();
+
+  return useCallback(
+    (dynamicMeta?: any) => {
+      void dispatch({
+        action: ObservabilityAction.SEND_EVENT,
+        data: {
+          name,
+          properties: { ...meta, ...dynamicMeta, spaceId },
+        },
+      });
+    },
+    [dispatch, name, meta, spaceId],
+  );
+};
+
+export const useOnEditAnalytics = (message: ReactiveObject<any>, editing: boolean) => {
+  const space = getSpace(message);
+
+  const onEditAnalytics = useAnalyticsCallback(space?.id, 'threads.comment-edited', {
+    messageId: message.id,
+    messageLength: message.text.length,
+  });
+
+  useOnTransition(editing, true, false, onEditAnalytics);
+};

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useStatus';
+export * from './analytics';

package/src/hooks/useStatus.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+
+// TODO(burdon): Generalize and factor out.
+export const useStatus = (space?: Space, channel?: string) => {
+  const [processing, setProcessing] = useState(false);
+  useEffect(() => {
+    if (!space || !channel) {
+      return;
+    }
+
+    const unsubscribe = space.listen(`status/${channel}`, (status) => {
+      const { event } = status.payload ?? {};
+      setProcessing(event === 'processing');
+    });
+
+    const t = setInterval(() => {
+      setProcessing((prev: any) => {
+        if (typeof prev?.ts === 'number' && Date.now() - prev.ts > 30_000) {
+          return undefined;
+        } else {
+          return prev;
+        }
+      });
+    }, 1_000);
+
+    return () => {
+      unsubscribe();
+      clearInterval(t);
+    };
+  }, [space, channel]);
+
+  return processing;
+};

package/src/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ThreadPlugin } from './ThreadPlugin';
+
+export default ThreadPlugin;
+
+export * from './hooks';
+export * from './types';
+
+export * from './ThreadPlugin';

package/src/meta.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Chat, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const THREAD_PLUGIN = 'dxos.org/plugin/thread';
+export const THREAD_ITEM = `${THREAD_PLUGIN}/item`;
+
+export default pluginMeta({
+  id: THREAD_PLUGIN,
+  name: 'Threads',
+  // TODO(wittjosiah): Update once scope of threads expands.
+  description: 'Comment threads on documents.',
+  iconComponent: (props: IconProps) => <Chat {...props} />,
+  iconSymbol: 'ph--chat--regular',
+});

package/src/translations.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { THREAD_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [THREAD_PLUGIN]: {
+        'plugin name': 'Threads',
+        'channel name placeholder': 'New channel',
+        'channel title label': 'Title',
+        'delete channel label': 'Delete channel',
+        'create channel label': 'Create channel',
+        'message placeholder': 'Reply…',
+        'settings standalone label': 'Enable channel creation (experimental)',
+        'activity message': 'Processing…',
+        'anonymous label': 'Anonymous',
+        'delete message block label': 'Delete message block',
+        'detached thread label': 'Referenced content was removed',
+        'delete thread label': 'Delete thread',
+        'thread deleted label': 'You deleted a thread.',
+        'message deleted label': 'You deleted a message.',
+        'comments heading': 'Comments',
+        'chat heading': 'Chat',
+        'draft button': 'DRAFT',
+        'no comments title': 'No comments (yet)',
+        'no comments message':
+          'To start a comment thread, select a range of text in a document and click the <commentIcon></commentIcon> Create comment button in the toolbar.',
+        'toggle show resolved': 'Show resolved',
+        'unnamed object threads label': 'Threads',
+        'mark as resolved label': 'Mark as resolved',
+        'mark as unresolved label': 'Mark as unresolved',
+        'save message label': 'Save',
+        'edit message label': 'Edit',
+        'delete message label': 'Delete message',
+      },
+    },
+  },
+];

package/src/types.test.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+describe('Models', () => {
+  test('Reactivity', async () => {
+    expect(true).to.be.true;
+  });
+});

package/src/types.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type {
+  GraphBuilderProvides,
+  IntentResolverProvides,
+  MetadataRecordsProvides,
+  SettingsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+import { type SchemaProvides } from '@dxos/plugin-client';
+import { type MarkdownExtensionProvides } from '@dxos/plugin-markdown';
+import { type ThreadType } from '@dxos/plugin-space/types';
+
+import { THREAD_PLUGIN } from './meta';
+
+const THREAD_ACTION = `${THREAD_PLUGIN}/action`;
+export enum ThreadAction {
+  CREATE = `${THREAD_ACTION}/create`,
+  SELECT = `${THREAD_ACTION}/select`,
+  DELETE = `${THREAD_ACTION}/delete`,
+  DELETE_MESSAGE = `${THREAD_ACTION}/delete-message`,
+  TOGGLE_RESOLVED = `${THREAD_ACTION}/toggle-resolved`,
+}
+
+export type ThreadPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  MetadataRecordsProvides &
+  SettingsProvides &
+  TranslationsProvides &
+  SchemaProvides &
+  MarkdownExtensionProvides;
+
+export type ThreadSettingsProps = { standalone?: boolean };
+
+export interface ThreadModel {
+  root: ThreadType;
+}

package/src/util.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { generateName } from '@dxos/display-name';
+import { type PublicKey } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+import { type MessageMetadata } from '@dxos/react-ui-thread';
+import { hexToFallback } from '@dxos/util';
+
+export type MessagePropertiesProvider = (identityKey: PublicKey | undefined) => MessageMetadata;
+
+export const getMessageMetadata = (id: string, identity?: Identity): MessageMetadata => {
+  const fallback = hexToFallback(identity?.identityKey.toHex() ?? '0');
+  return {
+    id,
+    authorId: identity?.identityKey.toHex(),
+    authorName:
+      identity?.profile?.displayName ??
+      (identity?.identityKey ? generateName(identity.identityKey.toHex()) : undefined),
+    authorAvatarProps: {
+      hue: identity?.profile?.data?.hue ?? fallback.hue,
+      emoji: identity?.profile?.data?.emoji ?? fallback.emoji,
+    },
+  };
+};