UI fixes & improvments #76

mhd-fettah · 2023-03-23T18:10:13Z

No description provided.

…n answer

* fix: don't break words * fix: don't break words as much as possible, but when the width is not enough, will still break --------- Co-authored-by: josc146 <josStorer@outlook.com>

…e result window remains fixed (ChatGPTBox-dev#40)

…v#11)

josStorer · 2023-03-24T02:37:52Z

thanks, i will make a test later

mhd-fettah · 2023-03-24T07:57:46Z

no thank youuuu bro for accepting contributions from us . I will keep helping there is many stuff in my mind to improve the plugin since I use it every day now .

josStorer · 2023-03-24T08:38:02Z

I have conducted some tests and noticed that numerous styles and functions appear to be compromised. It might be beneficial for you to perform your own build tests to ensure everything is working as intended.

There are subtle differences between the icons in @primer/octicons-react and react-bootstrap-icons. In my opinion, the download button in @primer/octicons-react seems to be more visually appealing.

Please note that the icons in @primer/octicons-react do not support onClick. As a result, I utilized a span to achieve the desired functionality. It is essential not to remove this part, or the functionality will be lost.

The gpt-util-icon style is solely for changing the cursor to indicate that the element is clickable. This style is being used in many places, and adding extra styles to it has inadvertently caused disruptions in the appearance of other buttons.

mhd-fettah · 2023-03-28T21:45:29Z

I will try to build and check whats broken and fix it .
we need to standardize and improve the UI & UX
so the plugin can bypass others in term of approval for final user .

Copilot

Pull Request Overview

This PR enhances UI behavior and text rendering, expands configuration to support more models (including a custom API), and updates build assets and dependencies.

Extend configuration (defaultConfig, model keys, and getUserConfig) to cover GPT-4 variants and a custom API endpoint
Improve Markdown rendering by adding remark-breaks and setting dir="auto" for proper line breaks and text direction
Refactor UI components (FloatingToolbar, ConversationItem, ConversationCard, InputBox) with new CSS classes, pin/drag support, mobile selection handling, and responsive sizing
Add custom API streaming handler and adjust background scripts to route requests to the new endpoint
Update build pipeline (optional tiktoken stripping) and bump several dependencies

Reviewed Changes

Copilot reviewed 45 out of 45 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/config/index.mjs	Added new model variants and custom API keys, reorganized config fields, and version compatibility
src/components/MarkdownRender/markdown.jsx	Wrapped renderer in `<div dir="auto">` and included `remark-breaks` for line-break support
src/components/FloatingToolbar/index.jsx	Added mobile selection listener, responsive width, drag/dock/pin logic, and CSS class updates
src/components/ConversationCard/index.jsx	Integrated window-size hook, pin/close controls, port passing, and updated icon components
build.mjs	Enhanced webpack to optionally strip tiktoken usage and expanded asset inline rules

Comments suppressed due to low confidence (2)

src/background/apis/custom-api.mjs:1

The new generateAnswersWithCustomApi module adds significant logic paths that lack automated tests; consider adding unit or integration tests to cover successful streams, errors, and abort scenarios.

// custom api version

src/components/ConversationItem/index.jsx:17

You introduced .gpt-header-icons and .gpt-header-items classes to replace inline flex and gap styling; ensure corresponding CSS rules (e.g. display: flex; gap: 15px;) are present or add them to preserve the intended layout.

              <div className="gpt-header-icons">

Copilot · 2025-05-31T20:21:35Z

src/components/ConversationCard/index.jsx

                />,
                toolbarContainer,
              )
            }}
          />
        )}
-        <span
+        <Download


[nitpick] The Download icon is rendered without a size or margin styling, which may cause inconsistent spacing; consider adding size={16} and a className or inline style to match other toolbar icons.

Suggested change

<Download

<Download

size={16}

className="gpt-util-icon"

Copilot · 2025-05-31T20:21:35Z

build.mjs

+    await new Promise((r) => setTimeout(r, 5000))
+    await runWebpack(
+      true,
+      true,
+      generateWebpackCallback(() => finishOutput('-without-katex-and-tiktoken')),
+    )
+    await new Promise((r) => setTimeout(r, 5000))


[nitpick] Relying on fixed timeouts to sequence multiple webpack runs can lead to nondeterministic build behavior; consider chaining the runs using webpack's compiler hooks or Promises rather than setTimeout.

Suggested change

await new Promise((r) => setTimeout(r, 5000))

await runWebpack(

true,

true,

generateWebpackCallback(() => finishOutput('-without-katex-and-tiktoken')),

)

await new Promise((r) => setTimeout(r, 5000))

await runWebpack(

true,

true,

generateWebpackCallback(() => finishOutput('-without-katex-and-tiktoken')),

)

Copilot · 2025-05-31T20:21:35Z

src/background/index.mjs

+  for (const index in defaultConfig.selectionTools) {
+    const key = defaultConfig.selectionTools[index]


[nitpick] Using for...in over an array iterates numeric keys; consider for (const key of defaultConfig.selectionTools) for clearer intent and to avoid inherited properties.

Suggested change

for (const index in defaultConfig.selectionTools) {

const key = defaultConfig.selectionTools[index]

for (const [index, key] of defaultConfig.selectionTools.entries()) {

Copilot · 2025-05-31T20:21:36Z

src/background/apis/custom-api.mjs

+ * @param {string} apiKey
+ * @param {string} modelName
+ */
+export async function generateAnswersWithCustomApi(port, question, session, apiKey, modelName) {


[nitpick] This function lacks JSDoc comments for its parameters and return behavior; adding documentation will help future maintainers understand the expected port usage, streaming lifecycle, and error cases.

PeterDaveHello · 2025-06-02T18:09:49Z

/review

qodo-merge-pro · 2025-06-02T18:10:22Z

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Duplicate Code There's duplicate code for removing chatgptbox-container elements. The same unmounting and removal code appears twice (lines 42-45 and 51-54), which could lead to maintenance issues. document.querySelectorAll('.chatgptbox-container').forEach((e) => { unmountComponentAtNode(e) e.remove() }) let question if (userConfig.inputQuery) question = await getInput([userConfig.inputQuery]) if (!question && siteConfig) question = await getInput(siteConfig.inputQuery) document.querySelectorAll('.chatgptbox-container').forEach((e) => { unmountComponentAtNode(e) e.remove() }) Error Handling The stopListener is removed in onEnd but not in some error paths, which could lead to memory leaks if errors occur during the request. } let data try { data = JSON.parse(message) } catch (error) { console.debug('json error', error) return } if (data.conversation_id) session.conversationId = data.conversation_id if (data.message?.id) session.parentMessageId = data.message.id answer = data.message?.content?.parts?.[0] if (answer) { port.postMessage({ answer: answer, done: false, session: session }) } }, async onStart() { // sendModerations(accessToken, question, session.conversationId, session.messageId) }, async onEnd() { port.onMessage.removeListener(stopListener) }, async onError(resp) { if (resp instanceof Error) throw resp port.onMessage.removeListener(stopListener) if (resp.status === 403) { Font Consistency The Cairo font is applied inconsistently. It's set for .chatgptbox-container * (line 52) but also specifically for .markdown-body (line 125), which could cause styling inconsistencies. .chatgptbox-container * { font-family: 'Cairo', sans-serif; } .gpt-inner { border-radius: 8px; border: 1px solid; overflow: hidden; border-color: var(--theme-border-color); background-color: var(--theme-color); margin: 0; hr { height: 1px; background-color: var(--theme-border-color); border: none; } } .markdown-body { padding: 5px 15px 10px; background-color: var(--theme-color); color: var(--font-color); resize: vertical; overflow-y: auto; ul, ol { padding-left: 1.5em; } ol { list-style: none; counter-reset: item; li { counter-increment: item; &::marker { content: counter(item) '. '; } } } } .icon-and-text { color: var(--font-color); display: flex; align-items: center; padding: 15px; gap: 6px; } .manual-btn { cursor: pointer; } .gpt-loading { color: var(--font-color); animation: chatgptbox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .code-copy-btn { color: inherit; position: absolute; right: 10px; top: 3px; cursor: pointer; } :is(.answer, .question, .error) { font-size: 15px; line-height: 1.6; border-radius: 8px; word-break: break-word; font-family: 'Cairo', sans-serif;

PeterDaveHello · 2025-06-02T18:10:34Z

/improve

qodo-merge-pro · 2025-06-02T18:11:42Z

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Fix position calculation logic The current implementation has a logic error. When `window.innerWidth -` `element.offsetWidth` is negative, the inner `Math.max(0, ...)` will force it to 0, making the element always align to the left edge when it's wider than the viewport. Instead, use a simpler approach to constrain the position. src/utils/set-element-position-in-viewport.mjs [2-3] -const retX = Math.min(Math.max(0, window.innerWidth - element.offsetWidth), Math.max(0, x)) -const retY = Math.min(Math.max(0, window.innerHeight - element.offsetHeight), Math.max(0, y)) +const retX = Math.max(0, Math.min(window.innerWidth - element.offsetWidth, x)) +const retY = Math.max(0, Math.min(window.innerHeight - element.offsetHeight, y)) Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a logic issue where elements wider than the viewport would always be positioned at x=0 due to the nested `Math.max(0, ...)` calls. The proposed fix provides a cleaner approach to constrain positioning within viewport bounds.	Medium
General	Limit font-family scope The font-family declaration is applied to all elements within the container, which can override intended font styles for code blocks and other specialized elements. This should be more targeted to apply only to text content elements. src/content-script/styles.scss [51-53] -.chatgptbox-container * { +.chatgptbox-container .markdown-body p, +.chatgptbox-container .markdown-body li, +.chatgptbox-container .markdown-body h1, +.chatgptbox-container .markdown-body h2, +.chatgptbox-container .markdown-body h3, +.chatgptbox-container .markdown-body h4 { font-family: 'Cairo', sans-serif; } Apply / Chat Suggestion importance[1-10]: 6 __ Why: Good suggestion to avoid unintended font application to specialized elements like code blocks and icons by making the selector more specific rather than using universal selector.	Low
	Add minimum height constraint Using a percentage of window height for maxHeight without a minimum value could make the content area too small on certain devices. Add a minimum height to ensure usability on all screen sizes. src/components/ConversationCard/index.jsx [235] <div ref={bodyRef} className="markdown-body" - style={{ maxHeight: windowSize[1] * 0.75 + 'px' }} + style={{ maxHeight: Math.max(300, windowSize[1] * 0.75) + 'px' }} > `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: Reasonable UX improvement to prevent content area from becoming too small on certain screen sizes, though not critical functionality.	Low
	Add font fallbacks Using a single font without fallbacks can cause text rendering issues if 'Cairo' fails to load. Add system font fallbacks to ensure text remains readable in all situations. src/content-script/styles.scss [52] -font-family: 'Cairo', sans-serif; +font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; Apply / Chat Suggestion importance[1-10]: 4 __ Why: Adding font fallbacks is good practice, but the suggestion doesn't specify which of the multiple `font-family` declarations it refers to, making it ambiguous.	Low
More

josStorer and others added 30 commits March 16, 2023 00:09

Update README.md

c53e232

feat: make the chat body resizable (ChatGPTBox-dev#1)

832a040

release v2.0.1

617330d

fix: repeat rendering (ChatGPTBox-dev#3)

7d8706b

chore: add resultsContainerQuery for siteAdapters

705b960

feat: dynamic max-height and width (ChatGPTBox-dev#1)

c6caf56

feat: stop generating answers

48c2618

feat: auto scroll to bottom when submitting a question or finishing a…

1ce1851

…n answer

release v2.0.2

b7c390f

Update README.md

ec7eabc

Update README.md

6c3fd11

feat: improve mobile support

68f8f00

feat: code explain for selection tools

b7af995

update readme

fd7388d

feat: lockWhenAnswer config (ChatGPTBox-dev#5)

9517772

release v2.0.3

a26c78e

Update issue templates

858469a

Update README.md

87c81ed

chore: improve mobile selection

025e915

chore: improve for reddit

d8e02d1

chore: improve for youtube

97a853f

chore: improve for youtube

a1e36fe

chore: inline svg to save traffic

9f8403c

release v2.0.4

79a1628

style: fix markdown ol item style (ChatGPTBox-dev#12)

0a0299c

Update README.md

45f48ee

docu: readme in zh

eb9eadd

docu: readme in zh

fa13ace

docu: readme in zh

8777140

feat: support RTL text (ChatGPTBox-dev#6)

699d36a

josStorer and others added 14 commits March 20, 2023 22:42

feat: make floating window of selectionTools dockable

b5026cd

release v2.0.7

f81cfbd

fix: don't break words (fix ChatGPTBox-dev#30) (ChatGPTBox-dev#45)

9befe11

* fix: don't break words * fix: don't break words as much as possible, but when the width is not enough, will still break --------- Co-authored-by: josc146 <josStorer@outlook.com>

feat: make the floating selectionTools follow the scrolling, while th…

d095ba0

…e result window remains fixed (ChatGPTBox-dev#40)

release v2.0.8

1a45c76

feat: offline/self-hosted large language model support (ChatGPTBox-de…

519550f

…v#11)

release v2.1.0

15e185d

change the font for more moder and easy to read font .

9cddbc4

update readme

4f8aa29

make the icons clearer to see with no cutout

cc3bfaf

the logo clear and centered

2951f37

move dulicate style from html and move it to CSS

095d2c1

fix alignment of block header

202f1ba

minimize UI & improve Ux

40ee80f

josStorer force-pushed the master branch from 05fd279 to 9b157ff Compare April 27, 2023 08:14

josStorer force-pushed the master branch 3 times, most recently from da53d37 to 62a093f Compare November 4, 2023 09:40

josStorer force-pushed the master branch from b6bad66 to 0744027 Compare May 16, 2024 15:07

PeterDaveHello requested a review from Copilot May 31, 2025 20:18

Copilot AI reviewed May 31, 2025

View reviewed changes

qodo-merge-pro bot added the Review effort 4/5 label Jun 2, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI fixes & improvments #76

UI fixes & improvments #76

Uh oh!

mhd-fettah commented Mar 23, 2023

Uh oh!

josStorer commented Mar 24, 2023

Uh oh!

mhd-fettah commented Mar 24, 2023

Uh oh!

josStorer commented Mar 24, 2023

Uh oh!

mhd-fettah commented Mar 28, 2023

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 31, 2025

Uh oh!

Copilot AI May 31, 2025

Uh oh!

Copilot AI May 31, 2025

Uh oh!

Copilot AI May 31, 2025

Uh oh!

PeterDaveHello commented Jun 2, 2025

Uh oh!

qodo-merge-pro bot commented Jun 2, 2025

Uh oh!

PeterDaveHello commented Jun 2, 2025

Uh oh!

qodo-merge-pro bot commented Jun 2, 2025

Uh oh!

Uh oh!

		for (const index in defaultConfig.selectionTools) {
		const key = defaultConfig.selectionTools[index]

	for (const index in defaultConfig.selectionTools) {
	const key = defaultConfig.selectionTools[index]
	for (const [index, key] of defaultConfig.selectionTools.entries()) {

UI fixes & improvments #76

Are you sure you want to change the base?

UI fixes & improvments #76

Uh oh!

Conversation

mhd-fettah commented Mar 23, 2023

Uh oh!

josStorer commented Mar 24, 2023

Uh oh!

mhd-fettah commented Mar 24, 2023

Uh oh!

josStorer commented Mar 24, 2023

Uh oh!

mhd-fettah commented Mar 28, 2023

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 31, 2025

Choose a reason for hiding this comment

Uh oh!

PeterDaveHello commented Jun 2, 2025

Uh oh!

qodo-merge-pro bot commented Jun 2, 2025

PR Reviewer Guide 🔍

Uh oh!

PeterDaveHello commented Jun 2, 2025

Uh oh!

qodo-merge-pro bot commented Jun 2, 2025

PR Code Suggestions ✨

Uh oh!

Uh oh!