Slash Highlighted Textarea

Композер-инпут с инлайн-подсветкой /slash-команд и @mention-токенов (twoplane editor).

"use client";

import { useState } from "react";
import { SlashHighlightedTextarea } from "@/components/ui/slash-highlighted-textarea";

// Real commands + connectors — only these are highlighted; unknown
// /foo or @bar stay plain text (как в боевом чат-инпуте).
const COMMANDS = ["summarize-pdf", "create-skill", "job-search-ru"];
const CONNECTORS = ["notion", "github", "linear"];

export default function Particle() {
  const [value, setValue] = useState(
    "/summarize-pdf разбери документ @notion (а @nonexistent — нет)",
  );
  return (
    <div className="w-full max-w-xl p-4">
      <div className="rounded-2xl border bg-card p-1 shadow-sm">
        <SlashHighlightedTextarea
          commands={COMMANDS}
          connectors={CONNECTORS}
          onChange={(e) => setValue(e.target.value)}
          value={value}
        />
      </div>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/slash-highlighted-textarea

Использование

import { SlashHighlightedTextarea } from "@/components/ui/slash-highlighted-textarea";
 
const [value, setValue] = useState("/summarize-pdf разбери @notion");
 
<SlashHighlightedTextarea
  value={value}
  onChange={(e) => setValue(e.target.value)}
  commands={availableSkills.map((s) => s.id)}
  connectors={availableConnectors.map((c) => c.id)}
/>

Подсвечиваются только реальные команды и коннекторы из commands / connectors — произвольные /foo и @bar остаются обычным текстом (как в боевом чат-инпуте). Если список не передан, подсветка для этого типа токена синтаксическая (любой).

Токены становятся интерактивными чипами (ChatTokenChip с hover-карточкой), когда передан onTokenOpen:

<SlashHighlightedTextarea
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onTokenOpen={(kind, id) => openCard(kind, id)}
  tokenMeta={{ skills: { "summarize-pdf": { description: "Саммари PDF" } } }}
/>

Как работает

Twoplane editor: зеркальный <div> за прозрачной <textarea>. Textarea владеет курсором/вводом, зеркало красит токены. Оба элемента имеют идентичные font/padding/line-height — иначе подсветка «уедет» от каретки.

API

ChatPromptInputTextareaProps (value, onChange, minHeight, maxHeight, …) плюс:

Prop	Тип	Описание
`commands`	`readonly string[]`	Валидные `/slash`-команды — подсвечиваются только они (omit = любой).
`connectors`	`readonly string[]`	Валидные `@mention`-коннекторы — подсвечиваются только они (omit = любой).
`textareaRef`	`Ref<HTMLTextAreaElement>`	Доступ к нативной textarea (чтение/запись selection).
`tokenMeta`	`SlashTokenMeta`	Текст hover-карточек для `/skill` и `@connector` по id.
`onTokenOpen`	`(kind, id) => void`	Клик по токену; включает интерактивные чипы.

На этой странице

Установка Использование Как работает API