@tulip-systems/ai 0.11.0

package/src/chat/components/chat-composer.client.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import { Button, Textarea } from "@tulip-systems/core/components";
+import { cn } from "@tulip-systems/core/lib";
+import type { ChatStatus } from "ai";
+import { ArrowUp, UploadIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+
+/**
+ * Chat Composer Context
+ */
+type ChatComposerContextValue = {
+  value: string;
+  onValueChange: (value: string) => void;
+  submit: () => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  disabled: boolean;
+  canSubmit: boolean;
+  status: ChatStatus;
+  statusLabel?: ReactNode;
+};
+
+const ChatComposerContext = createContext<ChatComposerContextValue>({} as ChatComposerContextValue);
+
+export type ChatComposerProps = Omit<ComponentProps<"form">, "onSubmit"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  disabled?: boolean;
+  status?: ChatStatus;
+  statusLabel?: ReactNode;
+};
+
+/**
+ * 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>
+ * ```
+ */
+export function ChatComposer({
+  value,
+  onValueChange,
+  onSubmit,
+  disabled = false,
+  status = "ready",
+  statusLabel,
+  className,
+  children,
+  ...props
+}: ChatComposerProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(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 (
+    <ChatComposerContext.Provider value={contextValue}>
+      <form className={cn("pointer-events-auto mx-auto w-full max-w-3xl", className)} {...props}>
+        <fieldset
+          data-disabled={isDisabled ? true : undefined}
+          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}
+        </fieldset>
+      </form>
+    </ChatComposerContext.Provider>
+  );
+}
+
+/**
+ * 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} />
+ * ```
+ */
+export function ChatComposerInput({
+  rows = 3,
+  className,
+  onKeyDown,
+  ...props
+}: Omit<ComponentProps<typeof Textarea>, "value" | "onChange" | "disabled">) {
+  const { value, onValueChange, submit, textareaRef, disabled } = useContext(ChatComposerContext);
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      value={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={disabled}
+      rows={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>
+ * ```
+ */
+export function ChatComposerToolbar({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <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>
+ * ```
+ */
+export function ChatComposerActions({ className, ...props }: ComponentProps<"div">) {
+  return <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} />
+ * ```
+ */
+export function ChatComposerAttachmentButton({
+  className,
+  disabled,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { disabled: composerDisabled } = useContext(ChatComposerContext);
+
+  return (
+    <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}
+    >
+      <UploadIcon className="size-4" />
+      <span className="sr-only">Bestanden toevoegen</span>
+    </Button>
+  );
+}
+
+/**
+ * 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>
+ * ```
+ */
+export function ChatComposerModelSelect({
+  className,
+  disabled,
+  children,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { disabled: composerDisabled } = useContext(ChatComposerContext);
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      disabled={composerDisabled || disabled}
+      className={cn("h-8 rounded-lg shadow-none", className)}
+      {...props}
+    >
+      Select model
+    </Button>
+  );
+}
+
+/**
+ * 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>
+ * ```
+ */
+export function ChatComposerStatus({ className, children, ...props }: ComponentProps<"div">) {
+  const { status, statusLabel } = useContext(ChatComposerContext);
+  const content = children ?? statusLabel;
+
+  if (!content) return null;
+
+  return (
+    <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}
+    >
+      <span
+        className={cn(
+          "size-2 rounded-full",
+          status === "ready"
+            ? "bg-emerald-500"
+            : status === "error"
+              ? "bg-red-500"
+              : "bg-amber-500",
+        )}
+      />
+      <span>{content}</span>
+    </div>
+  );
+}
+
+/**
+ * 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 />
+ * ```
+ */
+export function ChatComposerSubmit({
+  className,
+  disabled,
+  onClick,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { canSubmit, submit, status } = useContext(ChatComposerContext);
+
+  return (
+    <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}
+    >
+      <ArrowUp className="size-4" />
+      <span className="sr-only">{status !== "ready" ? "Wait for response" : "Send message"}</span>
+    </Button>
+  );
+}
+
+/**
+ * Helpers
+ */
+function adjustTextareaHeight(textarea: HTMLTextAreaElement | null) {
+  if (!textarea) {
+    return;
+  }
+
+  textarea.style.height = "auto";
+  textarea.style.height = `${textarea.scrollHeight + 2}px`;
+}
+
+function resetTextareaHeight(textarea: HTMLTextAreaElement | null) {
+  if (!textarea) {
+    return;
+  }
+
+  textarea.style.height = "auto";
+  textarea.style.height = "8rem";
+}

package/src/chat/components/chat-message.client.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import {
+  Message,
+  MessageContent as MessageContentPrimitive,
+  MessageFooter as MessageFooterPrimitive,
+  MessageHeader as MessageHeaderPrimitive,
+} from "@tulip-systems/core/components";
+import { cn } from "@tulip-systems/core/lib";
+import type { UIMessage } from "ai";
+import { type ComponentProps, createContext, useContext, useMemo } from "react";
+import type { ToolClientDefinition } from "../../tools/lib/types.client";
+import { getChatPartKey, isToolPart } from "../lib/parts";
+import type { ChatPart } from "../lib/types";
+import { ChatMessagePart } from "./message-part.client";
+
+/**
+ * Chat Message Context
+ */
+type ChatMessageContextValue = {
+  message: UIMessage;
+  isUser: boolean;
+  visibleParts: ChatPart[];
+};
+
+const ChatMessageContext = createContext<ChatMessageContextValue>({} as ChatMessageContextValue);
+
+export 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>
+ * ```
+ */
+export function ChatMessage({ message, children, ...props }: ChatMessageProps) {
+  const isUser = message.role === "user";
+  const contextValue = useMemo(() => {
+    const visibleParts = message.parts.filter((part) => part.type === "text" || isToolPart(part));
+
+    return {
+      message,
+      isUser,
+      visibleParts,
+    };
+  }, [message, isUser]);
+
+  if (contextValue.visibleParts.length === 0) return null;
+
+  return (
+    <ChatMessageContext.Provider value={contextValue}>
+      <Message align={isUser ? "end" : "start"} {...props}>
+        {children}
+      </Message>
+    </ChatMessageContext.Provider>
+  );
+}
+
+/**
+ * Renders the content column for a chat message.
+ * Place `ChatMessageHeader`, `ChatMessageParts`, and `ChatMessageFooter` inside it.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessageContent>
+ *   <ChatMessageParts toolRenderers={toolRenderers} />
+ * </ChatMessageContent>
+ * ```
+ */
+export function ChatMessageContent({
+  className,
+  ...props
+}: ComponentProps<typeof MessageContentPrimitive>) {
+  const { isUser } = useContext(ChatMessageContext);
+
+  return (
+    <MessageContentPrimitive
+      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>
+ * ```
+ */
+export function ChatMessageHeader({ className, children, ...props }: ComponentProps<"div">) {
+  const { isUser } = useContext(ChatMessageContext);
+
+  if (!children) return null;
+
+  return (
+    <MessageHeaderPrimitive className={cn("px-1", isUser && "justify-end", className)} {...props}>
+      {children}
+    </MessageHeaderPrimitive>
+  );
+}
+
+/**
+ * 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} />
+ * ```
+ */
+export function ChatMessageParts({
+  toolRenderers,
+  className,
+  parts,
+  ...props
+}: ComponentProps<"div"> & {
+  toolRenderers?: ToolClientDefinition[];
+  parts?: ChatPart[];
+}) {
+  const { message, isUser, visibleParts } = useContext(ChatMessageContext);
+  const resolvedParts = parts ?? visibleParts;
+
+  return (
+    <div className={cn("flex max-w-full flex-col gap-2.5", className)} {...props}>
+      {resolvedParts.map((part) => (
+        <ChatMessagePart
+          key={getChatPartKey(message.id, part)}
+          part={part}
+          isUser={isUser}
+          toolRenderers={toolRenderers}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Renders a message footer slot.
+ * If no children are passed, it renders nothing.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessageFooter>Copied</ChatMessageFooter>
+ * ```
+ */
+export function ChatMessageFooter({ className, children, ...props }: ComponentProps<"div">) {
+  if (!children) return null;
+
+  return (
+    <MessageFooterPrimitive className={cn("px-1", className)} {...props}>
+      {children}
+    </MessageFooterPrimitive>
+  );
+}