@dxos/react-ui-thread 0.3.11-main.0e02eb0

package/dist/types/src/index.d.ts

@@ -0,0 +1,6 @@
+import translations from './translations';
+export * from './Thread';
+export * from './Message';
+export * from './types';
+export { translations };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,19 @@
+export declare const translationKey = "thread";
+declare const _default: {
+    'en-US': {
+        thread: {
+            'plugin name': string;
+            'thread title placeholder': string;
+            'thread title label': string;
+            'delete thread label': string;
+            'create thread label': string;
+            'message placeholder': string;
+            'comment placeholder': string;
+            'settings standalone label': string;
+            'anonymous label': string;
+            'enter to send message': string;
+        };
+    };
+}[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,WAAW,CAAC;;;;;;;;;;;;;;;;;AAEvC,wBAiBE"}

package/dist/types/src/types.d.ts

@@ -0,0 +1,19 @@
+import type { AvatarStatus } from '@dxos/react-ui';
+export type MessageMetadata = {
+    id: string;
+    authorId: string;
+    authorName?: string;
+    authorImgSrc?: string;
+    authorStatus?: AvatarStatus;
+};
+export type MessageEntityBlock<BlockValue> = BlockValue & {
+    timestamp?: string;
+};
+export type MessageEntity<BlockValue> = MessageMetadata & {
+    blocks: MessageEntityBlock<BlockValue>[];
+};
+export type ThreadEntity = {
+    topicId?: string;
+    topicTitle?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,UAAU,IAAI,UAAU,GAAG;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,UAAU,IAAI,eAAe,GAAG;IACxD,MAAM,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@dxos/react-ui-thread",
+  "version": "0.3.11-main.0e02eb0",
+  "description": "A set of components to use with threads, including comments and messages.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/lib/node/index.cjs",
+  "browser": {
+    "./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@codemirror/language": "^6.10.0",
+    "@codemirror/state": "^6.4.0",
+    "@radix-ui/react-primitive": "^1.0.2",
+    "date-fns": "^3.3.1",
+    "@dxos/react-ui": "0.3.11-main.0e02eb0",
+    "@dxos/react-ui-mosaic": "0.3.11-main.0e02eb0",
+    "@dxos/react-ui-editor": "0.3.11-main.0e02eb0",
+    "@dxos/react-ui-theme": "0.3.11-main.0e02eb0",
+    "@dxos/util": "0.3.11-main.0e02eb0"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.3.1",
+    "@phosphor-icons/react": "^2.0.5",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.12",
+    "vite-plugin-turbosnap": "^1.0.2",
+    "@dxos/keys": "0.3.11-main.0e02eb0",
+    "@dxos/echo-schema": "0.3.11-main.0e02eb0",
+    "@dxos/log": "0.3.11-main.0e02eb0",
+    "@dxos/storybook-utils": "0.3.11-main.0e02eb0"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Message/Message.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useState } from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Message } from './Message';
+import translations from '../translations';
+import { type MessageEntity } from '../types';
+
+const Story = () => {
+  const [identityKey] = useState(PublicKey.random());
+  const [message] = useState<MessageEntity<{ id: string; text: string }>>({
+    id: 'm1',
+    authorId: identityKey.toHex(),
+    blocks: [
+      {
+        id: 'b1',
+        timestamp: new Date().toISOString(),
+        text: 'hello',
+      },
+    ],
+  });
+
+  return (
+    <div className='grid grid-cols-[3rem_1fr]'>
+      <Message {...message} />
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-thread/Message',
+  component: Message,
+  render: Story,
+  decorators: [withTheme],
+  parameters: { translations },
+};
+
+export const Default = {};

package/src/Message/Message.tsx

@@ -0,0 +1,186 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { X } from '@phosphor-icons/react';
+import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
+import React, { type ComponentPropsWithRef, type FC, forwardRef } from 'react';
+
+import { Avatar, Button, type ThemedClassName, useJdenticonHref, useTranslation } from '@dxos/react-ui';
+import { TextEditor, type TextEditorProps, keymap, type EditorView, listener } from '@dxos/react-ui-editor';
+import {
+  focusRing,
+  hoverableControlItem,
+  hoverableControls,
+  hoverableFocusedWithinControls,
+  mx,
+} from '@dxos/react-ui-theme';
+import { safeParseJson } from '@dxos/util';
+
+import { command } from './command-extension';
+import { translationKey } from '../translations';
+import { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';
+
+const avatarSize = 7;
+
+const messageCell = 'plb-1 min-is-0';
+
+export type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
+  MessageMetadata &
+  Partial<{ continues: boolean }>;
+
+export const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(
+  (
+    { authorImgSrc, authorStatus, authorId, authorName, continues = true, children, classNames, ...rootProps },
+    forwardedRef,
+  ) => {
+    const jdenticon = useJdenticonHref(authorId ?? '', avatarSize);
+
+    return (
+      <Avatar.Root status={authorStatus ?? 'inactive'} size={avatarSize}>
+        <div
+          role='none'
+          {...rootProps}
+          className={mx('grid grid-cols-subgrid col-span-2', classNames)}
+          ref={forwardedRef}
+        >
+          <div role='none' className={'flex flex-col items-center gap-2 ' + messageCell}>
+            <Avatar.Frame>
+              <Avatar.Fallback href={jdenticon} />
+              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}
+            </Avatar.Frame>
+            {continues && <div role='none' className='is-px grow surface-separator' />}
+          </div>
+          <div role='none' className={messageCell}>
+            {children}
+          </div>
+        </div>
+      </Avatar.Root>
+    );
+  },
+);
+
+export type MessageBlockProps<BlockValue> = {
+  block: MessageEntityBlock<BlockValue>;
+  onBlockDelete?: () => void;
+};
+
+const DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {
+  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';
+  return (
+    <div
+      role='none'
+      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}
+    >
+      {block.data ? (
+        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>
+          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>
+        </pre>
+      ) : (
+        <p className={contentWidth}>{block.text ?? ''}</p>
+      )}
+      {onBlockDelete && (
+        <Button
+          variant='ghost'
+          classNames={['p-1 min-bs-0 mie-1 place-self-start transition-opacity', hoverableControlItem]}
+          onClick={onBlockDelete}
+        >
+          <X />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export type MessageProps<BlockValue> = MessageEntity<BlockValue> & {
+  onDelete?: (messageId: string, blockIndex: number) => void;
+  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;
+};
+
+export const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {
+  const { t, dtLocale } = useTranslation(translationKey);
+
+  const { authorName, onDelete, blocks, id, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;
+
+  const firstBlock = blocks[0];
+  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;
+
+  return (
+    <MessageMeta {...metaProps} id={id} continues>
+      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>
+        <Avatar.Label classNames={['truncate font-semibold', !authorName && 'fg-description']}>
+          {authorName ?? t('anonymous label')}
+        </Avatar.Label>
+        <time className='fg-description text-xs pbs-1' dateTime={dt?.toISOString()}>
+          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}
+        </time>
+      </p>
+      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>
+        {blocks.map((block, i) => (
+          <MessageBlockComponent key={i} block={block} onBlockDelete={onDelete && (() => onDelete(id, i))} />
+        ))}
+      </div>
+    </MessageMeta>
+  );
+};
+
+export type MessageTextboxProps = {
+  onSend?: () => void;
+  onClear?: () => void;
+  onEditorFocus?: () => void;
+  disabled?: boolean;
+} & Omit<MessageMetadata, 'id' | 'authorStatus'> &
+  TextEditorProps;
+
+export const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(
+  ({ onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, ...editorProps }, forwardedRef) => {
+    return (
+      <MessageMeta
+        {...{ id: editorProps.model.id, authorId, authorName, authorImgSrc }}
+        authorStatus='active'
+        continues={false}
+      >
+        <TextEditor
+          slots={{ root: { className: mx('plb-1 mie-1 rounded-sm', focusRing, disabled && 'opacity-50') } }}
+          readonly={disabled}
+          extensions={[
+            command,
+            keymap.of([
+              {
+                key: 'Enter',
+                run: () => {
+                  if (onSend) {
+                    onSend();
+                    return true;
+                  } else {
+                    return false;
+                  }
+                },
+              },
+              {
+                key: 'Meta+Backspace',
+                run: () => {
+                  if (onClear) {
+                    onClear();
+                    return true;
+                  } else {
+                    return false;
+                  }
+                },
+              },
+            ]),
+            listener({
+              onFocus: (focused) => {
+                if (focused) {
+                  onEditorFocus?.();
+                }
+              },
+            }),
+          ]}
+          {...editorProps}
+          ref={forwardedRef}
+        />
+      </MessageMeta>
+    );
+  },
+);

package/src/Message/command-extension.ts

@@ -0,0 +1,40 @@
+//
+// 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 { 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;
+  },
+});
+
+/**
+ * https://codemirror.net/examples/styling
+ * https://lezer.codemirror.net/docs/ref/#highlight
+ */
+const styles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: tagRoot({}),
+  },
+]);
+
+export const command: Extension = [parser, syntaxHighlighting(styles)];

package/src/Message/index.ts

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