@tulip-systems/ai 0.11.0

package/dist/chat/components/chat-composer.client.mjs

@@ -0,0 +1,266 @@
+"use client";
+
+import { cn } from "@tulip-systems/core/lib";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Textarea } from "@tulip-systems/core/components";
+import { ArrowUp, UploadIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
+
+//#region src/chat/components/chat-composer.client.tsx
+const ChatComposerContext = createContext({});
+/**
+* Provides the root composer shell and shared state for all chat composer slots.
+* Use it as the controlled boundary for the current draft value and submit handler.
+*
+* @example
+* ```tsx
+* <ChatComposer value={input} onValueChange={setInput} onSubmit={sendMessage}>
+*   <ChatComposerInput placeholder="Ask something..." />
+*   <ChatComposerToolbar>
+*     <ChatComposerActions>
+*       <ChatComposerAttachmentButton />
+*     </ChatComposerActions>
+*     <ChatComposerSubmit />
+*   </ChatComposerToolbar>
+* </ChatComposer>
+* ```
+*/
+function ChatComposer({ value, onValueChange, onSubmit, disabled = false, status = "ready", statusLabel, className, children, ...props }) {
+	const textareaRef = useRef(null);
+	const isDisabled = disabled;
+	const isSubmitDisabled = disabled || status !== "ready";
+	const canSubmit = !isSubmitDisabled && value.trim().length > 0;
+	useEffect(() => {
+		adjustTextareaHeight(textareaRef.current);
+	});
+	const submit = useCallback(() => {
+		const trimmedValue = value.trim();
+		if (!trimmedValue || isSubmitDisabled) return;
+		onSubmit(trimmedValue);
+		resetTextareaHeight(textareaRef.current);
+	}, [
+		value,
+		isSubmitDisabled,
+		onSubmit
+	]);
+	const contextValue = useMemo(() => ({
+		value,
+		onValueChange,
+		submit,
+		textareaRef,
+		disabled,
+		canSubmit,
+		status,
+		statusLabel
+	}), [
+		value,
+		onValueChange,
+		submit,
+		disabled,
+		canSubmit,
+		status,
+		statusLabel
+	]);
+	return /* @__PURE__ */ jsx(ChatComposerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("form", {
+			className: cn("pointer-events-auto mx-auto w-full max-w-3xl", className),
+			...props,
+			children: /* @__PURE__ */ jsx("fieldset", {
+				"data-disabled": isDisabled ? true : void 0,
+				className: "relative flex min-h-28 w-full min-w-0 flex-col rounded-xl border border-input/70 bg-background/80 shadow-[0_12px_40px_rgba(0,0,0,0.08)] outline-none backdrop-blur-xl transition-colors focus-within:border-primary/35 focus-within:ring-3 focus-within:ring-ring/50 data-[disabled=true]:opacity-70",
+				children
+			})
+		})
+	});
+}
+/**
+* Renders the auto-growing textarea connected to the nearest `ChatComposer`.
+* Pressing Enter submits the composer, while Shift+Enter inserts a new line.
+*
+* @example
+* ```tsx
+* <ChatComposerInput placeholder="Ask something..." rows={3} />
+* ```
+*/
+function ChatComposerInput({ rows = 3, className, onKeyDown, ...props }) {
+	const { value, onValueChange, submit, textareaRef, disabled } = useContext(ChatComposerContext);
+	return /* @__PURE__ */ jsx(Textarea, {
+		ref: textareaRef,
+		value,
+		onChange: (event) => {
+			onValueChange(event.target.value);
+			adjustTextareaHeight(event.target);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+				event.preventDefault();
+				submit();
+			}
+		},
+		disabled,
+		rows,
+		className: cn("max-h-[calc(75dvh)] min-h-20 flex-1 resize-none overflow-hidden rounded-none border-0 bg-transparent px-3 pt-3 pb-0 text-base leading-6 shadow-none ring-0 placeholder:text-muted-foreground/70 focus-visible:ring-0 disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+/**
+* Renders the bottom toolbar area for composer actions and the submit button.
+* Place `ChatComposerActions` on the left and `ChatComposerSubmit` on the right.
+*
+* @example
+* ```tsx
+* <ChatComposerToolbar>
+*   <ChatComposerActions>
+*     <ChatComposerAttachmentButton />
+*   </ChatComposerActions>
+*   <ChatComposerSubmit />
+* </ChatComposerToolbar>
+* ```
+*/
+function ChatComposerToolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full items-center justify-between gap-2 px-2.5 pt-1 pb-2 text-muted-foreground text-sm", className),
+		...props
+	});
+}
+/**
+* Groups secondary composer controls such as attachments, model selection, or status.
+* It keeps action controls aligned together inside `ChatComposerToolbar`.
+*
+* @example
+* ```tsx
+* <ChatComposerActions>
+*   <ChatComposerAttachmentButton />
+*   <ChatComposerModelSelect>GPT-5.5</ChatComposerModelSelect>
+*   <ChatComposerStatus />
+* </ChatComposerActions>
+* ```
+*/
+function ChatComposerActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 items-center gap-2", className),
+		...props
+	});
+}
+/**
+* Renders an attachment action button for opening a file picker or context picker.
+* It uses a file-upload icon and `Context toevoegen` accessible label by default.
+*
+* @example
+* ```tsx
+* <ChatComposerAttachmentButton onClick={openFilePicker} />
+* ```
+*/
+function ChatComposerAttachmentButton({ className, disabled, ...props }) {
+	const { disabled: composerDisabled } = useContext(ChatComposerContext);
+	return /* @__PURE__ */ jsxs(Button, {
+		"aria-label": "Bestanden toevoegen",
+		type: "button",
+		size: "icon",
+		variant: "outline",
+		disabled: composerDisabled || disabled,
+		className: cn("size-8 rounded-lg p-0 shadow-none", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(UploadIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Bestanden toevoegen"
+		})]
+	});
+}
+/**
+* Renders a compact model selector trigger inside the composer toolbar.
+* Use it as a simple button or compose it with a popover/select in application code.
+*
+* @example
+* ```tsx
+* <ChatComposerModelSelect onClick={openModelMenu}>GPT-5.5</ChatComposerModelSelect>
+* ```
+*/
+function ChatComposerModelSelect({ className, disabled, children, ...props }) {
+	const { disabled: composerDisabled } = useContext(ChatComposerContext);
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "sm",
+		disabled: composerDisabled || disabled,
+		className: cn("h-8 rounded-lg shadow-none", className),
+		...props,
+		children: "Select model"
+	});
+}
+/**
+* Displays the current composer status from `ChatComposer.status` and `statusLabel`.
+* It renders nothing when no label or children are provided.
+*
+* @example
+* ```tsx
+* <ChatComposer status="streaming" statusLabel="Thinking...">
+*   <ChatComposerInput />
+*   <ChatComposerToolbar>
+*     <ChatComposerActions>
+*       <ChatComposerStatus />
+*     </ChatComposerActions>
+*     <ChatComposerSubmit />
+*   </ChatComposerToolbar>
+* </ChatComposer>
+* ```
+*/
+function ChatComposerStatus({ className, children, ...props }) {
+	const { status, statusLabel } = useContext(ChatComposerContext);
+	const content = children ?? statusLabel;
+	if (!content) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("line-clamp-1 flex items-center gap-2 text-muted-foreground text-xs opacity-70 data-[status=ready]:opacity-100", className),
+		"data-status": status,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", status === "ready" ? "bg-emerald-500" : status === "error" ? "bg-red-500" : "bg-amber-500") }), /* @__PURE__ */ jsx("span", { children: content })]
+	});
+}
+/**
+* Renders the primary submit button for the current composer draft.
+* It uses an arrow-up icon by default and disables itself while the composer cannot submit.
+*
+* @example
+* ```tsx
+* <ChatComposerSubmit />
+* ```
+*/
+function ChatComposerSubmit({ className, disabled, onClick, ...props }) {
+	const { canSubmit, submit, status } = useContext(ChatComposerContext);
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "default",
+		size: "icon",
+		disabled: !canSubmit || disabled,
+		className: cn("size-8 rounded-full p-0 shadow-none", className),
+		"aria-label": "Send message",
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) submit();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: status !== "ready" ? "Wait for response" : "Send message"
+		})]
+	});
+}
+/**
+* Helpers
+*/
+function adjustTextareaHeight(textarea) {
+	if (!textarea) return;
+	textarea.style.height = "auto";
+	textarea.style.height = `${textarea.scrollHeight + 2}px`;
+}
+function resetTextareaHeight(textarea) {
+	if (!textarea) return;
+	textarea.style.height = "auto";
+	textarea.style.height = "8rem";
+}
+
+//#endregion
+export { ChatComposer, ChatComposerActions, ChatComposerAttachmentButton, ChatComposerInput, ChatComposerModelSelect, ChatComposerStatus, ChatComposerSubmit, ChatComposerToolbar };

package/dist/chat/components/chat-message.client.d.mts

@@ -0,0 +1,92 @@
+import { ChatPart } from "../lib/types.mjs";
+import { ToolClientDefinition } from "../../tools/lib/types.client.mjs";
+import { UIMessage } from "ai";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Message, MessageContent } from "@tulip-systems/core/components";
+import { ComponentProps } from "react";
+
+//#region src/chat/components/chat-message.client.d.ts
+type ChatMessageProps = ComponentProps<typeof Message> & {
+  message: UIMessage;
+};
+/**
+ * Provides the root message container and message context for all chat message slots.
+ * Use it with `ChatMessageContent` and `ChatMessageParts` for the default message layout.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage message={message}>
+ *   <ChatMessageContent>
+ *     <ChatMessageParts toolRenderers={toolRenderers} />
+ *   </ChatMessageContent>
+ * </ChatMessage>
+ * ```
+ */
+declare function ChatMessage({
+  message,
+  children,
+  ...props
+}: ChatMessageProps): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Renders the content column for a chat message.
+ * Place `ChatMessageHeader`, `ChatMessageParts`, and `ChatMessageFooter` inside it.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessageContent>
+ *   <ChatMessageParts toolRenderers={toolRenderers} />
+ * </ChatMessageContent>
+ * ```
+ */
+declare function ChatMessageContent({
+  className,
+  ...props
+}: ComponentProps<typeof MessageContent>): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders a message header slot.
+ * If no children are passed, it renders nothing.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessageHeader>Assistant</ChatMessageHeader>
+ * ```
+ */
+declare function ChatMessageHeader({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Renders the visible text and tool parts for the current chat message.
+ * Pass `toolRenderers` to customize how known tool calls/results are displayed.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessageParts toolRenderers={toolRenderers} />
+ * ```
+ */
+declare function ChatMessageParts({
+  toolRenderers,
+  className,
+  parts,
+  ...props
+}: ComponentProps<"div"> & {
+  toolRenderers?: ToolClientDefinition[];
+  parts?: ChatPart[];
+}): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders a message footer slot.
+ * If no children are passed, it renders nothing.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessageFooter>Copied</ChatMessageFooter>
+ * ```
+ */
+declare function ChatMessageFooter({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChatMessage, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageParts, ChatMessageProps };

package/dist/chat/components/chat-message.client.mjs

@@ -0,0 +1,121 @@
+"use client";
+
+import { getChatPartKey, isToolPart } from "../lib/parts.mjs";
+import { ChatMessagePart } from "./message-part.client.mjs";
+import { cn } from "@tulip-systems/core/lib";
+import { jsx } from "react/jsx-runtime";
+import { Message, MessageContent, MessageFooter, MessageHeader } from "@tulip-systems/core/components";
+import { createContext, useContext, useMemo } from "react";
+
+//#region src/chat/components/chat-message.client.tsx
+const ChatMessageContext = createContext({});
+/**
+* Provides the root message container and message context for all chat message slots.
+* Use it with `ChatMessageContent` and `ChatMessageParts` for the default message layout.
+*
+* @example
+* ```tsx
+* <ChatMessage message={message}>
+*   <ChatMessageContent>
+*     <ChatMessageParts toolRenderers={toolRenderers} />
+*   </ChatMessageContent>
+* </ChatMessage>
+* ```
+*/
+function ChatMessage({ message, children, ...props }) {
+	const isUser = message.role === "user";
+	const contextValue = useMemo(() => {
+		return {
+			message,
+			isUser,
+			visibleParts: message.parts.filter((part) => part.type === "text" || isToolPart(part))
+		};
+	}, [message, isUser]);
+	if (contextValue.visibleParts.length === 0) return null;
+	return /* @__PURE__ */ jsx(ChatMessageContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Message, {
+			align: isUser ? "end" : "start",
+			...props,
+			children
+		})
+	});
+}
+/**
+* Renders the content column for a chat message.
+* Place `ChatMessageHeader`, `ChatMessageParts`, and `ChatMessageFooter` inside it.
+*
+* @example
+* ```tsx
+* <ChatMessageContent>
+*   <ChatMessageParts toolRenderers={toolRenderers} />
+* </ChatMessageContent>
+* ```
+*/
+function ChatMessageContent({ className, ...props }) {
+	const { isUser } = useContext(ChatMessageContext);
+	return /* @__PURE__ */ jsx(MessageContent, {
+		className: cn(isUser && "ml-auto w-fit max-w-[82%] md:max-w-[68%]", className),
+		...props
+	});
+}
+/**
+* Renders a message header slot.
+* If no children are passed, it renders nothing.
+*
+* @example
+* ```tsx
+* <ChatMessageHeader>Assistant</ChatMessageHeader>
+* ```
+*/
+function ChatMessageHeader({ className, children, ...props }) {
+	const { isUser } = useContext(ChatMessageContext);
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(MessageHeader, {
+		className: cn("px-1", isUser && "justify-end", className),
+		...props,
+		children
+	});
+}
+/**
+* Renders the visible text and tool parts for the current chat message.
+* Pass `toolRenderers` to customize how known tool calls/results are displayed.
+*
+* @example
+* ```tsx
+* <ChatMessageParts toolRenderers={toolRenderers} />
+* ```
+*/
+function ChatMessageParts({ toolRenderers, className, parts, ...props }) {
+	const { message, isUser, visibleParts } = useContext(ChatMessageContext);
+	const resolvedParts = parts ?? visibleParts;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex max-w-full flex-col gap-2.5", className),
+		...props,
+		children: resolvedParts.map((part) => /* @__PURE__ */ jsx(ChatMessagePart, {
+			part,
+			isUser,
+			toolRenderers
+		}, getChatPartKey(message.id, part)))
+	});
+}
+/**
+* Renders a message footer slot.
+* If no children are passed, it renders nothing.
+*
+* @example
+* ```tsx
+* <ChatMessageFooter>Copied</ChatMessageFooter>
+* ```
+*/
+function ChatMessageFooter({ className, children, ...props }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(MessageFooter, {
+		className: cn("px-1", className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+export { ChatMessage, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageParts };

package/dist/chat/components/chat-thread.client.d.mts

@@ -0,0 +1,130 @@
+import { ToolClientDefinition } from "../../tools/lib/types.client.mjs";
+import { ChatStatus, UIMessage } from "ai";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+import { MessageScrollerButton, MessageScrollerContent, MessageScrollerItem } from "@tulip-systems/core/components/client";
+
+//#region src/chat/components/chat-thread.client.d.ts
+type ChatThreadProps = ComponentProps<"div"> & {
+  status?: ChatStatus;
+  autoScroll?: boolean;
+  defaultScrollPosition?: "start" | "end" | "last-anchor";
+  scrollPreviousItemPeek?: number;
+};
+/**
+ * Provides shared thread state for all chat thread slots.
+ * Use it to configure chat status and scroll behavior once.
+ *
+ * @example
+ * ```tsx
+ * <ChatThread status={status}>
+ *   {messages.length === 0 && <EmptyState />}
+ *
+ *   {messages.length > 0 && (
+ *     <ChatThreadContent>
+ *       {messages.map((message) => (
+ *         <ChatThreadMessage key={message.id} message={message} />
+ *       ))}
+ *       <ChatThreadActivity />
+ *     </ChatThreadContent>
+ *   )}
+ * </ChatThread>
+ * ```
+ */
+declare function ChatThread({
+  status,
+  autoScroll,
+  defaultScrollPosition,
+  scrollPreviousItemPeek,
+  className,
+  children,
+  ...props
+}: ChatThreadProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders the scrollable message area for a chat thread.
+ * Place `ChatThreadMessage`, `ChatThreadActivity`, and optional sentinels inside it.
+ *
+ * @example
+ * ```tsx
+ * <ChatThreadContent className="px-3">
+ *   {messages.map((message) => (
+ *     <ChatThreadMessage key={message.id} message={message} />
+ *   ))}
+ *   <ChatThreadActivity />
+ * </ChatThreadContent>
+ * ```
+ */
+declare function ChatThreadContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MessageScrollerContent>): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders one AI SDK message using the current `ChatThread` configuration.
+ * Use this inside `ChatThreadContent` when mapping over messages.
+ *
+ * @example
+ * ```tsx
+ * {messages.map((message) => (
+ *   <ChatThreadMessage key={message.id} message={message} toolRenderers={toolRenderers} />
+ * ))}
+ * ```
+ */
+declare function ChatThreadMessage({
+  message,
+  messageId,
+  scrollAnchor,
+  toolRenderers,
+  ...props
+}: Omit<ComponentProps<typeof MessageScrollerItem>, "children" | "messageId" | "scrollAnchor"> & {
+  message: UIMessage;
+  messageId?: string;
+  scrollAnchor?: boolean;
+  toolRenderers?: ToolClientDefinition[];
+}): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders the assistant activity indicator while the thread status is `submitted` or `streaming`.
+ * It returns nothing when the assistant is not responding.
+ *
+ * @example
+ * ```tsx
+ * <ChatThreadActivity />
+ * ```
+ */
+declare function ChatThreadActivity({
+  messageId,
+  activityClassName,
+  ...props
+}: Omit<ComponentProps<typeof MessageScrollerItem>, "children" | "messageId"> & {
+  messageId?: string;
+  activityClassName?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Renders a bottom sentinel item inside the thread scroller.
+ * Use it when callers need a stable ref at the end of the message list.
+ *
+ * @example
+ * ```tsx
+ * <ChatThreadBottom ref={bottomRef} />
+ * ```
+ */
+declare function ChatThreadBottom({
+  messageId,
+  scrollAnchor,
+  ...props
+}: ComponentProps<"div"> & {
+  messageId?: string;
+  scrollAnchor?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders the scroll-to-bottom button for `ChatThreadContent`.
+ * `ChatThreadContent` includes this button by default.
+ *
+ * @example
+ * ```tsx
+ * <ChatThreadScrollButton />
+ * ```
+ */
+declare function ChatThreadScrollButton(props: ComponentProps<typeof MessageScrollerButton>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChatThread, ChatThreadActivity, ChatThreadBottom, ChatThreadContent, ChatThreadMessage, ChatThreadProps, ChatThreadScrollButton };