@assistant-ui/react-ink 0.0.1

package/src/primitives/message/MessageContent.tsx

@@ -0,0 +1,183 @@
+import { type ReactElement, Fragment, useMemo } from "react";
+import { Text } from "ink";
+import type {
+  ThreadUserMessagePart,
+  ThreadAssistantMessagePart,
+  ToolCallMessagePart,
+  DataMessagePart,
+} from "@assistant-ui/core";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import type {
+  ToolCallMessagePartProps,
+  DataMessagePartProps,
+} from "../../types";
+
+type MessageContentPart = ThreadUserMessagePart | ThreadAssistantMessagePart;
+
+export type MessageContentProps = {
+  renderText?: (props: {
+    part: Extract<MessageContentPart, { type: "text" }>;
+    index: number;
+  }) => ReactElement;
+  renderToolCall?: (props: {
+    part: Extract<MessageContentPart, { type: "tool-call" }>;
+    index: number;
+  }) => ReactElement;
+  renderImage?: (props: {
+    part: Extract<MessageContentPart, { type: "image" }>;
+    index: number;
+  }) => ReactElement;
+  renderReasoning?: (props: {
+    part: Extract<MessageContentPart, { type: "reasoning" }>;
+    index: number;
+  }) => ReactElement;
+  renderSource?: (props: {
+    part: Extract<MessageContentPart, { type: "source" }>;
+    index: number;
+  }) => ReactElement;
+  renderFile?: (props: {
+    part: Extract<MessageContentPart, { type: "file" }>;
+    index: number;
+  }) => ReactElement;
+  renderData?: (props: {
+    part: Extract<MessageContentPart, { type: "data" }>;
+    index: number;
+  }) => ReactElement;
+};
+
+const DefaultTextRenderer = ({
+  part,
+}: {
+  part: Extract<MessageContentPart, { type: "text" }>;
+}) => {
+  return <Text>{part.text}</Text>;
+};
+
+const ToolUIDisplay = ({
+  Fallback,
+  part,
+  index,
+}: {
+  Fallback:
+    | ((props: { part: ToolCallMessagePart; index: number }) => ReactElement)
+    | undefined;
+  part: ToolCallMessagePart;
+  index: number;
+}) => {
+  const aui = useAui();
+  const Render = useAuiState((s) => {
+    const renders = s.tools.tools[part.toolName];
+    if (Array.isArray(renders)) return renders[0];
+    return renders;
+  });
+
+  const partMethods = useMemo(
+    () => aui.message().part({ index }),
+    [aui, index],
+  );
+
+  if (Render) {
+    return (
+      <Render
+        {...(part as ToolCallMessagePartProps)}
+        addResult={partMethods.addToolResult}
+        resume={partMethods.resumeToolCall}
+      />
+    );
+  }
+  if (Fallback) return <Fallback part={part} index={index} />;
+  return null;
+};
+
+const DataUIDisplay = ({
+  Fallback,
+  part,
+  index,
+}: {
+  Fallback:
+    | ((props: { part: DataMessagePart; index: number }) => ReactElement)
+    | undefined;
+  part: DataMessagePart;
+  index: number;
+}) => {
+  const Render = useAuiState((s) => {
+    const renders = s.dataRenderers.renderers[part.name];
+    if (Array.isArray(renders)) return renders[0];
+    return renders;
+  });
+  if (Render) return <Render {...(part as DataMessagePartProps)} />;
+  if (Fallback) return <Fallback part={part} index={index} />;
+  return null;
+};
+
+export const MessageContent = ({
+  renderText,
+  renderToolCall,
+  renderImage,
+  renderReasoning,
+  renderSource,
+  renderFile,
+  renderData,
+}: MessageContentProps) => {
+  const content = useAuiState((s) => s.message.content);
+
+  return (
+    <>
+      {content.map((part, index) => {
+        const key = `${part.type}-${index}`;
+        switch (part.type) {
+          case "text":
+            return (
+              <Fragment key={key}>
+                {renderText ? (
+                  renderText({ part, index })
+                ) : (
+                  <DefaultTextRenderer part={part} />
+                )}
+              </Fragment>
+            );
+          case "tool-call":
+            return (
+              <Fragment key={key}>
+                <ToolUIDisplay
+                  Fallback={renderToolCall}
+                  part={part}
+                  index={index}
+                />
+              </Fragment>
+            );
+          case "image":
+            if (!renderImage) return null;
+            return (
+              <Fragment key={key}>{renderImage({ part, index })}</Fragment>
+            );
+          case "reasoning":
+            if (!renderReasoning) return null;
+            return (
+              <Fragment key={key}>{renderReasoning({ part, index })}</Fragment>
+            );
+          case "source":
+            if (!renderSource) return null;
+            return (
+              <Fragment key={key}>{renderSource({ part, index })}</Fragment>
+            );
+          case "file":
+            if (!renderFile) return null;
+            return <Fragment key={key}>{renderFile({ part, index })}</Fragment>;
+          case "data":
+            return (
+              <Fragment key={key}>
+                <DataUIDisplay
+                  Fallback={renderData}
+                  part={part}
+                  index={index}
+                />
+              </Fragment>
+            );
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/primitives/message/MessageIf.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { useAuiState } from "@assistant-ui/store";
+
+export type MessageIfProps = {
+  children: ReactNode;
+  user?: boolean | undefined;
+  assistant?: boolean | undefined;
+  running?: boolean | undefined;
+  last?: boolean | undefined;
+};
+
+export const MessageIf = ({
+  children,
+  user,
+  assistant,
+  running,
+  last,
+}: MessageIfProps) => {
+  const message = useAuiState((s) => s.message);
+
+  if (user !== undefined) {
+    if (user !== (message.role === "user")) return null;
+  }
+
+  if (assistant !== undefined) {
+    if (assistant !== (message.role === "assistant")) return null;
+  }
+
+  if (running !== undefined) {
+    const isRunning =
+      message.role === "assistant" && message.status.type === "running";
+    if (running !== isRunning) return null;
+  }
+
+  if (last !== undefined) {
+    if (last !== message.isLast) return null;
+  }
+
+  return <>{children}</>;
+};

package/src/primitives/message/MessageParts.tsx

@@ -0,0 +1,60 @@
+import type { FC } from "react";
+import { Text } from "ink";
+import {
+  MessagePrimitiveParts as MessagePrimitivePartsBase,
+  MessagePartComponent as MessagePartComponentBase,
+  MessagePrimitivePartByIndex as MessagePrimitivePartByIndexBase,
+  messagePartsDefaultComponents,
+} from "@assistant-ui/core/react";
+
+const inkDefaultComponents = {
+  ...messagePartsDefaultComponents,
+  Text: ({ text }: { text: string }) => <Text>{text}</Text>,
+} satisfies MessagePrimitiveParts.Props["components"];
+
+export namespace MessagePrimitiveParts {
+  export type Props = MessagePrimitivePartsBase.Props;
+}
+
+/**
+ * Renders the parts of a message with Ink-specific default components.
+ */
+export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
+  components,
+  ...rest
+}) => {
+  const merged = components
+    ? {
+        Text: components.Text ?? inkDefaultComponents.Text,
+        Image: components.Image ?? messagePartsDefaultComponents.Image,
+        Reasoning:
+          components.Reasoning ?? messagePartsDefaultComponents.Reasoning,
+        Source: components.Source ?? messagePartsDefaultComponents.Source,
+        File: components.File ?? messagePartsDefaultComponents.File,
+        Unstable_Audio:
+          components.Unstable_Audio ??
+          messagePartsDefaultComponents.Unstable_Audio,
+        ...("ChainOfThought" in components
+          ? { ChainOfThought: components.ChainOfThought }
+          : {
+              tools: components.tools,
+              data: components.data,
+              ToolGroup:
+                components.ToolGroup ?? messagePartsDefaultComponents.ToolGroup,
+              ReasoningGroup:
+                components.ReasoningGroup ??
+                messagePartsDefaultComponents.ReasoningGroup,
+            }),
+        Empty: components.Empty,
+      }
+    : inkDefaultComponents;
+
+  return <MessagePrimitivePartsBase components={merged as any} {...rest} />;
+};
+
+MessagePrimitiveParts.displayName = "MessagePrimitive.Parts";
+
+export {
+  MessagePartComponentBase as MessagePartComponent,
+  MessagePrimitivePartByIndexBase as MessagePrimitivePartByIndex,
+};

package/src/primitives/message/MessageRoot.tsx

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

package/src/primitives/message/index.ts

@@ -0,0 +1,11 @@
+export { MessageRoot, type MessageRootProps } from "./MessageRoot";
+export { MessageContent, type MessageContentProps } from "./MessageContent";
+export {
+  MessagePrimitiveParts,
+  MessagePrimitivePartByIndex,
+} from "./MessageParts";
+export { MessageIf, type MessageIfProps } from "./MessageIf";
+export {
+  MessageAttachments,
+  MessageAttachmentByIndex,
+} from "./MessageAttachments";

package/src/primitives/suggestion/SuggestionDescription.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Text } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type SuggestionDescriptionProps = ComponentProps<typeof Text> & {
+  children?: ReactNode;
+};
+
+export const SuggestionDescription = ({
+  children,
+  ...textProps
+}: SuggestionDescriptionProps) => {
+  const label = useAuiState((s) => s.suggestion.label);
+
+  return <Text {...textProps}>{children ?? label}</Text>;
+};

package/src/primitives/suggestion/SuggestionTitle.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Text } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type SuggestionTitleProps = ComponentProps<typeof Text> & {
+  children?: ReactNode;
+};
+
+export const SuggestionTitle = ({
+  children,
+  ...textProps
+}: SuggestionTitleProps) => {
+  const title = useAuiState((s) => s.suggestion.title);
+
+  return <Text {...textProps}>{children ?? title}</Text>;
+};

package/src/primitives/suggestion/SuggestionTrigger.tsx

@@ -0,0 +1,55 @@
+import { useCallback, type ReactNode } from "react";
+import { useAuiState, useAui } from "@assistant-ui/store";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type SuggestionTriggerProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+  send?: boolean | undefined;
+  clearComposer?: boolean | undefined;
+};
+
+export const SuggestionTrigger = ({
+  children,
+  send,
+  clearComposer = true,
+  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]);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabledProp ?? isDisabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/suggestion/index.ts

@@ -0,0 +1,12 @@
+export {
+  SuggestionTitle,
+  type SuggestionTitleProps,
+} from "./SuggestionTitle";
+export {
+  SuggestionDescription,
+  type SuggestionDescriptionProps,
+} from "./SuggestionDescription";
+export {
+  SuggestionTrigger,
+  type SuggestionTriggerProps,
+} from "./SuggestionTrigger";

package/src/primitives/thread/ThreadEmpty.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { useThreadIsEmpty } from "../../primitive-hooks/useThreadIsEmpty";
+
+export type ThreadEmptyProps = {
+  children: ReactNode;
+};
+
+export const ThreadEmpty = ({ children }: ThreadEmptyProps) => {
+  const isEmpty = useThreadIsEmpty();
+  if (!isEmpty) return null;
+  return <>{children}</>;
+};

package/src/primitives/thread/ThreadIf.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { useAuiState } from "@assistant-ui/store";
+
+export type ThreadIfProps = {
+  children: ReactNode;
+  empty?: boolean | undefined;
+  running?: boolean | undefined;
+};
+
+export const ThreadIf = ({ children, empty, running }: ThreadIfProps) => {
+  const thread = useAuiState((s) => s.thread);
+
+  if (empty !== undefined) {
+    const isEmpty = thread.messages.length === 0;
+    if (empty !== isEmpty) return null;
+  }
+
+  if (running !== undefined) {
+    if (running !== thread.isRunning) return null;
+  }
+
+  return <>{children}</>;
+};

package/src/primitives/thread/ThreadMessages.tsx

@@ -0,0 +1,43 @@
+import { type ReactElement } from "react";
+import { Box } from "ink";
+import type { ThreadMessage } from "@assistant-ui/core";
+import { useAui, useAuiState, AuiProvider, Derived } from "@assistant-ui/store";
+
+export type ThreadMessagesProps = {
+  renderMessage: (props: {
+    message: ThreadMessage;
+    index: number;
+  }) => ReactElement;
+};
+
+const MessageScope = ({
+  index,
+  children,
+}: {
+  index: number;
+  children: ReactElement;
+}) => {
+  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>;
+};
+
+export const ThreadMessages = ({ renderMessage }: ThreadMessagesProps) => {
+  const messages = useAuiState((s) => s.thread.messages);
+
+  return (
+    <Box flexDirection="column">
+      {(messages as unknown as ThreadMessage[]).map((message, index) => (
+        <MessageScope key={message.id} index={index}>
+          {renderMessage({ message, index })}
+        </MessageScope>
+      ))}
+    </Box>
+  );
+};

package/src/primitives/thread/ThreadRoot.tsx

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

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -0,0 +1,56 @@
+import { useCallback, type ReactNode } from "react";
+import { useAuiState, useAui } from "@assistant-ui/store";
+import { Pressable, type PressableProps } from "../internal/Pressable";
+
+export type ThreadSuggestionProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+  prompt: string;
+  send?: boolean | undefined;
+  clearComposer?: boolean | undefined;
+};
+
+export const ThreadSuggestion = ({
+  children,
+  prompt,
+  send,
+  clearComposer = true,
+  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]);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabledProp ?? isDisabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/thread/index.ts

@@ -0,0 +1,16 @@
+export { ThreadRoot, type ThreadRootProps } from "./ThreadRoot";
+export { ThreadMessages, type ThreadMessagesProps } from "./ThreadMessages";
+export {
+  ThreadPrimitiveMessages,
+  ThreadPrimitiveMessageByIndex,
+} from "@assistant-ui/core/react";
+export { ThreadEmpty, type ThreadEmptyProps } from "./ThreadEmpty";
+export { ThreadIf, type ThreadIfProps } from "./ThreadIf";
+export {
+  ThreadSuggestion,
+  type ThreadSuggestionProps,
+} from "./ThreadSuggestion";
+export {
+  ThreadPrimitiveSuggestions,
+  ThreadPrimitiveSuggestionByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/threadList/ThreadListItems.tsx

@@ -0,0 +1,19 @@
+import { type ReactElement } from "react";
+import { Box } from "ink";
+import { useAuiState } from "@assistant-ui/store";
+
+export type ThreadListItemsProps = {
+  renderItem: (props: { threadId: string; index: number }) => ReactElement;
+};
+
+export const ThreadListItems = ({ renderItem }: ThreadListItemsProps) => {
+  const threadIds = useAuiState((s) => s.threads.threadIds);
+
+  return (
+    <Box flexDirection="column">
+      {(threadIds as string[]).map((threadId, index) =>
+        renderItem({ threadId, index }),
+      )}
+    </Box>
+  );
+};

package/src/primitives/threadList/ThreadListNew.tsx

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

package/src/primitives/threadList/ThreadListRoot.tsx

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

package/src/primitives/threadList/index.ts

@@ -0,0 +1,3 @@
+export { ThreadListRoot, type ThreadListRootProps } from "./ThreadListRoot";
+export { ThreadListItems, type ThreadListItemsProps } from "./ThreadListItems";
+export { ThreadListNew, type ThreadListNewProps } from "./ThreadListNew";

package/src/primitives/threadListItem/ThreadListItemArchive.tsx

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