customizable depth generation

README.md

@@ -148,6 +148,11 @@ node-linker=hoisted
 
 In this case, `pnpm clean && pnpm install && cd apps/expo && pnpm ios` before you go back to root and run `pnpm dev`. Maybe open the Xcode project and build from there?
 
+
+- "Unimplemented component"
+
+You don't have the native module properly installed. `cd apps/expo && pnpm expo install <dependency> && pnpm run start:ios`
+
 ## FAQ & Deployment
 
 Just see the original [here](https://github.com/t3-oss/create-t3-turbo#faq) (permalink [here](https://github.com/t3-oss/create-t3-turbo/tree/cf9aefdf46036df0b9a3bec4f08d0f4f2fe54e83?tab=readme-ov-file#faq)).

apps/expo/package.json

@@ -18,6 +18,7 @@
     "@better-auth/expo": "catalog:",
     "@expo/vector-icons": "^15.0.3",
     "@legendapp/list": "^2.0.11",
+    "@react-native-community/slider": "^5.0.1",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/server": "catalog:",

apps/expo/src/app/article-detail.tsx

@@ -13,7 +13,9 @@ import { useQuery } from "@tanstack/react-query";
 
 import { Button } from "@acme/ui/button-native";
 
+import { ArticleDepthControl } from "~/components/ArticleDepthControl";
 import { Text, View } from "~/components/Themed";
+import { Citations } from "~/components/Citations";
 // import { WireframeWave } from "~/components/WireframeWave";
 import {
   badges,
@@ -57,6 +59,7 @@ export default function ArticleDetailScreen() {
   const [selectedTab, setSelectedTab] = useState<"article" | "original">(
     "article",
   );
+  const [depth, setDepth] = useState<1 | 2 | 3 | 4 | 5>(3);
 
   // Fetch content from tRPC
   const {
@@ -68,6 +71,19 @@ export default function ArticleDetailScreen() {
     enabled: !!id,
   });
 
+  // Fetch article at the selected depth
+  const {
+    data: articleAtDepth,
+    isLoading: isLoadingDepth,
+  } = useQuery({
+    ...trpc.content.getArticleAtDepth.queryOptions({
+      id,
+      type: content?.type === "bill" ? "bill" : content?.type === "case" ? "case" : "general",
+      depth,
+    }),
+    enabled: !!id && !!content,
+  });
+
   // Handle loading state
   if (isLoading) {
     return (
@@ -170,23 +186,40 @@ export default function ArticleDetailScreen() {
             {content.description}
           </Text>
 
+          {/* Article Depth Control */}
+          <ArticleDepthControl
+            value={depth}
+            onValueChange={setDepth}
+            isGenerating={isLoadingDepth}
+            isCached={articleAtDepth?.cached}
+            style={localStyles.depthControl}
+          />
+
           <View
             style={[
               cards.content,
               {
                 backgroundColor: theme.card,
                 borderColor: colors.cyan[700],
                 marginTop: sp[5],
-                marginBottom: sp[20],
+                marginBottom: sp[5],
               },
             ]}
           >
             <Markdown style={markdownStyles}>
               {selectedTab === "article"
-                ? content.articleContent
+                ? (articleAtDepth?.content || content.articleContent)
                 : content.originalContent}
             </Markdown>
           </View>
+
+          {/* Show citations only for AI-generated articles */}
+          {selectedTab === "article" && content.isAIGenerated && content.citations && (
+            <Citations citations={content.citations} />
+          )}
+
+          {/* Add bottom padding */}
+          <View style={{ height: sp[20], backgroundColor: "transparent" }} />
         </ScrollView>
 
         {/* Floating action icons on right side */}
@@ -258,6 +291,9 @@ const localStyles = StyleSheet.create({
   articleDescription: {
     marginBottom: sp[4],
   },
+  depthControl: {
+    marginBottom: sp[4],
+  },
   floatingActions: {
     position: "absolute",
     top: "50%",