composeai 0.1.5 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/dist/index.cjs +931 -74
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +188 -20
- package/dist/index.d.ts +188 -20
- package/dist/index.js +933 -76
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/composer.css +293 -9
package/dist/index.d.cts
CHANGED
|
@@ -30,6 +30,8 @@ interface ComposerIcons {
|
|
|
30
30
|
stop: IconComponent;
|
|
31
31
|
/** Toolbar: attach any file. */
|
|
32
32
|
attach: IconComponent;
|
|
33
|
+
/** Compact variant: the "+" trigger that opens the quick-actions popover. */
|
|
34
|
+
plus: IconComponent;
|
|
33
35
|
/** Toolbar: pick an image. */
|
|
34
36
|
image: IconComponent;
|
|
35
37
|
/** Voice plugin: start recording. */
|
|
@@ -303,6 +305,12 @@ interface MentionConfig {
|
|
|
303
305
|
}
|
|
304
306
|
interface SlashConfig {
|
|
305
307
|
items: SlashCommand[] | ((query: string) => SlashCommand[] | Promise<SlashCommand[]>);
|
|
308
|
+
/**
|
|
309
|
+
* The symbol that opens this menu. Defaults to `"/"`. Any single character
|
|
310
|
+
* works — `"/"` for commands, `"#"` for issues/tags, `":"` for emoji, etc.
|
|
311
|
+
* When registering {@link ComposerFeatures.slashCommands | multiple configs},
|
|
312
|
+
* give each a DISTINCT trigger.
|
|
313
|
+
*/
|
|
306
314
|
trigger?: string;
|
|
307
315
|
maxItems?: number;
|
|
308
316
|
}
|
|
@@ -523,16 +531,115 @@ interface GhostedAutoCompleteConfig {
|
|
|
523
531
|
*/
|
|
524
532
|
minLength?: number;
|
|
525
533
|
}
|
|
534
|
+
/**
|
|
535
|
+
* Object form of {@link ComposerProps.animatedPlaceholder}. Use it when you
|
|
536
|
+
* need to opt into looping; the bare `string[]` form is equivalent to
|
|
537
|
+
* `{ phrases, loop: false }`.
|
|
538
|
+
*/
|
|
539
|
+
interface AnimatedPlaceholderConfig {
|
|
540
|
+
/** Phrases the empty editor types out, in order. */
|
|
541
|
+
phrases: string[];
|
|
542
|
+
/**
|
|
543
|
+
* Cycle the list forever. Defaults to `false` — the list plays through once
|
|
544
|
+
* and then settles (see {@link ComposerProps.animatedPlaceholder}).
|
|
545
|
+
*/
|
|
546
|
+
loop?: boolean;
|
|
547
|
+
}
|
|
548
|
+
/**
|
|
549
|
+
* Editor helpers handed to a {@link CustomAction} when it's clicked, so a
|
|
550
|
+
* custom toolbar button can mutate the composer the same way a slash command
|
|
551
|
+
* can. All three are safe to call outside any Lexical update scope — they wrap
|
|
552
|
+
* `editor.update(...)` internally.
|
|
553
|
+
*/
|
|
554
|
+
interface CustomActionContext {
|
|
555
|
+
/** Insert plain text at the current selection. */
|
|
556
|
+
insertText: (text: string) => void;
|
|
557
|
+
/**
|
|
558
|
+
* Insert markdown at the current selection. Multi-line aware: each newline
|
|
559
|
+
* becomes a real paragraph break so fences / lists / headings form.
|
|
560
|
+
*/
|
|
561
|
+
insertMarkdown: (markdown: string) => void;
|
|
562
|
+
/** Submit the composer immediately (same pipeline as the Send button). */
|
|
563
|
+
submit: () => void;
|
|
564
|
+
}
|
|
565
|
+
/**
|
|
566
|
+
* A consumer-defined toolbar action. Renders as a button in the `full`
|
|
567
|
+
* variant's toolbar and as a row in the compact variant's "+" popover, placed
|
|
568
|
+
* between the built-in actions and `toolbarExtras`.
|
|
569
|
+
*
|
|
570
|
+
* @example
|
|
571
|
+
* ```tsx
|
|
572
|
+
* features={{
|
|
573
|
+
* custom: [
|
|
574
|
+
* {
|
|
575
|
+
* title: "Insert template",
|
|
576
|
+
* icon: <FileIcon />,
|
|
577
|
+
* onClick: ({ insertMarkdown }) => insertMarkdown("## Summary\n- "),
|
|
578
|
+
* },
|
|
579
|
+
* {
|
|
580
|
+
* title: "Formal tone",
|
|
581
|
+
* icon: <WandIcon />,
|
|
582
|
+
* active: tone === "formal",
|
|
583
|
+
* onClick: () => setTone((t) => (t === "formal" ? "neutral" : "formal")),
|
|
584
|
+
* },
|
|
585
|
+
* ],
|
|
586
|
+
* }}
|
|
587
|
+
* ```
|
|
588
|
+
*/
|
|
589
|
+
interface CustomAction {
|
|
590
|
+
/** Stable identifier (React key). Falls back to the array index if omitted. */
|
|
591
|
+
id?: string;
|
|
592
|
+
/** Tooltip text and accessible label for the control. */
|
|
593
|
+
title: string;
|
|
594
|
+
/** Leading icon — the toolbar button glyph / the menu-row icon. */
|
|
595
|
+
icon: ReactNode;
|
|
596
|
+
/** Click handler. Receives editor helpers ({@link CustomActionContext}). */
|
|
597
|
+
onClick: (ctx: CustomActionContext) => void;
|
|
598
|
+
/** Render in a pressed / highlighted state — for toggle-style actions. */
|
|
599
|
+
active?: boolean;
|
|
600
|
+
/** Disable the control (greyed out, not clickable). */
|
|
601
|
+
disabled?: boolean;
|
|
602
|
+
}
|
|
526
603
|
interface ComposerFeatures {
|
|
527
604
|
/** `true` (default) → hybrid mode. Pass a {@link MarkdownConfig} to opt
|
|
528
605
|
* into `"live"` (Notion-style) or otherwise customise behaviour. */
|
|
529
606
|
markdown?: boolean | MarkdownConfig;
|
|
530
607
|
attachments?: boolean | AttachmentsConfig;
|
|
531
608
|
mentions?: false | MentionConfig;
|
|
532
|
-
|
|
609
|
+
/**
|
|
610
|
+
* Trigger-driven command menus. Each {@link SlashConfig} binds a trigger
|
|
611
|
+
* symbol (`trigger`, default `"/"`) to a list of {@link SlashCommand}s, and
|
|
612
|
+
* every command runs a callback action via `onSelect(ctx)` when chosen.
|
|
613
|
+
*
|
|
614
|
+
* Pass a SINGLE config for one trigger, or an ARRAY to register **multiple
|
|
615
|
+
* trigger symbols at once** — each with its own menu and actions. This lets a
|
|
616
|
+
* consumer wire, say, `"/"` → commands AND `"#"` → issues side-by-side
|
|
617
|
+
* (alongside the separate `@` mentions menu). Give each config a distinct
|
|
618
|
+
* `trigger`.
|
|
619
|
+
*
|
|
620
|
+
* @example
|
|
621
|
+
* ```tsx
|
|
622
|
+
* features={{
|
|
623
|
+
* slashCommands: [
|
|
624
|
+
* { trigger: "/", items: commands }, // each command's onSelect runs an action
|
|
625
|
+
* { trigger: "#", items: issues }, // insert a link, etc.
|
|
626
|
+
* ],
|
|
627
|
+
* }}
|
|
628
|
+
* ```
|
|
629
|
+
*/
|
|
630
|
+
slashCommands?: false | SlashConfig | SlashConfig[];
|
|
533
631
|
voice?: boolean;
|
|
534
632
|
mermaid?: boolean | MermaidConfig;
|
|
535
633
|
web?: boolean;
|
|
634
|
+
/**
|
|
635
|
+
* Consumer-defined toolbar actions. Each entry ({@link CustomAction})
|
|
636
|
+
* renders as a button in the `full` variant's toolbar and as a row in the
|
|
637
|
+
* compact variant's "+" popover, between the built-in actions and
|
|
638
|
+
* `toolbarExtras`. The click handler receives editor helpers
|
|
639
|
+
* ({@link CustomActionContext}) so it can insert text/markdown or submit.
|
|
640
|
+
* Defaults to `[]` (no custom actions).
|
|
641
|
+
*/
|
|
642
|
+
custom?: CustomAction[];
|
|
536
643
|
/**
|
|
537
644
|
* Inline ghost-text autocomplete suggested from a list. Accepts a plain
|
|
538
645
|
* `string[]` shorthand or a {@link GhostedAutoCompleteConfig} for
|
|
@@ -655,6 +762,46 @@ interface ComposerProps {
|
|
|
655
762
|
*/
|
|
656
763
|
focusShortcut?: string | false | null;
|
|
657
764
|
placeholder?: string;
|
|
765
|
+
/**
|
|
766
|
+
* Animated placeholder: a list of phrases the empty editor cycles through
|
|
767
|
+
* with a typewriter effect — each phrase is revealed one character at a
|
|
768
|
+
* time, held, erased, and the next begins. The animation takes precedence
|
|
769
|
+
* over the static {@link placeholder} while the editor is empty and pauses
|
|
770
|
+
* the moment the user starts typing.
|
|
771
|
+
*
|
|
772
|
+
* Pass a `string[]` for the default behaviour, or an
|
|
773
|
+
* {@link AnimatedPlaceholderConfig} to enable looping.
|
|
774
|
+
*
|
|
775
|
+
* **Looping** (`loop`, default `false`):
|
|
776
|
+
* - `loop: false` — play through the list once, then settle: on the
|
|
777
|
+
* {@link placeholder} prop if one was given, otherwise on the last phrase
|
|
778
|
+
* (left on screen).
|
|
779
|
+
* - `loop: true` — cycle the list forever.
|
|
780
|
+
*
|
|
781
|
+
* Honours `prefers-reduced-motion` by showing the first phrase statically.
|
|
782
|
+
*
|
|
783
|
+
* @example
|
|
784
|
+
* // Play once, then rest on the last phrase (no `placeholder` given):
|
|
785
|
+
* <Composer
|
|
786
|
+
* animatedPlaceholder={[
|
|
787
|
+
* "Ask me anything…",
|
|
788
|
+
* "Summarize this thread",
|
|
789
|
+
* "Draft a reply to Alex",
|
|
790
|
+
* ]}
|
|
791
|
+
* onSend={...}
|
|
792
|
+
* />
|
|
793
|
+
*
|
|
794
|
+
* @example
|
|
795
|
+
* // Loop forever:
|
|
796
|
+
* <Composer
|
|
797
|
+
* animatedPlaceholder={{
|
|
798
|
+
* phrases: ["Ask me anything…", "Summarize this thread"],
|
|
799
|
+
* loop: true,
|
|
800
|
+
* }}
|
|
801
|
+
* onSend={...}
|
|
802
|
+
* />
|
|
803
|
+
*/
|
|
804
|
+
animatedPlaceholder?: string[] | AnimatedPlaceholderConfig;
|
|
658
805
|
/**
|
|
659
806
|
* Shorthand for `classNames.root`. Kept for back-compat; if both are set,
|
|
660
807
|
* the two are merged (`className` first, then `classNames.root`).
|
|
@@ -719,6 +866,27 @@ interface ComposerProps {
|
|
|
719
866
|
* `mode` and work in both.
|
|
720
867
|
*/
|
|
721
868
|
mode?: "markdown" | "text";
|
|
869
|
+
/**
|
|
870
|
+
* Visual layout of the composer card.
|
|
871
|
+
*
|
|
872
|
+
* - `"compact"` (default): a slim chat-bar that reads as a single line
|
|
873
|
+
* and grows as the user types or presses **Shift+Enter**. The quick
|
|
874
|
+
* actions that would otherwise sit in the toolbar (attach, image, web,
|
|
875
|
+
* and any `toolbarExtras`) collapse behind a single **"+"** button that
|
|
876
|
+
* opens a popover; the voice button floats to the right, beside Send.
|
|
877
|
+
* This keeps the resting state to one tidy row while still exposing
|
|
878
|
+
* everything one tap away.
|
|
879
|
+
*
|
|
880
|
+
* - `"full"`: the classic layout — a multi-line editor area with a full
|
|
881
|
+
* toolbar row (all action buttons visible) above the Send button.
|
|
882
|
+
* Honours `multiline` exactly as before (`multiline: false` collapses
|
|
883
|
+
* it to the inline single-row bar).
|
|
884
|
+
*
|
|
885
|
+
* Independent of `multiline`: `variant` controls the *chrome layout*, while
|
|
886
|
+
* `multiline` controls whether newlines are allowed. The compact variant
|
|
887
|
+
* defaults to `multiline: true` so Shift+Enter can grow it.
|
|
888
|
+
*/
|
|
889
|
+
variant?: "compact" | "full";
|
|
722
890
|
/** Toggle / configure built-in plugins. */
|
|
723
891
|
features?: ComposerFeatures;
|
|
724
892
|
/** Extra controls rendered after the built-in toolbar buttons. */
|
|
@@ -745,24 +913,24 @@ interface ComposerProps {
|
|
|
745
913
|
*/
|
|
746
914
|
submitOnEnter?: boolean;
|
|
747
915
|
/**
|
|
748
|
-
* Smart
|
|
749
|
-
* effect when `multiline` is `true`.
|
|
750
|
-
*
|
|
751
|
-
*
|
|
752
|
-
*
|
|
753
|
-
*
|
|
754
|
-
*
|
|
755
|
-
*
|
|
756
|
-
*
|
|
757
|
-
*
|
|
758
|
-
*
|
|
759
|
-
*
|
|
760
|
-
*
|
|
761
|
-
*
|
|
762
|
-
*
|
|
763
|
-
*
|
|
764
|
-
*
|
|
765
|
-
*
|
|
916
|
+
* Smart list continuation on Enter. Defaults to `true`. Only takes
|
|
917
|
+
* effect in markdown mode when `multiline` is `true`.
|
|
918
|
+
*
|
|
919
|
+
* When the cursor sits inside a list paragraph (`- `, `* `, `+ `, or
|
|
920
|
+
* `N. `), Enter continues the list with the next marker (bullet
|
|
921
|
+
* character preserved, numbers auto-incremented). Pressing Enter on an
|
|
922
|
+
* empty list item exits the list — the marker is cleared and the cursor
|
|
923
|
+
* stays on the now-plain line, where the next Enter sends.
|
|
924
|
+
*
|
|
925
|
+
* This is the ONLY case where plain Enter inserts a line rather than
|
|
926
|
+
* submitting. Everywhere else Enter sends (subject to `submitOnEnter`)
|
|
927
|
+
* regardless of how many lines the draft already holds, and Shift+Enter
|
|
928
|
+
* is the newline gesture. Set to `false` to disable list continuation so
|
|
929
|
+
* Enter inside a bullet sends like anywhere else.
|
|
930
|
+
*
|
|
931
|
+
* NOTE: earlier versions also blocked Enter from submitting once the
|
|
932
|
+
* editor held more than one line (forcing Cmd/Ctrl+Enter). That rule was
|
|
933
|
+
* removed — Enter now sends whether the draft is one line or many.
|
|
766
934
|
*/
|
|
767
935
|
smartNewline?: boolean;
|
|
768
936
|
/**
|
|
@@ -902,4 +1070,4 @@ interface SuggestionRowProps {
|
|
|
902
1070
|
}
|
|
903
1071
|
declare function SuggestionRow({ items, onSelect, className }: SuggestionRowProps): react.JSX.Element;
|
|
904
1072
|
|
|
905
|
-
export { type Attachment, type AttachmentKind, type AttachmentOptions, type AttachmentStatus, type AttachmentTypeOption, type AttachmentsConfig, Composer, type ComposerFeatures, type ComposerHandle, type ComposerIcons, type ComposerPromptBehavior, type ComposerPromptsConfig, type ComposerProps, type ComposerSlot, type ComposerSlotClassNames, type ComposerSlots, type ComposerSubmitPayload, type ComposerSxMap, type ComposerSxValue, type ComposerTokens, type DiagramRenderer, type GhostedAutoCompleteConfig, type IconComponent, type IconProps, type MarkdownConfig, type MarkdownMode, type MentionConfig, type MentionItem, type MentionRef, type MermaidConfig, type SendButtonRenderProps, type SlashCommand, type SlashCommandContext, type SlashConfig, type StopButtonRenderProps, SuggestionRow, type SuggestionRowProps };
|
|
1073
|
+
export { type AnimatedPlaceholderConfig, type Attachment, type AttachmentKind, type AttachmentOptions, type AttachmentStatus, type AttachmentTypeOption, type AttachmentsConfig, Composer, type ComposerFeatures, type ComposerHandle, type ComposerIcons, type ComposerPromptBehavior, type ComposerPromptsConfig, type ComposerProps, type ComposerSlot, type ComposerSlotClassNames, type ComposerSlots, type ComposerSubmitPayload, type ComposerSxMap, type ComposerSxValue, type ComposerTokens, type CustomAction, type CustomActionContext, type DiagramRenderer, type GhostedAutoCompleteConfig, type IconComponent, type IconProps, type MarkdownConfig, type MarkdownMode, type MentionConfig, type MentionItem, type MentionRef, type MermaidConfig, type SendButtonRenderProps, type SlashCommand, type SlashCommandContext, type SlashConfig, type StopButtonRenderProps, SuggestionRow, type SuggestionRowProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -30,6 +30,8 @@ interface ComposerIcons {
|
|
|
30
30
|
stop: IconComponent;
|
|
31
31
|
/** Toolbar: attach any file. */
|
|
32
32
|
attach: IconComponent;
|
|
33
|
+
/** Compact variant: the "+" trigger that opens the quick-actions popover. */
|
|
34
|
+
plus: IconComponent;
|
|
33
35
|
/** Toolbar: pick an image. */
|
|
34
36
|
image: IconComponent;
|
|
35
37
|
/** Voice plugin: start recording. */
|
|
@@ -303,6 +305,12 @@ interface MentionConfig {
|
|
|
303
305
|
}
|
|
304
306
|
interface SlashConfig {
|
|
305
307
|
items: SlashCommand[] | ((query: string) => SlashCommand[] | Promise<SlashCommand[]>);
|
|
308
|
+
/**
|
|
309
|
+
* The symbol that opens this menu. Defaults to `"/"`. Any single character
|
|
310
|
+
* works — `"/"` for commands, `"#"` for issues/tags, `":"` for emoji, etc.
|
|
311
|
+
* When registering {@link ComposerFeatures.slashCommands | multiple configs},
|
|
312
|
+
* give each a DISTINCT trigger.
|
|
313
|
+
*/
|
|
306
314
|
trigger?: string;
|
|
307
315
|
maxItems?: number;
|
|
308
316
|
}
|
|
@@ -523,16 +531,115 @@ interface GhostedAutoCompleteConfig {
|
|
|
523
531
|
*/
|
|
524
532
|
minLength?: number;
|
|
525
533
|
}
|
|
534
|
+
/**
|
|
535
|
+
* Object form of {@link ComposerProps.animatedPlaceholder}. Use it when you
|
|
536
|
+
* need to opt into looping; the bare `string[]` form is equivalent to
|
|
537
|
+
* `{ phrases, loop: false }`.
|
|
538
|
+
*/
|
|
539
|
+
interface AnimatedPlaceholderConfig {
|
|
540
|
+
/** Phrases the empty editor types out, in order. */
|
|
541
|
+
phrases: string[];
|
|
542
|
+
/**
|
|
543
|
+
* Cycle the list forever. Defaults to `false` — the list plays through once
|
|
544
|
+
* and then settles (see {@link ComposerProps.animatedPlaceholder}).
|
|
545
|
+
*/
|
|
546
|
+
loop?: boolean;
|
|
547
|
+
}
|
|
548
|
+
/**
|
|
549
|
+
* Editor helpers handed to a {@link CustomAction} when it's clicked, so a
|
|
550
|
+
* custom toolbar button can mutate the composer the same way a slash command
|
|
551
|
+
* can. All three are safe to call outside any Lexical update scope — they wrap
|
|
552
|
+
* `editor.update(...)` internally.
|
|
553
|
+
*/
|
|
554
|
+
interface CustomActionContext {
|
|
555
|
+
/** Insert plain text at the current selection. */
|
|
556
|
+
insertText: (text: string) => void;
|
|
557
|
+
/**
|
|
558
|
+
* Insert markdown at the current selection. Multi-line aware: each newline
|
|
559
|
+
* becomes a real paragraph break so fences / lists / headings form.
|
|
560
|
+
*/
|
|
561
|
+
insertMarkdown: (markdown: string) => void;
|
|
562
|
+
/** Submit the composer immediately (same pipeline as the Send button). */
|
|
563
|
+
submit: () => void;
|
|
564
|
+
}
|
|
565
|
+
/**
|
|
566
|
+
* A consumer-defined toolbar action. Renders as a button in the `full`
|
|
567
|
+
* variant's toolbar and as a row in the compact variant's "+" popover, placed
|
|
568
|
+
* between the built-in actions and `toolbarExtras`.
|
|
569
|
+
*
|
|
570
|
+
* @example
|
|
571
|
+
* ```tsx
|
|
572
|
+
* features={{
|
|
573
|
+
* custom: [
|
|
574
|
+
* {
|
|
575
|
+
* title: "Insert template",
|
|
576
|
+
* icon: <FileIcon />,
|
|
577
|
+
* onClick: ({ insertMarkdown }) => insertMarkdown("## Summary\n- "),
|
|
578
|
+
* },
|
|
579
|
+
* {
|
|
580
|
+
* title: "Formal tone",
|
|
581
|
+
* icon: <WandIcon />,
|
|
582
|
+
* active: tone === "formal",
|
|
583
|
+
* onClick: () => setTone((t) => (t === "formal" ? "neutral" : "formal")),
|
|
584
|
+
* },
|
|
585
|
+
* ],
|
|
586
|
+
* }}
|
|
587
|
+
* ```
|
|
588
|
+
*/
|
|
589
|
+
interface CustomAction {
|
|
590
|
+
/** Stable identifier (React key). Falls back to the array index if omitted. */
|
|
591
|
+
id?: string;
|
|
592
|
+
/** Tooltip text and accessible label for the control. */
|
|
593
|
+
title: string;
|
|
594
|
+
/** Leading icon — the toolbar button glyph / the menu-row icon. */
|
|
595
|
+
icon: ReactNode;
|
|
596
|
+
/** Click handler. Receives editor helpers ({@link CustomActionContext}). */
|
|
597
|
+
onClick: (ctx: CustomActionContext) => void;
|
|
598
|
+
/** Render in a pressed / highlighted state — for toggle-style actions. */
|
|
599
|
+
active?: boolean;
|
|
600
|
+
/** Disable the control (greyed out, not clickable). */
|
|
601
|
+
disabled?: boolean;
|
|
602
|
+
}
|
|
526
603
|
interface ComposerFeatures {
|
|
527
604
|
/** `true` (default) → hybrid mode. Pass a {@link MarkdownConfig} to opt
|
|
528
605
|
* into `"live"` (Notion-style) or otherwise customise behaviour. */
|
|
529
606
|
markdown?: boolean | MarkdownConfig;
|
|
530
607
|
attachments?: boolean | AttachmentsConfig;
|
|
531
608
|
mentions?: false | MentionConfig;
|
|
532
|
-
|
|
609
|
+
/**
|
|
610
|
+
* Trigger-driven command menus. Each {@link SlashConfig} binds a trigger
|
|
611
|
+
* symbol (`trigger`, default `"/"`) to a list of {@link SlashCommand}s, and
|
|
612
|
+
* every command runs a callback action via `onSelect(ctx)` when chosen.
|
|
613
|
+
*
|
|
614
|
+
* Pass a SINGLE config for one trigger, or an ARRAY to register **multiple
|
|
615
|
+
* trigger symbols at once** — each with its own menu and actions. This lets a
|
|
616
|
+
* consumer wire, say, `"/"` → commands AND `"#"` → issues side-by-side
|
|
617
|
+
* (alongside the separate `@` mentions menu). Give each config a distinct
|
|
618
|
+
* `trigger`.
|
|
619
|
+
*
|
|
620
|
+
* @example
|
|
621
|
+
* ```tsx
|
|
622
|
+
* features={{
|
|
623
|
+
* slashCommands: [
|
|
624
|
+
* { trigger: "/", items: commands }, // each command's onSelect runs an action
|
|
625
|
+
* { trigger: "#", items: issues }, // insert a link, etc.
|
|
626
|
+
* ],
|
|
627
|
+
* }}
|
|
628
|
+
* ```
|
|
629
|
+
*/
|
|
630
|
+
slashCommands?: false | SlashConfig | SlashConfig[];
|
|
533
631
|
voice?: boolean;
|
|
534
632
|
mermaid?: boolean | MermaidConfig;
|
|
535
633
|
web?: boolean;
|
|
634
|
+
/**
|
|
635
|
+
* Consumer-defined toolbar actions. Each entry ({@link CustomAction})
|
|
636
|
+
* renders as a button in the `full` variant's toolbar and as a row in the
|
|
637
|
+
* compact variant's "+" popover, between the built-in actions and
|
|
638
|
+
* `toolbarExtras`. The click handler receives editor helpers
|
|
639
|
+
* ({@link CustomActionContext}) so it can insert text/markdown or submit.
|
|
640
|
+
* Defaults to `[]` (no custom actions).
|
|
641
|
+
*/
|
|
642
|
+
custom?: CustomAction[];
|
|
536
643
|
/**
|
|
537
644
|
* Inline ghost-text autocomplete suggested from a list. Accepts a plain
|
|
538
645
|
* `string[]` shorthand or a {@link GhostedAutoCompleteConfig} for
|
|
@@ -655,6 +762,46 @@ interface ComposerProps {
|
|
|
655
762
|
*/
|
|
656
763
|
focusShortcut?: string | false | null;
|
|
657
764
|
placeholder?: string;
|
|
765
|
+
/**
|
|
766
|
+
* Animated placeholder: a list of phrases the empty editor cycles through
|
|
767
|
+
* with a typewriter effect — each phrase is revealed one character at a
|
|
768
|
+
* time, held, erased, and the next begins. The animation takes precedence
|
|
769
|
+
* over the static {@link placeholder} while the editor is empty and pauses
|
|
770
|
+
* the moment the user starts typing.
|
|
771
|
+
*
|
|
772
|
+
* Pass a `string[]` for the default behaviour, or an
|
|
773
|
+
* {@link AnimatedPlaceholderConfig} to enable looping.
|
|
774
|
+
*
|
|
775
|
+
* **Looping** (`loop`, default `false`):
|
|
776
|
+
* - `loop: false` — play through the list once, then settle: on the
|
|
777
|
+
* {@link placeholder} prop if one was given, otherwise on the last phrase
|
|
778
|
+
* (left on screen).
|
|
779
|
+
* - `loop: true` — cycle the list forever.
|
|
780
|
+
*
|
|
781
|
+
* Honours `prefers-reduced-motion` by showing the first phrase statically.
|
|
782
|
+
*
|
|
783
|
+
* @example
|
|
784
|
+
* // Play once, then rest on the last phrase (no `placeholder` given):
|
|
785
|
+
* <Composer
|
|
786
|
+
* animatedPlaceholder={[
|
|
787
|
+
* "Ask me anything…",
|
|
788
|
+
* "Summarize this thread",
|
|
789
|
+
* "Draft a reply to Alex",
|
|
790
|
+
* ]}
|
|
791
|
+
* onSend={...}
|
|
792
|
+
* />
|
|
793
|
+
*
|
|
794
|
+
* @example
|
|
795
|
+
* // Loop forever:
|
|
796
|
+
* <Composer
|
|
797
|
+
* animatedPlaceholder={{
|
|
798
|
+
* phrases: ["Ask me anything…", "Summarize this thread"],
|
|
799
|
+
* loop: true,
|
|
800
|
+
* }}
|
|
801
|
+
* onSend={...}
|
|
802
|
+
* />
|
|
803
|
+
*/
|
|
804
|
+
animatedPlaceholder?: string[] | AnimatedPlaceholderConfig;
|
|
658
805
|
/**
|
|
659
806
|
* Shorthand for `classNames.root`. Kept for back-compat; if both are set,
|
|
660
807
|
* the two are merged (`className` first, then `classNames.root`).
|
|
@@ -719,6 +866,27 @@ interface ComposerProps {
|
|
|
719
866
|
* `mode` and work in both.
|
|
720
867
|
*/
|
|
721
868
|
mode?: "markdown" | "text";
|
|
869
|
+
/**
|
|
870
|
+
* Visual layout of the composer card.
|
|
871
|
+
*
|
|
872
|
+
* - `"compact"` (default): a slim chat-bar that reads as a single line
|
|
873
|
+
* and grows as the user types or presses **Shift+Enter**. The quick
|
|
874
|
+
* actions that would otherwise sit in the toolbar (attach, image, web,
|
|
875
|
+
* and any `toolbarExtras`) collapse behind a single **"+"** button that
|
|
876
|
+
* opens a popover; the voice button floats to the right, beside Send.
|
|
877
|
+
* This keeps the resting state to one tidy row while still exposing
|
|
878
|
+
* everything one tap away.
|
|
879
|
+
*
|
|
880
|
+
* - `"full"`: the classic layout — a multi-line editor area with a full
|
|
881
|
+
* toolbar row (all action buttons visible) above the Send button.
|
|
882
|
+
* Honours `multiline` exactly as before (`multiline: false` collapses
|
|
883
|
+
* it to the inline single-row bar).
|
|
884
|
+
*
|
|
885
|
+
* Independent of `multiline`: `variant` controls the *chrome layout*, while
|
|
886
|
+
* `multiline` controls whether newlines are allowed. The compact variant
|
|
887
|
+
* defaults to `multiline: true` so Shift+Enter can grow it.
|
|
888
|
+
*/
|
|
889
|
+
variant?: "compact" | "full";
|
|
722
890
|
/** Toggle / configure built-in plugins. */
|
|
723
891
|
features?: ComposerFeatures;
|
|
724
892
|
/** Extra controls rendered after the built-in toolbar buttons. */
|
|
@@ -745,24 +913,24 @@ interface ComposerProps {
|
|
|
745
913
|
*/
|
|
746
914
|
submitOnEnter?: boolean;
|
|
747
915
|
/**
|
|
748
|
-
* Smart
|
|
749
|
-
* effect when `multiline` is `true`.
|
|
750
|
-
*
|
|
751
|
-
*
|
|
752
|
-
*
|
|
753
|
-
*
|
|
754
|
-
*
|
|
755
|
-
*
|
|
756
|
-
*
|
|
757
|
-
*
|
|
758
|
-
*
|
|
759
|
-
*
|
|
760
|
-
*
|
|
761
|
-
*
|
|
762
|
-
*
|
|
763
|
-
*
|
|
764
|
-
*
|
|
765
|
-
*
|
|
916
|
+
* Smart list continuation on Enter. Defaults to `true`. Only takes
|
|
917
|
+
* effect in markdown mode when `multiline` is `true`.
|
|
918
|
+
*
|
|
919
|
+
* When the cursor sits inside a list paragraph (`- `, `* `, `+ `, or
|
|
920
|
+
* `N. `), Enter continues the list with the next marker (bullet
|
|
921
|
+
* character preserved, numbers auto-incremented). Pressing Enter on an
|
|
922
|
+
* empty list item exits the list — the marker is cleared and the cursor
|
|
923
|
+
* stays on the now-plain line, where the next Enter sends.
|
|
924
|
+
*
|
|
925
|
+
* This is the ONLY case where plain Enter inserts a line rather than
|
|
926
|
+
* submitting. Everywhere else Enter sends (subject to `submitOnEnter`)
|
|
927
|
+
* regardless of how many lines the draft already holds, and Shift+Enter
|
|
928
|
+
* is the newline gesture. Set to `false` to disable list continuation so
|
|
929
|
+
* Enter inside a bullet sends like anywhere else.
|
|
930
|
+
*
|
|
931
|
+
* NOTE: earlier versions also blocked Enter from submitting once the
|
|
932
|
+
* editor held more than one line (forcing Cmd/Ctrl+Enter). That rule was
|
|
933
|
+
* removed — Enter now sends whether the draft is one line or many.
|
|
766
934
|
*/
|
|
767
935
|
smartNewline?: boolean;
|
|
768
936
|
/**
|
|
@@ -902,4 +1070,4 @@ interface SuggestionRowProps {
|
|
|
902
1070
|
}
|
|
903
1071
|
declare function SuggestionRow({ items, onSelect, className }: SuggestionRowProps): react.JSX.Element;
|
|
904
1072
|
|
|
905
|
-
export { type Attachment, type AttachmentKind, type AttachmentOptions, type AttachmentStatus, type AttachmentTypeOption, type AttachmentsConfig, Composer, type ComposerFeatures, type ComposerHandle, type ComposerIcons, type ComposerPromptBehavior, type ComposerPromptsConfig, type ComposerProps, type ComposerSlot, type ComposerSlotClassNames, type ComposerSlots, type ComposerSubmitPayload, type ComposerSxMap, type ComposerSxValue, type ComposerTokens, type DiagramRenderer, type GhostedAutoCompleteConfig, type IconComponent, type IconProps, type MarkdownConfig, type MarkdownMode, type MentionConfig, type MentionItem, type MentionRef, type MermaidConfig, type SendButtonRenderProps, type SlashCommand, type SlashCommandContext, type SlashConfig, type StopButtonRenderProps, SuggestionRow, type SuggestionRowProps };
|
|
1073
|
+
export { type AnimatedPlaceholderConfig, type Attachment, type AttachmentKind, type AttachmentOptions, type AttachmentStatus, type AttachmentTypeOption, type AttachmentsConfig, Composer, type ComposerFeatures, type ComposerHandle, type ComposerIcons, type ComposerPromptBehavior, type ComposerPromptsConfig, type ComposerProps, type ComposerSlot, type ComposerSlotClassNames, type ComposerSlots, type ComposerSubmitPayload, type ComposerSxMap, type ComposerSxValue, type ComposerTokens, type CustomAction, type CustomActionContext, type DiagramRenderer, type GhostedAutoCompleteConfig, type IconComponent, type IconProps, type MarkdownConfig, type MarkdownMode, type MentionConfig, type MentionItem, type MentionRef, type MermaidConfig, type SendButtonRenderProps, type SlashCommand, type SlashCommandContext, type SlashConfig, type StopButtonRenderProps, SuggestionRow, type SuggestionRowProps };
|