import { jsxs, jsx } from "react/jsx-runtime";
import { WarningTriangleSmall } from "@choiceform/icons-react";
import { observer, use$ as useSelector } from "../../../_vendor/@legendapp/state/react.js";
import { tcv } from "@choiceform/design-system";
import { messageComputed$ } from "../../../stores/message-store.js";
const errorTv = tcv({
  slots: {
    root: "text-danger-foreground",
    icon: "mr-1 inline-block align-top"
  },
  variants: {
    hasAvatar: {
      true: {
        root: "col-start-2"
      },
      false: {
        root: ""
      }
    },
    hasActions: {
      true: "",
      false: ""
    },
    hasTimestamp: {
      true: "",
      false: ""
    }
  },
  compoundVariants: [
    {
      hasActions: true,
      hasTimestamp: true,
      class: {
        root: "col-span-2"
      }
    }
  ]
});
const ResponseError = observer(function ResponseError2({
  response,
  messageId,
  hasActions,
  hasAvatar,
  hasTimestamp
}) {
  const id = messageId ?? response?.message?.id;
  const message = useSelector(id ? messageComputed$.getMessage(id) : void 0);
  if (!message) return null;
  if (!message.error) return null;
  const tv = errorTv({
    hasAvatar: hasAvatar ?? false,
    hasActions: hasActions ?? false,
    hasTimestamp: hasTimestamp ?? false
  });
  return /* @__PURE__ */ jsxs("div", { className: tv.root(), children: [
    /* @__PURE__ */ jsx(WarningTriangleSmall, { className: tv.icon() }),
    message.error.message
  ] });
});
export {
  ResponseError
};
//# sourceMappingURL=response-error.js.map
