@dxos/plugin-thread 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -1,131 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, type PropsWithChildren, useEffect, useState } from 'react';
-
-import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Waveform } from '@dxos/react-ui-sfx';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
-
-import { meta } from '../../meta';
-
-export type ResponsiveGridItemProps<T extends object = any> = PropsWithChildren<
-  ThemedClassName<{
-    item: T;
-    style?: CSSProperties;
-    pinned?: boolean;
-    name?: string;
-    self?: boolean;
-    screenshare?: boolean;
-    video?: boolean;
-    mute?: boolean;
-    wave?: boolean;
-    speaking?: boolean;
-    debug?: boolean;
-    onClick?: (item: T) => void;
-  }>
->;
-
-/**
- * Cell container.
- */
-export const ResponsiveGridItem = <T extends object = any>({
-  children,
-  classNames,
-  item,
-  style,
-  name,
-  self,
-  pinned,
-  screenshare,
-  video,
-  mute,
-  wave,
-  speaking,
-  onClick,
-}: ResponsiveGridItemProps<T>) => {
-  const { t } = useTranslation(meta.id);
-  const iconProps: Record<string, { icon: string; label: string; classNames?: string }> = {
-    wave: {
-      icon: 'ph--hand-waving--duotone',
-      label: t('icon wave'),
-      classNames: 'animate-pulse bg-orange-500',
-    },
-    mute: {
-      icon: 'ph--microphone-slash--regular',
-      label: t('icon muted'),
-    },
-  };
-
-  const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : undefined;
-
-  // Debounce speaking indicator.
-  const [speakingIndicator, setSpeakingIndicator] = useState(speaking);
-  useEffect(() => {
-    if (speaking) {
-      setSpeakingIndicator(true);
-    } else {
-      const timeout = setTimeout(() => {
-        setSpeakingIndicator(false);
-      }, 1_000);
-      return () => clearTimeout(timeout);
-    }
-  }, [speaking]);
-
-  return (
-    <div
-      className={mx(
-        'relative w-full h-full group',
-        'rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500',
-        speakingIndicator ? 'outline-green-500' : !video && 'outline-separator',
-        classNames,
-      )}
-      style={style}
-    >
-      {children}
-
-      {/* Action. */}
-      {onClick && (
-        <div className='z-10 absolute top-1 right-1 flex'>
-          <IconButton
-            classNames={mx('p-1 min-bs-1 rounded', groupHoverControlItemWithTransition)}
-            iconOnly
-            icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
-            size={pinned ? 5 : 4}
-            label={pinned ? t('icon unpin') : t('icon pin')}
-            onClick={() => onClick?.(item)}
-          />
-        </div>
-      )}
-
-      {/* Name. */}
-      {name && (
-        <div className='z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center'>
-          {/* TODO(burdon): Replace with avatar for everyone. */}
-          {/* {self && <Icon icon='ph--asterisk--regular' size={pinned ? 5 : 4} />} */}
-          {screenshare && <Icon icon='ph--broadcast--regular' size={pinned ? 5 : 4} />}
-          <div
-            className={mx('bg-neutral-800 text-neutral-100 py-0.5 truncate rounded', pinned ? 'px-2' : 'px-1 text-xs')}
-          >
-            {name}
-          </div>
-        </div>
-      )}
-
-      {/* Activity. */}
-      <div className='z-10 absolute bottom-1 left-1 flex'>
-        {(speaking && <Waveform active size={pinned ? 5 : 4} />) ||
-          (props && (
-            <IconButton
-              classNames={mx('p-1 min-bs-1 rounded', props?.classNames)}
-              icon={props?.icon}
-              label={props?.label}
-              size={pinned ? 5 : 4}
-              iconOnly
-            />
-          ))}
-      </div>
-    </div>
-  );
-};

package/src/components/ResponsiveGrid/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './ResponsiveContainer';
-export * from './ResponsiveGrid';
-export * from './ResponsiveGridItem';

package/src/components/ThreadComplementary.tsx

@@ -1,151 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import {
-  Capabilities,
-  LayoutAction,
-  createIntent,
-  useCapabilities,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { Filter, Obj, Query, Relation } from '@dxos/echo';
-import { fullyQualifiedId, getSpace, useQuery } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { useThemeContext, useTranslation } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
-import { StackItem } from '@dxos/react-ui-stack';
-import { Tabs } from '@dxos/react-ui-tabs';
-import { AnchoredTo } from '@dxos/schema';
-
-import { ThreadCapabilities } from '../capabilities';
-import { CommentsContainer } from '../components';
-import { meta } from '../meta';
-import { ThreadAction, ThreadType } from '../types';
-
-export const ThreadComplementary = ({ subject }: { subject: any }) => {
-  const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const identity = useIdentity();
-  const { tx } = useThemeContext();
-  const subjectId = fullyQualifiedId(subject);
-
-  const { state, getViewState } = useCapability(ThreadCapabilities.MutableState);
-  const drafts = state.drafts[subjectId];
-  const viewState = useMemo(() => getViewState(subjectId), [getViewState, subjectId]);
-  const { showResolvedThreads } = viewState;
-  const onChangeViewState = useCallback(
-    (nextValue: string) => {
-      viewState.showResolvedThreads = nextValue === 'all';
-    },
-    [viewState],
-  );
-
-  const anchorSorts = useCapabilities(Capabilities.AnchorSort);
-  const sort = useMemo(
-    () => anchorSorts.find(({ key }) => key === Obj.getTypename(subject))?.sort,
-    [anchorSorts, subject],
-  );
-
-  const space = getSpace(subject);
-  const objectsAnchoredTo = useQuery(space, Query.select(Filter.ids(subject.id)).targetOf(AnchoredTo));
-  const anchors = objectsAnchoredTo
-    .toSorted((a, b) => sort?.(a, b) ?? 0)
-    .filter((anchor) => Obj.instanceOf(ThreadType, Relation.getSource(anchor)))
-    .concat(drafts ?? []);
-
-  const attended = useAttended();
-
-  const handleAttend = useCallback(
-    (anchor: AnchoredTo) => {
-      const thread = Relation.getSource(anchor) as ThreadType;
-      const threadId = fullyQualifiedId(thread);
-
-      if (state.current !== threadId) {
-        state.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 dispatch(
-          createIntent(LayoutAction.ScrollIntoView, {
-            part: 'current',
-            subject: fullyQualifiedId(subject),
-            options: {
-              cursor: anchor.anchor,
-              ref: threadId,
-            },
-          }),
-        );
-      }
-    },
-    [state.current, dispatch, subject],
-  );
-
-  const handleComment = useCallback(
-    async (anchor: AnchoredTo, text: string) => {
-      await dispatch(
-        createIntent(ThreadAction.AddMessage, { anchor, subject, sender: { identityDid: identity?.did }, text }),
-      );
-
-      const thread = Relation.getSource(anchor) as ThreadType;
-      state.current = fullyQualifiedId(thread);
-    },
-    [dispatch, identity, subject],
-  );
-
-  const handleResolve = useCallback(
-    (anchor: AnchoredTo) =>
-      dispatch(createIntent(ThreadAction.ToggleResolved, { thread: Relation.getSource(anchor) as ThreadType })),
-    [dispatch],
-  );
-
-  const handleThreadDelete = useCallback(
-    (anchor: AnchoredTo) => dispatch(createIntent(ThreadAction.Delete, { anchor, subject })),
-    [dispatch, subject],
-  );
-
-  const handleMessageDelete = useCallback(
-    (anchor: AnchoredTo, messageId: string) =>
-      dispatch(createIntent(ThreadAction.DeleteMessage, { anchor, subject, messageId })),
-    [dispatch, subject],
-  );
-
-  const comments = (
-    <CommentsContainer
-      anchors={anchors}
-      currentId={attended.includes(subjectId) ? state.current : undefined}
-      showResolvedThreads={showResolvedThreads}
-      onAttend={handleAttend}
-      onComment={handleComment}
-      onResolve={handleResolve}
-      onMessageDelete={handleMessageDelete}
-      onThreadDelete={handleThreadDelete}
-    />
-  );
-
-  return (
-    <StackItem.Content toolbar>
-      <Tabs.Root
-        value={showResolvedThreads ? 'all' : 'unresolved'}
-        orientation='horizontal'
-        classNames='contents [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:overflow-y-auto [&_[role="tabpanel"]]:scrollbar-thin'
-        onValueChange={onChangeViewState}
-      >
-        <Tabs.Tablist classNames={tx('toolbar.root', 'toolbar', {})}>
-          <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>
-        <Tabs.Tabpanel value='all'>{showResolvedThreads && comments}</Tabs.Tabpanel>
-        <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
-      </Tabs.Root>
-    </StackItem.Content>
-  );
-};

package/src/components/ThreadSettings.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-// import { useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer } from '@dxos/react-ui-form';
-
-// import { meta } from '../meta';
-import type { ThreadSettingsProps } from '../types';
-
-export const ThreadSettings = ({ settings }: { settings: ThreadSettingsProps }) => {
-  // const { t } = useTranslation(meta.id);
-
-  return <DeprecatedFormContainer></DeprecatedFormContainer>;
-};

package/src/components/command-extension.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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';
-
-/**
- * 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('dx-tag dx-tag--indigo text-baseText font-medium') },
-]);
-
-export const command: Extension = [parser, syntaxHighlighting(styles)];

package/src/components/testing.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Obj, Ref } from '@dxos/echo';
-import { IdentityDid } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { type Identity } from '@dxos/react-client/halo';
-import { DataType } from '@dxos/schema';
-
-import { ThreadType } from '../types';
-
-export const createCommentThread = (identity: Identity): ThreadType => {
-  return Obj.make(ThreadType, {
-    messages: faker.helpers.multiple(
-      () =>
-        Ref.make(
-          Obj.make(DataType.Message, {
-            created: new Date().toISOString(),
-            sender: {
-              identityDid: faker.datatype.boolean() ? identity.did : IdentityDid.random(),
-            },
-            blocks: [{ _tag: 'text', text: faker.lorem.sentences(3) }],
-          }),
-        ),
-      { count: { min: 2, max: 3 } },
-    ),
-  });
-};

package/src/extensions/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './threads';

package/src/extensions/threads.ts

@@ -1,126 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { computed, effect } from '@preact/signals-core';
-
-import { type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
-import { Filter, Obj, Query, Relation } from '@dxos/echo';
-import { type Markdown } from '@dxos/plugin-markdown/types';
-import { createDocAccessor, fullyQualifiedId, getSource, getSpace, getTextInRange } from '@dxos/react-client/echo';
-import { comments, createExternalCommentSync } from '@dxos/react-ui-editor';
-import { AnchoredTo } from '@dxos/schema';
-
-import { ThreadAction, type ThreadState, ThreadType } from '../types';
-
-// TODO(burdon): Factor out.
-const getName = (doc: Markdown.Document, anchor: string): string | undefined => {
-  if (doc.content) {
-    const [start, end] = anchor.split(':');
-    return getTextInRange(createDocAccessor(doc.content.target!, ['content']), start, end);
-  }
-};
-
-/**
- * Construct plugins.
- */
-export const threads = (state: ThreadState, doc?: Markdown.Document, dispatch?: PromiseIntentDispatcher): Extension => {
-  const space = doc && getSpace(doc);
-  if (!doc || !space || !dispatch) {
-    // Include no-op comments extension here to ensure that the facets are always present when they are expected.
-    // TODO(wittjosiah): The Editor should only look for these facets when comments are available.
-    return [comments()];
-  }
-
-  const query = space.db.query(Query.select(Filter.ids(doc.id)).targetOf(AnchoredTo));
-  const unsubscribe = query.subscribe();
-
-  const anchors = computed(() =>
-    query.objects
-      .filter((anchor) => {
-        const thread = Relation.getSource(anchor);
-        return Obj.instanceOf(ThreadType, thread) && thread.status !== 'resolved';
-      })
-      .concat(state.drafts[fullyQualifiedId(doc)] ?? []),
-  );
-
-  return [
-    EditorView.domEventHandlers({
-      destroy: () => {
-        unsubscribe();
-      },
-    }),
-
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        anchors.value.forEach((anchor) => {
-          if (anchor.anchor) {
-            // Only update if the name has changed, otherwise this will cause an infinite loop.
-            // Skip if the name is empty; this means comment text was deleted, but thread name should remain.
-            const name = getName(doc, anchor.anchor);
-            const thread = Relation.getSource(anchor) as ThreadType;
-            if (name && name !== thread.name) {
-              thread.name = name;
-            }
-          }
-        });
-      }
-    }),
-
-    createExternalCommentSync(
-      fullyQualifiedId(doc),
-      (sink) => effect(() => sink()),
-      () =>
-        anchors.value
-          .filter((anchor) => anchor.anchor)
-          .map((anchor) => ({ id: fullyQualifiedId(Relation.getSource(anchor)), cursor: anchor.anchor })),
-    ),
-
-    comments({
-      id: fullyQualifiedId(doc),
-      onCreate: ({ cursor }) => {
-        const name = getName(doc, cursor);
-        void dispatch(createIntent(ThreadAction.Create, { anchor: cursor, name, subject: doc }));
-      },
-      onDelete: ({ id }) => {
-        const draft = state.drafts[fullyQualifiedId(doc)];
-        if (draft) {
-          const index = draft.findIndex((thread) => fullyQualifiedId(thread) === id);
-          if (index !== -1) {
-            draft.splice(index, 1);
-          }
-        }
-
-        const thread = query.objects.find((object) => getSource(object).id === id);
-        if (thread) {
-          thread.anchor = undefined;
-        }
-      },
-      onUpdate: ({ id, cursor }) => {
-        const draft = state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id);
-        if (draft) {
-          const thread = Relation.getSource(draft) as ThreadType;
-          thread.name = getName(doc, cursor);
-          draft.anchor = cursor;
-        }
-
-        const relation = query.objects.find((object) => getSource(object).id === id);
-        if (relation) {
-          const thread = getSource(relation);
-          if (Obj.instanceOf(ThreadType, thread)) {
-            thread.name = getName(doc, cursor);
-            relation.anchor = cursor;
-          }
-        }
-      },
-      onSelect: ({ selection }) => {
-        const current = selection.current ?? selection.closest;
-        if (current) {
-          void dispatch(createIntent(ThreadAction.Select, { current }));
-        }
-      },
-    }),
-  ];
-};

package/src/hooks/analytics.ts

@@ -1,40 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useCallback } from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { type Live } from '@dxos/live-object';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { getSpace } from '@dxos/react-client/echo';
-import { useOnTransition } from '@dxos/react-ui';
-import { type DataType } from '@dxos/schema';
-
-export const useOnEditAnalytics = (
-  message: Live<any>,
-  textBlock: DataType.MessageBlock.Text | undefined,
-  editing: boolean,
-) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const onEdit = useCallback(() => {
-    const space = getSpace(message);
-    if (!space || !textBlock) {
-      return;
-    }
-
-    void dispatch(
-      createIntent(ObservabilityAction.SendEvent, {
-        name: 'threads.message.update',
-        properties: {
-          spaceId: space.id,
-          messageId: message.id,
-          messageLength: textBlock?.text.length,
-        },
-      }),
-    );
-  }, [dispatch, message, textBlock]);
-
-  useOnTransition(editing, true, false, onEdit);
-};

package/src/hooks/useDebugMode.ts

@@ -1,25 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useEffect, useState } from 'react';
-
-// TODO(burdon): Standardize across plugins/composer.
-export const useDebugMode = () => {
-  const [enabled, setEnabled] = useState(false);
-  useEffect(() => {
-    const handler = (ev: KeyboardEvent) => {
-      if (ev.key.toLowerCase() === 'd' && ev.ctrlKey) {
-        ev.preventDefault();
-        setEnabled(!enabled);
-      }
-    };
-
-    document.addEventListener('keypress', handler);
-    return () => {
-      document.removeEventListener('keypress', handler);
-    };
-  }, [enabled]);
-
-  return enabled;
-};

package/src/hooks/useInaudibleAudioStreamTrack.tsx

@@ -1,27 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useEffect, useState } from 'react';
-
-import { scheduleTask } from '@dxos/async';
-import { Context } from '@dxos/context';
-
-import { createInaudibleAudioStreamTrack } from '../calls/util/stub-media-streams';
-
-export const useInaudibleAudioStreamTrack = () => {
-  const [audioStreamTrack, setAudioStreamTrack] = useState<MediaStreamTrack | undefined>(undefined);
-  useEffect(() => {
-    const ctx = new Context();
-    scheduleTask(ctx, async () => {
-      const audioStreamTrack = await createInaudibleAudioStreamTrack({ ctx });
-      setAudioStreamTrack(audioStreamTrack);
-    });
-
-    return () => {
-      void ctx.dispose();
-    };
-  }, []);
-
-  return audioStreamTrack;
-};

package/src/hooks/useVideoStreamTrack.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type RefObject, useEffect, useRef, useState } from 'react';
-
-export const useVideoStreamTrack = (videoElement: RefObject<HTMLVideoElement>, videoSrc: string) => {
-  // Get video stream track.
-  const [videoStreamTrack, setVideoStreamTrack] = useState<MediaStreamTrack | undefined>(undefined);
-  const hadRun = useRef(false);
-  useEffect(() => {
-    // This is done to capture only one video stream.
-    if (!videoElement.current || hadRun.current || !videoSrc) {
-      return;
-    }
-    hadRun.current = true;
-    videoElement.current.addEventListener('playing', () => {
-      const stream = (videoElement.current as any).captureStream();
-      const track = stream.getTracks()[0];
-      if (track) {
-        setVideoStreamTrack(track);
-      }
-      stream.onaddtrack = (event: MediaStreamTrackEvent) => {
-        if (event.track.kind === 'video') {
-          setVideoStreamTrack(event.track);
-        }
-      };
-    });
-    videoElement.current.src = videoSrc;
-  }, [videoElement.current, videoSrc]);
-
-  return videoStreamTrack;
-};

package/src/testing/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './stories';