@dxos/react-ui-chat 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

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,
@@ -133,7 +110,7 @@ var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-chat/src/components/Chat
 var references = ({ provider, triggerCharacter = "@", debug = false }) => {
   invariant(triggerCharacter.length === 1, void 0, {
     F: __dxlog_file,
-    L: 50,
+    L: 56,
     S: void 0,
     A: [
       "triggerCharacter.length === 1",
@@ -141,10 +118,10 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
     ]
   });
   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 +163,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 +178,7 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
       }
     }),
     autocompletion({
-      tooltipClass: () => "shadow rounded",
+      tooltipClass: () => "shadow rounded-sm",
       activateOnTyping: true,
       aboveCursor: true,
       closeOnBlur: !debug,
@@ -230,251 +207,82 @@ var references = ({ provider, triggerCharacter = "@", debug = false }) => {
   ];
 };
 var ReferenceWidget = class extends WidgetType {
+  data;
   constructor(data) {
     super(), this.data = data;
   }
-  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;
-  }
   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 { 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
-      }
-    }),
-    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;
-        }
-      }
-    ]))
-  ];
-};
-var InlineSuggestionWidget = class extends WidgetType2 {
-  constructor(suffix) {
-    super(), this.suffix = suffix;
+  eq(other) {
+    return this.data.uri === other.data.uri;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.textContent = this.suffix;
-    span.className = "cm-inline-suggestion";
+    span.textContent = `@${this.data.label}`;
+    span.className = "cm-reference-pill";
     return span;
   }
-  eq(other) {
-    return other.suffix === this.suffix;
-  }
 };
 
 // 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,
+import React2, { forwardRef, useMemo } from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { Editor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, submit } 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
+    }),
+    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 }, forwardRef2) => {
+  const extensions = useChatExtensions({
+    extensions: extensionsProp,
+    lineWrapping,
+    placeholder,
+    onSubmit
+  });
+  return /* @__PURE__ */ React2.createElement(Editor.Root, {
+    ref: forwardRef2
+  }, /* @__PURE__ */ React2.createElement(Editor.Content, {
+    classNames,
+    autoFocus,
+    extensions
+  }));
 });
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-chat";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {}
+    }
+  }
+];
 export {
   ChatDialog,
   ChatEditor,
-  references
+  references,
+  translationKey,
+  translations,
+  useChatExtensions
 };
 //# sourceMappingURL=index.mjs.map