@assistant-ui/react-ink 0.0.2 → 0.0.6

package/src/primitives/message/MessageError.tsx

@@ -0,0 +1,9 @@
+import type { FC, PropsWithChildren } from "react";
+import { useMessageError } from "@assistant-ui/core/react";
+
+export const MessageError: FC<PropsWithChildren> = ({ children }) => {
+  const error = useMessageError();
+  return error !== undefined ? children : null;
+};
+
+MessageError.displayName = "MessagePrimitive.Error";

package/src/primitives/message/MessageParts.tsx

@@ -19,10 +19,16 @@ export namespace MessagePrimitiveParts {
 /**
  * Renders the parts of a message with Ink-specific default components.
  */
-export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
-  components,
-  ...rest
-}) => {
+export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = (
+  props,
+) => {
+  if ("children" in props) {
+    return (
+      <MessagePrimitivePartsBase>{props.children}</MessagePrimitivePartsBase>
+    );
+  }
+
+  const { components, ...rest } = props;
   const merged = components
     ? {
         Text: components.Text ?? inkDefaultComponents.Text,

package/src/primitives/message.ts

@@ -0,0 +1,21 @@
+export {
+  MessageRoot as Root,
+  type MessageRootProps as RootProps,
+} from "./message/MessageRoot";
+export {
+  MessageContent as Content,
+  type MessageContentProps as ContentProps,
+} from "./message/MessageContent";
+export {
+  MessagePrimitiveParts as Parts,
+  MessagePrimitivePartByIndex as PartByIndex,
+} from "./message/MessageParts";
+export {
+  MessageIf as If,
+  type MessageIfProps as IfProps,
+} from "./message/MessageIf";
+export {
+  MessageAttachments as Attachments,
+  MessageAttachmentByIndex as AttachmentByIndex,
+} from "./message/MessageAttachments";
+export { MessageError as Error } from "./message/MessageError";

package/src/primitives/suggestion/SuggestionTrigger.tsx

@@ -1,5 +1,6 @@
-import { useCallback, type ReactNode } from "react";
-import { useAuiState, useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { useSuggestionTrigger } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type SuggestionTriggerProps = Omit<PressableProps, "onPress"> & {
@@ -15,38 +16,17 @@ export const SuggestionTrigger = ({
   disabled: disabledProp,
   ...pressableProps
 }: SuggestionTriggerProps) => {
-  const aui = useAui();
-  const isDisabled = useAuiState((s) => s.thread.isDisabled);
   const prompt = useAuiState((s) => s.suggestion.prompt);
-  const resolvedSend = send ?? false;
-
-  const onPress = useCallback(() => {
-    const isRunning = aui.thread().getState().isRunning;
-
-    if (resolvedSend && !isRunning) {
-      aui.thread().append({
-        content: [{ type: "text", text: prompt }],
-        runConfig: aui.composer().getState().runConfig,
-      });
-      if (clearComposer) {
-        aui.composer().setText("");
-      }
-    } else {
-      if (clearComposer) {
-        aui.composer().setText(prompt);
-      } else {
-        const currentText = aui.composer().getState().text;
-        aui
-          .composer()
-          .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
-      }
-    }
-  }, [aui, resolvedSend, clearComposer, prompt]);
+  const { trigger, disabled } = useSuggestionTrigger({
+    prompt,
+    send,
+    clearComposer,
+  });
 
   return (
     <Pressable
-      onPress={onPress}
-      disabled={disabledProp ?? isDisabled}
+      onPress={trigger}
+      disabled={disabledProp ?? disabled}
       {...pressableProps}
     >
       {children}

package/src/primitives/suggestion.ts

@@ -0,0 +1,12 @@
+export {
+  SuggestionTitle as Title,
+  type SuggestionTitleProps as TitleProps,
+} from "./suggestion/SuggestionTitle";
+export {
+  SuggestionDescription as Description,
+  type SuggestionDescriptionProps as DescriptionProps,
+} from "./suggestion/SuggestionDescription";
+export {
+  SuggestionTrigger as Trigger,
+  type SuggestionTriggerProps as TriggerProps,
+} from "./suggestion/SuggestionTrigger";

package/src/primitives/thread/ThreadEmpty.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useThreadIsEmpty } from "../../primitive-hooks/useThreadIsEmpty";
+import { useThreadIsEmpty } from "@assistant-ui/core/react";
 
 export type ThreadEmptyProps = {
   children: ReactNode;

package/src/primitives/thread/ThreadMessages.tsx

@@ -1,43 +1,147 @@
-import { type ReactElement } from "react";
+import { type ComponentType, type FC, type ReactNode, useMemo } from "react";
 import { Box } from "ink";
 import type { ThreadMessage } from "@assistant-ui/core";
-import { useAui, useAuiState, AuiProvider, Derived } from "@assistant-ui/store";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { MessageByIndexProvider } from "@assistant-ui/core/react";
 
-export type ThreadMessagesProps = {
-  renderMessage: (props: {
-    message: ThreadMessage;
-    index: number;
-  }) => ReactElement;
+type MessageComponents =
+  | {
+      Message: ComponentType;
+      EditComposer?: ComponentType | undefined;
+      UserEditComposer?: ComponentType | undefined;
+      AssistantEditComposer?: ComponentType | undefined;
+      SystemEditComposer?: ComponentType | undefined;
+      UserMessage?: ComponentType | undefined;
+      AssistantMessage?: ComponentType | undefined;
+      SystemMessage?: ComponentType | undefined;
+    }
+  | {
+      Message?: ComponentType | undefined;
+      EditComposer?: ComponentType | undefined;
+      UserEditComposer?: ComponentType | undefined;
+      AssistantEditComposer?: ComponentType | undefined;
+      SystemEditComposer?: ComponentType | undefined;
+      UserMessage: ComponentType;
+      AssistantMessage: ComponentType;
+      SystemMessage?: ComponentType | undefined;
+    };
+
+export type ThreadMessagesProps =
+  | {
+      components: MessageComponents;
+      children?: never;
+    }
+  | {
+      children: (value: { message: ThreadMessage }) => ReactNode;
+      components?: never;
+    };
+
+const DEFAULT_SYSTEM_MESSAGE = () => null;
+
+const getComponent = (
+  components: MessageComponents,
+  role: ThreadMessage["role"],
+  isEditing: boolean,
+) => {
+  switch (role) {
+    case "user":
+      if (isEditing) {
+        return (
+          components.UserEditComposer ??
+          components.EditComposer ??
+          components.UserMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return components.UserMessage ?? (components.Message as ComponentType);
+      }
+    case "assistant":
+      if (isEditing) {
+        return (
+          components.AssistantEditComposer ??
+          components.EditComposer ??
+          components.AssistantMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return (
+          components.AssistantMessage ?? (components.Message as ComponentType)
+        );
+      }
+    case "system":
+      if (isEditing) {
+        return (
+          components.SystemEditComposer ??
+          components.EditComposer ??
+          components.SystemMessage ??
+          (components.Message as ComponentType) ??
+          DEFAULT_SYSTEM_MESSAGE
+        );
+      } else {
+        return (
+          components.SystemMessage ??
+          (components.Message as ComponentType) ??
+          DEFAULT_SYSTEM_MESSAGE
+        );
+      }
+    default: {
+      const _exhaustiveCheck: never = role;
+      throw new Error(`Unknown message role: ${_exhaustiveCheck}`);
+    }
+  }
 };
 
-const MessageScope = ({
-  index,
-  children,
-}: {
-  index: number;
-  children: ReactElement;
+const ThreadMessageComponent: FC<{ components: MessageComponents }> = ({
+  components,
 }) => {
-  const aui = useAui({
-    message: Derived({
-      source: "thread",
-      query: { type: "index", index },
-      get: (aui) => aui.threads().thread("main").message({ index }),
-    }),
-  });
-
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+  const role = useAuiState((s) => s.message.role);
+  const isEditing = useAuiState((s) => s.message.composer.isEditing);
+  const Component = getComponent(components, role, isEditing);
+
+  return <Component />;
 };
 
-export const ThreadMessages = ({ renderMessage }: ThreadMessagesProps) => {
-  const messages = useAuiState((s) => s.thread.messages);
+const ThreadMessagesInner: FC<{
+  children: (value: { message: ThreadMessage }) => ReactNode;
+}> = ({ children }) => {
+  const messagesLength = useAuiState((s) => s.thread.messages.length);
 
+  return useMemo(() => {
+    if (messagesLength === 0) return null;
+    return Array.from({ length: messagesLength }, (_, index) => (
+      <MessageByIndexProvider key={index} index={index}>
+        <RenderChildrenWithAccessor
+          getItemState={(aui) => aui.thread().message({ index }).getState()}
+        >
+          {(getItem) =>
+            children({
+              get message() {
+                return getItem();
+              },
+            })
+          }
+        </RenderChildrenWithAccessor>
+      </MessageByIndexProvider>
+    ));
+  }, [messagesLength, children]);
+};
+
+export const ThreadMessages: FC<ThreadMessagesProps> = ({
+  components,
+  children,
+}) => {
+  if (components) {
+    return (
+      <Box flexDirection="column">
+        <ThreadMessagesInner>
+          {() => <ThreadMessageComponent components={components} />}
+        </ThreadMessagesInner>
+      </Box>
+    );
+  }
   return (
     <Box flexDirection="column">
-      {(messages as unknown as ThreadMessage[]).map((message, index) => (
-        <MessageScope key={message.id} index={index}>
-          {renderMessage({ message, index })}
-        </MessageScope>
-      ))}
+      <ThreadMessagesInner>{children}</ThreadMessagesInner>
     </Box>
   );
 };

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -1,5 +1,5 @@
-import { useCallback, type ReactNode } from "react";
-import { useAuiState, useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useSuggestionTrigger } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type ThreadSuggestionProps = Omit<PressableProps, "onPress"> & {
@@ -17,37 +17,16 @@ export const ThreadSuggestion = ({
   disabled: disabledProp,
   ...pressableProps
 }: ThreadSuggestionProps) => {
-  const aui = useAui();
-  const isDisabled = useAuiState((s) => s.thread.isDisabled);
-  const resolvedSend = send ?? false;
-
-  const onPress = useCallback(() => {
-    const isRunning = aui.thread().getState().isRunning;
-
-    if (resolvedSend && !isRunning) {
-      aui.thread().append({
-        content: [{ type: "text", text: prompt }],
-        runConfig: aui.composer().getState().runConfig,
-      });
-      if (clearComposer) {
-        aui.composer().setText("");
-      }
-    } else {
-      if (clearComposer) {
-        aui.composer().setText(prompt);
-      } else {
-        const currentText = aui.composer().getState().text;
-        aui
-          .composer()
-          .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
-      }
-    }
-  }, [aui, resolvedSend, clearComposer, prompt]);
+  const { trigger, disabled } = useSuggestionTrigger({
+    prompt,
+    send,
+    clearComposer,
+  });
 
   return (
     <Pressable
-      onPress={onPress}
-      disabled={disabledProp ?? isDisabled}
+      onPress={trigger}
+      disabled={disabledProp ?? disabled}
       {...pressableProps}
     >
       {children}

package/src/primitives/thread.ts

@@ -0,0 +1,25 @@
+export {
+  ThreadRoot as Root,
+  type ThreadRootProps as RootProps,
+} from "./thread/ThreadRoot";
+export {
+  ThreadMessages as Messages,
+  type ThreadMessagesProps as MessagesProps,
+} from "./thread/ThreadMessages";
+export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "@assistant-ui/core/react";
+export {
+  ThreadEmpty as Empty,
+  type ThreadEmptyProps as EmptyProps,
+} from "./thread/ThreadEmpty";
+export {
+  ThreadIf as If,
+  type ThreadIfProps as IfProps,
+} from "./thread/ThreadIf";
+export {
+  ThreadSuggestion as Suggestion,
+  type ThreadSuggestionProps as SuggestionProps,
+} from "./thread/ThreadSuggestion";
+export {
+  ThreadPrimitiveSuggestions as Suggestions,
+  ThreadPrimitiveSuggestionByIndex as SuggestionByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/threadList/ThreadListNew.tsx

@@ -1,5 +1,5 @@
-import { useCallback, type ReactNode } from "react";
-import { useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useThreadListNew } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type ThreadListNewProps = Omit<PressableProps, "onPress"> & {
@@ -10,14 +10,10 @@ export const ThreadListNew = ({
   children,
   ...pressableProps
 }: ThreadListNewProps) => {
-  const aui = useAui();
-
-  const onPress = useCallback(() => {
-    aui.threads().switchToNewThread();
-  }, [aui]);
+  const { switchToNewThread } = useThreadListNew();
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={switchToNewThread} {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/threadList.ts

@@ -0,0 +1,12 @@
+export {
+  ThreadListRoot as Root,
+  type ThreadListRootProps as RootProps,
+} from "./threadList/ThreadListRoot";
+export {
+  ThreadListItems as Items,
+  type ThreadListItemsProps as ItemsProps,
+} from "./threadList/ThreadListItems";
+export {
+  ThreadListNew as New,
+  type ThreadListNewProps as NewProps,
+} from "./threadList/ThreadListNew";

package/src/primitives/threadListItem/ThreadListItemArchive.tsx

@@ -1,5 +1,5 @@
-import { useCallback, type ReactNode } from "react";
-import { useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useThreadListItemArchive } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type ThreadListItemArchiveProps = Omit<PressableProps, "onPress"> & {
@@ -10,14 +10,10 @@ export const ThreadListItemArchive = ({
   children,
   ...pressableProps
 }: ThreadListItemArchiveProps) => {
-  const aui = useAui();
-
-  const onPress = useCallback(() => {
-    aui.threadListItem().archive();
-  }, [aui]);
+  const { archive } = useThreadListItemArchive();
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={archive} {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/threadListItem/ThreadListItemDelete.tsx

@@ -1,5 +1,5 @@
-import { useCallback, type ReactNode } from "react";
-import { useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useThreadListItemDelete } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type ThreadListItemDeleteProps = Omit<PressableProps, "onPress"> & {
@@ -10,14 +10,10 @@ export const ThreadListItemDelete = ({
   children,
   ...pressableProps
 }: ThreadListItemDeleteProps) => {
-  const aui = useAui();
-
-  const onPress = useCallback(() => {
-    aui.threadListItem().delete();
-  }, [aui]);
+  const { delete: deleteThread } = useThreadListItemDelete();
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={deleteThread} {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -1,5 +1,5 @@
-import { useCallback, type ReactNode } from "react";
-import { useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useThreadListItemTrigger } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type ThreadListItemTriggerProps = Omit<PressableProps, "onPress"> & {
@@ -10,14 +10,10 @@ export const ThreadListItemTrigger = ({
   children,
   ...pressableProps
 }: ThreadListItemTriggerProps) => {
-  const aui = useAui();
-
-  const onPress = useCallback(() => {
-    aui.threadListItem().switchTo();
-  }, [aui]);
+  const { switchTo } = useThreadListItemTrigger();
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={switchTo} {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/threadListItem/ThreadListItemUnarchive.tsx

@@ -1,5 +1,5 @@
-import { useCallback, type ReactNode } from "react";
-import { useAui } from "@assistant-ui/store";
+import type { ReactNode } from "react";
+import { useThreadListItemUnarchive } from "@assistant-ui/core/react";
 import { Pressable, type PressableProps } from "../internal/Pressable";
 
 export type ThreadListItemUnarchiveProps = Omit<PressableProps, "onPress"> & {
@@ -10,14 +10,10 @@ export const ThreadListItemUnarchive = ({
   children,
   ...pressableProps
 }: ThreadListItemUnarchiveProps) => {
-  const aui = useAui();
-
-  const onPress = useCallback(() => {
-    aui.threadListItem().unarchive();
-  }, [aui]);
+  const { unarchive } = useThreadListItemUnarchive();
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={unarchive} {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/threadListItem.ts

@@ -0,0 +1,21 @@
+export {
+  ThreadListItemRoot as Root,
+  type ThreadListItemRootProps as RootProps,
+} from "./threadListItem/ThreadListItemRoot";
+export { ThreadListItemPrimitiveTitle as Title } from "@assistant-ui/core/react";
+export {
+  ThreadListItemTrigger as Trigger,
+  type ThreadListItemTriggerProps as TriggerProps,
+} from "./threadListItem/ThreadListItemTrigger";
+export {
+  ThreadListItemDelete as Delete,
+  type ThreadListItemDeleteProps as DeleteProps,
+} from "./threadListItem/ThreadListItemDelete";
+export {
+  ThreadListItemArchive as Archive,
+  type ThreadListItemArchiveProps as ArchiveProps,
+} from "./threadListItem/ThreadListItemArchive";
+export {
+  ThreadListItemUnarchive as Unarchive,
+  type ThreadListItemUnarchiveProps as UnarchiveProps,
+} from "./threadListItem/ThreadListItemUnarchive";

package/src/primitives/toolCall/ToolFallback.test.tsx

@@ -0,0 +1,40 @@
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "ink-testing-library";
+import { ToolFallback } from "./ToolFallback";
+
+const renderFrame = async (node: ReactElement) => {
+  const instance = render(node);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  return instance.lastFrame() ?? "";
+};
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ToolFallback", () => {
+  it("truncates expanded error output with maxResultLines", async () => {
+    const frame = await renderFrame(
+      <ToolFallback
+        expanded
+        maxResultLines={2}
+        type="tool-call"
+        toolCallId="tool-call-1"
+        toolName="search"
+        args={{}}
+        argsText="{}"
+        result={"line 1\nline 2\nline 3\nline 4"}
+        isError
+        status={{ type: "incomplete", reason: "error", error: "boom" }}
+      />,
+    );
+
+    expect(frame).toContain("Error:");
+    expect(frame).toContain("line 1");
+    expect(frame).toContain("line 2");
+    expect(frame).toContain("... (2 more lines)");
+    expect(frame).not.toContain("line 3");
+    expect(frame).not.toContain("line 4");
+  });
+});