@openviking/react 0.1.3 → 0.1.5

package/dist/viking-bot-composer~0.js

@@ -1,39 +1,400 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Sender } from "@ark-design/ui/sender";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
-import { DEFAULT_LABELS } from "./c~0.js";
-const HARD_BREAK = 'hardBreak';
-const TEXT = 'text';
-const toPlainText = (content)=>content.map((item)=>{
-        if (item.type === HARD_BREAK) return '\n';
-        return item.type === TEXT ? item.text ?? '' : '';
-    }).join('').trim();
-const toRichText = (text)=>text ? [
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Tooltip } from "./r~0.js";
+import { VikingBotIcon } from "./lg~0.js";
+import { resolveVikingBotLabels, BotPopover, useQuickInput, QuickInputs } from "./c~0.js";
+import { usePortalTheme } from "./9~0.js";
+import { FileTree as file_tree_FileTree } from "./n~0.js";
+import { useLocale } from "./28~0.js";
+const SvgSend = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        preserveAspectRatio: "none",
+        viewBox: "0 0 9 10.333",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            d: "M4 9.833V1.707L.853 4.854a.5.5 0 1 1-.707-.707l4-4 .038-.035a.5.5 0 0 1 .67.035l4 4a.5.5 0 1 1-.708.707L5 1.707v8.126a.5.5 0 1 1-1 0"
+        })
+    });
+const sendreact = SvgSend;
+const SvgAttach = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        preserveAspectRatio: "none",
+        viewBox: "0 0 10.208 10.208",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            d: "M4.667 9.77V5.543H.437a.438.438 0 0 1 0-.875h4.23V.437a.437.437 0 1 1 .875 0v4.23H9.77a.437.437 0 1 1 0 .875H5.54V9.77a.437.437 0 1 1-.874 0"
+        })
+    });
+const attachreact = SvgAttach;
+function VikingBotSubmit({ onSend, onStop, sending, tip, className, label, ...props }) {
+    return /*#__PURE__*/ jsx(Tooltip, {
+        content: tip ?? label,
+        children: /*#__PURE__*/ jsx("button", {
+            ...props,
+            type: "button",
+            className: [
+                'ov-viking-bot__submit',
+                className
+            ].filter(Boolean).join(' '),
+            "aria-label": label,
+            onClick: (event)=>void (sending ? onStop : onSend)?.(event.nativeEvent),
+            children: sending ? /*#__PURE__*/ jsx("span", {
+                className: "ov-viking-bot__stop-icon",
+                "aria-hidden": "true"
+            }) : /*#__PURE__*/ jsx(sendreact, {
+                "aria-hidden": "true",
+                focusable: "false"
+            })
+        })
+    });
+}
+function VikingBotAttach({ label, ...props }) {
+    return /*#__PURE__*/ jsx(Tooltip, {
+        content: label,
+        children: /*#__PURE__*/ jsx("button", {
+            ...props,
+            type: "button",
+            className: "ov-viking-bot__attach",
+            "aria-label": label,
+            children: /*#__PURE__*/ jsx(attachreact, {
+                "aria-hidden": "true",
+                focusable: "false"
+            })
+        })
+    });
+}
+function ComposerFileButton({ accept, disabled, label, onFiles }) {
+    const input = useRef(null);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                ref: input,
+                type: "file",
+                accept: accept,
+                multiple: true,
+                hidden: true,
+                onChange: (event)=>{
+                    onFiles([
+                        ...event.target.files ?? []
+                    ]);
+                    event.target.value = '';
+                }
+            }),
+            /*#__PURE__*/ jsx(VikingBotAttach, {
+                label: label,
+                disabled: disabled,
+                onClick: ()=>input.current?.click()
+            })
+        ]
+    });
+}
+function ComposerAttachments({ items, onRemove, disabled, labels }) {
+    if (!items.length) return null;
+    return /*#__PURE__*/ jsx("ul", {
+        className: "ov-viking-bot__attachments",
+        children: items.map((item)=>/*#__PURE__*/ jsxs("li", {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: item.name
+                    }),
+                    'error' === item.status ? /*#__PURE__*/ jsx("span", {
+                        className: "ov-viking-bot__attachment-status",
+                        children: item.errorMessage ?? labels.toolError
+                    }) : null,
+                    onRemove ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        "aria-label": `${labels.removeAttachment}: ${item.name}`,
+                        disabled: disabled,
+                        onClick: ()=>onRemove(item),
+                        children: /*#__PURE__*/ jsx(VikingBotIcon, {
+                            name: "remove",
+                            width: 12,
+                            height: 12
+                        })
+                    }) : null
+                ]
+            }, item.key))
+    });
+}
+function ReferencePicker({ config, locale, query: externalQuery, editor, onSelect, labels: overrides }) {
+    const labels = resolveVikingBotLabels(locale, overrides);
+    const [search, setSearch] = useState('');
+    const [active, setActive] = useState(0);
+    const [surface, setSurface] = useState(null);
+    const anchor = useMemo(()=>({
+            current: editor?.view.dom ?? null
+        }), [
+        editor
+    ]);
+    usePortalTheme(!!editor, anchor, surface);
+    const query = externalQuery ?? search;
+    const { onQueryChange } = config;
+    const id = useId();
+    const rows = query && !config.onQueryChange ? config.rows.filter((row)=>'entry' === row.kind && `${row.name} ${row.uri}`.toLowerCase().includes(query.toLowerCase())) : config.rows;
+    const entries = rows.filter((row)=>'entry' === row.kind && !row.disabled);
+    const activeEntry = entries[Math.min(active, entries.length - 1)];
+    useEffect(()=>{
+        onQueryChange?.(query);
+    }, [
+        query,
+        onQueryChange
+    ]);
+    useEffect(()=>{
+        if (!editor) return;
+        const keydown = (event)=>{
+            if (event.isComposing) return;
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                if (activeEntry && !config.isLoading && !config.error) onSelect(activeEntry);
+                return;
+            }
+            if (config.isLoading || config.error) return;
+            if ('ArrowDown' === event.key || 'ArrowUp' === event.key) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                setActive((index)=>entries.length ? (index + ('ArrowDown' === event.key ? 1 : -1) + entries.length) % entries.length : 0);
+            } else if (('ArrowRight' === event.key || 'ArrowLeft' === event.key) && activeEntry?.type === 'directory') {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                config.onExpand?.(activeEntry.uri);
+            }
+        };
+        editor.view.dom.addEventListener('keydown', keydown, true);
+        return ()=>editor.view.dom.removeEventListener('keydown', keydown, true);
+    }, [
+        editor,
+        activeEntry,
+        entries.length,
+        onSelect,
+        config
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: setSurface,
+        className: `ov-viking-bot__reference-picker${editor ? ' ov-viking-bot__reference-picker--mention' : ''}`,
+        children: [
+            editor ? null : /*#__PURE__*/ jsxs("label", {
+                htmlFor: id,
+                children: [
+                    labels.searchReferences,
+                    /*#__PURE__*/ jsx("input", {
+                        id: id,
+                        type: "search",
+                        value: search,
+                        onChange: (event)=>{
+                            setSearch(event.target.value);
+                            setActive(0);
+                        }
+                    })
+                ]
+            }),
+            config.error ? /*#__PURE__*/ jsx("p", {
+                role: "alert",
+                children: config.error
+            }) : /*#__PURE__*/ jsx(file_tree_FileTree, {
+                locale: locale,
+                "aria-label": labels.reference,
+                rows: rows,
+                isReady: !config.isLoading,
+                selectedId: editor ? activeEntry?.id : void 0,
+                operations: {
+                    select: ()=>Promise.resolve(),
+                    toggleExpand: ()=>Promise.resolve()
+                },
+                onSelect: onSelect,
+                onToggleExpand: (row)=>config.onExpand?.(row.uri),
+                renderRowTooltip: ()=>null,
+                getRowAttributes: ()=>editor ? {
+                        onMouseDown: (event)=>event.preventDefault()
+                    } : {},
+                loadingFallback: /*#__PURE__*/ jsx("p", {
+                    role: "status",
+                    children: labels.loading
+                }),
+                emptyFallback: /*#__PURE__*/ jsx("p", {
+                    role: "status",
+                    children: labels.emptyReferences
+                }),
+                labels: {
+                    expand: labels.expandReference,
+                    collapse: labels.collapseReference
+                }
+            })
+        ]
+    });
+}
+function selectReference(config, item) {
+    if (!config.selected.some((entry)=>entry.uri === item.uri)) config.onChange([
+        ...config.selected,
         {
-            type: TEXT,
-            text
+            uri: item.uri,
+            name: item.name,
+            type: item.type
         }
-    ] : [];
-const viking_bot_composer_VikingBotComposerView = /*#__PURE__*/ forwardRef(function({ value, className, attachments = [], disabled, disabledReason, isSending, variant = 'default', accept, maxAttachments = 10, actions, onValueChange, onFilesAdded, onAttachmentRemove, onSend, onCancel, labels: overrides }, ref) {
-    const labels = {
-        ...DEFAULT_LABELS,
-        ...overrides
+    ]);
+}
+function composerMention(config, disabled, labels, locale) {
+    if (!config) return;
+    return {
+        option: [],
+        shouldShow: ({ editor })=>!disabled && editor.isFocused,
+        onSelect: (item, { editor, range })=>{
+            const reference = config.rows.find((row)=>'entry' === row.kind && row.uri === item.value);
+            if (disabled || !reference || 'entry' !== reference.kind || reference.disabled) return;
+            selectReference(config, reference);
+            editor.chain().focus().deleteRange(range).run();
+        },
+        render: ({ query, command, editor })=>disabled ? null : /*#__PURE__*/ jsx(ReferencePicker, {
+                locale: locale,
+                config: config,
+                editor: editor,
+                query: query,
+                labels: labels,
+                onSelect: (item)=>command({
+                        tagType: 'file',
+                        label: item.name,
+                        value: item.uri
+                    })
+            })
     };
+}
+function ReferenceButton({ locale, config, disabled, labels, senderRef }) {
+    return /*#__PURE__*/ jsx(BotPopover, {
+        label: labels.reference,
+        placement: "top",
+        trigger: (props)=>/*#__PURE__*/ jsx(Tooltip, {
+                content: labels.reference,
+                disabled: true === props['aria-expanded'],
+                children: /*#__PURE__*/ jsx("button", {
+                    ...props,
+                    className: "ov-viking-bot__attach",
+                    type: "button",
+                    "aria-label": labels.reference,
+                    disabled: disabled,
+                    children: "@"
+                })
+            }),
+        children: (close)=>/*#__PURE__*/ jsx(ReferencePicker, {
+                locale: locale,
+                config: config,
+                labels: labels,
+                onSelect: (item)=>{
+                    if (disabled) return;
+                    selectReference(config, item);
+                    close();
+                    senderRef.current?.getEditor()?.commands.focus();
+                }
+            })
+    }, disabled ? 'disabled' : 'enabled');
+}
+function ReferenceTags({ config, labels, disabled }) {
+    if (!config?.selected.length) return null;
+    return /*#__PURE__*/ jsx("ul", {
+        className: "ov-viking-bot__reference-tags",
+        children: config.selected.map((item)=>/*#__PURE__*/ jsxs("li", {
+                children: [
+                    /*#__PURE__*/ jsx(Tooltip, {
+                        content: item.uri,
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: item.name
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: disabled,
+                        "aria-label": `${labels.removeReference}: ${item.name}`,
+                        onClick: ()=>config.onChange(config.selected.filter((entry)=>entry.uri !== item.uri)),
+                        children: /*#__PURE__*/ jsx(VikingBotIcon, {
+                            name: "remove",
+                            width: 12,
+                            height: 12
+                        })
+                    })
+                ]
+            }, item.uri))
+    });
+}
+function ComposerFooter({ locale, references, senderRef, labels, disabled, filesDisabled, accept, onFiles, actions, submit }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "ov-viking-bot__composer-actions",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-viking-bot__composer-tools",
+                children: [
+                    onFiles ? /*#__PURE__*/ jsx(ComposerFileButton, {
+                        label: labels.attach,
+                        accept: accept,
+                        disabled: filesDisabled,
+                        onFiles: onFiles
+                    }) : null,
+                    references ? /*#__PURE__*/ jsx(ReferenceButton, {
+                        locale: locale,
+                        config: references,
+                        labels: labels,
+                        senderRef: senderRef,
+                        disabled: disabled
+                    }) : null,
+                    actions
+                ]
+            }),
+            submit
+        ]
+    });
+}
+const toPlainText = (content)=>content.map((item)=>'hardBreak' === item.type ? '\n' : 'text' === item.type ? item.text ?? '' : '').join('');
+function toRichText(text) {
+    const content = [];
+    text.split('\n').forEach((line, index)=>{
+        if (index) content.push({
+            type: 'hardBreak'
+        });
+        if (line) content.push({
+            type: 'text',
+            text: line
+        });
+    });
+    return content;
+}
+function writeComposerText(sender, text, writing) {
+    const previous = writing.current;
+    writing.current = true;
+    try {
+        sender?.setValue(toRichText(text));
+    } finally{
+        writing.current = previous;
+    }
+}
+function composerCaret(sender) {
+    const editor = sender?.getEditor();
+    if (!editor?.state.selection.empty) return;
+    const { doc, selection } = editor.state;
+    return doc.textBetween(0, selection.from, '\n', '\n').length;
+}
+const viking_bot_composer_VikingBotComposerView = /*#__PURE__*/ forwardRef(function({ value, locale: localeProp, className, attachments = [], disabled, disabledReason, isSending, variant = 'default', accept, maxAttachments = 10, actions, quickInputs, onQuickInputSelect, references, onValueChange, onFilesAdded, onAttachmentRemove, onSend, onCancel, labels: overrides }, ref) {
+    const locale = useLocale(localeProp);
+    const labels = resolveVikingBotLabels(locale, overrides);
     const senderRef = useRef(null);
-    const fileRef = useRef(null);
+    const writing = useRef(false);
     const readOnly = !onValueChange;
+    const locked = Boolean(disabled || readOnly || isSending);
     const remaining = Math.max(0, maxAttachments - attachments.length);
     const limitReached = 0 === remaining;
     const setText = useCallback((text)=>{
-        senderRef.current?.setValue(toRichText(text));
+        writeComposerText(senderRef.current, text, writing);
         onValueChange?.(text);
     }, [
         onValueChange
     ]);
+    const shortcuts = useQuickInput(value, setText, onQuickInputSelect);
     useEffect(()=>{
         const current = toPlainText(senderRef.current?.getValue() ?? []);
         if (current === value) return;
-        senderRef.current?.setValue(toRichText(value));
+        writeComposerText(senderRef.current, value, writing);
     }, [
         value
     ]);
@@ -56,10 +417,13 @@ const viking_bot_composer_VikingBotComposerView = /*#__PURE__*/ forwardRef(funct
         }));
     const submit = ()=>{
         if (!onSend || disabled || isSending) return;
-        const text = toPlainText(senderRef.current?.getValue() ?? toRichText(value));
+        const text = toPlainText(senderRef.current?.getValue() ?? toRichText(value)).trim();
         onSend({
             text,
-            attachments
+            attachments,
+            ...references ? {
+                references: references.selected
+            } : {}
         });
     };
     const interceptDrop = Boolean(onFilesAdded);
@@ -89,73 +453,68 @@ const viking_bot_composer_VikingBotComposerView = /*#__PURE__*/ forwardRef(funct
                 role: "status",
                 children: disabledReason
             }) : null,
-            attachments.length > 0 ? /*#__PURE__*/ jsx("ul", {
-                className: "ov-viking-bot__attachments",
-                children: attachments.map((attachment)=>/*#__PURE__*/ jsxs("li", {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                children: attachment.name
-                            }),
-                            'error' === attachment.status ? /*#__PURE__*/ jsx("span", {
-                                className: "ov-viking-bot__attachment-status",
-                                children: attachment.errorMessage ?? labels.toolError
-                            }) : null,
-                            onAttachmentRemove ? /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                "aria-label": labels.removeAttachment,
-                                disabled: disabled,
-                                onClick: ()=>onAttachmentRemove(attachment),
-                                children: "\xd7"
-                            }) : null
-                        ]
-                    }, attachment.key))
-            }) : null,
+            /*#__PURE__*/ jsx(QuickInputs, {
+                items: quickInputs,
+                disabled: disabled || readOnly || isSending,
+                onSelect: (item)=>{
+                    shortcuts.select(item);
+                    senderRef.current?.getEditor()?.commands.focus('end');
+                }
+            }),
             /*#__PURE__*/ jsx(Sender, {
                 ref: senderRef,
                 className: "ov-viking-bot__sender",
                 defaultContent: toRichText(value),
                 sending: isSending,
-                sendDisabled: disabled || readOnly,
+                sendDisabled: disabled || readOnly || !isSending && !onSend,
                 onContentChange: (content)=>{
-                    if (!readOnly) onValueChange?.(toPlainText(content));
-                },
-                onSend: ()=>{
-                    submit();
+                    if (readOnly || writing.current) return;
+                    const next = toPlainText(content);
+                    shortcuts.tracker.edit(next, composerCaret(senderRef.current));
+                    onValueChange?.(next);
                 },
+                onSend: submit,
                 onStop: ()=>onCancel?.(),
+                renderHeader: ()=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(ReferenceTags, {
+                                config: references,
+                                labels: labels,
+                                disabled: disabled || isSending
+                            }),
+                            /*#__PURE__*/ jsx(ComposerAttachments, {
+                                items: attachments,
+                                onRemove: onAttachmentRemove,
+                                labels: labels,
+                                disabled: disabled || isSending
+                            })
+                        ]
+                    }),
+                renderSubmit: (props)=>isSending && !onCancel ? null : /*#__PURE__*/ jsx(VikingBotSubmit, {
+                        ...props,
+                        label: isSending ? labels.stop : labels.send
+                    }),
                 richTextAreaProps: {
+                    mentionConfig: composerMention(references, locked, labels, locale),
                     placeholder: labels.placeholder,
-                    disabled
+                    disabled,
+                    minRows: 1,
+                    maxRows: 6,
+                    style: {
+                        minHeight: 44
+                    }
                 },
-                renderFooter: ({ components })=>/*#__PURE__*/ jsxs("div", {
-                        className: "ov-viking-bot__composer-actions",
-                        children: [
-                            components.sendBtnComponent,
-                            onFilesAdded ? /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsx("input", {
-                                        ref: fileRef,
-                                        type: "file",
-                                        accept: accept,
-                                        multiple: true,
-                                        hidden: true,
-                                        onChange: (event)=>{
-                                            reportFiles([
-                                                ...event.target.files ?? []
-                                            ]);
-                                            event.target.value = '';
-                                        }
-                                    }),
-                                    /*#__PURE__*/ jsx("button", {
-                                        type: "button",
-                                        disabled: disabled || limitReached,
-                                        onClick: ()=>fileRef.current?.click(),
-                                        children: labels.attach
-                                    })
-                                ]
-                            }) : null,
-                            actions
-                        ]
+                renderFooter: ({ components })=>/*#__PURE__*/ jsx(ComposerFooter, {
+                        locale: locale,
+                        references: references,
+                        senderRef: senderRef,
+                        labels: labels,
+                        disabled: locked,
+                        filesDisabled: Boolean(disabled || limitReached || isSending),
+                        accept: accept,
+                        onFiles: onFilesAdded ? reportFiles : void 0,
+                        actions: actions,
+                        submit: components.sendBtnComponent
                     })
             })
         ]

package/dist/viking-bot-interaction~0.js

@@ -1,8 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AskHuman } from "@ark-design/ui/ask-human";
 import { useState } from "react";
-import { DEFAULT_INTERACTION_LABELS } from "./c7~0.js";
-const toFields = (request)=>{
+import { useLocale } from "./28~0.js";
+import { resolveInteractionLabels } from "./c7~0.js";
+const toFields = (request, other)=>{
     if ('choice' === request.kind) return [
         {
             type: 'single-select',
@@ -12,7 +13,9 @@ const toFields = (request)=>{
                     label: option.label,
                     description: option.description
                 })),
-            allowCustomInput: request.allowCustomInput
+            allowCustomInput: request.allowCustomInput ? {
+                placeholder: 'object' == typeof request.allowCustomInput ? request.allowCustomInput.placeholder ?? other : other
+            } : false
         }
     ];
     if ('repair' === request.kind) return [
@@ -177,7 +180,7 @@ function ScheduleInput({ request, labels, disabled, onChange }) {
         ]
     });
 }
-const TextInput = ({ request, disabled, onChange })=>/*#__PURE__*/ jsxs(Fragment, {
+const TextInput = ({ request, label, disabled, onChange })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             request.description ? /*#__PURE__*/ jsx("p", {
                 children: request.description
@@ -186,16 +189,14 @@ const TextInput = ({ request, disabled, onChange })=>/*#__PURE__*/ jsxs(Fragment
                 className: "ov-viking-bot__interaction-input",
                 defaultValue: request.initialValue,
                 disabled: disabled,
-                "aria-label": "answer",
+                "aria-label": label,
                 onChange: (event)=>onChange(event.target.value)
             })
         ]
     });
-function VikingBotInteractionView({ request, className, requestKey, index = 0, total = 1, disabled, submitting, error, onSubmit, onCancel, labels: overrides }) {
-    const labels = {
-        ...DEFAULT_INTERACTION_LABELS,
-        ...overrides
-    };
+function VikingBotInteractionView({ request, className, requestKey, index = 0, total = 1, disabled, submitting, error, onSubmit, onCancel, locale: localeProp, labels: overrides }) {
+    const locale = useLocale(localeProp);
+    const labels = resolveInteractionLabels(locale, overrides);
     const blocked = Boolean(disabled || submitting);
     const formKey = requestKey ?? `${request.kind}:${index}`;
     const rootClass = [
@@ -227,7 +228,7 @@ function VikingBotInteractionView({ request, className, requestKey, index = 0, t
         {
             key: request.kind,
             title: request.question,
-            fields: toFields(request),
+            fields: toFields(request, labels.other),
             extra: {
                 index,
                 total
@@ -266,6 +267,7 @@ function VikingBotInteractionView({ request, className, requestKey, index = 0, t
                 },
                 customRenderFields: {
                     'viking-bot-text': ({ field, onChange })=>/*#__PURE__*/ jsx(TextInput, {
+                            label: labels.answer,
                             request: field.extra?.request,
                             disabled: blocked,
                             onChange: onChange