Merge pull request #1912 from giselles-ai/feat/suggestion-input

feat: Add mention/suggestion functionality to text editor

Author: shige

docs/packages-license.md

@@ -2,7 +2,7 @@
 
 
 ## Summary
-* 858 MIT
+* 860 MIT
 * 188 Apache 2.0
 * 46 ISC
 * 27 New BSD
@@ -4262,6 +4262,17 @@ LGPL-3.0-or-later permitted
 
 
 
+<a name="@tiptap/extension-mention"></a>
+### @tiptap/extension-mention v2.11.5
+#### 
+
+##### Paths
+* /home/runner/work/giselle/giselle
+
+<a href="http://opensource.org/licenses/mit-license">MIT</a> permitted
+
+
+
 <a name="@tiptap/extension-ordered-list"></a>
 ### @tiptap/extension-ordered-list v2.11.5
 #### 
@@ -4372,6 +4383,17 @@ LGPL-3.0-or-later permitted
 
 
 
+<a name="@tiptap/suggestion"></a>
+### @tiptap/suggestion v2.11.5
+#### 
+
+##### Paths
+* /home/runner/work/giselle/giselle
+
+<a href="http://opensource.org/licenses/mit-license">MIT</a> permitted
+
+
+
 <a name="@trigger.dev/core"></a>
 ### @trigger.dev/core v4.0.4
 #### 

internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/prompt-panel.tsx

@@ -27,6 +27,10 @@ export function PromptPanel({ node }: { node: ImageGenerationNode }) {
 				updateNodeDataContent(node, { prompt: value });
 			}}
 			nodes={nodes}
+			connectedSources={connectedSources.map(({ node, output }) => ({
+				node,
+				output,
+			}))}
 			tools={(editor) => (
 				<DropdownMenu
 					trigger={<AtSignIcon className="w-[18px]" />}

internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/query-panel.tsx

@@ -99,6 +99,12 @@ export function QueryPanel({ node }: { node: QueryNode }) {
 						updateNodeDataContent(node, { query: value });
 					}}
 					nodes={connectedInputsWithoutDatasource.map((input) => input.node)}
+					connectedSources={connectedInputsWithoutDatasource.map(
+						({ node, output }) => ({
+							node,
+							output,
+						}),
+					)}
 					header={
 						connectedDatasourceInputs.length > 0 ? (
 							<div className="flex items-center gap-[6px] flex-wrap">

internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/prompt-panel.tsx

@@ -26,6 +26,16 @@ export function PromptPanel({ node }: { node: TextGenerationNode }) {
 				updateNodeDataContent(node, { prompt: value });
 			}}
 			nodes={connectedSources.map((source) => source.node)}
+			connectedSources={connectedSources.map(
+				({ node, id, label, accessor }) => ({
+					node,
+					output: {
+						id,
+						label,
+						accessor,
+					},
+				}),
+			)}
 			tools={(editor) => (
 				<DropdownMenu
 					trigger={<AtSignIcon className="w-[18px]" />}

packages/text-editor/package.json

@@ -34,8 +34,10 @@
 		"@giselle-sdk/data-type": "workspace:^",
 		"@giselle-sdk/giselle": "workspace:^",
 		"@giselle-sdk/text-editor-utils": "workspace:^",
+		"@tiptap/extension-mention": "catalog:",
 		"@tiptap/extension-placeholder": "catalog:",
 		"@tiptap/react": "catalog:",
+		"@tiptap/suggestion": "catalog:",
 		"clsx": "catalog:",
 		"lucide-react": "catalog:",
 		"radix-ui": "catalog:",

packages/text-editor/src/react/component.tsx

@@ -1,5 +1,6 @@
-import type { Node } from "@giselle-sdk/data-type";
+import type { Node, Output } from "@giselle-sdk/data-type";
 import { extensions as baseExtensions } from "@giselle-sdk/text-editor-utils";
+import Mention from "@tiptap/extension-mention";
 import Placeholder from "@tiptap/extension-placeholder";
 import { type Editor, EditorProvider, useCurrentEditor } from "@tiptap/react";
 import clsx from "clsx/lite";
@@ -13,6 +14,7 @@ import {
 import { Toolbar as ToolbarPrimitive } from "radix-ui";
 import { type ReactNode, useMemo } from "react";
 import { SourceExtensionReact } from "./source-extension-react";
+import { createSuggestion } from "./suggestion";
 
 function Toolbar({ tools }: { tools?: (editor: Editor) => ReactNode }) {
 	const { editor } = useCurrentEditor();
@@ -119,32 +121,48 @@ function Toolbar({ tools }: { tools?: (editor: Editor) => ReactNode }) {
 	);
 }
 
+export interface ConnectedSource {
+	node: Node;
+	output: Output;
+}
+
 export function TextEditor({
 	value,
 	onValueChange,
 	tools,
 	nodes,
+	connectedSources,
 	placeholder,
 	header,
 }: {
 	value?: string;
 	onValueChange?: (value: string) => void;
 	tools?: (editor: Editor) => ReactNode;
 	nodes?: Node[];
+	connectedSources?: ConnectedSource[];
 	placeholder?: string;
 	header?: ReactNode;
 }) {
 	const extensions = useMemo(() => {
+		const mentionExtension = Mention.configure({
+			suggestion: createSuggestion(connectedSources),
+		});
+
 		return nodes === undefined
-			? [...baseExtensions, Placeholder.configure({ placeholder })]
+			? [
+					...baseExtensions,
+					mentionExtension,
+					Placeholder.configure({ placeholder }),
+				]
 			: [
 					...baseExtensions,
 					SourceExtensionReact.configure({
 						nodes,
 					}),
+					mentionExtension,
 					Placeholder.configure({ placeholder }),
 				];
-	}, [nodes, placeholder]);
+	}, [nodes, connectedSources, placeholder]);
 	return (
 		<div className="flex flex-col h-full w-full">
 			<EditorProvider

packages/text-editor/src/react/suggestion-list.tsx

@@ -0,0 +1,104 @@
+import type { Node as GiselleNode, Output } from "@giselle-sdk/data-type";
+import { defaultName } from "@giselle-sdk/giselle/react";
+import type { SuggestionProps } from "@tiptap/suggestion";
+import clsx from "clsx/lite";
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useState,
+} from "react";
+
+export interface SuggestionItem {
+	id: string;
+	node: GiselleNode;
+	output: Output;
+	label: string;
+}
+interface SuggestionListProps extends SuggestionProps<SuggestionItem> {}
+export interface SuggestionListRef {
+	onKeyDown: (props: { event: KeyboardEvent }) => boolean;
+}
+
+export const SuggestionList = forwardRef<
+	SuggestionListRef,
+	SuggestionListProps
+>(({ items, command }, ref) => {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	useEffect(() => {
+		if (items.length >= 0) {
+			setSelectedIndex(0);
+		}
+	}, [items.length]);
+	const selectItem = useCallback(
+		(index: number) => {
+			const item = items[index];
+			if (item) {
+				command(item);
+			}
+		},
+		[items, command],
+	);
+
+	useImperativeHandle(ref, () => ({
+		onKeyDown: ({ event }) => {
+			if (items.length === 0) {
+				return false;
+			}
+
+			if (event.key === "ArrowUp") {
+				setSelectedIndex((prev) => (prev + items.length - 1) % items.length);
+				return true;
+			}
+			if (event.key === "ArrowDown") {
+				setSelectedIndex((prev) => (prev + 1) % items.length);
+				return true;
+			}
+
+			if (event.key === "Enter") {
+				selectItem(selectedIndex);
+				return true;
+			}
+
+			return false;
+		},
+	}));
+
+	if (items.length === 0) {
+		return null;
+	}
+
+	return (
+		<div
+			className={clsx(
+				"rounded-[8px] bg-(image:--glass-bg)",
+				"p-[4px] border border-glass-border/20 backdrop-blur-md shadow-xl",
+				"after:absolute after:bg-(image:--glass-highlight-bg) after:left-4 after:right-4 after:h-px after:top-0",
+				"w-fit",
+			)}
+		>
+			{items.map(({ id, node, output: { label } }, index) => (
+				<button
+					type="button"
+					key={id}
+					onClick={() => selectItem(index)}
+					className={clsx(
+						"block w-full text-left px-[8px] py-[6px]",
+						"text-[14px] text-text",
+						"rounded-[4px]",
+						"outline-none cursor-pointer",
+						"transition-colors",
+						selectedIndex === index
+							? "bg-ghost-element-hover"
+							: "hover:bg-ghost-element-hover/25",
+					)}
+				>
+					{node.name ?? defaultName(node)} / {label}
+				</button>
+			))}
+		</div>
+	);
+});
+
+SuggestionList.displayName = "SuggestionList";