@dxos/plugin-thread 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/{components → containers/ChatContainer}/ChatContainer.tsx

@@ -5,60 +5,58 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import { fullyQualifiedId, type Space, useMembers } from '@dxos/react-client/echo';
+import { type Space, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
+import { Icon, ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
 import {
   MessageTextbox,
   type MessageTextboxProps,
-  Thread,
+  Thread as ThreadComponent,
   type ThreadRootProps,
   threadLayout,
 } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
+import { Message, type Thread } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { MessageContainer } from './MessageContainer';
-import { command } from './command-extension';
-import { useStatus } from '../hooks';
-import { meta } from '../meta';
-import { type ThreadType } from '../types';
-import { getMessageMetadata } from '../util';
-
-export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
+import { MessagePanel } from '../../components';
+import { command } from '../../extensions';
+import { useStatus } from '../../hooks';
+import { meta } from '../../meta';
+import { getMessageMetadata } from '../../util';
+
+export type ChatContainerProps = ThemedClassName<
+  {
+    space: Space;
+    thread: Thread.Thread;
+    context?: Obj.Unknown;
+    autoFocusTextbox?: boolean;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export const ChatContainer = ({
+  classNames,
+  space,
+  thread,
+  context,
+  autoFocusTextbox,
+  current,
+}: ChatContainerProps) => {
   const { t } = useTranslation(meta.id);
-  return (
-    <div role='none' className='flex items-center'>
-      <StackItem.SigilButton attendableId={attendableId}>
-        <Icon icon='ph--chat--regular' size={5} />
-      </StackItem.SigilButton>
-      <StackItem.HeadingLabel attendableId={attendableId}>{t('chat heading')}</StackItem.HeadingLabel>
-    </div>
-  );
-};
-
-export type ChatContainerProps = {
-  space: Space;
-  thread: ThreadType;
-  context?: Obj.Any;
-  autoFocusTextbox?: boolean;
-} & Pick<ThreadRootProps, 'current'>;
+  const { themeMode } = useThemeContext();
 
-export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
-  const { t } = useTranslation(meta.id);
-  const id = fullyQualifiedId(thread);
+  const id = Obj.getDXN(thread).toString();
   const identity = useIdentity()!;
-  const members = useMembers(space?.key);
+  const members = useMembers(space?.id);
   const activity = useStatus(space, id);
+  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+  const threadScrollRef = useRef<HTMLDivElement | null>(null);
+
   // 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(id, identity);
   const messageRef = useRef('');
@@ -66,7 +64,7 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
     () => [
       createBasicExtensions({ placeholder: t('message placeholder') }),
       createThemeExtensions({ themeMode }),
-      listener({ onChange: (text) => (messageRef.current = text) }),
+      listener({ onChange: ({ text }) => (messageRef.current = text) }),
       command,
     ],
     [themeMode, _count],
@@ -89,16 +87,18 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
       return false;
     }
 
-    thread.messages.push(
-      Ref.make(
-        Obj.make(DataType.Message, {
-          created: new Date().toISOString(),
-          sender: { identityDid: identity.did },
-          blocks: [{ _tag: 'text', text: messageRef.current }],
-          properties: context ? { context: Ref.make(context) } : undefined,
-        }),
-      ),
-    );
+    Obj.change(thread, (t) => {
+      t.messages.push(
+        Ref.make(
+          Obj.make(Message.Message, {
+            created: new Date().toISOString(),
+            sender: { identityDid: identity.did },
+            blocks: [{ _tag: 'text', text: messageRef.current }],
+            properties: context ? { context: Ref.make(context) } : undefined,
+          }),
+        ),
+      );
+    });
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -108,34 +108,38 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
   };
 
   return (
-    <Thread.Root
-      current={current}
+    <ThreadComponent.Root
       id={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'
+      current={current}
+      classNames={['dx-container grid-rows-[1fr_min-content_min-content]', classNames]}
     >
-      <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]'>
+      <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+        <ScrollArea.Viewport ref={threadScrollRef}>
           <div role='none' className={mx(threadLayout, 'place-self-end')}>
             {thread.messages
               .map((message) => message.target)
               .filter(isNonNullable)
               .map((message) => (
-                <MessageContainer key={message.id} message={message} members={members} />
+                <MessagePanel key={message.id} message={message} members={members} />
               ))}
           </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} />
-
-      <Thread.Status activity={activity}>{t('activity message')}</Thread.Status>
-    </Thread.Root>
+      <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>
+    </ThreadComponent.Root>
   );
 };
 
-export default ChatContainer;
+export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <div role='none' className='flex items-center'>
+      <StackItem.SigilButton attendableId={attendableId}>
+        <Icon icon='ph--chat--regular' size={5} />
+      </StackItem.SigilButton>
+      <StackItem.HeadingLabel attendableId={attendableId}>{t('chat heading')}</StackItem.HeadingLabel>
+    </div>
+  );
+};

package/src/containers/ChatContainer/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ChatContainer } from './ChatContainer';
+
+export { ChatContainer };
+export default ChatContainer;

package/src/containers/ThreadCompanion/ThreadCompanion.tsx

@@ -0,0 +1,199 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { Capabilities } from '@dxos/app-framework';
+import { useCapabilities, useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, CollaborationOperation, LayoutOperation } from '@dxos/app-toolkit';
+import { Filter, Obj, Query, Relation } from '@dxos/echo';
+import { Ref, useQuery } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { getParentId, useAttention } from '@dxos/react-ui-attention';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { AnchoredTo, Thread } from '@dxos/types';
+
+import { CommentsPanel, type CommentsPanelProps } from '../../components';
+import { meta } from '../../meta';
+import { ThreadCapabilities, ThreadOperation, type ViewState } from '../../types';
+
+const initialViewState: ViewState = { showResolvedThreads: false };
+
+export const ThreadCompanion = ({ attendableId, subject }: { attendableId?: string; subject: any }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const identity = useIdentity();
+  const subjectId = Obj.getDXN(subject).toString();
+  const parentId = attendableId ? getParentId(attendableId) : undefined;
+  const registry = useCapability(Capabilities.AtomRegistry);
+
+  const stateAtom = useCapability(ThreadCapabilities.State);
+  const viewStoreAtom = useCapability(ThreadCapabilities.ViewState);
+  const state = useAtomValue(stateAtom);
+  const viewStore = useAtomValue(viewStoreAtom);
+  const drafts = state.drafts[subjectId];
+
+  // Get or initialize view state for this subject.
+  const viewState = useMemo(() => {
+    if (!viewStore[subjectId]) {
+      registry.set(viewStoreAtom, { ...viewStore, [subjectId]: { ...initialViewState } });
+      return initialViewState;
+    }
+    return viewStore[subjectId];
+  }, [viewStore, subjectId, registry, viewStoreAtom]);
+  const { showResolvedThreads } = viewState;
+
+  const onChangeViewState = useCallback(
+    (nextValue: string) => {
+      registry.set(viewStoreAtom, {
+        ...registry.get(viewStoreAtom),
+        [subjectId]: { ...registry.get(viewStoreAtom)[subjectId], showResolvedThreads: nextValue === 'all' },
+      });
+    },
+    [registry, viewStoreAtom, subjectId],
+  );
+
+  const anchorSorts = useCapabilities(AppCapabilities.AnchorSort);
+  const sort = useMemo(
+    () => anchorSorts.find(({ key }) => key === Obj.getTypename(subject))?.sort,
+    [anchorSorts, subject],
+  );
+
+  const db = Obj.getDatabase(subject);
+  const objectsAnchoredTo = useQuery(db, Query.select(Filter.id(subject.id)).targetOf(AnchoredTo.AnchoredTo));
+  const anchors = objectsAnchoredTo
+    .toSorted((a, b) => sort?.(a, b) ?? 0)
+    .filter((anchor) => Obj.instanceOf(Thread.Thread, Relation.getSource(anchor)))
+    .concat(drafts ?? []);
+
+  const { hasAttention, isAncestor, isRelated } = useAttention(parentId);
+  const isAttended = hasAttention || isAncestor || isRelated;
+
+  const handleAttend = useCallback(
+    (anchor: AnchoredTo.AnchoredTo) => {
+      const thread = Relation.getSource(anchor) as Thread.Thread;
+      const threadId = Obj.getDXN(thread).toString();
+
+      if (state.current !== threadId) {
+        registry.set(stateAtom, { ...registry.get(stateAtom), current: threadId });
+
+        // TODO(wittjosiah): Should this be a thread-specific intent?
+        //  The layout doesn't know about threads and this working depends on other plugins conditionally handling it.
+        //  This may be overloading this intent or highjacking its intended purpose.
+        void invokePromise(LayoutOperation.ScrollIntoView, {
+          subject: parentId,
+          cursor: anchor.anchor,
+          ref: threadId,
+        });
+      }
+    },
+    [state.current, invokePromise, registry, stateAtom, parentId],
+  );
+
+  const handleComment = useCallback(
+    async (anchor: AnchoredTo.AnchoredTo, text: string) => {
+      await invokePromise(ThreadOperation.AddMessage, {
+        anchor,
+        subject,
+        sender: { identityDid: identity?.did },
+        text,
+      });
+
+      const thread = Relation.getSource(anchor) as Thread.Thread;
+      registry.set(stateAtom, { ...registry.get(stateAtom), current: Obj.getDXN(thread).toString() });
+    },
+    [invokePromise, identity, subject, registry, stateAtom],
+  );
+
+  const handleResolve = useCallback(
+    (anchor: AnchoredTo.AnchoredTo) =>
+      invokePromise(ThreadOperation.ToggleResolved, {
+        thread: Relation.getSource(anchor) as Thread.Thread,
+      }),
+    [invokePromise],
+  );
+
+  const handleThreadDelete = useCallback(
+    (anchor: AnchoredTo.AnchoredTo) => invokePromise(ThreadOperation.Delete, { anchor, subject }),
+    [invokePromise, subject],
+  );
+
+  const handleMessageDelete = useCallback(
+    (anchor: AnchoredTo.AnchoredTo, messageId: string) =>
+      invokePromise(ThreadOperation.DeleteMessage, {
+        anchor,
+        subject,
+        messageId,
+      }),
+    [invokePromise, subject],
+  );
+
+  const handleAcceptProposal = useCallback<NonNullable<CommentsPanelProps['onAcceptProposal']>>(
+    async (anchor, messageId) => {
+      const thread = Relation.getSource(anchor) as Thread.Thread;
+      const messageIndex = thread.messages.findIndex(Ref.hasObjectId(messageId));
+      const message = thread.messages[messageIndex]?.target;
+      const proposal = message?.blocks.find((block) => block._tag === 'proposal');
+      if (!proposal || !anchor.anchor) {
+        return;
+      }
+
+      await invokePromise(CollaborationOperation.AcceptProposal, {
+        subject,
+        anchor: anchor.anchor,
+        proposal,
+      });
+      await invokePromise(ThreadOperation.ToggleResolved, { thread });
+    },
+    [invokePromise, subject],
+  );
+
+  const comments = (
+    <CommentsPanel
+      anchors={anchors}
+      currentId={isAttended ? state.current : undefined}
+      showResolvedThreads={showResolvedThreads}
+      onAttend={handleAttend}
+      onComment={handleComment}
+      onResolve={handleResolve}
+      onMessageDelete={handleMessageDelete}
+      onThreadDelete={handleThreadDelete}
+      onAcceptProposal={handleAcceptProposal}
+    />
+  );
+
+  return (
+    <Tabs.Root
+      value={showResolvedThreads ? 'all' : 'unresolved'}
+      orientation='horizontal'
+      onValueChange={onChangeViewState}
+    >
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            {/* TODO(burdon): TabeList should have the same geometry as Toolbar. */}
+            <Tabs.Tablist classNames='py-0 px-1'>
+              <Tabs.Tab value='unresolved' classNames='text-sm'>
+                {t('show unresolved label')}
+              </Tabs.Tab>
+              <Tabs.Tab value='all' classNames='text-sm'>
+                {t('show all label')}
+              </Tabs.Tab>
+            </Tabs.Tablist>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root thin>
+            <ScrollArea.Viewport>
+              <Tabs.Tabpanel value='all'>{showResolvedThreads && comments}</Tabs.Tabpanel>
+              <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </Tabs.Root>
+  );
+};

package/src/containers/ThreadCompanion/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ThreadCompanion } from './ThreadCompanion';
+
+export default ThreadCompanion;

package/src/containers/ThreadSettings/ThreadSettings.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+
+import { meta } from '../../meta';
+import type { ThreadSettingsProps } from '../../types';
+
+export type ThreadSettingsComponentProps = {
+  settings: ThreadSettingsProps;
+  onSettingsChange: (fn: (current: ThreadSettingsProps) => ThreadSettingsProps) => void;
+};
+
+// TODO(burdon): Settings.
+export const ThreadSettings = ({ settings: _settings }: ThreadSettingsComponentProps) => {
+  const { t: _t } = useTranslation(meta.id);
+  return <Settings.Root></Settings.Root>;
+};

package/src/containers/ThreadSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ThreadSettings } from './ThreadSettings';
+
+export default ThreadSettings;

package/src/containers/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const CallDebugPanel: ComponentType<any> = lazy(() => import('./CallDebugPanel'));
+export const CallSidebar: ComponentType<any> = lazy(() => import('./CallSidebar'));
+export const ChannelContainer: ComponentType<any> = lazy(() => import('./ChannelContainer'));
+export const ChatContainer: ComponentType<any> = lazy(() => import('./ChatContainer'));
+export const ThreadCompanion: ComponentType<any> = lazy(() => import('./ThreadCompanion'));
+export const ThreadSettings: ComponentType<any> = lazy(() => import('./ThreadSettings'));

package/src/{components/command-extension.ts → extensions/command.ts}

@@ -2,11 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StreamLanguage, HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 
-import { tags } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { tags } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
@@ -27,7 +27,10 @@ const parser = StreamLanguage.define<{ count: number }>({
 });
 
 const styles = HighlightStyle.define([
-  { tag: tags.tagName, class: mx('dx-tag dx-tag--indigo text-baseText font-medium') },
+  {
+    tag: tags.tagName,
+    class: mx('dx-tag dx-tag--indigo text-base-surface-text font-medium'),
+  },
 ]);
 
 export const command: Extension = [parser, syntaxHighlighting(styles)];

package/src/extensions/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './command';
 export * from './threads';