[86] Add `Canvas` text and code support #90

itsmartashub · 2024-12-12T22:37:00Z

There's more work to do. See #86, #89, #91, #92, #93, #94

Important

The CodeMirror editor in the canvas feature fails to properly update its syntax highlighting when themes are changed using the GPThemes floating button. While the overall UI theme changes, the code highlighting remains in the previous theme's style, creating a visual inconsistency.
However, changing the theme via the ChatGPT settings correctly updates the CodeMirror syntax highlighting.

…h the theme (#86) - Added styling to the "Use a Tool" button introduced by the new Canvas update in the ChatGPT website - Ensured the button matches the visual theme and design of the prompt field Changes summary: - Added styling to the "Use a Tool" button to ensure it matches the visual theme of the prompt field.

- Added styling to the "Open in canvas" button introduced by the new Canvas update in the ChatGPT website - Ensured the button matches the visual theme and design of the prompt field Changes summary: - Added styling to the "Open in canvas" button to ensure it matches the visual theme of the prompt field.

) - Add backgrounds and styles to `cm-editor` to match themes - Style `cm-activeLineGutter` to match the current theme - Add border on hover to `cm-editor` Changes summary: - Enhanced codeMirror editor (cm-editor) to integrate with themes, improving visual consistency. - Styled `cm-activeLineGutter` to match the current theme for better readability. - Added a border on hover to `cm-editor` for better interactivity.

…r` on screens <= `1000px` width (#86) - Fix background application for section and header elements on screens <= 1000px width - Ensure `cm-editor` remains full-width on smaller screens Changes summary: - Resolved an issue where section and header backgrounds were not applied when the screen width was 1000px or less, and the codeMirror editor (cm-editor) was set to full-width.

- Add background to canvas when there is text content (ProseMirror) - Ensure consistent background styling for both code and text content Changes summary: - Extended canvas background support to include text content created with ProseMirror, ensuring a consistent look and feel for both code and text.

…op-blur (#88, #86) - Add transparent accent background to floating edit buttons to match the theme - Apply backdrop-blur effect to improve visual clarity Changes summary: - Added transparent accent background and backdrop-blur to floating edit buttons for better theme integration and visual clarity.

… color to draggable sliders (#88, #86) - Add transparent accent background to draggable sliders in ProseMirror (text canvas) - Use accent color for "Adjust the length" and "Reading level" slider buttons Changes summary: - Added transparent accent background and accent color to draggable sliders for "Adjust the length" and "Reading level" in ProseMirror (text canvas) for improved visual integration.

…r submit change buttons (#88, #86) - Add accent background color to submit change buttons - Use on-accent color for text on submit change buttons, including main buttons like "Code review" and "Suggest edits" Changes summary: - Added accent background and on-accent text color to submit change buttons, including main buttons like "Code review" and "Suggest edits" for better visual consistency.

…ns with hover and active state styles (#88, #86) - Add hover and active state styles to `Port to a language` list buttons in Code Canvas Changes summary: - Improved `Port to a language` list buttons in Code Canvas by adding hover and active state styles for better user interaction.

… is entered (#88, #86) - Ensure the background color of the floating edit buttons not matches the main floating state when the slider state is active - Main state has: ".bg-token-main-surface-primary", slider state has: ".bg-token-main-surface-secondary" Changes summary: - Fixed the background color of floating edit buttons to not match the main floating state when the slider state is active.

#88, #86) - Add box-shadow to Y-slider buttons to enhance their appearance and make them look more like slider buttons Changes summary: - Improved the appearance of Y-slider buttons by adding a ring around, making them look more like slider buttons.

… and `Port to a language` list (#88, #86) - Add box-shadow to Y-slider buttons for better visual distinction - Enhance "Add emoji" and "Port to a language" list buttons for improved user experience Changes summary: - Improved the Y-slider button and "Add emoji" and "Port to a language" list buttons.

… floating pause btn (#88, #86) - Add background accent to floating pause button while processing submitted changes - use on-accent color for better visual distinction and user interaction Changes summary: - Added background accent and on-accent color to floating pause button while processing submitted changes for enhanced visual distinction and user interaction.

…on-accent for light theme (#88, #86)

…ttons, add styles to `Edit or explain...` prompt field (#89, #86) - Improve toolbar and `Ask a ChatGPT` buttons with appropriate background styles - Add a different background to the `Edit or explain...` prompt field - Apply accent and on-accent styles to the submit button in the prompt field Changes summary: - Improved the toolbar and `Ask a ChatGPT` buttons with appropriate background styles, added a different background to the `Edit or explain...` prompt field, and applied accent and on-accent styles to the submit button for better visual consistency.

…yles (#89, #86) - Decrease padding and radius for the "Text style" dialog: Heading 1, Heading 2, Heading 3 and Body buttons - Change background color of the text style buttons wrapper - Remove box-shadow of buttons wrapper Changes summary: - Adjusted the "Text style" dialog by decreasing spacing and radius, and changed the background color of the text style buttons wrapper for improved UI consistency.

…n for `<= 1000px` screens (#89, #86) - Add background to the main prompt field in "Ask GPT to edit" - Style the submit button for screens with width less than 1000px when Canvas is full-width Changes summary: - Added background to the main prompt field and styled the submit button in the "Ask GPT to edit" prompt field for screens with a width less than 1000px when the Canvas is full-width.

- Add accent styles to the `1 more edit...` floating buttons shown on the top when there's an unread edit on the top center. Changes summary: - Added accent styles to the `1 more edit...` floating buttons shown on the top when there's an unread edit on the top center for improved visual consistency.

…nd click for adding comments (#89, #86) - Change blue highlight to accentish when hovering over text elements to add a comment - Change highlight to pure accent when clicking to add a comment, bringing the "Edit or explain..." field into view Changes summary: - Changed the highlight color to accentish on hover and to pure accent on click for adding comments in the text canvas, improving visual feedback.

…con (#89, #86) - Add accent color to the "Add comment" SVG icon in the `[data-block-comment-launcher]` button Changes summary: - Added accent color to the "Add comment" SVG icon in the `[data-block-comment-launcher]` button for better visual consistency.

…or for Code Canvas (#89, #86) - Add selection highlight background and text color for Code Canvas Changes summary: - Added selection highlight background and text color for Code Canvas to improve visual feedback and consistency.

…en about to send `Edit or explain` prompt (#89, #88) - Update the `hc-blue` code text selection to accent color when about to send a prompt (when the "Edit or explain" floating prompt field is in view) - Change text color to `on-accent` when the "Edit or explain" floating prompt field is in view Changes summary: - Updated the code text selection highlight to accent color and text color to `on-accent` when the "Edit or explain" floating prompt field is in view for better visual feedback.

…ne and update next processing lines bg and opacity (#89, #86) - Add accent color for the current processing line - Change the background of `.streaming-line-overlay::before` lines for next processing lines to better match the theme Changes summary: - Added accent color for the current processing line and updated the background of next processing lines to better match the theme for improved visual consistency.

…hted on selection (#89, #86) - Ensure `<br>` tags are highlighted with the accent color when selected Changes summary: - Fixed the issue where `<br>` tags were not highlighted with the accent color on selection, ensuring consistent visual feedback.

…us texts (#89, #86) - Fix gradients over previous texts to ensure they look consistent and fit the theme for ProseMirror (Text Canvas) while processing the submited changes ("Add emoji", etc) Changes summary: - Corrected processing gradients over previous texts to ensure consistency and theme fit for ProseMirror (Text Canvas).

- Change console background to match the canvas background - Improve error background for better visibility - Colorize "Clear console" and "Cancel" icons in the console header to accent color - Enhance "Run" sticky header on hover - Change resizing line background to an accent color - Update --border-xlight border color to accentish Changes summary: - Updated the console background to match the canvas background for a cohesive look. - Improved the error background for better visibility and readability. - Colorized the "Clear console" and "Cancel" icons in the console header to the accent color. - Enhanced the "Run" sticky header with a hover effect for better user interaction. - Changed the resizing line background to an accent color for a more consistent design.

…add code comments

…y `Console` (#91, #86) - Ensure styles for `[role="dialog"]` are not applied when `[data-comment-id]` attribute is present Changes summary: - Refined the styling for "Apply" comments dialogs to ensure that styles are not applied when the `data-comment-id` attribute is present.

- Improved title color for better readability - Updated button background colors and hover/disabled states for better visual feedback - Enhanced visibility, differentiate and colors of `Run` and `Stop` buttons - Enhanced History of changes button when active Changes summary: - Improved the title color for better readability. - Updated button background colors and hover/disabled states to provide better visual feedback. - Enhanced the visibility and colors of the `Run` and `Stop` buttons for a more intuitive user experience. - Enhanced History of changes button when active

…t-id])` due to compatibility - Removed the `>` from the CSS selector `[role="dialog"]:not(>[data-comment-id])` to ensure compatibility with SCSS in version 2.0.0 Changes summary: - Updated the CSS selector for dialog elements to remove the `>` to ensure compatibility with SCSS in version 2.0.0.

… accent when `Apply` comment submit (#89, #86) - Changed text highlight color from blue to accent color when processing changes for selected text after clicking the "Apply" comment button Changes summary: - Updated the text selection-highlight blue color to the accent when changes are applied to selected text via the "Apply" comment button.

… dropdown bg - Fixed the broken speech button icon color in the prompt field - Resolved the incorrect background color in the settings dropdown Changes summary: - Fixed the broken speech button icon color in the prompt field to ensure it is visible. - Resolved the incorrect background color in the settings dropdown to match the intended design.

… use (#86) - Matched the background of the popover with the autoplayed video card shown when using Canvas for the first time to the theme - Ensured the "Refine and debug on the spot" and "Got it" buttons are styled consistently Changes summary: - Matched the background of the popover with the autoplayed video card to the theme for a consistent look when using Canvas for the first time. - Ensured the "Refine and debug on the spot" and "Got it" buttons are styled consistently with the theme.

… wrapper on `w <= 1000px` (#89, #86) - Fixed the user chat background and gradient wrapper for dark and light themes on screens with a width of 1000px or greater - Ensured the styles are applied correctly when there is a submitted prompt and chat Changes summary: - Adjusted the user chat background and gradient wrapper to ensure proper styling for dark and light themes on screens with a width of 1000px or greater. - Ensured the styles are correctly applied when there is a submitted "ask gpt" prompt and chat.

…Code or Text canvas loaded yet (#89, #86) - Fixed the background not being applied when there is no text (`#prosemirror-editor-container`) or code (`#codemirror`) canvas section loaded yet - Fixed the issue where the background was not applied when selecting a canvas <section> via the `#codemirror` or `#prosemirror-editor-container` elements. Changes summary: - Ensured the background is applied correctly to the loading skeleton when there is no text or code canvas section loaded yet.

…is opened or skeleton-loading (#86) - Hide the GPT themes floating button when a code or text canvas is opened - Ensure the button remains hidden when the canvas skeleton-loading layout is active Changes summary: - Hid the GPT themes floating button when a code or text canvas is opened. - Ensured the button remains hidden when the canvas skeleton-loading layout is active.

… Canvas view using `@container` queries (#92, #86) - Applied mobile-like chat styles when the canvas is opened and the parent element of chats and the prompt field is less than `md` or `sm` breakpoint using the new `@container` CSS property - Made chats and the prompt textarea full width for a more compact and readable layout - Removed unnecessary elements like the GPT logo, big paddings,big paddings and spacing around, and border radius for a cleaner look Changes summary: - Enhanced chat styles to be more compact and readable when the canvas is opened - Made the chats and prompt textarea full width for better visual appeal in the canvas layout. - Removed unnecessary elements like the GPT logo, big paddings and spacing around, and border radius to create a cleaner and more readable design

@container

…th when canvas is open and on `md` breakpoints (#92, #86) - Ensure the prompt field updates to full-width when the canvas is open and on `md` breakpoints by updating the @container mixins to the named Changes summary: - Fixed the issue where the prompt field did not update to full-width when the canvas is open and on `md` breakpoints, ensuring consistent layout.

- Fix background gradients in chat bubbles to ensure they look consistent and fit the theme when in user chat Changes summary: - Corrected the background gradients in user chat bubbles to ensure they look consistent and fit the theme.

…dits (#89, #86) - Ensure styles are applied to the `x more edits` button in the history of edits by selecting the element with `[aria-label^="Button to scroll the next edit into view"]` Changes summary: - Fixed the issue where styles were not applied to the `x more edits` button in the history of edits in Text Canvas, ensuring consistent visual appearance.

…efox (#93, #86) - Address the overlay issue that appears over the chats container when the canvas is opened in the light theme and using Firefox - Ensure the overlay does not obstruct user interactions and is visually consistent [The issue arises because I'm using the [class^="bg-black"] selector to apply a full bg color, but in this case, the element is semi-transparent. I'm still unsure why OpenAI is utilizing this element and why it's fully transparent specifically for the dark theme.] Changes summary: - Fixed the issue where an overlay appeared over the chats container in the light theme on Firefox, ensuring it does not obstruct user interactions and is visually consistent.

… the theme (#89, #86) - Update the background of markdown code blocks in the Text Canvas to better match the theme Changes summary: - Updated the background of markdown code blocks in the Text Canvas to better match the theme for improved visual consistency.

…enarios (#86) - Update the `[data-message-author-role='assistant']` selector to target GPT chat bubbles with `.agent-turn` - Ensure chat bubbles maintain their design when editing is stopped or when there is only one line in the chat bubble - This was specially noticable and not so pleasent in =< `md` bp when canvas is opened or in smaller screen sizes Changes summary: - Fixed the issue where chat bubbles did not have the correct design in certain scenarios, such as when editing is stopped or when there is only one line in the chat bubble, by updating the selector to target GPT chat bubbles with `.agent-turn`.

- Change the button text from "Reset Fonts" to "Reset Colors" in the Colors customization settings Changes summary: - Fixed the typo in the "Reset Fonts" button to "Reset Colors" in the Colors customization settings for clarity and accuracy.

itsmartashub added 25 commits December 11, 2024 14:32

fix(canvas/floating-edit-btns): fix pause button bg accent and color …

044f4ae

…on-accent for light theme (#88, #86)

itsmartashub self-assigned this Dec 12, 2024

itsmartashub changed the title ~~Add Canvas support (#86)~~ Add Canvas support [#86] Dec 12, 2024

itsmartashub changed the title ~~Add Canvas support [#86]~~ Add Canvas support Dec 12, 2024

itsmartashub changed the title ~~Add Canvas support~~ [86] Add Canvas support Dec 12, 2024

itsmartashub changed the title ~~[86] Add Canvas support~~ [86] Add Canvas text and code support Dec 12, 2024

itsmartashub added 19 commits December 13, 2024 16:41

refactor(canvas/console): move console code to section scoping and …

5ba1a5c

…add code comments

itsmartashub merged commit 8cf3a59 into main Dec 15, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[86] Add `Canvas` text and code support #90

[86] Add `Canvas` text and code support #90

itsmartashub commented Dec 12, 2024 •

edited

Loading

[86] Add Canvas text and code support #90

[86] Add Canvas text and code support #90

Conversation

itsmartashub commented Dec 12, 2024 • edited Loading

[86] Add `Canvas` text and code support #90

[86] Add `Canvas` text and code support #90

itsmartashub commented Dec 12, 2024 •

edited

Loading