@assistant-ui/react-ink 0.0.1

package/src/primitives/attachment/AttachmentName.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps, FC } from "react";
+import { Text } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type AttachmentNameProps = ComponentProps<typeof Text>;
+
+export const AttachmentName: FC<AttachmentNameProps> = (props) => {
+  const name = useAuiState((s) => s.attachment.name);
+  return <Text {...props}>{name}</Text>;
+};

package/src/primitives/attachment/AttachmentRemove.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type AttachmentRemoveProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const AttachmentRemove = ({
+  children,
+  ...pressableProps
+}: AttachmentRemoveProps) => {
+  const aui = useAui();
+
+  const handleRemove = useCallback(() => {
+    aui.attachment().remove();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={handleRemove} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/attachment/AttachmentRoot.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Box } from "ink";
+
+export type AttachmentRootProps = ComponentProps<typeof Box> & {
+  children: ReactNode;
+};
+
+export const AttachmentRoot = ({
+  children,
+  ...boxProps
+}: AttachmentRootProps) => {
+  return <Box {...boxProps}>{children}</Box>;
+};

package/src/primitives/attachment/AttachmentThumb.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps, FC } from "react";
+import { Text } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type AttachmentThumbProps = ComponentProps<typeof Text>;
+
+export const AttachmentThumb: FC<AttachmentThumbProps> = (props) => {
+  const ext = useAuiState((s) => {
+    const parts = s.attachment.name.split(".");
+    return parts.length > 1 ? parts.pop()! : "";
+  });
+  return <Text {...props}>.{ext}</Text>;
+};

package/src/primitives/attachment/index.ts

@@ -0,0 +1,7 @@
+export { AttachmentRoot, type AttachmentRootProps } from "./AttachmentRoot";
+export { AttachmentName, type AttachmentNameProps } from "./AttachmentName";
+export { AttachmentThumb, type AttachmentThumbProps } from "./AttachmentThumb";
+export {
+  AttachmentRemove,
+  type AttachmentRemoveProps,
+} from "./AttachmentRemove";

package/src/primitives/branchPicker/BranchPickerCount.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { Text } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type BranchPickerCountProps = ComponentProps<typeof Text>;
+
+export const BranchPickerCount = (props: BranchPickerCountProps) => {
+  const branchCount = useAuiState((s) => s.message.branchCount);
+  return <Text {...props}>{branchCount}</Text>;
+};

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type BranchPickerNextProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const BranchPickerNext = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: BranchPickerNextProps) => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    if (s.message.branchNumber >= s.message.branchCount) return true;
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
+      return true;
+    }
+    return false;
+  });
+
+  const goToNext = useCallback(() => {
+    aui.message().switchToBranch({ position: "next" });
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={goToNext}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/branchPicker/BranchPickerNumber.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { Text } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type BranchPickerNumberProps = ComponentProps<typeof Text>;
+
+export const BranchPickerNumber = (props: BranchPickerNumberProps) => {
+  const branchNumber = useAuiState((s) => s.message.branchNumber);
+  return <Text {...props}>{branchNumber}</Text>;
+};

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type BranchPickerPreviousProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const BranchPickerPrevious = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: BranchPickerPreviousProps) => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    if (s.message.branchNumber <= 1) return true;
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
+      return true;
+    }
+    return false;
+  });
+
+  const goToPrevious = useCallback(() => {
+    aui.message().switchToBranch({ position: "previous" });
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={goToPrevious}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/branchPicker/index.ts

@@ -0,0 +1,16 @@
+export {
+  BranchPickerPrevious,
+  type BranchPickerPreviousProps,
+} from "./BranchPickerPrevious";
+export {
+  BranchPickerNext,
+  type BranchPickerNextProps,
+} from "./BranchPickerNext";
+export {
+  BranchPickerNumber,
+  type BranchPickerNumberProps,
+} from "./BranchPickerNumber";
+export {
+  BranchPickerCount,
+  type BranchPickerCountProps,
+} from "./BranchPickerCount";

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -0,0 +1,28 @@
+import { useCallback, type ReactNode } from "react";
+import { useAuiState, useAui } from "@assistant-ui/store";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type ChainOfThoughtAccordionTriggerProps = Omit<
+  PressableProps,
+  "onPress"
+> & {
+  children: ReactNode;
+};
+
+export const ChainOfThoughtAccordionTrigger = ({
+  children,
+  ...pressableProps
+}: ChainOfThoughtAccordionTriggerProps) => {
+  const aui = useAui();
+  const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+
+  const onPress = useCallback(() => {
+    aui.chainOfThought().setCollapsed(!collapsed);
+  }, [aui, collapsed]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/chainOfThought/ChainOfThoughtRoot.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Box } from "ink";
+
+export type ChainOfThoughtRootProps = ComponentProps<typeof Box> & {
+  children: ReactNode;
+};
+
+export const ChainOfThoughtRoot = ({
+  children,
+  ...boxProps
+}: ChainOfThoughtRootProps) => {
+  return <Box {...boxProps}>{children}</Box>;
+};

package/src/primitives/chainOfThought/index.ts

@@ -0,0 +1,9 @@
+export {
+  ChainOfThoughtRoot,
+  type ChainOfThoughtRootProps,
+} from "./ChainOfThoughtRoot";
+export {
+  ChainOfThoughtAccordionTrigger,
+  type ChainOfThoughtAccordionTriggerProps,
+} from "./ChainOfThoughtAccordionTrigger";
+export { ChainOfThoughtPrimitiveParts } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { useComposerAddAttachment } from "../../primitive-hooks/useComposerAddAttachment";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type ComposerAddAttachmentProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ComposerAddAttachment = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: ComposerAddAttachmentProps) => {
+  const isDisabled = useAuiState((s) => !s.composer.isEditing);
+  const { addAttachment: _addAttachment } = useComposerAddAttachment();
+
+  return (
+    <Pressable disabled={disabledProp ?? isDisabled} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/ComposerAttachments.tsx

@@ -0,0 +1,25 @@
+import type { ComponentType } from "react";
+import {
+  ComposerPrimitiveAttachments,
+  ComposerPrimitiveAttachmentByIndex,
+} from "@assistant-ui/core/react";
+
+export type AttachmentComponents = {
+  Image?: ComponentType | undefined;
+  Document?: ComponentType | undefined;
+  File?: ComponentType | undefined;
+  Attachment?: ComponentType | undefined;
+};
+
+export type ComposerAttachmentsProps = {
+  components: AttachmentComponents | undefined;
+};
+
+export type ComposerAttachmentByIndexProps = {
+  index: number;
+  components?: AttachmentComponents | undefined;
+};
+
+export const ComposerAttachmentByIndex = ComposerPrimitiveAttachmentByIndex;
+
+export const ComposerAttachments = ComposerPrimitiveAttachments;

package/src/primitives/composer/ComposerCancel.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { useComposerCancel } from "../../primitive-hooks/useComposerCancel";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type ComposerCancelProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ComposerCancel = ({
+  children,
+  disabled,
+  ...pressableProps
+}: ComposerCancelProps) => {
+  const { cancel, canCancel } = useComposerCancel();
+
+  return (
+    <Pressable
+      onPress={cancel}
+      disabled={disabled ?? !canCancel}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/ComposerIf.tsx

@@ -0,0 +1 @@
+export { ComposerPrimitiveIf as ComposerIf } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerInput.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type ComposerInputProps = ComponentProps<typeof Box> & {
+  /** Submit the message when Enter is pressed. @default false */
+  submitOnEnter?: boolean | undefined;
+  /** Placeholder text shown when the input is empty. */
+  placeholder?: string | undefined;
+  /** Whether this input should receive focus automatically. @default true */
+  autoFocus?: boolean | undefined;
+};
+
+export const ComposerInput = ({
+  submitOnEnter = false,
+  placeholder = "",
+  autoFocus = true,
+  ...boxProps
+}: ComposerInputProps) => {
+  const aui = useAui();
+  const text = useAuiState((s) => s.composer.text);
+  const { isFocused } = useFocus({ autoFocus });
+
+  useInput(
+    (input, key) => {
+      if (key.return) {
+        if (submitOnEnter) {
+          aui.composer().send();
+        }
+        return;
+      }
+      if (key.backspace || key.delete) {
+        aui.composer().setText(text.slice(0, -1));
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        aui.composer().setText(text + input);
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  return (
+    <Box {...boxProps}>
+      <Text dimColor={!text && !!placeholder}>{text || placeholder}</Text>
+      {isFocused && <Text>▋</Text>}
+    </Box>
+  );
+};

package/src/primitives/composer/ComposerRoot.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Box } from "ink";
+
+export type ComposerRootProps = ComponentProps<typeof Box> & {
+  children: ReactNode;
+};
+
+export const ComposerRoot = ({ children, ...boxProps }: ComposerRootProps) => {
+  return <Box {...boxProps}>{children}</Box>;
+};

package/src/primitives/composer/ComposerSend.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { useComposerSend } from "../../primitive-hooks/useComposerSend";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type ComposerSendProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ComposerSend = ({
+  children,
+  disabled,
+  ...pressableProps
+}: ComposerSendProps) => {
+  const { send, canSend } = useComposerSend();
+
+  return (
+    <Pressable
+      onPress={send}
+      disabled={disabled ?? !canSend}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/EditComposerCancel.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { useEditComposerCancel } from "../../primitive-hooks/useEditComposerCancel";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type EditComposerCancelProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const EditComposerCancel = ({
+  children,
+  ...pressableProps
+}: EditComposerCancelProps) => {
+  const { cancel } = useEditComposerCancel();
+
+  return (
+    <Pressable onPress={cancel} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/EditComposerInput.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type EditComposerInputProps = ComponentProps<typeof Box> & {
+  /** Placeholder text shown when the input is empty. */
+  placeholder?: string | undefined;
+  /** Whether this input should receive focus automatically. @default true */
+  autoFocus?: boolean | undefined;
+};
+
+export const EditComposerInput = ({
+  placeholder = "",
+  autoFocus = true,
+  ...boxProps
+}: EditComposerInputProps) => {
+  const aui = useAui();
+  const text = useAuiState((s) => s.composer.text);
+  const { isFocused } = useFocus({ autoFocus });
+
+  useInput(
+    (input, key) => {
+      if (key.backspace || key.delete) {
+        aui.composer().setText(text.slice(0, -1));
+        return;
+      }
+      if (input && !key.ctrl && !key.meta && !key.return) {
+        aui.composer().setText(text + input);
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  return (
+    <Box {...boxProps}>
+      <Text dimColor={!text && !!placeholder}>{text || placeholder}</Text>
+      {isFocused && <Text>▋</Text>}
+    </Box>
+  );
+};

package/src/primitives/composer/EditComposerSend.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { useEditComposerSend } from "../../primitive-hooks/useEditComposerSend";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type EditComposerSendProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const EditComposerSend = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: EditComposerSendProps) => {
+  const { send, disabled } = useEditComposerSend();
+
+  return (
+    <Pressable
+      onPress={send}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/index.ts

@@ -0,0 +1,25 @@
+export { ComposerRoot, type ComposerRootProps } from "./ComposerRoot";
+export {
+  ComposerAttachments,
+  ComposerAttachmentByIndex,
+} from "./ComposerAttachments";
+export { ComposerInput, type ComposerInputProps } from "./ComposerInput";
+export { ComposerSend, type ComposerSendProps } from "./ComposerSend";
+export { ComposerCancel, type ComposerCancelProps } from "./ComposerCancel";
+export {
+  ComposerAddAttachment,
+  type ComposerAddAttachmentProps,
+} from "./ComposerAddAttachment";
+export { ComposerIf } from "./ComposerIf";
+export {
+  EditComposerInput,
+  type EditComposerInputProps,
+} from "./EditComposerInput";
+export {
+  EditComposerSend,
+  type EditComposerSendProps,
+} from "./EditComposerSend";
+export {
+  EditComposerCancel,
+  type EditComposerCancelProps,
+} from "./EditComposerCancel";

package/src/primitives/internal/Pressable.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Box, useFocus, useInput } from "ink";
+
+export type PressableProps = ComponentProps<typeof Box> & {
+  children: ReactNode;
+  onPress?: (() => void) | undefined;
+  disabled?: boolean | undefined;
+};
+
+export const Pressable = ({
+  children,
+  onPress,
+  disabled,
+  ...boxProps
+}: PressableProps) => {
+  const { isFocused } = useFocus({ isActive: !disabled });
+
+  useInput(
+    (_input, key) => {
+      if (key.return && onPress) {
+        onPress();
+      }
+    },
+    { isActive: isFocused && !disabled },
+  );
+
+  return <Box {...boxProps}>{children}</Box>;
+};

package/src/primitives/message/MessageAttachments.tsx

@@ -0,0 +1,18 @@
+import {
+  MessagePrimitiveAttachments,
+  MessagePrimitiveAttachmentByIndex,
+} from "@assistant-ui/core/react";
+import type { AttachmentComponents } from "../composer/ComposerAttachments";
+
+export type MessageAttachmentsProps = {
+  components: AttachmentComponents | undefined;
+};
+
+export type MessageAttachmentByIndexProps = {
+  index: number;
+  components?: AttachmentComponents | undefined;
+};
+
+export const MessageAttachmentByIndex = MessagePrimitiveAttachmentByIndex;
+
+export const MessageAttachments = MessagePrimitiveAttachments;