From 199bd40e6b89dfd2f762f1169cb6b4f510492a04 Mon Sep 17 00:00:00 2001
From: Tat Dat Duong <david@duong.cz>
Date: Tue, 4 Mar 2025 14:37:39 +0100
Subject: [PATCH] Make icons stable

---
 src/components/thread/index.tsx           |  1 +
 src/components/thread/messages/ai.tsx     |  8 +++++++-
 src/components/thread/messages/human.tsx  | 14 +++++++++++---
 src/components/thread/messages/shared.tsx |  4 +++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index f5a3d91..72c95cc 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -27,6 +27,7 @@ function Title({ className }: { className?: string }) {
 }
 
 function NewThread() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setThreadId] = useQueryParam("threadId", StringParam);
 
   return (
diff --git a/src/components/thread/messages/ai.tsx b/src/components/thread/messages/ai.tsx
index 96a29b0..7680460 100644
--- a/src/components/thread/messages/ai.tsx
+++ b/src/components/thread/messages/ai.tsx
@@ -5,6 +5,7 @@ import { BranchSwitcher, CommandBar } from "./shared";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { MarkdownText } from "../markdown-text";
 import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui/client";
+import { cn } from "@/lib/utils";
 
 function CustomComponent({
   message,
@@ -67,7 +68,12 @@ export function AssistantMessage({
             <MarkdownText>{contentString}</MarkdownText>
           </div>
         )}
-        <div className="flex gap-2 items-center mr-auto opacity-0 group-hover:opacity-100 transition-opacity">
+        <div
+          className={cn(
+            "flex gap-2 items-center mr-auto transition-opacity",
+            "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
+          )}
+        >
           <BranchSwitcher
             branch={meta?.branch}
             branchOptions={meta?.branchOptions}
diff --git a/src/components/thread/messages/human.tsx b/src/components/thread/messages/human.tsx
index 453631c..aeef2dc 100644
--- a/src/components/thread/messages/human.tsx
+++ b/src/components/thread/messages/human.tsx
@@ -27,6 +27,7 @@ function EditableContent({
       value={value}
       onChange={(e) => setValue(e.target.value)}
       onKeyDown={handleKeyDown}
+      className="focus-visible:ring-0"
     />
   );
 }
@@ -57,7 +58,7 @@ export function HumanMessage({
   return (
     <div
       className={cn(
-        "flex items-center ml-auto gap-2 px-4 py-2 group",
+        "flex items-center ml-auto gap-2 group",
         isEditing && "w-full max-w-xl",
       )}
     >
@@ -69,9 +70,16 @@ export function HumanMessage({
             onSubmit={handleSubmitEdit}
           />
         ) : (
-          <p className="text-right">{contentString}</p>
+          <p className="text-right py-1">{contentString}</p>
         )}
-        <div className="flex gap-2 items-center ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
+
+        <div
+          className={cn(
+            "flex gap-2 items-center ml-auto transition-opacity",
+            "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
+            isEditing && "opacity-100",
+          )}
+        >
           <BranchSwitcher
             branch={meta?.branch}
             branchOptions={meta?.branchOptions}
diff --git a/src/components/thread/messages/shared.tsx b/src/components/thread/messages/shared.tsx
index b239c49..bfcee4e 100644
--- a/src/components/thread/messages/shared.tsx
+++ b/src/components/thread/messages/shared.tsx
@@ -31,7 +31,7 @@ function ContentCopyable({
 
   return (
     <TooltipIconButton
-      onClick={(e: any) => handleCopy(e)}
+      onClick={(e) => handleCopy(e)}
       variant="ghost"
       tooltip="Copy content"
       disabled={disabled}
@@ -82,6 +82,7 @@ export function BranchSwitcher({
       <Button
         variant="ghost"
         size="icon"
+        className="size-6 p-1"
         onClick={() => {
           const prevBranch = branchOptions[index - 1];
           if (!prevBranch) return;
@@ -97,6 +98,7 @@ export function BranchSwitcher({
       <Button
         variant="ghost"
         size="icon"
+        className="size-6 p-1"
         onClick={() => {
           const nextBranch = branchOptions[index + 1];
           if (!nextBranch) return;