UX: improves composer and thread panel (#21210)

This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step.

### New features included in this PR

- A resizable side panel
- A clear dropzone area for uploads
- A simplified design for image uploads, this is only a first step towards more redesign of this area in the future

### Notable fixes in this PR

- Correct placeholder in thread panel
- Allows to edit the last message of a thread with arrow up
- Correctly focus composer when replying to a message
- The reply indicator is added instantly in the channel when starting a thread
- Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content

### Technical notes

To achieve this PR, three important changes have been made:

- `<ChatComposer>` has been fully rewritten and is now a glimmer component
- The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage`
- `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>`

Note ".chat-live-pane" has been renamed ".chat-channel"

Design for upload dropzone is from @chapoi
This commit is contained in:
Joffrey JAFFEUX
2023-04-25 10:23:03 +02:00
committed by GitHub
parent 02625d1edd
commit bf886662df
82 changed files with 1872 additions and 1337 deletions

View File

@ -86,8 +86,6 @@ module("Discourse Chat | Component | chat-composer-upload", function (hooks) {
);
assert.true(exists("img.preview-img[src='/images/avatar.png']"));
assert.strictEqual(query(".file-name").innerText.trim(), "bar_image.png");
assert.strictEqual(query(".extension-pill").innerText.trim(), "png");
});
test("removing completed upload", async function (assert) {
@ -106,7 +104,7 @@ module("Discourse Chat | Component | chat-composer-upload", function (hooks) {
hbs`<ChatComposerUpload @isDone={{true}} @upload={{this.upload}} @onCancel={{fn this.removeUpload this.upload}} />`
);
await click(".remove-upload");
await click(".chat-composer-upload__remove-btn");
assert.strictEqual(this.uploadRemoved, true);
});
@ -126,7 +124,7 @@ module("Discourse Chat | Component | chat-composer-upload", function (hooks) {
hbs`<ChatComposerUpload @upload={{this.upload}} @onCancel={{fn this.removeUpload this.upload}} />`
);
await click(".remove-upload");
await click(".chat-composer-upload__remove-btn");
assert.strictEqual(this.uploadRemoved, true);
});
});