@liveblocks/react-ui/dist/components/internal/AiChatComposer.cjs

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.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var core = require('@liveblocks/core');
var react$1 = require('@liveblocks/react');
var _private = require('@liveblocks/react/_private');
var react = require('react');
var Send = require('../../icons/Send.cjs');
var Stop = require('../../icons/Stop.cjs');
var overrides = require('../../overrides.cjs');
var index = require('../../primitives/AiChatComposer/index.cjs');
var cn = require('../../utils/cn.cjs');
var Button = require('./Button.cjs');
var Tooltip = require('./Tooltip.cjs');
var TooltipPrimitive = require('@radix-ui/react-tooltip');

const AiChatComposer = react.forwardRef(
  ({
    defaultValue,
    onComposerSubmit,
    disabled,
    autoFocus,
    overrides: overrides$1,
    className,
    chatId,
    branchId,
    copilotId,
    stream = true,
    onUserMessageCreate,
    ...props
  }, forwardedRef) => {
    const $ = overrides.useOverrides(overrides$1);
    const client = react$1.useClient();
    const getLastMessageId = react.useCallback((messages) => {
      const lastMessage = messages[messages.length - 1];
      if (lastMessage === void 0)
        return null;
      return lastMessage.id;
    }, []);
    const getAbortableMessageId = react.useCallback((messages) => {
      return messages.find(
        (m) => m.role === "assistant" && (m.status === "generating" || m.status === "awaiting-tool")
      )?.id;
    }, []);
    const messages\u03A3 = client[core.kInternal].ai.signals.getChatMessagesForBranch\u03A3(
      chatId,
      branchId
    );
    const abortableMessageId = _private.useSignal(messages\u03A3, getAbortableMessageId);
    const lastMessageId = _private.useSignal(messages\u03A3, getLastMessageId);
    const handleComposerSubmit = react.useCallback(
      (message, event) => {
        if (abortableMessageId !== void 0) {
          event.preventDefault();
          return;
        }
        onComposerSubmit?.(message, event);
        if (event.isDefaultPrevented())
          return;
        const content = [{ type: "text", text: message.text }];
        const newMessageId = client[core.kInternal].ai[core.kInternal].context.messagesStore.createOptimistically(
          chatId,
          "user",
          lastMessageId,
          content
        );
        onUserMessageCreate?.({ id: newMessageId });
        const targetMessageId = client[core.kInternal].ai[core.kInternal].context.messagesStore.createOptimistically(
          chatId,
          "assistant",
          newMessageId
        );
        client[core.kInternal].ai.askUserMessageInChat(
          chatId,
          { id: newMessageId, parentMessageId: lastMessageId, content },
          targetMessageId,
          {
            stream,
            copilotId
          }
        );
      },
      [
        onComposerSubmit,
        onUserMessageCreate,
        client,
        chatId,
        lastMessageId,
        abortableMessageId,
        stream,
        copilotId
      ]
    );
    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
      children: /* @__PURE__ */ jsxRuntime.jsx(index.AiChatComposerForm, {
        className: cn.cn(
          "lb-root lb-ai-chat-composer lb-ai-chat-composer-form",
          className
        ),
        dir: $.dir,
        ...props,
        disabled,
        ref: forwardedRef,
        onComposerSubmit: handleComposerSubmit,
        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
          className: "lb-ai-chat-composer-editor-container",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(index.AiChatComposerEditor, {
              autoFocus,
              className: "lb-ai-chat-composer-editor",
              placeholder: $.AI_CHAT_COMPOSER_PLACEHOLDER,
              defaultValue
            }),
            /* @__PURE__ */ jsxRuntime.jsxs("div", {
              className: "lb-ai-chat-composer-footer",
              children: [
                /* @__PURE__ */ jsxRuntime.jsx("div", {
                  className: "lb-ai-chat-composer-editor-actions"
                }),
                /* @__PURE__ */ jsxRuntime.jsx("div", {
                  className: "lb-ai-chat-composer-actions",
                  children: abortableMessageId === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
                    content: $.AI_CHAT_COMPOSER_SEND,
                    shortcut: "Enter",
                    children: /* @__PURE__ */ jsxRuntime.jsx(index.AiChatComposerSubmit, {
                      asChild: true,
                      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
                        onPointerDown: (event) => event.preventDefault(),
                        onClick: (event) => event.stopPropagation(),
                        className: "lb-ai-chat-composer-action",
                        variant: "primary",
                        "aria-label": $.AI_CHAT_COMPOSER_SEND,
                        icon: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
                      })
                    })
                  }) : /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
                    content: $.AI_CHAT_COMPOSER_ABORT,
                    children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
                      onPointerDown: (event) => event.preventDefault(),
                      onClick: (event) => {
                        event.stopPropagation();
                        client[core.kInternal].ai.abort(abortableMessageId);
                      },
                      className: "lb-ai-chat-composer-action",
                      variant: "secondary",
                      "aria-label": $.AI_CHAT_COMPOSER_ABORT,
                      icon: /* @__PURE__ */ jsxRuntime.jsx(Stop.StopIcon, {})
                    })
                  })
                })
              ]
            })
          ]
        })
      })
    });
  }
);

exports.AiChatComposer = AiChatComposer;
//# sourceMappingURL=AiChatComposer.cjs.map