Feat: customizable system prompts (personal preferences) (#240)

## Description

### PR Objective
This Pull Request adds customizable system prompts to the chat: users
write global personal preferences (e.g., "be concise", "answer in
Polish", "avoid jargon") that silently shape every conversation — the
model follows them without ever quoting, acknowledging, or parroting
them back.

Resolves **#230**.

---

### What changed?

#### Custom System Prompt
* **Persisted setting** (`store/settingsStore.ts`): A global
`customSystemPrompt` stored via Zustand + persist on AsyncStorage.
* **Guard & injection** (`utils/promptUtils.ts`,
`constants/prompts.ts`): `CUSTOM_PROMPT_GUARD` is prepended to the
user's preference and appended to the system prompt during message
assembly (`store/llmStore.ts`). Empty/whitespace-only preferences are
skipped entirely — neither prompt nor guard is added.
* **Soft token budget** (`constants/settings.ts`): Character cap derived
from a ~256-token × ~4 chars/token approximation, so the preference
can't eat the on-device context — validated on the trimmed value.

#### Settings, Reworked
* **Settings is now a drawer screen** (`app/(drawer)/settings.tsx`,
`app/(drawer)/_layout.tsx`) — a proper destination like Models,
navigated via `replace`, instead of a full-screen modal.
* **Sub-pages as card-push screens** with `ios_from_right`
(`app/_layout.tsx`): The Personal preferences editor
(`app/(modals)/custom-system-prompt.tsx`) and App info.
* **App info moved out of the drawer** into Settings
(`components/drawer/DrawerMenu.tsx`), alongside Personal preferences via
a shared `SettingsRow` (`components/settings/SettingsRow.tsx`).
* **Drawer active-item logic fixed**: Drawer destinations use `replace`
+ path-equality highlighting; modal actions no longer show a stale
active state.

#### Input Error State
* **Animated border** (`components/TextInputBorder.tsx`): Crossfades
between inactive / active / error states via opacity (native driver),
with error taking precedence over active.
* **TextAreaField gains error state** (`components/TextAreaField.tsx`):
Added `error?: boolean` + `errorMessage?: string` props. Renders a red
border and an inline message only when set — no layout change otherwise.
The preferences editor uses it to flag the over-limit case.

#### Chore
* **Deprecation cleanup**: Replaced `StyleSheet.absoluteFillObject` (RN
0.83 `@deprecated`) with `StyleSheet.absoluteFill` across 4 components —
same frozen object, no behavior change.

Author: kfaracik

__tests__/DrawerMenu.test.tsx

@@ -96,12 +96,12 @@ beforeEach(() => {
 afterEach(() => setPlatform(ORIGINAL_OS));
 
 describe('DrawerMenu — collapsed', () => {
-  it('keeps New chat, Models and App Info at the top', () => {
+  it('keeps New chat, Models and Settings at the top', () => {
     renderMenu();
 
     expect(screen.getByText('New chat')).toBeTruthy();
     expect(screen.getByText('Models')).toBeTruthy();
-    expect(screen.getByText('App Info')).toBeTruthy();
+    expect(screen.getByText('Settings')).toBeTruthy();
   });
 
   it('renders the app name and a search button instead of a search field', () => {
@@ -225,15 +225,15 @@ describe('DrawerMenu — searching', () => {
 
     expect(screen.getByText('New chat')).toBeTruthy();
     expect(screen.getByText('Models')).toBeTruthy();
-    expect(screen.getByText('App Info')).toBeTruthy();
+    expect(screen.getByText('Settings')).toBeTruthy();
   });
 
   it('hides the navigation items once a query is typed, leaving only results', () => {
     renderMenu({ searching: true, search: 'pizza' });
 
     expect(screen.queryByText('New chat')).toBeNull();
     expect(screen.queryByText('Models')).toBeNull();
-    expect(screen.queryByText('App Info')).toBeNull();
+    expect(screen.queryByText('Settings')).toBeNull();
     expect(screen.getByText('Pizza recipe')).toBeTruthy();
   });
 

__tests__/llmStore.test.ts

@@ -3,6 +3,7 @@ import { LLMModule } from 'react-native-executorch';
 import * as chatRepository from '../database/chatRepository';
 import * as Feedback from '../utils/Feedback';
 import { prepareMessagesForLLM } from '../utils/promptUtils';
+import { useSettingsStore } from '../store/settingsStore';
 
 jest.mock('../database/chatRepository');
 jest.mock('../utils/Feedback', () => ({
@@ -75,6 +76,10 @@ beforeEach(() => {
     activeChatMessages: [],
   });
 
+  // Default: settings already hydrated, so the hydration barrier is a no-op
+  // for every test except the cold-start one below (which opts into false).
+  useSettingsStore.setState({ hasHydrated: true, customSystemPrompt: '' });
+
   jest.clearAllMocks();
   jest.spyOn(console, 'error').mockImplementation(() => {});
   jest.spyOn(console, 'warn').mockImplementation(() => {});
@@ -432,6 +437,60 @@ describe('sendChatMessage', () => {
   });
 });
 
+describe('sendChatMessage — settings hydration barrier', () => {
+  const settings = { systemPrompt: 'be helpful' };
+
+  beforeEach(async () => {
+    await loadModel();
+    mockPersistMessage.mockResolvedValue(42);
+    mockInstance.generate.mockResolvedValue('response');
+    useLLMStore.setState({
+      model: baseModel,
+      activeChatId: 1,
+      activeChatMessages: [],
+    });
+  });
+
+  it('does not read customSystemPrompt until settings have hydrated (cold-start race)', async () => {
+    useSettingsStore.setState({ hasHydrated: false, customSystemPrompt: '' });
+
+    const sendPromise = useLLMStore
+      .getState()
+      .sendChatMessage('hello', 1, [], settings);
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(prepareMessagesForLLM).not.toHaveBeenCalled();
+    expect(mockInstance.generate).not.toHaveBeenCalled();
+
+    useSettingsStore.setState({
+      hasHydrated: true,
+      customSystemPrompt: 'Always end replies with BANANA',
+    });
+
+    await sendPromise;
+
+    expect(prepareMessagesForLLM).toHaveBeenCalledTimes(1);
+    expect((prepareMessagesForLLM as jest.Mock).mock.calls[0][4]).toBe(
+      'Always end replies with BANANA'
+    );
+  });
+
+  it('reads customSystemPrompt immediately when settings are already hydrated', async () => {
+    useSettingsStore.setState({
+      hasHydrated: true,
+      customSystemPrompt: 'Be concise.',
+    });
+
+    await useLLMStore.getState().sendChatMessage('hi', 1, [], settings);
+
+    expect(prepareMessagesForLLM).toHaveBeenCalledTimes(1);
+    expect((prepareMessagesForLLM as jest.Mock).mock.calls[0][4]).toBe(
+      'Be concise.'
+    );
+  });
+});
+
 // ─── sendEventMessage ─────────────────────────────────────────────────────────
 
 describe('sendEventMessage', () => {

__tests__/promptUtils.test.ts

@@ -77,6 +77,83 @@ describe('prepareMessagesForLLM', () => {
     });
   });
 
+  describe('global custom system prompt', () => {
+    it('appends the global custom prompt to the base system prompt', () => {
+      const messages = makeMessages(2);
+      const result = prepareMessagesForLLM(
+        messages,
+        [],
+        baseSettings,
+        baseModel,
+        'Always answer in Polish.'
+      );
+      expect(result[0].content).toContain(baseSettings.systemPrompt);
+      expect(result[0].content).toContain('Always answer in Polish.');
+    });
+
+    it('frames the custom prompt as silent guidance so the model does not parrot it', () => {
+      const messages = makeMessages(2);
+      const result = prepareMessagesForLLM(
+        messages,
+        [],
+        baseSettings,
+        baseModel,
+        'Always answer in Polish.'
+      );
+      expect(result[0].content).toMatch(/silently/i);
+      expect(result[0].content).toMatch(/never mention/i);
+      expect(result[0].content.indexOf('silently')).toBeLessThan(
+        result[0].content.indexOf('Always answer in Polish.')
+      );
+    });
+
+    it('keeps the base prompt unchanged when the global prompt is empty or whitespace', () => {
+      const messages = makeMessages(2);
+      const emptyResult = prepareMessagesForLLM(
+        messages,
+        [],
+        baseSettings,
+        baseModel,
+        ''
+      );
+      const whitespaceResult = prepareMessagesForLLM(
+        messages,
+        [],
+        baseSettings,
+        baseModel,
+        '   \n  '
+      );
+      expect(emptyResult[0].content).toBe(baseSettings.systemPrompt);
+      expect(whitespaceResult[0].content).toBe(baseSettings.systemPrompt);
+    });
+
+    it('uses the global prompt alone when the base system prompt is empty', () => {
+      const messages = makeMessages(2);
+      const result = prepareMessagesForLLM(
+        messages,
+        [],
+        { ...baseSettings, systemPrompt: '' },
+        baseModel,
+        'Be concise.'
+      );
+      expect(result[0].content).toContain('Be concise.');
+    });
+
+    it('preserves the RAG grounding instructions alongside the global prompt', () => {
+      const messages = makeMessages(2);
+      const result = prepareMessagesForLLM(
+        messages,
+        ['some context'],
+        baseSettings,
+        baseModel,
+        'Always answer in Polish.'
+      );
+      expect(result[0].content).toContain('You are a helpful assistant.');
+      expect(result[0].content).toContain('Always answer in Polish.');
+      expect(result[0].content).toContain('IMPORTANT CONTEXT INFORMATION');
+    });
+  });
+
   describe('event message filtering', () => {
     it('strips event messages from the output', () => {
       // Last item is the empty assistant placeholder (as per llmStore contract)

__tests__/settingsStore.test.ts

@@ -0,0 +1,36 @@
+import { useSettingsStore } from '../store/settingsStore';
+import { MAX_CUSTOM_SYSTEM_PROMPT_LENGTH } from '../constants/settings';
+
+describe('useSettingsStore', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ customSystemPrompt: '' });
+  });
+
+  it('defaults to an empty custom system prompt', () => {
+    expect(useSettingsStore.getState().customSystemPrompt).toBe('');
+  });
+
+  it('stores a custom system prompt', () => {
+    useSettingsStore.getState().setCustomSystemPrompt('Be concise.');
+    expect(useSettingsStore.getState().customSystemPrompt).toBe('Be concise.');
+  });
+
+  it('trims surrounding whitespace', () => {
+    useSettingsStore.getState().setCustomSystemPrompt('  Be concise.  ');
+    expect(useSettingsStore.getState().customSystemPrompt).toBe('Be concise.');
+  });
+
+  it('clamps a prompt longer than the limit', () => {
+    const tooLong = 'a'.repeat(MAX_CUSTOM_SYSTEM_PROMPT_LENGTH + 50);
+    useSettingsStore.getState().setCustomSystemPrompt(tooLong);
+    expect(useSettingsStore.getState().customSystemPrompt).toHaveLength(
+      MAX_CUSTOM_SYSTEM_PROMPT_LENGTH
+    );
+  });
+
+  it('keeps a prompt at exactly the limit intact', () => {
+    const exact = 'a'.repeat(MAX_CUSTOM_SYSTEM_PROMPT_LENGTH);
+    useSettingsStore.getState().setCustomSystemPrompt(exact);
+    expect(useSettingsStore.getState().customSystemPrompt).toBe(exact);
+  });
+});

app/(drawer)/_layout.tsx

@@ -43,6 +43,12 @@ const DrawerLayout = () => {
           title: 'Models',
         }}
       />
+      <Drawer.Screen
+        name="settings"
+        options={{
+          title: 'Settings',
+        }}
+      />
       <Drawer.Screen
         name="benchmark"
         options={{

app/(drawer)/settings.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { useRouter } from 'expo-router';
+import useDefaultHeader from '../../hooks/useDefaultHeader';
+import { SettingsRow } from '../../components/settings/SettingsRow';
+import EditIcon from '../../assets/icons/edit.svg';
+import InfoCircleIcon from '../../assets/icons/info-circle.svg';
+import { useTheme } from '../../context/ThemeContext';
+import { Theme } from '../../styles/colors';
+
+const SettingsScreen = () => {
+  useDefaultHeader();
+  const router = useRouter();
+  const { theme } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <SettingsRow
+          label="Personal preferences"
+          icon={<EditIcon width={20} height={20} style={styles.rowIcon} />}
+          onPress={() => router.push('/custom-system-prompt')}
+        />
+        <SettingsRow
+          label="App info"
+          icon={
+            <InfoCircleIcon width={20} height={20} style={styles.rowIcon} />
+          }
+          onPress={() => router.push('/app-info')}
+        />
+      </ScrollView>
+    </View>
+  );
+};
+
+export default SettingsScreen;
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.bg.softPrimary,
+      paddingTop: 16,
+    },
+    scrollContent: {
+      gap: 8,
+      paddingHorizontal: 16,
+      paddingBottom: theme.insets.bottom + 16,
+    },
+    rowIcon: {
+      color: theme.text.primary,
+    },
+  });

app/(modals)/app-info.tsx

@@ -5,6 +5,7 @@ import {
   Text,
   TouchableOpacity,
   Linking,
+  Platform,
 } from 'react-native';
 import { useRouter } from 'expo-router';
 import * as Clipboard from 'expo-clipboard';
@@ -130,8 +131,20 @@ export default function AppInfoScreen() {
 
   return (
     <View style={[styles.screen, { backgroundColor: theme.bg.softPrimary }]}>
-      <View style={[styles.container, { paddingBottom: insets.bottom }]}>
-        <ModalHeader title="App info" onClose={() => router.back()} />
+      <View
+        style={[
+          styles.container,
+          {
+            paddingTop: Platform.OS === 'ios' ? insets.top : 16,
+            paddingBottom: insets.bottom,
+          },
+        ]}
+      >
+        <ModalHeader
+          title="App info"
+          leftIcon="back"
+          onClose={() => router.back()}
+        />
         <AppHeader />
         <LearnMoreSection />
         <VersionInfo />