UNPKG

@assistant-ui/react

Version:

React components for AI chat.

114 lines (113 loc) 4.36 kB
"use client"; // src/ui/thread.tsx import { forwardRef } from "react"; import { ArrowDownIcon } from "lucide-react"; import { withDefaults } from "./utils/withDefaults.mjs"; import Composer from "./composer.mjs"; import ThreadWelcome from "./thread-welcome.mjs"; import { TooltipIconButton } from "./base/tooltip-icon-button.mjs"; import AssistantMessage from "./assistant-message.mjs"; import UserMessage from "./user-message.mjs"; import EditComposer from "./edit-composer.mjs"; import { ThreadConfigProvider, useThreadConfig } from "./thread-config.mjs"; import { ThreadPrimitive } from "../primitives/index.mjs"; import { useThread } from "../context/index.mjs"; import { Fragment, jsx, jsxs } from "react/jsx-runtime"; var Thread = (config) => { const { components: { Composer: ComposerComponent = Composer, ThreadWelcome: ThreadWelcomeComponent = ThreadWelcome } = {} } = config; return /* @__PURE__ */ jsx(ThreadRoot, { config, children: /* @__PURE__ */ jsxs(ThreadViewport, { children: [ /* @__PURE__ */ jsx(ThreadWelcomeComponent, {}), /* @__PURE__ */ jsx(ThreadMessages, {}), /* @__PURE__ */ jsx(ThreadFollowupSuggestions, {}), /* @__PURE__ */ jsxs(ThreadViewportFooter, { children: [ /* @__PURE__ */ jsx(ThreadScrollToBottom, {}), /* @__PURE__ */ jsx(ComposerComponent, {}) ] }) ] }) }); }; var ThreadRootStyled = withDefaults(ThreadPrimitive.Root, { className: "aui-root aui-thread-root" }); var ThreadRoot = forwardRef( ({ config, ...props }, ref) => { return /* @__PURE__ */ jsx(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx(ThreadRootStyled, { ...props, ref }) }); } ); ThreadRoot.displayName = "ThreadRoot"; var ThreadViewport = withDefaults(ThreadPrimitive.Viewport, { className: "aui-thread-viewport" }); ThreadViewport.displayName = "ThreadViewport"; var ThreadViewportFooter = withDefaults("div", { className: "aui-thread-viewport-footer" }); ThreadViewportFooter.displayName = "ThreadViewportFooter"; var SystemMessage = () => null; var ThreadMessages = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => { return /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( ThreadPrimitive.Messages, { components: { UserMessage: components?.UserMessage ?? UserMessage, EditComposer: components?.EditComposer ?? EditComposer, AssistantMessage: components?.AssistantMessage ?? AssistantMessage, SystemMessage: components?.SystemMessage ?? SystemMessage }, ...rest } ), flexGrowDiv && /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }) }) ] }); }; ThreadMessages.displayName = "ThreadMessages"; var ThreadFollowupSuggestions = () => { const suggestions = useThread((t) => t.suggestions); return /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, running: false, children: /* @__PURE__ */ jsx("div", { className: "aui-thread-followup-suggestions", children: suggestions?.map((suggestion, idx) => /* @__PURE__ */ jsx( ThreadPrimitive.Suggestion, { className: "aui-thread-followup-suggestion", prompt: suggestion.prompt, method: "replace", autoSend: true, children: suggestion.prompt }, idx )) }) }); }; var ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, { variant: "outline", className: "aui-thread-scroll-to-bottom" }); var ThreadScrollToBottom = forwardRef((props, ref) => { const { strings: { thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {} } = {} } = useThreadConfig(); return /* @__PURE__ */ jsx(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }); }); ThreadScrollToBottom.displayName = "ThreadScrollToBottom"; var exports = { Root: ThreadRoot, Viewport: ThreadViewport, Messages: ThreadMessages, FollowupSuggestions: ThreadFollowupSuggestions, ScrollToBottom: ThreadScrollToBottom, ViewportFooter: ThreadViewportFooter }; var thread_default = Object.assign(Thread, exports); export { thread_default as default }; //# sourceMappingURL=thread.mjs.map