@assistant-ui/react 0.7.6 → 0.7.8

package/package.json

@@ -29,7 +29,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.7.6",
+  "version": "0.7.8",
   "license": "MIT",
   "exports": {
     ".": {
@@ -65,7 +65,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@ai-sdk/provider": "^1.0.0",
+    "@ai-sdk/provider": "^1.0.1",
     "@radix-ui/primitive": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-compose-refs": "^1.1.0",
@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^22.9.1",
+    "@types/node": "^22.9.3",
     "autoprefixer": "^10.4.20",
     "esbuild-plugin-file-path-extensions": "^2.1.3",
     "eslint": "^9",
@@ -128,7 +128,7 @@
     "access": "public",
     "provenance": true
   },
-  "homepage": "https://assistant-ui.com/",
+  "homepage": "https://www.assistant-ui.com/",
   "repository": {
     "type": "git",
     "url": "https://github.com/Yonom/assistant-ui/tree/main/packages/react"

package/src/api/ContentPartRuntime.ts

@@ -46,7 +46,6 @@ export class ContentPartRuntimeImpl implements ContentPartRuntime {
   ) {}
 
   public getState() {
-    console.log(this.contentBinding);
     return this.contentBinding.getState();
   }
 

package/src/primitives/threadList/ThreadListItems.tsx

@@ -4,7 +4,7 @@ import { ComponentType, FC, memo, useMemo } from "react";
 import { ThreadListItemRuntimeProvider } from "../../context/providers/ThreadListItemRuntimeProvider";
 import { useAssistantRuntime, useThreadList } from "../../context";
 
-export namespace MessagePrimitiveContent {
+export namespace ThreadListPrimitiveItems {
   export type Props = {
     archived?: boolean | undefined;
     components: {
@@ -16,7 +16,7 @@ export namespace MessagePrimitiveContent {
 type ThreadListItemProps = {
   partIndex: number;
   archived: boolean;
-  components: MessagePrimitiveContent.Props["components"];
+  components: ThreadListPrimitiveItems.Props["components"];
 };
 
 const ThreadListItemImpl: FC<ThreadListItemProps> = ({
@@ -52,7 +52,7 @@ const ThreadListItem = memo(
     prev.components.ThreadListItem === next.components.ThreadListItem,
 );
 
-export const ThreadListPrimitiveItems: FC<MessagePrimitiveContent.Props> = ({
+export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
   archived = false,
   components,
 }) => {

package/src/primitives/threadList/ThreadListNew.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  ActionButtonElement,
+  ActionButtonProps,
+} from "../../utils/createActionButton";
+import { useAssistantRuntime, useThreadList } from "../../context";
+import { forwardRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { composeEventHandlers } from "@radix-ui/primitive";
+
+const useThreadListNew = () => {
+  const runtime = useAssistantRuntime();
+  return () => {
+    runtime.switchToNewThread();
+  };
+};
+
+export namespace ThreadListPrimitiveNew {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListNew>;
+}
+
+export const ThreadListPrimitiveNew = forwardRef<
+  ThreadListPrimitiveNew.Element,
+  ThreadListPrimitiveNew.Props
+>(({ onClick, disabled, ...props }, forwardedRef) => {
+  const isMain = useThreadList((t) => t.newThread === t.mainThreadId);
+  const callback = useThreadListNew();
+
+  return (
+    <Primitive.button
+      type="button"
+      {...(isMain ? { "data-active": "true" } : null)}
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !callback}
+      onClick={composeEventHandlers(onClick, () => {
+        callback?.();
+      })}
+    />
+  );
+});
+
+ThreadListPrimitiveNew.displayName = "ThreadListPrimitive.New";

package/src/styles/tailwindcss/thread.css

@@ -219,3 +219,33 @@
 .aui-text-running::after {
   @apply animate-pulse font-sans content-['\25CF'] ltr:ml-1 rtl:mr-1;
 }
+
+/* thread-list */
+
+.aui-thread-list-root {
+  @apply flex flex-col items-stretch gap-1.5;
+}
+
+.aui-thread-list-item {
+  @apply data-[active]:bg-aui-muted hover:bg-aui-muted flex items-center gap-2 rounded-lg transition-all;
+}
+
+.aui-thread-list-new {
+  @apply data-[active]:bg-aui-muted hover:bg-aui-muted flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start;
+}
+
+.aui-thread-list-new > .lucide-plus {
+  @apply size-5;
+}
+
+.aui-thread-list-item-trigger {
+  @apply flex-grow px-3 py-2 text-start;
+}
+
+.aui-thread-list-item-title {
+  @apply text-sm;
+}
+
+.aui-thread-list-item-archive {
+  @apply hover:text-aui-primary text-aui-foreground ml-auto mr-3 size-4 p-0;
+}

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

@@ -11,10 +11,7 @@ import {
   ThumbsUpIcon,
 } from "lucide-react";
 import { ActionBarPrimitive, MessagePrimitive } from "../primitives";
-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";
@@ -91,7 +88,7 @@ AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
 
 namespace AssistantActionBarCopy {
   export type Element = ActionBarPrimitive.Copy.Element;
-  export type Props = Partial<TooltipIconButtonProps> & {
+  export type Props = Partial<TooltipIconButton.Props> & {
     copiedDuration?: number | undefined;
   };
 }
@@ -141,7 +138,7 @@ const AssistantActionBarSpeechControl: FC = () => {
 
 namespace AssistantActionBarSpeak {
   export type Element = ActionBarPrimitive.Speak.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AssistantActionBarSpeak = forwardRef<
@@ -168,7 +165,7 @@ AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
 
 namespace AssistantActionBarStopSpeaking {
   export type Element = ActionBarPrimitive.StopSpeaking.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AssistantActionBarStopSpeaking = forwardRef<
@@ -197,7 +194,7 @@ AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
 
 namespace AssistantActionBarReload {
   export type Element = ActionBarPrimitive.Reload.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AssistantActionBarReload = forwardRef<
@@ -223,7 +220,7 @@ AssistantActionBarReload.displayName = "AssistantActionBarReload";
 
 namespace AssistantActionBarFeedbackPositive {
   export type Element = ActionBarPrimitive.FeedbackPositive.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AssistantActionBarFeedbackPositive = forwardRef<
@@ -256,7 +253,7 @@ AssistantActionBarFeedbackPositive.displayName =
 
 namespace AssistantActionBarFeedbackNegative {
   export type Element = ActionBarPrimitive.FeedbackNegative.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AssistantActionBarFeedbackNegative = forwardRef<

package/src/ui/assistant-modal.tsx

@@ -6,10 +6,7 @@ import { BotIcon, ChevronDownIcon } from "lucide-react";
 import { AssistantModalPrimitive } from "../primitives";
 import Thread from "./thread";
 import { withDefaults } from "./utils/withDefaults";
-import {
-  TooltipIconButton,
-  TooltipIconButtonProps,
-} from "./base/tooltip-icon-button";
+import { TooltipIconButton } from "./base/tooltip-icon-button";
 import {
   ThreadConfig,
   ThreadConfigProvider,
@@ -50,7 +47,7 @@ AssistantModalRoot.displayName = "AssistantModalRoot";
 
 namespace AssistantModalTrigger {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AssistantModalTrigger = forwardRef<
@@ -81,7 +78,7 @@ const ModalButtonStyled = withDefaults(TooltipIconButton, {
 
 namespace AssistantModalButton {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps> & {
+  export type Props = Partial<TooltipIconButton.Props> & {
     "data-state"?: "open" | "closed";
   };
 }

package/src/ui/attachment-ui.tsx

@@ -10,10 +10,7 @@ import {
 import { CircleXIcon, FileIcon } from "lucide-react";
 import { withDefaults } from "./utils/withDefaults";
 import { useThreadConfig } from "./thread-config";
-import {
-  TooltipIconButton,
-  TooltipIconButtonProps,
-} from "./base/tooltip-icon-button";
+import { TooltipIconButton } from "./base/tooltip-icon-button";
 import { AttachmentPrimitive } from "../primitives";
 import { useAttachment } from "../context/react/AttachmentContext";
 import {
@@ -169,7 +166,7 @@ AttachmentUI.displayName = "Attachment";
 
 namespace AttachmentRemove {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const AttachmentRemove = forwardRef<

package/src/ui/base/index.ts

@@ -10,9 +10,6 @@ export { Button, buttonVariants, type ButtonProps } from "./button";
 
 export { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
-export {
-  TooltipIconButton,
-  type TooltipIconButtonProps,
-} from "./tooltip-icon-button";
+export { TooltipIconButton } from "./tooltip-icon-button";
 
 export { CircleStopIcon } from "./CircleStopIcon";

package/src/ui/base/tooltip-icon-button.tsx

@@ -4,14 +4,16 @@ import { forwardRef } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 import { Button, ButtonProps } from "./button";
 
-export type TooltipIconButtonProps = ButtonProps & {
-  tooltip: string;
-  side?: "top" | "bottom" | "left" | "right";
-};
+export namespace TooltipIconButton {
+  export type Props = ButtonProps & {
+    tooltip: string;
+    side?: "top" | "bottom" | "left" | "right";
+  };
+}
 
 export const TooltipIconButton = forwardRef<
   HTMLButtonElement,
-  TooltipIconButtonProps
+  TooltipIconButton.Props
 >(({ children, tooltip, side = "bottom", ...rest }, ref) => {
   return (
     <Tooltip>

package/src/ui/branch-picker.tsx

@@ -3,10 +3,7 @@
 import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } 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 { BranchPickerPrimitive } from "../primitives";
@@ -40,7 +37,7 @@ BranchPickerRoot.displayName = "BranchPickerRoot";
 
 namespace BranchPickerPrevious {
   export type Element = BranchPickerPrimitive.Previous.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const BranchPickerPrevious = forwardRef<
@@ -88,7 +85,7 @@ BranchPickerState.displayName = "BranchPickerState";
 
 namespace BranchPickerNext {
   export type Element = BranchPickerPrimitive.Next.Element;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const BranchPickerNext = forwardRef<

package/src/ui/composer.tsx

@@ -5,10 +5,7 @@ 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,
-  TooltipIconButtonProps,
-} from "./base/tooltip-icon-button";
+import { TooltipIconButton } from "./base/tooltip-icon-button";
 import { CircleStopIcon } from "./base/CircleStopIcon";
 import { ComposerPrimitive, ThreadPrimitive } from "../primitives";
 import { useThread } from "../context/react/ThreadContext";
@@ -94,7 +91,7 @@ const ComposerAttachButton = withDefaults(TooltipIconButton, {
 
 namespace ComposerAddAttachment {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const ComposerAddAttachment = forwardRef<
@@ -152,7 +149,7 @@ const ComposerSendButton = withDefaults(TooltipIconButton, {
 
 namespace ComposerSend {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const ComposerSend = forwardRef<ComposerSend.Element, ComposerSend.Props>(
@@ -179,7 +176,7 @@ const ComposerCancelButton = withDefaults(TooltipIconButton, {
 
 namespace ComposerCancel {
   export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButtonProps>;
+  export type Props = Partial<TooltipIconButton.Props>;
 }
 
 const ComposerCancel = forwardRef<ComposerCancel.Element, ComposerCancel.Props>(

package/src/ui/index.ts

@@ -35,3 +35,7 @@ export { default as UserActionBar } from "./user-action-bar";
 export { default as ThreadWelcome } from "./thread-welcome";
 
 export { default as ContentPart } from "./content-part";
+
+export { default as ThreadList } from "./thread-list";
+
+export { default as ThreadListItem } from "./thread-list-item";

package/src/ui/thread-config.tsx

@@ -65,6 +65,19 @@ export type StringsConfig = {
       };
     };
   };
+  threadList?: {
+    new?: {
+      label?: string | undefined;
+    };
+    item?: {
+      title?: {
+        fallback?: string | undefined;
+      };
+      archive?: {
+        label?: string | undefined;
+      };
+    };
+  };
   thread?: {
     scrollToBottom?: {
       tooltip?: string | undefined;
@@ -192,14 +205,23 @@ export const ThreadConfigProvider: FC<ThreadConfigProviderProps> = ({
 }) => {
   const hasAssistant = !!useAssistantRuntime({ optional: true });
 
-  const configProvider =
-    config && Object.keys(config ?? {}).length > 0 ? (
-      <ThreadConfigContext.Provider value={config}>
-        {children}
-      </ThreadConfigContext.Provider>
-    ) : (
-      <>{children}</>
+  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) {

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

@@ -0,0 +1,99 @@
+"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 {
+    strings: {
+      threadList: { item: { title: { fallback = "New Chat" } = {} } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+
+  return (
+    <p
+      ref={ref}
+      className={classNames("aui-thread-list-item-title", className)}
+      {...props}
+    >
+      <ThreadListItemPrimitive.Title fallback={fallback} />
+    </p>
+  );
+});
+
+ThreadListItemTitle.displayName = "ThreadListItemTitle";
+
+const ThreadListItemArchive = withDefaults(
+  forwardRef<HTMLButtonElement, TooltipIconButton.Props>(
+    ({ className, ...props }, ref) => {
+      const {
+        strings: {
+          threadList: {
+            item: { archive: { label = "Archive thread" } = {} } = {},
+          } = {},
+        } = {},
+      } = useThreadConfig();
+
+      return (
+        <ThreadListItemPrimitive.Archive asChild>
+          <TooltipIconButton
+            {...props}
+            ref={ref}
+            className={classNames("aui-thread-list-item-archive", className)}
+            variant="ghost"
+            tooltip={label}
+          >
+            <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,72 @@
+"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 {
+    strings: { threadList: { new: { label = "New Thread" } = {} } = {} } = {},
+  } = useThreadConfig();
+
+  return (
+    <ThreadListPrimitive.New asChild>
+      <Button
+        {...props}
+        ref={ref}
+        className="aui-thread-list-new"
+        variant="ghost"
+      >
+        <PlusIcon />
+        {label}
+      </Button>
+    </ThreadListPrimitive.New>
+  );
+});
+ThreadListNew.displayName = "ThreadListNew";
+
+const ThreadListItems: FC<{
+  components?: Partial<ThreadListPrimitive.Items.Props["components"]>;
+}> = ({ 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,
-);