compose_box: Use inline syntax on upload for image and audio by MritunjayTiwari14 · Pull Request #2188 · zulip/zulip-flutter

MritunjayTiwari14 · 2026-02-28T11:47:53Z

Fixes #2178.
Fixes #2179.

Changes

Image Upload

Before	After
before.webm	after.webm

Audio Upload (No visual changes)

Before	After
before_audio.webm	after_audio.webm

References

General description: Use new inline-image syntax on upload #2178
Web PR: markdown: Utilize ![title](url) for audio uploads. zulip#38065
Chat thread

Copilot

Pull request overview

Updates the compose box’s upload insertion logic to use Zulip’s inline-media Markdown syntax for image/audio uploads, aligning Flutter behavior with recent server/web changes and removing filename captions in rendered media.

Changes:

Generate ![]() Markdown for image (and audio) uploads in the compose box, including the “Uploading …” placeholder.
Track whether an upload is image/audio so the final replacement uses the correct Markdown syntax.
Update unit/widget tests to expect the new syntax for images.

Reviewed changes

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

File	Description
lib/widgets/compose_box.dart	Switch upload placeholder/final insertion to `![]()` for `image/` and `audio/` MIME types.
lib/model/compose.dart	Add `inlineImageOrAudio` helper for generating `![]()` syntax.
test/widgets/compose_box_test.dart	Update compose-box widget test expectations for image/GIF uploads to `![]()`.
test/model/compose_test.dart	Update model test to cover `inlineImageOrAudio`.

Comments suppressed due to low confidence (1)

test/model/compose_test.dart:383

This test is still named inlineLink but now also asserts behavior of inlineImageOrAudio, which makes the test intent less clear when it fails. Consider renaming the test (or splitting) so the name matches what it's covering.

  test('inlineLink', () {
    check(inlineLink('CZO', 'https://chat.zulip.org/')).equals('[CZO](https://chat.zulip.org/)');
    check(inlineLink('Uploading file.txt…', '')).equals('[Uploading file.txt…]()');
    check(inlineImageOrAudio('IMG_2488.png', '/user_uploads/2/a3/ucEMyjxk90mcNF0y9rmW5XKO/IMG_2488.png'))
      .equals('![IMG_2488.png](/user_uploads/2/a3/ucEMyjxk90mcNF0y9rmW5XKO/IMG_2488.png)');

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

lib/widgets/compose_box.dart

lib/model/compose.dart

chrisbobbe · 2026-03-04T00:36:18Z

From a quick look it looks like this part isn't done:

#2178 (comment)

I would recommend generating this syntax starting with feature level 467 (https://zulip.com/api/message-formatting#changes-to-image-formatting).

We should avoid producing this syntax when it'll look broken because the server is too old to support it.

(Similarly for audio files; I'm not sure if the feature level threshold is the same.)

MritunjayTiwari14 · 2026-03-05T10:33:43Z

Added server-12 TODO's and respective comments with functionality for discarding if the server version is lower than 12, @chrisbobbe PTAL.

For why i marked Audio Inline Syntax support from server-12, please see: #mobile > issue mislabled with server-12 than server-11

Khader-1

Thanks @MritunjayTiwari14! a few notes bellow. Additionally, I'd add more test cases:

When the server level is below 467, test that image uploads still use []() syntax (not ![]())
Widget tests to cover audio files, not just images

lib/model/compose.dart

lib/widgets/compose_box.dart

test/model/compose_test.dart

MritunjayTiwari14 · 2026-03-10T12:24:45Z

Thanks, Khader, for the review. Have pushed some changes. Please take a look whenever you get time.

Khader-1

Thanks for the revision @MritunjayTiwari14, code changes LGTM aside from one nit bellow, regarding commits structure, I'd consider squashing both of them into a single commit as I think the first one is overly minimal

Finally, a nit on the commit description:
use Fixes: #[issue number] syntax

compose_box: Use inline syntax on upload for image and audio

Fixes: #2178
Fixes: #2179

Previously, we used standard link text for handling uploaded images
and audio. Zulip Server 12.0 (FL-467) introduced support for the standard
CommonMark syntax for image and audio, we must update the Flutter client to match
and generate the \`![]()\` syntax for these file types.

reference:
  https://spec.commonmark.org/0.30/#image-description

With that said, approving, Let's now request your review @rajveermalviya

lib/model/compose.dart

MritunjayTiwari14 · 2026-03-13T12:43:43Z

Finally, a nit on the commit description: use Fixes: #[issue number] syntax

With that said, approving! Let's now request your review @rajveermalviya

Thanks for the suggestions 🙂, but since recently we have been using a different "Fixes" format, as mentioned by Greg here.

MritunjayTiwari14 · 2026-03-31T11:03:38Z

@rajveermalviya Waiting for your review on this...

rajveermalviya

Thanks for working on this @MritunjayTiwari14. Comments below.

rajveermalviya · 2026-04-08T11:34:53Z

test/model/compose_test.dart

+  test('inlineImageOrAudio with FL<467', () { // TODO(server-12): remove this test
+    final store = eg.store(account: eg.account(user: eg.selfUser, zulipFeatureLevel: 466),
+      initialSnapshot: eg.initialSnapshot(zulipFeatureLevel: 466));
+    check(inlineImageOrAudio('IMG_2488.png', '/user_uploads/2/a3/ucEMyjxk90mcNF0y9rmW5XKO/IMG_2488.png', store: store))
+        .equals('[IMG_2488.png](/user_uploads/2/a3/ucEMyjxk90mcNF0y9rmW5XKO/IMG_2488.png)');
+    check(inlineImageOrAudio('foo_bar.mp3', '/user_uploads/2/a3/ucEMyjxk90mcNF0y9rmW5XKO/foo_bar.mp3', store: store))
+        .equals('[foo_bar.mp3](/user_uploads/2/a3/ucEMyjxk90mcNF0y9rmW5XKO/foo_bar.mp3)');


I don't think it sounds correct to name this function inline when it can generate markdown which will not result in image or audio previews rendered inline.

rajveermalviya · 2026-04-08T11:44:52Z

lib/model/compose.dart

+String inlineImageOrAudio(String visibleText, String destination, {
+  required PerAccountStore store,
+}) {
+  // While the Audio Inline syntax was introduced in server-11(FL-405),
+  // it is not recommended for widespread use until 12. Discussion:
+  // https://chat.zulip.org/#narrow/channel/48-mobile/topic/issue.20mislabled.20with.20server-12.20than.20server-11/with/2398267
+  // TODO(server-12): simplify and remove comment
+  return store.zulipFeatureLevel >= 467
+    ? '![$visibleText]($destination)'
+    : '[$visibleText]($destination)';


By following that thread, I see that inline image links should be generated from feature level 467 (as per this message). But do not see any discussion that indicates inline audio previews should be generated from same feature level. Only relevant indication I see is that #2179 is marked with "server-12" label.

Should both inline image and inline audio link generation handled separately?

Good question, it might happen that the inline audio syntax was recommended to use from a different feature level. As I too was not able to find the exact FL for that. I have started discussing that on #api documentation > which FL for inline audio syntax.

lib/widgets/compose_box.dart

test/widgets/compose_box_test.dart

…e syntax Post FL-467, Zulip recommends using the Inline Markdown syntax (\`![](...)\`) for images and audio. We should also add support for that. To generate the correct inline input syntax in compose_box, we have defined a helper function `imageAudioLink`.

Fixes zulip#2178. Fixes zulip#2179. Previously, we used standard link text for handling uploaded images and audio. Zulip Server 12.0 (FL-467) introduced widespread support for the standard CommonMark (inline) syntax for image and audio. We must update the Flutter client to match and generate the \`![]()\` syntax on input for these file types. We used mime type to capture these types of media, and process their input syntax using `imageAudioLink`. note: - Audio player syntax was introduced in server-11 (FL-405), but paired up with image input syntax, it was recommended for widespread use by clients post server-12 (FL-467). For more details on this, See Api Changelog and this: https://chat.zulip.org/#narrow/channel/412-api-documentation/topic/which.20FL.20for.20inline.20audio.20syntax/with/2429954 reference: https://spec.commonmark.org/0.30/#image-description

MritunjayTiwari14 · 2026-04-11T06:08:05Z

I have pushed new changes @rajveermalviya, PTAL.

Difference made since the last round:

We don't even need to pass store in registerUploadStart and registerUploadEnd, we can use it without that, since store was already declared and initialized inside the abstract class ComposeController, which is inherited by ComposeContentController.
Changed the name of the inlineImageOrAudio function to imageAudioLink for better comprehension. Since we are not using inline, we append Link, which produces a cue that it is a Link.
Reproduced the TODO from the image success test as it is, in the newly created audio success test.

MritunjayTiwari14 marked this pull request as draft March 1, 2026 02:34

MritunjayTiwari14 marked this pull request as ready for review March 1, 2026 02:38

Copilot AI review requested due to automatic review settings March 1, 2026 02:38

Copilot started reviewing on behalf of MritunjayTiwari14 March 1, 2026 02:39 View session

Copilot AI reviewed Mar 1, 2026

View reviewed changes

lib/widgets/compose_box.dart Outdated Show resolved Hide resolved

lib/widgets/compose_box.dart Outdated Show resolved Hide resolved

lib/model/compose.dart Outdated Show resolved Hide resolved

MritunjayTiwari14 force-pushed the pr-inline_imageAudio branch from 392dcd0 to 934f3c1 Compare March 1, 2026 10:16

MritunjayTiwari14 marked this pull request as draft March 4, 2026 09:06

MritunjayTiwari14 force-pushed the pr-inline_imageAudio branch from 934f3c1 to 32969fe Compare March 4, 2026 10:48

MritunjayTiwari14 marked this pull request as ready for review March 4, 2026 10:49

MritunjayTiwari14 marked this pull request as draft March 4, 2026 14:56

MritunjayTiwari14 force-pushed the pr-inline_imageAudio branch from 32969fe to 7c38f62 Compare March 5, 2026 10:31

MritunjayTiwari14 marked this pull request as ready for review March 5, 2026 10:32

gnprice added the maintainer review PR ready for review by Zulip maintainers label Mar 5, 2026

gnprice assigned rajveermalviya Mar 5, 2026

Khader-1 reviewed Mar 8, 2026

View reviewed changes

MritunjayTiwari14 force-pushed the pr-inline_imageAudio branch 2 times, most recently from 255aef5 to 1a3ec30 Compare March 10, 2026 12:23

MritunjayTiwari14 requested a review from Khader-1 March 10, 2026 12:23

Khader-1 approved these changes Mar 12, 2026

View reviewed changes

lib/model/compose.dart Show resolved Hide resolved

Khader-1 requested a review from rajveermalviya April 1, 2026 09:00

rajveermalviya requested changes Apr 8, 2026

View reviewed changes

MritunjayTiwari14 added 2 commits April 11, 2026 11:00

MritunjayTiwari14 force-pushed the pr-inline_imageAudio branch from 1a3ec30 to cc5d483 Compare April 11, 2026 05:57

MritunjayTiwari14 requested a review from rajveermalviya April 11, 2026 06:08

Conversation

MritunjayTiwari14 commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Image Upload

Audio Upload (No visual changes)

References

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chrisbobbe commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MritunjayTiwari14 commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Khader-1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MritunjayTiwari14 commented Mar 10, 2026

Uh oh!

Khader-1 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MritunjayTiwari14 commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MritunjayTiwari14 commented Mar 31, 2026

Uh oh!

rajveermalviya left a comment

Choose a reason for hiding this comment

Uh oh!

rajveermalviya Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

rajveermalviya Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

MritunjayTiwari14 Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MritunjayTiwari14 commented Apr 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

MritunjayTiwari14 commented Feb 28, 2026 •

edited

Loading

chrisbobbe commented Mar 4, 2026 •

edited

Loading

MritunjayTiwari14 commented Mar 5, 2026 •

edited

Loading

Khader-1 left a comment •

edited

Loading

MritunjayTiwari14 commented Mar 13, 2026 •

edited

Loading

MritunjayTiwari14 Apr 9, 2026 •

edited

Loading