@sybilion/uilib 1.3.44 → 1.3.46

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -8,7 +8,6 @@ import {
   type SlashCommandItem,
 } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
-import type { SlashItemCommandContext } from '#uilib/tiptap/slash-mention/types';
 import { ScrollRef } from '@homecode/ui';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -16,65 +15,40 @@ import { DocsHeaderActions } from '../docsHeaderActions';
 
 const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
 
-const DOCS_SAMPLE_COMMAND_ID = 'sample-command';
-
-/** Sample items so the docs demo still shows a `/` palette (`DEFAULT_CHAT_SLASH_ITEMS` is empty). */
-const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
+/** Sample items — default TipTap mention insert; optional `className` / `color` style the chip. */
+const DOCS_SLASH_ITEMS: SlashCommandItem[] = [
+  {
+    id: 'generate-dashboard',
+    label: 'Generate dashboard',
+    description: 'Insert /generate-dashboard',
+    color: 'var(--brand-color-600)',
+  },
   {
-    id: DOCS_SAMPLE_COMMAND_ID,
-    label: DOCS_SAMPLE_COMMAND_ID,
-    description:
-      'Demo handler — clears composer and runs `onSlashItemCommand` (no mention insert).',
+    id: 'performance-chart',
+    label: 'Performance chart (bigger font)',
+    description: 'Insert /PerformanceChart',
+    className: 'docs-slash-mention-accent',
+    color: '#16a34a',
+  },
+  {
+    id: 'mention-fallback',
+    label: 'Mention fallback',
+    description: 'Default mention styling only',
+    color: 'var(--foreground)',
   },
 ];
 
-const SAMPLE_COMMAND_PROGRESS_TEXT = 'Running sample command…';
-
-const SAMPLE_COMMAND_SUCCESS_TEXT = '✅ Sample command complete.';
-
-function makeMessage(
-  role: MessageRole,
-  text: string,
-  options?: { inProgress?: boolean },
-): Message {
+function makeMessage(role: MessageRole, text: string): Message {
   return {
     id: crypto.randomUUID(),
     role,
     text,
     timestamp: Date.now(),
-    ...(options?.inProgress ? { inProgress: true } : {}),
   };
 }
 
-/** Local-state equivalent of chat-context `updateMessageById`. */
-function updateMessageInPlace(
-  messages: Message[],
-  messageId: string,
-  patch: { role?: MessageRole; text?: string; inProgress?: boolean },
-): Message[] {
-  return messages.map(message => {
-    if (message.id !== messageId) return message;
-    const next: Message = { ...message };
-    if (patch.role != null) {
-      next.role = patch.role;
-    }
-    if (patch.text != null) {
-      next.text = patch.text;
-    }
-    if (patch.inProgress === true) {
-      next.inProgress = true;
-    } else if (
-      patch.inProgress === false ||
-      (patch.role != null && patch.role !== MessageRole.SYSTEM)
-    ) {
-      delete next.inProgress;
-    }
-    return next;
-  });
-}
-
 const ASSISTANT_REPLY_TEXT =
-  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+  'Demo reply. Slash picks insert inline mention chips; plain text on send uses each item id (e.g. /generate-dashboard).';
 
 export default function ChatSlashCommandsPage() {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -95,84 +69,33 @@ export default function ChatSlashCommandsPage() {
     messages.length > 0 &&
     messages[messages.length - 1]?.role === MessageRole.USER;
 
-  const runSampleCommand = useCallback(() => {
-    const progressId = crypto.randomUUID();
+  const onSubmit = useCallback((raw: string) => {
+    const text = raw.trim();
+    if (!text) return;
+
+    setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
     setIsLoading(true);
-    setMessages(prev => [
-      ...prev,
-      {
-        id: progressId,
-        role: MessageRole.SYSTEM,
-        text: SAMPLE_COMMAND_PROGRESS_TEXT,
-        timestamp: Date.now(),
-        inProgress: true,
-      },
-    ]);
 
     if (replyTimeoutRef.current != null) {
       clearTimeout(replyTimeoutRef.current);
     }
     replyTimeoutRef.current = setTimeout(() => {
       replyTimeoutRef.current = null;
-      setMessages(prev =>
-        updateMessageInPlace(prev, progressId, {
-          role: MessageRole.ASSISTANT,
-          text: SAMPLE_COMMAND_SUCCESS_TEXT,
-          inProgress: false,
-        }),
-      );
+      setMessages(prev => [
+        ...prev,
+        makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TEXT),
+      ]);
       setIsLoading(false);
-    }, 1200);
+    }, 900);
   }, []);
 
-  const onSlashItemCommand = useCallback(
-    ({ item }: SlashItemCommandContext) => {
-      if (item.id !== DOCS_SAMPLE_COMMAND_ID) {
-        return false;
-      }
-      queueMicrotask(() => runSampleCommand());
-      return true;
-    },
-    [runSampleCommand],
-  );
-
-  const onSubmit = useCallback(
-    (raw: string) => {
-      const text = raw.trim();
-      if (!text) return;
-
-      if (text === `/${DOCS_SAMPLE_COMMAND_ID}`) {
-        runSampleCommand();
-        return;
-      }
-
-      setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
-      setIsLoading(true);
-
-      if (replyTimeoutRef.current != null) {
-        clearTimeout(replyTimeoutRef.current);
-      }
-      replyTimeoutRef.current = setTimeout(() => {
-        replyTimeoutRef.current = null;
-        setMessages(prev => [
-          ...prev,
-          makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TEXT),
-        ]);
-        setIsLoading(false);
-      }, 900);
-    },
-    [runSampleCommand],
-  );
-
   return (
     <>
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Chat slash commands' }]}
         title="Chat slash commands"
-        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app; optional onSlashItemCommand can clear the composer and run an action instead of inserting a mention. Long-running handlers can append a SYSTEM message with inProgress while work is in flight, then update it in place (e.g. via updateMessageById) to a final assistant message when done.`}
-        actions={
-          <DocsHeaderActions slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS} />
-        }
+        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app — each item inserts an inline mention chip by default. Optional className and color on SlashCommandItem style the chip in the composer.`}
+        actions={<DocsHeaderActions slashCommandItems={DOCS_SLASH_ITEMS} />}
       />
       <PageContentSection>
         <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
@@ -180,13 +103,17 @@ export default function ChatSlashCommandsPage() {
           <Link className="underline underline-offset-2" to="/docs/chat">
             Chat
           </Link>{' '}
-          shell below: scrolling history, empty state, disclaimer, composer.
-          Type <kbd className="font-mono">/</kbd> at line start or after a
-          space; pick <kbd className="font-mono">sample-command</kbd> to run the
-          custom handler (shows an <kbd className="font-mono">inProgress</kbd>{' '}
-          shimmer, then updates the same message to a success assistant reply),
-          or send <kbd className="font-mono">/sample-command</kbd> with Enter.
+          shell below. Type <kbd className="font-mono">/</kbd> at line start or
+          after a space, then pick a command — the composer inserts a styled
+          mention chip. Items can set <kbd className="font-mono">className</kbd>{' '}
+          and <kbd className="font-mono">color</kbd> on{' '}
+          <kbd className="font-mono">SlashCommandItem</kbd>.
         </p>
+        <style>{`
+          .docs-slash-mention-accent {
+            font-size: 150%;
+          }
+        `}</style>
         <ChatChrome
           showResizeHandle={false}
           resizeHandle={undefined}
@@ -207,13 +134,12 @@ export default function ChatSlashCommandsPage() {
           effectiveScopeId="docs-chat-slash-inline"
           onPromptSubmit={onSubmit}
           onChatDeleted={() => {}}
-          slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
-          onSlashItemCommand={onSlashItemCommand}
+          slashCommandItems={DOCS_SLASH_ITEMS}
           promptPlaceholder='Ask something or type "/" for demo commands…'
           emptyState={{
-            title: 'Try a slash command',
+            title: 'Try slash commands',
             description:
-              'Pick sample-command from the palette or send /sample-command — inProgress placeholder shimmers, then becomes "✅ Sample command complete." in the same slot.',
+              'Pick a command from the palette to insert a mention chip with optional className and color.',
           }}
         />
       </PageContentSection>

package/src/tiptap/slash-mention/SlashSuggestionList.styl

@@ -46,3 +46,7 @@
 .itemDesc
   font-size var(--text-xs)
   color var(--muted-foreground)
+
+.mention
+  border-radius .3em
+  padding 0 .3em

package/src/tiptap/slash-mention/SlashSuggestionList.styl.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'itemDesc': string;
   'itemHighlighted': string;
   'itemLabel': string;
+  'mention': string;
   'root': string;
 }
 export const cssExports: CssExports;

package/src/tiptap/slash-mention/createSlashMentionExtension.ts

@@ -10,6 +10,7 @@ import {
   SlashSuggestionList,
   type SlashSuggestionListHandle,
 } from './SlashSuggestionList';
+import S from './SlashSuggestionList.styl';
 import { filterSlashItems } from './defaultChatSlashItems';
 import type {
   CreateSlashMentionExtensionOptions,
@@ -17,6 +18,30 @@ import type {
   SlashSuggestionPlacement,
 } from './types';
 
+const SlashMention = Mention.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      className: {
+        default: null,
+        parseHTML: element => element.getAttribute('data-slash-class'),
+        renderHTML: attributes => {
+          if (!attributes.className) return {};
+          return { 'data-slash-class': attributes.className };
+        },
+      },
+      color: {
+        default: null,
+        parseHTML: element => element.getAttribute('data-slash-color'),
+        renderHTML: attributes => {
+          if (!attributes.color) return {};
+          return { 'data-slash-color': attributes.color };
+        },
+      },
+    };
+  },
+});
+
 const SUGGESTION_GAP_PX = 4;
 
 function placeSlashSuggestionPopup(
@@ -124,28 +149,11 @@ export function slashMentionSuggestionRender(
   };
 }
 
-function clearSlashTriggerEditor(
-  editor: Editor,
-  range: { from: number; to: number },
-): void {
-  if (editor.isDestroyed) return;
-  try {
-    editor.chain().focus().deleteRange(range).clearContent().run();
-  } catch {
-    // Editor view may be tearing down during suggestion exit.
-  }
+function slashMentionChipStyle(color: string | null): string | undefined {
+  if (!color) return undefined;
+  return `color: ${color}; background-color: color-mix(in srgb, ${color} 30%, transparent);`;
 }
 
-function collapseEditorSelectionEnd(editor: Editor): void {
-  if (editor.isDestroyed) return;
-  try {
-    editor.view?.dom?.ownerDocument?.defaultView
-      ?.getSelection?.()
-      ?.collapseToEnd();
-  } catch {
-    // view.dom throws when editor is not mounted
-  }
-}
 function insertDefaultMention(
   editor: Editor,
   range: { from: number; to: number },
@@ -166,6 +174,8 @@ function insertDefaultMention(
           id: props.id,
           label: props.label,
           mentionSuggestionChar: slashChar,
+          className: props.className ?? null,
+          color: props.color ?? null,
         },
       },
       { type: 'text', text: ' ' },
@@ -212,27 +222,38 @@ export function createSlashMentionExtension({
     current: null,
   };
 
-  return Mention.configure({
+  return SlashMention.configure({
     renderText({ node }) {
       return `/${node.attrs.id as string}`;
     },
-    renderHTML({ options, node, suggestion }) {
-      const suggestionChar = suggestion?.char ?? slashChar;
+    renderHTML({ options, node }) {
       const id =
         typeof node.attrs.id === 'string'
           ? node.attrs.id
           : String(node.attrs.id ?? '');
+      const label =
+        typeof node.attrs.label === 'string' && node.attrs.label.trim() !== ''
+          ? node.attrs.label
+          : id;
+      const color =
+        typeof node.attrs.color === 'string' ? node.attrs.color : null;
+      const className = [S.mention, node.attrs.className]
+        .filter(Boolean)
+        .join(' ');
+      const chipStyle = slashMentionChipStyle(color);
+
       return [
         'span',
         mergeAttributes(
           {
             'data-type': 'mention',
             'data-slash-command': id,
-            class: 'slash-mention',
+            class: className,
+            ...(chipStyle ? { style: chipStyle } : {}),
           },
           options.HTMLAttributes,
         ),
-        `${suggestionChar}${id}`,
+        label,
       ];
     },
     suggestion: {
@@ -245,8 +266,6 @@ export function createSlashMentionExtension({
       command: ({ editor, range, props }) => {
         const item = props as SlashCommandItem;
         if (onItemCommand?.({ editor, range, item }) === true) {
-          clearSlashTriggerEditor(editor, range);
-          queueMicrotask(() => collapseEditorSelectionEnd(editor));
           return null;
         }
         insertDefaultMention(editor, range, item, slashChar);

package/src/tiptap/slash-mention/types.ts

@@ -4,6 +4,10 @@ export type SlashCommandItem = {
   id: string;
   label: string;
   description?: string;
+  /** Extra class on the inserted mention chip (merged with `slash-mention`). */
+  className?: string;
+  /** CSS color for chip text; background is 30% of this color mixed with transparent. */
+  color?: string;
 };
 
 export type SlashItemCommandContext = {
@@ -14,8 +18,9 @@ export type SlashItemCommandContext = {
 };
 
 /**
- * If provided, run when a slash item is picked. Return true to skip mention insert
- * (extension clears the trigger text from the composer).
+ * If provided, run when a slash item is picked. Return true to skip default mention insert
+ * and handle the composer yourself (e.g. `createChatPromptComposerHandle(editor).insertAtCaret`
+ * with `{ replaceRange: range }` to replace `/query` with a custom chip).
  */
 export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;