@websolutespa/ask-ui 1.0.3 → 1.0.4

package/dist/components/ai-elements/message.mjs

@@ -0,0 +1,175 @@
+"use client";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../button.mjs";
+import { ButtonGroup, ButtonGroupText } from "../button-group.mjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip.mjs";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, 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 { Streamdown } from "streamdown";
+//#region src/components/ai-elements/message.tsx
+const Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("group flex w-full max-w-[95%] flex-col gap-2", from === "user" ? "is-user ml-auto justify-end" : "is-assistant", className),
+	...props
+});
+const MessageContent = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm", "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground", "group-[.is-assistant]:text-foreground", className),
+	...props,
+	children
+});
+const MessageActions = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center gap-1", className),
+	...props,
+	children
+});
+const MessageAction = ({ tooltip, children, label, variant = "ghost", size = "icon-sm", ...props }) => {
+	const button = /* @__PURE__ */ jsxs(Button, {
+		size,
+		type: "button",
+		variant,
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label || tooltip
+		})]
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })] }) });
+	return button;
+};
+const MessageBranchContext = createContext(null);
+const useMessageBranch = () => {
+	const context = useContext(MessageBranchContext);
+	if (!context) throw new Error("MessageBranch components must be used within MessageBranch");
+	return context;
+};
+const MessageBranch = ({ defaultBranch = 0, onBranchChange, className, ...props }) => {
+	const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+	const [branches, setBranches] = useState([]);
+	const handleBranchChange = useCallback((newBranch) => {
+		setCurrentBranch(newBranch);
+		onBranchChange?.(newBranch);
+	}, [onBranchChange]);
+	const goToPrevious = useCallback(() => {
+		handleBranchChange(currentBranch > 0 ? currentBranch - 1 : branches.length - 1);
+	}, [
+		currentBranch,
+		branches.length,
+		handleBranchChange
+	]);
+	const goToNext = useCallback(() => {
+		handleBranchChange(currentBranch < branches.length - 1 ? currentBranch + 1 : 0);
+	}, [
+		currentBranch,
+		branches.length,
+		handleBranchChange
+	]);
+	const contextValue = useMemo(() => ({
+		branches,
+		currentBranch,
+		goToNext,
+		goToPrevious,
+		setBranches,
+		totalBranches: branches.length
+	}), [
+		branches,
+		currentBranch,
+		goToNext,
+		goToPrevious
+	]);
+	return /* @__PURE__ */ jsx(MessageBranchContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid w-full gap-2 [&>div]:pb-0", className),
+			...props
+		})
+	});
+};
+const MessageBranchContent = ({ children, ...props }) => {
+	const { currentBranch, setBranches, branches } = useMessageBranch();
+	const childrenArray = useMemo(() => Array.isArray(children) ? children : [children], [children]);
+	useEffect(() => {
+		if (branches.length !== childrenArray.length) setBranches(childrenArray);
+	}, [
+		childrenArray,
+		branches,
+		setBranches
+	]);
+	return childrenArray.map((branch, index) => /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-2 overflow-hidden [&>div]:pb-0", index === currentBranch ? "block" : "hidden"),
+		...props,
+		children: branch
+	}, branch.key));
+};
+const MessageBranchSelector = ({ className, ...props }) => {
+	const { totalBranches } = useMessageBranch();
+	if (totalBranches <= 1) return null;
+	return /* @__PURE__ */ jsx(ButtonGroup, {
+		className: cn("[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md", className),
+		orientation: "horizontal",
+		...props
+	});
+};
+const MessageBranchPrevious = ({ children, ...props }) => {
+	const { goToPrevious, totalBranches } = useMessageBranch();
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Previous branch",
+		disabled: totalBranches <= 1,
+		onClick: goToPrevious,
+		size: "icon-sm",
+		type: "button",
+		variant: "ghost",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+	});
+};
+const MessageBranchNext = ({ children, ...props }) => {
+	const { goToNext, totalBranches } = useMessageBranch();
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Next branch",
+		disabled: totalBranches <= 1,
+		onClick: goToNext,
+		size: "icon-sm",
+		type: "button",
+		variant: "ghost",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+	});
+};
+const MessageBranchPage = ({ className, ...props }) => {
+	const { currentBranch, totalBranches } = useMessageBranch();
+	return /* @__PURE__ */ jsxs(ButtonGroupText, {
+		className: cn("border-none bg-transparent text-muted-foreground shadow-none", className),
+		...props,
+		children: [
+			currentBranch + 1,
+			" of ",
+			totalBranches
+		]
+	});
+};
+const streamdownPlugins = {
+	cjk,
+	code,
+	math,
+	mermaid
+};
+const MessageResponse = memo(({ className, ...props }) => /* @__PURE__ */ jsx(Streamdown, {
+	className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+	plugins: streamdownPlugins,
+	...props
+}), (prevProps, nextProps) => prevProps.children === nextProps.children && nextProps.isAnimating === prevProps.isAnimating);
+MessageResponse.displayName = "MessageResponse";
+const MessageToolbar = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("mt-4 flex w-full items-center justify-between gap-4", className),
+	...props,
+	children
+});
+//#endregion
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/ai-elements/prompt-input.d.mts

@@ -0,0 +1,277 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../command.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "../dropdown-menu.mjs";
+import { InputGroupAddon, InputGroupButton, InputGroupTextarea } from "../input-group.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.mjs";
+import { TooltipContent } from "../tooltip.mjs";
+import * as _$react from "react";
+import { ComponentProps, FormEvent, HTMLAttributes, PropsWithChildren, ReactNode, RefObject } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ChatStatus, FileUIPart, SourceDocumentUIPart } from "ai";
+
+//#region src/components/ai-elements/prompt-input.d.ts
+interface AttachmentsContext {
+  files: (FileUIPart & {
+    id: string;
+  })[];
+  add: (files: File[] | FileList) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+  openFileDialog: () => void;
+  fileInputRef: RefObject<HTMLInputElement | null>;
+}
+interface TextInputContext {
+  value: string;
+  setInput: (v: string) => void;
+  clear: () => void;
+}
+interface PromptInputControllerProps {
+  textInput: TextInputContext;
+  attachments: AttachmentsContext;
+  /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
+  __registerFileInput: (ref: RefObject<HTMLInputElement | null>, open: () => void) => void;
+}
+declare const usePromptInputController: () => PromptInputControllerProps;
+declare const useProviderAttachments: () => AttachmentsContext;
+type PromptInputProviderProps = PropsWithChildren<{
+  initialInput?: string;
+}>;
+/**
+ * Optional global provider that lifts PromptInput state outside of PromptInput.
+ * If you don't use it, PromptInput stays fully self-managed.
+ */
+declare const PromptInputProvider: ({
+  initialInput: initialTextInput,
+  children
+}: PromptInputProviderProps) => _$react_jsx_runtime0.JSX.Element;
+declare const usePromptInputAttachments: () => AttachmentsContext;
+interface ReferencedSourcesContext {
+  sources: (SourceDocumentUIPart & {
+    id: string;
+  })[];
+  add: (sources: SourceDocumentUIPart[] | SourceDocumentUIPart) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+}
+declare const LocalReferencedSourcesContext: _$react.Context<ReferencedSourcesContext | null>;
+declare const usePromptInputReferencedSources: () => ReferencedSourcesContext;
+type PromptInputActionAddAttachmentsProps = ComponentProps<typeof DropdownMenuItem> & {
+  label?: string;
+};
+declare const PromptInputActionAddAttachments: ({
+  label,
+  ...props
+}: PromptInputActionAddAttachmentsProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputActionAddScreenshotProps = ComponentProps<typeof DropdownMenuItem> & {
+  label?: string;
+};
+declare const PromptInputActionAddScreenshot: ({
+  label,
+  onSelect,
+  ...props
+}: PromptInputActionAddScreenshotProps) => _$react_jsx_runtime0.JSX.Element;
+interface PromptInputMessage {
+  text: string;
+  files: FileUIPart[];
+}
+type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'> & {
+  accept?: string;
+  multiple?: boolean;
+  globalDrop?: boolean;
+  syncHiddenInput?: boolean;
+  maxFiles?: number;
+  maxFileSize?: number;
+  onError?: (err: {
+    code: 'max_files' | 'max_file_size' | 'accept';
+    message: string;
+  }) => void;
+  onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+};
+declare const PromptInput: ({
+  className,
+  groupClassName,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}: PromptInputProps & {
+  groupClassName?: string;
+}) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputBody: ({
+  className,
+  ...props
+}: PromptInputBodyProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputTextareaProps = ComponentProps<typeof InputGroupTextarea>;
+declare const PromptInputTextarea: ({
+  onChange,
+  onKeyDown,
+  className,
+  placeholder,
+  ...props
+}: PromptInputTextareaProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputHeaderProps = Omit<ComponentProps<typeof InputGroupAddon>, 'align'>;
+declare const PromptInputHeader: ({
+  className,
+  ...props
+}: PromptInputHeaderProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputFooterProps = Omit<ComponentProps<typeof InputGroupAddon>, 'align'>;
+declare const PromptInputFooter: ({
+  className,
+  ...props
+}: PromptInputFooterProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputTools: ({
+  className,
+  ...props
+}: PromptInputToolsProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputButtonTooltip = string | {
+  content: ReactNode;
+  shortcut?: string;
+  side?: ComponentProps<typeof TooltipContent>['side'];
+};
+type PromptInputButtonProps = ComponentProps<typeof InputGroupButton> & {
+  tooltip?: PromptInputButtonTooltip;
+};
+declare const PromptInputButton: ({
+  variant,
+  className,
+  size,
+  tooltip,
+  ...props
+}: PromptInputButtonProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputActionMenuProps = ComponentProps<typeof DropdownMenu>;
+declare const PromptInputActionMenu: (props: PromptInputActionMenuProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputActionMenuTriggerProps = PromptInputButtonProps;
+declare const PromptInputActionMenuTrigger: ({
+  className,
+  children,
+  ...props
+}: PromptInputActionMenuTriggerProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputActionMenuContentProps = ComponentProps<typeof DropdownMenuContent>;
+declare const PromptInputActionMenuContent: ({
+  className,
+  ...props
+}: PromptInputActionMenuContentProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputActionMenuItemProps = ComponentProps<typeof DropdownMenuItem>;
+declare const PromptInputActionMenuItem: ({
+  className,
+  ...props
+}: PromptInputActionMenuItemProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
+  status?: ChatStatus;
+  onStop?: () => void;
+};
+declare const PromptInputSubmit: ({
+  className,
+  variant,
+  size,
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}: PromptInputSubmitProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputSelectProps = ComponentProps<typeof Select>;
+declare const PromptInputSelect: (props: PromptInputSelectProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputSelectTriggerProps = ComponentProps<typeof SelectTrigger>;
+declare const PromptInputSelectTrigger: ({
+  className,
+  ...props
+}: PromptInputSelectTriggerProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputSelectContentProps = ComponentProps<typeof SelectContent>;
+declare const PromptInputSelectContent: ({
+  className,
+  ...props
+}: PromptInputSelectContentProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputSelectItemProps = ComponentProps<typeof SelectItem>;
+declare const PromptInputSelectItem: ({
+  className,
+  ...props
+}: PromptInputSelectItemProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputSelectValueProps = ComponentProps<typeof SelectValue>;
+declare const PromptInputSelectValue: ({
+  className,
+  ...props
+}: PromptInputSelectValueProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>;
+declare const PromptInputHoverCard: ({
+  openDelay,
+  closeDelay,
+  ...props
+}: PromptInputHoverCardProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
+declare const PromptInputHoverCardTrigger: (props: PromptInputHoverCardTriggerProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
+declare const PromptInputHoverCardContent: ({
+  align,
+  ...props
+}: PromptInputHoverCardContentProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputTabsListProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputTabsList: ({
+  className,
+  ...props
+}: PromptInputTabsListProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputTabProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputTab: ({
+  className,
+  ...props
+}: PromptInputTabProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputTabLabelProps = HTMLAttributes<HTMLHeadingElement>;
+declare const PromptInputTabLabel: ({
+  className,
+  ...props
+}: PromptInputTabLabelProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputTabBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputTabBody: ({
+  className,
+  ...props
+}: PromptInputTabBodyProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputTabItemProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputTabItem: ({
+  className,
+  ...props
+}: PromptInputTabItemProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandProps = ComponentProps<typeof Command>;
+declare const PromptInputCommand: ({
+  className,
+  ...props
+}: PromptInputCommandProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandInputProps = ComponentProps<typeof CommandInput>;
+declare const PromptInputCommandInput: ({
+  className,
+  ...props
+}: PromptInputCommandInputProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandListProps = ComponentProps<typeof CommandList>;
+declare const PromptInputCommandList: ({
+  className,
+  ...props
+}: PromptInputCommandListProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const PromptInputCommandEmpty: ({
+  className,
+  ...props
+}: PromptInputCommandEmptyProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandGroupProps = ComponentProps<typeof CommandGroup>;
+declare const PromptInputCommandGroup: ({
+  className,
+  ...props
+}: PromptInputCommandGroupProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandItemProps = ComponentProps<typeof CommandItem>;
+declare const PromptInputCommandItem: ({
+  className,
+  ...props
+}: PromptInputCommandItemProps) => _$react_jsx_runtime0.JSX.Element;
+type PromptInputCommandSeparatorProps = ComponentProps<typeof CommandSeparator>;
+declare const PromptInputCommandSeparator: ({
+  className,
+  ...props
+}: PromptInputCommandSeparatorProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AttachmentsContext, LocalReferencedSourcesContext, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, ReferencedSourcesContext, TextInputContext, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };