@assistant-ui/react/dist/ui/thread.js

React components for AI chat.

"use strict";
"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/ui/thread.tsx
var thread_exports = {};
__export(thread_exports, {
  default: () => thread_default
});
module.exports = __toCommonJS(thread_exports);
var import_react = require("react");
var import_lucide_react = require("lucide-react");
var import_withDefaults = require("./utils/withDefaults.cjs");
var import_composer = __toESM(require("./composer.cjs"));
var import_thread_welcome = __toESM(require("./thread-welcome.cjs"));
var import_tooltip_icon_button = require("./base/tooltip-icon-button.cjs");
var import_assistant_message = __toESM(require("./assistant-message.cjs"));
var import_user_message = __toESM(require("./user-message.cjs"));
var import_edit_composer = __toESM(require("./edit-composer.cjs"));
var import_thread_config = require("./thread-config.cjs");
var import_primitives = require("../primitives/index.cjs");
var import_context = require("../context/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var Thread = (config) => {
  const {
    components: {
      Composer: ComposerComponent = import_composer.default,
      ThreadWelcome: ThreadWelcomeComponent = import_thread_welcome.default
    } = {}
  } = config;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadRoot, { config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThreadViewport, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadWelcomeComponent, {}),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadMessages, {}),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadFollowupSuggestions, {}),
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThreadViewportFooter, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadScrollToBottom, {}),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposerComponent, {})
    ] })
  ] }) });
};
var ThreadRootStyled = (0, import_withDefaults.withDefaults)(import_primitives.ThreadPrimitive.Root, {
  className: "aui-root aui-thread-root"
});
var ThreadRoot = (0, import_react.forwardRef)(
  ({ config, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_thread_config.ThreadConfigProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadRootStyled, { ...props, ref }) });
  }
);
ThreadRoot.displayName = "ThreadRoot";
var ThreadViewport = (0, import_withDefaults.withDefaults)(import_primitives.ThreadPrimitive.Viewport, {
  className: "aui-thread-viewport"
});
ThreadViewport.displayName = "ThreadViewport";
var ThreadViewportFooter = (0, import_withDefaults.withDefaults)("div", {
  className: "aui-thread-viewport-footer"
});
ThreadViewportFooter.displayName = "ThreadViewportFooter";
var SystemMessage = () => null;
var ThreadMessages = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_primitives.ThreadPrimitive.Messages,
      {
        components: {
          UserMessage: components?.UserMessage ?? import_user_message.default,
          EditComposer: components?.EditComposer ?? import_edit_composer.default,
          AssistantMessage: components?.AssistantMessage ?? import_assistant_message.default,
          SystemMessage: components?.SystemMessage ?? SystemMessage
        },
        ...rest
      }
    ),
    flexGrowDiv && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flexGrow: 1 } }) })
  ] });
};
ThreadMessages.displayName = "ThreadMessages";
var ThreadFollowupSuggestions = () => {
  const suggestions = (0, import_context.useThread)((t) => t.suggestions);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.ThreadPrimitive.If, { empty: false, running: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aui-thread-followup-suggestions", children: suggestions?.map((suggestion, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_primitives.ThreadPrimitive.Suggestion,
    {
      className: "aui-thread-followup-suggestion",
      prompt: suggestion.prompt,
      method: "replace",
      autoSend: true,
      children: suggestion.prompt
    },
    idx
  )) }) });
};
var ThreadScrollToBottomIconButton = (0, import_withDefaults.withDefaults)(import_tooltip_icon_button.TooltipIconButton, {
  variant: "outline",
  className: "aui-thread-scroll-to-bottom"
});
var ThreadScrollToBottom = (0, import_react.forwardRef)((props, ref) => {
  const {
    strings: {
      thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
    } = {}
  } = (0, import_thread_config.useThreadConfig)();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowDownIcon, {}) }) });
});
ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
var exports2 = {
  Root: ThreadRoot,
  Viewport: ThreadViewport,
  Messages: ThreadMessages,
  FollowupSuggestions: ThreadFollowupSuggestions,
  ScrollToBottom: ThreadScrollToBottom,
  ViewportFooter: ThreadViewportFooter
};
var thread_default = Object.assign(Thread, exports2);
//# sourceMappingURL=thread.js.map