feat: basic chat UI #8
Conversation
src/components/chat-input.scss
Outdated
| &.send { | ||
| order: 2; | ||
| } |
There was a problem hiding this comment.
I'm sure UI will be handled later, but it's odd that the 'send' button is different styling from the other 3 buttons (grey & square rather than blue & rounded).
There was a problem hiding this comment.
True. It will be changed later, but since it's easy, I've updated the CSS so it matches the others.
src/components/chat-input.tsx
Outdated
| // const [browserSupportsDictation, setBrowserSupportsDictation] = useState(false); | ||
| // const [dictationEnabled, setDictationEnabled] = useState(false); | ||
| const [inputValue, setInputValue] = useState(""); | ||
| const [showPlaceholder, setShowPlaceholder] = useState(true); |
There was a problem hiding this comment.
Why do you need to track this? Placeholder should automatically be shown only when the input is empty.
There was a problem hiding this comment.
I mistakenly thought we didn't want the placeholder text to reappear when the input was cleared after submitting a message. Looking at the specs again, I see that is not the case. So I've dropped that in the latest commit.
| &:nth-child(odd) { | ||
| background: $light-teal-2; | ||
| } |
There was a problem hiding this comment.
Maybe it doesn't matter, but it seems like the background color should be based on the speaker, not just message order.
There was a problem hiding this comment.
Yeah, I think that's right. Lucy is working on making it that way in the debug logging branch she's currently working on.
| const form = event.target as HTMLInputElement; | ||
| const shortcut = form.querySelector("input")?.value; | ||
| if (shortcut) { | ||
| onCustomizeShortcut?.(shortcut); |
There was a problem hiding this comment.
You should probably do a trim on the input. I thought I broke it when I just had a space after the shortcut.
| "Equal": { shifted: "+", unshifted: "=" } | ||
| }; | ||
|
|
||
| export const isShortcutPressed = (pressedKeys: Set<string>, shortcutKeys: string): boolean => { |
There was a problem hiding this comment.
I wonder if you could avoid some of this complexity by using a hotkeys library like CLUE does.
There was a problem hiding this comment.
@bgoldowsky Thanks. I did try some libraries previously, but the ones I tried didn't play nicely with the need to set the shortcut listener in both the plugin and in the main CODAP window. I think maybe the one CLUE uses may not have that problem, though. I'll give it a try.
There was a problem hiding this comment.
I tried out is-hotkey. It was promising in that it did work for both adding a listener to the plugin and the main CODAP window. I ran into another issue, though, with the shift key which I couldn't get around. I think there must be a solution to that, but it's not obvious to me at this point. I'm going to leave the existing shortcut-handling code for now. I do think using a library would be better, though, and will make sure we revisit the idea after the UI gets refined.
These changes set up the basic UI for the chat interface.