refactor: make copy button always visible in assistant messages

- Moved copy button outside of loading/error conditions - Improved UI layout with consistent button placement - Added wrapper div for better structure - Simplified conditional rendering logic - Maintained existing feedback and context focus functionality
sourcegraph · Nov 1, 2024 · 73bda29 · 73bda29
1 parent 79adb49
commit 73bda29
Showing 1 changed file with 27 additions and 29 deletions.
diff --git a/vscode/webviews/chat/cells/messageCell/assistant/AssistantMessageCell.tsx b/vscode/webviews/chat/cells/messageCell/assistant/AssistantMessageCell.tsx
@@ -161,37 +161,35 @@ export const AssistantMessageCell: FunctionComponent<{
                             )}
                             <div className="tw-flex tw-items-center tw-divide-x tw-transition tw-divide-muted tw-opacity-65 hover:tw-opacity-100">
                                 {showFeedbackButtons && feedbackButtonsOnSubmit && (
-                                    <FeedbackButtons
-                                        feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
-                                        className="tw-pr-4"
-                                    />
+                                    <div className="tw-flex tw-items-center">
+                                        <FeedbackButtons
+                                            feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
+                                            className="tw-pr-4"
+                                        />
+                                    </div>
                                 )}
+                                <div className="tw-pl-4">
+                                    <button
+                                        type="button"
+                                        className="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-text-muted-foreground hover:tw-text-foreground tw-mx-4"
+                                        onClick={() => {
+                                            navigator.clipboard.writeText(message.text?.toString() || '')
+                                            copyButtonOnSubmit?.(message.text?.toString() || '')
+                                        }}
+                                    >
+                                        <CopyIcon />
+                                    </button>
+                                </div>
                                 {!isLoading && (!message.error || isAborted) && (
-                                    <>
-                                        <div className="tw-pl-4">
-                                            <button
-                                                type="button"
-                                                className="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-text-muted-foreground hover:tw-text-foreground"
-                                                onClick={() => {
-                                                    navigator.clipboard.writeText(
-                                                        message.text?.toString() || ''
-                                                    )
-                                                    copyButtonOnSubmit?.(message.text?.toString() || '')
-                                                }}
-                                            >
-                                                <CopyIcon />
-                                            </button>
-                                        </div>
-                                        <ContextFocusActions
-                                            humanMessage={humanMessage}
-                                            longResponseTime={hasLongerResponseTime}
-                                            className={
-                                                showFeedbackButtons && feedbackButtonsOnSubmit
-                                                    ? 'tw-pl-5'
-                                                    : undefined
-                                            }
-                                        />
-                                    </>
+                                    <ContextFocusActions
+                                        humanMessage={humanMessage}
+                                        longResponseTime={hasLongerResponseTime}
+                                        className={
+                                            showFeedbackButtons && feedbackButtonsOnSubmit
+                                                ? 'tw-pl-5'
+                                                : undefined
+                                        }
+                                    />
                                 )}
                             </div>
                         </div>