@assistant-ui/react
Version:
Typescript/React library for AI Chat
141 lines (140 loc) • 6.05 kB
JavaScript
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/primitives/composer/ComposerInput.tsx
var ComposerInput_exports = {};
__export(ComposerInput_exports, {
ComposerPrimitiveInput: () => ComposerPrimitiveInput
});
module.exports = __toCommonJS(ComposerInput_exports);
var import_primitive = require("@radix-ui/primitive");
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
var import_react_slot = require("@radix-ui/react-slot");
var import_react = require("react");
var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
var import_ComposerContext = require("../../context/react/ComposerContext.js");
var import_ThreadContext = require("../../context/react/ThreadContext.js");
var import_react_use_escape_keydown = require("@radix-ui/react-use-escape-keydown");
var import_useOnScrollToBottom = require("../../utils/hooks/useOnScrollToBottom.js");
var import_ThreadListItemContext = require("../../context/react/ThreadListItemContext.js");
var import_jsx_runtime = require("react/jsx-runtime");
var ComposerPrimitiveInput = (0, import_react.forwardRef)(
({
autoFocus = false,
asChild,
disabled: disabledProp,
onChange,
onKeyDown,
submitOnEnter = true,
cancelOnEscape = true,
unstable_focusOnRunStart = true,
unstable_focusOnScrollToBottom = true,
unstable_focusOnThreadSwitched = true,
...rest
}, forwardedRef) => {
const threadListItemRuntime = (0, import_ThreadListItemContext.useThreadListItemRuntime)();
const threadRuntime = (0, import_ThreadContext.useThreadRuntime)();
const composerRuntime = (0, import_ComposerContext.useComposerRuntime)();
const value = (0, import_ComposerContext.useComposer)((c) => {
if (!c.isEditing) return "";
return c.text;
});
const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
const isDisabled = (0, import_ThreadContext.useThread)((t) => t.isDisabled) ?? disabledProp ?? false;
const textareaRef = (0, import_react.useRef)(null);
const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, textareaRef);
(0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
if (!cancelOnEscape) return;
if (composerRuntime.getState().canCancel) {
composerRuntime.cancel();
e.preventDefault();
}
});
const handleKeyPress = (e) => {
if (isDisabled || !submitOnEnter) return;
if (e.nativeEvent.isComposing) return;
if (e.key === "Enter" && e.shiftKey === false) {
const { isRunning } = threadRuntime.getState();
if (!isRunning) {
e.preventDefault();
textareaRef.current?.closest("form")?.requestSubmit();
}
}
};
const autoFocusEnabled = autoFocus && !isDisabled;
const focus = (0, import_react.useCallback)(() => {
const textarea = textareaRef.current;
if (!textarea || !autoFocusEnabled) return;
textarea.focus({ preventScroll: true });
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}, [autoFocusEnabled]);
(0, import_react.useEffect)(() => focus(), [focus]);
(0, import_useOnScrollToBottom.useOnScrollToBottom)(() => {
if (composerRuntime.type === "thread" && unstable_focusOnScrollToBottom) {
focus();
}
});
(0, import_react.useEffect)(() => {
if (composerRuntime.type !== "thread" || !unstable_focusOnRunStart)
return void 0;
return threadRuntime.unstable_on("run-start", focus);
}, [unstable_focusOnRunStart, focus, composerRuntime, threadRuntime]);
(0, import_react.useEffect)(() => {
if (composerRuntime.type !== "thread" || !unstable_focusOnThreadSwitched)
return void 0;
return threadListItemRuntime.unstable_on("switched-to", focus);
}, [
unstable_focusOnThreadSwitched,
focus,
composerRuntime,
threadListItemRuntime
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Component,
{
name: "input",
value,
...rest,
ref,
disabled: isDisabled,
onChange: (0, import_primitive.composeEventHandlers)(onChange, (e) => {
if (!composerRuntime.getState().isEditing) return;
return composerRuntime.setText(e.target.value);
}),
onKeyDown: (0, import_primitive.composeEventHandlers)(onKeyDown, handleKeyPress)
}
);
}
);
ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ComposerPrimitiveInput
});
//# sourceMappingURL=ComposerInput.js.map
;