Clear the composer preview after sending a message. (#34116)

* Clear the composer preview after sending a message.

* fixup

apps/web/playwright/e2e/links/composer-url-preview.spec.ts

@@ -36,10 +36,14 @@ test.describe("Composer URL preview", () => {
                 );
 
                 await page.goto(`#/room/${room.roomId}`);
-                const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+                const composerRegion = page.getByRole("region", { name: "Message composer" });
+                const composer = composerRegion.getByRole("textbox", { name: "Send an unencrypted message…" });
                 await composer.pressSequentially("https://example.org/");
-
+                const preview = composerRegion.getByRole("link", { name: "Example Site" });
-                await expect(page.getByRole("link", { name: "Example Site" })).toBeVisible();
+                await expect(preview).toBeVisible();
+                await composer.press("Enter");
+                await expect(composer).toBeEmpty();
+                await expect(preview).toBeHidden();
             });
 
             test("does not show a preview when the server returns a 404", async ({ page, app, room }) => {

apps/web/src/components/views/rooms/MessageComposer.tsx

@@ -395,6 +395,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     };
 
     private sendMessage = async (): Promise<void> => {
+        this.setState({ urlPreviewComposerContent: "" });
         if (this.state.haveRecording && this.voiceRecordingButton.current) {
             // There shouldn't be any text message to send when a voice recording is active, so
             // just send out the voice recording.

apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx

@@ -34,7 +34,8 @@ export function MessageComposerUrlPreviewWrapper({ content }: { content: string
             void vm.updateWithText(content);
         },
         [vm, content],
-        DEBOUNCE_REQUEST_TIMEOUT_MS,
+        // Update instantly if content is empty (e.g. sent message or cleared input)
+        content ? DEBOUNCE_REQUEST_TIMEOUT_MS : 0,
     );
 
     useEffect(() => {