@ciridae/ui-agent 0.3.0

package/dist/components/agentic/message-response.css

@@ -0,0 +1,242 @@
+@import "katex/dist/katex.min.css";
+
+@keyframes sd-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes sd-blur-in {
+	from {
+		filter: blur(4px);
+		opacity: 0;
+	}
+	to {
+		filter: blur(0);
+		opacity: 1;
+	}
+}
+
+@keyframes sd-slide-up {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+[data-sd-animate] {
+	animation: var(--sd-animation, sd-fade-in) var(--sd-duration, var(--motion-duration-fast))
+		var(--sd-easing, var(--motion-ease-standard)) var(--sd-delay, 0ms) both;
+}
+
+.agentic-message-response {
+	color: var(--foreground);
+	font-size: 0.875rem;
+	line-height: 1.6;
+	max-width: 100%;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.agentic-message-response :where(h1, h2, h3, h4, h5, h6) {
+	color: var(--foreground);
+	font-family: var(--font-ciridae-display);
+	font-weight: var(--font-ciridae-heading-weight);
+	letter-spacing: 0;
+	line-height: 1.2;
+	margin-block: 1.25rem 0.5rem;
+}
+
+.agentic-message-response :where(h1) {
+	font-size: 1.35rem;
+}
+
+.agentic-message-response :where(h2) {
+	font-size: 1.2rem;
+}
+
+.agentic-message-response :where(h3) {
+	font-size: 1.05rem;
+}
+
+.agentic-message-response :where(h4, h5, h6) {
+	font-size: 0.95rem;
+}
+
+.agentic-message-response :where(p) {
+	margin-block: 0.75rem;
+}
+
+.agentic-message-response :where(ul, ol) {
+	margin-block: 0.75rem;
+	padding-inline-start: 1.25rem;
+}
+
+.agentic-message-response :where(ul) {
+	list-style: disc;
+}
+
+.agentic-message-response :where(ol) {
+	list-style: decimal;
+}
+
+.agentic-message-response :where(li) {
+	margin-block: 0.25rem;
+	padding-inline-start: 0.125rem;
+}
+
+.agentic-message-response :where(a) {
+	color: var(--foreground);
+	text-decoration-color: color-mix(in oklch, var(--foreground) 36%, transparent);
+	text-decoration-line: underline;
+	text-underline-offset: 0.18em;
+}
+
+.agentic-message-response :where(a:hover) {
+	text-decoration-color: var(--foreground);
+}
+
+.agentic-message-response :where(strong) {
+	font-weight: var(--font-ciridae-strong-weight);
+}
+
+.agentic-message-response :where(hr) {
+	border: 0;
+	border-block-start: 1px solid var(--border);
+	margin-block: 1rem;
+}
+
+.agentic-message-response :where(blockquote) {
+	border-inline-start: 2px solid var(--border);
+	color: var(--muted-foreground);
+	font-style: normal;
+	margin-block: 1rem;
+	padding-inline-start: 0.875rem;
+}
+
+.agentic-message-response :where(code),
+.agentic-message-response :where(kbd),
+.agentic-message-response :where(pre) {
+	font-family: var(--font-ciridae-mono);
+	font-variant-numeric: tabular-nums;
+}
+
+.agentic-message-response :where(:not(pre) > code),
+.agentic-message-response [data-streamdown="inline-code"] {
+	background: var(--muted);
+	border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
+	border-radius: var(--radius-sm);
+	color: var(--foreground);
+	display: inline-block;
+	font-size: 0.8125rem;
+	max-width: 100%;
+	overflow: hidden;
+	padding: 0.0625rem 0.3125rem;
+	text-overflow: ellipsis;
+	vertical-align: text-bottom;
+	white-space: nowrap;
+}
+
+.agentic-message-response [data-streamdown="mermaid-block"] {
+	background: color-mix(in oklch, var(--muted) 52%, transparent);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-xs);
+	margin-block: 1rem;
+	max-width: 100%;
+	overflow: hidden;
+	padding: 0.5rem;
+}
+
+.agentic-message-response [data-streamdown="mermaid-block-actions"] {
+	align-items: center;
+	background: color-mix(in oklch, var(--background) 88%, transparent);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+	gap: 0.125rem;
+	min-height: 1.75rem;
+	padding: 0.125rem;
+}
+
+.agentic-message-response [data-streamdown="table-copy-button"],
+.agentic-message-response [data-streamdown="table-download-button"],
+.agentic-message-response [data-streamdown="mermaid-copy-button"],
+.agentic-message-response [data-streamdown="mermaid-download-button"] {
+	align-items: center;
+	color: var(--muted-foreground);
+	display: inline-flex;
+	height: 1.5rem;
+	justify-content: center;
+	transition:
+		background-color var(--motion-duration-fast) var(--motion-ease-standard),
+		color var(--motion-duration-fast) var(--motion-ease-standard);
+	width: 1.5rem;
+}
+
+.agentic-message-response [data-streamdown="table-copy-button"]:hover,
+.agentic-message-response [data-streamdown="table-download-button"]:hover,
+.agentic-message-response [data-streamdown="mermaid-copy-button"]:hover,
+.agentic-message-response [data-streamdown="mermaid-download-button"]:hover {
+	background: var(--accent);
+	color: var(--accent-foreground);
+}
+
+.agentic-message-response :where(table) {
+	border: 1px solid var(--border);
+	border-collapse: separate;
+	border-radius: var(--radius-md);
+	border-spacing: 0;
+	display: block;
+	margin-block: 1rem;
+	max-width: 100%;
+	overflow-x: auto;
+	width: max-content;
+}
+
+.agentic-message-response :where(thead) {
+	background: var(--muted);
+	color: var(--table-header-foreground);
+}
+
+.agentic-message-response :where(th, td) {
+	border-block-end: 1px solid var(--border);
+	font-size: 0.8125rem;
+	padding: 0.5rem 0.625rem;
+	text-align: start;
+	vertical-align: top;
+}
+
+.agentic-message-response :where(th) {
+	font-weight: var(--font-ciridae-metadata-weight);
+}
+
+.agentic-message-response :where(tr:last-child td) {
+	border-block-end: 0;
+}
+
+.agentic-message-response :where(.katex-display) {
+	overflow-x: auto;
+	overflow-y: hidden;
+	padding-block: 0.25rem;
+}
+
+.agentic-message-response [data-streamdown="mermaid"] {
+	background: var(--background);
+	border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
+	border-radius: var(--radius-md);
+	color: var(--foreground);
+	padding: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.agentic-message-response [data-sd-animate] {
+		animation: none !important;
+	}
+}

package/dist/components/agentic/message-response.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/dist/components/agentic/message.d.ts

@@ -0,0 +1,29 @@
+import type * as React from "react";
+import { Streamdown } from "streamdown";
+import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, type MessageBranchContentProps, type MessageBranchNextProps, type MessageBranchPageProps, type MessageBranchPreviousProps, type MessageBranchProps, type MessageBranchSelectorProps } from "@ciridae/ui-agent/message-branch";
+import type { AgenticMessageRole } from "@ciridae/ui-agent/types";
+import "@ciridae/ui-agent/message-response.css";
+import { Button } from "@ciridae/ui/button";
+type MessageProps = React.ComponentProps<"div"> & {
+    role: AgenticMessageRole;
+};
+type MessageContentProps = React.ComponentProps<"div"> & {
+    variant?: "default" | "bubble";
+};
+type MessageActionsProps = React.ComponentProps<"div">;
+type MessageActionProps = React.ComponentProps<typeof Button> & {
+    label?: string;
+    tooltip?: string;
+};
+type MessageToolbarProps = React.ComponentProps<"div">;
+type MessageResponseProps = React.ComponentProps<typeof Streamdown> & {
+    isStreaming?: boolean;
+};
+declare function Message({ className, role, ...props }: MessageProps): React.JSX.Element;
+declare function MessageContent({ className, variant, ...props }: MessageContentProps): React.JSX.Element;
+declare function MessageActions({ className, ...props }: MessageActionsProps): React.JSX.Element;
+declare function MessageAction({ children, label, tooltip, variant, size, ...props }: MessageActionProps): React.JSX.Element;
+declare const MessageResponse: React.MemoExoticComponent<({ animated, className, components, isStreaming, plugins, ...props }: MessageResponseProps) => React.JSX.Element>;
+declare function MessageToolbar({ className, ...props }: MessageToolbarProps): React.JSX.Element;
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };
+export type { MessageActionProps, MessageActionsProps, MessageBranchContentProps, MessageBranchNextProps, MessageBranchPageProps, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelectorProps, MessageContentProps, MessageProps, MessageResponseProps, MessageToolbarProps, };

package/dist/components/agentic/message.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { createContext, memo, useContext, useEffect, useMemo, useState } from "react";
+import { bundledLanguages } from "shiki";
+import { Streamdown } from "streamdown";
+import { CodeBlock, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle, } from "@ciridae/ui-agent/code-block";
+import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, } from "@ciridae/ui-agent/message-branch";
+import "@ciridae/ui-agent/message-response.css";
+import { Button } from "@ciridae/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { cn } from "@ciridae/ui/utils";
+import { css, cva } from "@ciridae/ui/styled-system/css";
+const MessageResponseStreamingContext = createContext(false);
+const streamdownPlugins = { cjk, code, math, mermaid };
+const messageResponseComponents = {
+    code: MessageResponseCode,
+};
+const messageResponseAnimation = {
+    animation: "fade-in",
+    duration: 200,
+    easing: "var(--motion-ease-standard)",
+    sep: "word",
+};
+const messageClassName = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "gap.2",
+    width: "full",
+    "&[data-role='user']": {
+        alignItems: "flex-end",
+    },
+    "&[data-role='assistant']": {
+        alignItems: "flex-start",
+    },
+    "&[data-role='system']": {
+        alignItems: "flex-start",
+        paddingBlock: "spacing.1",
+    },
+});
+const messageContentVariants = cva({
+    base: {
+        fontSize: "sm",
+        lineHeight: "relaxed",
+        maxWidth: "full",
+        minWidth: 0,
+        ".group\\/message[data-role='user'] &": {
+            backgroundColor: "secondary",
+            borderColor: "border",
+            borderRadius: "lg",
+            borderStyle: "solid",
+            borderWidth: "default",
+            boxShadow: "xs",
+            color: "secondary.foreground",
+            maxWidth: "min(34rem, 78%)",
+            paddingBlock: "spacing.3",
+            paddingInline: "spacing.4",
+        },
+        ".group\\/message[data-role='assistant'] &": {
+            color: "foreground",
+        },
+        ".group\\/message[data-role='system'] &": {
+            backgroundColor: "muted/30",
+            borderColor: "border",
+            borderRadius: "md",
+            borderStyle: "solid",
+            borderWidth: "default",
+            color: "muted.foreground",
+            fontSize: "xs",
+            maxWidth: "full",
+            paddingBlock: "spacing.2",
+            paddingInline: "spacing.3",
+        },
+    },
+    variants: {
+        variant: {
+            default: {},
+            bubble: {
+                backgroundColor: "card",
+                borderColor: "border",
+                borderRadius: "lg",
+                borderStyle: "solid",
+                borderWidth: "default",
+                boxShadow: "xs",
+                color: "card.foreground",
+                paddingBlock: "spacing.3",
+                paddingInline: "spacing.4",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const messageActionsClassName = css({
+    alignItems: "center",
+    display: "flex",
+    gap: "gap.1",
+});
+const messageResponseCodeBlockClassName = css({
+    marginBlock: "spacing.4",
+});
+const messageResponseCodeTitleClassName = css({
+    color: "muted.foreground",
+    fontFamily: "mono",
+    fontSize: "xs",
+});
+const messageToolbarClassName = css({
+    alignItems: "center",
+    display: "flex",
+    gap: "gap.3",
+    justifyContent: "space-between",
+    marginTop: "spacing.1",
+    maxWidth: "full",
+    width: "full",
+    ".group\\/message[data-role='user'] &": {
+        marginLeft: "auto",
+    },
+    ".group\\/message[data-role='system'] &": {
+        maxWidth: "full",
+    },
+});
+function Message({ className, role, ...props }) {
+    return (_jsx("div", { "data-role": role, "data-slot": "message", className: cn("group/message", messageClassName, className), ...props }));
+}
+function MessageContent({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "message-content", "data-variant": variant, className: cn(messageContentVariants({ variant }), className), ...props }));
+}
+function MessageActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-actions", className: cn(messageActionsClassName, className), ...props }));
+}
+function MessageAction({ children, label, tooltip, variant = "ghost", size = "icon-sm", ...props }) {
+    const accessibleLabel = props["aria-label"] ?? label ?? tooltip;
+    const button = (_jsxs(Button, { "aria-label": accessibleLabel, size: size, type: "button", variant: variant, ...props, children: [children, label || tooltip ? _jsx("span", { className: "sr-only", children: label ?? tooltip }) : null] }));
+    if (!tooltip)
+        return button;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+}
+const MessageResponse = memo(function MessageResponse({ animated, className, components, isStreaming = false, plugins, ...props }) {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const resolvedAnimation = animated === true ? messageResponseAnimation : animated;
+    const resolvedComponents = useMemo(() => ({ ...messageResponseComponents, ...components }), [components]);
+    const resolvedPlugins = useMemo(() => ({ ...streamdownPlugins, ...plugins }), [plugins]);
+    return (_jsx(MessageResponseStreamingContext.Provider, { value: isStreaming, children: _jsx(Streamdown, { animated: prefersReducedMotion ? false : resolvedAnimation, className: cn("agentic-message-response", className), components: resolvedComponents, plugins: resolvedPlugins, ...props }) }));
+});
+MessageResponse.displayName = "MessageResponse";
+function MessageResponseCode({ children, className, "data-block": dataBlock, ...props }) {
+    const isStreaming = useContext(MessageResponseStreamingContext);
+    if (!dataBlock) {
+        return (_jsx("code", { className: className, ...props, children: children }));
+    }
+    const language = getCodeLanguage(className);
+    const codeText = getCodeText(children);
+    return (_jsxs(CodeBlock, { code: codeText, language: language, className: messageResponseCodeBlockClassName, children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { className: messageResponseCodeTitleClassName, children: language }), _jsx(CodeBlockCopyButton, { size: "icon-sm" })] }), _jsx(CodeBlockContent, { streaming: isStreaming })] }));
+}
+function getCodeLanguage(className) {
+    const language = className?.match(/language-([^\s]+)/)?.[1];
+    if (language && isBundledLanguage(language))
+        return language;
+    return "tsx";
+}
+function isBundledLanguage(language) {
+    return language in bundledLanguages;
+}
+function getCodeText(children) {
+    if (typeof children === "string")
+        return children.replace(/\n$/, "");
+    if (typeof children === "number")
+        return String(children);
+    if (Array.isArray(children))
+        return children.map(getCodeText).join("");
+    return "";
+}
+function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const handleChange = (event) => setPrefersReducedMotion(event.matches);
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, []);
+    return prefersReducedMotion;
+}
+function MessageToolbar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-toolbar", className: cn(messageToolbarClassName, className), ...props }));
+}
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };

package/dist/components/agentic/model-selector.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@ciridae/ui/command";
+import { Dialog, DialogContent, DialogTrigger } from "@ciridae/ui/dialog";
+type ModelSelectorProps = React.ComponentProps<typeof Dialog>;
+type ModelSelectorTriggerProps = React.ComponentProps<typeof DialogTrigger>;
+type ModelSelectorContentProps = React.ComponentProps<typeof DialogContent> & {
+    title?: React.ReactNode;
+};
+type ModelSelectorDialogProps = React.ComponentProps<typeof CommandDialog>;
+type ModelSelectorInputProps = React.ComponentProps<typeof CommandInput>;
+type ModelSelectorListProps = React.ComponentProps<typeof CommandList>;
+type ModelSelectorEmptyProps = React.ComponentProps<typeof CommandEmpty>;
+type ModelSelectorGroupProps = React.ComponentProps<typeof CommandGroup>;
+type ModelSelectorItemProps = React.ComponentProps<typeof CommandItem>;
+type ModelSelectorShortcutProps = React.ComponentProps<typeof CommandShortcut>;
+type ModelSelectorSeparatorProps = React.ComponentProps<typeof CommandSeparator>;
+type ModelSelectorLogoProps = Omit<React.ComponentProps<"img">, "alt" | "src"> & {
+    alt?: string;
+    provider: string;
+    src?: string;
+};
+type ModelSelectorLogoGroupProps = React.ComponentProps<"div">;
+type ModelSelectorNameProps = React.ComponentProps<"span">;
+declare function ModelSelector(props: ModelSelectorProps): React.JSX.Element;
+declare function ModelSelectorTrigger(props: ModelSelectorTriggerProps): React.JSX.Element;
+declare function ModelSelectorContent({ children, className, title, ...props }: ModelSelectorContentProps): React.JSX.Element;
+declare function ModelSelectorDialog(props: ModelSelectorDialogProps): React.JSX.Element;
+declare function ModelSelectorInput({ className, ...props }: ModelSelectorInputProps): React.JSX.Element;
+declare function ModelSelectorList(props: ModelSelectorListProps): React.JSX.Element;
+declare function ModelSelectorEmpty(props: ModelSelectorEmptyProps): React.JSX.Element;
+declare function ModelSelectorGroup(props: ModelSelectorGroupProps): React.JSX.Element;
+declare function ModelSelectorItem(props: ModelSelectorItemProps): React.JSX.Element;
+declare function ModelSelectorShortcut(props: ModelSelectorShortcutProps): React.JSX.Element;
+declare function ModelSelectorSeparator(props: ModelSelectorSeparatorProps): React.JSX.Element;
+declare function ModelSelectorLogo({ alt, className, provider, src, ...props }: ModelSelectorLogoProps): React.JSX.Element;
+declare function ModelSelectorLogoGroup({ className, ...props }: ModelSelectorLogoGroupProps): React.JSX.Element;
+declare function ModelSelectorName({ className, ...props }: ModelSelectorNameProps): React.JSX.Element;
+export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, };
+export type { ModelSelectorContentProps, ModelSelectorDialogProps, ModelSelectorEmptyProps, ModelSelectorGroupProps, ModelSelectorInputProps, ModelSelectorItemProps, ModelSelectorListProps, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparatorProps, ModelSelectorShortcutProps, ModelSelectorTriggerProps, };

package/dist/components/agentic/model-selector.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@ciridae/ui/command";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@ciridae/ui/dialog";
+import { cn } from "@ciridae/ui/utils";
+function ModelSelector(props) {
+    return _jsx(Dialog, { ...props });
+}
+function ModelSelectorTrigger(props) {
+    return _jsx(DialogTrigger, { ...props });
+}
+function ModelSelectorContent({ children, className, title = "Model selector", ...props }) {
+    return (_jsxs(DialogContent, { "aria-describedby": undefined, className: cn("overflow-hidden p-0 sm:max-w-xl", className), ...props, children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: children })] }));
+}
+function ModelSelectorDialog(props) {
+    return _jsx(CommandDialog, { ...props });
+}
+function ModelSelectorInput({ className, ...props }) {
+    return _jsx(CommandInput, { className: cn("h-auto py-3", className), ...props });
+}
+function ModelSelectorList(props) {
+    return _jsx(CommandList, { ...props });
+}
+function ModelSelectorEmpty(props) {
+    return _jsx(CommandEmpty, { ...props });
+}
+function ModelSelectorGroup(props) {
+    return _jsx(CommandGroup, { ...props });
+}
+function ModelSelectorItem(props) {
+    return _jsx(CommandItem, { ...props });
+}
+function ModelSelectorShortcut(props) {
+    return _jsx(CommandShortcut, { ...props });
+}
+function ModelSelectorSeparator(props) {
+    return _jsx(CommandSeparator, { ...props });
+}
+function ModelSelectorLogo({ alt, className, provider, src, ...props }) {
+    return (_jsx("img", { alt: alt ?? `${provider} logo`, className: cn("size-4 rounded-sm bg-background object-contain p-0.5 ring-1 ring-border", className), height: 16, src: src ?? `https://models.dev/logos/${provider}.svg`, width: 16, ...props }));
+}
+function ModelSelectorLogoGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "model-selector-logo-group", className: cn("flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1", className), ...props }));
+}
+function ModelSelectorName({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "model-selector-name", className: cn("min-w-0 flex-1 truncate text-left", className), ...props }));
+}
+export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, };

package/dist/components/agentic/prompt-input-action-menu.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@ciridae/ui/dropdown-menu";
+import { InputGroupButton } from "@ciridae/ui/input-group";
+type PromptInputActionMenuProps = React.ComponentProps<typeof DropdownMenu>;
+type PromptInputActionMenuTriggerProps = React.ComponentProps<typeof InputGroupButton> & {
+    label?: string;
+    tooltip?: string;
+};
+type PromptInputActionMenuContentProps = React.ComponentProps<typeof DropdownMenuContent>;
+type PromptInputActionMenuItemProps = React.ComponentProps<typeof DropdownMenuItem>;
+declare function PromptInputActionMenu(props: PromptInputActionMenuProps): React.JSX.Element;
+declare function PromptInputActionMenuTrigger({ children, className, label, size, tooltip, variant, ...props }: PromptInputActionMenuTriggerProps): React.JSX.Element;
+declare function PromptInputActionMenuContent({ className, sideOffset, ...props }: PromptInputActionMenuContentProps): React.JSX.Element;
+declare function PromptInputActionMenuItem({ className, ...props }: PromptInputActionMenuItemProps): React.JSX.Element;
+export { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, };
+export type { PromptInputActionMenuContentProps, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTriggerProps, };

package/dist/components/agentic/prompt-input-action-menu.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontalIcon } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@ciridae/ui/dropdown-menu";
+import { InputGroupButton } from "@ciridae/ui/input-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { cn } from "@ciridae/ui/utils";
+function PromptInputActionMenu(props) {
+    return _jsx(DropdownMenu, { ...props });
+}
+function PromptInputActionMenuTrigger({ children, className, label = "Open prompt actions", size = "icon-sm", tooltip = "Prompt actions", variant = "ghost", ...props }) {
+    const trigger = (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(InputGroupButton, { "aria-label": label, "data-slot": "prompt-input-action-menu-trigger", size: size, variant: variant, className: cn("shrink-0 text-muted-foreground", className), ...props, children: children ?? _jsx(MoreHorizontalIcon, {}) }) }));
+    if (!tooltip)
+        return trigger;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: trigger }), _jsx(TooltipContent, { children: tooltip })] }) }));
+}
+function PromptInputActionMenuContent({ className, sideOffset = 6, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "prompt-input-action-menu-content", sideOffset: sideOffset, className: cn("min-w-52", className), ...props }));
+}
+function PromptInputActionMenuItem({ className, ...props }) {
+    return (_jsx(DropdownMenuItem, { "data-slot": "prompt-input-action-menu-item", className: cn("gap-2", className), ...props }));
+}
+export { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, };

package/dist/components/agentic/prompt-input-command.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@ciridae/ui/command";
+type PromptInputCommandProps = React.ComponentProps<typeof Command>;
+type PromptInputCommandInputProps = React.ComponentProps<typeof CommandInput>;
+type PromptInputCommandListProps = React.ComponentProps<typeof CommandList>;
+type PromptInputCommandEmptyProps = React.ComponentProps<typeof CommandEmpty>;
+type PromptInputCommandGroupProps = React.ComponentProps<typeof CommandGroup>;
+type PromptInputCommandItemProps = React.ComponentProps<typeof CommandItem>;
+type PromptInputCommandSeparatorProps = React.ComponentProps<typeof CommandSeparator>;
+declare function PromptInputCommand({ className, ...props }: PromptInputCommandProps): React.JSX.Element;
+declare function PromptInputCommandInput(props: PromptInputCommandInputProps): React.JSX.Element;
+declare function PromptInputCommandList({ className, ...props }: PromptInputCommandListProps): React.JSX.Element;
+declare function PromptInputCommandEmpty(props: PromptInputCommandEmptyProps): React.JSX.Element;
+declare function PromptInputCommandGroup(props: PromptInputCommandGroupProps): React.JSX.Element;
+declare function PromptInputCommandItem({ className, ...props }: PromptInputCommandItemProps): React.JSX.Element;
+declare function PromptInputCommandSeparator(props: PromptInputCommandSeparatorProps): React.JSX.Element;
+export { PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, };
+export type { PromptInputCommandEmptyProps, PromptInputCommandGroupProps, PromptInputCommandInputProps, PromptInputCommandItemProps, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparatorProps, };

package/dist/components/agentic/prompt-input-command.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@ciridae/ui/command";
+import { cn } from "@ciridae/ui/utils";
+function PromptInputCommand({ className, ...props }) {
+    return (_jsx(Command, { "data-slot": "prompt-input-command", className: cn("rounded-md border bg-popover shadow-xs", className), ...props }));
+}
+function PromptInputCommandInput(props) {
+    return _jsx(CommandInput, { "data-slot": "prompt-input-command-input", ...props });
+}
+function PromptInputCommandList({ className, ...props }) {
+    return (_jsx(CommandList, { "data-slot": "prompt-input-command-list", className: cn("max-h-56", className), ...props }));
+}
+function PromptInputCommandEmpty(props) {
+    return _jsx(CommandEmpty, { "data-slot": "prompt-input-command-empty", ...props });
+}
+function PromptInputCommandGroup(props) {
+    return _jsx(CommandGroup, { "data-slot": "prompt-input-command-group", ...props });
+}
+function PromptInputCommandItem({ className, ...props }) {
+    return (_jsx(CommandItem, { "data-slot": "prompt-input-command-item", className: cn("gap-2", className), ...props }));
+}
+function PromptInputCommandSeparator(props) {
+    return _jsx(CommandSeparator, { "data-slot": "prompt-input-command-separator", ...props });
+}
+export { PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, };

package/dist/components/agentic/prompt-input-hover-card.d.ts

@@ -0,0 +1,10 @@
+import type * as React from "react";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@ciridae/ui/hover-card";
+type PromptInputHoverCardProps = React.ComponentProps<typeof HoverCard>;
+type PromptInputHoverCardTriggerProps = React.ComponentProps<typeof HoverCardTrigger>;
+type PromptInputHoverCardContentProps = React.ComponentProps<typeof HoverCardContent>;
+declare function PromptInputHoverCard(props: PromptInputHoverCardProps): React.JSX.Element;
+declare function PromptInputHoverCardTrigger(props: PromptInputHoverCardTriggerProps): React.JSX.Element;
+declare function PromptInputHoverCardContent({ align, className, sideOffset, ...props }: PromptInputHoverCardContentProps): React.JSX.Element;
+export { PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger };
+export type { PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTriggerProps, };

package/dist/components/agentic/prompt-input-hover-card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@ciridae/ui/hover-card";
+import { cn } from "@ciridae/ui/utils";
+function PromptInputHoverCard(props) {
+    return _jsx(HoverCard, { ...props });
+}
+function PromptInputHoverCardTrigger(props) {
+    return _jsx(HoverCardTrigger, { "data-slot": "prompt-input-hover-card-trigger", ...props });
+}
+function PromptInputHoverCardContent({ align = "start", className, sideOffset = 6, ...props }) {
+    return (_jsx(HoverCardContent, { "data-slot": "prompt-input-hover-card-content", align: align, sideOffset: sideOffset, className: cn("w-72 p-3", className), ...props }));
+}
+export { PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger };