@liveblocks/react-ui/dist/components/internal/AiChatAssistantMessage.js

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { memo, forwardRef, useState, useEffect } from 'react';
import { ChevronRightIcon } from '../../icons/ChevronRight.js';
import { WarningIcon } from '../../icons/Warning.js';
import { useOverrides, OverridesProvider } from '../../overrides.js';
import { Content as AiMessageContent } from '../../primitives/AiMessage/index.js';
import { AiMessageToolInvocation } from '../../primitives/AiMessage/tool-invocation.js';
import { Root as CollapsibleRoot, Trigger as CollapsibleTrigger, Content as CollapsibleContent } from '../../primitives/Collapsible/index.js';
import { cn } from '../../utils/cn.js';
import { ErrorBoundary } from '../../utils/ErrorBoundary.js';
import { Prose } from './Prose.js';

const AiChatAssistantMessage = memo(
  forwardRef(
    ({ message, className, overrides, components, copilotId, ...props }, forwardedRef) => {
      const $ = useOverrides(overrides);
      let children = null;
      if (message.deletedAt !== void 0) {
        children = /* @__PURE__ */ jsx("div", {
          className: "lb-ai-chat-message-deleted",
          children: $.AI_CHAT_MESSAGE_DELETED
        });
      } else if (message.status === "generating" || message.status === "awaiting-tool") {
        if (message.contentSoFar.length === 0) {
          children = /* @__PURE__ */ jsx("div", {
            className: "lb-ai-chat-message-thinking lb-ai-chat-pending",
            children: $.AI_CHAT_MESSAGE_THINKING
          });
        } else {
          children = /* @__PURE__ */ jsx(AssistantMessageContent, {
            message,
            components,
            copilotId
          });
        }
      } else if (message.status === "completed") {
        children = /* @__PURE__ */ jsx(AssistantMessageContent, {
          message,
          components,
          copilotId
        });
      } else if (message.status === "failed") {
        if (message.errorReason === "Aborted by user") {
          children = /* @__PURE__ */ jsx(AssistantMessageContent, {
            message,
            components,
            copilotId
          });
        } else {
          children = /* @__PURE__ */ jsxs(Fragment, {
            children: [
              /* @__PURE__ */ jsx(AssistantMessageContent, {
                message,
                components,
                copilotId
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "lb-ai-chat-message-error",
                children: [
                  /* @__PURE__ */ jsx("span", {
                    className: "lb-icon-container",
                    children: /* @__PURE__ */ jsx(WarningIcon, {})
                  }),
                  message.errorReason
                ]
              })
            ]
          });
        }
      }
      return /* @__PURE__ */ jsx("div", {
        className: cn(
          "lb-ai-chat-message lb-ai-chat-assistant-message",
          className
        ),
        ...props,
        ref: forwardedRef,
        children: /* @__PURE__ */ jsx(OverridesProvider, {
          overrides,
          children
        })
      });
    }
  )
);
function AssistantMessageContent({
  message,
  components,
  copilotId
}) {
  return /* @__PURE__ */ jsx(AiMessageContent, {
    message,
    components: {
      TextPart: (props) => /* @__PURE__ */ jsx(TextPart, {
        ...props,
        components
      }),
      ReasoningPart: (props) => /* @__PURE__ */ jsx(ReasoningPart, {
        ...props,
        components
      }),
      ToolInvocationPart
    },
    copilotId,
    className: "lb-ai-chat-message-content"
  });
}
function TextPart({ part, components }) {
  return /* @__PURE__ */ jsx(Prose, {
    content: part.text,
    className: "lb-ai-chat-message-text",
    components
  });
}
function ReasoningPart({ part, isStreaming, components }) {
  const [isOpen, setIsOpen] = useState(isStreaming);
  const $ = useOverrides();
  useEffect(() => {
    if (!isStreaming) {
      setIsOpen(false);
    }
  }, [isStreaming]);
  return /* @__PURE__ */ jsxs(CollapsibleRoot, {
    className: "lb-collapsible lb-ai-chat-message-reasoning",
    open: isOpen,
    onOpenChange: setIsOpen,
    children: [
      /* @__PURE__ */ jsxs(CollapsibleTrigger, {
        className: cn(
          "lb-collapsible-trigger",
          isStreaming && "lb-ai-chat-pending"
        ),
        children: [
          $.AI_CHAT_MESSAGE_REASONING(isStreaming),
          /* @__PURE__ */ jsx("span", {
            className: "lb-collapsible-chevron lb-icon-container",
            children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
          })
        ]
      }),
      /* @__PURE__ */ jsx(CollapsibleContent, {
        className: "lb-collapsible-content",
        children: /* @__PURE__ */ jsx(Prose, {
          content: part.text,
          components
        })
      })
    ]
  });
}
function ToolInvocationPart({
  part,
  message,
  copilotId
}) {
  return /* @__PURE__ */ jsx("div", {
    className: "lb-ai-chat-message-tool-invocation",
    children: /* @__PURE__ */ jsx(ErrorBoundary, {
      fallback: /* @__PURE__ */ jsxs("div", {
        className: "lb-ai-chat-message-error",
        children: [
          /* @__PURE__ */ jsx("span", {
            className: "lb-icon-container",
            children: /* @__PURE__ */ jsx(WarningIcon, {})
          }),
          /* @__PURE__ */ jsxs("p", {
            children: [
              "Failed to render tool call result for ",
              /* @__PURE__ */ jsx("code", {
                children: part.name
              }),
              ". See console for details."
            ]
          })
        ]
      }),
      children: /* @__PURE__ */ jsx(AiMessageToolInvocation, {
        part,
        message,
        copilotId
      })
    })
  });
}

export { AiChatAssistantMessage };
//# sourceMappingURL=AiChatAssistantMessage.js.map