Add editable system prompt feature for paid users

frontend/src/components/ChatBox.tsx

@@ -1,4 +1,4 @@
-import { Blend, CornerRightUp } from "lucide-react";
+import { Blend, CornerRightUp, Bot } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { useEffect, useRef, useState } from "react";
@@ -116,14 +116,16 @@ export default function Component({
   onCompress,
   isSummarizing = false
 }: {
-  onSubmit: (input: string) => void;
+  onSubmit: (input: string, systemPrompt?: string) => void;
   startTall?: boolean;
   messages?: ChatMessage[];
   isStreaming?: boolean;
   onCompress?: () => void;
   isSummarizing?: boolean;
 }) {
   const [inputValue, setInputValue] = useState("");
+  const [systemPromptValue, setSystemPromptValue] = useState("");
+  const [isSystemPromptExpanded, setIsSystemPromptExpanded] = useState(false);
   const {
     model,
     billingStatus,
@@ -134,6 +136,7 @@ export default function Component({
   } = useLocalState();
   const [isFocused, setIsFocused] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const systemPromptRef = useRef<HTMLTextAreaElement>(null);
   const lastDraftRef = useRef<string>("");
   const previousChatIdRef = useRef<string | undefined>(undefined);
   const currentInputRef = useRef<string>("");
@@ -157,23 +160,32 @@ export default function Component({
   // Use the centralized hook for mobile detection directly
   const isMobile = useIsMobile();
 
+  // Check if user can use system prompts (paid users only - exclude free plans)
+  const canUseSystemPrompt =
+    freshBillingStatus && !freshBillingStatus.product_name?.toLowerCase().includes("free");
+
+  // Check if system prompt can be edited (only for new chats)
+  const canEditSystemPrompt = canUseSystemPrompt && messages.length === 0;
+
   const handleSubmit = (e?: React.FormEvent) => {
     e?.preventDefault();
     if (!inputValue.trim() || isSubmitDisabled) return;
 
-    // Clear the draft when submitting
+    // Clear the drafts when submitting
     if (chatId) {
       try {
         clearDraftMessage(chatId);
         lastDraftRef.current = "";
         currentInputRef.current = "";
       } catch (error) {
-        console.error("Failed to clear draft message:", error);
+        console.error("Failed to clear draft messages:", error);
         // Continue with submission even if draft clearing fails
       }
     }
 
-    onSubmit(inputValue.trim());
+    // Only pass system prompt if this is the first message
+    const isFirstMessage = messages.length === 0;
+    onSubmit(inputValue.trim(), isFirstMessage ? systemPromptValue.trim() || undefined : undefined);
     setInputValue("");
 
     // Re-focus input after submitting
@@ -189,9 +201,11 @@ export default function Component({
 
   // Handle draft loading and saving only on chat switches
   useEffect(() => {
-    // 1. Save draft from previous chat before switching
+    // 1. Save drafts from previous chat before switching
     if (previousChatIdRef.current && previousChatIdRef.current !== chatId) {
       const oldChatId = previousChatIdRef.current;
+
+      // Save message draft
       const currentInput = currentInputRef.current.trim();
       if (currentInput !== "") {
         setDraftMessage(oldChatId, currentInput);
@@ -200,24 +214,30 @@ export default function Component({
       }
     }
 
-    // 2. Load draft for new chat
+    // 2. Load drafts for new chat
     if (chatId) {
       try {
+        // Load message draft
         const draft = draftMessages.get(chatId) || "";
         setInputValue(draft);
         lastDraftRef.current = draft;
         currentInputRef.current = draft;
+
+        // Reset system prompt for new chat
+        setSystemPromptValue("");
+        setIsSystemPromptExpanded(false);
       } catch (error) {
-        console.error("Failed to load draft message:", error);
+        console.error("Failed to load draft messages:", error);
         setInputValue("");
+        setSystemPromptValue("");
         lastDraftRef.current = "";
         currentInputRef.current = "";
       }
     }
 
     // Update previous chat id reference
     previousChatIdRef.current = chatId;
-  }, [chatId, draftMessages, setDraftMessage, clearDraftMessage]);
+  }, [chatId, draftMessages, setDraftMessage, clearDraftMessage, canEditSystemPrompt, messages]);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter") {
@@ -236,14 +256,22 @@ export default function Component({
     }
   };
 
-  // Auto-resize effect
+  // Auto-resize effect for main input
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.style.height = "auto";
       inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
     }
   }, [inputValue]);
 
+  // Auto-resize effect for system prompt
+  useEffect(() => {
+    if (systemPromptRef.current) {
+      systemPromptRef.current.style.height = "auto";
+      systemPromptRef.current.style.height = `${systemPromptRef.current.scrollHeight}px`;
+    }
+  }, [systemPromptValue]);
+
   // Determine when the submit button should be disabled
   const isSubmitDisabled =
     (freshBillingStatus !== undefined &&
@@ -299,6 +327,44 @@ export default function Component({
         onCompress={onCompress}
         isCompressing={isSummarizing}
       />
+
+      {/* Simple System Prompt Section - just a gear button and input when expanded */}
+      {canEditSystemPrompt && (
+        <div className="mb-2">
+          <div className="flex items-center gap-2 mb-1">
+            <button
+              type="button"
+              onClick={() => setIsSystemPromptExpanded(!isSystemPromptExpanded)}
+              className="flex items-center gap-1.5 text-xs font-medium transition-colors text-muted-foreground hover:text-foreground cursor-pointer"
+              title="System Prompt"
+            >
+              <Bot className="size-6" />
+              {systemPromptValue.trim() && (
+                <div className="size-2 bg-primary rounded-full" title="System prompt active" />
+              )}
+            </button>
+          </div>
+
+          {isSystemPromptExpanded && (
+            <textarea
+              ref={systemPromptRef}
+              value={systemPromptValue}
+              onChange={(e) => setSystemPromptValue(e.target.value)}
+              placeholder="Enter instructions for the AI (e.g., 'You are a helpful coding assistant...')"
+              rows={2}
+              className="w-full p-2 text-sm border border-muted-foreground/20 rounded-md bg-muted/50 placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring resize-none transition-colors"
+              style={{
+                height: "auto",
+                resize: "none",
+                overflowY: "auto",
+                maxHeight: "8rem",
+                minHeight: "3rem"
+              }}
+            />
+          )}
+        </div>
+      )}
+
       <form
         className={cn(
           "p-2 rounded-lg border border-primary bg-background/80 backdrop-blur-lg focus-within:ring-1 focus-within:ring-ring",

frontend/src/routes/_auth.chat.$chatId.tsx

@@ -9,7 +9,6 @@ import { ChatMessage, Chat } from "@/state/LocalStateContext";
 import { AlertDestructive } from "@/components/AlertDestructive";
 import { Sidebar, SidebarToggle } from "@/components/Sidebar";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { InfoPopover } from "@/components/InfoPopover";
 import { Button } from "@/components/ui/button";
 import { BillingStatus } from "@/billing/billingApi";
 import { useNavigate } from "@tanstack/react-router";
@@ -71,7 +70,16 @@ function SystemMessage({ text, loading }: { text: string; loading?: boolean }) {
 
 function ChatComponent() {
   const { chatId } = Route.useParams();
-  const { model, persistChat, getChatById, userPrompt, setUserPrompt, addChat } = useLocalState();
+  const {
+    model,
+    persistChat,
+    getChatById,
+    userPrompt,
+    setUserPrompt,
+    systemPrompt,
+    setSystemPrompt,
+    addChat
+  } = useLocalState();
   const openai = useOpenAI();
   const queryClient = useQueryClient();
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -154,15 +162,26 @@ function ChatComponent() {
       }
       if (queryChat.messages.length === 0) {
         console.warn("Chat has no messages, using user prompt");
-        const messages = userPrompt
-          ? ([{ role: "user", content: userPrompt }] as ChatMessage[])
-          : [];
+
+        // Build messages array with system prompt first (if exists), then user prompt
+        const messages: ChatMessage[] = [];
+
+        // Check for system prompt from LocalState
+        if (systemPrompt?.trim()) {
+          messages.push({ role: "system", content: systemPrompt.trim() } as ChatMessage);
+        }
+
+        // Add user prompt if exists
+        if (userPrompt) {
+          messages.push({ role: "user", content: userPrompt } as ChatMessage);
+        }
+
         setLocalChat((localChat) => ({ ...localChat, messages }));
         return;
       }
       setLocalChat(queryChat);
     }
-    // I don't want to re-run this effect if the user prompt changes
+    // I don't want to re-run this effect if the user prompt or system prompt changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [queryChat, chatId, isPending]);
 
@@ -181,7 +200,7 @@ function ChatComponent() {
 
       // Set a small delay to ensure all state is properly initialized
       setTimeout(() => {
-        sendMessage(userPrompt);
+        sendMessage(userPrompt, systemPrompt || undefined);
       }, 100);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -190,7 +209,7 @@ function ChatComponent() {
   const [isLoading, setIsLoading] = useState(false);
 
   const sendMessage = useCallback(
-    async (input: string) => {
+    async (input: string, systemPrompt?: string) => {
       // Helper function to check if the user is on a free plan
       function isUserOnFreePlan(): boolean {
         try {
@@ -274,7 +293,19 @@ function ChatComponent() {
       if (!input.trim() || !localChat) return;
       setError("");
 
-      const newMessages = [...localChat.messages, { role: "user", content: input } as ChatMessage];
+      // Build new messages array with system prompt if this is the first message
+      let newMessages: ChatMessage[];
+
+      if (localChat.messages.length === 0 && systemPrompt?.trim()) {
+        // First message: add system prompt, then user message
+        newMessages = [
+          { role: "system", content: systemPrompt.trim() } as ChatMessage,
+          { role: "user", content: input } as ChatMessage
+        ];
+      } else {
+        // Subsequent messages: just add user message
+        newMessages = [...localChat.messages, { role: "user", content: input } as ChatMessage];
+      }
 
       setLocalChat((prev) => ({
         ...prev,
@@ -328,6 +359,8 @@ function ChatComponent() {
         }
 
         // Stream the chat response (happens in parallel with title generation)
+        // newMessages already contains system prompt if it was the first message
+
         const stream = openai.beta.chat.completions.stream({
           model,
           messages: newMessages,
@@ -387,8 +420,9 @@ function ChatComponent() {
         const chatCompletion = await stream.finalChatCompletion();
         console.log(chatCompletion);
 
-        // Should be safe to clear this by now
+        // Should be safe to clear these by now
         setUserPrompt("");
+        setSystemPrompt(null);
 
         // React sucks and doesn't get the latest state
         // Use current title from localChat which may have been updated asynchronously
@@ -428,7 +462,7 @@ function ChatComponent() {
     // We intentionally don't include freshBillingStatus in the dependency array
     // even though it's used in the closure to avoid re-creating the function
     // on every billing status change
-    [localChat, model, openai, persistChat, queryClient, setUserPrompt, chatId]
+    [localChat, model, openai, persistChat, queryClient, setUserPrompt, setSystemPrompt, chatId]
   );
 
   // Chat compression function
@@ -544,23 +578,25 @@ END OF INSTRUCTIONS`;
           ref={chatContainerRef}
           className="flex-1 min-h-0 overflow-y-auto flex flex-col relative"
         >
-          <InfoPopover />
           <div className="mt-4 md:mt-8 w-full h-10 flex items-center justify-center">
             <h2 className="text-lg font-semibold self-center truncate max-w-[20rem] mx-[6rem] py-2">
               {localChat.title}
             </h2>
           </div>
           <div className="flex flex-col w-full max-w-[45rem] mx-auto gap-4 px-2 pt-4">
-            {localChat.messages?.map((message, index) => (
-              <div
-                key={index}
-                id={`message-${message.role}-${index}`}
-                className="flex flex-col gap-2"
-              >
-                {message.role === "user" && <UserMessage text={message.content} />}
-                {message.role === "assistant" && <SystemMessage text={message.content} />}
-              </div>
-            ))}
+            {/* Show user and assistant messages, excluding system messages */}
+            {localChat.messages
+              ?.filter((message) => message.role !== "system")
+              .map((message, index) => (
+                <div
+                  key={index}
+                  id={`message-${message.role}-${index}`}
+                  className="flex flex-col gap-2"
+                >
+                  {message.role === "user" && <UserMessage text={message.content} />}
+                  {message.role === "assistant" && <SystemMessage text={message.content} />}
+                </div>
+              ))}
             {(currentStreamingMessage || isLoading) && (
               <div className="flex flex-col gap-2">
                 <SystemMessage text={currentStreamingMessage || ""} loading={isLoading} />

frontend/src/routes/index.tsx

@@ -64,9 +64,10 @@ function Index() {
 
   const toggleSidebar = useCallback(() => setIsSidebarOpen((prev) => !prev), []);
 
-  async function handleSubmit(input: string) {
+  async function handleSubmit(input: string, systemPrompt?: string) {
     if (input.trim() === "") return;
     localState.setUserPrompt(input.trim());
+    localState.setSystemPrompt(systemPrompt?.trim() || null);
     const id = await localState.addChat();
     navigate({ to: "/chat/$chatId", params: { chatId: id } });
   }

frontend/src/state/LocalStateContext.tsx

@@ -14,6 +14,7 @@ export {
 export const LocalStateProvider = ({ children }: { children: React.ReactNode }) => {
   const [localState, setLocalState] = useState({
     userPrompt: "",
+    systemPrompt: null as string | null,
     model:
       import.meta.env.VITE_DEV_MODEL_OVERRIDE || "ibnzterrell/Meta-Llama-3.3-70B-Instruct-AWQ-INT4",
     billingStatus: null as BillingStatus | null,
@@ -69,6 +70,10 @@ export const LocalStateProvider = ({ children }: { children: React.ReactNode })
     setLocalState((prev) => ({ ...prev, userPrompt: prompt }));
   }
 
+  function setSystemPrompt(prompt: string | null) {
+    setLocalState((prev) => ({ ...prev, systemPrompt: prompt }));
+  }
+
   function setBillingStatus(status: BillingStatus) {
     setLocalState((prev) => ({ ...prev, billingStatus: status }));
   }
@@ -221,13 +226,15 @@ export const LocalStateProvider = ({ children }: { children: React.ReactNode })
       value={{
         model: localState.model,
         userPrompt: localState.userPrompt,
+        systemPrompt: localState.systemPrompt,
         billingStatus: localState.billingStatus,
         searchQuery: localState.searchQuery,
         setSearchQuery,
         isSearchVisible: localState.isSearchVisible,
         setIsSearchVisible,
         setBillingStatus,
         setUserPrompt,
+        setSystemPrompt,
         addChat,
         getChatById,
         persistChat,