🎨 fix: Correct Read-Only State Logic in Code Editor (#10508)

*  style: Update ThinkingButton container background color for improved visibility

*  style: Refactor Clipboard icon rendering for improved readability

*  style: Simplify readOnly state initialization and update logic in ArtifactCodeEditor

*  style: Update Thinking component background color for improved aesthetics

* Update client/src/components/Chat/Messages/MinimalHoverButtons.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Marco Beretta 2025-11-14 18:27:51 +01:00 committed by GitHub
parent f6868fc851
commit e71c48ec3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 5 deletions

View file

@ -179,9 +179,10 @@ export const ArtifactCodeEditor = function ({
bundlerURL: template === 'static' ? config.staticBundlerURL : config.bundlerURL,
};
}, [config, template, fileKey]);
const [readOnly, setReadOnly] = useState(externalReadOnly ?? isSubmitting ?? false);
const initialReadOnly = (externalReadOnly ?? false) || (isSubmitting ?? false);
const [readOnly, setReadOnly] = useState(initialReadOnly);
useEffect(() => {
setReadOnly(externalReadOnly ?? isSubmitting ?? false);
setReadOnly((externalReadOnly ?? false) || (isSubmitting ?? false));
}, [isSubmitting, externalReadOnly]);
if (Object.keys(files).length === 0) {

View file

@ -69,7 +69,7 @@ const Reasoning = memo(({ reasoning, isLast }: ReasoningProps) => {
return (
<div className="group/reasoning">
<div className="group/thinking-container">
<div className="sticky top-0 z-10 mb-2 pb-2 pt-2">
<div className="sticky top-0 z-10 mb-2 bg-presentation pb-2 pt-2">
<ThinkingButton
isExpanded={isExpanded}
onClick={handleClick}

View file

@ -148,7 +148,7 @@ const Thinking: React.ElementType = memo(({ children }: { children: React.ReactN
return (
<div className="group/thinking-container">
<div className="sticky top-0 z-10 mb-4 bg-surface-primary pb-2 pt-2">
<div className="sticky top-0 z-10 mb-4 bg-presentation pb-2 pt-2">
<ThinkingButton
isExpanded={isExpanded}
onClick={handleClick}

View file

@ -27,7 +27,11 @@ export default function MinimalHoverButtons({ message, searchResults }: THoverBu
isCopied ? localize('com_ui_copied_to_clipboard') : localize('com_ui_copy_to_clipboard')
}
>
{isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard size="19" />}
{isCopied ? (
<CheckMark className="h-[19px] w-[19px]" />
) : (
<Clipboard className="h-[19px] w-[19px]" />
)}
</button>
</div>
);