@liveblocks/react-ui
Version:
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.
191 lines (187 loc) • 7.17 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var core = require('@liveblocks/core');
var react = require('react');
require('../_private/index.cjs');
require('../icons/index.cjs');
var overrides = require('../overrides.cjs');
var contexts = require('../primitives/AiMessage/contexts.cjs');
var index = require('../primitives/Collapsible/index.cjs');
var cn = require('../utils/cn.cjs');
var useControllableState = require('../utils/use-controllable-state.cjs');
var CodeBlock = require('./internal/CodeBlock.cjs');
var Button = require('./internal/Button.cjs');
var ChevronRight = require('../icons/ChevronRight.cjs');
var CheckCircleFill = require('../icons/CheckCircleFill.cjs');
var CrossCircleFill = require('../icons/CrossCircleFill.cjs');
var MinusCircle = require('../icons/MinusCircle.cjs');
var Spinner = require('../icons/Spinner.cjs');
function AiToolIcon({ className, ...props }) {
return /* @__PURE__ */ jsxRuntime.jsx("div", {
className: cn.cn("lb-ai-tool-icon", className),
...props
});
}
function AiToolInspector({ className, ...props }) {
const { args, partialArgs, result } = contexts.useAiToolInvocationContext();
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
className: cn.cn("lb-ai-tool-inspector", className),
...props,
children: [
/* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
title: "Arguments",
code: JSON.stringify(args ?? partialArgs, null, 2)
}),
result !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
title: "Result",
code: JSON.stringify(result, null, 2)
}) : null
]
});
}
function AiToolConfirmation({
children,
variant = "default",
confirm,
cancel,
overrides: overrides$1,
className,
...props
}) {
const { stage, args, respond, name, invocationId } = contexts.useAiToolInvocationContext();
const $ = overrides.useOverrides(overrides$1);
const enabled = stage === "executing";
const context = react.useMemo(() => ({ name, invocationId }), [name, invocationId]);
const onConfirmClick = react.useCallback(async () => {
if (enabled) {
const result = await confirm(args, context);
respond(result ?? void 0);
}
}, [enabled, args, confirm, respond, context]);
const onCancelClick = react.useCallback(async () => {
if (enabled) {
if (cancel === void 0) {
respond({ cancel: true });
} else {
const result = await cancel(args, context);
respond(result ?? void 0);
}
}
}, [enabled, args, cancel, respond, context]);
if (stage === "executed" && !children) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
className: cn.cn("lb-ai-tool-confirmation", className),
...props,
children: [
children ? /* @__PURE__ */ jsxRuntime.jsx("div", {
className: "lb-ai-tool-confirmation-content",
children
}) : null,
stage !== "executed" && /* @__PURE__ */ jsxRuntime.jsx("div", {
className: "lb-ai-tool-confirmation-footer",
children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
className: "lb-ai-tool-confirmation-actions",
children: [
/* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
disabled: !enabled,
onClick: onCancelClick,
variant: "secondary",
children: $.AI_TOOL_CONFIRMATION_CANCEL
}),
/* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
disabled: !enabled,
onClick: onConfirmClick,
variant: variant === "destructive" ? "destructive" : "primary",
children: $.AI_TOOL_CONFIRMATION_CONFIRM
})
]
})
})
]
});
}
function prettifyString(string) {
return string.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().toLowerCase().replace(/^\w/, (character) => character.toUpperCase());
}
const AiTool = Object.assign(
react.forwardRef(
({
children,
title,
icon,
collapsible,
collapsed,
onCollapsedChange,
className,
...props
}, forwardedRef) => {
const {
stage,
result,
name,
[core.kInternal]: { execute }
} = contexts.useAiToolInvocationContext();
const [semiControlledCollapsed, onSemiControlledCollapsed] = useControllableState.useSemiControllableState(collapsed ?? false, onCollapsedChange);
const hasContent = react.Children.count(children) > 0;
const isCollapsible = hasContent ? collapsible ?? true : false;
const resolvedTitle = react.useMemo(() => {
return title ?? prettifyString(name);
}, [title, name]);
const handleCollapsibleOpenChange = react.useCallback(
(open) => {
onSemiControlledCollapsed(!open);
},
[onSemiControlledCollapsed]
);
return /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
ref: forwardedRef,
className: cn.cn("lb-collapsible lb-ai-tool", className),
...props,
open: hasContent ? !semiControlledCollapsed : false,
onOpenChange: handleCollapsibleOpenChange,
disabled: !isCollapsible,
"data-result": result?.type,
"data-stage": stage,
children: [
/* @__PURE__ */ jsxRuntime.jsxs(index.Trigger, {
className: "lb-collapsible-trigger lb-ai-tool-header",
children: [
icon ? /* @__PURE__ */ jsxRuntime.jsx("div", {
className: "lb-ai-tool-header-icon-container",
children: icon
}) : null,
/* @__PURE__ */ jsxRuntime.jsx("span", {
className: "lb-ai-tool-header-title",
children: resolvedTitle
}),
isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx("span", {
className: "lb-collapsible-chevron lb-icon-container",
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
}) : null,
/* @__PURE__ */ jsxRuntime.jsx("div", {
className: "lb-ai-tool-header-status",
children: stage === "executed" ? result.type === "success" ? /* @__PURE__ */ jsxRuntime.jsx(CheckCircleFill.CheckCircleFillIcon, {}) : result.type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(CrossCircleFill.CrossCircleFillIcon, {}) : result.type === "cancelled" ? /* @__PURE__ */ jsxRuntime.jsx(MinusCircle.MinusCircleIcon, {}) : null : execute !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : null
})
]
}),
hasContent ? /* @__PURE__ */ jsxRuntime.jsx(index.Content, {
className: "lb-collapsible-content lb-ai-tool-content-container",
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
className: "lb-ai-tool-content",
children
})
}) : null
]
});
}
),
{
Icon: AiToolIcon,
Inspector: AiToolInspector,
Confirmation: AiToolConfirmation
}
);
exports.AiTool = AiTool;
//# sourceMappingURL=AiTool.cjs.map