@assistant-ui/react 0.7.7 → 0.7.9

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

@@ -0,0 +1,91 @@
+"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

@@ -0,0 +1,78 @@
+"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("div", {
+  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.tsx

@@ -6,10 +6,7 @@ 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 { TooltipIconButton } from "./base/tooltip-icon-button";
 import AssistantMessage from "./assistant-message";
 import UserMessage from "./user-message";
 import EditComposer from "./edit-composer";
@@ -133,7 +130,7 @@ const ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
 
 namespace ThreadScrollToBottom {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const ThreadScrollToBottom = forwardRef<

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

@@ -3,10 +3,7 @@
 import { forwardRef, type FC } from "react";
 import { PencilIcon } from "lucide-react";
 
-import {
-  TooltipIconButton,
-  TooltipIconButtonProps,
-} from "./base/tooltip-icon-button";
+import { TooltipIconButton } from "./base/tooltip-icon-button";
 import { withDefaults } from "./utils/withDefaults";
 import { useThreadConfig } from "./thread-config";
 import { useThread } from "../context";
@@ -38,7 +35,7 @@ UserActionBarRoot.displayName = "UserActionBarRoot";
 
 namespace UserActionBarEdit {
   export type Element = ActionBarPrimitive.Edit.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const UserActionBarEdit = forwardRef<

package/src/primitives/threadList/ThreadListNew.ts

@@ -1,25 +0,0 @@
-"use client";
-
-import {
-  ActionButtonElement,
-  ActionButtonProps,
-  createActionButton,
-} from "../../utils/createActionButton";
-import { useAssistantRuntime } from "../../context";
-
-const useThreadListNew = () => {
-  const runtime = useAssistantRuntime();
-  return () => {
-    runtime.switchToNewThread();
-  };
-};
-
-export namespace ThreadListPrimitiveNew {
-  export type Element = ActionButtonElement;
-  export type Props = ActionButtonProps<typeof useThreadListNew>;
-}
-
-export const ThreadListPrimitiveNew = createActionButton(
-  "ThreadListPrimitive.New",
-  useThreadListNew,
-);