feat: Implement and integrate a mobile thread list component with new and archive actions into the drawer.

Author: arnaudpfu

apps/mobile/.expo/devices.json

@@ -2,7 +2,7 @@
   "devices": [
     {
       "installationId": "FF1011A1-7709-4E6F-AF64-252B30FCADD0",
-      "lastUsed": 1770999837705
+      "lastUsed": 1771013690224
     }
   ]
 }

apps/mobile/components/ai-chat/thread-list.tsx

@@ -0,0 +1,93 @@
+import { View, ActivityIndicator, FlatList } from "react-native";
+import { Text } from "~/components/ui/text";
+import { Button } from "~/components/ui/button";
+import {
+  ActionSheet,
+  ActionSheetContent,
+  ActionSheetTrigger,
+} from "~/components/ui/action-sheet";
+import * as ThreadListPrimitive from "@creatorem/ai-react-native/primitives/thread-list";
+import * as ThreadListItemPrimitive from "@creatorem/ai-react-native/primitives/thread-list-item";
+import { useThreads } from "@creatorem/ai-react-native/ai-provider";
+import { useCallback, type FC } from "react";
+import { useCSSVariable } from "uniwind";
+import { Icon } from "~/components/ui/icon";
+
+export const ThreadList: FC = () => {
+  const isLoading = useThreads((threads) => threads.isLoading);
+
+  return (
+    <ThreadListPrimitive.Root className="flex flex-col gap-1">
+      <ThreadListNew />
+      {isLoading ? <ThreadListSkeleton /> : null}
+      {!isLoading ? (
+        <ThreadListPrimitive.Items components={{ ThreadListItem }} />
+      ) : null}
+    </ThreadListPrimitive.Root>
+  );
+};
+
+const ThreadListNew: FC = () => {
+  return (
+    <ThreadListPrimitive.New
+      variant="outline"
+      className="mb-4 h-9 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-active:bg-muted"
+    >
+      <Icon name="Plus" className="size-4" />
+      <Text>New Thread</Text>
+    </ThreadListPrimitive.New>
+  );
+};
+
+const ThreadListSkeleton: FC = () => {
+  const foregroundColor = useCSSVariable("--color-muted-foreground");
+
+  return (
+    <View className="mt-2 flex flex-col gap-1">
+      {Array.from({ length: 5 }, (_, i) => (
+        <View key={i} className="flex h-10 items-center justify-center px-3">
+          <ActivityIndicator
+            size="small"
+            color={foregroundColor}
+            style={i > 0 ? { opacity: 0 } : undefined}
+          />
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const ThreadListItem: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="group flex h-9 flex-row items-center gap-2 rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted">
+      <ThreadListItemPrimitive.Trigger className="flex h-full min-w-0 flex-1 items-center justify-start truncate bg-transparent px-3 text-start text-sm">
+        <ThreadListItemPrimitive.Title
+          fallback="New Chat"
+          className="text-foreground"
+        />
+      </ThreadListItemPrimitive.Trigger>
+      <ThreadListItemMore />
+    </ThreadListItemPrimitive.Root>
+  );
+};
+
+const ThreadListItemMore: FC = () => {
+  const textMutedForeground = useCSSVariable("--color-muted-foreground");
+  return (
+    <ActionSheet>
+      <ActionSheetTrigger asChild>
+        <Button size="icon" variant="ghost">
+          <Icon name="MoreHorizontal" size={20} color={textMutedForeground} />
+        </Button>
+      </ActionSheetTrigger>
+      <ActionSheetContent>
+        <View className="p-6">
+          <ThreadListItemPrimitive.Archive>
+            <Icon name="Archive" className="size-4" />
+            <Text>Archive</Text>
+          </ThreadListItemPrimitive.Archive>
+        </View>
+      </ActionSheetContent>
+    </ActionSheet>
+  );
+};

apps/mobile/components/drawer-content.tsx

@@ -1,18 +1,20 @@
-import { View, ScrollView } from "react-native";
+import { ScrollView } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { cn } from "~/utils/cn";
+import { ThreadList } from "./ai-chat/thread-list";
 
 export function DrawerContent() {
   const insets = useSafeAreaInsets();
+
   return (
     <ScrollView
-      showsVerticalScrollIndicator={false}
-      bounces={false}
       overScrollMode="never"
-      className={cn(`w-full flex-1 bg-background px-6`)}
-      contentContainerStyle={[{ paddingTop: insets.top }]}
+      className={cn("w-full flex-1 bg-background px-4")}
+      contentContainerStyle={[
+        { paddingTop: insets.top + 8, paddingBottom: 24 },
+      ]}
     >
-      <View className="h-20 w-full" />
+      <ThreadList />
     </ScrollView>
   );
 }

apps/mobile/components/ui/icon.tsx

@@ -43,6 +43,7 @@ import {
   Share2Icon,
   ArrowDownIcon,
   ChevronDownIcon,
+  ArchiveIcon,
   LockIcon,
   UnlockIcon,
   EyeIcon,
@@ -94,6 +95,7 @@ const lucideIcons = {
   File: FileIcon,
   Globe: GlobeIcon,
   Telescope: TelescopeIcon,
+  Archive: ArchiveIcon,
   MoreHorizontal: MoreHorizontalIcon,
   Download: DownloadIcon,
   Mic: MicIcon,
@@ -181,7 +183,6 @@ interface IconProps extends VariantProps<typeof iconVariants> {
   onPress?: () => void;
   disabled?: boolean;
   className?: string;
-  colorClassName?: string;
   strokeWidth?: number;
   fill?: string;
 }
@@ -196,7 +197,6 @@ export const Icon: React.FC<IconProps> = ({
   onPress,
   disabled = false,
   className,
-  colorClassName,
   strokeWidth = 2,
   fill = "none",
 }) => {

packages-test-3/ai-chat/src/primitives/thread-list-item/index.ts

@@ -4,3 +4,5 @@ export { ThreadListItemPrimitiveTrigger as Trigger } from "./thread-list-item-tr
 export { ThreadListItemPrimitiveArchive as Archive } from "./thread-list-item-archive";
 export { ThreadListItemPrimitiveUnarchive as Unarchive } from "./thread-list-item-unarchive";
 export { ThreadListItemPrimitiveDelete as Delete } from "./thread-list-item-delete";
+export { useThreadListItem, useThreadListItemStore } from "./thread-list-item-by-index-provider";
+export type { ThreadListItemState, ThreadListItemMethods } from "./thread-list-item-by-index-provider";

packages-test-3/ai-chat/src/primitives/thread-list-item/thread-list-item-title.tsx

@@ -2,18 +2,21 @@
 
 import type { FC, ReactNode } from "react";
 import { useThreadListItem } from "./thread-list-item-by-index-provider";
+import { useRuntime } from "@creatorem/ai-chat/runtime";
+import { RuntimeComponents } from "@creatorem/ai-chat/component-types";
 
 export namespace ThreadListItemPrimitiveTitle {
-  export type Props = {
+  export type Props = React.ComponentPropsWithoutRef<RuntimeComponents['Text']> & {
     fallback?: ReactNode;
   };
 }
 
 export const ThreadListItemPrimitiveTitle: FC<
   ThreadListItemPrimitiveTitle.Props
-> = ({ fallback }) => {
+> = ({ fallback, ...props }) => {
   const title = useThreadListItem((thread) => thread.title);
-  return <>{title || fallback}</>;
+  const {Text} = useRuntime().components
+  return <Text {...props}>{title ? title + '...' : fallback}</Text>;
 };
 
 ThreadListItemPrimitiveTitle.displayName = "ThreadListItemPrimitive.Title";