From 2f5d866e9850e54c1079cd74dab025b671427ce6 Mon Sep 17 00:00:00 2001
From: edgar <edgarpavlovsky@users.noreply.github.com>
Date: Wed, 3 Dec 2025 22:35:01 -0500
Subject: [PATCH] adding chat history to debugger-ios

---
 apps/debugger-ios/package.json                |   3 +-
 apps/debugger-ios/src/App.tsx                 |  76 ++-
 apps/debugger-ios/src/index.js                |   1 +
 .../src/screens/ChatHistoryTest.tsx           | 574 ++++++++++++++++++
 apps/debugger-ios/src/unistyles.config.ts     |  22 +
 bun.lock                                      |  15 +-
 packages/streamdown-rn/src/StreamdownRN.tsx   |   1 -
 7 files changed, 660 insertions(+), 32 deletions(-)
 create mode 100644 apps/debugger-ios/src/screens/ChatHistoryTest.tsx
 create mode 100644 apps/debugger-ios/src/unistyles.config.ts

diff --git a/apps/debugger-ios/package.json b/apps/debugger-ios/package.json
index 5b9818e..4187f3c 100644
--- a/apps/debugger-ios/package.json
+++ b/apps/debugger-ios/package.json
@@ -6,13 +6,14 @@
     "start": "bunx expo start --port 8082 --host lan",
     "ios": "RCT_METRO_PORT=8082 bunx expo run:ios",
     "web": "bunx expo start --web --port 8082",
-    "dev": "RCT_METRO_PORT=8082 bunx concurrently --kill-others \"bun run start\" \"sleep 5 && echo '🔧 Metro port: 8082 (RCT_METRO_PORT)' && bun run ios\"",
+    "dev": "RCT_METRO_PORT=8082 bunx concurrently \"bun run start\" \"sleep 5 && echo '🔧 Metro port: 8082 (RCT_METRO_PORT)' && bun run ios\"",
     "lint": "eslint .",
     "setup": "node setup.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@darkresearch/debug-components": "workspace:*",
+    "@legendapp/list": "^2.0.16",
     "streamdown-rn": "workspace:*",
     "@expo-google-fonts/geist": "^0.4.1",
     "@expo/metro-runtime": "~6.1.2",
diff --git a/apps/debugger-ios/src/App.tsx b/apps/debugger-ios/src/App.tsx
index 6236290..45b1250 100644
--- a/apps/debugger-ios/src/App.tsx
+++ b/apps/debugger-ios/src/App.tsx
@@ -1,35 +1,25 @@
 import { useState, useEffect } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text, ScrollView, Pressable } from 'react-native';
 import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 import { StreamdownRN } from 'streamdown-rn';
 import { debugComponentRegistry } from '@darkresearch/debug-components';
+import { ChatHistoryTest } from './screens/ChatHistoryTest';
 
 const WS_URL = 'ws://localhost:3001';
 
-// Configure Unistyles
-StyleSheet.configure({
-  themes: {
-    dark: {
-      colors: {
-        bg: '#1a1a1a',
-        statusBg: '#141414',
-        border: '#333',
-        text: '#888',
-        placeholder: '#666',
-        connected: '#4ade80',
-      },
-    },
-  },
-  settings: {
-    initialTheme: 'dark',
-  },
-});
+type AppMode = 'debugger' | 'chat-history';
+
+// Note: Unistyles is configured in unistyles.config.ts (imported by index.js)
 
 export default function App() {
+  const [mode, setMode] = useState<AppMode>('debugger');
   const [content, setContent] = useState('');
   const [connected, setConnected] = useState(false);
   
   useEffect(() => {
+    // Only connect to WebSocket in debugger mode
+    if (mode !== 'debugger') return;
+    
     let ws: WebSocket | null = null;
     let reconnectTimeout: NodeJS.Timeout | null = null;
     let hasConnectedOnce = false;
@@ -83,8 +73,14 @@ export default function App() {
       if (reconnectTimeout) clearTimeout(reconnectTimeout);
       ws?.close();
     };
-  }, []);
+  }, [mode]);
 
+  // Chat History Test Mode
+  if (mode === 'chat-history') {
+    return <ChatHistoryTest onBack={() => setMode('debugger')} />;
+  }
+
+  // Default: Debugger Mode
   return (
     <View style={styles.container}>
       <View style={styles.statusBar}>
@@ -92,6 +88,12 @@ export default function App() {
         <Text style={styles.statusText}>
           {connected ? 'Connected to debugger' : 'Waiting for debugger...'}
         </Text>
+        <Pressable 
+          onPress={() => setMode('chat-history')}
+          style={styles.modeButton}
+        >
+          <Text style={styles.modeButtonText}>💬 Chat Test</Text>
+        </Pressable>
       </View>
       <ScrollView 
         style={styles.content} 
@@ -102,9 +104,14 @@ export default function App() {
             {content}
           </StreamdownRN>
         ) : (
-          <Text style={styles.placeholder}>
-            Waiting for content from web debugger...
-          </Text>
+          <View style={styles.placeholderContainer}>
+            <Text style={styles.placeholder}>
+              Waiting for content from web debugger...
+            </Text>
+            <Text style={styles.hint}>
+              Or tap "💬 Chat Test" above to test chat history rendering
+            </Text>
+          </View>
         )}
       </ScrollView>
     </View>
@@ -135,19 +142,40 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.connected,
   },
   statusText: {
+    flex: 1,
     color: theme.colors.text,
     fontSize: 14,
   },
+  modeButton: {
+    backgroundColor: '#2a2a2a',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  modeButtonText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '500',
+  },
   content: {
     flex: 1,
   },
   contentContainer: {
     padding: 16,
   },
+  placeholderContainer: {
+    alignItems: 'center',
+    marginTop: 40,
+    gap: 12,
+  },
   placeholder: {
     color: theme.colors.placeholder,
     fontSize: 16,
     textAlign: 'center',
-    marginTop: 40,
+  },
+  hint: {
+    color: theme.colors.text,
+    fontSize: 14,
+    textAlign: 'center',
   },
 }));
diff --git a/apps/debugger-ios/src/index.js b/apps/debugger-ios/src/index.js
index eefb082..678d5a8 100644
--- a/apps/debugger-ios/src/index.js
+++ b/apps/debugger-ios/src/index.js
@@ -1,3 +1,4 @@
+import './unistyles.config'; // Must be first - configures Unistyles before any StyleSheet.create()
 import { registerRootComponent } from 'expo';
 import App from './App';
 
diff --git a/apps/debugger-ios/src/screens/ChatHistoryTest.tsx b/apps/debugger-ios/src/screens/ChatHistoryTest.tsx
new file mode 100644
index 0000000..7687037
--- /dev/null
+++ b/apps/debugger-ios/src/screens/ChatHistoryTest.tsx
@@ -0,0 +1,574 @@
+import { useState, useCallback } from 'react';
+import { View, Text, Pressable, TextInput } from 'react-native';
+import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
+import { LegendList } from '@legendapp/list';
+import { StreamdownRN } from 'streamdown-rn';
+import { debugComponentRegistry } from '@darkresearch/debug-components';
+
+type Message = {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  isStreaming?: boolean;
+};
+
+// Pre-populated chat history (simulating loading from database)
+const INITIAL_MESSAGES: Message[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'What is React Native?',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: `### React Native
+
+React Native is a **framework** for building native mobile apps using JavaScript and React.
+
+**Key Features:**
+- Cross-platform development
+- Native performance
+- Large ecosystem
+- Hot reloading
+
+It was created by Facebook and is now used by companies like:
+- Instagram
+- Airbnb
+- Discord
+- Shopify`,
+  },
+  {
+    id: '3',
+    role: 'user',
+    content: 'How does it compare to Flutter?',
+  },
+  {
+    id: '4',
+    role: 'assistant',
+    content: `### React Native vs Flutter
+
+**When to choose React Native:**
+- You have JavaScript/React experience
+- You need to share code with web
+- You want native look and feel
+
+**When to choose Flutter:**
+- You want pixel-perfect UI control
+- Performance is critical
+- You're starting fresh
+`,
+  },
+  {
+    id: '5',
+    role: 'user',
+    content: 'Can you show me a code example?',
+  },
+  {
+    id: '6',
+    role: 'assistant',
+    content: `### Simple React Native Component
+
+Here's a basic example:
+
+\`\`\`typescript
+import { View, Text, StyleSheet } from 'react-native';
+
+export function Greeting({ name }: { name: string }) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        Hello, {name}!
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+\`\`\`
+
+This creates a simple greeting component with styling!`,
+  },
+  {
+    id: '7',
+    role: 'user',
+    content: 'What about state management?',
+  },
+  {
+    id: '8',
+    role: 'assistant',
+    content: `### State Management in React Native
+
+There are several popular options:
+
+**Built-in:**
+- \`useState\` - Simple local state
+- \`useReducer\` - Complex local state
+- \`Context API\` - Prop drilling solution
+
+**Third-party libraries:**
+
+1. **Redux** - The classic choice
+   - Predictable state
+   - Great devtools
+   - Large ecosystem
+
+2. **Zustand** - Modern and simple
+   - Minimal boilerplate
+   - TypeScript friendly
+   - Small bundle size
+
+3. **Legend State** - High performance
+   - Fine-grained reactivity
+   - Persistence built-in
+   - Great for large apps
+
+4. **Jotai** - Atomic approach
+   - Bottom-up state
+   - Minimal API
+   - Good for React devs`,
+  },
+  {
+    id: '9',
+    role: 'user',
+    content: 'Tell me about navigation',
+  },
+  {
+    id: '10',
+    role: 'assistant',
+    content: `### Navigation in React Native
+
+The most popular solution is **React Navigation**.
+
+**Installation:**
+\`\`\`bash
+npm install @react-navigation/native
+npm install @react-navigation/stack
+\`\`\`
+
+**Navigator Types:**
+
+- **Stack Navigator** - Screen stacking
+- **Tab Navigator** - Bottom/top tabs
+- **Drawer Navigator** - Side menu
+- **Native Stack** - Native animations
+
+**Example Setup:**
+
+\`\`\`typescript
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const Stack = createStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+\`\`\``,
+  },
+  // Add more messages to test scrolling with many items
+  {
+    id: '11',
+    role: 'user',
+    content: 'What about animations?',
+  },
+  {
+    id: '12',
+    role: 'assistant',
+    content: `### Animations in React Native
+
+**Options:**
+
+1. **Animated API** (Built-in)
+   - Good for simple animations
+   - JS-driven
+
+2. **Reanimated** (Recommended)
+   - Runs on UI thread
+   - 60fps performance
+   - Gesture handling
+
+**Example with Reanimated:**
+
+\`\`\`typescript
+import Animated, { 
+  useSharedValue, 
+  withSpring 
+} from 'react-native-reanimated';
+
+function AnimatedBox() {
+  const offset = useSharedValue(0);
+  
+  return (
+    <Animated.View 
+      style={{ transform: [{ translateX: offset }] }}
+    />
+  );
+}
+\`\`\``,
+  },
+  {
+    id: '13',
+    role: 'user',
+    content: 'How do I handle forms?',
+  },
+  {
+    id: '14',
+    role: 'assistant',
+    content: `### Form Handling in React Native
+
+**Libraries:**
+- \`react-hook-form\` - Best performance
+- \`formik\` - Popular, feature-rich
+- \`react-native-form-validator\` - Simple validation
+
+**react-hook-form Example:**
+
+\`\`\`typescript
+import { useForm, Controller } from 'react-hook-form';
+import { TextInput, Button } from 'react-native';
+
+function LoginForm() {
+  const { control, handleSubmit } = useForm();
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="email"
+        render={({ field: { onChange, value } }) => (
+          <TextInput
+            placeholder="Email"
+            onChangeText={onChange}
+            value={value}
+          />
+        )}
+      />
+      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
+    </>
+  );
+}
+\`\`\`
+
+**Validation** is built-in with rules prop!`,
+  },
+  {
+    id: '15',
+    role: 'user', 
+    content: 'What testing tools are available?',
+  },
+  {
+    id: '16',
+    role: 'assistant',
+    content: `### Testing React Native Apps
+
+**Unit Testing:**
+- Jest (included by default)
+- React Native Testing Library
+
+**E2E Testing:**
+- Detox (by Wix)
+- Maestro (newer, simpler)
+- Appium (cross-platform)
+
+**Example Test:**
+
+\`\`\`typescript
+import { render, fireEvent } from '@testing-library/react-native';
+import { Counter } from './Counter';
+
+test('increments counter', () => {
+  const { getByText } = render(<Counter />);
+  
+  const button = getByText('Increment');
+  fireEvent.press(button);
+  
+  expect(getByText('Count: 1')).toBeTruthy();
+});
+\`\`\`
+
+> **Tip:** Use \`jest.mock()\` for native modules!`,
+  },
+];
+
+// Streaming demo content
+const STREAMING_RESPONSE = `### Great question!
+
+Here's what I think about that:
+
+**Key Points:**
+- First, consider your use case
+- Then evaluate the trade-offs
+- Finally, prototype and test
+
+The most important thing is to **start building** and iterate from there. 
+
+Don't let analysis paralysis hold you back! 🚀`;
+
+export function ChatHistoryTest({ onBack }: { onBack: () => void }) {
+  const [messages, setMessages] = useState<Message[]>(INITIAL_MESSAGES);
+  const [inputText, setInputText] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  const addUserMessage = useCallback(() => {
+    if (!inputText.trim() || isStreaming) return;
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputText.trim(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInputText('');
+
+    // Simulate assistant response with streaming
+    setTimeout(() => {
+      simulateStreaming();
+    }, 500);
+  }, [inputText, isStreaming]);
+
+  const simulateStreaming = useCallback(() => {
+    const assistantId = (Date.now() + 1).toString();
+    let currentIndex = 0;
+
+    setIsStreaming(true);
+
+    // Add empty assistant message
+    setMessages((prev) => [
+      ...prev,
+      { id: assistantId, role: 'assistant', content: '', isStreaming: true },
+    ]);
+
+    // Stream characters
+    const interval = setInterval(() => {
+      currentIndex++;
+      const currentContent = STREAMING_RESPONSE.slice(0, currentIndex);
+
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantId
+            ? { ...m, content: currentContent, isStreaming: currentIndex < STREAMING_RESPONSE.length }
+            : m
+        )
+      );
+
+      if (currentIndex >= STREAMING_RESPONSE.length) {
+        clearInterval(interval);
+        setIsStreaming(false);
+      }
+    }, 15); // 15ms per character for smooth streaming
+  }, []);
+
+  const renderMessage = useCallback(
+    ({ item }: { item: Message }) => {
+      const isUser = item.role === 'user';
+
+      return (
+        <View
+          style={[
+            styles.messageContainer,
+            isUser ? styles.userMessage : styles.assistantMessage,
+          ]}
+        >
+          { /* Test role label */}
+          {/* <View style={styles.roleLabel}>
+            <Text style={styles.roleLabelText}>
+              {isUser ? '👤 You' : '🤖 Assistant'}
+            </Text>
+          </View> */}
+          {isUser ? (
+            <Text style={styles.userText}>{item.content}</Text>
+          ) : (
+            <StreamdownRN componentRegistry={debugComponentRegistry}>
+              {item.content}
+              {/* "Hello, world!" */}
+            </StreamdownRN>
+          )}
+          {item.isStreaming && (
+            <Text style={styles.streamingIndicator}>●</Text>
+          )}
+        </View>
+      );
+    },
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Pressable onPress={onBack} style={styles.backButton}>
+          <Text style={styles.backButtonText}>← Back</Text>
+        </Pressable>
+        <Text style={styles.headerTitle}>Chat History Test</Text>
+        <Text style={styles.messageCount}>{messages.length} msgs</Text>
+      </View>
+
+      {/* Chat List */}
+      <LegendList
+        data={messages}
+        keyExtractor={(item) => item.id}
+        renderItem={renderMessage}
+        alignItemsAtEnd
+        maintainScrollAtEnd
+        maintainVisibleContentPosition
+        recycleItems={false}
+        contentContainerStyle={styles.listContent}
+        style={styles.list}
+      />
+
+      {/* Input Area */}
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          placeholder="Type a message..."
+          placeholderTextColor="#666"
+          value={inputText}
+          onChangeText={setInputText}
+          onSubmitEditing={addUserMessage}
+          editable={!isStreaming}
+        />
+        <Pressable
+          onPress={addUserMessage}
+          style={[styles.sendButton, isStreaming && styles.sendButtonDisabled]}
+          disabled={isStreaming}
+        >
+          <Text style={styles.sendButtonText}>
+            {isStreaming ? '...' : 'Send'}
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.bg,
+    paddingTop: UnistylesRuntime.insets.top,
+    paddingBottom: UnistylesRuntime.insets.bottom,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    backgroundColor: theme.colors.statusBg,
+  },
+  backButton: {
+    paddingRight: 12,
+  },
+  backButtonText: {
+    color: '#4ade80',
+    fontSize: 16,
+  },
+  headerTitle: {
+    flex: 1,
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  messageCount: {
+    color: theme.colors.text,
+    fontSize: 12,
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    padding: 12,
+    gap: 12,
+  },
+  messageContainer: {
+    padding: 12,
+    borderRadius: 12,
+    width: '90%',
+    flexShrink: 0,
+  },
+  userMessage: {
+    backgroundColor: '#1e3a5f',
+    alignSelf: 'flex-end',
+    marginLeft: '10%',
+  },
+  assistantMessage: {
+    backgroundColor: '#2a2a2a',
+    alignSelf: 'flex-start',
+    marginRight: '10%',
+  },
+  roleLabel: {
+    marginBottom: 6,
+  },
+  roleLabelText: {
+    fontSize: 11,
+    color: '#888',
+    fontWeight: '500',
+  },
+  userText: {
+    color: '#fff',
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  streamingIndicator: {
+    color: '#4ade80',
+    fontSize: 10,
+    marginTop: 4,
+    animationDuration: '1s',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    padding: 12,
+    gap: 8,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+    backgroundColor: theme.colors.statusBg,
+  },
+  input: {
+    flex: 1,
+    backgroundColor: '#2a2a2a',
+    borderRadius: 20,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    color: '#fff',
+    fontSize: 15,
+  },
+  sendButton: {
+    backgroundColor: '#4ade80',
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    justifyContent: 'center',
+  },
+  sendButtonDisabled: {
+    backgroundColor: '#333',
+  },
+  sendButtonText: {
+    color: '#000',
+    fontWeight: '600',
+    fontSize: 15,
+  },
+}));
+
diff --git a/apps/debugger-ios/src/unistyles.config.ts b/apps/debugger-ios/src/unistyles.config.ts
new file mode 100644
index 0000000..9cffc1c
--- /dev/null
+++ b/apps/debugger-ios/src/unistyles.config.ts
@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+// Configure Unistyles theme - must run before any StyleSheet.create()
+// This file is imported at the entry point (index.js) to ensure proper initialization order
+StyleSheet.configure({
+  themes: {
+    dark: {
+      colors: {
+        bg: '#1a1a1a',
+        statusBg: '#141414',
+        border: '#333',
+        text: '#888',
+        placeholder: '#666',
+        connected: '#4ade80',
+      },
+    },
+  },
+  settings: {
+    initialTheme: 'dark',
+  },
+});
+
diff --git a/bun.lock b/bun.lock
index 112b8c5..bea1108 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,7 +13,7 @@
     },
     "apps/debugger": {
       "name": "@darkresearch/debugger",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@darkresearch/debug-components": "workspace:*",
@@ -48,12 +48,13 @@
     },
     "apps/debugger-ios": {
       "name": "@darkresearch/debugger-ios",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@darkresearch/debug-components": "workspace:*",
         "@expo-google-fonts/geist": "^0.4.1",
         "@expo/metro-runtime": "~6.1.2",
+        "@legendapp/list": "^2.0.16",
         "@react-native-vector-icons/lucide": "^12.4.0",
         "@react-native/assets-registry": "^0.81.5",
         "expo": "~54.0.25",
@@ -83,7 +84,7 @@
     },
     "apps/starter": {
       "name": "@darkresearch/starter",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@expo-google-fonts/geist": "^0.4.1",
@@ -115,7 +116,7 @@
     },
     "packages/debug-components": {
       "name": "@darkresearch/debug-components",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "devDependencies": {
         "@types/react": "^19.0.0",
         "typescript": "~5.9.3",
@@ -128,7 +129,7 @@
     },
     "packages/galerie-rn": {
       "name": "galerie-rn",
-      "version": "0.0.2",
+      "version": "0.2.0",
       "devDependencies": {
         "@types/react": "~19.0.0",
         "@types/react-native": "^0.73.0",
@@ -143,7 +144,7 @@
     },
     "packages/streamdown-rn": {
       "name": "streamdown-rn",
-      "version": "0.1.6",
+      "version": "0.2.0",
       "dependencies": {
         "prismjs": "^1.29.0",
         "react-native-syntax-highlighter": "^2.1.0",
@@ -577,6 +578,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@legendapp/list": ["@legendapp/list@2.0.16", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-pFdeR0wpxCdpfHoHp5ghWBET/9vDxrG9curw+7xMoC8kHFogpn1TYJFwPV4xXrq9sLLA4MiwBPLQCvjHS5ruag=="],
+
     "@manypkg/find-root": ["@manypkg/find-root@1.1.0", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@types/node": "^12.7.1", "find-up": "^4.1.0", "fs-extra": "^8.1.0" } }, "sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA=="],
 
     "@manypkg/get-packages": ["@manypkg/get-packages@1.1.3", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@changesets/types": "^4.0.1", "@manypkg/find-root": "^1.1.0", "fs-extra": "^8.1.0", "globby": "^11.0.0", "read-yaml-file": "^1.1.0" } }, "sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A=="],
diff --git a/packages/streamdown-rn/src/StreamdownRN.tsx b/packages/streamdown-rn/src/StreamdownRN.tsx
index 8e00021..8d939c3 100644
--- a/packages/streamdown-rn/src/StreamdownRN.tsx
+++ b/packages/streamdown-rn/src/StreamdownRN.tsx
@@ -178,4 +178,3 @@ export const StreamdownRN: React.FC<StreamdownRNProps> = React.memo(({
 StreamdownRN.displayName = 'StreamdownRN';
 
 export default StreamdownRN;
-