@assistant-ui/react 0.5.92 → 0.5.94

package/src/ui/thread-welcome.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
+import { withDefaults } from "./utils/withDefaults";
+import { Avatar } from "./base/avatar";
+import { SuggestionConfig, useThreadConfig } from "./thread-config";
+import { ThreadPrimitive } from "../primitives";
+import { useThread } from "../context";
+
+const ThreadWelcome: FC = () => {
+  return (
+    <ThreadWelcomeRoot>
+      <ThreadWelcomeCenter>
+        <ThreadWelcomeAvatar />
+        <ThreadWelcomeMessage />
+      </ThreadWelcomeCenter>
+      <ThreadWelcomeSuggestions />
+    </ThreadWelcomeRoot>
+  );
+};
+
+ThreadWelcome.displayName = "ThreadWelcome";
+
+const ThreadWelcomeRootStyled = withDefaults("div", {
+  className: "aui-thread-welcome-root",
+});
+
+const ThreadWelcomeCenter = withDefaults("div", {
+  className: "aui-thread-welcome-center",
+});
+
+namespace ThreadWelcomeRoot {
+  export type Element = HTMLDivElement;
+  export type Props = ComponentPropsWithoutRef<"div">;
+}
+
+const ThreadWelcomeRoot = forwardRef<
+  ThreadWelcomeRoot.Element,
+  ThreadWelcomeRoot.Props
+>((props, ref) => {
+  return (
+    <ThreadPrimitive.Empty>
+      <ThreadWelcomeRootStyled {...props} ref={ref} />
+    </ThreadPrimitive.Empty>
+  );
+});
+
+ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
+
+const ThreadWelcomeAvatar: FC = () => {
+  const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
+  return <Avatar {...avatar} />;
+};
+
+const ThreadWelcomeMessageStyled = withDefaults("p", {
+  className: "aui-thread-welcome-message",
+});
+
+/**
+ * @deprecated Use `ThreadWelcome.Message.Props` instead. This will be removed in 0.6.
+ */
+export type ThreadWelcomeMessageProps = ThreadWelcomeMessage.Props;
+
+namespace ThreadWelcomeMessage {
+  export type Element = HTMLParagraphElement;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof ThreadWelcomeMessageStyled>,
+    "children"
+  > & { message?: string | undefined };
+}
+
+const ThreadWelcomeMessage = forwardRef<
+  ThreadWelcomeMessage.Element,
+  ThreadWelcomeMessage.Props
+>(({ message: messageProp, ...rest }, ref) => {
+  const {
+    welcome: { message } = {},
+    strings: {
+      welcome: { message: defaultMessage = "How can I help you today?" } = {},
+    } = {},
+  } = useThreadConfig();
+  return (
+    <ThreadWelcomeMessageStyled {...rest} ref={ref}>
+      {messageProp ?? message ?? defaultMessage}
+    </ThreadWelcomeMessageStyled>
+  );
+});
+
+ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
+
+const ThreadWelcomeSuggestionContainer = withDefaults("div", {
+  className: "aui-thread-welcome-suggestion-container",
+});
+
+const ThreadWelcomeSuggestionStyled = withDefaults(ThreadPrimitive.Suggestion, {
+  className: "aui-thread-welcome-suggestion",
+});
+
+export type ThreadWelcomeSuggestionProps = {
+  suggestion: SuggestionConfig;
+};
+
+const ThreadWelcomeSuggestion: FC<ThreadWelcomeSuggestionProps> = ({
+  suggestion: { text, prompt },
+}) => {
+  return (
+    <ThreadWelcomeSuggestionStyled prompt={prompt} method="replace" autoSend>
+      <span className="aui-thread-welcome-suggestion-text">
+        {text ?? prompt}
+      </span>
+    </ThreadWelcomeSuggestionStyled>
+  );
+};
+
+const ThreadWelcomeSuggestions: FC = () => {
+  const suggestions2 = useThread((t) => t.suggestions);
+  const { welcome: { suggestions } = {} } = useThreadConfig();
+
+  const finalSuggestions = suggestions2.length ? suggestions2 : suggestions;
+
+  return (
+    <ThreadWelcomeSuggestionContainer>
+      {finalSuggestions?.map((suggestion, idx) => {
+        const key = `${suggestion.prompt}-${idx}`;
+        return <ThreadWelcomeSuggestion key={key} suggestion={suggestion} />;
+      })}
+    </ThreadWelcomeSuggestionContainer>
+  );
+};
+
+ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
+
+const exports = {
+  Root: ThreadWelcomeRoot,
+  Center: ThreadWelcomeCenter,
+  Avatar: ThreadWelcomeAvatar,
+  Message: ThreadWelcomeMessage,
+  Suggestions: ThreadWelcomeSuggestions,
+  Suggestion: ThreadWelcomeSuggestion,
+};
+
+export default Object.assign(ThreadWelcome, exports) as typeof ThreadWelcome &
+  typeof exports;

package/src/ui/thread.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { ComponentType, forwardRef, type FC } from "react";
+import { ArrowDownIcon } from "lucide-react";
+
+import { withDefaults } from "./utils/withDefaults";
+import Composer from "./composer";
+import ThreadWelcome from "./thread-welcome";
+import {
+  TooltipIconButton,
+  TooltipIconButtonProps,
+} from "./base/tooltip-icon-button";
+import AssistantMessage from "./assistant-message";
+import UserMessage from "./user-message";
+import EditComposer from "./edit-composer";
+import {
+  ThreadConfig,
+  ThreadConfigProvider,
+  ThreadConfigProviderProps,
+  useThreadConfig,
+} from "./thread-config";
+import { ThreadPrimitive } from "../primitives";
+import { useThread } from "../context";
+
+const Thread: FC<ThreadConfig> = (config) => {
+  const {
+    components: {
+      Composer: ComposerComponent = Composer,
+      ThreadWelcome: ThreadWelcomeComponent = ThreadWelcome,
+    } = {},
+  } = config;
+  return (
+    <ThreadRoot config={config}>
+      <ThreadViewport>
+        <ThreadWelcomeComponent />
+        <ThreadMessages />
+        <ThreadFollowupSuggestions />
+        <ThreadViewportFooter>
+          <ThreadScrollToBottom />
+          <ComposerComponent />
+        </ThreadViewportFooter>
+      </ThreadViewport>
+    </ThreadRoot>
+  );
+};
+
+/**
+ * @deprecated Use `Thread.Root.Props` instead. This will be removed in 0.6.
+ */
+export type ThreadRootProps = ThreadRoot.Props;
+
+namespace ThreadRoot {
+  export type Element = HTMLDivElement;
+  export type Props = ThreadPrimitive.Root.Props & ThreadConfigProviderProps;
+}
+
+const ThreadRootStyled = withDefaults(ThreadPrimitive.Root, {
+  className: "aui-root aui-thread-root",
+});
+
+const ThreadRoot = forwardRef<ThreadRoot.Element, ThreadRoot.Props>(
+  ({ config, ...props }, ref) => {
+    return (
+      <ThreadConfigProvider config={config}>
+        <ThreadRootStyled {...props} ref={ref} />
+      </ThreadConfigProvider>
+    );
+  },
+);
+
+ThreadRoot.displayName = "ThreadRoot";
+
+const ThreadViewport = withDefaults(ThreadPrimitive.Viewport, {
+  className: "aui-thread-viewport",
+});
+
+ThreadViewport.displayName = "ThreadViewport";
+
+const ThreadViewportFooter = withDefaults("div", {
+  className: "aui-thread-viewport-footer",
+});
+
+ThreadViewportFooter.displayName = "ThreadViewportFooter";
+
+const SystemMessage = () => null;
+
+const ThreadMessages: FC<{
+  unstable_flexGrowDiv?: boolean;
+  components?: {
+    UserMessage?: ComponentType | undefined;
+    EditComposer?: ComponentType | undefined;
+    AssistantMessage?: ComponentType | undefined;
+    SystemMessage?: ComponentType | undefined;
+  };
+}> = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => {
+  return (
+    <>
+      <ThreadPrimitive.Messages
+        components={{
+          UserMessage: components?.UserMessage ?? UserMessage,
+          EditComposer: components?.EditComposer ?? EditComposer,
+          AssistantMessage: components?.AssistantMessage ?? AssistantMessage,
+          SystemMessage: components?.SystemMessage ?? SystemMessage,
+        }}
+        {...rest}
+      />
+      {flexGrowDiv && (
+        <ThreadPrimitive.If empty={false}>
+          <div style={{ flexGrow: 1 }} />
+        </ThreadPrimitive.If>
+      )}
+    </>
+  );
+};
+
+ThreadMessages.displayName = "ThreadMessages";
+
+const ThreadFollowupSuggestions: FC = () => {
+  const suggestions = useThread((t) => t.suggestions);
+
+  return (
+    <ThreadPrimitive.If empty={false} running={false}>
+      <div className="aui-thread-followup-suggestions">
+        {suggestions?.map((suggestion, idx) => (
+          <ThreadPrimitive.Suggestion
+            key={idx}
+            className="aui-thread-followup-suggestion"
+            prompt={suggestion.prompt}
+            method="replace"
+            autoSend
+          >
+            {suggestion.prompt}
+          </ThreadPrimitive.Suggestion>
+        ))}
+      </div>
+    </ThreadPrimitive.If>
+  );
+};
+
+const ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
+  variant: "outline",
+  className: "aui-thread-scroll-to-bottom",
+});
+
+namespace ThreadScrollToBottom {
+  export type Element = HTMLButtonElement;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const ThreadScrollToBottom = forwardRef<
+  ThreadScrollToBottom.Element,
+  ThreadScrollToBottom.Props
+>((props, ref) => {
+  const {
+    strings: {
+      thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+  return (
+    <ThreadPrimitive.ScrollToBottom asChild>
+      <ThreadScrollToBottomIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <ArrowDownIcon />}
+      </ThreadScrollToBottomIconButton>
+    </ThreadPrimitive.ScrollToBottom>
+  );
+});
+
+ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
+
+const exports = {
+  Root: ThreadRoot,
+  Viewport: ThreadViewport,
+  Messages: ThreadMessages,
+  FollowupSuggestions: ThreadFollowupSuggestions,
+  ScrollToBottom: ThreadScrollToBottom,
+  ViewportFooter: ThreadViewportFooter,
+};
+
+export default Object.assign(Thread, exports) as typeof Thread & typeof exports;

package/src/ui/user-action-bar.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { forwardRef, type FC } from "react";
+import { PencilIcon } from "lucide-react";
+
+import {
+  TooltipIconButton,
+  TooltipIconButtonProps,
+} from "./base/tooltip-icon-button";
+import { withDefaults } from "./utils/withDefaults";
+import { useThreadConfig } from "./thread-config";
+import { useThread } from "../context";
+import { ActionBarPrimitive } from "../primitives";
+
+const useAllowEdit = (ensureCapability = false) => {
+  const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
+  const editSupported = useThread((t) => t.capabilities.edit);
+  return allowEdit && (!ensureCapability || editSupported);
+};
+
+const UserActionBar: FC = () => {
+  const allowEdit = useAllowEdit(true);
+  if (!allowEdit) return null;
+  return (
+    <UserActionBarRoot hideWhenRunning autohide="not-last">
+      <UserActionBarEdit />
+    </UserActionBarRoot>
+  );
+};
+
+UserActionBar.displayName = "UserActionBar";
+
+const UserActionBarRoot = withDefaults(ActionBarPrimitive.Root, {
+  className: "aui-user-action-bar-root",
+});
+
+UserActionBarRoot.displayName = "UserActionBarRoot";
+
+namespace UserActionBarEdit {
+  export type Element = ActionBarPrimitive.Edit.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const UserActionBarEdit = forwardRef<
+  UserActionBarEdit.Element,
+  UserActionBarEdit.Props
+>((props, ref) => {
+  const {
+    strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {},
+  } = useThreadConfig();
+  const allowEdit = useAllowEdit();
+  return (
+    <ActionBarPrimitive.Edit disabled={!allowEdit} asChild>
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <PencilIcon />}
+      </TooltipIconButton>
+    </ActionBarPrimitive.Edit>
+  );
+});
+
+UserActionBarEdit.displayName = "UserActionBarEdit";
+
+const exports = {
+  Root: UserActionBarRoot,
+  Edit: UserActionBarEdit,
+};
+
+export default Object.assign(UserActionBar, exports) as typeof UserActionBar &
+  typeof exports;

package/src/ui/user-message.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
+
+import BranchPicker from "./branch-picker";
+import { withDefaults } from "./utils/withDefaults";
+import UserActionBar from "./user-action-bar";
+import ContentPart from "./content-part";
+import { MessagePrimitive } from "../primitives";
+import Attachment from "./attachment";
+
+const UserMessage: FC = () => {
+  return (
+    <UserMessageRoot>
+      <UserMessageAttachments />
+      {/* TODO this is temporary until we place the UserActionBar in a better place */}
+      <MessagePrimitive.If hasContent>
+        <UserActionBar />
+        <UserMessageContent />
+      </MessagePrimitive.If>
+      <BranchPicker />
+    </UserMessageRoot>
+  );
+};
+
+UserMessage.displayName = "UserMessage";
+
+const UserMessageRoot = withDefaults(MessagePrimitive.Root, {
+  className: "aui-user-message-root",
+});
+
+UserMessageRoot.displayName = "UserMessageRoot";
+
+const UserMessageContentWrapper = withDefaults("div", {
+  className: "aui-user-message-content",
+});
+
+/**
+ * @deprecated Use `UserMessage.Content.Props` instead. This will be removed in 0.6.
+ */
+export type UserMessageContentProps = UserMessageContent.Props;
+
+namespace UserMessageContent {
+  export type Element = HTMLDivElement;
+  export type Props = MessagePrimitive.Content.Props &
+    ComponentPropsWithoutRef<"div">;
+}
+
+const UserMessageContent = forwardRef<
+  UserMessageContent.Element,
+  UserMessageContent.Props
+>(({ components, ...props }, ref) => {
+  return (
+    <UserMessageContentWrapper {...props} ref={ref}>
+      <MessagePrimitive.Content
+        components={{
+          ...components,
+          Text: components?.Text ?? ContentPart.Text,
+        }}
+      />
+    </UserMessageContentWrapper>
+  );
+});
+
+UserMessageContent.displayName = "UserMessageContent";
+
+const UserMessageAttachmentsContainer = withDefaults("div", {
+  className: "aui-user-message-attachments",
+});
+
+/**
+ * @deprecated Use `UserMessage.Attachments.Props` instead. This will be removed in 0.6.
+ */
+export type UserMessageAttachmentsProps = UserMessageAttachments.Props;
+
+namespace UserMessageAttachments {
+  export type Props = Partial<MessagePrimitive.Attachments.Props>;
+}
+
+const UserMessageAttachments: FC<UserMessageAttachmentsProps> = ({
+  components,
+}) => {
+  return (
+    <MessagePrimitive.If hasAttachments>
+      <UserMessageAttachmentsContainer>
+        <MessagePrimitive.Attachments 
+          components={{
+            ...components,
+            Attachment: components?.Attachment ?? Attachment,
+          }}
+        />
+      </UserMessageAttachmentsContainer>
+    </MessagePrimitive.If>
+  );
+};
+
+const exports = {
+  Root: UserMessageRoot,
+  Content: UserMessageContent,
+  Attachments: UserMessageAttachments,
+};
+
+export default Object.assign(UserMessage, exports) as typeof UserMessage &
+  typeof exports;

package/src/ui/utils/withDefaults.tsx

@@ -0,0 +1,39 @@
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  ElementType,
+  forwardRef,
+} from "react";
+import classNames from "classnames";
+
+export const withDefaultProps =
+  <TProps extends { className?: string }>({
+    className,
+    ...defaultProps
+  }: Partial<TProps>) =>
+  ({ className: classNameProp, ...props }: TProps) => {
+    return {
+      className: classNames(className, classNameProp),
+      ...defaultProps,
+      ...props,
+    } as TProps;
+  };
+
+export const withDefaults = <TComponent extends ElementType>(
+  Component: TComponent,
+  defaultProps: Partial<ComponentPropsWithoutRef<TComponent>>,
+) => {
+  type TComponentProps = typeof defaultProps;
+  const getProps = withDefaultProps<TComponentProps>(defaultProps);
+  const WithDefaults = forwardRef<ElementRef<TComponent>, TComponentProps>(
+    (props, ref) => {
+      const ComponentAsAny = Component as any;
+      return <ComponentAsAny {...getProps(props as any)} ref={ref} />;
+    },
+  );
+  WithDefaults.displayName =
+    "withDefaults(" +
+    (typeof Component === "string" ? Component : Component.displayName) +
+    ")";
+  return WithDefaults;
+};

package/src/utils/ProxyConfigProvider.ts

@@ -0,0 +1,36 @@
+import {
+  type ModelConfigProvider,
+  mergeModelConfigs,
+} from "../types/ModelConfigTypes";
+
+export class ProxyConfigProvider implements ModelConfigProvider {
+  private _providers = new Set<ModelConfigProvider>();
+
+  getModelConfig() {
+    return mergeModelConfigs(this._providers);
+  }
+
+  registerModelConfigProvider(provider: ModelConfigProvider) {
+    this._providers.add(provider);
+    const unsubscribe = provider.subscribe?.(() => {
+      this.notifySubscribers();
+    });
+    this.notifySubscribers();
+    return () => {
+      this._providers.delete(provider);
+      unsubscribe?.();
+      this.notifySubscribers();
+    };
+  }
+
+  private _subscribers = new Set<() => void>();
+
+  notifySubscribers() {
+    for (const callback of this._subscribers) callback();
+  }
+
+  subscribe(callback: () => void) {
+    this._subscribers.add(callback);
+    return () => this._subscribers.delete(callback);
+  }
+}

package/src/utils/RequireAtLeastOne.tsx

@@ -0,0 +1,8 @@
+"use client";
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+  T,
+  Exclude<keyof T, Keys>
+> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+  }[Keys];

package/src/utils/combined/createCombinedStore.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import type { Unsubscribe } from "../../types/Unsubscribe";
+
+export type StoreOrRuntime<T> = {
+  getState: () => T;
+  subscribe: (callback: () => void) => Unsubscribe;
+};
+
+export type CombinedSelector<T extends Array<unknown>, R> = (...args: T) => R;
+
+export const createCombinedStore = <T extends Array<unknown>, R>(stores: {
+  [K in keyof T]: StoreOrRuntime<T[K]>;
+}) => {
+  const subscribe = (callback: () => void): Unsubscribe => {
+    const unsubscribes = stores.map((store) => store.subscribe(callback));
+    return () => {
+      for (const unsub of unsubscribes) {
+        unsub();
+      }
+    };
+  };
+
+  return (selector: CombinedSelector<T, R>): R => {
+    const getSnapshot = (): R =>
+      selector(...(stores.map((store) => store.getState()) as T));
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  };
+};

package/src/utils/combined/useCombinedStore.ts

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import {
+  type CombinedSelector,
+  createCombinedStore,
+  StoreOrRuntime,
+} from "./createCombinedStore";
+
+export const useCombinedStore = <T extends Array<unknown>, R>(
+  stores: { [K in keyof T]: StoreOrRuntime<T[K]> },
+  selector: CombinedSelector<T, R>,
+): R => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- shallow-compare the store array
+  const useCombined = useMemo(() => createCombinedStore<T, R>(stores), stores);
+  return useCombined(selector);
+};

package/src/utils/createActionButton.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { composeEventHandlers } from "@radix-ui/primitive";
+
+type ActionButtonCallback<TProps> = (props: TProps) => null | (() => void);
+
+type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
+
+export type ActionButtonProps<THook> = PrimitiveButtonProps &
+  (THook extends (props: infer TProps) => unknown ? TProps : never);
+
+export type ActionButtonElement = ElementRef<typeof Primitive.button>;
+
+export const createActionButton = <TProps,>(
+  displayName: string,
+  useActionButton: ActionButtonCallback<TProps>,
+  forwardProps: (keyof NonNullable<TProps>)[] = [],
+) => {
+  const ActionButton = forwardRef<
+    ActionButtonElement,
+    PrimitiveButtonProps & TProps
+  >((props, forwardedRef) => {
+    const forwardedProps = {} as TProps;
+    const primitiveProps = {} as PrimitiveButtonProps;
+
+    (Object.keys(props) as Array<keyof typeof props>).forEach((key) => {
+      if (forwardProps.includes(key as keyof TProps)) {
+        (forwardedProps as any)[key] = props[key];
+      } else {
+        (primitiveProps as any)[key] = props[key];
+      }
+    });
+
+    const callback = useActionButton(forwardedProps as TProps);
+    return (
+      <Primitive.button
+        type="button"
+        {...primitiveProps}
+        ref={forwardedRef}
+        disabled={primitiveProps.disabled || !callback}
+        onClick={composeEventHandlers(primitiveProps.onClick, () => {
+          callback?.();
+        })}
+      />
+    );
+  });
+
+  ActionButton.displayName = displayName;
+
+  return ActionButton;
+};

package/src/utils/getThreadMessageText.tsx

@@ -0,0 +1,15 @@
+import type {
+  AppendMessage,
+  TextContentPart,
+  ThreadMessage,
+} from "../types/AssistantTypes";
+
+export const getThreadMessageText = (
+  message: ThreadMessage | AppendMessage,
+) => {
+  const textParts = message.content.filter(
+    (part) => part.type === "text",
+  ) as TextContentPart[];
+
+  return textParts.map((part) => part.text).join("\n\n");
+};