Chat Input

1"use client";
2 
3import { Extension } from "@tiptap/core";
4import { Mention as MentionExtension } from "@tiptap/extension-mention";
5import Placeholder from "@tiptap/extension-placeholder";
6import type { Editor, JSONContent } from "@tiptap/react";
7import { EditorContent, ReactRenderer, useEditor } from "@tiptap/react";
8import StarterKit from "@tiptap/starter-kit";
9import type { SuggestionProps } from "@tiptap/suggestion";
10import { ArrowUpIcon, Loader2, PlusIcon } from "lucide-react";
11 
12import {
13	type ComponentProps,
14	createContext,
15	forwardRef,
16	type ReactNode,
17	useCallback,
18	useContext,
19	useEffect,
20	useImperativeHandle,
21	useMemo,
22	useRef,
23	useState,
24} from "react";
25import tippy, { type Instance } from "tippy.js";
26import { Button } from "@/components/ui/button";
27import {
28	DropdownMenu,
29	DropdownMenuContent,
30	DropdownMenuItem,
31	DropdownMenuTrigger,
32} from "@/components/ui/dropdown-menu";
33import {
34	InputGroup,
35	InputGroupAddon,
36	InputGroupButton,
37	InputGroupText,
38} from "@/components/ui/input-group";
39import { cn } from "@/lib/utils";
40 
41export type ChatInputValue = JSONContent;
42 
43export type BaseMentionItem = {
44	id: string;
45	name: string;
46};
47 
48type MentionConfig<T extends BaseMentionItem = BaseMentionItem> = {
49	type: string;
50	trigger: string; // e.g., '@' or '/'
51	items: T[];
52	renderItem?: (item: T, isSelected: boolean) => ReactNode;
53	editorMentionClass?: string;
54};
55 
56export function createMentionConfig<
57	T extends BaseMentionItem = BaseMentionItem,
58>(config: MentionConfig<T>): MentionConfig<T> {
59	return config;
60}
61 
62type ChatInputContextType = {
63	// biome-ignore lint/suspicious/noExplicitAny: Needs to accept configs with different item types
64	mentionConfigs: MentionConfig<any>[];
65	// biome-ignore lint/suspicious/noExplicitAny: Needs to accept configs with different item types
66	addMentionConfig: (config: MentionConfig<any>) => void;
67	onSubmit: () => void;
68	onStop?: () => void;
69	isStreaming: boolean;
70	disabled: boolean;
71	value?: ChatInputValue;
72	onChange?: (value: ChatInputValue) => void;
73	editor: Editor | null;
74	setEditor: (editor: Editor | null) => void;
75};
76 
77const ChatInputContext = createContext<ChatInputContextType>({
78	mentionConfigs: [],
79	addMentionConfig: () => {},
80	onSubmit: () => {},
81	onStop: undefined,
82	isStreaming: false,
83	disabled: false,
84	value: undefined,
85	onChange: undefined,
86	editor: null,
87	setEditor: () => {},
88});
89 
90export function ChatInput({
91	children,
92	className,
93	onSubmit,
94	isStreaming = false,
95	onStop,
96	disabled = false,
97	value,
98	onChange,
99	...props
100// … truncated