feat(chat): replace text input with Tiptap editor for slash commands and file mentions

- Add TiptapPromptEditor with ProseMirror-based rich text input
- Slash command chips (/command) as inline atom nodes, insertable anywhere in message
- File mention chips (@path) anchored to cursor position via virtual float
- SlashCommandMenu width matches prompt input via --radix-popover-trigger-width
- Selecting a command inserts a chip node instead of immediately submitting
- Popover closes on editor blur, reopens on focus
- Tab no longer auto-selects commands (only Enter selects)
- serializeEditorToText serializes chip nodes to /name and @path for submission

Author: michalkopanski

apps/desktop/src/renderer/components/Chat/ChatInterface/components/ChatInputFooter/ChatInputFooter.tsx

@@ -3,7 +3,6 @@ import {
 	PromptInputAttachment,
 	PromptInputAttachments,
 	type PromptInputMessage,
-	PromptInputTextarea,
 	usePromptInputController,
 } from "@superset/ui/ai-elements/prompt-input";
 import type { ThinkingLevel } from "@superset/ui/ai-elements/thinking-toggle";
@@ -16,15 +15,13 @@ import { useHotkeyDisplay } from "renderer/hotkeys";
 import type { SlashCommand } from "../../hooks/useSlashCommands";
 import type { ModelOption, PermissionMode } from "../../types";
 import { IssueLinkCommand } from "../IssueLinkCommand";
-import { MentionAnchor, MentionProvider } from "../MentionPopover";
-import { SlashCommandInput } from "../SlashCommandInput";
+import { TiptapPromptEditor } from "../TiptapPromptEditor";
 import { ChatComposerControls } from "./components/ChatComposerControls";
 import { ChatInputDropZone } from "./components/ChatInputDropZone";
 import { ChatShortcuts } from "./components/ChatShortcuts";
 import { FileDropOverlay } from "./components/FileDropOverlay";
 import { LinkedIssues } from "./components/LinkedIssues";
 import { QuestionInputOverlay } from "./components/QuestionInputOverlay";
-import { SlashCommandPreview } from "./components/SlashCommandPreview";
 import type { LinkedIssue } from "./types";
 import { getErrorMessage } from "./utils/getErrorMessage";
 
@@ -92,7 +89,7 @@ export function ChatInputFooter({
 	useFocusPromptOnPane(isFocused);
 
 	// Focus the prompt when the question overlay dismisses (pendingQuestion → null).
-	// Uses rAF so the textarea has time to mount, register its ref, and browser
+	// Uses rAF so the editor has time to mount, register its ref, and browser
 	// focus-stealing from the unmounting overlay has settled.
 	const { textInput } = usePromptInputController();
 	const prevPendingQuestionRef = useRef(pendingQuestion);
@@ -163,82 +160,66 @@ export function ChatInputFooter({
 							onCancel={onQuestionCancel}
 						/>
 					) : (
-						<SlashCommandInput
-							onCommandSend={onSlashCommandSend}
-							commands={slashCommands}
+						<div
+							ref={inputRootRef}
+							className={
+								dragType === "path"
+									? "relative opacity-50 transition-opacity"
+									: "relative"
+							}
 						>
-							<MentionProvider cwd={cwd}>
-								<MentionAnchor>
-									<div
-										ref={inputRootRef}
-										className={
-											dragType === "path"
-												? "relative opacity-50 transition-opacity"
-												: "relative"
-										}
-									>
-										{showFocusHint && (
-											<span className="pointer-events-none absolute top-3 right-3 z-10 text-xs text-muted-foreground/50 [:focus-within>&]:hidden">
-												{focusShortcutText} to focus
-											</span>
-										)}
-										<PromptInput
-											className="[&>[data-slot=input-group]]:rounded-[13px] [&>[data-slot=input-group]]:border-[0.5px] [&>[data-slot=input-group]]:shadow-none [&>[data-slot=input-group]]:bg-foreground/[0.02]"
-											onSubmitStart={onSubmitStart}
-											onSubmitEnd={onSubmitEnd}
-											onSubmit={handleSend}
-											multiple
-											maxFiles={5}
-											maxFileSize={10 * 1024 * 1024}
-											globalDrop
-										>
-											<ChatShortcuts
-												isFocused={isFocused}
-												setIssueLinkOpen={setIssueLinkOpen}
-											/>
-											<IssueLinkCommand
-												open={issueLinkOpen}
-												onOpenChange={setIssueLinkOpen}
-												onSelect={addLinkedIssue}
-											/>
-											<FileDropOverlay visible={dragType === "files"} />
-											<PromptInputAttachments>
-												{renderAttachment ??
-													((file) => <PromptInputAttachment data={file} />)}
-											</PromptInputAttachments>
-											<LinkedIssues
-												issues={linkedIssues}
-												onRemove={removeLinkedIssue}
-											/>
-											<SlashCommandPreview
-												cwd={cwd}
-												slashCommands={slashCommands}
-											/>
-											<PromptInputTextarea
-												placeholder="Ask to make changes, @mention files, run /commands"
-												className="min-h-10"
-											/>
-											<ChatComposerControls
-												availableModels={availableModels}
-												selectedModel={selectedModel}
-												setSelectedModel={setSelectedModel}
-												modelSelectorOpen={modelSelectorOpen}
-												setModelSelectorOpen={setModelSelectorOpen}
-												permissionMode={permissionMode}
-												setPermissionMode={setPermissionMode}
-												thinkingLevel={thinkingLevel}
-												setThinkingLevel={setThinkingLevel}
-												canAbort={canAbort}
-												submitStatus={submitStatus}
-												submitDisabled={submitDisabled}
-												onStop={onStop}
-												onLinkIssue={() => setIssueLinkOpen(true)}
-											/>
-										</PromptInput>
-									</div>
-								</MentionAnchor>
-							</MentionProvider>
-						</SlashCommandInput>
+							<PromptInput
+								className="[&>[data-slot=input-group]]:rounded-[13px] [&>[data-slot=input-group]]:border-[0.5px] [&>[data-slot=input-group]]:shadow-none [&>[data-slot=input-group]]:bg-foreground/[0.02]"
+								onSubmitStart={onSubmitStart}
+								onSubmitEnd={onSubmitEnd}
+								onSubmit={handleSend}
+								multiple
+								maxFiles={5}
+								maxFileSize={10 * 1024 * 1024}
+								globalDrop
+							>
+								<ChatShortcuts
+									isFocused={isFocused}
+									setIssueLinkOpen={setIssueLinkOpen}
+								/>
+								<IssueLinkCommand
+									open={issueLinkOpen}
+									onOpenChange={setIssueLinkOpen}
+									onSelect={addLinkedIssue}
+								/>
+								<FileDropOverlay visible={dragType === "files"} />
+								<PromptInputAttachments>
+									{renderAttachment ??
+										((file) => <PromptInputAttachment data={file} />)}
+								</PromptInputAttachments>
+								<LinkedIssues
+									issues={linkedIssues}
+									onRemove={removeLinkedIssue}
+								/>
+								<TiptapPromptEditor
+									cwd={cwd}
+									slashCommands={slashCommands}
+									placeholder="Ask to make changes, @mention files, run /commands"
+									focusShortcutText={showFocusHint ? focusShortcutText : undefined}
+								/>
+								<ChatComposerControls
+									availableModels={availableModels}
+									selectedModel={selectedModel}
+									setSelectedModel={setSelectedModel}
+									modelSelectorOpen={modelSelectorOpen}
+									setModelSelectorOpen={setModelSelectorOpen}
+									permissionMode={permissionMode}
+									setPermissionMode={setPermissionMode}
+									thinkingLevel={thinkingLevel}
+									setThinkingLevel={setThinkingLevel}
+									canAbort={canAbort}
+									submitStatus={submitStatus}
+									submitDisabled={submitDisabled}
+									onStop={onStop}
+									onLinkIssue={() => setIssueLinkOpen(true)}
+								/>
+							</PromptInput>
+						</div>
 					)}
 					<div className="py-1.5" />
 				</div>

apps/desktop/src/renderer/components/Chat/ChatInterface/components/SlashCommandMenu/SlashCommandMenu.tsx

@@ -28,8 +28,8 @@ export function SlashCommandMenu({
 		<PopoverContent
 			side="top"
 			align="start"
-			sideOffset={0}
-			className="w-[min(44rem,calc(100vw-2rem))] p-0 text-xs"
+			sideOffset={4}
+			className="w-[var(--radix-popover-trigger-width)] p-0 text-xs"
 			onOpenAutoFocus={(e) => e.preventDefault()}
 			onCloseAutoFocus={(e) => e.preventDefault()}
 		>

apps/desktop/src/renderer/components/Chat/ChatInterface/components/TiptapPromptEditor/FileMentionNode.tsx

@@ -0,0 +1,61 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import {
+	type NodeViewProps,
+	NodeViewWrapper,
+	ReactNodeViewRenderer,
+} from "@tiptap/react";
+import { cn } from "@superset/ui/utils";
+
+function FileMentionChip({ node, selected }: NodeViewProps) {
+	const path = node.attrs.path as string;
+	const name = path.split("/").pop() ?? path;
+
+	return (
+		<NodeViewWrapper as="span" className="inline-block align-middle">
+			<span
+				contentEditable={false}
+				className={cn(
+					"inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-xs text-foreground/90 select-none cursor-default transition-colors",
+					selected ? "bg-muted-foreground/15" : "bg-muted-foreground/10",
+				)}
+			>
+				<span className="text-muted-foreground">@</span>
+				<span>{name}</span>
+			</span>
+		</NodeViewWrapper>
+	);
+}
+
+export const FileMentionNode = Node.create({
+	name: "file-mention",
+	group: "inline",
+	inline: true,
+	atom: true,
+	selectable: true,
+	draggable: false,
+
+	addAttributes() {
+		return {
+			path: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("data-path"),
+				renderHTML: (attrs) => ({ "data-path": attrs.path }),
+			},
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: 'span[data-type="file-mention"]' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			mergeAttributes({ "data-type": "file-mention" }, HTMLAttributes),
+		];
+	},
+
+	addNodeView() {
+		return ReactNodeViewRenderer(FileMentionChip);
+	},
+});

apps/desktop/src/renderer/components/Chat/ChatInterface/components/TiptapPromptEditor/SlashCommandNode.tsx

@@ -0,0 +1,141 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import {
+	type NodeViewProps,
+	NodeViewWrapper,
+	ReactNodeViewRenderer,
+} from "@tiptap/react";
+import { cn } from "@superset/ui/utils";
+import { useCallback, useEffect, useRef } from "react";
+
+function SlashCommandChip({
+	node,
+	selected,
+	updateAttributes,
+	editor,
+	getPos,
+}: NodeViewProps) {
+	const name = node.attrs.name as string;
+	const args = (node.attrs.args as string) ?? "";
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	// Auto-focus the inline input when this chip is freshly inserted.
+	// Only run on mount; by then the editor view still holds focus (the suggestion
+	// plugin just committed the chip), so we can safely transfer focus into the input.
+	useEffect(() => {
+		inputRef.current?.focus();
+		// Position cursor at end of any pre-filled args
+		const len = inputRef.current?.value.length ?? 0;
+		inputRef.current?.setSelectionRange(len, len);
+	}, []); // mount-only
+
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			updateAttributes({ args: e.target.value });
+		},
+		[updateAttributes],
+	);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			// Tab or ArrowRight at the end of input → exit chip into the editor
+			if (
+				e.key === "Tab" ||
+				(e.key === "ArrowRight" &&
+					inputRef.current?.selectionStart === args.length)
+			) {
+				e.preventDefault();
+				e.stopPropagation();
+				const pos = getPos();
+				if (pos !== undefined) {
+					editor.chain().focus().setTextSelection(pos + node.nodeSize).run();
+				} else {
+					editor.commands.focus("end");
+				}
+			}
+			// Backspace on empty input → delete the chip and return focus to editor
+			if (e.key === "Backspace" && args === "") {
+				e.preventDefault();
+				e.stopPropagation();
+				const pos = getPos();
+				if (pos !== undefined) {
+					editor.chain()
+						.focus()
+						.deleteRange({ from: pos, to: pos + node.nodeSize })
+						.run();
+				}
+			}
+		},
+		[args, editor, getPos, node.nodeSize],
+	);
+
+	const placeholder = name;
+	// Size the input to its content, with a sensible minimum
+	const displayWidth = Math.max(args.length, placeholder.length, 4);
+
+	return (
+		<NodeViewWrapper as="span" className="inline-block align-middle">
+			<span
+				contentEditable={false}
+				className={cn(
+					"inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-xs select-none transition-colors",
+					selected ? "bg-muted-foreground/15" : "bg-muted-foreground/10",
+				)}
+			>
+				<span className="text-muted-foreground">/</span>
+				<span className="text-foreground/90">{name}</span>
+				<span className="text-muted-foreground/60">:</span>
+				<input
+					ref={inputRef}
+					className="bg-transparent border-none outline-none text-foreground/90 placeholder:text-muted-foreground/40 leading-none"
+					style={{ width: `${displayWidth}ch` }}
+					value={args}
+					placeholder={placeholder}
+					onChange={handleChange}
+					onKeyDown={handleKeyDown}
+					// Prevent ProseMirror from handling mouse events on the input
+					onMouseDown={(e) => e.stopPropagation()}
+					onClick={(e) => e.stopPropagation()}
+				/>
+			</span>
+		</NodeViewWrapper>
+	);
+}
+
+export const SlashCommandNode = Node.create({
+	name: "slash-command",
+	group: "inline",
+	inline: true,
+	atom: true,
+	selectable: true,
+	draggable: false,
+
+	addAttributes() {
+		return {
+			name: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("data-name"),
+				renderHTML: (attrs) => ({ "data-name": attrs.name }),
+			},
+			args: {
+				default: "",
+				parseHTML: (el) => el.getAttribute("data-args") ?? "",
+				renderHTML: (attrs) => (attrs.args ? { "data-args": attrs.args } : {}),
+			},
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: 'span[data-type="slash-command"]' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			mergeAttributes({ "data-type": "slash-command" }, HTMLAttributes),
+		];
+	},
+
+	addNodeView() {
+		return ReactNodeViewRenderer(SlashCommandChip);
+	},
+});