feat(settings): add system instructions

src/app/settings/page.tsx

@@ -54,6 +54,38 @@ const Input = ({ className, isSaving, onSave, ...restProps }: InputProps) => {
   );
 };
 
+interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  isSaving?: boolean;
+  onSave?: (value: string) => void;
+}
+
+const Textarea = ({
+  className,
+  isSaving,
+  onSave,
+  ...restProps
+}: TextareaProps) => {
+  return (
+    <div className="relative">
+      <textarea
+        placeholder="Any special instructions for the LLM"
+        className="placeholder:text-sm text-sm w-full flex items-center justify-between p-3 bg-light-secondary dark:bg-dark-secondary rounded-lg hover:bg-light-200 dark:hover:bg-dark-200 transition-colors"
+        rows={4}
+        onBlur={(e) => onSave?.(e.target.value)}
+        {...restProps}
+      />
+      {isSaving && (
+        <div className="absolute right-3 top-3">
+          <Loader2
+            size={16}
+            className="animate-spin text-black/70 dark:text-white/70"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
 const Select = ({
   className,
   options,
@@ -111,6 +143,7 @@ const Page = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
   const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
+  const [systemInstructions, setSystemInstructions] = useState<string>('');
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
@@ -172,6 +205,8 @@ const Page = () => {
         localStorage.getItem('autoVideoSearch') === 'true',
       );
 
+      setSystemInstructions(localStorage.getItem('systemInstructions')!);
+
       setIsLoading(false);
     };
 
@@ -328,6 +363,8 @@ const Page = () => {
         localStorage.setItem('embeddingModelProvider', value);
       } else if (key === 'embeddingModel') {
         localStorage.setItem('embeddingModel', value);
+      } else if (key === 'systemInstructions') {
+        localStorage.setItem('systemInstructions', value);
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -473,6 +510,19 @@ const Page = () => {
               </div>
             </SettingsSection>
 
+            <SettingsSection title="System Instructions">
+              <div className="flex flex-col space-y-4">
+                <Textarea
+                  value={systemInstructions}
+                  isSaving={savingStates['systemInstructions']}
+                  onChange={(e) => {
+                    setSystemInstructions(e.target.value);
+                  }}
+                  onSave={(value) => saveConfig('systemInstructions', value)}
+                />
+              </div>
+            </SettingsSection>
+
             <SettingsSection title="Model Settings">
               {config.chatModelProviders && (
                 <div className="flex flex-col space-y-4">