diff --git a/.changeset/green-actors-warn.md b/.changeset/green-actors-warn.md
new file mode 100644
index 000000000..8c0b7c546
--- /dev/null
+++ b/.changeset/green-actors-warn.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: ThreadList a11y improvements
diff --git a/packages/react/src/primitives/threadList/ThreadListNew.tsx b/packages/react/src/primitives/threadList/ThreadListNew.tsx
index 8d49ca350..2f01f6735 100644
--- a/packages/react/src/primitives/threadList/ThreadListNew.tsx
+++ b/packages/react/src/primitives/threadList/ThreadListNew.tsx
@@ -31,7 +31,7 @@ export const ThreadListPrimitiveNew = forwardRef<
return (
diff --git a/packages/react/src/styles/tailwindcss/thread.css b/packages/react/src/styles/tailwindcss/thread.css
index 67d09a61b..c51860556 100644
--- a/packages/react/src/styles/tailwindcss/thread.css
+++ b/packages/react/src/styles/tailwindcss/thread.css
@@ -227,7 +227,7 @@
}
.aui-thread-list-item {
- @apply data-[active]:bg-aui-muted hover:bg-aui-muted flex items-center gap-2 rounded-lg transition-all;
+ @apply data-[active]:bg-aui-muted hover:bg-aui-muted focus-visible:bg-aui-muted focus-visible:ring-aui-ring flex items-center gap-2 rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2;
}
.aui-thread-list-new {
diff --git a/packages/react/src/ui/index.ts b/packages/react/src/ui/index.ts
index 2345dfd84..583fb2cb9 100644
--- a/packages/react/src/ui/index.ts
+++ b/packages/react/src/ui/index.ts
@@ -20,6 +20,8 @@ export { default as BranchPicker } from "./branch-picker";
export { default as Composer } from "./composer";
+export { default as ContentPart } from "./content-part";
+
export {
default as AttachmentUI, // TODO name collision with Attachment
} from "./attachment-ui";
@@ -28,14 +30,12 @@ export { default as EditComposer } from "./edit-composer";
export { default as Thread } from "./thread";
-export { default as UserMessage } from "./user-message";
+export { default as ThreadList } from "./thread-list";
-export { default as UserActionBar } from "./user-action-bar";
+export { default as ThreadListItem } from "./thread-list-item";
export { default as ThreadWelcome } from "./thread-welcome";
-export { default as ContentPart } from "./content-part";
-
-export { default as ThreadList } from "./thread-list";
+export { default as UserMessage } from "./user-message";
-export { default as ThreadListItem } from "./thread-list-item";
+export { default as UserActionBar } from "./user-action-bar";
diff --git a/packages/react/src/ui/thread-config.tsx b/packages/react/src/ui/thread-config.tsx
index 8efcfc57c..d05ad2359 100644
--- a/packages/react/src/ui/thread-config.tsx
+++ b/packages/react/src/ui/thread-config.tsx
@@ -74,7 +74,7 @@ export type StringsConfig = {
fallback?: string | undefined;
};
archive?: {
- label?: string | undefined;
+ tooltip?: string | undefined;
};
};
};
diff --git a/packages/react/src/ui/thread-list-item.tsx b/packages/react/src/ui/thread-list-item.tsx
index c7a533b5e..deefeca80 100644
--- a/packages/react/src/ui/thread-list-item.tsx
+++ b/packages/react/src/ui/thread-list-item.tsx
@@ -39,11 +39,9 @@ const ThreadListItemTitle = forwardRef<
ThreadListItemPrimitiveTitle.Element,
ThreadListItemPrimitiveTitle.Props
>(({ className, ...props }, ref) => {
- const {
- strings: {
- threadList: { item: { title: { fallback = "New Chat" } = {} } = {} } = {},
- } = {},
- } = useThreadConfig();
+ const config = useThreadConfig();
+ const fallback =
+ config.strings?.threadList?.item?.title?.fallback ?? "New Chat";
return (
(
- ({ className, ...props }, ref) => {
- const {
- strings: {
- threadList: {
- item: { archive: { label = "Archive thread" } = {} } = {},
- } = {},
- } = {},
- } = useThreadConfig();
+const ThreadListItemArchive = forwardRef<
+ HTMLButtonElement,
+ Partial
+>(({ className, ...props }, ref) => {
+ const config = useThreadConfig();
+ const tooltip =
+ config.strings?.threadList?.item?.archive?.tooltip ?? "Archive thread";
- return (
-
-
-
-
-
- );
- },
- ),
- {},
-);
+ return (
+
+
+
+
+
+ );
+});
ThreadListItemArchive.displayName = "ThreadListItemArchive";
diff --git a/packages/react/src/ui/thread-list.tsx b/packages/react/src/ui/thread-list.tsx
index 09cf5048f..12153b2cc 100644
--- a/packages/react/src/ui/thread-list.tsx
+++ b/packages/react/src/ui/thread-list.tsx
@@ -27,17 +27,16 @@ const ThreadListNew = forwardRef<
HTMLButtonElement,
ThreadListPrimitive.New.Props & ButtonProps
>((props, ref) => {
- const {
- strings: { threadList: { new: { label = "New Thread" } = {} } = {} } = {},
- } = useThreadConfig();
+ const config = useThreadConfig();
+ const label = config.strings?.threadList?.new?.label ?? "New Thread";
return (