@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
20 lines (19 loc) • 2.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { BiError, BiListUl } from "react-icons/bi";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiSpinner } from "../spinner/Spinner";
import { VuiText } from "../typography/Text";
import { VuiTextColor } from "../typography/TextColor";
import { VuiIcon } from "../icon/Icon";
import { VuiIconButton } from "../button/IconButton";
import { VuiButtonSecondary } from "../button/ButtonSecondary";
import { VuiSpacer } from "../spacer/Spacer";
export const VuiChatTurn = ({ turn, isInspectionEnabled, setInspectedTurn, onRetry }) => {
var _a;
const turnClasses = classNames("vuiChatQuestion", {
"vuiChatQuestion--error": !turn.isLoading && turn.error
});
return (_jsxs("div", Object.assign({ className: "vuiChatTurn" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: turnClasses }, { children: _jsx("h3", { children: turn.question }) })) })), isInspectionEnabled && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Inspect turn", size: "xs", className: "vuiChat__inspectButton", color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiListUl, {}) })), onClick: () => setInspectedTurn(turn) }) })))] })), _jsx("div", Object.assign({ className: "vuiChatAnswer" }, { children: turn.isLoading ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: "Thinking\u2026" })) }) }) }))] }))) : turn.error ? (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: "subdued" }, { children: _jsx(BiError, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: (_a = turn.error) === null || _a === void 0 ? void 0 : _a.message })) }) }) }))] })), _jsx(VuiSpacer, { size: "s" }), _jsx(VuiButtonSecondary, Object.assign({ size: "xs", color: "neutral", onClick: () => onRetry(turn) }, { children: "Ask again" }))] })) : (turn.answer) }))] })));
};