[Conversations UI kit] Chatlog - image rendering capability

[dreamealist]

Background

I am currently designing a "Chat Try It Out" feature for Conversations, with development expected to commence in late Q3-Q4. This feature is intended to help Conversations users learn how to utilize the Conversations JavaScript SDK and build chat application use cases.

One crucial aspect of the SDK is its ability to send media files; we aim to demonstrate this in the "Chat Try It Out" sandbox. Additionally, this try it out will also showcase a guide and examples of codes from the Paste Conversations UI kit, which is intended to introduce chat components to developer users.

Feedback

The issue is that the current Conversations UI Kit chat log component lacks an example that illustrates image rendering. We hope to align with Paste by incorporating an image rendering example in the UI kit. Before proceeding with our development, we'd like to determine if Paste can support this instance.

Stage of design

Here is a UI design that shows the image sending example in the chat.
https://www.figma.com/file/XEudA6Xdhv4oRPPG7tkneY/Conversations-Chat-Try-it-Out-(SDK%2FApp)?type=design&node-id=162%3A101565&mode=design&t=0PdJ0JLnGC2ilsBo-1

Here is the clickable prototype:
https://www.figma.com/proto/XEudA6Xdhv4oRPPG7tkneY/Conversations-Chat-Try-it-Out-(SDK%2FApp)?page-id=0%3A1&type=design&node-id=1-74017&viewport=428%2C-594%2C0.35&t=ugCbFWisb1hEWdJG-1&scaling=scale-down&starting-point-node-id=251%3A125536&show-proto-sidebar=1&mode=design

Research

No response

Relevant links

Conversations SDK's media sending feature: https://www.twilio.com/docs/conversations/sending-messages-and-media

Are you looking for visual design support?

• Yes

Additional Information

No response

[dreamealist]

cc @loreina @shleewhite @serifluous
I will bring this agenda to the office hour this thursday!

[dreamealist]

[serifluous]

Hey @dreamealist ! The Conversations UI Kit can definitely support media files. You can also use the Aspect Ratio component in a chat bubble so the image resizes appropriately: https://paste.twilio.design/components/aspect-ratio

I'll create a ticket in our backlog to add a slot variant in Figma to our chat bubbles so you can mock it up more easily.

I'm interested in chatting about the second screenshot you shared and what the intent of the tooltip is.

[serifluous]

Thanks for coming to office hours! Here's the link to the recording https://twilio.zoom.us/rec/share/3teOI_Le1bUKBVDuBnyXhXGEg06pCJ1TCd05SYTqUktOsHRcrvFdjpxsk9tcvF-c.h-Y-1EHjWO_aJtU3

You can find the password in our slack channel.

[serifluous]

Hey @dreamealist ! We just published a new slot variant of the Chat Bubble in the Paste Components Figma library so you can use it for images now.