Changed Enter button icon and fixed sensitivity issues

[GauravVBhambhani]

Description

Chat view: Improve look and feel of the enter button

The chat view for continue currently consists of a Send(Enter) button that looks like an enter key icon (↵), which isn't ideal as many keyboards don't use that icon anymore.

Furthermore, there are some sensitivity issues:

• the button is active sometimes when it shouldn't be (when there's no user input).
• the styling of the button makes it appear insensitive sometimes, even when it's active.

This commit addresses these issues, by switching to a more modern airplane icon, using vscode theme colors for styling.
Marking the button insensitive when there's no user input.

Screenshots

Granite.Code Issue #32

[netlify]

✅ Deploy Preview for continuedev canceled.

Name	Link
🔨 Latest commit	a94727f
🔍 Latest deploy log	https://app.netlify.com/sites/continuedev/deploys/67d99df5f10b970008cc22a0

[halfline]

So, I haven't tried it yet, but to me, in a cursory review this looks pretty good.
Beefing up the state management for hasText seems like good idea, but don't know what Dallin/Nate's takes are.

I would improve the commit message a bit...maybe something like:

chat: Improve look and feel of enter button

The chat view for continue currently features a submit button that looks like an enter key icon.

This metaphor isn't ideal, since many keyboards these days don't use that icon. Furthermore, there are some sensitivity issues:

1. The styling of the button makes it sometimes appear insensitive when when it's active
2. The button is active sometimes when it shouldn't be (when there is no user input).

This commit addresses those issues, by switching to a more modern airplane icon instead of a return key icon, using vscode theme colors for styling, and marking the button insensitive when there is no user input, respectively.

[halfline]

is there a reason this needs to be a div and not a span?

[GauravVBhambhani]

I chose a div in this case because it naturally behaves as a block-level element so the tooltip is correctly positioned. But, I can use a span as well. I might have to add a inline-block style for proper layout. I'll test it out.

[GauravVBhambhani]

Nevermind, works the same without any additional styling. Changed to span.

[halfline]

instead of doing this here, can you just put hasText={hasText} and then do:

  const [hasText, setHasText] = useState(false);
  useEffect(() => {
...
   if (!editor) return;
   const updateEditorHandler = () => {
        const text = editor.getText().trim();
        setHasText(text.length > 0);
    };
    const clearUpdateEditorHandler = () => {
        editor.off("update", clearUpdateHandler);
    }
    updateEditorHandler();
    return clearUpdateEditorHandler;
  }
...

or something like that, so it tracks state more robustly?

[GauravVBhambhani]

Sure! I'll look into it.

[halfline]

you have some trailing whitespace here I think.

[GauravVBhambhani]

That's just to make it more readable.

[halfline]

you already have line breaks for readability... i'm talking about after prop.hasText there's a space before the line break. same with at the end of the ? "text-..." line

[halfline]

this looks good to me. only other change I would recommend (aside from the whitespace nit above) is squashing the two commits together and using something like my proposed commit message for clarity.

❯ git reset HEAD~2

❯ git commit -a -m "chat: Improve look and feel of enter button

The chat view for continue currently features a submit button that looks like an enter key icon.

This metaphor isn't ideal, since many keyboards these days don't use that icon. Furthermore, there are some sensitivity issues:

 - The styling of the button makes it sometimes appear insensitive when when it's active
 - The button is active sometimes when it shouldn't be (when there is no user input).

This commit addresses those issues, by switching to a more modern airplane icon instead of a return key icon, using vscode theme colors for styling, and marking the button insensitive when there is no user input, respectively."

❯ git push --force 

or similar

[halfline]

lgtm

[sestinj]

@GauravVBhambhani thanks for taking the time to make this PR, and @halfline for the preliminary review! The change in button icon and size is not something we will be willing to merge, as it appears a bit clunkier than we would wish for, however the sensitivity issues would be important to solve. Would you be interested in making those updates in a separate PR, or just adjusting this one to remove the change in appearance?

[halfline]

Obivously, your call, Nate, but just for completeness I want to make my case and try to change your mind 😉

My arguments:

• From a UX perspective it's better if the button represents what the action does, i.e.g, "send out the message", not what keybinding is associated with the action.
• ⏎ is an old metaphor that rarely appears on keyboards anymore (not quite as archaic as using 💾 for save icon, but close)
• None of Co-Pilot, ChatGPT, meta.ai, gemini, molmo. or claude.ai use the ⏎ . they all use either a straight arrow or an airplane. (cursor follows suit though)

What would you think about using a straight arrow instead? Or what about if a clear background was used?