@langbase/components
Version:
Ready to use components for building AI powered web apps
1,209 lines (1,205 loc) • 52.7 kB
JavaScript
import * as React2 from 'react';
import { memo, useState, useRef, useEffect } from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import cn2, { cn } from 'mxcn';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { usePipe } from '@baseai/core/react';
import Textarea from 'react-textarea-autosize';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import ReactMarkdown from 'react-markdown';
import { Prism } from 'react-syntax-highlighter';
import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { visit } from 'unist-util-visit';
var buttonVariants = cva(
"lb-inline-flex lb-items-center lb-justify-center lb-gap-2 lb-whitespace-nowrap lb-text-sm lb-font-medium lb-transition-colors focus-visible:lb-outline-none focus-visible:lb-ring-1 focus-visible:lb-ring-ring disabled:lb-pointer-events-none disabled:lb-opacity-50 [&_svg]:lb-pointer-events-none [&_svg]:lb-size-4 [&_svg]:lb-shrink-0 lb-cursor-pointer",
{
variants: {
variant: {
default: "!lb-bg-primary lb-text-primary-foreground lb-shadow hover:lb-bg-primary/90 lb-border-none",
destructive: "lb-bg-destructive lb-text-destructive-foreground lb-shadow-sm hover:lb-bg-destructive/90",
outline: "lb-border lb-border-solid lb-border-input lb-bg-transparent lb-shadow-sm hover:lb-bg-foreground hover:lb-text-background lb-text-[0.8125rem]",
secondary: "lb-bg-secondary lb-text-secondary-foreground lb-shadow-sm hover:lb-bg-secondary/80",
ghost: "hover:lb-bg-accent hover:lb-text-accent-foreground lb-bg-transparent lb-border-none",
link: "lb-text-primary lb-underline-offset-4 hover:lb-underline"
},
size: {
default: "lb-h-9 lb-px-4 lb-rounded-lg lb-py-2",
sm: "lb-h-8 lb-rounded-lg lb-px-3 lb-text-xs",
lg: "lb-h-10 lb-rounded-lg lb-px-8",
icon: "lb-h-9 lb-w-9"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
var Button = React2.forwardRef(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return /* @__PURE__ */ jsx(
Comp,
{
className: cn(buttonVariants({ variant, size, className })),
ref,
...props
}
);
}
);
Button.displayName = "Button";
function IconSend(props) {
return /* @__PURE__ */ jsx(
"svg",
{
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20 4C19.4477 4 19 4.44772 19 5V14H6.41421L8.70711 11.7071C9.09763 11.3166 9.09763 10.6834 8.70711 10.2929C8.31658 9.90237 7.68342 9.90237 7.29289 10.2929L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L7.29289 19.7071C7.68342 20.0976 8.31658 20.0976 8.70711 19.7071C9.09763 19.3166 9.09763 18.6834 8.70711 18.2929L6.41421 16H20C20.5523 16 21 15.5523 21 15V5C21 4.44772 20.5523 4 20 4Z",
fill: "currentColor"
}
)
}
);
}
function IconSpinner({
className,
...props
}) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 256 256",
fill: "currentColor",
className: cn2("size-4 animate-spin", className),
...props,
children: /* @__PURE__ */ jsx("path", { d: "M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" })
}
);
}
function IconRegenerate(props) {
return /* @__PURE__ */ jsxs(
"svg",
{
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
children: [
/* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 5C8.13401 5 5 8.13401 5 12C5 14.3776 6.18526 16.4797 8 17.7455V15C8 14.4477 8.44772 14 9 14C9.55228 14 10 14.4477 10 15V20C10 20.5523 9.55228 21 9 21H4C3.44772 21 3 20.5523 3 20C3 19.4477 3.44772 19 4 19H6.34293C4.30475 17.3508 3 14.8284 3 12C3 7.02944 7.02944 3 12 3C13.1917 3 14.3316 3.23213 15.3752 3.65458C15.8871 3.8618 16.1342 4.4448 15.9269 4.95673C15.7197 5.46867 15.1367 5.71568 14.6248 5.50845C13.8155 5.18088 12.9301 5 12 5Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M13 21C13.5523 21 14 20.5523 14 20C14 19.4477 13.5523 19 13 19C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M21 11C21 10.4477 20.5523 9.99999 20 9.99999C19.4477 9.99999 19 10.4477 19 11C19 11.5523 19.4477 12 20 12C20.5523 12 21 11.5523 21 11Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M19.9295 14.2679C20.4078 14.5441 20.5716 15.1557 20.2955 15.634C20.0193 16.1123 19.4078 16.2761 18.9295 16C18.4512 15.7238 18.2873 15.1123 18.5634 14.634C18.8396 14.1557 19.4512 13.9918 19.9295 14.2679Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M17.3676 19.2942C17.8459 19.0181 18.0098 18.4065 17.7336 17.9282C17.4575 17.4499 16.8459 17.286 16.3676 17.5621C15.8893 17.8383 15.7254 18.4499 16.0016 18.9282C16.2777 19.4065 16.8893 19.5703 17.3676 19.2942Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M18.9269 7.99998C18.4487 8.27612 17.8371 8.11225 17.5609 7.63396C17.2848 7.15566 17.4487 6.54407 17.9269 6.26793C18.4052 5.99179 19.0168 6.15566 19.293 6.63396C19.5691 7.11225 19.4052 7.72384 18.9269 7.99998Z",
fill: "currentColor"
}
)
]
}
);
}
function IconStop({ className, ...props }) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 256 256",
fill: "currentColor",
className: cn2("lb-size-4", className),
...props,
children: /* @__PURE__ */ jsx("path", { d: "M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" })
}
);
}
function IconCopy({ className, ...props }) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 256 256",
fill: "currentColor",
className: cn2("lb-size-4", className),
...props,
children: /* @__PURE__ */ jsx("path", { d: "M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" })
}
);
}
function IconCheck({
className,
...props
}) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 256 256",
fill: "currentColor",
className: cn2("lb-size-4", className),
...props,
children: /* @__PURE__ */ jsx("path", { d: "m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" })
}
);
}
function IconDownload({
className,
...props
}) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 256 256",
fill: "currentColor",
className: cn2("lb-size-4", className),
...props,
children: /* @__PURE__ */ jsx("path", { d: "M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" })
}
);
}
function IconClose({
className,
...props
}) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 256 256",
fill: "currentColor",
className: cn2("lb-size-4", className),
...props,
children: /* @__PURE__ */ jsx("path", { d: "M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" })
}
);
}
function IconSparkles({
className,
...props
}) {
return /* @__PURE__ */ jsxs(
"svg",
{
className: cn2("lb-size-4", className),
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
...props,
children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M8 16C8 16.5523 8.44772 17 9 17C9.55228 17 10 16.5523 10 16C10 13.6915 10.5108 12.2576 11.3842 11.3842C12.2576 10.5108 13.6915 10 16 10C16.5523 10 17 9.55228 17 9C17 8.44772 16.5523 8 16 8C13.6915 8 12.2576 7.48919 11.3842 6.61581C10.5108 5.74243 10 4.30849 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 4.30849 7.48919 5.74243 6.61581 6.61581C5.74243 7.48919 4.30849 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10C4.30849 10 5.74243 10.5108 6.61581 11.3842C7.48919 12.2576 8 13.6915 8 16Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M16.5 22C16.5 22.5523 16.9477 23 17.5 23C18.0523 23 18.5 22.5523 18.5 22C18.5 20.5596 18.8198 19.7506 19.2852 19.2852C19.7506 18.8198 20.5596 18.5 22 18.5C22.5523 18.5 23 18.0523 23 17.5C23 16.9477 22.5523 16.5 22 16.5C20.5596 16.5 19.7506 16.1802 19.2852 15.7148C18.8198 15.2494 18.5 14.4404 18.5 13C18.5 12.4477 18.0523 12 17.5 12C16.9477 12 16.5 12.4477 16.5 13C16.5 14.4404 16.1802 15.2494 15.7148 15.7148C15.2494 16.1802 14.4404 16.5 13 16.5C12.4477 16.5 12 16.9477 12 17.5C12 18.0523 12.4477 18.5 13 18.5C14.4404 18.5 15.2494 18.8198 15.7148 19.2852C16.1802 19.7506 16.5 20.5596 16.5 22Z",
fill: "currentColor"
}
)
]
}
);
}
function IconChat(props) {
return /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
...props,
children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z",
fill: "currentColor"
}
)
}
);
}
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
var DialogPortal = DialogPrimitive.Portal;
var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
DialogPrimitive.Overlay,
{
ref,
className: cn(
"lb-fixed lb-inset-0 lb-z-50 lb-bg-black/80 lb- data-[state=open]:lb-animate-in data-[state=closed]:lb-animate-out data-[state=closed]:lb-fade-out-0 data-[state=open]:lb-fade-in-0",
className
),
...props
}
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
/* @__PURE__ */ jsx(DialogOverlay, {}),
/* @__PURE__ */ jsxs(
DialogPrimitive.Content,
{
ref,
className: cn(
"lb-fixed lb-left-[50%] lb-top-[50%] lb-z-50 lb-flex lb-flex-col lb-w-full lb-max-w-lg lb-translate-x-[-50%] lb-translate-y-[-50%] lb-gap-4 lb-border lb-border-solid lb-border-border lb-bg-background lb-p-6 lb-shadow-lg lb-duration-200 data-[state=open]:lb-animate-in data-[state=closed]:lb-animate-out data-[state=closed]:lb-fade-out-0 data-[state=open]:lb-fade-in-0 data-[state=closed]:lb-zoom-out-95 data-[state=open]:lb-zoom-in-95 data-[state=closed]:lb-slide-out-to-left-1/2 data-[state=closed]:lb-slide-out-to-top-[48%] data-[state=open]:lb-slide-in-from-left-1/2 data-[state=open]:lb-slide-in-from-top-[48%] sm:lb-rounded-lg",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "lb-absolute lb-right-4 lb-top-4 lb-border-none !lb-bg-transparent lb-rounded-sm lb-opacity-70 lb-ring-offset-background lb-transition-opacity hover:lb-opacity-100 focus:lb-outline-none focus:lb-ring-0 disabled:lb-pointer-events-none data-[state=open]:lb-bg-accent data-[state=open]:lb-text-muted-foreground lb-cursor-pointer", children: [
/* @__PURE__ */ jsx(IconClose, {}),
/* @__PURE__ */ jsx("span", { className: "lb-sr-only", children: "Close" })
] })
]
}
)
] }));
DialogContent.displayName = DialogPrimitive.Content.displayName;
var DialogHeader = ({
className,
...props
}) => /* @__PURE__ */ jsx(
"div",
{
className: cn(
"lb-flex lb-flex-col lb-space-y-1.5 lb-text-center sm:lb-text-left",
className
),
...props
}
);
DialogHeader.displayName = "DialogHeader";
var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
DialogPrimitive.Title,
{
ref,
className: cn(
"lb-text-lg lb-font-semibold lb-leading-none lb-tracking-tight",
className
),
...props
}
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
DialogPrimitive.Description,
{
ref,
className: cn("lb-text-sm lb-text-muted-foreground", className),
...props
}
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
function useEnterSubmit() {
const formRef = useRef(null);
const handleKeyDown = (event) => {
var _a;
if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
(_a = formRef.current) == null ? void 0 : _a.requestSubmit();
event.preventDefault();
}
};
return { formRef, onKeyDown: handleKeyDown };
}
var useIsDarkMode = () => {
const [isDark, setIsDark] = useState(() => {
if (typeof window === "undefined") return false;
const hasWebsiteDarkMode = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
if (!hasWebsiteDarkMode) {
return window.matchMedia("(prefers-color-scheme: dark)").matches;
}
return hasWebsiteDarkMode;
});
useEffect(() => {
if (typeof window === "undefined") return;
const updateTheme = () => {
const hasWebsiteDarkMode = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
setIsDark(hasWebsiteDarkMode);
};
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "class") {
updateTheme();
}
});
});
observer.observe(document.documentElement, { attributes: true });
observer.observe(document.body, { attributes: true });
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const systemPreferenceHandler = (e) => {
const hasWebsiteDarkMode = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
if (!hasWebsiteDarkMode) {
setIsDark(e.matches);
}
};
mediaQuery.addEventListener("change", systemPreferenceHandler);
updateTheme();
return () => {
observer.disconnect();
mediaQuery.removeEventListener("change", systemPreferenceHandler);
};
}, [setIsDark]);
return isDark;
};
function PromptForm({
onSubmit,
input,
setInput,
isLoading,
reset,
customStyles
}) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
const { formRef, onKeyDown } = useEnterSubmit();
const inputRef = React2.useRef(null);
const isDarkMode = useIsDarkMode();
React2.useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return /* @__PURE__ */ jsx(
"form",
{
onSubmit: (e) => {
e.preventDefault();
if (!isLoading) onSubmit(e);
},
ref: formRef,
children: /* @__PURE__ */ jsxs(
"div",
{
className: "lb-relative lb-flex lb-max-h-60 lb-w-full lb-grow lb-flex-col lb-overflow-hidden lb-bg-background lb-px-2 lb-pb-2 sm:lb-rounded-2xl sm:lb-border sm:lb-border-border sm:lb-border-solid",
style: {
...((_a = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a.backgroundColor) && {
backgroundColor: !isDarkMode ? (_b = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b.backgroundColor : (_c = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c.foregroundColor
},
...((_d = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _d.foregroundColor) && {
borderColor: !isDarkMode ? (_e = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _e.foregroundColor : (_f = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _f.backgroundColor
}
},
children: [
/* @__PURE__ */ jsx("div", { className: "lb-flex lb-w-full lb-flex-col", children: /* @__PURE__ */ jsxs(
"label",
{
htmlFor: "playground",
className: "lb-text-config lb-flex lb-justify-between lb-gap-y-4 lb-rounded-xl lb-px-3 lb-py-4 lb-font-medium lb-leading-6 lb-text-foreground md:lb-flex-row md:lb-items-center md:lb-gap-y-0",
children: [
/* @__PURE__ */ jsxs("div", { className: "lb-flex lb-items-center lb-gap-x-2", children: [
/* @__PURE__ */ jsx(
IconChat,
{
className: "lb-size-5 lb-text-muted-foreground/50",
"aria-hidden": "true",
style: {
...((_g = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _g.foregroundColor) && {
color: !isDarkMode ? (_h = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _h.foregroundColor : (_i = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _i.backgroundColor,
opacity: 0.5
}
}
}
),
/* @__PURE__ */ jsx(
"h3",
{
className: "lb-text-md lb-font-semibold",
style: {
...((_j = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _j.foregroundColor) && {
color: !isDarkMode ? (_k = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _k.foregroundColor : (_l = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _l.backgroundColor
}
},
children: "Ask"
}
)
] }),
/* @__PURE__ */ jsxs("div", { className: "lb-flex lb-items-center lb-justify-center lb-gap-2 md:lb-justify-start", children: [
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
className: "lb-max-w-xs lb-text-muted-foreground/70",
onClick: reset,
style: {
...((_m = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _m.foregroundColor) && {
color: !isDarkMode ? (_n = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _n.foregroundColor : (_o = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _o.backgroundColor
}
},
children: "Clear"
}
),
/* @__PURE__ */ jsxs(
Button,
{
type: "submit",
className: "lb-flex lb-items-center lb-gap-2",
disabled: isLoading || input === "",
style: {
...((_p = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _p.foregroundColor) && {
color: !isDarkMode ? (_q = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _q.backgroundColor : (_r = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _r.foregroundColor
},
...((_s = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _s.backgroundColor) && {
backgroundColor: !isDarkMode ? (_t = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _t.foregroundColor : (_u = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _u.backgroundColor
}
},
children: [
isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(IconSpinner, { className: "lb-size-4" }),
"Loading"
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(IconSend, { className: "lb-size-4" }),
"Send"
] }),
/* @__PURE__ */ jsx("span", { className: "lb-sr-only", children: "Send message" })
]
}
)
] })
]
}
) }),
/* @__PURE__ */ jsx(
Textarea,
{
ref: inputRef,
tabIndex: 0,
onKeyDown,
rows: 1,
maxRows: 10,
value: input,
onChange: setInput,
placeholder: "Enter your question...",
spellCheck: false,
className: "lb-min-h-[60px] lb-w-full lb-resize-none lb-rounded-lg lb-bg-muted lb-px-4 lb-py-[1.3rem] focus-within:lb-outline-none focus-within:lb-ring-0 sm:lb-text-sm focus-visible:lb-ring-0 focus-visible:lb-outline-none focus:lb-ring-0 focus:lb-outline-none lb-outline-none lb-border-none lb-font-sans placeholder:lb-text-muted-foreground"
}
)
]
}
)
}
);
}
function ChatInput({
isLoading,
stop,
regenerate,
input,
setInput,
messages,
onSubmit,
reset,
customStyles
}) {
return /* @__PURE__ */ jsx("div", { className: "lb-fixed lb-inset-x-0 lb-bottom-0 lb-px-4", children: /* @__PURE__ */ jsxs("div", { className: "lb-mx-auto lb-max-w-3xl sm:lb-max-w-4xl", children: [
/* @__PURE__ */ jsx("div", { className: "lb-flex lb-h-10 lb-items-center lb-justify-center", children: isLoading ? /* @__PURE__ */ jsxs(
Button,
{
variant: "outline",
onClick: stop,
className: "lb-bg-background lb-text-muted-foreground",
size: "sm",
children: [
/* @__PURE__ */ jsx(IconStop, { className: "lb-text-muted-foreground/50 group-hover:lb-text-background" }),
"Stop generating"
]
}
) : (messages == null ? void 0 : messages.length) > 0 && /* @__PURE__ */ jsxs(
Button,
{
variant: "outline",
onClick: regenerate,
className: "lb-bg-background lb-text-muted-foreground",
size: "sm",
children: [
/* @__PURE__ */ jsx(IconRegenerate, { className: "lb-size-4 lb-text-muted-foreground/50 group-hover:lb-text-background" }),
"Regenerate response"
]
}
) }),
/* @__PURE__ */ jsxs("div", { className: "lb-space-y-2 lb-pb-4 lb-pt-2", children: [
/* @__PURE__ */ jsx(
PromptForm,
{
input,
onSubmit,
setInput,
isLoading,
reset,
customStyles
}
),
/* @__PURE__ */ jsxs("div", { className: "lb-flex lb-items-center lb-justify-center lb-text-xs lb-text-muted-foreground/80", children: [
"Powered by",
" ",
/* @__PURE__ */ jsx(
"a",
{
className: "lb-ml-1 lb-font-bold lb-text-muted-foreground/80 lb-transition-colors hover:lb-text-primary/80",
href: "https://langbase.com/",
target: "_blank",
children: "\u2318 Langbase"
}
)
] })
] })
] }) });
}
var Separator = React2.forwardRef(
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
SeparatorPrimitive.Root,
{
ref,
decorative,
orientation,
className: cn(
"lb-shrink-0 lb-bg-border",
orientation === "horizontal" ? "lb-h-[1px] lb-w-full" : "lb-h-full lb-w-[1px]",
className
),
...props
}
)
);
Separator.displayName = SeparatorPrimitive.Root.displayName;
function useCopyToClipboard({
timeout = 2e3
}) {
const [isCopied, setIsCopied] = React2.useState(false);
const copyToClipboard = (value) => {
var _a;
if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
return;
}
if (!value) {
return;
}
navigator.clipboard.writeText(value).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, timeout);
});
};
return { isCopied, copyToClipboard };
}
function ChatMessageActions({
message,
isLoading,
className,
...props
}) {
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
const onCopy = () => {
var _a;
if (isCopied) return;
copyToClipboard((_a = message.content) != null ? _a : "");
};
return /* @__PURE__ */ jsx(
"div",
{
className: cn2(
"lb-absolute lb-bottom-0 lb-right-0 lb-flex lb-items-center lb-justify-end lb-opacity-0 lb-transition-opacity group-hover:lb-opacity-70",
className
),
...props,
children: isLoading && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", onClick: onCopy, children: [
isCopied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, {}),
/* @__PURE__ */ jsx("span", { className: "lb-sr-only", children: "Copy message" })
] })
}
);
}
var MemoizedReactMarkdown = memo(
ReactMarkdown,
(prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
);
var programmingLanguages = {
javascript: ".js",
python: ".py",
java: ".java",
c: ".c",
cpp: ".cpp",
"c++": ".cpp",
"c#": ".cs",
ruby: ".rb",
php: ".php",
swift: ".swift",
"objective-c": ".m",
kotlin: ".kt",
typescript: ".ts",
go: ".go",
perl: ".pl",
rust: ".rs",
scala: ".scala",
haskell: ".hs",
lua: ".lua",
shell: ".sh",
sql: ".sql",
html: ".html",
css: ".css"
};
var generateRandomString = (length, lowercase = false) => {
const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
let result = "";
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return lowercase ? result.toLowerCase() : result;
};
var CodeBlock = memo(({ language, value }) => {
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
const downloadAsFile = () => {
if (typeof window === "undefined") {
return;
}
const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
const fileName = window.prompt("Enter file name", suggestedFileName);
if (!fileName) {
return;
}
const blob = new Blob([value], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = fileName;
link.href = url;
link.style.display = "none";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
const onCopy = () => {
if (isCopied) return;
copyToClipboard(value);
};
return /* @__PURE__ */ jsxs("div", { className: "lb-not-prose lb-relative lb-w-full lb-rounded-xl lb-bg-zinc-950 lb-font-sans", children: [
/* @__PURE__ */ jsxs("div", { className: "lb-flex lb-w-full lb-items-center lb-justify-between lb-rounded-xl lb-bg-zinc-800 lb-px-6 lb-py-2 lb-pr-4 lb-text-zinc-100", children: [
/* @__PURE__ */ jsx("span", { className: "lb-text-xs lb-lowercase", children: language }),
/* @__PURE__ */ jsxs("div", { className: "lb-flex lb-items-center lb-space-x-1", children: [
/* @__PURE__ */ jsxs(
Button,
{
variant: "ghost",
className: "hover:lb-bg-zinc-800 focus-visible:lb-ring-1 focus-visible:lb-ring-slate-700 focus-visible:lb-ring-offset-0",
onClick: downloadAsFile,
size: "icon",
children: [
/* @__PURE__ */ jsx(IconDownload, {}),
/* @__PURE__ */ jsx("span", { className: "lb-sr-only", children: "Download" })
]
}
),
/* @__PURE__ */ jsxs(
Button,
{
variant: "ghost",
size: "icon",
className: "lb-text-xs hover:lb-bg-zinc-800 focus-visible:lb-ring-1 focus-visible:lb-ring-slate-700 focus-visible:lb-ring-offset-0",
onClick: onCopy,
children: [
isCopied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, {}),
/* @__PURE__ */ jsx("span", { className: "lb-sr-only", children: "Copy code" })
]
}
)
] })
] }),
/* @__PURE__ */ jsx(
Prism,
{
language,
style: coldarkDark,
PreTag: "div",
showLineNumbers: true,
customStyle: {
margin: 0,
width: "100%",
background: "transparent",
padding: "1.5rem 1rem"
},
codeTagProps: {
style: {
fontSize: "0.9rem",
fontFamily: "var(--lb-font-mono)"
}
},
children: value
}
)
] });
});
CodeBlock.displayName = "CodeBlock";
function rehypeInlineCodeProperty() {
return function(tree) {
visit(tree, "element", function(node, index, parent) {
if (node.tagName === "code") {
const isInline = !(parent && parent.tagName === "pre");
node.properties.inline = isInline.toString();
}
});
};
}
function ChatMessage({
message,
isLoading,
customStyles,
enableActions = true,
...props
}) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const isDarkMode = useIsDarkMode();
return /* @__PURE__ */ jsxs(
"div",
{
className: cn2("lb-group lb-relative lb-flex lb-items-start"),
...props,
children: [
/* @__PURE__ */ jsx(
"div",
{
className: cn2(
"lb-flex lb-size-8 lb-select-none lb-items-center lb-justify-center lb-rounded-xl lb-border lb-border-solid lb-border-muted-foreground/40 lb-shadow",
message.role === "user" ? "lb-bg-background" : "lb-bg-primary lb-text-primary-foreground"
),
style: {
...((_a = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a.foregroundColor) && {
backgroundColor: !isDarkMode && message.role === "user" ? (_b = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b.foregroundColor : (_c = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c.backgroundColor,
color: !isDarkMode && message.role === "user" ? (_d = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _d.backgroundColor : (_e = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _e.foregroundColor
}
},
children: message.role === "user" ? /* @__PURE__ */ jsx(Fragment, { children: "U" }) : /* @__PURE__ */ jsx(IconSparkles, {})
}
),
/* @__PURE__ */ jsxs(
"div",
{
className: "lb-relative lb-ml-4 lb-flex-1 lb-overflow-hidden lb-px-1",
id: "langbase-chatbot-content",
style: {
...((_f = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _f.foregroundColor) && {
color: !isDarkMode ? (_g = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _g.foregroundColor : (_h = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _h.backgroundColor
}
},
children: [
/* @__PURE__ */ jsx(
MemoizedReactMarkdown,
{
className: cn2(
"lb-prose lb-break-words lb-rounded-xl dark:lb-prose-invert lb-prose-p:leading-relaxed lb-prose-pre:rounded-xl lb-prose-pre:p-0 lb-text-inherit"
),
remarkPlugins: [remarkGfm, remarkMath],
rehypePlugins: [rehypeInlineCodeProperty],
components: {
p({ children }) {
return /* @__PURE__ */ jsx("p", { className: "lb-mb-4 last:lb-mb-0", children });
},
code({ node, className, children, ...props2 }) {
const match = /language-(\w+)/.exec(
className || ""
);
const isInline = (node == null ? void 0 : node.properties.inline) === "true";
if (!isInline) {
return /* @__PURE__ */ jsx(
CodeBlock,
{
language: match && match[1] || "",
value: String(children).replace(
/\n$/,
""
),
...props2
},
Math.random()
);
}
return /* @__PURE__ */ jsx("code", { className, ...props2, children });
}
},
children: message.content || ""
}
),
message.role !== "user" && enableActions && /* @__PURE__ */ jsx(ChatMessageActions, { isLoading: true, message })
]
}
)
]
}
);
}
function AiLoader({ customStyles }) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const isDarkMode = useIsDarkMode();
return /* @__PURE__ */ jsxs("div", { className: cn2("lb-group lb-relative lb-flex lb-items-start"), children: [
/* @__PURE__ */ jsx(
"div",
{
className: cn2(
"lb-flex lb-size-8 lb-select-none lb-items-center lb-justify-center lb-rounded-xl lb-border lb-border-muted-foreground/40 lb-shadow",
"lb-bg-primary lb-text-primary-foreground"
),
style: {
...((_a = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a.foregroundColor) && {
backgroundColor: !isDarkMode ? (_b = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b.foregroundColor : (_c = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c.backgroundColor,
color: !isDarkMode ? (_d = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _d.backgroundColor : (_e = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _e.foregroundColor
}
},
children: /* @__PURE__ */ jsx(IconSparkles, { className: "lb-size-4" })
}
),
/* @__PURE__ */ jsx(
"div",
{
className: "lb-ml-4 lb-flex-1 lb-overflow-hidden lb-px-1 lb-relative lb-text-muted-foreground lb-prose dark:lb-prose-invert lb-animate-pulse",
style: {
...((_f = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _f.foregroundColor) && {
color: !isDarkMode ? (_g = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _g.foregroundColor : (_h = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _h.backgroundColor
}
},
children: /* @__PURE__ */ jsx("p", { children: "AI is thinking..." })
}
)
] });
}
function ChatList({
messages,
showLoadingMessage,
isLoading,
customStyles
}) {
var _a, _b, _c;
const isDarkMode = useIsDarkMode();
if (!messages.length) {
return null;
}
return /* @__PURE__ */ jsxs("div", { className: "lb-relative lb-mx-auto lb-mb-16 lb-mt-4 sm:lb-mt-8", children: [
messages.map((message, index) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(
ChatMessage,
{
message,
isLoading,
customStyles
}
),
index < messages.length - 1 && /* @__PURE__ */ jsx(
Separator,
{
className: "lb-my-6 md:lb-my-8",
style: {
...((_a2 = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a2.backgroundColor) && {
backgroundColor: !isDarkMode ? (_b2 = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b2.backgroundColor : (_c2 = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c2.foregroundColor
}
}
}
)
] }, index);
}),
showLoadingMessage && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Separator,
{
className: "lb-my-6 md:lb-my-8",
style: {
...((_a = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a.backgroundColor) && {
backgroundColor: !isDarkMode ? (_b = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b.foregroundColor : (_c = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c.backgroundColor
}
}
}
),
/* @__PURE__ */ jsx(AiLoader, { customStyles })
] })
] });
}
var Suggestions = ({
suggestions,
sendSuggestedPrompt,
customStyles
}) => {
var _a, _b, _c;
const isDarkMode = useIsDarkMode();
useState(false);
const handleClick = (prompt) => {
sendSuggestedPrompt(prompt);
};
return /* @__PURE__ */ jsxs("div", { className: "lb-mx-auto lb-mt-8 lb-max-w-4xl", children: [
/* @__PURE__ */ jsx(
"label",
{
className: cn2(
"lb-text-sm lb-font-semibold lb-text-muted-foreground"
),
style: {
...((_a = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a.foregroundColor) && {
color: !isDarkMode ? (_b = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b.foregroundColor : (_c = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c.backgroundColor
}
},
children: "Suggestions"
}
),
/* @__PURE__ */ jsx("div", { className: "lb-grid lb-grid-cols-1 lb-gap-4 lb-pt-4 md:lb-grid-cols-2", children: suggestions.map((suggestion, index) => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i;
return /* @__PURE__ */ jsxs(
"div",
{
className: cn2(
"lb-flex lb-cursor-pointer lb-items-center lb-gap-4 lb-rounded-md lb-border lb-border-solid lb-border-muted-foreground/20 lb-p-4 lb-text-sm",
"lb-transition-colors lb-duration-200 hover:lb-bg-secondary/60"
),
onClick: () => handleClick(suggestion.prompt),
style: {
...((_a2 = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a2.foregroundColor) && {
borderColor: !isDarkMode ? (_b2 = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b2.foregroundColor : (_c2 = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c2.backgroundColor
}
},
children: [
/* @__PURE__ */ jsx(
IconSparkles,
{
className: "lb-size-4 lb-text-muted-foreground",
"aria-hidden": "true",
style: {
...((_d = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _d.foregroundColor) && {
color: !isDarkMode ? (_e = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _e.foregroundColor : (_f = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _f.backgroundColor
}
}
}
),
/* @__PURE__ */ jsx(
"p",
{
className: "lb-line-clamp-2 lb-font-light lb-leading-6 lb-text-foreground/70",
style: {
...((_g = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _g.foregroundColor) && {
color: !isDarkMode ? (_h = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _h.foregroundColor : (_i = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _i.backgroundColor,
opacity: 0.7
}
},
children: suggestion.title
}
)
]
},
index
);
}) })
] });
};
function Chatbot({
trigger,
apiRoute,
suggestions,
openingMessage: openingContent,
onConnect,
onResponse,
onError,
onFinish,
customStyles,
title,
triggerText,
badge
}) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
const [showLoadingMessage, setShowLoadingMessage] = useState(false);
const messagesContainerRef = useRef(null);
const [darkMode, setDarkMode] = useState(true);
const isDarkMode = useIsDarkMode();
useEffect(() => {
setDarkMode(isDarkMode);
}, [isDarkMode]);
function scrollToBottom() {
const chatContainer = messagesContainerRef.current;
if (chatContainer) {
chatContainer.scrollTo({
top: chatContainer.scrollHeight,
behavior: "smooth"
});
}
}
function getAskAITrigger() {
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
if (trigger) {
return /* @__PURE__ */ jsx("div", { className: cn2("lb-fixed lb-right-12 lb-bottom-12 lb-z-50"), children: trigger });
}
return /* @__PURE__ */ jsx("div", { className: cn2("lb-fixed lb-right-12 lb-bottom-12 lb-z-50"), children: /* @__PURE__ */ jsx(
Button,
{
className: cn2(
"lb-text-md lb-tracking-wide !lb-rounded-full lb-font-semibold"
),
style: {
...((_a2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _a2.borderRadius) && {
borderRadius: (_b2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _b2.borderRadius
},
...((_c2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _c2.backgroundColor) && {
backgroundColor: !darkMode ? (_d2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _d2.backgroundColor : (_e2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _e2.foregroundColor
},
...((_f2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _f2.foregroundColor) && {
color: !darkMode ? (_g2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _g2.foregroundColor : (_h2 = customStyles == null ? void 0 : customStyles.chatBtn) == null ? void 0 : _h2.backgroundColor
}
},
children: triggerText ? triggerText : "Ask AI"
}
) });
}
function handleRegenerateWithOptions() {
regenerate({
headers: { "Custom-Header": "Regenerate" },
body: { customOption: "regenerateValue" }
});
}
function handleReset() {
setMessages([]);
}
const {
messages,
input,
handleInputChange,
handleSubmit,
isLoading,
regenerate,
setMessages,
stop,
sendMessage
} = usePipe({
apiRoute,
stream: true,
onConnect: () => {
setShowLoadingMessage(true);
onConnect == null ? void 0 : onConnect();
},
onResponse: () => {
scrollToBottom();
setShowLoadingMessage(false);
onResponse == null ? void 0 : onResponse();
},
onError: () => {
setShowLoadingMessage(false);
onError == null ? void 0 : onError();
},
onFinish: () => {
onFinish == null ? void 0 : onFinish();
}
});
useEffect(() => {
scrollToBottom();
}, [messages.length]);
const hasMessages = messages.length > 0;
const sendSuggestedPrompt = async (prompt) => {
await sendMessage(prompt);
};
const openingMessage = {
role: "assistant",
content: openingContent != null ? openingContent : `Hey there!
I'm your AI assistant \u2013 managed and developed by Langbase.
Got a question? I'm here to help!`
};
const hasSuggestions = !!suggestions && suggestions.length > 0;
return /* @__PURE__ */ jsxs(
Dialog,
{
onOpenChange: (open) => {
if (!open) setTimeout(handleReset, 300);
},
children: [
/* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: getAskAITrigger() }),
/* @__PURE__ */ jsxs(
DialogContent,
{
className: "lb-flex lb-h-[80%] lb-max-h-[80vh] lb-w-[90%] lb-flex-col lb-border-border lb-outline-none sm:lb-h-[85%] sm:lb-max-h-[85vh] md:lb-max-w-[850px]",
id: "langbase-chatbot",
style: {
...((_a = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _a.borderRadius) && {
borderRadius: (_b = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _b.borderRadius
},
...((_c = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _c.backgroundColor) && {
backgroundColor: !darkMode ? (_d = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _d.backgroundColor : (_e = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _e.foregroundColor
},
...((_f = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _f.foregroundColor) && {
color: !darkMode ? (_g = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _g.foregroundColor : (_h = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _h.backgroundColor
},
...((_i = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _i.foregroundColor) && {
borderColor: !darkMode ? (_j = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _j.foregroundColor : (_k = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _k.backgroundColor
}
},
children: [
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(
DialogTitle,
{
className: "lb-text-foreground lb-flex lb-items-center",
style: {
...((_l = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _l.backgroundColor) && {
color: !isDarkMode ? (_m = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _m.foregroundColor : (_n = customStyles == null ? void 0 : customStyles.chatbot) == null ? void 0 : _n.backgroundColor
}
},
children: [
title ? title : "Ask AI",
badge && /* @__PURE__ */ jsx("span", { className: "lb-ml-3 lb-px-2 lb-py-1 lb-text-[0.6rem] lb-tracking-wider lb-ring- lb-ring-muted-foreground lb-bg-muted-foreground/10 lb-rounded-full lb-text-primary/90 lb-font-medium", children: badge })
]
}
) }),
/* @__PURE__ */ jsxs(DialogDescription, { className: "lb-h-full", children: [
/* @__PURE__ */ jsx(
"div",