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

package/src/components/Chat.stories.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useEffect, useState } from 'react';
+
+import { SurfaceProvider } from '@dxos/app-framework';
+import { ThreadType } from '@dxos/plugin-space/types';
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { Mosaic } from '@dxos/react-ui-mosaic';
+import { Thread } from '@dxos/react-ui-thread';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ChatContainer } from './ChatContainer';
+import { createChatThread } from './testing';
+import translations from '../translations';
+
+faker.seed(1);
+
+const Story = () => {
+  const client = useClient();
+  const identity = useIdentity();
+  const [space, setSpace] = useState<Space>();
+  const [thread, setThread] = useState<ThreadType | null>();
+
+  useEffect(() => {
+    if (identity) {
+      setTimeout(async () => {
+        const space = await client.spaces.create();
+        const thread = space.db.add(createChatThread(identity));
+        setSpace(space);
+        setThread(thread);
+      });
+    }
+  }, [identity]);
+
+  if (!identity || !thread) {
+    return null;
+  }
+
+  return (
+    <SurfaceProvider
+      value={{
+        components: {
+          ObjectMessage: ({ role }) => {
+            return <span>{JSON.stringify({ role })}</span>;
+          },
+        },
+      }}
+    >
+      <Mosaic.Root debug>
+        <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>
+          {space && <ChatContainer thread={thread} />}
+        </main>
+        <Mosaic.DragOverlay />
+      </Mosaic.Root>
+    </SurfaceProvider>
+  );
+};
+
+export default {
+  title: 'plugin-thread/Chat',
+  component: Thread,
+  // TODO(wittjosiah): Register schemas.
+  render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType]} />,
+  decorators: [withTheme],
+  parameters: { translations, layout: 'fullscreen' },
+};
+
+export const Default = {};

package/src/components/ChatContainer.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Chat } from '@phosphor-icons/react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { MessageType } from '@dxos/plugin-space/types';
+import { getSpace, useMembers } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, threadLayout } from '@dxos/react-ui-thread';
+import { nonNullable } from '@dxos/util';
+
+import { MessageContainer } from './MessageContainer';
+import { command } from './command-extension';
+import { type ThreadContainerProps } from './types';
+import { useStatus } from '../hooks';
+import { THREAD_PLUGIN } from '../meta';
+import { getMessageMetadata } from '../util';
+
+export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  return (
+    <div role='none' className='flex items-center'>
+      <PlankHeading.Button attendableId={attendableId}>
+        <Chat {...plankHeadingIconProps} />
+      </PlankHeading.Button>
+      <PlankHeading.Label attendableId={attendableId}>{t('chat heading')}</PlankHeading.Label>
+    </div>
+  );
+};
+
+export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: ThreadContainerProps) => {
+  const identity = useIdentity()!;
+  const space = getSpace(thread);
+  const members = useMembers(space?.key);
+  const activity = useStatus(space, thread.id);
+  const { t } = useTranslation(THREAD_PLUGIN);
+  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
+  const [_count, _setCount] = useState(0);
+  const rerenderEditor = () => _setCount((count) => count + 1);
+  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+  const threadScrollRef = useRef<HTMLDivElement | null>(null);
+  const { themeMode } = useThemeContext();
+
+  const textboxMetadata = getMessageMetadata(thread.id, identity);
+  const messageRef = useRef('');
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({ placeholder: t('message placeholder') }),
+      createThemeExtensions({ themeMode }),
+      listener({ onChange: (text) => (messageRef.current = text) }),
+      command,
+    ],
+    [themeMode, _count],
+  );
+
+  // TODO(thure): Factor out.
+  // TODO(thure): `flex-col-reverse` does not work to start the container scrolled to the end while also using
+  //  `ScrollArea`. This is the least-bad way I found to scroll to the end on mount. Note that 0ms was insufficient
+  //  for the desired effect; this is likely hardware-dependent and should be reevaluated.
+  const scrollToEnd = (behavior: ScrollBehavior) =>
+    setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
+
+  useLayoutEffect(() => {
+    scrollToEnd('instant');
+  }, []);
+
+  // TODO(burdon): Change to model.
+  const handleCreate: MessageTextboxProps['onSend'] = () => {
+    if (!messageRef.current?.length) {
+      return false;
+    }
+
+    thread.messages.push(
+      create(MessageType, {
+        sender: { identityKey: identity.identityKey.toHex() },
+        timestamp: new Date().toISOString(),
+        text: messageRef.current,
+        context,
+      }),
+    );
+
+    messageRef.current = '';
+    setAutoFocus(true);
+    scrollToEnd('smooth');
+    rerenderEditor();
+    return true;
+  };
+
+  const handleDelete = (id: string) => {
+    const messageIndex = thread.messages.filter(nonNullable).findIndex((message) => message.id === id);
+    if (messageIndex !== -1) {
+      thread.messages.splice(messageIndex, 1);
+    }
+  };
+
+  return (
+    <Thread
+      current={current}
+      id={thread.id}
+      classNames='bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0'
+    >
+      <ScrollArea.Root classNames='col-span-2'>
+        <ScrollArea.Viewport classNames='overflow-anchored after:overflow-anchor after:block after:bs-px after:-mbs-px [&>div]:min-bs-full [&>div]:!grid [&>div]:grid-rows-[1fr_0]'>
+          <div role='none' className={mx(threadLayout, 'place-self-end')}>
+            {thread.messages.filter(nonNullable).map((message) => (
+              <MessageContainer key={message.id} message={message} members={members} onDelete={handleDelete} />
+            ))}
+          </div>
+          {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
+          <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />
+          <ScrollArea.Scrollbar>
+            <ScrollArea.Thumb />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
+      <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>
+    </Thread>
+  );
+};

package/src/components/CommentContainer.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CheckCircle, X } from '@phosphor-icons/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { MessageType } from '@dxos/plugin-space/types';
+import { getSpace, useMembers } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { Button, Tag, Tooltip, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
+import {
+  getSize,
+  hoverableControlItem,
+  hoverableControls,
+  hoverableFocusedWithinControls,
+  mx,
+} from '@dxos/react-ui-theme';
+import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, ThreadHeading } from '@dxos/react-ui-thread';
+import { nonNullable } from '@dxos/util';
+
+import { MessageContainer } from './MessageContainer';
+import { command } from './command-extension';
+import { type ThreadContainerProps } from './types';
+import { useStatus } from '../hooks';
+import { THREAD_PLUGIN } from '../meta';
+import { getMessageMetadata } from '../util';
+
+const sizeClass = getSize(4);
+
+const ToggleResolvedButton = ({
+  isResolved,
+  onResolve,
+}: {
+  isResolved: boolean | undefined;
+  onResolve: () => void;
+}) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const label = t(isResolved ? 'mark as unresolved label' : 'mark as resolved label');
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='ghost'
+          data-testid='thread.toggle-resolved'
+          onClick={onResolve}
+          classNames={['min-bs-0 p-1', !isResolved && hoverableControlItem]}
+        >
+          <span className='sr-only'>{label}</span>
+          {isResolved ? <CheckCircle className={sizeClass} weight='fill' /> : <CheckCircle className={sizeClass} />}
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content classNames={'z-[21]'}>
+          {label}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+const DeleteThreadButton = ({ onDelete }: { onDelete: () => void }) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const label = t('delete thread label');
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='ghost'
+          data-testid='thread.delete'
+          onClick={onDelete}
+          classNames={['min-bs-0 p-1', hoverableControlItem]}
+        >
+          <span className='sr-only'>{label}</span>
+          <X className={sizeClass} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content classNames='z-[21]'>
+          {label}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+export const CommentContainer = ({
+  thread,
+  detached,
+  context,
+  current,
+  autoFocusTextbox,
+  onAttend,
+  onThreadDelete,
+  onMessageDelete,
+  onResolve,
+  onComment,
+}: ThreadContainerProps) => {
+  const identity = useIdentity()!;
+  const space = getSpace(thread);
+  const members = useMembers(space?.key);
+  const activity = useStatus(space, thread.id);
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const threadScrollRef = useRef<HTMLDivElement | null>(null);
+  const [autoFocus, setAutoFocus] = useState(!!autoFocusTextbox);
+  const { themeMode } = useThemeContext();
+
+  const textboxMetadata = getMessageMetadata(thread.id, identity);
+  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
+  const [_count, _setCount] = useState(0);
+  const rerenderEditor = () => _setCount((count) => count + 1);
+  const messageRef = useRef('');
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({ placeholder: t('message placeholder') }),
+      createThemeExtensions({ themeMode }),
+      listener({ onChange: (text) => (messageRef.current = text) }),
+      command,
+    ],
+    [_count],
+  );
+
+  // TODO(thure): Because of the way the `autoFocus` property is handled by TextEditor,
+  //  this is the least-bad way of moving focus at the right time, though it is an anti-pattern.
+  //  Refactor to behave more like <input/>’s `autoFocus` or `autofocus` (yes, they’re different).
+  useEffect(() => {
+    setAutoFocus(!!autoFocusTextbox);
+  }, [autoFocusTextbox]);
+
+  // TODO(thure): Factor out.
+  const scrollToEnd = (behavior: ScrollBehavior) =>
+    setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
+
+  const handleCreate: MessageTextboxProps['onSend'] = useCallback(() => {
+    if (!messageRef.current) {
+      return false;
+    }
+
+    thread.messages.push(
+      create(MessageType, {
+        sender: { identityKey: identity.identityKey.toHex() },
+        timestamp: new Date().toISOString(),
+        text: messageRef.current,
+        context,
+      }),
+    );
+    onComment?.(thread);
+
+    messageRef.current = '';
+    setAutoFocus(true);
+    scrollToEnd('instant');
+    rerenderEditor();
+
+    // TODO(burdon): Scroll to bottom.
+    return true;
+  }, [thread, identity]);
+
+  const handleDeleteMessage = (id: string) => onMessageDelete?.(id);
+
+  return (
+    <Thread onClickCapture={onAttend} onFocusCapture={onAttend} current={current} id={thread.id}>
+      <div
+        role='none'
+        className={mx(
+          'col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]',
+          hoverableControls,
+          hoverableFocusedWithinControls,
+        )}
+      >
+        {detached ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <ThreadHeading detached>{thread.name ?? t('thread title placeholder')}</ThreadHeading>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content classNames='z-[21]' side='top'>
+                {t('detached thread label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        ) : (
+          <ThreadHeading>{thread.name ?? t('thread title placeholder')}</ThreadHeading>
+        )}
+        <div className='flex flex-row items-center pli-1'>
+          {thread.status === 'staged' && <Tag palette='neutral'>{t('draft button')}</Tag>}
+          {onResolve && !(thread?.status === 'staged') && (
+            <ToggleResolvedButton isResolved={thread?.status === 'resolved'} onResolve={onResolve} />
+          )}
+          {onThreadDelete && <DeleteThreadButton onDelete={onThreadDelete} />}
+        </div>
+      </div>
+      {thread.messages.filter(nonNullable).map((message) => (
+        <MessageContainer key={message.id} message={message} members={members} onDelete={handleDeleteMessage} />
+      ))}
+      <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
+      <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>
+      {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
+      <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />
+    </Thread>
+  );
+};

package/src/components/Comments.stories.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useEffect, useState } from 'react';
+
+import { MessageType, ThreadType } from '@dxos/plugin-space/types';
+import { faker } from '@dxos/random';
+import { type PublicKey } from '@dxos/react-client';
+import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { Tooltip } from '@dxos/react-ui';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+
+import { CommentsContainer } from './CommentsContainer';
+import { createCommentThread } from './testing';
+import translations from '../translations';
+
+faker.seed(1);
+
+const Story = ({ spaceKey }: { spaceKey: PublicKey }) => {
+  const identity = useIdentity();
+  const space = useSpace(spaceKey);
+  const threads = useQuery(space, Filter.schema(ThreadType));
+  const [detached, setDetached] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (identity && space) {
+      const t = setTimeout(async () => {
+        space.db.add(createCommentThread(identity));
+        const thread = space.db.add(createCommentThread(identity));
+        setDetached([thread.id]);
+      });
+
+      return () => clearTimeout(t);
+    }
+  }, [identity, space]);
+
+  if (!identity || !space || !threads) {
+    return null;
+  }
+
+  // TODO(wittjosiah): Include Tooltip.Provider in `withTheme` decorator?
+  return (
+    <Tooltip.Provider>
+      <div className='flex justify-center overflow-y-auto bg-white dark:bg-black'>
+        <div className='flex flex-col w-[400px]'>
+          <CommentsContainer threads={threads} detached={detached} onThreadDelete={console.log} />
+        </div>
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+export default {
+  title: 'plugin-thread/Comments',
+  // TODO(wittjosiah): Register schemas.
+  render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType, MessageType]} />,
+  decorators: [withTheme, withFullscreen()],
+  parameters: { translations },
+};
+
+export const Default = {};

package/src/components/CommentsContainer.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ChatText, Quotes } from '@phosphor-icons/react';
+import React, { useEffect } from 'react';
+
+import { type ThreadType } from '@dxos/plugin-space/types';
+import { useTranslation, Trans } from '@dxos/react-ui';
+import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { CommentContainer } from './CommentContainer';
+import { type ThreadContainerProps } from './types';
+import { THREAD_PLUGIN } from '../meta';
+
+export type ThreadsContainerProps = Omit<
+  ThreadContainerProps,
+  'thread' | 'detached' | 'onAttend' | 'onThreadDelete' | 'onMessageDelete' | 'current' | 'autoFocus'
+> & {
+  threads: ThreadType[];
+  /**
+   * Threads that are no longer anchored to a position in the object.
+   */
+  detached?: string[];
+  currentId?: string;
+  autoFocusCurrentTextbox?: boolean;
+  showResolvedThreads?: boolean;
+  onThreadAttend?: (thread: ThreadType) => void;
+  onThreadDelete?: (thread: ThreadType) => void;
+  onMessageDelete?: (thread: ThreadType, messageId: string) => void;
+  onThreadToggleResolved?: (thread: ThreadType) => void;
+  onComment?: (thread: ThreadType) => void;
+};
+
+export const CommentsHeading = ({ attendableId }: { attendableId?: string }) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+
+  return (
+    <div role='none' className='flex items-center'>
+      <PlankHeading.Button attendableId={attendableId}>
+        <Quotes {...plankHeadingIconProps} />
+      </PlankHeading.Button>
+      <PlankHeading.Label attendableId={attendableId}>{t('comments heading')}</PlankHeading.Label>
+    </div>
+  );
+};
+
+/**
+ * Comment threads.
+ */
+export const CommentsContainer = ({
+  threads,
+  detached = [],
+  currentId,
+  autoFocusCurrentTextbox,
+  showResolvedThreads,
+  onThreadAttend,
+  onThreadDelete,
+  onMessageDelete,
+  onThreadToggleResolved,
+  ...props
+}: ThreadsContainerProps) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const filteredThreads = showResolvedThreads ? threads : threads.filter((thread) => !(thread?.status === 'resolved'));
+
+  useEffect(() => {
+    if (currentId) {
+      document.getElementById(currentId)?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+  }, [currentId]);
+
+  return (
+    <>
+      {filteredThreads.length > 0 ? (
+        filteredThreads.map((thread) => (
+          <CommentContainer
+            key={thread.id}
+            thread={thread}
+            current={currentId === thread.id}
+            detached={detached.includes(thread.id)}
+            autoFocusTextbox={autoFocusCurrentTextbox && currentId === thread.id}
+            {...(onThreadAttend && { onAttend: () => onThreadAttend(thread) })}
+            {...(onThreadDelete && { onThreadDelete: () => onThreadDelete(thread) })}
+            {...(onMessageDelete && { onMessageDelete: (messageId: string) => onMessageDelete(thread, messageId) })}
+            {...(onThreadToggleResolved && { onResolve: () => onThreadToggleResolved(thread) })}
+            {...props}
+          />
+        ))
+      ) : (
+        <div
+          role='alert'
+          className={mx(
+            descriptionText,
+            'place-self-center border border-dashed border-neutral-400/50 rounded-lg text-center p-4 m-4',
+          )}
+        >
+          <h2 className='mbe-2 font-medium text-base'>{t('no comments title')}</h2>
+          <p>
+            <Trans
+              {...{
+                t,
+                i18nKey: 'no comments message',
+                components: {
+                  commentIcon: <ChatText className='inline-block' />,
+                },
+              }}
+            />
+          </p>
+        </div>
+      )}
+    </>
+  );
+};