import { jsxs, jsx } from "react/jsx-runtime";
import { SpinnerBounce } from "@choiceform/design-system";
import { observer, use$ as useSelector } from "../../../_vendor/@legendapp/state/react.js";
import { useMemo } from "react";
import { responseTv } from "../tv.js";
import { MessageAttachments } from "./messages/message-attachments/message-attachments.js";
import { messageComputed$ } from "../../../stores/message-store.js";
import { Markdown } from "../../common/markdown/markdown.js";
const ResponseContent = observer(function ResponseContent2(props) {
  const { response, messageId, hasAvatar, hasActions, hasTimestamp, children, className } = props;
  const id = messageId ?? response?.message?.id;
  const message = useSelector(id ? messageComputed$.getMessage(id) : void 0);
  const isStreaming = message?.isStreaming ?? false;
  const resolvedHasAvatar = hasAvatar ?? response?.hasAvatar ?? false;
  const resolvedHasActions = hasActions ?? response?.hasActions ?? false;
  const resolvedHasTimestamp = hasTimestamp ?? response?.hasTimestamp ?? false;
  const isUser = message?.role === "user";
  const content = message?.content ?? "";
  const renderedContent = useMemo(() => {
    if (isUser || !content) {
      return content;
    }
    return content + (isStreaming ? "|" : "");
  }, [content, isStreaming, isUser]);
  const tv = responseTv({
    hasAvatar: resolvedHasAvatar,
    hasActions: resolvedHasActions,
    hasTimestamp: resolvedHasTimestamp
  });
  if (!message) return null;
  return /* @__PURE__ */ jsxs("div", { className: tv.content({ className }), children: [
    renderedContent ? children ?? /* @__PURE__ */ jsx(Markdown, { children: renderedContent }) : /* @__PURE__ */ jsx("div", { className: tv.loading(), children: /* @__PURE__ */ jsx(SpinnerBounce, { size: "small" }) }),
    message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx(MessageAttachments, { attachments: message.attachments })
  ] });
});
export {
  ResponseContent
};
//# sourceMappingURL=response-content.js.map
