From 7c5f139d90de2aa9da8f21cb339e29611597c107 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 05:58:15 +0000
Subject: [PATCH 1/4] feat: implement inline system message display with
 truncation and expand

- Add SystemPromptMessage component with Bot icon and "System Prompt" label
- Show truncated text (100 chars) with "..." and expand/collapse functionality
- Include copy button with same pattern as assistant messages (hover reveal)
- Remove system message filter to allow inline rendering
- System messages now appear naturally at top of chat
- Styled with muted background to distinguish from regular messages

Resolves #98

Co-authored-by: AnthonyRonning <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/routes/_auth.chat.$chatId.tsx | 88 +++++++++++++++++-----
 1 file changed, 70 insertions(+), 18 deletions(-)

diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index c30799001..04b4637eb 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { createFileRoute } from "@tanstack/react-router";
-import { AsteriskIcon, Check, Copy, UserIcon, ChevronDown, SquarePenIcon } from "lucide-react";
+import { AsteriskIcon, Check, Copy, UserIcon, ChevronDown, Bot, ChevronRight, SquarePenIcon } from "lucide-react";
 import ChatBox from "@/components/ChatBox";
 import { useOpenAI } from "@/ai/useOpenAi";
 import { useLocalState } from "@/state/useLocalState";
@@ -78,6 +78,63 @@ function SystemMessage({
   );
 }
 
+function SystemPromptMessage({ text }: { text: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (error) {
+      console.error("Failed to copy text: ", error);
+    }
+  }, [text]);
+
+  const truncatedText = text.length > 100 ? text.slice(0, 100) + "..." : text;
+
+  return (
+    <div className="group flex flex-col p-4 rounded-lg bg-muted/50">
+      <div className="rounded-lg flex flex-col md:flex-row gap-4">
+        <div>
+          <Bot className="h-5 w-5 text-muted-foreground" />
+        </div>
+        <div className="flex flex-col gap-2 w-full">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-muted-foreground">System Prompt</span>
+          </div>
+          <div className="text-sm text-foreground">{isExpanded ? text : truncatedText}</div>
+          <div className="flex items-center gap-2">
+            {text.length > 100 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="self-start -mx-2 text-xs h-auto p-1 text-primary hover:text-primary/80"
+                onClick={() => setIsExpanded(!isExpanded)}
+              >
+                <ChevronRight
+                  className={`h-3 w-3 mr-1 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+                />
+                {isExpanded ? "Show less" : "Show more"}
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="self-start -mx-2 group-hover:opacity-100 opacity-0 transition-opacity h-auto p-1"
+              onClick={handleCopy}
+              aria-label={isCopied ? "Copied" : "Copy to clipboard"}
+            >
+              {isCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ChatComponent() {
   const { chatId } = Route.useParams();
   const {
@@ -640,23 +697,18 @@ END OF INSTRUCTIONS`;
             </h2>
           </div>
           <div className="flex flex-col w-full max-w-[45rem] mx-auto gap-4 px-2 pt-4">
-            {/* 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} chatId={chatId} />
-                  )}
-                  {message.role === "assistant" && (
-                    <SystemMessage text={message.content} chatId={chatId} />
-                  )}
-                </div>
-              ))}
+            {/* Show all messages including system messages */}
+            {localChat.messages?.map((message, index) => (
+              <div
+                key={index}
+                id={`message-${message.role}-${index}`}
+                className="flex flex-col gap-2"
+              >
+                {message.role === "system" && <SystemPromptMessage text={message.content} />}
+                {message.role === "user" && <UserMessage text={message.content} chatId={chatId} />}
+                {message.role === "assistant" && <SystemMessage text={message.content} chatId={chatId} />}
+              </div>
+            ))}
             {(currentStreamingMessage || isLoading) && (
               <div className="flex flex-col gap-2">
                 <SystemMessage

From 5032151a0adbd17105f27729ba87f020bc1e736d Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 06:15:25 +0000
Subject: [PATCH 2/4] fix: improve system prompt copy button layout and styling

- Move copy button outside flex container to prevent overlap with expand/collapse button
- Change icon size from h-3 w-3 to h-4 w-4 to match assistant message styling
- Add -mb-2 margin and remove extra h-auto p-1 classes for consistent positioning
- Copy button now appears identical to assistant message version

Co-authored-by: AnthonyRonning <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/routes/_auth.chat.$chatId.tsx | 36 ++++++++++------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 04b4637eb..8b023377a 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -105,30 +105,28 @@ function SystemPromptMessage({ text }: { text: string }) {
             <span className="text-sm font-medium text-muted-foreground">System Prompt</span>
           </div>
           <div className="text-sm text-foreground">{isExpanded ? text : truncatedText}</div>
-          <div className="flex items-center gap-2">
-            {text.length > 100 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="self-start -mx-2 text-xs h-auto p-1 text-primary hover:text-primary/80"
-                onClick={() => setIsExpanded(!isExpanded)}
-              >
-                <ChevronRight
-                  className={`h-3 w-3 mr-1 transition-transform ${isExpanded ? "rotate-90" : ""}`}
-                />
-                {isExpanded ? "Show less" : "Show more"}
-              </Button>
-            )}
+          {text.length > 100 && (
             <Button
               variant="ghost"
               size="sm"
-              className="self-start -mx-2 group-hover:opacity-100 opacity-0 transition-opacity h-auto p-1"
-              onClick={handleCopy}
-              aria-label={isCopied ? "Copied" : "Copy to clipboard"}
+              className="self-start -mx-2 text-xs h-auto p-1 text-primary hover:text-primary/80"
+              onClick={() => setIsExpanded(!isExpanded)}
             >
-              {isCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+              <ChevronRight
+                className={`h-3 w-3 mr-1 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+              />
+              {isExpanded ? "Show less" : "Show more"}
             </Button>
-          </div>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="self-start -mx-2 -mb-2 group-hover:opacity-100 opacity-0 transition-opacity"
+            onClick={handleCopy}
+            aria-label={isCopied ? "Copied" : "Copy to clipboard"}
+          >
+            {isCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          </Button>
         </div>
       </div>
     </div>

From a8a58dd6efcb81815dc9ad72075de807462c26e4 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 06:27:29 +0000
Subject: [PATCH 3/4] feat: make system prompt expand/collapse inline with text

- Replace separate "Show more" button with inline text links
- Text now shows "... see more" and "show less" inline with content
- Remove unused ChevronRight import
- Maintains all existing functionality and copy button behavior

Co-authored-by: AnthonyRonning <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/routes/_auth.chat.$chatId.tsx | 51 ++++++++++++++--------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 8b023377a..483667c96 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { createFileRoute } from "@tanstack/react-router";
-import { AsteriskIcon, Check, Copy, UserIcon, ChevronDown, Bot, ChevronRight, SquarePenIcon } from "lucide-react";
+import { AsteriskIcon, Check, Copy, UserIcon, ChevronDown, Bot, SquarePenIcon } from "lucide-react";
 import ChatBox from "@/components/ChatBox";
 import { useOpenAI } from "@/ai/useOpenAi";
 import { useLocalState } from "@/state/useLocalState";
@@ -92,8 +92,6 @@ function SystemPromptMessage({ text }: { text: string }) {
     }
   }, [text]);
 
-  const truncatedText = text.length > 100 ? text.slice(0, 100) + "..." : text;
-
   return (
     <div className="group flex flex-col p-4 rounded-lg bg-muted/50">
       <div className="rounded-lg flex flex-col md:flex-row gap-4">
@@ -104,20 +102,39 @@ function SystemPromptMessage({ text }: { text: string }) {
           <div className="flex items-center gap-2">
             <span className="text-sm font-medium text-muted-foreground">System Prompt</span>
           </div>
-          <div className="text-sm text-foreground">{isExpanded ? text : truncatedText}</div>
-          {text.length > 100 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="self-start -mx-2 text-xs h-auto p-1 text-primary hover:text-primary/80"
-              onClick={() => setIsExpanded(!isExpanded)}
-            >
-              <ChevronRight
-                className={`h-3 w-3 mr-1 transition-transform ${isExpanded ? "rotate-90" : ""}`}
-              />
-              {isExpanded ? "Show less" : "Show more"}
-            </Button>
-          )}
+          <div className="text-sm text-foreground">
+            {isExpanded ? (
+              <>
+                {text}
+                {text.length > 100 && (
+                  <>
+                    {" "}
+                    <button
+                      className="text-primary hover:text-primary/80 underline cursor-pointer"
+                      onClick={() => setIsExpanded(false)}
+                    >
+                      show less
+                    </button>
+                  </>
+                )}
+              </>
+            ) : (
+              <>
+                {text.length > 100 ? text.slice(0, 100) : text}
+                {text.length > 100 && (
+                  <>
+                    {"... "}
+                    <button
+                      className="text-primary hover:text-primary/80 underline cursor-pointer"
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      see more
+                    </button>
+                  </>
+                )}
+              </>
+            )}
+          </div>
           <Button
             variant="ghost"
             size="sm"

From ce3b67f3c4b183c3686ea095ed36b3e12e37d57a Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 12 Jun 2025 16:20:19 +0000
Subject: [PATCH 4/4] refactor: extract copy functionality into reusable
 useCopyToClipboard hook

- Create shared useCopyToClipboard hook to eliminate code duplication
- Update SystemMessage and SystemPromptMessage to use the hook
- Remove 18 lines of duplicated copy logic

Co-authored-by: AnthonyRonning <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/routes/_auth.chat.$chatId.tsx | 47 +++++++++++-----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 483667c96..606b6b0c5 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -18,6 +18,23 @@ export const Route = createFileRoute("/_auth/chat/$chatId")({
   component: ChatComponent
 });
 
+// Custom hook for copy to clipboard functionality
+function useCopyToClipboard(text: string) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (error) {
+      console.error("Failed to copy text: ", error);
+    }
+  }, [text]);
+
+  return { isCopied, handleCopy };
+}
+
 function UserMessage({ text, chatId }: { text: string; chatId: string }) {
   return (
     <div className="flex flex-col p-4 rounded-lg bg-muted">
@@ -42,18 +59,8 @@ function SystemMessage({
   loading?: boolean;
   chatId: string;
 }) {
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      const textWithoutThinking = stripThinkingTags(text);
-      await navigator.clipboard.writeText(textWithoutThinking);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 2000);
-    } catch (error) {
-      console.error("Failed to copy text: ", error);
-    }
-  }, [text]);
+  const textWithoutThinking = stripThinkingTags(text);
+  const { isCopied, handleCopy } = useCopyToClipboard(textWithoutThinking);
 
   return (
     <div className="group flex flex-col p-4">
@@ -80,17 +87,7 @@ function SystemMessage({
 
 function SystemPromptMessage({ text }: { text: string }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 2000);
-    } catch (error) {
-      console.error("Failed to copy text: ", error);
-    }
-  }, [text]);
+  const { isCopied, handleCopy } = useCopyToClipboard(text);
 
   return (
     <div className="group flex flex-col p-4 rounded-lg bg-muted/50">
@@ -721,7 +718,9 @@ END OF INSTRUCTIONS`;
               >
                 {message.role === "system" && <SystemPromptMessage text={message.content} />}
                 {message.role === "user" && <UserMessage text={message.content} chatId={chatId} />}
-                {message.role === "assistant" && <SystemMessage text={message.content} chatId={chatId} />}
+                {message.role === "assistant" && (
+                  <SystemMessage text={message.content} chatId={chatId} />
+                )}
               </div>
             ))}
             {(currentStreamingMessage || isLoading) && (