@mordn/chat-widget 0.5.1 → 0.6.0

package/dist/index.d.mts

@@ -89,6 +89,68 @@ interface ChatWidgetConfig {
      * overlays from the outside that fight the widget's own z-index.
      */
     headerActions?: ReactNode;
+    /**
+     * Generic in-input autocomplete plugins. Each plugin is triggered by a
+     * single character (`@`, `/`, `#`, …); when the user types that
+     * character the widget opens a popover, calls `fetch(query)` as they
+     * keep typing, renders the returned items, and on selection splices
+     * `onSelect(item)` text into the input.
+     *
+     * The widget knows nothing about the consumer's domain — the host app
+     * provides both the data (via `fetch`) and the inserted text shape
+     * (via `onSelect`). Add as many plugins as you want; one per trigger
+     * character.
+     */
+    inputPlugins?: InputPlugin[];
+}
+/**
+ * Item returned by an InputPlugin's fetch function. Renders as one row
+ * in the popover.
+ */
+interface InputPluginItem {
+    /** Stable id, used as the React key + passed back to onSelect. */
+    id: string;
+    /** Primary line shown in the popover row. */
+    label: string;
+    /** Optional muted second line (e.g. "8 holdings · USD"). */
+    sublabel?: string;
+}
+/**
+ * Definition of a single trigger-driven autocomplete in the chat input.
+ */
+interface InputPlugin {
+    /**
+     * Unique id used for keying / debugging. Not user-visible.
+     */
+    id: string;
+    /**
+     * Single character that opens the popover. Must be exactly one
+     * character. Common picks: '@', '/', '#'.
+     */
+    trigger: string;
+    /**
+     * Optional heading shown above results in the popover (e.g. "Mention",
+     * "Commands"). When omitted, no heading.
+     */
+    heading?: string;
+    /**
+     * Called with whatever the user has typed AFTER the trigger character
+     * (empty string immediately after triggering). Should return the
+     * matching items to render. The widget debounces calls; you don't
+     * need to.
+     */
+    fetch: (query: string) => Promise<InputPluginItem[]> | InputPluginItem[];
+    /**
+     * Called when the user picks an item. Returns the string to splice
+     * into the input in place of the trigger + query span. Include any
+     * trailing space the input should have after insertion.
+     */
+    onSelect: (item: InputPluginItem) => string;
+    /**
+     * Optional empty-state copy when fetch returns zero results.
+     * Defaults to "No results".
+     */
+    emptyText?: string;
 }
 interface StarterPrompt {
     /**
@@ -314,4 +376,4 @@ type StarterMessageItemProps = HTMLAttributes<HTMLButtonElement> & {
 };
 declare function StarterMessageItem({ className, prompt, onClick, ...props }: StarterMessageItemProps): react_jsx_runtime.JSX.Element;
 
-export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };
+export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, type InputPlugin, type InputPluginItem, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };

package/dist/index.d.ts

@@ -89,6 +89,68 @@ interface ChatWidgetConfig {
      * overlays from the outside that fight the widget's own z-index.
      */
     headerActions?: ReactNode;
+    /**
+     * Generic in-input autocomplete plugins. Each plugin is triggered by a
+     * single character (`@`, `/`, `#`, …); when the user types that
+     * character the widget opens a popover, calls `fetch(query)` as they
+     * keep typing, renders the returned items, and on selection splices
+     * `onSelect(item)` text into the input.
+     *
+     * The widget knows nothing about the consumer's domain — the host app
+     * provides both the data (via `fetch`) and the inserted text shape
+     * (via `onSelect`). Add as many plugins as you want; one per trigger
+     * character.
+     */
+    inputPlugins?: InputPlugin[];
+}
+/**
+ * Item returned by an InputPlugin's fetch function. Renders as one row
+ * in the popover.
+ */
+interface InputPluginItem {
+    /** Stable id, used as the React key + passed back to onSelect. */
+    id: string;
+    /** Primary line shown in the popover row. */
+    label: string;
+    /** Optional muted second line (e.g. "8 holdings · USD"). */
+    sublabel?: string;
+}
+/**
+ * Definition of a single trigger-driven autocomplete in the chat input.
+ */
+interface InputPlugin {
+    /**
+     * Unique id used for keying / debugging. Not user-visible.
+     */
+    id: string;
+    /**
+     * Single character that opens the popover. Must be exactly one
+     * character. Common picks: '@', '/', '#'.
+     */
+    trigger: string;
+    /**
+     * Optional heading shown above results in the popover (e.g. "Mention",
+     * "Commands"). When omitted, no heading.
+     */
+    heading?: string;
+    /**
+     * Called with whatever the user has typed AFTER the trigger character
+     * (empty string immediately after triggering). Should return the
+     * matching items to render. The widget debounces calls; you don't
+     * need to.
+     */
+    fetch: (query: string) => Promise<InputPluginItem[]> | InputPluginItem[];
+    /**
+     * Called when the user picks an item. Returns the string to splice
+     * into the input in place of the trigger + query span. Include any
+     * trailing space the input should have after insertion.
+     */
+    onSelect: (item: InputPluginItem) => string;
+    /**
+     * Optional empty-state copy when fetch returns zero results.
+     * Defaults to "No results".
+     */
+    emptyText?: string;
 }
 interface StarterPrompt {
     /**
@@ -314,4 +376,4 @@ type StarterMessageItemProps = HTMLAttributes<HTMLButtonElement> & {
 };
 declare function StarterMessageItem({ className, prompt, onClick, ...props }: StarterMessageItemProps): react_jsx_runtime.JSX.Element;
 
-export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };
+export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, type InputPlugin, type InputPluginItem, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };