@assistant-ui/react 0.7.91 → 0.8.0

package/src/ui/composer.tsx

@@ -1,210 +0,0 @@
-"use client";
-
-import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
-
-import { PaperclipIcon, SendHorizontalIcon } from "lucide-react";
-import { withDefaults } from "./utils/withDefaults";
-import { useThreadConfig } from "./thread-config";
-import { TooltipIconButton } from "./base/tooltip-icon-button";
-import { CircleStopIcon } from "./base/CircleStopIcon";
-import { ComposerPrimitive, ThreadPrimitive } from "../primitives";
-import { useThread } from "../context/react/ThreadContext";
-import Attachment from "./attachment-ui";
-
-const useAllowAttachments = (ensureCapability = false) => {
-  const { composer: { allowAttachments = true } = {} } = useThreadConfig();
-  const attachmentsSupported = useThread((t) => t.capabilities.attachments);
-  return allowAttachments && (!ensureCapability || attachmentsSupported);
-};
-
-const Composer: FC = () => {
-  const allowAttachments = useAllowAttachments(true);
-  return (
-    <ComposerRoot>
-      {allowAttachments && <ComposerAttachments />}
-      {allowAttachments && <ComposerAddAttachment />}
-      <ComposerInput autoFocus />
-      <ComposerAction />
-    </ComposerRoot>
-  );
-};
-
-Composer.displayName = "Composer";
-
-const ComposerRoot = withDefaults(ComposerPrimitive.Root, {
-  className: "aui-composer-root",
-});
-
-ComposerRoot.displayName = "ComposerRoot";
-
-const ComposerInputStyled = withDefaults(ComposerPrimitive.Input, {
-  rows: 1,
-  autoFocus: true,
-  className: "aui-composer-input",
-});
-
-namespace ComposerInput {
-  export type Element = HTMLTextAreaElement;
-  export type Props = ComponentPropsWithoutRef<typeof ComposerInputStyled>;
-}
-
-const ComposerInput = forwardRef<ComposerInput.Element, ComposerInput.Props>(
-  (props, ref) => {
-    const {
-      strings: {
-        composer: { input: { placeholder = "Write a message..." } = {} } = {},
-      } = {},
-    } = useThreadConfig();
-    return (
-      <ComposerInputStyled placeholder={placeholder} {...props} ref={ref} />
-    );
-  },
-);
-
-ComposerInput.displayName = "ComposerInput";
-
-const ComposerAttachmentsContainer = withDefaults("div", {
-  className: "aui-composer-attachments",
-});
-
-namespace ComposerAttachments {
-  export type Props = Partial<ComposerPrimitive.Attachments.Props>;
-}
-
-const ComposerAttachments: FC<ComposerAttachments.Props> = ({ components }) => {
-  return (
-    <ComposerAttachmentsContainer>
-      <ComposerPrimitive.Attachments
-        components={{
-          ...components,
-          Attachment: components?.Attachment ?? Attachment,
-        }}
-      />
-    </ComposerAttachmentsContainer>
-  );
-};
-
-const ComposerAttachButton = withDefaults(TooltipIconButton, {
-  variant: "default",
-  className: "aui-composer-attach",
-});
-
-namespace ComposerAddAttachment {
-  export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButton.Props>;
-}
-
-const ComposerAddAttachment = forwardRef<
-  ComposerAddAttachment.Element,
-  ComposerAddAttachment.Props
->((props, ref) => {
-  const {
-    strings: {
-      composer: { addAttachment: { tooltip = "Attach file" } = {} } = {},
-    } = {},
-  } = useThreadConfig();
-  const allowAttachments = useAllowAttachments();
-  return (
-    <ComposerPrimitive.AddAttachment disabled={!allowAttachments} asChild>
-      <ComposerAttachButton
-        tooltip={tooltip}
-        variant={"ghost"}
-        {...props}
-        ref={ref}
-      >
-        {props.children ?? <PaperclipIcon />}
-      </ComposerAttachButton>
-    </ComposerPrimitive.AddAttachment>
-  );
-});
-
-ComposerAddAttachment.displayName = "ComposerAddAttachment";
-
-const useAllowCancel = () => {
-  const cancelSupported = useThread((t) => t.capabilities.cancel);
-  return cancelSupported;
-};
-
-const ComposerAction: FC = () => {
-  const allowCancel = useAllowCancel();
-  if (!allowCancel) return <ComposerSend />;
-  return (
-    <>
-      <ThreadPrimitive.If running={false}>
-        <ComposerSend />
-      </ThreadPrimitive.If>
-      <ThreadPrimitive.If running>
-        <ComposerCancel />
-      </ThreadPrimitive.If>
-    </>
-  );
-};
-
-ComposerAction.displayName = "ComposerAction";
-
-const ComposerSendButton = withDefaults(TooltipIconButton, {
-  variant: "default",
-  className: "aui-composer-send",
-});
-
-namespace ComposerSend {
-  export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButton.Props>;
-}
-
-const ComposerSend = forwardRef<ComposerSend.Element, ComposerSend.Props>(
-  (props, ref) => {
-    const {
-      strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {},
-    } = useThreadConfig();
-    return (
-      <ComposerPrimitive.Send asChild>
-        <ComposerSendButton tooltip={tooltip} {...props} ref={ref}>
-          {props.children ?? <SendHorizontalIcon />}
-        </ComposerSendButton>
-      </ComposerPrimitive.Send>
-    );
-  },
-);
-
-ComposerSend.displayName = "ComposerSend";
-
-const ComposerCancelButton = withDefaults(TooltipIconButton, {
-  variant: "default",
-  className: "aui-composer-cancel",
-});
-
-namespace ComposerCancel {
-  export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButton.Props>;
-}
-
-const ComposerCancel = forwardRef<ComposerCancel.Element, ComposerCancel.Props>(
-  (props, ref) => {
-    const {
-      strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {},
-    } = useThreadConfig();
-    return (
-      <ComposerPrimitive.Cancel asChild>
-        <ComposerCancelButton tooltip={tooltip} {...props} ref={ref}>
-          {props.children ?? <CircleStopIcon />}
-        </ComposerCancelButton>
-      </ComposerPrimitive.Cancel>
-    );
-  },
-);
-
-ComposerCancel.displayName = "ComposerCancel";
-
-const exports = {
-  Root: ComposerRoot,
-  Input: ComposerInput,
-  Action: ComposerAction,
-  Send: ComposerSend,
-  Cancel: ComposerCancel,
-  AddAttachment: ComposerAddAttachment,
-  Attachments: ComposerAttachments,
-};
-
-export default Object.assign(Composer, exports) as typeof Composer &
-  typeof exports;

package/src/ui/content-part.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { ContentPartPrimitive } from "../primitives";
-import { useSmoothStatus, withSmoothContextProvider } from "../utils/smooth";
-import classNames from "classnames";
-
-export const Text: FC = () => {
-  const status = useSmoothStatus();
-  return (
-    <ContentPartPrimitive.Text
-      className={classNames(
-        "aui-text",
-        status.type === "running" && "aui-text-running",
-      )}
-      component="p"
-    />
-  );
-};
-
-const exports = { Text: withSmoothContextProvider(Text) };
-
-export default exports;

package/src/ui/edit-composer.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import { forwardRef, type FC } from "react";
-
-import { Button, ButtonProps } from "./base/button";
-import { withDefaults } from "./utils/withDefaults";
-import { useThreadConfig } from "./thread-config";
-import { ComposerPrimitive } from "../primitives";
-
-const EditComposer: FC = () => {
-  return (
-    <EditComposerRoot>
-      <EditComposerInput />
-
-      <EditComposerFooter>
-        <EditComposerCancel />
-        <EditComposerSend />
-      </EditComposerFooter>
-    </EditComposerRoot>
-  );
-};
-
-EditComposer.displayName = "EditComposer";
-
-const EditComposerRoot = withDefaults(ComposerPrimitive.Root, {
-  className: "aui-edit-composer-root",
-});
-
-EditComposerRoot.displayName = "EditComposerRoot";
-
-const EditComposerInput = withDefaults(ComposerPrimitive.Input, {
-  className: "aui-edit-composer-input",
-});
-
-EditComposerInput.displayName = "EditComposerInput";
-
-const EditComposerFooter = withDefaults("div", {
-  className: "aui-edit-composer-footer",
-});
-
-EditComposerFooter.displayName = "EditComposerFooter";
-
-namespace EditComposerCancel {
-  export type Element = HTMLButtonElement;
-  export type Props = Partial<ButtonProps>;
-}
-
-const EditComposerCancel = forwardRef<
-  EditComposerCancel.Element,
-  EditComposerCancel.Props
->((props, ref) => {
-  const {
-    strings: { editComposer: { cancel: { label = "Cancel" } = {} } = {} } = {},
-  } = useThreadConfig();
-  return (
-    <ComposerPrimitive.Cancel asChild>
-      <Button variant="ghost" {...props} ref={ref}>
-        {props.children ?? label}
-      </Button>
-    </ComposerPrimitive.Cancel>
-  );
-});
-
-EditComposerCancel.displayName = "EditComposerCancel";
-
-namespace EditComposerSend {
-  export type Element = HTMLButtonElement;
-  export type Props = Partial<ButtonProps>;
-}
-
-const EditComposerSend = forwardRef<
-  EditComposerSend.Element,
-  EditComposerSend.Props
->((props, ref) => {
-  const {
-    strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {},
-  } = useThreadConfig();
-  return (
-    <ComposerPrimitive.Send asChild>
-      <Button {...props} ref={ref}>
-        {props.children ?? label}
-      </Button>
-    </ComposerPrimitive.Send>
-  );
-});
-
-EditComposerSend.displayName = "EditComposerSend";
-
-const exports = {
-  Root: EditComposerRoot,
-  Input: EditComposerInput,
-  Footer: EditComposerFooter,
-  Cancel: EditComposerCancel,
-  Send: EditComposerSend,
-};
-
-export default Object.assign(EditComposer, exports) as typeof EditComposer &
-  typeof exports;

package/src/ui/index.ts

@@ -1,98 +0,0 @@
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export { ThreadConfigProvider } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export { useThreadConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { ThreadConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { ThreadWelcomeConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { UserMessageConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { AssistantMessageConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { StringsConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { SuggestionConfig } from "./thread-config";
-
-/** @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`. */
-export type { ThreadConfigProviderProps } from "./thread-config";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as AssistantActionBar } from "./assistant-action-bar";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as AssistantMessage } from "./assistant-message";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as AssistantModal } from "./assistant-modal";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as BranchPicker } from "./branch-picker";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as Composer } from "./composer";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as ContentPart } from "./content-part";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export {
-  default as AttachmentUI, // TODO name collision with Attachment
-} from "./attachment-ui";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as EditComposer } from "./edit-composer";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as Thread } from "./thread";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as ThreadList } from "./thread-list";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as ThreadListItem } from "./thread-list-item";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as ThreadWelcome } from "./thread-welcome";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as UserMessage } from "./user-message";
-
-/**
- * @deprecated This export was moved to `@assistant-ui/react-ui`. Use the migration codemod to update your code, by running `npx assistant-ui upgrade`.
- */
-export { default as UserActionBar } from "./user-action-bar";

package/src/ui/thread-config.tsx

@@ -1,246 +0,0 @@
-"use client";
-
-import {
-  ComponentType,
-  FC,
-  PropsWithChildren,
-  ReactNode,
-  createContext,
-  useContext,
-} from "react";
-
-import { AssistantRuntime } from "../api/AssistantRuntime";
-import { AvatarProps } from "./base/avatar";
-import {
-  EmptyContentPartComponent,
-  TextContentPartComponent,
-  ToolCallContentPartProps,
-} from "../types";
-import { AssistantRuntimeProvider } from "../context";
-import { AssistantToolUI } from "../model-context";
-import { useAssistantRuntime } from "../context/react/AssistantContext";
-
-export type SuggestionConfig = {
-  text?: ReactNode | undefined;
-  prompt: string;
-};
-
-export type ThreadWelcomeConfig = {
-  message?: string | null | undefined;
-  suggestions?: SuggestionConfig[] | undefined;
-};
-
-export type UserMessageConfig = {
-  allowEdit?: boolean | undefined;
-};
-
-export type AssistantMessageConfig = {
-  allowReload?: boolean | undefined;
-  allowCopy?: boolean | undefined;
-  allowSpeak?: boolean | undefined;
-  allowFeedbackPositive?: boolean | undefined;
-  allowFeedbackNegative?: boolean | undefined;
-  components?:
-    | {
-        Text?: TextContentPartComponent | undefined;
-        Empty?: EmptyContentPartComponent | undefined;
-        ToolFallback?: ComponentType<ToolCallContentPartProps> | undefined;
-        Footer?: ComponentType | undefined;
-      }
-    | undefined;
-};
-
-export type BranchPickerConfig = {
-  allowBranchPicker?: boolean | undefined;
-};
-
-export type ComposerConfig = {
-  allowAttachments?: boolean | undefined;
-};
-
-export type StringsConfig = {
-  assistantModal?: {
-    open: {
-      button: {
-        tooltip?: string | undefined;
-      };
-    };
-    closed: {
-      button: {
-        tooltip?: string | undefined;
-      };
-    };
-  };
-  threadList?: {
-    new?: {
-      label?: string | undefined;
-    };
-    item?: {
-      title?: {
-        fallback?: string | undefined;
-      };
-      archive?: {
-        tooltip?: string | undefined;
-      };
-    };
-  };
-  thread?: {
-    scrollToBottom?: {
-      tooltip?: string | undefined;
-    };
-  };
-  welcome?: {
-    message?: string | undefined;
-  };
-  userMessage?: {
-    edit?: {
-      tooltip?: string | undefined;
-    };
-  };
-  assistantMessage?: {
-    reload?: {
-      tooltip?: string | undefined;
-    };
-    copy?: {
-      tooltip?: string | undefined;
-    };
-    speak?: {
-      tooltip?: string | undefined;
-      stop?: {
-        tooltip?: string | undefined;
-      };
-    };
-    feedback?: {
-      positive?: {
-        tooltip?: string | undefined;
-      };
-      negative?: {
-        tooltip?: string | undefined;
-      };
-    };
-  };
-  branchPicker?: {
-    previous?: {
-      tooltip?: string | undefined;
-    };
-    next?: {
-      tooltip?: string | undefined;
-    };
-  };
-  composer?: {
-    send?:
-      | {
-          tooltip?: string | undefined;
-        }
-      | undefined;
-    cancel?:
-      | {
-          tooltip?: string | undefined;
-        }
-      | undefined;
-    addAttachment?:
-      | {
-          tooltip?: string | undefined;
-        }
-      | undefined;
-    removeAttachment?: {
-      tooltip?: string | undefined;
-    };
-    input?: {
-      placeholder?: string | undefined;
-    };
-  };
-  editComposer?: {
-    send?: {
-      label?: string | undefined;
-    };
-    cancel?: {
-      label?: string | undefined;
-    };
-  };
-  code?: {
-    header?: {
-      copy?: {
-        tooltip?: string | undefined;
-      };
-    };
-  };
-};
-
-const ThreadConfigContext = createContext<ThreadConfig>({});
-
-export type ThreadConfig = {
-  runtime?: AssistantRuntime | undefined;
-
-  assistantAvatar?: AvatarProps | undefined;
-
-  welcome?: ThreadWelcomeConfig | undefined;
-  assistantMessage?: AssistantMessageConfig | undefined;
-  userMessage?: UserMessageConfig | undefined;
-
-  branchPicker?: BranchPickerConfig | undefined;
-
-  composer?: ComposerConfig | undefined;
-
-  strings?: StringsConfig | undefined;
-
-  tools?: AssistantToolUI[] | undefined; // TODO add AssistantTool support
-
-  components?:
-    | {
-        UserMessage?: ComponentType | undefined;
-        AssistantMessage?: ComponentType | undefined;
-        EditComposer?: ComponentType | undefined;
-        Composer?: ComponentType | undefined;
-        ThreadWelcome?: ComponentType | undefined;
-        MessagesFooter?: ComponentType | undefined;
-      }
-    | undefined;
-};
-
-export const useThreadConfig = (): Omit<ThreadConfig, "runtime"> => {
-  return useContext(ThreadConfigContext);
-};
-
-export type ThreadConfigProviderProps = PropsWithChildren<{
-  config?: ThreadConfig | undefined;
-}>;
-
-export const ThreadConfigProvider: FC<ThreadConfigProviderProps> = ({
-  children,
-  config,
-}) => {
-  const hasAssistant = !!useAssistantRuntime({ optional: true });
-
-  const hasConfig = config && Object.keys(config).length > 0;
-  const outerConfig = useThreadConfig();
-
-  if (hasConfig && Object.keys(outerConfig).length > 0) {
-    throw new Error(
-      "You are providing ThreadConfig to several nested components. Please provide all configuration to the same component.",
-    );
-  }
-
-  const configProvider = hasConfig ? (
-    <ThreadConfigContext.Provider value={config}>
-      {children}
-    </ThreadConfigContext.Provider>
-  ) : (
-    <>{children}</>
-  );
-
-  if (!config?.runtime) return configProvider;
-
-  if (hasAssistant) {
-    throw new Error(
-      "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed.",
-    );
-  }
-  return (
-    <AssistantRuntimeProvider runtime={config.runtime}>
-      {configProvider}
-    </AssistantRuntimeProvider>
-  );
-};
-
-ThreadConfigProvider.displayName = "ThreadConfigProvider";