feat: Add auto-scroll toggle for streaming messages (Issue #265)

src/i18n/locales/en-us.json

@@ -687,6 +687,10 @@
       },
       "dataAndSecurity": "Data & Security",
       "general": {
+        "auto_scroll": {
+          "description": "Automatically scroll to the bottom when receiving streamed responses",
+          "title": "Auto-scroll Messages"
+        },
         "developer_mode": {
           "title": "Developer Mode"
         },

src/i18n/locales/ja-jp.json

@@ -687,6 +687,10 @@
       },
       "dataAndSecurity": "データ & セキュリティ",
       "general": {
+        "auto_scroll": {
+          "description": "ストリーミング出力受信時に自動で最下部にスクロール",
+          "title": "メッセージ自動スクロール"
+        },
         "developer_mode": {
           "title": "開発者モード"
         },

src/i18n/locales/ru-ru.json

@@ -687,6 +687,10 @@
       },
       "dataAndSecurity": "Данные и безопасность",
       "general": {
+        "auto_scroll": {
+          "description": "Автоматически прокручивать вниз при получении потоковых ответов",
+          "title": "Автопрокрутка сообщений"
+        },
         "developer_mode": {
           "title": "Режим разработчика"
         },

src/i18n/locales/zh-cn.json

@@ -687,6 +687,10 @@
       },
       "dataAndSecurity": "数据与安全",
       "general": {
+        "auto_scroll": {
+          "description": "接收流式输出时自动滚动到底部",
+          "title": "自动滚动消息"
+        },
         "developer_mode": {
           "title": "开发者模式"
         },

src/i18n/locales/zh-tw.json

@@ -687,6 +687,10 @@
       },
       "dataAndSecurity": "資料與安全性",
       "general": {
+        "auto_scroll": {
+          "description": "接收串流輸出時自動滾動到底部",
+          "title": "自動滾動訊息"
+        },
         "developer_mode": {
           "title": "開發者模式"
         },

src/screens/home/messages/Messages.tsx

@@ -15,6 +15,7 @@ import { LiquidGlassButton } from '@/componentsV2/base/LiquidGlassButton'
 import { GradientBlurEdge } from '@/componentsV2/features/ChatScreen/GradientBlurEdge'
 import { ArrowDown } from '@/componentsV2/icons'
 import { useInitialScrollToEnd } from '@/hooks/chat/useInitialScrollToEnd'
+import { usePreference } from '@/hooks/usePreference'
 import { useTopicBlocks } from '@/hooks/useMessageBlocks'
 import { useMessages } from '@/hooks/useMessages'
 import { useTheme } from '@/hooks/useTheme'
@@ -38,6 +39,7 @@ const Messages: FC<MessagesProps> = ({ assistant, topic }) => {
   const { messages } = useMessages(topic.id)
   const { messageBlocks } = useTopicBlocks(topic.id)
   const { isDark } = useTheme()
+  const [autoScroll] = usePreference('chat.auto_scroll')
   const groupedMessages = Object.entries(getGroupedMessages(messages))
   const legendListRef = useRef<LegendListRef>(null)
   const [showScrollButton, setShowScrollButton] = useState(false)
@@ -144,7 +146,7 @@ const Messages: FC<MessagesProps> = ({ assistant, topic }) => {
         onScroll={handleScroll}
         scrollEventThrottle={16}
         recycleItems
-        maintainScrollAtEnd
+        maintainScrollAtEnd={autoScroll}
         maintainScrollAtEndThreshold={0.1}
         keyboardShouldPersistTaps="never"
         keyboardDismissMode="on-drag"

src/screens/settings/general/GeneralSettingsScreen.tsx

@@ -10,6 +10,7 @@ import { usePreference } from '@/hooks/usePreference'
 export default function GeneralSettingsScreen() {
   const { t } = useTranslation()
   const [developerMode, setDeveloperMode] = usePreference('app.developer_mode')
+  const [autoScroll, setAutoScroll] = usePreference('chat.auto_scroll')
 
   return (
     <SafeAreaContainer className="flex-1">
@@ -38,6 +39,22 @@ export default function GeneralSettingsScreen() {
             </Group>
           </YStack>
 
+          {/* Chat settings */}
+          <YStack className="gap-2">
+            <GroupTitle>{t('settings.general.auto_scroll.title')}</GroupTitle>
+            <Group>
+              <XStack className="items-center justify-between p-4">
+                <YStack className="flex-1 pr-4">
+                  <Text className="text-lg">{t('settings.general.auto_scroll.title')}</Text>
+                  <Text className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    {t('settings.general.auto_scroll.description')}
+                  </Text>
+                </YStack>
+                <Switch isSelected={autoScroll} onSelectedChange={setAutoScroll} />
+              </XStack>
+            </Group>
+          </YStack>
+
           {/* Developer settings */}
           <YStack className="gap-2">
             <GroupTitle>{t('settings.general.developer_mode.title')}</GroupTitle>

src/shared/data/preference/preferenceSchemas.ts

@@ -4,11 +4,12 @@
  * This file defines all user preferences and their default values.
  * Preferences are stored in the SQLite database and can be synchronized across devices.
  *
- * Total preference items: 10
+ * Total preference items: 11
  * - User configuration: 3
  * - UI configuration: 1
  * - Topic state: 1
  * - Web search configuration: 4
+ * - Chat configuration: 1
  * - App state: 2
  */
 
@@ -62,6 +63,12 @@ export const DefaultPreferences: PreferenceSchemas = {
     // undefined means no limit
     'websearch.content_limit': 2000,
 
+    // === Chat Configuration ===
+    // Whether to automatically scroll to the bottom when receiving streamed responses
+    // When enabled, the chat view will scroll to show new content as it arrives
+    // When disabled, users can scroll freely without being forced to the bottom
+    'chat.auto_scroll': true,
+
     // Current version of the app data initialization
     // Used to run incremental initialization migrations when new data is added
     'app.initialization_version': 0,
@@ -91,6 +98,7 @@ export const PreferenceDescriptions: Record<keyof PreferenceSchemas['default'],
   'websearch.max_results': 'Maximum number of search results (1-20)',
   'websearch.override_search_service': 'Use custom search service configuration',
   'websearch.content_limit': 'Content length limit for search results (characters)',
+  'chat.auto_scroll': 'Automatically scroll to bottom when receiving streamed responses',
   'app.initialization_version': 'Current version of app data initialization migrations',
   'app.dismissed_update_version': 'Version number that user chose to skip updating',
   'app.developer_mode': 'Enable developer mode for advanced features'

src/shared/data/preference/preferenceTypes.ts

@@ -30,6 +30,9 @@ export interface PreferenceSchemas {
     'websearch.override_search_service': boolean
     'websearch.content_limit': number | undefined
 
+    // Chat Configuration
+    'chat.auto_scroll': boolean
+
     // App State
     'app.initialization_version': number
     'app.dismissed_update_version': string