@dxos/react-ui-chat 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/dist/lib/browser/index.mjs

@@ -1,121 +1,97 @@
 // src/components/ChatDialog/ChatDialog.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
 import React, { useEffect, useState } from "react";
 import { Dialog, Icon, IconButton, useControlledState } from "@dxos/react-ui";
 import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 var preventDefault = (event) => event.preventDefault();
 var Endcap = ({ children }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "grid w-[var(--rail-action)] h-[var(--rail-action)] items-center justify-center"
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "grid w-[var(--dx-rail-action)] h-[var(--dx-rail-action)] items-center justify-center"
+  }, children);
 };
 var [ChatDialogContextProvider, useChatDialogContext] = createContext("ChatDialog");
-var ChatDialogRoot = ({ children, open: _open = false, expanded: expandedParam = false, onOpenChange, onExpandedChange, onEscape }) => {
-  var _effect = _useSignals();
-  try {
-    const [size, setSize] = useState("min-content");
-    const [open, setOpen] = useControlledState(_open, onOpenChange);
-    const [expanded, setExpanded] = useControlledState(expandedParam, onExpandedChange);
-    return /* @__PURE__ */ React.createElement(ChatDialogContextProvider, {
-      open,
-      setOpen,
-      expanded,
-      setExpanded,
-      size,
-      setSize
-    }, /* @__PURE__ */ React.createElement(Dialog.Root, {
-      modal: false,
-      open,
-      onOpenChange: setOpen
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "dx-dialog__overlay bg-transparent pointer-events-none",
-      "data-block-align": "end"
-    }, /* @__PURE__ */ React.createElement(Dialog.Content, {
-      inOverlayLayout: true,
-      classNames: [
-        "grid grid-rows-[var(--rail-action)_1fr_min-content] p-0 overflow-hidden",
-        "box-content md:is-[35rem] md:max-is-none pointer-events-auto"
-      ],
-      onEscapeKeyDown: onEscape,
-      onInteractOutside: preventDefault
-    }, children))));
-  } finally {
-    _effect.f();
-  }
+var ChatDialogRoot = ({ children, open: openProp = false, expanded: expandedProp = false, onOpenChange, onExpandedChange, onEscape }) => {
+  const [size, setSize] = useState("min-content");
+  const [open, setOpen] = useControlledState(openProp, onOpenChange);
+  const [expanded, setExpanded] = useControlledState(expandedProp, onExpandedChange);
+  return /* @__PURE__ */ React.createElement(ChatDialogContextProvider, {
+    open,
+    setOpen,
+    expanded,
+    setExpanded,
+    size,
+    setSize
+  }, /* @__PURE__ */ React.createElement(Dialog.Root, {
+    modal: false,
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "dx-dialog__overlay bg-transparent pointer-events-none",
+    "data-block-align": "end"
+  }, /* @__PURE__ */ React.createElement(Dialog.Content, {
+    size: "md",
+    inOverlayLayout: true,
+    classNames: [
+      "grid grid-rows-[var(--dx-rail-action)_1fr_min-content] p-0 overflow-hidden box-content pointer-events-auto"
+    ],
+    onEscapeKeyDown: onEscape,
+    onInteractOutside: preventDefault
+  }, children))));
 };
 ChatDialogRoot.displayName = "ChatDialog.Root";
+var CHAT_DIALOG_HEADER_NAME = "ChatDialog.Header";
 var ChatDialogHeader = ({ classNames, title }) => {
-  var _effect = _useSignals();
-  try {
-    const { expanded, setExpanded } = useChatDialogContext(ChatDialogHeader.displayName);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: mx("grid grid-cols-[var(--rail-action)_1fr_min-content] items-center overflow-hidden", classNames)
-    }, /* @__PURE__ */ React.createElement(Endcap, null, /* @__PURE__ */ React.createElement(Dialog.Close, null, /* @__PURE__ */ React.createElement(Icon, {
-      icon: "ph--x--regular"
-    }))), /* @__PURE__ */ React.createElement(Dialog.Title, {
-      classNames: "flex w-full justify-center text-sm text-subdued select-none cursor-pointer",
-      onClick: () => setExpanded((expanded2) => !expanded2)
-    }, title), /* @__PURE__ */ React.createElement(Endcap, null, /* @__PURE__ */ React.createElement(IconButton, {
-      variant: "ghost",
-      icon: "ph--caret-up--regular",
-      iconOnly: true,
-      classNames: mx("!p-1 [&>svg]:transition [&>svg]:duration-200", expanded && "[&>svg]:rotate-180"),
-      label: expanded ? "Close" : "Open",
-      onClick: () => setExpanded((expanded2) => !expanded2)
-    })));
-  } finally {
-    _effect.f();
-  }
+  const { expanded, setExpanded } = useChatDialogContext(CHAT_DIALOG_HEADER_NAME);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("grid grid-cols-[var(--dx-rail-action)_1fr_min-content] items-center overflow-hidden", classNames)
+  }, /* @__PURE__ */ React.createElement(Endcap, null, /* @__PURE__ */ React.createElement(Dialog.Close, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--x--regular"
+  }))), /* @__PURE__ */ React.createElement(Dialog.Title, {
+    classNames: "flex w-full justify-center text-sm text-subdued select-none cursor-pointer",
+    onClick: () => setExpanded((expanded2) => !expanded2)
+  }, title), /* @__PURE__ */ React.createElement(Endcap, null, /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--caret-up--regular",
+    iconOnly: true,
+    classNames: mx("p-1! [&>svg]:transition [&>svg]:duration-200", expanded && "[&>svg]:rotate-180"),
+    label: expanded ? "Close" : "Open",
+    onClick: () => setExpanded((expanded2) => !expanded2)
+  })));
 };
-ChatDialogHeader.displayName = "ChatDialog.Header";
+ChatDialogHeader.displayName = CHAT_DIALOG_HEADER_NAME;
+var CHAT_DIALOG_CONTENT_NAME = "ChatDialog.Content";
 var ChatDialogContent = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    const { expanded, size, setSize } = useChatDialogContext(ChatDialogContent.displayName);
-    useEffect(() => {
-      setSize(expanded ? "min-content" : 0);
-    }, [
-      expanded
-    ]);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: mx("flex flex-col overflow-y-auto border-t border-b border-subduedSeparator", 'transition-[block-size] ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200', classNames),
-      style: {
-        ...sizeStyle(size, "vertical", true),
-        maxBlockSize: "calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 14rem)"
-      },
-      ...resizeAttributes
-    }, /* @__PURE__ */ React.createElement(ResizeHandle, {
-      side: "block-start",
-      iconPosition: "center",
-      defaultSize: "min-content",
-      fallbackSize: 0,
-      minSize: 0,
-      onSizeChange: setSize
-    }), children);
-  } finally {
-    _effect.f();
-  }
+  const { expanded, size, setSize } = useChatDialogContext(CHAT_DIALOG_CONTENT_NAME);
+  useEffect(() => {
+    setSize(expanded ? "min-content" : 0);
+  }, [
+    expanded
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("border-t border-b border-subdued-separator", 'transition ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200', classNames),
+    style: {
+      ...sizeStyle(size, "vertical", true),
+      maxBlockSize: "calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 14rem)"
+    },
+    ...resizeAttributes
+  }, /* @__PURE__ */ React.createElement(ResizeHandle, {
+    side: "block-start",
+    iconPosition: "center",
+    defaultSize: "min-content",
+    fallbackSize: 0,
+    minSize: 0,
+    onSizeChange: setSize
+  }), children);
 };
-ChatDialogContent.displayName = "ChatDialog.Content";
+ChatDialogContent.displayName = CHAT_DIALOG_CONTENT_NAME;
+var CHAT_DIALOG_FOOTER_NAME = "ChatDialog.Footer";
 var ChatDialogFooter = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: mx(classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx(classNames)
+  }, children);
 };
-ChatDialogFooter.displayName = "ChatDialog.Footer";
+ChatDialogFooter.displayName = CHAT_DIALOG_FOOTER_NAME;
 var ChatDialog = {
   Root: ChatDialogRoot,
   Header: ChatDialogHeader,
@@ -129,31 +105,23 @@ import { RangeSet } from "@codemirror/state";
 import { Decoration, EditorView, ViewPlugin, WidgetType, keymap } from "@codemirror/view";
 import { Mutex } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-chat/src/components/ChatEditor/references.ts";
 var references = ({ provider, triggerCharacter = "@", debug = false }) => {
-  invariant(triggerCharacter.length === 1, void 0, {
-    F: __dxlog_file,
-    L: 50,
-    S: void 0,
-    A: [
-      "triggerCharacter.length === 1",
-      ""
-    ]
-  });
+  invariant(triggerCharacter.length === 1, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 14, S: void 0, A: ["triggerCharacter.length === 1", ""] });
   const decorationField = ViewPlugin.fromClass(class ReferenceView {
+    // TODO(burdon): Why?
+    _mutex = new Mutex();
+    decorations = Decoration.set([]);
+    constructor(view) {
+      queueMicrotask(async () => {
+        const guard = await this._mutex.acquire();
+        try {
+          this.decorations = await this._computeDecorations(view);
+        } finally {
+          guard.release();
+        }
+      });
+    }
     update(update) {
       if (update.docChanged) {
         queueMicrotask(async () => {
@@ -184,21 +152,9 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
       }
       return Decoration.set(decorations);
     }
-    constructor(view) {
-      _define_property(this, "_mutex", new Mutex());
-      _define_property(this, "decorations", Decoration.set([]));
-      queueMicrotask(async () => {
-        const guard = await this._mutex.acquire();
-        try {
-          this.decorations = await this._computeDecorations(view);
-        } finally {
-          guard.release();
-        }
-      });
-    }
   }, {
     decorations: (v) => v.decorations,
-    provide: (plugin) => [
+    provide: () => [
       EditorView.atomicRanges.of((view) => view.plugin(decorationField)?.decorations ?? RangeSet.empty)
     ]
   });
@@ -213,7 +169,7 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
       }
     }),
     autocompletion({
-      tooltipClass: () => "shadow rounded",
+      tooltipClass: () => "shadow rounded-sm",
       activateOnTyping: true,
       aboveCursor: true,
       closeOnBlur: !debug,
@@ -242,110 +198,162 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
   ];
 };
 var ReferenceWidget = class extends WidgetType {
-  toDOM() {
-    const span = document.createElement("span");
-    span.textContent = `@ ${this.data.label}`;
-    span.className = "cm-reference-pill";
-    return span;
-  }
-  eq(other) {
-    return other.data.uri === this.data.uri;
+  data;
+  constructor(data) {
+    super(), this.data = data;
   }
   ignoreEvent() {
     return true;
   }
-  constructor(data) {
-    super(), _define_property(this, "data", void 0), this.data = data;
+  eq(other) {
+    return this.data.uri === other.data.uri;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.textContent = `@${this.data.label}`;
+    span.className = "cm-reference-pill";
+    return span;
   }
 };
 
 // src/components/ChatEditor/ChatEditor.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { forwardRef, useImperativeHandle } from "react";
+import React2, { forwardRef, useMemo } from "react";
 import { useThemeContext } from "@dxos/react-ui";
-import { autocomplete, createBasicExtensions, createThemeExtensions, useTextEditor } from "@dxos/react-ui-editor";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-import { isNonNullable } from "@dxos/util";
-var ChatEditor = /* @__PURE__ */ forwardRef(({ classNames, extensions, references: references2, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onCancel }, forwardRef2) => {
-  var _effect = _useSignals2();
-  try {
-    const { themeMode } = useThemeContext();
-    const { parentRef, view } = useTextEditor(() => ({
-      debug: true,
-      autoFocus,
-      extensions: [
-        createThemeExtensions({
-          themeMode
-        }),
-        autocomplete({
-          onSubmit,
-          onSuggest,
-          onCancel
-        }),
-        references2 ? references({
-          provider: references2.provider
-        }) : [],
-        createBasicExtensions({
-          bracketMatching: false,
-          lineWrapping,
-          placeholder
-        }),
-        extensions
-      ].filter(isNonNullable)
-    }), [
-      themeMode,
-      extensions,
-      onSubmit,
-      onSuggest,
-      onCancel
-    ]);
-    useImperativeHandle(forwardRef2, () => {
-      return {
-        focus: () => {
-          view?.focus();
-        },
-        getText: () => view?.state.doc.toString() ?? "",
-        setText: (text) => {
-          view?.dispatch({
-            changes: {
-              from: 0,
-              to: view.state.doc.length,
-              insert: text
-            },
-            selection: {
-              anchor: text.length,
-              head: text.length
-            }
-          });
-        }
-      };
-    }, [
-      view,
+import { Editor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, submit, xmlFormatting } from "@dxos/ui-editor";
+import { isTruthy } from "@dxos/util";
+var useChatExtensions = ({ extensions, lineWrapping = false, placeholder, onSubmit }) => {
+  const { themeMode } = useThemeContext();
+  return useMemo(() => [
+    createThemeExtensions({
+      themeMode
+    }),
+    createBasicExtensions({
+      bracketMatching: false,
+      lineWrapping,
+      placeholder
+    }),
+    xmlFormatting(),
+    submit({
       onSubmit
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      ref: parentRef,
-      className: mx2("is-full", classNames)
-    });
-  } finally {
-    _effect.f();
-  }
+    }),
+    extensions
+  ].filter(isTruthy), [
+    themeMode,
+    extensions,
+    onSubmit
+  ]);
+};
+var ChatEditor = /* @__PURE__ */ forwardRef(({ classNames, autoFocus, extensions: extensionsProp, lineWrapping = false, placeholder, onSubmit }, forwardRef3) => {
+  const extensions = useChatExtensions({
+    extensions: extensionsProp,
+    lineWrapping,
+    placeholder,
+    onSubmit
+  });
+  return /* @__PURE__ */ React2.createElement(Editor.Root, {
+    ref: forwardRef3
+  }, /* @__PURE__ */ React2.createElement(Editor.View, {
+    classNames,
+    autoFocus,
+    extensions
+  }));
 });
 
-// src/translations.ts
-var translationKey = "react-ui-chat";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {}
+// src/components/ChatStatus/ChatStatus.tsx
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React3, { forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
+import { mx as mx2 } from "@dxos/ui-theme";
+
+// src/components/ChatStatus/format.ts
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var formatElapsed = (ms) => {
+  const safe = Math.max(0, ms);
+  if (safe < MINUTE) {
+    return `${Math.floor(safe / SECOND)}s`;
+  }
+  if (safe < HOUR) {
+    const m2 = Math.floor(safe / MINUTE);
+    const s = Math.floor(safe % MINUTE / SECOND);
+    return `${m2}m ${s}s`;
+  }
+  const h = Math.floor(safe / HOUR);
+  const m = Math.floor(safe % HOUR / MINUTE);
+  return `${h}h ${m}m`;
+};
+
+// src/components/ChatStatus/ChatStatus.tsx
+var TICK_MS = 1e3;
+var [ChatStatusProvider, useChatStatusContext] = createContext2("ChatStatus");
+var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, defaultRunning = true }, forwardedRef) => {
+  const [elapsed, setElapsed] = useState2(0);
+  const [running, setRunning] = useState2(defaultRunning);
+  useEffect2(() => {
+    if (!running) {
+      return;
     }
+    const startedAt = Date.now() - elapsed * TICK_MS;
+    let timeout;
+    const tick = () => {
+      setElapsed(Math.floor((Date.now() - startedAt) / TICK_MS));
+      timeout = setTimeout(tick, TICK_MS - Date.now() % TICK_MS);
+    };
+    timeout = setTimeout(tick, TICK_MS - Date.now() % TICK_MS);
+    return () => clearTimeout(timeout);
+  }, [
+    running
+  ]);
+  useImperativeHandle(forwardedRef, () => ({
+    start: () => setRunning(true),
+    stop: () => setRunning(false)
+  }), []);
+  return /* @__PURE__ */ React3.createElement(ChatStatusProvider, {
+    elapsed,
+    running
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: mx2("inline-flex items-center gap-2 text-description font-mono tabular-nums", classNames)
+  }, children));
+});
+Root.displayName = "ChatChatStatus.Root";
+var Icon2 = ({ classNames, children }) => {
+  if (children !== void 0) {
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
   }
-];
+  return /* @__PURE__ */ React3.createElement("span", {
+    "aria-hidden": "true",
+    className: mx2("inline-block size-2 rounded-full bg-current animate-halo-pulse", classNames)
+  });
+};
+var Stopwatch = ({ classNames, offset = 0 }) => {
+  const { elapsed } = useChatStatusContext("ChatChatStatus.Stopwatch");
+  return /* @__PURE__ */ React3.createElement("span", {
+    "aria-live": "off",
+    className: mx2(classNames)
+  }, formatElapsed((elapsed + offset) * 1e3));
+};
+var Separator = ({ classNames }) => /* @__PURE__ */ React3.createElement("span", {
+  "aria-hidden": "true",
+  className: mx2("opacity-50", classNames)
+}, "\xB7");
+var Text = ({ classNames, children }) => /* @__PURE__ */ React3.createElement("span", {
+  className: mx2(classNames)
+}, children);
+var ChatStatus = {
+  Root,
+  Icon: Icon2,
+  Stopwatch,
+  Separator,
+  Text
+};
 export {
   ChatDialog,
   ChatEditor,
+  ChatStatus,
+  formatElapsed,
   references,
-  translationKey,
-  translations
+  useChatExtensions,
+  useChatStatusContext
 };
 //# sourceMappingURL=index.mjs.map