#134 [feat] Integrate new Image component into ChatView and MediaView

[Anonymous]

Originally created by: supreme-gg-gg

Summary

• Brings in the new <Image> component to ChatView to close [#104]
• Patches [#121], [#102] with the unified component to replace the ascii only rendering

Note

Will update to use the library once its published instead of in-house 😄
The next PR will be merging ts-migration/main into main for a development release and a bunch of devops updates

[Anonymous]

Originally posted by: supreme-gg-gg

@endernoke can you test this as well, I noted that sometimes in Message List the next text message overlaps with the image box but this only happened on iTerm2 it works fine on Kitty, I also cannot figure out why this would happen because the Box component is directly above Text and the Image rendering itself is fine.

Plus, do we have a way to figure out the proper width and height of the <Box> component wrapping the <Image> currently I just took the constant value from the test-image command lol

[Anonymous]

Originally posted by: endernoke

@endernoke can you test this as well, I noted that sometimes in Message List the next text message overlaps with the image box but this only happened on iTerm2 it works fine on Kitty, I also cannot figure out why this would happen because the Box component is directly above Text and the Image rendering itself is fine.

Sure I'll test tonight

Plus, do we have a way to figure out the proper width and height of the <Box> component wrapping the <Image> currently I just took the constant value from the test-image command lol

Bro the image component will dynamically resize to fit within the parent container if not provided with a explicit width and height value lmao

[Anonymous]

Originally posted by: supreme-gg-gg

@endernoke can you test this as well, I noted that sometimes in Message List the next text message overlaps with the image box but this only happened on iTerm2 it works fine on Kitty, I also cannot figure out why this would happen because the Box component is directly above Text and the Image rendering itself is fine.

Sure I'll test tonight

Plus, do we have a way to figure out the proper width and height of the <Box> component wrapping the <Image> currently I just took the constant value from the test-image command lol

Bro the image component will dynamically resize to fit within the parent container if not provided with a explicit width and height value lmao

Yes I mean do we have a way to figure out the size of the parent container lol (which is Box). When I just let the Image component rot by itself like <Text> apparently it just resized to the default minimum size of one col and one row, it only works if I wrap it in a Box with a defined (either static or dynamic) size

[Anonymous]

Originally posted by: endernoke

@endernoke can you test this as well, I noted that sometimes in Message List the next text message overlaps with the image box but this only happened on iTerm2 it works fine on Kitty, I also cannot figure out why this would happen because the Box component is directly above Text and the Image rendering itself is fine.

Sure I'll test tonight

Plus, do we have a way to figure out the proper width and height of the <Box> component wrapping the <Image> currently I just took the constant value from the test-image command lol

Bro the image component will dynamically resize to fit within the parent container if not provided with a explicit width and height value lmao

Yes I mean do we have a way to figure out the size of the parent container lol (which is Box). When I just let the Image component rot by itself like <Text> apparently it just resized to the default minimum size of one col and one row, it only works if I wrap it in a Box with a defined (either static or dynamic) size

wait what 💀 I think if the default image shrinks to 1x1 then it's an issue with the flexGrow of the parent box container not the image itself
If you really need to know the dimensions of a box you can use measureElement(node) from official Ink or the usePosition custom hook I wrote for image, you can find example usages in halfBlock and sixel components.

[Anonymous]

Originally posted by: endernoke

Overlap issue might be related to https://github.com/vadimdemedes/ink/issues/602

[Anonymous]

Originally posted by: endernoke

Turns out we need to manually set flexGrow to 1 AND flexShrink to 0 so container boxes won't try to shrink beyond width of its children if there's insufficient space.

[Anonymous]

Originally posted by: endernoke

@supreme-gg-gg should be ready for review and merge now

[Anonymous]

Originally posted by: supreme-gg-gg

Bro I think technical debt creditors just hate me lmao 😭 😭

When I run everything directly sometimes the Input Box is overlapped, but if I resize the terminal properly it will work fine, idk if this can be fixed:

Ok then I tried to remove the width and height hardcoded to the Box wrapping image as I said above:

So it seems like we cannot remove the width and height hardcoded since it just makes the image disappear / extremely small if we don't specify a width and height?

By that I mean:

<Box
    borderStyle="round"
    borderColor="cyan"
    width={32}
    height={17}
    flexDirection="column"
>
    <Image src={imageUrl} alt="Sent image" protocol={imageProtocol} />
</Box>

Even more funny is that when running feed it just broke saying cannot get terminal context, but obviously nothing was changed in the file.

file:///Users/supremegg/Documents/GitHub/instagram-cli/instagram-ts/dist/ui/context/TerminalInfo.js:63
                throw new Error('Failed to determine terminal size in pixels.');
                      ^

Error: Failed to determine terminal size in pixels.
    at queryTerminalInfo (file:///Users/supremegg/Documents/GitHub/instagram-cli/instagram-ts/dist/ui/context/TerminalInfo.js:63:23)

Seems like the query just timed out or was null? But this was working fine before.

Would appreciate if you can send me some screenshot of how it looks like on your side or if it's also broken. I'm extremely confused because a few weeks back they all work fine, now it's broken after just sitting there lmao

[Anonymous]

Originally posted by: supreme-gg-gg

EDIT: I was able to workaround the terminal provider info error by adding:

if (!pixelDimensionsResponse) {
        // Fallback to default values when terminal doesn't respond to escape sequence
        // This commonly happens in some terminal environments or CI/CD
        const defaultCellWidth = 8; // Common monospace font width
        const defaultCellHeight = 16; // Common monospace font height

        dimensions = {
            viewportWidth: process.stdout.columns * defaultCellWidth,
            viewportHeight: process.stdout.rows * defaultCellHeight,
            cellWidth: defaultCellWidth,
            cellHeight: defaultCellHeight,
        };

@endernoke if this bug also happens on your terminal perhaps it is caused by some underlying mistake / technical debt I left when I changed queryEscapeSequence, but otherwise I think we can just add something like this to patch debt with debt lmao (if this is not reproducible)

[Anonymous]

Originally posted by: endernoke

When I run everything directly sometimes the Input Box is overlapped, but if I resize the terminal properly it will work fine, idk if this can be fixed:

Reproduceable, I think this is technical debt of Ink not ours 😭

So it seems like we cannot remove the width and height hardcoded since it just makes the image disappear / extremely small if we don't specify a width and height?

Assuming I implemented the image resizing correctly (maybe I didn't 💀 ), I guess Ink's flexbox decided images should be that small by default when distributing space.

Even more funny is that when running feed it just broke saying cannot get terminal context, but obviously nothing was changed in the file.

This is weird lmao I tried feed yesterday and it was working...

[Anonymous]

Originally posted by: supreme-gg-gg

When I run everything directly sometimes the Input Box is overlapped, but if I resize the terminal properly it will work fine, idk if this can be fixed:

Reproduceable, I think this is technical debt of Ink not ours 😭

So it seems like we cannot remove the width and height hardcoded since it just makes the image disappear / extremely small if we don't specify a width and height?

Assuming I implemented the image resizing correctly (maybe I didn't 💀 ), I guess Ink's flexbox decided images should be that small by default when distributing space.

Even more funny is that when running feed it just broke saying cannot get terminal context, but obviously nothing was changed in the file.

This is weird lmao I tried feed yesterday and it was working...

Ok let's assume the first two are technical debt of Ink cuz if it works it works, it's really hard to see where Ink breaks since we have custom implementation everywhere lol

The last one sounds like black magic tho cuz obviously no code change was made to that, and the endpoint works cuz if I add the code for fallback it works fine

[Anonymous]

Originally posted by: endernoke

I couldn't reproduce the feed escape sequence issue, heisenbug discovered lmao
Did you experience this every time, or it's like 1 in 10 of the times, I guess when there're user input exactly when the escape sequence is being queried the listener might pick up the wrong data.
Could u commit the fallback thx

[Anonymous]

Originally posted by: supreme-gg-gg

the bug is gone now. All the other UI related issues can be solved by literally just resizing your terminal lmao (verified). Will merge after resolving conflicts 😄

[Anonymous]

Ticket changed by: endernoke

• status: open --> closed