@assistant-ui/react 0.7.91 → 0.8.0

package/src/ui/thread-list-item.tsx

@@ -1,91 +0,0 @@
-"use client";
-
-import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
-import { ArchiveIcon } from "lucide-react";
-
-import { withDefaults } from "./utils/withDefaults";
-import { TooltipIconButton } from "./base/tooltip-icon-button";
-import { ThreadListItemPrimitive } from "../primitives";
-import { useThreadConfig } from "./thread-config";
-import classNames from "classnames";
-
-const ThreadListItem: FC = () => {
-  return (
-    <ThreadListItemRoot>
-      <ThreadListItemTrigger>
-        <ThreadListItemTitle />
-      </ThreadListItemTrigger>
-      <ThreadListItemArchive />
-    </ThreadListItemRoot>
-  );
-};
-
-const ThreadListItemRoot = withDefaults(ThreadListItemPrimitive.Root, {
-  className: "aui-thread-list-item",
-});
-
-ThreadListItemRoot.displayName = "ThreadListItemRoot";
-
-const ThreadListItemTrigger = withDefaults(ThreadListItemPrimitive.Trigger, {
-  className: "aui-thread-list-item-trigger",
-});
-
-namespace ThreadListItemPrimitiveTitle {
-  export type Element = HTMLParagraphElement;
-  export type Props = ComponentPropsWithoutRef<"p">;
-}
-
-const ThreadListItemTitle = forwardRef<
-  ThreadListItemPrimitiveTitle.Element,
-  ThreadListItemPrimitiveTitle.Props
->(({ className, ...props }, ref) => {
-  const config = useThreadConfig();
-  const fallback =
-    config.strings?.threadList?.item?.title?.fallback ?? "New Chat";
-
-  return (
-    <p
-      ref={ref}
-      className={classNames("aui-thread-list-item-title", className)}
-      {...props}
-    >
-      <ThreadListItemPrimitive.Title fallback={fallback} />
-    </p>
-  );
-});
-
-ThreadListItemTitle.displayName = "ThreadListItemTitle";
-
-const ThreadListItemArchive = forwardRef<
-  HTMLButtonElement,
-  Partial<TooltipIconButton.Props>
->(({ className, ...props }, ref) => {
-  const config = useThreadConfig();
-  const tooltip =
-    config.strings?.threadList?.item?.archive?.tooltip ?? "Archive thread";
-
-  return (
-    <ThreadListItemPrimitive.Archive asChild>
-      <TooltipIconButton
-        ref={ref}
-        className={classNames("aui-thread-list-item-archive", className)}
-        variant="ghost"
-        tooltip={tooltip}
-        {...props}
-      >
-        <ArchiveIcon />
-      </TooltipIconButton>
-    </ThreadListItemPrimitive.Archive>
-  );
-});
-
-ThreadListItemArchive.displayName = "ThreadListItemArchive";
-
-const exports = {
-  Root: ThreadListItemRoot,
-  Title: ThreadListItemTitle,
-  Archive: ThreadListItemArchive,
-};
-
-export default Object.assign(ThreadListItem, exports) as typeof ThreadListItem &
-  typeof exports;

package/src/ui/thread-list.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { forwardRef, type FC } from "react";
-import { PlusIcon } from "lucide-react";
-
-import { withDefaults } from "./utils/withDefaults";
-import { ThreadListPrimitive } from "../primitives";
-import ThreadListItem from "./thread-list-item";
-import { useThreadConfig } from "./thread-config";
-import { Button, ButtonProps } from "./base";
-
-const ThreadList: FC = () => {
-  return (
-    <ThreadListRoot>
-      <ThreadListNew />
-      <ThreadListItems />
-    </ThreadListRoot>
-  );
-};
-
-const ThreadListRoot = withDefaults(ThreadListPrimitive.Root, {
-  className: "aui-root aui-thread-list-root",
-});
-ThreadListRoot.displayName = "ThreadListRoot";
-
-const ThreadListNew = forwardRef<
-  HTMLButtonElement,
-  ThreadListPrimitive.New.Props & ButtonProps
->((props, ref) => {
-  const config = useThreadConfig();
-  const label = config.strings?.threadList?.new?.label ?? "New Thread";
-
-  return (
-    <ThreadListPrimitive.New asChild>
-      <Button
-        ref={ref}
-        className="aui-thread-list-new"
-        variant="ghost"
-        {...props}
-      >
-        <PlusIcon />
-        {label}
-      </Button>
-    </ThreadListPrimitive.New>
-  );
-});
-ThreadListNew.displayName = "ThreadListNew";
-
-namespace ThreadListItems {
-  export type Props = {
-    /**
-     * Optional custom components to override default thread list items
-     */
-    components?: Partial<ThreadListPrimitive.Items.Props["components"]>;
-  };
-}
-
-const ThreadListItems: FC<ThreadListItems.Props> = ({ components }) => {
-  return (
-    <ThreadListPrimitive.Items
-      components={{
-        ...components,
-        ThreadListItem: components?.ThreadListItem ?? ThreadListItem,
-      }}
-    />
-  );
-};
-
-ThreadListItems.displayName = "ThreadListItems";
-
-const exports = {
-  Root: ThreadListRoot,
-  New: ThreadListNew,
-  Items: ThreadListItems,
-};
-
-export default Object.assign(ThreadList, exports) as typeof ThreadList &
-  typeof exports;

package/src/ui/thread-welcome.tsx

@@ -1,140 +0,0 @@
-"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",
-});
-
-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-suggestions",
-});
-
-const ThreadWelcomeSuggestionStyled = withDefaults(ThreadPrimitive.Suggestion, {
-  className: "aui-thread-welcome-suggestion",
-});
-
-export namespace ThreadWelcomeSuggestion {
-  export type Props = {
-    suggestion: SuggestionConfig;
-  };
-}
-
-const ThreadWelcomeSuggestion: FC<ThreadWelcomeSuggestion.Props> = ({
-  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

@@ -1,176 +0,0 @@
-"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 } 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,
-      MessagesFooter,
-      ...messageComponents
-    } = {},
-  } = config;
-  return (
-    <ThreadRoot config={config}>
-      <ThreadViewport>
-        <ThreadWelcomeComponent />
-        <ThreadMessages
-          MessagesFooter={MessagesFooter}
-          components={messageComponents}
-        />
-        <ThreadFollowupSuggestions />
-        <ThreadViewportFooter>
-          <ThreadScrollToBottom />
-          <ComposerComponent />
-        </ThreadViewportFooter>
-      </ThreadViewport>
-    </ThreadRoot>
-  );
-};
-
-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 ThreadMessages: FC<{
-  unstable_flexGrowDiv?: boolean;
-  components?: Partial<ThreadPrimitive.Messages.Props["components"]>;
-  MessagesFooter?: ComponentType | undefined;
-}> = ({
-  components,
-  MessagesFooter,
-  unstable_flexGrowDiv: flexGrowDiv = true,
-  ...rest
-}) => {
-  return (
-    <>
-      <ThreadPrimitive.Messages
-        components={{
-          ...components,
-          UserMessage: components?.UserMessage ?? UserMessage,
-          AssistantMessage: components?.AssistantMessage ?? AssistantMessage,
-          EditComposer: components?.EditComposer ?? EditComposer,
-        }}
-        {...rest}
-      />
-      {MessagesFooter && <MessagesFooter />}
-      {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<TooltipIconButton.Props>;
-}
-
-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

@@ -1,66 +0,0 @@
-"use client";
-
-import { forwardRef, type FC } from "react";
-import { PencilIcon } from "lucide-react";
-
-import { TooltipIconButton } 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<TooltipIconButton.Props>;
-}
-
-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

@@ -1,92 +0,0 @@
-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-ui";
-
-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",
-});
-
-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",
-});
-
-namespace UserMessageAttachments {
-  export type Props = Partial<MessagePrimitive.Attachments.Props>;
-}
-
-const UserMessageAttachments: FC<UserMessageAttachments.Props> = ({
-  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

@@ -1,35 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType, forwardRef } from "react";
-import classNames from "classnames";
-import { ComponentRef } from "react";
-
-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<ComponentRef<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/tailwindcss/README.md

@@ -1 +0,0 @@
-This directory exists to support subpath imports for TypeScript projects using --moduleResolution node.

package/tailwindcss/package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "tailwindcss",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

package/tailwindcss/package.json

@@ -1,5 +0,0 @@
-{
-  "main": "../dist/tailwindcss/index.js",
-  "module": "../dist/tailwindcss/index.mjs",
-  "types": "../dist/tailwindcss/index.d.ts"
-}