@liveblocks/react-ui/dist/components/internal/AiComposer.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 } from 'react/jsx-runtime';
import { useSendAiMessage } from '@liveblocks/react';
import { useCallback, forwardRef } from 'react';
import { SendIcon } from '../../icons/Send.js';
import { StopIcon } from '../../icons/Stop.js';
import { useOverrides } from '../../overrides.js';
import { AiComposerAbort, AiComposerSubmit, AiComposerForm, Editor as AiComposerEditor } from '../../primitives/AiComposer/index.js';
import { useAiComposer } from '../../primitives/AiComposer/contexts.js';
import { cn } from '../../utils/cn.js';
import { Button } from './Button.js';
import { ShortcutTooltip } from './Tooltip.js';
import { TooltipProvider } from '@radix-ui/react-tooltip';

function AiComposerAction({
  overrides
}) {
  const { canAbort } = useAiComposer();
  const $ = useOverrides(overrides);
  const preventDefault = useCallback((event) => {
    event.preventDefault();
  }, []);
  const stopPropagation = useCallback((event) => {
    event.stopPropagation();
  }, []);
  return canAbort ? /* @__PURE__ */ jsx(ShortcutTooltip, { content: $.AI_COMPOSER_ABORT, children: /* @__PURE__ */ jsx(AiComposerAbort, { asChild: true, children: /* @__PURE__ */ jsx(
    Button,
    {
      onPointerDown: preventDefault,
      onClick: stopPropagation,
      className: "lb-ai-composer-action",
      variant: "secondary",
      "aria-label": $.AI_COMPOSER_ABORT,
      icon: /* @__PURE__ */ jsx(StopIcon, {})
    }
  ) }) }) : /* @__PURE__ */ jsx(ShortcutTooltip, { content: $.AI_COMPOSER_SEND, shortcut: "Enter", children: /* @__PURE__ */ jsx(AiComposerSubmit, { asChild: true, children: /* @__PURE__ */ jsx(
    Button,
    {
      onPointerDown: preventDefault,
      onClick: stopPropagation,
      className: "lb-ai-composer-action",
      variant: "primary",
      "aria-label": $.AI_COMPOSER_SEND,
      icon: /* @__PURE__ */ jsx(SendIcon, {})
    }
  ) }) });
}
const AiComposer = forwardRef(
  ({
    defaultValue,
    onComposerSubmit,
    disabled,
    autoFocus,
    overrides,
    className,
    chatId,
    branchId,
    copilotId,
    responseTimeout,
    stream = true,
    onComposerSubmitted,
    ...props
  }, forwardedRef) => {
    const $ = useOverrides(overrides);
    const sendAiMessage = useSendAiMessage(chatId, {
      stream,
      copilotId,
      timeout: responseTimeout
    });
    const handleComposerSubmit = useCallback(
      (message, event) => {
        onComposerSubmit?.(message, event);
        if (event.isDefaultPrevented())
          return;
        const newMessage = sendAiMessage(message.text);
        onComposerSubmitted?.(newMessage);
      },
      [onComposerSubmit, sendAiMessage, onComposerSubmitted]
    );
    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
      AiComposerForm,
      {
        className: cn(
          "lb-root lb-ai-composer lb-ai-composer-form",
          className
        ),
        dir: $.dir,
        ...props,
        disabled,
        ref: forwardedRef,
        onComposerSubmit: handleComposerSubmit,
        chatId,
        branchId,
        children: /* @__PURE__ */ jsxs("div", { className: "lb-ai-composer-editor-container", children: [
          /* @__PURE__ */ jsx(
            AiComposerEditor,
            {
              autoFocus,
              className: "lb-ai-composer-editor",
              placeholder: $.AI_COMPOSER_PLACEHOLDER,
              defaultValue
            }
          ),
          /* @__PURE__ */ jsxs("div", { className: "lb-ai-composer-footer", children: [
            /* @__PURE__ */ jsx("div", { className: "lb-ai-composer-editor-actions" }),
            /* @__PURE__ */ jsx("div", { className: "lb-ai-composer-actions", children: /* @__PURE__ */ jsx(AiComposerAction, { overrides }) })
          ] })
        ] })
      }
    ) });
  }
);

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