feat: add dedicated chat editor type with slash command support (#2068)

* feat: add slash command to chat input for querying TinyBase data

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>

* refactor: create dedicated chat editor type for slash commands

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: yujonglee

apps/desktop/src/components/chat/input.tsx

@@ -1,8 +1,8 @@
 import { FullscreenIcon, MicIcon, PaperclipIcon, SendIcon } from "lucide-react";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
-import type { TiptapEditor } from "@hypr/tiptap/editor";
-import Editor from "@hypr/tiptap/editor";
+import type { SlashCommandConfig, TiptapEditor } from "@hypr/tiptap/chat";
+import ChatEditor from "@hypr/tiptap/chat";
 import {
   EMPTY_TIPTAP_DOC,
   type PlaceholderFunction,
@@ -11,6 +11,7 @@ import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
 import { useShell } from "../../contexts/shell";
+import * as main from "../../store/tinybase/main";
 
 export function ChatMessageInput({
   onSendMessage,
@@ -20,6 +21,7 @@ export function ChatMessageInput({
   disabled?: boolean | { disabled: boolean; message?: string };
 }) {
   const editorRef = useRef<{ editor: TiptapEditor | null }>(null);
+  const store = main.UI.useStore(main.STORE_ID);
 
   const disabled =
     typeof disabledProp === "object" ? disabledProp.disabled : disabledProp;
@@ -59,21 +61,44 @@ export function ChatMessageInput({
     console.log("Voice input clicked");
   }, []);
 
+  const slashCommandConfig: SlashCommandConfig = useMemo(
+    () => ({
+      handleSearch: async (query: string) => {
+        if (!store) {
+          return [];
+        }
+
+        const results: { id: string; type: string; label: string }[] = [];
+        const lowerQuery = query.toLowerCase();
+
+        store.forEachRow("sessions", (rowId, forEachCell) => {
+          let title = "";
+          forEachCell((cellId, cell) => {
+            if (cellId === "title" && typeof cell === "string") {
+              title = cell;
+            }
+          });
+          if (title && title.toLowerCase().includes(lowerQuery)) {
+            results.push({ id: rowId, type: "session", label: title });
+          }
+        });
+
+        return results.slice(0, 5);
+      },
+    }),
+    [store],
+  );
+
   return (
     <Container>
       <div className="flex flex-col p-2">
         <div className="flex-1 mb-2">
-          <Editor
+          <ChatEditor
             ref={editorRef}
             editable={!disabled}
             initialContent={EMPTY_TIPTAP_DOC}
             placeholderComponent={ChatPlaceholder}
-            mentionConfig={{
-              trigger: "@",
-              handleSearch: async () => [
-                { id: "123", type: "human", label: "John Doe" },
-              ],
-            }}
+            slashCommandConfig={slashCommandConfig}
           />
         </div>
 

packages/tiptap/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "exports": {
     "./editor": "./src/editor/index.tsx",
+    "./chat": "./src/chat/index.tsx",
     "./prompt": "./src/prompt/index.tsx",
     "./shared": "./src/shared/index.ts",
     "./styles.css": "./styles.css"

packages/tiptap/src/chat/index.tsx

@@ -0,0 +1,115 @@
+import {
+  EditorContent,
+  type JSONContent,
+  type Editor as TiptapEditor,
+  useEditor,
+} from "@tiptap/react";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+
+import "../../styles.css";
+import { mention, type MentionConfig } from "../editor/mention";
+import * as shared from "../shared";
+import type { PlaceholderFunction } from "../shared/extensions/placeholder";
+
+export type { JSONContent, TiptapEditor };
+export type { MentionConfig };
+
+export interface SlashCommandConfig {
+  handleSearch: (
+    query: string,
+  ) => Promise<{ id: string; type: string; label: string }[]>;
+}
+
+interface ChatEditorProps {
+  initialContent?: JSONContent;
+  editable?: boolean;
+  placeholderComponent?: PlaceholderFunction;
+  slashCommandConfig?: SlashCommandConfig;
+}
+
+const ChatEditor = forwardRef<{ editor: TiptapEditor | null }, ChatEditorProps>(
+  (
+    {
+      initialContent,
+      editable = true,
+      placeholderComponent,
+      slashCommandConfig,
+    },
+    ref,
+  ) => {
+    const previousContentRef = useRef<JSONContent>(initialContent);
+
+    const mentionConfigs = useMemo(() => {
+      const configs: MentionConfig[] = [];
+
+      if (slashCommandConfig) {
+        configs.push({
+          trigger: "/",
+          handleSearch: slashCommandConfig.handleSearch,
+        });
+      }
+
+      return configs;
+    }, [slashCommandConfig]);
+
+    const extensions = useMemo(
+      () => [
+        ...shared.getExtensions(placeholderComponent),
+        ...mentionConfigs.map((config) => mention(config)),
+      ],
+      [mentionConfigs, placeholderComponent],
+    );
+
+    const editor = useEditor(
+      {
+        extensions,
+        editable,
+        content: shared.isValidTiptapContent(initialContent)
+          ? initialContent
+          : shared.EMPTY_TIPTAP_DOC,
+        onCreate: ({ editor }) => {
+          editor.view.dom.setAttribute("spellcheck", "false");
+          editor.view.dom.setAttribute("autocomplete", "off");
+          editor.view.dom.setAttribute("autocapitalize", "off");
+        },
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: false,
+        parseOptions: { preserveWhitespace: "full" },
+      },
+      [extensions],
+    );
+
+    useEffect(() => {
+      if (ref && typeof ref === "object") {
+        ref.current = { editor };
+      }
+    }, [editor, ref]);
+
+    useEffect(() => {
+      if (editor && previousContentRef.current !== initialContent) {
+        previousContentRef.current = initialContent;
+        if (!editor.isFocused) {
+          if (shared.isValidTiptapContent(initialContent)) {
+            editor.commands.setContent(initialContent, {
+              parseOptions: { preserveWhitespace: "full" },
+            });
+          }
+        }
+      }
+    }, [editor, initialContent]);
+
+    useEffect(() => {
+      if (editor) {
+        editor.setEditable(editable);
+      }
+    }, [editor, editable]);
+
+    return (
+      <EditorContent editor={editor} className="tiptap-root" role="textbox" />
+    );
+  },
+);
+
+ChatEditor.displayName = "ChatEditor";
+
+export default ChatEditor;

packages/tiptap/src/editor/index.tsx

@@ -30,7 +30,7 @@ interface EditorProps {
   initialContent?: JSONContent;
   editable?: boolean;
   setContentFromOutside?: boolean;
-  mentionConfig: MentionConfig;
+  mentionConfig?: MentionConfig;
   placeholderComponent?: PlaceholderFunction;
   fileHandlerConfig?: FileHandlerConfig;
 }
@@ -67,7 +67,7 @@ const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
     const extensions = useMemo(
       () => [
         ...shared.getExtensions(placeholderComponent, fileHandlerConfig),
-        mention(mentionConfig),
+        ...(mentionConfig ? [mention(mentionConfig)] : []),
       ],
       [mentionConfig, placeholderComponent, fileHandlerConfig],
     );