@dxos/react-ui-chat 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/dist/lib/browser/index.mjs

@@ -1,121 +1,98 @@
 // 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 { resizeAttributes, ResizeHandle, sizeStyle } from "@dxos/react-ui-dnd";
-import { mx } from "@dxos/react-ui-theme";
+import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
+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: _expanded = false, onOpenChange, onExpandedChange, onEscape }) => {
-  var _effect = _useSignals();
-  try {
-    const [size, setSize] = useState("min-content");
-    const [open, setOpen] = useControlledState(_open, onOpenChange);
-    const [expanded, setExpanded] = useControlledState(_expanded, 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", {
+    role: "none",
+    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,
@@ -131,20 +108,12 @@ import { Mutex } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 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) {
-      // TODO(burdon): Why?
-      this._mutex = new Mutex();
-      this.decorations = Decoration.set([]);
       queueMicrotask(async () => {
         const guard = await this._mutex.acquire();
         try {
@@ -186,7 +155,7 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
     }
   }, {
     decorations: (v) => v.decorations,
-    provide: (plugin) => [
+    provide: () => [
       EditorView.atomicRanges.of((view) => view.plugin(decorationField)?.decorations ?? RangeSet.empty)
     ]
   });
@@ -201,7 +170,7 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
       }
     }),
     autocompletion({
-      tooltipClass: () => "shadow rounded",
+      tooltipClass: () => "shadow rounded-sm",
       activateOnTyping: true,
       aboveCursor: true,
       closeOnBlur: !debug,
@@ -230,251 +199,162 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
   ];
 };
 var ReferenceWidget = class extends WidgetType {
+  data;
   constructor(data) {
     super(), this.data = data;
   }
+  ignoreEvent() {
+    return true;
+  }
+  eq(other) {
+    return this.data.uri === other.data.uri;
+  }
   toDOM() {
     const span = document.createElement("span");
-    span.textContent = `@ ${this.data.label}`;
+    span.textContent = `@${this.data.label}`;
     span.className = "cm-reference-pill";
     return span;
   }
-  eq(other) {
-    return other.data.uri === this.data.uri;
-  }
-  ignoreEvent() {
-    return true;
-  }
 };
 
 // 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 { createBasicExtensions, createThemeExtensions, useTextEditor } from "@dxos/react-ui-editor";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-import { isNonNullable } from "@dxos/util";
-
-// src/components/ChatEditor/autocomplete.ts
-import { Prec } from "@codemirror/state";
-import { EditorView as EditorView2, Decoration as Decoration2, ViewPlugin as ViewPlugin2, keymap as keymap2, WidgetType as WidgetType2 } from "@codemirror/view";
-var autocomplete = ({ onSubmit, onSuggest, onCancel }) => {
-  const suggest = ViewPlugin2.fromClass(class {
-    constructor(view) {
-      this._currentSuggestion = null;
-      this._decorations = this.computeDecorations(view);
-    }
-    update(update) {
-      if (update.docChanged || update.selectionSet) {
-        this._decorations = this.computeDecorations(update.view);
-      }
-    }
-    computeDecorations(view) {
-      const text = view.state.doc.toString();
-      const suggestions = onSuggest?.(text) ?? [];
-      if (!suggestions.length) {
-        this._currentSuggestion = null;
-        return Decoration2.none;
-      }
-      this._currentSuggestion = suggestions[0];
-      const suffix = this._currentSuggestion.slice(text.length);
-      if (!suffix) {
-        return Decoration2.none;
-      }
-      return Decoration2.set([
-        Decoration2.widget({
-          widget: new InlineSuggestionWidget(suffix),
-          side: 1
-        }).range(view.state.doc.length)
-      ]);
-    }
-    completeSuggestion(view) {
-      if (!this._currentSuggestion) {
-        return false;
-      }
-      const text = view.state.doc.toString();
-      const suffix = this._currentSuggestion.slice(text.length);
-      if (!suffix) {
-        return false;
-      }
-      view.dispatch({
-        changes: {
-          from: view.state.doc.length,
-          insert: suffix
-        },
-        selection: {
-          anchor: view.state.doc.length + suffix.length
-        }
-      });
-      return true;
-    }
-  }, {
-    decorations: (v) => v._decorations
-  });
-  return [
-    suggest,
-    EditorView2.theme({
-      ".cm-inline-suggestion": {
-        opacity: 0.4
-      }
+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
     }),
-    Prec.highest(keymap2.of([
-      {
-        key: "Tab",
-        preventDefault: true,
-        run: (view) => {
-          const plugin = view.plugin(suggest);
-          return plugin?.completeSuggestion(view) ?? false;
-        }
-      },
-      {
-        key: "ArrowRight",
-        preventDefault: true,
-        run: (view) => {
-          if (view.state.selection.main.head !== view.state.doc.length) {
-            return false;
-          }
-          const plugin = view.plugin(suggest);
-          return plugin?.completeSuggestion(view) ?? false;
-        }
-      },
-      {
-        key: "Enter",
-        preventDefault: true,
-        run: (view) => {
-          const text = view.state.doc.toString().trim();
-          if (text.length > 0 && onSubmit) {
-            const reset = onSubmit(text);
-            if (reset) {
-              view.dispatch({
-                changes: {
-                  from: 0,
-                  to: view.state.doc.length,
-                  insert: ""
-                }
-              });
-            }
-          }
-          return true;
-        }
-      },
-      {
-        key: "Shift-Enter",
-        preventDefault: true,
-        run: (view) => {
-          view.dispatch({
-            changes: {
-              from: view.state.selection.main.head,
-              insert: "\n"
-            },
-            selection: {
-              anchor: view.state.selection.main.head + 1,
-              head: view.state.selection.main.head + 1
-            }
-          });
-          return true;
-        }
-      },
-      {
-        key: "Escape",
-        preventDefault: true,
-        run: (view) => {
-          view.dispatch({
-            changes: {
-              from: 0,
-              to: view.state.doc.length,
-              insert: ""
-            }
-          });
-          onCancel?.();
-          return true;
-        }
-      }
-    ]))
-  ];
+    createBasicExtensions({
+      bracketMatching: false,
+      lineWrapping,
+      placeholder
+    }),
+    xmlFormatting(),
+    submit({
+      onSubmit
+    }),
+    extensions
+  ].filter(isTruthy), [
+    themeMode,
+    extensions,
+    onSubmit
+  ]);
 };
-var InlineSuggestionWidget = class extends WidgetType2 {
-  constructor(suffix) {
-    super(), this.suffix = suffix;
-  }
-  toDOM() {
-    const span = document.createElement("span");
-    span.textContent = this.suffix;
-    span.className = "cm-inline-suggestion";
-    return span;
+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/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`;
   }
-  eq(other) {
-    return other.suffix === this.suffix;
+  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/ChatEditor/ChatEditor.tsx
-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
-    ]);
-    useImperativeHandle(forwardRef2, () => {
-      return {
-        focus: () => {
-          view?.focus();
-        },
-        setText: (text) => {
-          view?.dispatch({
-            changes: {
-              from: 0,
-              to: view.state.doc.length,
-              insert: text
-            },
-            selection: {
-              anchor: text.length,
-              head: text.length
-            }
-          });
-        }
-      };
-    }, [
-      view,
-      onSubmit
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      ref: parentRef,
-      className: mx2("is-full", classNames)
-    });
-  } finally {
-    _effect.f();
-  }
+// 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,
-  references
+  ChatStatus,
+  formatElapsed,
+  references,
+  useChatExtensions,
+  useChatStatusContext
 };
 //# sourceMappingURL=index.mjs.map